/* BY HOME — палитра, шапка и подвал: общие для всех страниц. */
:root{
  /* Палитра — единственное место, где задаются цвета сайта (аудит 23.09).
     Один акцент на все главные действия; контраст текста не ниже 4,5:1. */
  --bg:#fbfaf7; --panel:#f3f1ec; --panel2:#ece9e2; --line:#e7e3db; --line2:#dcd8ce;
  --stone:#f2efe9;                       /* фон под фото товара */
  --ink:#1b1b19; --soft:#6f6d66; --soft2:#8f8c84;
  --dark:#1b1b19;
  --accent:#355d86; --accent-d:#2c4f73;  /* синий — выбор Светланы 23.09; «В корзину», «Оформить», «Найти» */
  --green:#5f8a5d; --green-cta:var(--accent);
  --sale:#a4481f;                        /* только цена со скидкой */
  --orange:var(--sale); --orange-d:var(--sale);
  --brass:#8a6a3a; --brass-dark:#d8bd93; /* тонкие линии и мелкие подписи */
  --r:14px; --rs:10px; --shadow:0 1px 2px rgba(20,18,14,.04);
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --max:clamp(1320px, calc(100vw - 48px), 1680px); /* на широком экране страница занимает свободное место, а не пустые поля */
}

/* Шапка и подвал живут и на страницах со своими стилями (блог, контакты),
   поэтому всё базовое для них задано здесь, в пределах самих блоков. */
/* Фон страницы — общий для всех страниц, в тон шапке */
html body{background:var(--bg)}

/* :where — нулевая сила правила: базовое не перебивает цвета кнопок ниже */
:where(.hdr,.nav,.ftr){font-family:"Manrope",system-ui,sans-serif;color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
:where(.hdr,.nav,.ftr) *{box-sizing:border-box}
:where(.hdr,.nav,.ftr) a{color:inherit;text-decoration:none}
:where(.hdr,.nav,.ftr) button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:where(.hdr,.nav) svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lwrap{max-width:var(--max);margin:0 auto;padding:0 20px}
:where(.ftr) p{margin:0}

/* ░ HEADER ░ */
.hdr{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-row{display:flex;align-items:center;gap:26px;height:78px}
.logo{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.logo-mark{font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:.04em;line-height:1}
.logo-sub{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.search{flex:1;display:flex;align-items:center;height:50px;background:#fff;border:1.5px solid var(--ink);
  border-radius:999px;padding:0 6px 0 18px;position:relative;max-width:680px}
.search-ic{width:19px;height:19px;color:var(--soft);flex-shrink:0;stroke-width:2}
.search input{flex:1;border:none;outline:none;font-size:14px;padding:0 12px;background:transparent;color:var(--ink)}
.search input::placeholder{color:var(--soft2)}
.search-btn{height:38px;padding:0 24px;background:var(--accent);color:#fff;border-radius:999px;font-weight:600;font-size:14px;flex-shrink:0}
.search-btn:hover{background:var(--accent-d)}
.hdr-phone{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;flex-shrink:0}
.hdr-phone:hover{color:var(--orange-d)}
.actions{display:flex;gap:22px;flex-shrink:0}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink);position:relative}
.act svg{width:23px;height:23px;stroke-width:1.6}
.act:hover{color:var(--orange-d)}
.act-ic{position:relative;display:grid;place-items:center}
.dot{position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;border-radius:999px;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid #fff;stroke:none}
.dot-g{background:var(--green)}.dot-d{background:var(--ink)}

/* ░ NAV ░ */
.nav{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:78px;z-index:30}
.nav-row{display:flex;align-items:center;gap:8px;height:54px}
.catbtn{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;height:38px;padding:0 18px;
  border-radius:9px;font-weight:600;font-size:13.5px;flex-shrink:0;margin-right:12px}
.catbtn svg{width:18px;height:18px;stroke-width:2}
.catbtn:hover{background:var(--accent-d)}
.nav-links{display:flex;align-items:center;gap:3px;overflow:hidden;flex:1}
.nav-links a{padding:8px 13px;border-radius:8px;font-size:13.5px;font-weight:500;white-space:nowrap;color:#2c2b27}
.nav-links a:hover{background:var(--panel)}
.nav-links a.sale{color:var(--orange-d);font-weight:700}
.nav-arr{display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);opacity:.55;vertical-align:middle}
.nav-links a.on{background:var(--ink);color:#fff}

/* ░ FOOTER ░ */
.ftr{background:#1b1b19;color:#e8e6df;margin-top:0;padding:46px 0 26px}
.ftr-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px}
.ftr-brand .logo-mark{color:#fff}
.ftr-brand p{margin-top:12px;font-size:13px;color:#9b998f;line-height:1.6;max-width:34ch}
.ftr-col{display:flex;flex-direction:column;gap:9px}
.ftr-col b{font-size:13px;margin-bottom:4px}
.ftr-col a,.ftr-col span{font-size:13px;color:#9b998f}
.ftr-col a:hover{color:var(--brass-dark)}
/* Подписка в подвале. Согласие стоит под кнопкой, а не над полем: сначала
   человек понимает, что подписывается, и только потом — на каких условиях. */
.nl{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between}
.nl-text b{display:block;font-size:15px;margin-bottom:4px}
.nl-text span{font-size:12.5px;color:#a5a29a;max-width:420px;display:block;line-height:1.5}
.nl-form{display:flex;flex-wrap:wrap;gap:8px;max-width:460px;flex:1 1 320px}
.nl-form input[type=email]{flex:1 1 220px;height:44px;padding:0 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e8e6df;font:inherit;font-size:13.5px}
.nl-form input[type=email]::placeholder{color:#76746c}
.nl-form button{height:44px;padding:0 20px;border:0;border-radius:10px;background:#e8e6df;color:#1b1b19;
  font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.nl-form button:disabled{opacity:.6;cursor:default}
.nl-agree{flex:1 1 100%;display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:#a5a29a;line-height:1.45;cursor:pointer}
.nl-agree input{margin-top:2px;accent-color:#e8e6df}
.nl-agree a{color:#a5a29a;text-decoration:underline}
.nl-msg{flex:1 1 100%;font-size:12px;color:#e0a37a;margin:0}
.nl-msg.ok{color:#9ec5a5}
@media(max-width:620px){.nl{flex-direction:column;gap:16px}}

.ftr-foot{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#76746c}

.act.act-on{ color:var(--orange-d); }
.act.act-on .act-ic{ filter:drop-shadow(0 0 0 var(--orange-d)); }

@media(max-width:880px){
  /* Телефон: логотип и значки одной строкой, поиск второй; телефон магазина —
     в «Заказать звонок» и в подвале, в шапке ему места нет. */
  .hdr-row{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .logo{order:1}.actions{order:2;margin-left:auto}.search{order:3;flex-basis:100%;max-width:none;height:44px}
  .search-btn{height:34px;padding:0 16px}
  .hdr-phone{display:none}
  .logo-mark{font-size:21px}
  .nav{top:0;position:static}
  .nav-row{height:48px}
  .nav-links{display:none}
  .catbtn{height:36px;padding:0 14px;font-size:13px}
  .ftr-row{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .search input{font-size:13px}
  .actions{gap:16px}
  .actions .act span:not(.act-ic){display:none}
}

/* Пустые счётчики не показываем — site.js и cart.js включают их, когда есть что считать */
.dot:empty,.dot[data-zero]{display:none}

/* Меню «Каталог товаров» */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -20px rgba(20,18,14,.25);z-index:45;max-height:calc(100vh - 140px);overflow:auto}
.mega[hidden]{display:none}
.mega-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-top:26px;padding-bottom:30px}
.mega-col{display:flex;flex-direction:column;gap:7px}
.mega-col a{font-size:14px;color:var(--ink)}
.mega-col a:hover{color:var(--accent)}
.mega-col a i{font-style:normal;color:var(--soft2);font-size:12px;margin-left:3px}
.mega-top{font-family:var(--serif);font-size:22px !important;font-weight:600;margin-bottom:6px}
.mega-more{color:var(--soft) !important;font-size:13px !important;margin-top:4px}
.mega-load{padding:22px 20px;color:var(--soft);font-size:14px}
@media(max-width:880px){
  .nav{position:relative}
  .mega{max-height:70vh}
  .mega-row{grid-template-columns:1fr 1fr;gap:20px}
}

/* ── Телефон: проверка 25.09 на iPhone SE / 14 / Pro Max, Pixel 7, iPad mini ── */
@media(max-width:880px){
  /* Поля ввода не мельче 16 px: иначе iPhone при нажатии сам увеличивает страницу */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }
  /* Значки шапки — цель для пальца не меньше 40×40 */
  .act{ min-width:40px; min-height:40px; justify-content:center; }
  /* Поиск не распирает шапку на узком экране */
  .search{ min-width:0; }
  .search input{ min-width:0; width:100%; }
}
@media(max-width:374px){
  /* iPhone SE: «Заказать звонок» не помещался рядом с «Каталогом» — только значок */
  .nav .nav-call{ font-size:0; gap:0; padding:8px; }
  .nav .nav-call svg{ width:22px; height:22px; }
  .logo-mark{ font-size:19px; }
  .actions{ gap:8px; }
}

/* Заголовки страниц в две строки не разъезжаются (на страницах со своим line-height 1.6) */
main h1, .blog h1, .article h1{ line-height:1.12; }
/* Телефон горизонтально: закреплённые шапка и меню съедали треть высоты —
   при низком экране шапка прокручивается вместе со страницей */
@media(max-height:500px) and (orientation:landscape){
  .hdr{ position:static; }
  .nav{ position:relative; top:auto; } /* relative, не static: от него отсчитывается положение меню «Каталог» */
}

/* Плитки разделов при наведении на «Мебель» и др. */
.navdrop{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -20px rgba(20,18,14,.25);z-index:46}
.navdrop[hidden]{display:none}
.navdrop-in{padding-top:22px;padding-bottom:26px}
.navdrop-t{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:14px}
/* Список без картинок (Филипп 28.09): колонка группы, под ней — подразделы
   карточками-строками со стрелкой, по образцу rattan-mebel.ru. */
.navdrop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.navdrop-col{display:flex;flex-direction:column;gap:6px}
.navdrop-grouphead{font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:4px}
.navdrop-grouphead:hover{color:var(--accent)}
.navdrop-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;
  background:var(--stone);font-size:13.5px;color:var(--ink);transition:.15s}
.navdrop-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navdrop-row-cnt{font-size:12px;color:var(--soft)}
.navdrop-row-arrow{opacity:0;transform:translateX(-4px);transition:.15s;color:var(--accent)}
.navdrop-row:hover{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.navdrop-row:hover .navdrop-row-arrow{opacity:1;transform:none}
.navdrop-more{font-size:12.5px;color:var(--soft);margin-top:2px}
.navdrop-more:hover{color:var(--accent)}
.navdrop-allcat{display:block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--accent)}
@media(max-width:1120px){ .navdrop-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── Лёгкое движение: меню открывается мягко (opacity + сдвиг), закрывается сразу ── */
.mega,.navdrop{transition:opacity .18s ease-out,transform .18s ease-out}
@starting-style{.mega,.navdrop{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.mega,.navdrop{transition:none}}