/* ════════════════════════════════════════════════════════════════════ Витрина Korea Natural. Один визуальный мир — тёплый бежевый магазин. Тёмной темы у витрины нет намеренно: инвертированный в тёмное магазин косметики выглядит не «в тёмной теме», а сломанным. Все цвета заданы явно, включая фон страницы. Стили лежат отдельным файлом, а не в шаблоне: их читает каждая страница магазина, и в шаблоне они переезжали бы по копии на каждый ответ. ════════════════════════════════════════════════════════════════════ */ :root{ --ground:#FBF6EF; --card:#FFFFFF; --band:#EFE4D6; --line:#E3D3C0; --accent:#8A5A38; --accent-dp:#6F4527; --ink:#4A3320; --mut:#8A6B4F; --faint:#A8917A; --ochre:#B07A2E; --sage:#6E8F4E; --sage-bg:#EDF2E5; --r-lg:24px; --r-md:18px; --r-sm:14px; --r-xs:12px; --sh:0 2px 10px rgba(74,51,32,.06); --sh-hi:0 12px 28px rgba(74,51,32,.15); --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif; --body:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif; } *,*::before,*::after{box-sizing:border-box} /* Скрытое — скрыто. Собственные правила вроде img{display:block} перебивают стандартное действие [hidden], и элемент остаётся на виду: на этом уже дважды обожглись — на списке брендов и на галерее товара. */ [hidden]{display:none!important} /* Страница держит подвал у нижнего края окна. Без этого короткая страница (пустая корзина, «Подарочные карты», избранное) заканчивалась подвалом посреди экрана, а ниже оставалось пустое поле — на большом мониторе оно выглядит как «сайт оборвался». Колонка на всю высоту: середина тянется, подвал не сжимается. */ body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased; min-height:100vh;display:flex;flex-direction:column} body > .page{flex:1 0 auto} body > .foot{flex-shrink:0} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ═══ Оживление. Движение намеренно скупое: k-beauty — это спокойствие, дёрганый магазин читается как дешёвый, а не как живой. ═══ */ .slider{position:relative;border-radius:var(--r-lg);overflow:hidden} .slides{display:flex;transition:transform .75s cubic-bezier(.4,.02,.2,1)} /* Слайд и его содержимое одной высоты: тексты у баннеров разной длины, и без растяжки короткий слайд оставлял снизу пустую полосу — выглядело так, будто баннер обрезали. */ .slide{flex:0 0 100%;min-width:100%;display:flex} .slide .hero{margin:0;border-radius:0;flex:1;display:flex;flex-direction:column; justify-content:center;min-height:420px} @media (max-width:640px){ .slide .hero{min-height:320px} } .sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px;border-radius:50%;border:1px solid var(--line); background:rgba(255,255,255,.84);color:var(--ink);font-size:17px; display:grid;place-items:center;opacity:0;transition:opacity .25s,background .18s} .slider:hover .sl-nav,.sl-nav:focus-visible{opacity:1} .sl-nav:hover{background:#fff} .sl-prev{left:14px}.sl-next{right:14px} .sl-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex; justify-content:center;gap:8px} .sl-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0; background:rgba(74,51,32,.26);transition:width .3s,background .3s} .sl-dot.on{width:26px;border-radius:999px;background:var(--accent)} .rise{opacity:0;transform:translateY(14px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)} .rise.seen{opacity:1;transform:none} .hero::after{animation:breathe 13s ease-in-out infinite} .hero::before{animation:breathe 17s ease-in-out infinite reverse} @keyframes breathe{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-14px,10px) scale(1.06)} } /* Кнопка баннера чуть заметнее прочих: единственное действие на первом экране */ .cta{position:relative;overflow:hidden} .cta::after{content:"";position:absolute;inset:0;background: linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%); transform:translateX(-120%)} .cta:hover::after{transform:translateX(120%);transition:transform .75s ease} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .rise{opacity:1;transform:none} } /* ═══ Меню: выпадающие «Каталог» и «Бренды» ═══ */ .mainnav{display:flex;align-items:center;gap:4px;padding:6px 0 10px;flex-wrap:wrap} .mi{position:relative} .mi>button,.mi>a{display:inline-flex;align-items:center;gap:7px;background:none;border:none; padding:9px 14px;border-radius:10px;font:inherit;font-size:13.5px;font-weight:600; letter-spacing:.3px;color:var(--ink);text-transform:uppercase;transition:.16s} .mi>button:hover,.mi>a:hover,.mi.open>button{background:var(--band);color:var(--accent)} .mi .caret{font-size:9px;opacity:.55;transition:transform .2s} .mi.open .caret{transform:rotate(180deg)} .mi--accent>a{color:var(--ochre)} .drop{position:absolute;left:0;top:calc(100% + 6px);z-index:40;background:var(--card); border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(74,51,32,.16); padding:18px 20px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility 0s linear .18s} .mi.open .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s} .drop--wide{width:min(880px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px} .drop--brands{width:min(680px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px} .drop--wide .dall{grid-column:1/-1;font-weight:700;font-size:13.5px;color:var(--accent); padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--band)} .drop--wide .dall:hover{color:var(--accent-dp)} .dgroup>a.dhead{display:block;font-weight:700;font-size:13.5px;color:var(--ink); padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--band)} .dgroup>a.dhead:hover{color:var(--accent)} .dgroup a.ditem{display:flex;justify-content:space-between;gap:10px;padding:4px 0; font-size:13px;color:var(--mut)} .dgroup a.ditem:hover{color:var(--accent)} .dgroup a.ditem i{font-style:normal;font-size:11.5px;color:#BCA894} .drop--brands a{padding:5px 0;font-size:13px;color:var(--mut);display:flex; justify-content:space-between;gap:10px} .drop--brands a:hover{color:var(--accent)} .drop--brands .allbrands{grid-column:1/-1;margin-top:8px;padding-top:10px; border-top:1px solid var(--band);font-weight:600;color:var(--accent)} /* ════ Обёртка страницы ════ */ /* ⚠️ `width:100%` здесь ОБЯЗАТЕЛЕН, и вот почему. `body` — колоночный flex-контейнер. Элемент с `margin-left/right:auto` внутри такого контейнера НЕ растягивается по ширине: авто-поля забирают свободное место, и элемент получает ширину по содержимому, ограниченную лишь `max-width`. На телефоне это давало страницу шириной 1180 px при экране 390 — горизонтальная полоса на КАЖДОЙ странице витрины. Проверено опытом в браузере: убрать авто-поля или сделать body не-flex — ширина сразу 390; спрятать слайдер или обнулить слайды — по-прежнему 1180, то есть содержимое ни при чём. `width:100%` возвращает нормальное поведение: на телефоне 100 % от 390, на десктопе — ограничение `max-width` и центровка теми же авто-полями. */ .page{max-width:1180px;width:100%;margin:0 auto;padding:0 20px 70px} /* ════ Шапка магазина ════ */ .shop-hd{border-bottom:1px solid var(--line);background:var(--ground); position:sticky;top:0;z-index:50} .shop-hd .in{max-width:1180px;margin:0 auto;padding:16px 20px 0} .hd-row{display:flex;align-items:center;gap:18px} .logo{display:flex;align-items:center;gap:11px;min-width:0} .logo img{width:46px;height:46px;border-radius:50%;flex:0 0 46px} .logo-txt{font-family:var(--disp);font-size:26px;font-weight:600;line-height:1.05;white-space:nowrap} .logo-txt small{display:block;font-family:var(--body);font-size:9px;letter-spacing:2.4px; text-transform:uppercase;color:var(--mut);font-weight:600;margin-top:2px} .find{flex:1;position:relative;min-width:0} /* ТОЛЬКО прямой потомок — иконка лупы. Через пробел (`.find span`) правило накрывало и спаны выпадашки подсказок, которая лежит внутри этой же формы: картинка, название и цена каждого товара получали absolute в одной точке и рисовались друг поверх друга, а строки схлопывались до высоты текста. Любой новый слой внутри `.find` наступит на те же грабли — селектор здесь обязан оставаться прямым. */ .find > span{position:absolute;left:16px;top:50%;transform:translateY(-50%); opacity:.45;font-size:14px} .find input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:999px; padding:12px 18px 12px 42px;font:inherit;font-size:14px;color:var(--ink)} .find input::placeholder{color:#BCA894} .tools{display:flex;gap:8px} .round,a.round{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card); display:grid;place-items:center;font-size:16px;color:var(--ink);position:relative;transition:.18s} .round:hover{background:var(--band);transform:translateY(-1px)} .round b{position:absolute;top:-3px;right:-3px;background:var(--accent);color:#fff;font-size:10px; font-weight:700;border-radius:999px;padding:1px 5px;font-family:var(--body)} /* ════ Баннер ════ */ .hero{margin:22px 0;padding:52px 46px;border-radius:var(--r-lg);position:relative;overflow:hidden; background:radial-gradient(120% 140% at 88% 8%,#F7EFE4 0%,#EFE4D6 45%,#E7D6C2 100%)} .hero::after{content:"";position:absolute;right:-80px;top:-90px;width:340px;height:340px; border-radius:50%;background:rgba(255,255,255,.42)} .hero::before{content:"";position:absolute;right:120px;bottom:-100px;width:200px;height:200px; border-radius:50%;background:rgba(255,255,255,.3)} .hero>*{position:relative;z-index:1} .hero .shotback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:0} .kicker{font-size:11px;letter-spacing:2.8px;text-transform:uppercase;color:var(--accent); font-weight:700;margin:0} /* Надпись сверху как фраза, а не как служебная метка: «Дарим вам скидку» над крупным «−10%». Тот же шрифт, что у заголовка, — строки читаются одним высказыванием; прописные и разрядка сняты, иначе обращение к покупателю выглядит подписью к экспонату. Меньше заголовка намеренно: главное на этом слайде — число. */ .kicker--big{font-family:var(--disp);font-size:25px;line-height:1.15; letter-spacing:.2px;text-transform:none;font-weight:600;color:var(--ink)} .hero h2{font-family:var(--disp);font-size:47px;line-height:1.08;margin:12px 0;font-weight:600; text-wrap:balance;max-width:15ch} .lead{color:var(--mut);font-size:15.5px;margin:0 0 24px;max-width:46ch} /* Мелкая строка под текстом баннера — условия акции. Прижата к своему тексту (`lead--tight`), а не поставлена посередине между текстом и кнопкой: иначе непонятно, к чему она относится. */ .lead--tight{margin-bottom:7px} .fineprint{color:var(--faint);font-size:12.5px;line-height:1.45;margin:0 0 22px; max-width:46ch} .cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border:none; border-radius:var(--r-xs);padding:13px 26px;font-weight:600;font-size:14.5px;transition:.18s; box-shadow:var(--sh)} .cta:hover{background:var(--accent-dp);transform:translateY(-1px);box-shadow:var(--sh-hi)} /* ════ Бренды ════ */ .brands{display:flex;gap:26px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none} .brands::-webkit-scrollbar{display:none} .brand{text-align:center;min-width:86px} .brand .circle{width:76px;height:76px;border-radius:50%;background:var(--card);border:1px solid var(--line); display:grid;place-items:center;margin:0 auto 9px;font-family:var(--disp);font-size:19px; color:var(--accent);box-shadow:var(--sh);transition:.2s} .brand:hover .circle{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:var(--accent)} .brand>span:last-child{font-size:12.5px;color:var(--mut);display:block; max-width:86px;margin:0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ════ Полоса секции ════ */ .secline{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:38px 0 18px} .secline h2{font-family:var(--disp);font-size:32px;margin:0;font-weight:600} .secline a{font-size:13.5px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:2px} .secline a:hover{color:var(--accent);border-color:var(--accent)} /* ════ Карточка товара ════ */ .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .card{position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;transition:.2s} .card:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:#D9C4AC} .shot{position:relative;background:var(--ground);border-radius:var(--r-sm);aspect-ratio:1; overflow:hidden;margin-bottom:12px} .shot img{width:100%;height:100%;object-fit:contain;padding:9px;transition:transform .35s ease} .card:hover .shot img{transform:scale(1.05)} .shot .nophoto{width:100%;height:100%;display:grid;place-items:center;color:var(--faint); font-size:12px;letter-spacing:1.4px;text-transform:uppercase} .badges{position:absolute;left:9px;top:9px;display:flex;flex-direction:column;gap:5px;z-index:1; align-items:flex-start} .badge{font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:999px; background:var(--band);color:var(--accent)} .badge--sale{background:var(--ochre);color:#fff} .badge--new{background:var(--sage-bg);color:var(--sage)} /* ── Избранное ──────────────────────────────────────────────────── Сердечко лежит поверх карточки-ссылки, поэтому позиционируется от самой карточки, а не от картинки. Пустое и залитое — один класс, а не две разные разметки: состояние обязано быть одним переключателем. */ .fav{position:absolute;right:20px;top:20px;z-index:3;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center; font-size:15px;color:var(--faint);opacity:0;transition:opacity .2s,color .2s, border-color .2s,transform .2s;padding:0} .fav .glyph::before{content:'\2661'} .fav.on .glyph::before{content:'\2665'} .fav.on{opacity:1;color:var(--ochre);border-color:#E7CDA6} .fav:hover{color:var(--ochre);border-color:#E7CDA6;transform:translateY(-1px)} .card:hover .fav,.fav:focus-visible{opacity:1} /* На телефоне наведения нет — сердечко, живущее на hover, там недоступно. */ @media (hover:none){ .fav{opacity:1} } /* Отклик на добавление: одно короткое движение, без прыжков. */ .fav.pulse{animation:favpop .42s cubic-bezier(.3,1.4,.5,1)} @keyframes favpop{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} } /* Кнопка на странице товара: то же состояние, но с подписью. */ .fav--big{position:static;width:auto;height:auto;border-radius:var(--r-xs); opacity:1;padding:13px 18px;gap:9px;grid-auto-flow:column;align-items:center; font-size:14px;font-weight:600;background:var(--card);color:var(--mut)} .fav--big .glyph{font-size:16px;line-height:1} .fav--big:hover{transform:none;background:var(--band)} .fav--big.on{background:var(--band);color:var(--ochre)} /* Карточку убрали из избранного — она уходит, а не пропадает рывком. */ .card.gone{opacity:0;transform:scale(.96);transition:opacity .24s,transform .24s; pointer-events:none} @media (prefers-reduced-motion:reduce){ .fav.pulse{animation:none} .card.gone{transition:none} } .eyebrow{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent); font-weight:700;margin:0 0 5px} .cname{font-family:var(--body);font-size:13.5px;font-weight:500;line-height:1.4;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px} .cen{font-size:11.5px;color:var(--faint);margin:4px 0 0; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .stock{font-size:11.5px;color:var(--sage);margin:9px 0 0;display:flex;align-items:center;gap:6px} .stock i{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 6px} .stock--out{color:#B08A8A}.stock--out i{background:#C9A9A9} .cfoot{margin-top:auto;padding-top:11px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px} .price{font-size:18px;font-weight:700;margin:0;font-variant-numeric:tabular-nums} .price s{display:block;font-size:12px;font-weight:500;color:var(--faint)} .add{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-xs);background:var(--band); color:var(--accent);border:none;font-size:17px;transition:.18s;display:grid;place-items:center} .card:hover .add{background:var(--accent);color:#fff} .add:hover{transform:translateY(-1px)} /* Товар уже в корзине — кнопка это показывает, а не притворяется пустой. */ .add.on{background:var(--accent);color:#fff} .add.pulse{animation:favpop .42s cubic-bezier(.3,1.4,.5,1)} /* Ссылка «перейти в корзину» на странице товара: появляется только когда товар туда положили. */ .gotocart{margin:12px 0 0;font-size:13.5px} .gotocart a{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:2px} .gotocart a:hover{border-color:var(--accent)} /* ════ Корзина ════ Строка — картинка, название, количество, сумма. На телефоне те же четыре части складываются в две строки, а не превращаются в горизонтальную прокрутку: считать деньги, листая вбок, невозможно. */ .cart-lines{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:6px 20px;margin-top:6px} .cart-row{display:grid;grid-template-columns:96px 1fr 132px 150px;gap:18px;align-items:center; padding:18px 0;border-bottom:1px solid var(--band)} .cart-row:last-child{border-bottom:none} .cart-row .pic{width:96px;height:96px;border-radius:var(--r-sm);background:var(--ground); overflow:hidden;display:grid;place-items:center} .cart-row .pic img{width:100%;height:100%;object-fit:contain;padding:8px} .cart-row .nophoto{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)} .cart-row .body{min-width:0} .cart-row .nm{display:block;font-size:14.5px;line-height:1.4;font-weight:500} .cart-row .nm:hover{color:var(--accent)} .cart-row .stock{margin-top:7px} .cart-row--gone{opacity:.75} /* Строка заказа: ни картинки, ни счётчика количества — значит и колонок под них не нужно. Иначе название сжимается в столбик по одному слову. */ .cart-row--order{grid-template-columns:1fr 160px} .cart-row--gone .nm{color:var(--mut)} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px; background:var(--ground);overflow:hidden} .qty button{width:38px;height:38px;border:none;background:none;font-size:17px;color:var(--accent); transition:.16s} .qty button:hover{background:var(--band)} .qty input{width:44px;height:38px;border:none;background:none;text-align:center;font:inherit; font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)} .qty input:focus{outline:none;background:#fff} .cart-row .sum{text-align:right} .cart-row .sum .price{font-size:17px} .cart-row .each{font-size:11.5px;color:var(--faint);margin:3px 0 0} /* Не «drop»: этим классом названа выпадашка меню, и кнопка «Убрать» унаследовала от неё visibility:hidden — то есть была, но не нажималась. */ .cart-drop{margin-top:8px;background:none;border:none;padding:0;font-size:12.5px; color:var(--mut);border-bottom:1px solid var(--line)} .cart-drop:hover{color:#B45A4A;border-color:#E7C6BF} /* Промокод. Поле рядом с итогом, а не в шапке корзины: человек вводит код тогда, когда смотрит на сумму. */ .cart-promo{margin-top:18px;padding:14px 16px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-sm)} .cart-promo > label{display:block;font-size:13px;color:var(--mut);margin-bottom:8px} .promo-row{display:flex;gap:8px} .promo-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px; padding:10px 13px;font:inherit;font-size:15px;background:var(--ground);color:var(--ink); text-transform:uppercase} .promo-row input:focus{outline:none;border-color:var(--accent);background:#fff} .promo-go{border:1px solid var(--accent);background:var(--band);color:var(--accent-dp); border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:.16s} .promo-go:hover{background:var(--accent);color:#fff} .promo-on{margin:8px 0 0;font-size:13px;color:var(--sage)} .promo-on button{background:none;border:none;padding:0;margin-left:8px;font-size:12.5px; color:var(--mut);border-bottom:1px solid var(--line)} .promo-on button:hover{color:#B45A4A} /* Из чего сложилась сумма. Скидка, о которой не сказано отдельной строкой, читается покупателем как ошибка в цене. */ .cart-sums{margin-right:auto;font-size:13.5px;color:var(--mut);min-width:210px} .cart-sums p{display:flex;justify-content:space-between;gap:16px;margin:0 0 4px} .cart-sums b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .cart-sums .cut,.cart-sums .cut b{color:var(--sage)} .cart-foot{display:flex;align-items:center;justify-content:flex-end;gap:26px;flex-wrap:wrap; margin-top:22px} .cart-total{display:flex;align-items:baseline;gap:12px} .cart-total span{font-size:14px;color:var(--mut)} .cart-total b{font-family:var(--disp);font-size:30px;font-variant-numeric:tabular-nums} .cart-total i{font-style:normal;font-size:13px;color:var(--faint)} @media (max-width:720px){ .cart-lines{padding:4px 14px} .cart-row{grid-template-columns:76px 1fr;gap:12px;row-gap:12px} .cart-row .pic{width:76px;height:76px} .cart-row .qty{grid-column:1/2} .cart-row .sum{grid-column:2/3;text-align:right} .cart-foot{justify-content:space-between;gap:14px} .cart-foot .cta{flex:1;justify-content:center} } /* ════ Страница товара ════ */ .pdp{display:grid;grid-template-columns:1.02fr 1fr;gap:36px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-lg);padding:26px} .gal{display:flex;gap:12px} /* Миниатюры показываются, только когда снимков больше одного, — полоска из одной картинки была бы интерфейсом ради интерфейса. */ .thumbs{display:flex;flex-direction:column;gap:9px;flex:0 0 62px} .thumbs button{width:62px;height:62px;padding:0;border:1px solid var(--line); border-radius:11px;background:var(--ground);overflow:hidden;transition:.16s} .thumbs button:hover{border-color:var(--accent)} .thumbs button.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(138,90,56,.15)} .thumbs img{width:100%;height:100%;object-fit:contain;padding:5px} .big{flex:1;background:var(--ground);border-radius:var(--r-sm);aspect-ratio:1;overflow:hidden; position:relative} .big img{width:100%;height:100%;object-fit:contain;padding:20px} .big .nophoto{width:100%;height:100%;display:grid;place-items:center;color:var(--faint); font-size:12px;letter-spacing:1.6px;text-transform:uppercase} .pinfo h1{font-family:var(--disp);font-size:30px;line-height:1.18;margin:5px 0 6px;font-weight:600; text-wrap:balance} .pinfo .cen{font-size:13px;margin-bottom:14px} /* Цена, «в корзину» и сердечко в одну строку, но с переносом: со скидкой цена занимает больше места, и без переноса кнопка сжималась в два слова на разных строках. */ .buyrow{display:flex;align-items:center;gap:14px;margin:20px 0;flex-wrap:wrap} .bigprice{font-size:32px;font-weight:700;margin:0;font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:0 0 auto} .bigprice s{font-size:18px;font-weight:500;color:var(--faint)} .bigprice .saved{font-size:13px;font-weight:700;color:#fff;background:var(--ochre); border-radius:999px;padding:4px 10px;letter-spacing:.3px} .buyrow .cta{flex:1 1 170px;justify-content:center;white-space:nowrap} .buyrow .fav--big{flex:0 0 auto;white-space:nowrap} .cta[disabled]{background:var(--band);color:var(--mut);box-shadow:none;cursor:default} .add[disabled]{background:var(--band);color:var(--mut);box-shadow:none;cursor:default;opacity:.55} .add[disabled]:hover{transform:none;background:var(--band)} .cta[disabled]:hover{transform:none;background:var(--band)} .chips{display:flex;gap:7px;flex-wrap:wrap} .chips span,.chips a{font-size:11.5px;background:var(--ground);border:1px solid var(--line); border-radius:999px;padding:5px 12px;color:var(--mut)} .chips a:hover{color:var(--accent);border-color:var(--accent)} .props{border-top:1px solid var(--line);margin:22px 0 0;padding-top:14px;font-size:13.5px} .props div{display:flex;justify-content:space-between;gap:14px;padding:7px 0; border-bottom:1px dashed var(--band)} .props dt{color:var(--mut);flex:0 0 auto} /* Значение занимает остаток строки и переносится внутри своей колонки. `min-width:0` обязателен: без него длинное значение (штрих-код, состав, длинное название бренда) распирает строку и вылезает за край блока — элемент flex по умолчанию не сжимается уже своего содержимого. */ .props dd{margin:0;font-weight:600;text-align:right; flex:1 1 auto;min-width:0;overflow-wrap:anywhere} /* Блоки карточки — отдельными пастельными карточками. Раньше у них не было ни фона, ни рамки, ни отступов: текст шёл во всю ширину колонки и читался как вывалившийся наружу, а заголовок висел сам по себе, ничем не связанный со своим текстом. Подложка решает обе беды разом — границу видно, заголовок оказывается ВНУТРИ своего блока. */ .descr{margin:22px 0 0;padding:18px 20px;font-size:14.5px;line-height:1.62; color:var(--ink); /* ⚠️ `white-space:pre-line` здесь БОЛЬШЕ НЕ СТОИТ. Он относится к тексту товара (в описании поставщика есть свои переводы строк), но, будучи повешенным на весь блок, ловил и переводы строк САМОЙ РАЗМЕТКИ: между заголовком и текстом появлялась пустая строка, и заголовок «висел в воздухе» отдельно от своего блока. Перенесён на .rich — обёртку того самого текста. */ background:var(--band);border:1px solid var(--line);border-radius:var(--r-lg); /* Состав — сплошная строка INCI с длинными латинскими словами и ссылками. Без переноса «по-живому» такое слово вылезает за край блока. */ overflow-wrap:anywhere} .descr h3{font-family:var(--disp);font-size:22px;margin:0 0 8px;font-weight:700; color:var(--ink)} /* ════ Каталог: хлебные крошки, подразделы, фильтры, страницы ════ */ .crumbs{font-size:12.5px;color:var(--mut);margin:18px 0 6px;display:flex;gap:8px;flex-wrap:wrap} .crumbs a:hover{color:var(--accent)} .crumbs span{color:var(--faint)} .h1{font-family:var(--disp);font-size:38px;font-weight:600;margin:4px 0 4px} .subtitle{color:var(--mut);font-size:14px;margin:0 0 18px} .subcats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px} .subcats a{font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:999px; padding:7px 15px;color:var(--mut);transition:.16s} .subcats a:hover{border-color:var(--accent);color:var(--accent)} .subcats a.on{background:var(--accent);border-color:var(--accent);color:#fff} .subcats a i{font-style:normal;opacity:.6;font-size:11.5px;margin-left:5px} /* ════ Каталог с фильтрами ════ Панель слева, товары справа. На телефоне панель выезжает поверх — место под постоянную колонку там взять неоткуда. */ .catalog{display:grid;grid-template-columns:252px minmax(0,1fr);gap:24px;align-items:start} .fpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:6px 16px 16px;position:sticky;top:96px} .fpanel-head{display:none;align-items:center;justify-content:space-between; padding:14px 0 10px;border-bottom:1px solid var(--band);margin-bottom:6px} .fpanel-head b{font-family:var(--disp);font-size:22px;font-weight:600} .fpanel-close{background:none;border:none;font-size:26px;line-height:1;color:var(--mut); padding:0 4px} .fpanel-apply{display:none} .fgroup{padding:14px 0;border-bottom:1px solid var(--band)} .fgroup:last-of-type{border-bottom:none} .fgroup h3{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut); margin:0 0 10px;font-weight:700} .fitem{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px; color:var(--ink);line-height:1.3} .fitem span{flex:1;min-width:0} .fitem b{font-weight:500;font-size:12px;color:var(--faint)} .fitem:hover{color:var(--accent)} .fitem .fbox{width:16px;height:16px;flex:0 0 16px;border:1px solid var(--line); border-radius:5px;background:var(--ground);position:relative;transition:.15s} .fitem:hover .fbox{border-color:var(--accent)} .fitem.on .fbox{background:var(--accent);border-color:var(--accent)} .fitem.on .fbox::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} .fitem.on{font-weight:600;color:var(--accent)} .flist{max-height:268px;overflow-y:auto;margin-right:-6px;padding-right:6px} .flist::-webkit-scrollbar{width:6px} .flist::-webkit-scrollbar-thumb{background:var(--band);border-radius:999px} .fsearch{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px; font:inherit;font-size:13px;background:var(--ground);color:var(--ink);margin-bottom:8px} .fsearch:focus{outline:none;border-color:var(--accent);background:#fff} .fnone{font-size:12.5px;color:var(--mut);margin:8px 0 0} .fprice{display:flex;align-items:center;gap:6px} .fprice input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px; padding:8px 9px;font:inherit;font-size:13px;background:var(--ground);color:var(--ink); text-align:center} .fprice input:focus{outline:none;border-color:var(--accent);background:#fff} .fprice span{color:var(--faint)} .fprice button{flex:0 0 34px;height:34px;border:1px solid var(--line);border-radius:9px; background:var(--band);color:var(--accent);font-size:15px} .fprice button:hover{background:var(--accent);color:#fff;border-color:var(--accent)} /* Выбранные фильтры тегами: снимаются по одному. */ .picked{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px} .picked-tag{display:inline-flex;align-items:center;gap:8px;background:var(--band); border-radius:999px;padding:7px 14px;font-size:13px;color:var(--accent);font-weight:600} .picked-tag span{font-size:15px;line-height:1;opacity:.6} .picked-tag:hover span{opacity:1} .picked-clear{font-size:13px;color:var(--mut);border-bottom:1px solid var(--line)} .picked-clear:hover{color:var(--accent);border-color:var(--accent)} .rbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px} .rbar .count{color:var(--mut);font-size:13.5px} .rsort{margin-left:auto} .rsort select{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit; font-size:13px;background:var(--card);color:var(--ink)} .fopen{display:none;align-items:center;gap:8px;border:1px solid var(--line); background:var(--card);border-radius:999px;padding:9px 18px;font-size:13.5px; color:var(--ink);font-weight:600} .fopen b{background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px} @media (max-width:900px){ .catalog{grid-template-columns:1fr} .fopen{display:inline-flex} .fpanel{position:fixed;inset:0;z-index:80;border-radius:0;border:none;overflow-y:auto; padding:0 18px 96px;transform:translateX(-100%);transition:transform .25s ease; visibility:hidden} .fpanel.open{transform:none;visibility:visible} .fpanel-head{display:flex;position:sticky;top:0;background:var(--card);z-index:2} .fpanel-close{display:block} .fpanel-apply{display:flex;position:fixed;left:16px;right:16px;bottom:16px; justify-content:center} body.nofilterscroll{overflow:hidden} .flist{max-height:none} } /* Старая одна строка фильтров осталась у страниц без панели. */ .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 20px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px} .filters select,.filters input[type=search]{border:1px solid var(--line);border-radius:9px; padding:8px 11px;font:inherit;font-size:13px;background:var(--ground);color:var(--ink)} .filters label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mut)} .filters .count{margin-left:auto;font-size:13px;color:var(--mut)} .filters .drop-filter{margin-left:0} .pager{display:flex;gap:7px;justify-content:center;align-items:center;margin:34px 0 0;flex-wrap:wrap} .pager a,.pager span{min-width:38px;height:38px;padding:0 12px;border-radius:10px;display:grid; place-items:center;font-size:13.5px;border:1px solid var(--line);background:var(--card);color:var(--mut)} .pager a:hover{border-color:var(--accent);color:var(--accent)} .pager .on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .pager .gap{border:none;background:none} .empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:44px 26px;text-align:center;color:var(--mut)} .empty b{display:block;font-family:var(--disp);font-size:24px;color:var(--ink); margin-bottom:8px;font-weight:600} /* ════ Все бренды ════ */ .blist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .blist a{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:12px 15px;display:flex;justify-content:space-between;gap:10px;font-size:14px;transition:.16s} .blist a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .blist a i{font-style:normal;color:var(--faint);font-size:12.5px} /* ════ Страница с текстом ════ Узкая колонка: длинная строка через весь экран не читается, а эти страницы именно читают, а не просматривают. */ .textpage{max-width:70ch;margin:0 auto;padding:6px 0 10px} .textpage .h1{margin-bottom:8px} .textpage .lead{font-size:17px;color:var(--mut);margin:0 0 26px;max-width:none} .textpage p{margin:0 0 18px;font-size:16px;line-height:1.68} .contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px} .ct{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:16px 18px} .ct b{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase; color:var(--mut);font-weight:700;margin-bottom:7px} .ct a,.ct span{font-size:17px;color:var(--ink)} .ct a:hover{color:var(--accent)} .ct i{display:block;font-style:normal;font-size:13px;color:var(--faint);margin-top:5px} .ct--legal{grid-column:1/-1} .ct--legal span{font-size:14px;color:var(--mut)} /* Телефон в шапке: показывается, только когда он заполнен. */ .hd-phone{display:none;text-align:right;font-size:15px;font-weight:600;white-space:nowrap} .hd-phone small{display:block;font-size:11px;font-weight:500;color:var(--mut);margin-top:2px} .hd-phone:hover{color:var(--accent)} @media (min-width:900px){ .hd-phone{display:block} } .foot-ct{margin:12px 0 0;font-size:14px} .foot-ct a{border-bottom:1px solid var(--line);padding-bottom:1px} .foot-ct a:hover{color:var(--accent);border-color:var(--accent)} @media (max-width:640px){ .textpage p{font-size:15.5px} .textpage .lead{font-size:16px} .contacts{grid-template-columns:1fr} } /* ════ Уведомление о cookie ════ Полоса снизу, а не окно поверх: магазин должен работать и для того, кто ничего не выбрал, а перекрывающее окно вынуждает выбрать. */ .cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:95; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-hi);padding:16px 20px;display:flex;align-items:center; gap:18px;flex-wrap:wrap;max-width:920px;margin:0 auto} .cookies p{margin:0;flex:1;min-width:220px;font-size:13.5px;line-height:1.5; color:var(--mut)} .cookies p a{color:var(--accent);border-bottom:1px solid var(--line)} .cookies-acts{display:flex;gap:10px;align-items:center} .cookies .cta{padding:11px 22px;font-size:14px} .cookies-no{border:1px solid var(--line);background:var(--card);border-radius:var(--r-xs); padding:11px 20px;font-size:14px;color:var(--mut);transition:.16s} .cookies-no:hover{border-color:var(--accent);color:var(--accent)} @media (max-width:640px){ .cookies{flex-direction:column;align-items:stretch;gap:12px} .cookies-acts{justify-content:stretch} .cookies-acts button{flex:1} } .feedback{margin-top:34px} .feedback h2{font-family:var(--disp);font-size:26px;margin:0 0 14px;font-weight:600} .feedback .rform{max-width:none} .feedback select{width:100%;border:1px solid var(--line);border-radius:10px; padding:11px 13px;font:inherit;font-size:15px;background:var(--ground);color:var(--ink)} /* ════ Страница «не найдено» ════ Не извинение, а развилка: строка поиска и полки, чтобы человек ушёл не с сайта, а в каталог. */ .lost{max-width:640px;margin:40px auto 60px;text-align:center} .lost-code{font-family:var(--disp);font-size:76px;line-height:1;color:var(--band); margin:0 0 4px;font-weight:600} .lost .subtitle{margin-bottom:24px} .lost-find{display:flex;gap:10px;margin:0 auto 26px;max-width:460px} .lost-find input{flex:1;border:1px solid var(--line);background:var(--card); border-radius:999px;padding:13px 20px;font:inherit;font-size:15px;color:var(--ink)} .lost-find input:focus{outline:none;border-color:var(--accent)} .lost-cats{justify-content:center} .lost-links{margin-top:22px;font-size:13.5px;color:var(--mut)} .lost-links a{border-bottom:1px solid var(--line);padding-bottom:1px} .lost-links a:hover{color:var(--accent);border-color:var(--accent)} /* Реквизиты продавца в подвале: строка спокойная, но читаемая — это не мелкий шрифт «чтобы отвязались», а обязательные сведения о продавце. */ .foot-legal{border-top:1px solid rgba(227,211,192,.6);margin-top:26px;padding:16px 0 0} .foot-legal .in{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12.5px; color:var(--mut);max-width:1180px;margin:0 auto;padding:0 20px} /* Продавец и пункты выдачи на странице контактов. */ .seller{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .seller h2{font-family:var(--disp);font-size:22px;margin:0 0 12px;font-weight:600} .seller-sub{font-family:var(--disp);font-size:18px;margin:18px 0 8px;font-weight:600} .seller-facts{display:grid;grid-template-columns:190px 1fr;gap:8px 18px;margin:0; font-size:14px} .seller-facts dt{color:var(--mut);font-size:13px} .seller-facts dd{margin:0} .seller-points{margin:0;padding-left:18px;font-size:14px;line-height:1.7} @media (max-width:640px){ .seller-facts{grid-template-columns:1fr;gap:2px 0} .seller-facts dd{margin-bottom:10px} } /* Состав и срок годности: отдельный блок с подзаголовками. Состав читают глазами по строчкам, поэтому межстрочный интервал больше обычного. */ .facts-block .fact{margin-top:14px} .facts-block .fact:first-of-type{margin-top:0} .facts-block .fact b{display:block;font-size:13px;color:var(--mut);font-weight:600; text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px} .facts-block .fact p{margin:0;line-height:1.65;word-break:break-word} /* Текст товара как есть: свои переводы строк поставщика сохраняем, а переводы строк разметки — нет. */ .descr .rich{white-space:pre-line} /* Подзаголовки внутри правового документа: заметны, но тише заголовка страницы — читают их подряд, а не выбирают глазами. */ /* Подзаголовки документа. Два уровня: раздел и пункт внутри него. Крупнее и темнее основного текста — структуру длинного документа человек ловит глазами по заголовкам, а не читая подряд. */ .textpage-h{font-family:var(--disp);font-size:26px;font-weight:700; margin:34px 0 10px;color:var(--ink);line-height:1.25;letter-spacing:-.01em} .textpage-h:first-of-type{margin-top:18px} .textpage-h3{font-family:var(--body);font-size:17px;font-weight:700; margin:22px 0 6px;color:var(--accent-dp);line-height:1.35} /* Значок раздела рядом с заголовком страницы: чуть меньше самого заголовка и с воздухом справа, чтобы не липнул к первой букве. */ .page-ico{margin-right:10px;font-size:.78em;vertical-align:.06em} /* Значок раздела внутри документа — мельче, чем у заголовка страницы: он помогает найти раздел глазами, но не спорит с самим заголовком. */ .sec-ico{margin-right:9px;font-size:.72em;vertical-align:.08em;opacity:.9} /* Перечисления в документе: строка на пункт, а не «— имя; — телефон» подряд. */ .textpage-list{margin:10px 0 16px;padding-left:20px;line-height:1.7} /* Ролик держит пропорции 16:9 и никогда не шире колонки — на телефоне iframe с фиксированной шириной вылезает за экран и рвёт вёрстку. */ .tp-video{position:relative;width:100%;aspect-ratio:16/9;margin:18px 0; border-radius:var(--r-md);overflow:hidden;background:#000;box-shadow:var(--sh)} .tp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Галерея страницы: карточки в ряд, на узком экране — в две колонки. */ .tp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px;margin:20px 0} .tp-gallery figure{margin:0;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden} .tp-gallery img{width:100%;height:170px;object-fit:contain;background:var(--ground); padding:10px} .tp-gallery figcaption{padding:8px 12px 12px;font-size:12.5px;color:var(--mut)} @media (max-width:640px){ .tp-gallery{grid-template-columns:repeat(2,1fr);gap:10px} .tp-gallery img{height:130px} } .textpage-list li{margin:0 0 4px} @media (max-width:640px){ .textpage-h{font-size:22px;margin-top:26px} .textpage-h3{font-size:16px} } /* ════ Подсказки поиска ════ Список висит под строкой и перекрывает страницу: он живёт секунду, и раздвигать ради него вёрстку значит дёргать экран на каждой букве. */ .suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60; background:var(--card);border:1px solid var(--line);border-radius:16px; box-shadow:0 16px 40px rgba(74,51,32,.16);overflow:hidden;max-height:70vh; overflow-y:auto} .sg-list{list-style:none;margin:0;padding:6px} .sg-good,.sg-row,.sg-all{display:flex;align-items:center;gap:12px;padding:9px 10px; border-radius:10px;font-size:14px;color:var(--ink)} /* Явная высота строки — страховка: подсказка с картинкой 44px не должна зависеть от того, что случится с её содержимым. */ .sg-good{min-height:62px} .sg-row,.sg-all{min-height:40px} /* Спаны внутри выпадашки живут в потоке. Правило дублирует намерение и гасит любое чужое `absolute`, если оно однажды прилетит со стороны. */ .suggest .sg-pic,.suggest .sg-body,.suggest .sg-price,.suggest .sg-kind{ position:static;opacity:1;transform:none} .sg-good:hover,.sg-row:hover,.sg-all:hover, .sg-good.on,.sg-row.on,.sg-all.on{background:var(--band);color:var(--accent)} .sg-pic{width:44px;height:44px;flex:0 0 44px;border-radius:9px;background:var(--ground); display:grid;place-items:center;overflow:hidden} .sg-pic img{width:100%;height:100%;object-fit:contain;padding:4px} .sg-pic i{font-style:normal;color:var(--faint)} .sg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .sg-body i{font-style:normal;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--accent);font-weight:700} .sg-body b{font-weight:500;font-size:13.5px;line-height:1.35;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .sg-price{font-weight:700;font-size:14px;white-space:nowrap} .sg-kind{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint); font-weight:700;flex:0 0 46px} .sg-all{justify-content:center;font-size:13.5px;color:var(--accent);font-weight:600; border-top:1px solid var(--band);border-radius:0;margin-top:4px} .sg-none{padding:16px 18px;font-size:13.5px;color:var(--mut)} .sg-none a{color:var(--accent);border-bottom:1px solid var(--line)} @media (max-width:640px){ .suggest{max-height:62vh} /* На телефоне картинка меньше, а название — в одну строку: две строки названия плюс цена не помещаются в 390 пикселей, и цена уезжает. */ .sg-pic{width:38px;height:38px;flex:0 0 38px} .sg-good{min-height:54px;gap:10px;padding:8px} .sg-body b{-webkit-line-clamp:1} .sg-price{font-size:13.5px} } /* ════ Быстрый просмотр, история, «поделиться» ════ */ .peek{position:absolute;left:12px;right:52px;bottom:66px;z-index:3;border:none; border-radius:999px;background:rgba(255,255,255,.94);color:var(--accent); font-size:12.5px;font-weight:600;padding:8px 10px;opacity:0;transition:.18s; box-shadow:var(--sh)} .card:hover .peek,.peek:focus-visible{opacity:1} .peek:hover{background:var(--accent);color:#fff} @media (hover:none){ .peek{display:none} } .quick{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px} .quick-back{position:absolute;inset:0;background:rgba(74,51,32,.42)} .quick-box{position:relative;background:var(--card);border-radius:var(--r-lg); padding:26px;max-width:820px;width:100%;max-height:88vh;overflow-y:auto; box-shadow:var(--sh-hi)} .quick-close{position:absolute;right:14px;top:10px;border:none;background:none; font-size:28px;line-height:1;color:var(--mut);padding:4px 8px} .quick-close:hover{color:var(--accent)} .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .quick-pic{background:var(--ground);border-radius:var(--r-md);aspect-ratio:1; display:grid;place-items:center;overflow:hidden} .quick-pic img{width:100%;height:100%;object-fit:contain;padding:16px} .quick-info h2{font-family:var(--disp);font-size:24px;line-height:1.2;margin:4px 0 10px; font-weight:600} .quick-info .bigprice{font-size:26px;margin:14px 0} .quick-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px} .quick-acts .cta{flex:1 1 150px;justify-content:center;white-space:nowrap} .quick-more{font-size:13.5px;color:var(--accent);border-bottom:1px solid var(--line); padding-bottom:2px} .quick-more:hover{border-color:var(--accent)} @media (max-width:640px){ .quick-grid{grid-template-columns:1fr} .quick-box{padding:18px} } .recent{margin-top:44px} .share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 0} /* Ряд «Поделиться» и ряд меток-разделов стояли ВПЛОТНУЮ: между ними было ноль пикселей, и кнопки читались как налезающие друг на друга. Отступ задаём метка́м, а не кнопкам: «Поделиться» может отсутствовать, и тогда лишний отступ висел бы в пустоте. */ .pdp .chips{margin-top:14px} @media (max-width:640px){ /* На телефоне меток бывает много, они переносятся — даём строкам воздух, иначе перенесённый ряд липнет к предыдущему. */ .pdp .chips{margin-top:12px;gap:8px 7px} .share{gap:8px 6px} } .share-btn{border:1px solid var(--line);background:var(--card);border-radius:999px; padding:8px 15px;font-size:13px;color:var(--mut);transition:.16s} .share-btn:hover{border-color:var(--accent);color:var(--accent)} .share-done{font-size:12.5px;color:var(--sage)} /* ════ Журнал ════ Статьи читают, а не просматривают: колонка узкая, строка короткая, межстрочие больше, чем в каталоге. */ .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .post{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;transition:.2s} .post:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:#D9C4AC} .post-cover{aspect-ratio:16/10;background:var(--band);display:grid;place-items:center; overflow:hidden} .post-cover img{width:100%;height:100%;object-fit:cover} .post-cover .nophoto{font-family:var(--disp);font-size:19px;color:var(--accent);opacity:.6} .post .eyebrow{margin:14px 16px 0} .post h2{font-family:var(--disp);font-size:21px;line-height:1.25;margin:6px 16px 0; font-weight:600} .post-lead{margin:8px 16px 0;font-size:13.5px;color:var(--mut);line-height:1.5} .post-date{margin:10px 16px 16px;font-size:12.5px;color:var(--faint)} .article{max-width:74ch;margin:0 auto} .article .eyebrow{margin-bottom:6px} .article-meta{font-size:13px;color:var(--faint);margin:0 0 16px} .article .lead{font-size:18px;line-height:1.55;color:var(--mut);max-width:none; margin-bottom:24px} .article-cover{border-radius:var(--r-lg);overflow:hidden;margin-bottom:28px} .article-cover img{width:100%;height:auto} .article-body p{font-size:17px;line-height:1.7;margin:0 0 20px} .article-body h2{font-family:var(--disp);font-size:27px;margin:34px 0 14px;font-weight:600} .article-body ul{margin:0 0 20px;padding-left:22px} .article-body li{font-size:17px;line-height:1.6;margin-bottom:8px} .article-body figure{margin:26px 0} .article-body figure img{width:100%;border-radius:var(--r-md)} .article-body figcaption{margin-top:8px;font-size:13px;color:var(--faint);text-align:center} .article-link{display:inline-block;margin:0 0 22px;font-size:15px;color:var(--accent); border-bottom:1px solid var(--line);padding-bottom:2px} .article-link:hover{border-color:var(--accent)} /* Карточка товара прямо в тексте: статья должна вести к покупке, но не притворяться каталогом — поэтому строкой, а не плиткой. */ .article-good{display:flex;gap:16px;align-items:center;background:var(--card); border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin:0 0 22px; transition:.18s} .article-good:hover{border-color:var(--accent);transform:translateY(-2px)} .article-good .pic{width:78px;height:78px;flex:0 0 78px;border-radius:var(--r-sm); background:var(--ground);display:grid;place-items:center;overflow:hidden} .article-good .pic img{width:100%;height:100%;object-fit:contain;padding:6px} .article-good .nophoto{font-size:10px;letter-spacing:1px;text-transform:uppercase; color:var(--faint);font-style:normal} .article-good .body{display:flex;flex-direction:column;gap:4px;min-width:0} .article-good b{font-size:15px;font-weight:500;line-height:1.35} .article-good .price{font-style:normal;font-size:16px;font-weight:700} .article-good .price s{font-weight:500;font-size:13px;color:var(--faint);margin-left:6px} @media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .blog-grid{grid-template-columns:1fr} .article-body p,.article-body li{font-size:16px} .article .lead{font-size:16.5px} } /* ════ Кабинет и вход ════ */ .auth{max-width:440px;margin:30px auto 60px} .auth .rform{max-width:none;margin-top:18px} .auth-error{background:#F8ECE9;border:1px solid #E7C6BF;border-radius:var(--r-sm); padding:12px 16px;color:#B45A4A;font-size:13.5px;margin-bottom:16px} .auth-more{margin-top:18px;font-size:14px;text-align:center;line-height:1.7} .auth-more a{color:var(--accent);border-bottom:1px solid var(--line)} .acc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px; flex-wrap:wrap;margin-top:6px} .acc-block{margin-top:34px} .acc-order{display:grid;grid-template-columns:140px 1fr 120px 130px;gap:14px; align-items:center;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);padding:14px 18px;margin-bottom:10px;transition:.18s} .acc-order:hover{border-color:var(--accent);transform:translateY(-2px)} .acc-num{font-weight:700;font-size:15px} .acc-num i{display:block;font-style:normal;font-size:12px;color:var(--faint); font-weight:500;margin-top:2px} .acc-goods{font-size:13.5px;min-width:0} .acc-goods i{display:block;font-style:normal;font-size:12px;color:var(--mut); margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acc-sum{font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .acc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .acc-two h2{font-family:var(--disp);font-size:22px;margin:0 0 14px;font-weight:600} .acc-addr{display:flex;justify-content:space-between;gap:14px;align-items:flex-start; padding:10px 0;border-bottom:1px solid var(--band)} .acc-addr b{font-size:13px} .acc-addr p{margin:4px 0 0;font-size:13.5px;color:var(--mut)} @media (max-width:900px){ .acc-two{grid-template-columns:1fr} .acc-order{grid-template-columns:1fr 1fr;row-gap:8px} } /* ════ Отзывы и звёзды ════ Звёзды рисуются наложением: серый ряд снизу, золотой поверх обрезан по доле оценки. Так честно показывается 4,3 — без округления до целого и без двух наборов картинок. */ .stars{position:relative;display:inline-block;color:#E0D3C2;font-size:16px; letter-spacing:2px;line-height:1} .stars::before{content:"★★★★★"} .stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap; width:var(--filled,0%);color:var(--ochre);font-style:normal} .stars--small{font-size:13px;letter-spacing:1px} .rating{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13.5px} .rating b{font-weight:700} .rating span:last-child{color:var(--mut);border-bottom:1px solid var(--line)} .rating:hover span:last-child{color:var(--accent);border-color:var(--accent)} .crating{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px} .crating b{font-weight:700;color:var(--ink)} .crating i{font-style:normal;color:var(--faint)} .reviews{margin-top:44px} .rsum{display:flex;align-items:center;gap:18px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-md);padding:18px 22px; margin-bottom:18px} .rbig{font-family:var(--disp);font-size:44px;line-height:1;font-weight:600} .review{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:18px 20px;margin-bottom:12px} .rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .rhead b{font-size:14.5px} .rdate{font-size:12.5px;color:var(--faint);margin-left:auto} .rtext{margin:10px 0 0;font-size:14.5px;line-height:1.6;white-space:pre-line} .ranswer{margin:14px 0 0;padding:12px 14px;background:var(--ground); border-radius:var(--r-sm);font-size:13.5px} .ranswer b{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase; color:var(--mut);margin-bottom:5px} .ranswer p{margin:0} .rform{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:20px 22px;margin-top:20px;max-width:640px} .rform h3{font-family:var(--disp);font-size:22px;margin:0 0 14px;font-weight:600} /* Оценка — обычные радиокнопки: работают без скрипта и с клавиатуры. Порядок в разметке обратный (5→1), поэтому подсветка идёт «вперёд». */ .rstars{display:inline-flex;flex-direction:row-reverse;gap:4px} .rstars input{position:absolute;opacity:0;width:0;height:0} .rstars label{font-size:30px;line-height:1;color:#E0D3C2;cursor:pointer;transition:.12s} .rstars label:hover,.rstars label:hover ~ label, .rstars input:checked ~ label{color:var(--ochre)} .rstars input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px} /* ════ Оформление заказа ════ Две колонки: слева поля, справа состав и кнопка. На телефоне состав уходит вниз — сначала человек заполняет, потом подтверждает. */ .checkout{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start; margin-top:8px} .co-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:20px 22px;margin-bottom:16px} .co-card h2{font-family:var(--disp);font-size:21px;margin:0 0 14px;font-weight:600} .co-field{margin-bottom:14px} .co-field:last-child{margin-bottom:0} .co-field label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px} .co-field label em{font-style:normal;color:var(--ochre)} .co-field label i{font-style:normal;color:var(--faint);font-size:12px} .co-field input,.co-field textarea{width:100%;border:1px solid var(--line); border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;background:var(--ground); color:var(--ink)} .co-field input:focus,.co-field textarea:focus{outline:none;border-color:var(--accent); background:#fff} .co-err{margin:6px 0 0;font-size:12.5px;color:#B45A4A} .co-hint{margin:8px 0 0;font-size:12.5px;color:var(--mut);line-height:1.5} .co-hint a{border-bottom:1px solid var(--line)} .co-radios{display:flex;gap:10px;flex-wrap:wrap} .co-radio{display:flex;align-items:center;gap:9px;border:1px solid var(--line); border-radius:999px;padding:10px 16px;background:var(--ground);font-size:14px; cursor:pointer;transition:.16s} .co-radio:hover{border-color:var(--accent)} .co-radio input{accent-color:var(--accent)} .co-radio:has(input:checked){background:var(--band);border-color:var(--accent); color:var(--accent);font-weight:600} .co-side .cart-lines{border:none;padding:0;margin:0} .co-side .cart-row{grid-template-columns:1fr auto;gap:10px;padding:12px 0} .co-side .cart-row .pic,.co-side .qty,.co-side .cart-drop,.co-side .each{display:none} .co-side .cart-row .nm{font-size:13.5px} .co-side .cart-foot{margin-top:14px;justify-content:space-between} .co-side .cart-foot .cta{display:none} .co-side .cart-total b{font-size:24px} /* Оплата. Написана заметно и одинаково на оформлении и на странице «Доставка и оплата»: молчание про деньги покупатель читает как «сейчас попросят карту» и уходит. */ .pay-note{margin:10px 0 0;padding:11px 14px;background:var(--sage-bg); border-radius:12px;font-size:13.5px;color:#3F5B28;line-height:1.5} .pay-note b{color:#33501F} .pay-block{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .pay-block h2{font-family:var(--disp);font-size:22px;margin:0 0 10px;font-weight:600} .co-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px; font-size:13px;color:var(--mut);line-height:1.5} .co-consent input{margin-top:3px;accent-color:var(--accent)} /* Способы получения: цена справа, чтобы её было видно до выбора. */ .co-ways{display:flex;flex-direction:column;gap:8px} .co-way{display:flex;align-items:center;gap:12px;border:1px solid var(--line); border-radius:var(--r-sm);padding:12px 14px;background:var(--ground);cursor:pointer; transition:.16s} .co-way:hover{border-color:var(--accent)} .co-way:has(input:checked){background:var(--band);border-color:var(--accent)} .co-way input{accent-color:var(--accent)} .co-way-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .co-way-body b{font-size:14.5px;font-weight:600} .co-way-body i{font-style:normal;font-size:12.5px;color:var(--mut)} .co-way-price{text-align:right;font-weight:700;font-size:14.5px;white-space:nowrap} .co-way-price i{display:block;font-style:normal;font-size:11.5px;font-weight:500; color:var(--faint)} /* Заказ принят */ .thanks{background:var(--sage-bg);border:1px solid #D9E4C8;border-radius:var(--r-lg); padding:24px 26px;margin:8px 0 22px} .thanks b{display:block;font-family:var(--disp);font-size:26px;color:#3F5A24; font-weight:600;margin-bottom:8px} .thanks p{margin:0 0 6px;color:#4A5F35} .ostatus{font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 12px; background:var(--band);color:var(--accent)} .ostatus--work{background:#EDE3F2;color:#6B4A7E} .ostatus--done{background:var(--sage-bg);color:var(--sage)} .ostatus--canceled{background:#F3E7E4;color:#B45A4A} @media (max-width:900px){ .checkout{grid-template-columns:1fr} .co-side{order:2} } /* ════ Подвал ════ */ .foot{background:var(--band);margin-top:60px;padding:36px 20px 40px;color:var(--mut);font-size:13.5px} .foot .in{max-width:1180px;margin:0 auto;display:grid; grid-template-columns:1.4fr repeat(4, minmax(0,1fr));gap:32px} .foot-col--about{max-width:34ch} .foot-social{display:flex;gap:8px;margin-top:14px} .foot-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.5px; color:var(--mut);background:rgba(255,255,255,.5);transition:.16s} .foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff} @media (max-width:1000px){ .foot .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px} .foot-col--about{grid-column:1/-1;max-width:none} } .foot b{display:block;color:var(--ink);font-weight:700;margin-bottom:8px;font-size:13px; letter-spacing:1.4px;text-transform:uppercase} .foot a:hover{color:var(--accent)} .foot ul{list-style:none;margin:0;padding:0} .foot li{padding:3px 0} .foot .note{max-width:34ch;line-height:1.6} /* ════ Телефон ════ */ @media (max-width:900px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pdp{grid-template-columns:1fr;padding:16px;gap:18px} /* На телефоне миниатюры уходят под фото: колонка сбоку съедала бы ширину у самого снимка. */ .gal{flex-direction:column-reverse} .thumbs{flex-direction:row;flex:0 0 auto;overflow-x:auto;padding-bottom:2px} .blist{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .page{padding:0 14px 40px} .shop-hd .in{padding:12px 14px 0} .hd-row{flex-wrap:wrap;gap:10px} .logo{flex:1} .logo-txt{font-size:22px} .logo img{width:40px;height:40px;flex:0 0 40px} .find{order:3;flex:0 0 100%} .hero{padding:30px 22px;border-radius:20px} .hero h2{font-size:30px} /* Заголовок на мобильном 30px — крупная надпись обязана ужаться вместе с ним, иначе две строки станут одного роста и слайд потеряет главное. */ .kicker--big{font-size:19px} .lead{font-size:14.5px} .h1{font-size:28px} .secline h2{font-size:25px} .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cname{font-size:12.5px;min-height:35px} /* Бренд на плитке: 10,5 пикселя капслоком с телефона читается тяжело. */ .eyebrow{font-size:11.5px} .brand{min-width:74px} .brand .circle{width:64px;height:64px;font-size:16px} .blist{grid-template-columns:1fr} .mainnav{gap:2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .mainnav::-webkit-scrollbar{display:none} .mi>button,.mi>a{padding:8px 10px;font-size:12px;white-space:nowrap} .drop{position:fixed;left:8px;right:8px;top:auto;width:auto!important; max-height:62vh;overflow-y:auto;grid-template-columns:1fr!important} .filters{gap:8px} .filters .count{margin-left:0;flex:0 0 100%} } /* ── короткие формы: заказ в 1 клик, ожидание поступления, подписка ────── Одна разметка на три места, поэтому и стили общие. Формы намеренно неяркие: они рядом с главной кнопкой «В корзину» и не должны с ней спорить — до нажатия видна только строка-приглашение. */ .quickline { margin: 10px 0 0; font-size: 13px; color: #8A6B4F; } .linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: #8A5A38; text-decoration: underline; text-underline-offset: 3px; } .linkbtn:hover { color: #6F4526; } .qf { margin: 10px 0 0; padding: 14px 16px; background: #FBF6EF; border: 1px solid #E3D3C0; border-radius: 12px; } .qf-title { display: block; margin: 0 0 8px; font-size: 15px; color: #4A3320; } .qf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .qf-row input { flex: 1 1 190px; min-width: 0; padding: 10px 12px; font-size: 14px; color: #4A3320; background: #fff; border: 1px solid #E3D3C0; border-radius: 9px; } .qf-row input:focus { outline: none; border-color: #A87B5C; box-shadow: 0 0 0 3px rgba(168, 123, 92, .18); } .qf-row .cta { flex: 0 0 auto; } .qf-note { margin: 8px 0 0; font-size: 12px; color: #8A6B4F; } .qf-msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; } .qf-msg--ok { color: #2F6B3A; } .qf-msg--err { color: #9B2C2C; } .qf--cart { max-width: 560px; } /* Подписка в подвале: та же механика, но на тёмном фоне колонки. */ .foot-sub { margin: 14px 0 0; max-width: 340px; } .foot-sub-title { display: block; margin: 0 0 8px; font-size: 14px; } .foot-sub-row { display: flex; gap: 8px; } .foot-sub-row input { flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-size: 13px; color: #4A3320; background: #fff; border: 1px solid #E3D3C0; border-radius: 9px; } .foot-sub-ok { display: flex; gap: 8px; align-items: flex-start; margin: 9px 0 0; font-size: 12px; line-height: 1.45; cursor: pointer; } .foot-sub-ok input { margin: 2px 0 0; flex: 0 0 auto; } /* ── чат с магазином ──────────────────────────────────────────────────── Кнопка в правом нижнем углу. На телефоне поднята выше обычного: снизу стоит баннер cookie, и кнопка чата не должна на него налезать. */ .kchat { position: fixed; right: 18px; bottom: 18px; z-index: 60; } .kchat-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer; background: #8A5A38; color: #fff; font: 600 14px/1 inherit; box-shadow: 0 8px 24px rgba(74, 51, 32, .28); } .kchat-btn:hover { background: #6F4526; } .kchat--open .kchat-btn { display: none; } .kchat-box { width: min(360px, calc(100vw - 32px)); background: #FBF6EF; border: 1px solid #E3D3C0; border-radius: 14px; box-shadow: 0 18px 46px rgba(74, 51, 32, .26); display: flex; flex-direction: column; overflow: hidden; } .kchat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #EFE4D6; color: #4A3320; font-size: 15px; } .kchat-close { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: #8A6B4F; padding: 0 2px; } .kchat-log { padding: 12px 14px; max-height: min(52vh, 380px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #fff; } .kchat-hello { margin: 0; font-size: 13px; color: #8A6B4F; line-height: 1.5; } .kchat-m { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; } .kchat-m i { display: block; margin-top: 3px; font-size: 11px; opacity: .6; font-style: normal; } .kchat-t { white-space: pre-wrap; word-break: break-word; } /* Гость справа, магазин слева — как в любом мессенджере: иначе непонятно, кто говорит. */ .kchat-m--visitor { align-self: flex-end; background: #EFE4D6; color: #4A3320; } .kchat-m--operator { align-self: flex-start; background: #F6ECE0; color: #4A3320; } .kchat-m--auto { align-self: flex-start; background: #FFF4D6; color: #5A4212; border: 1px solid #EBD79A; } .kchat-form { padding: 10px 12px 12px; border-top: 1px solid #E3D3C0; } .kchat-who { display: grid; gap: 6px; margin-bottom: 8px; } .kchat-who input[type=text], .kchat-who input[type=tel], .kchat-who input[type=email] { padding: 8px 10px; font-size: 13px; color: #4A3320; background: #fff; border: 1px solid #E3D3C0; border-radius: 9px; } .kchat-ok { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.4; color: #8A6B4F; cursor: pointer; } .kchat-ok input { margin: 2px 0 0; flex: 0 0 auto; } .kchat-row { display: flex; gap: 8px; align-items: flex-end; } .kchat-row textarea { flex: 1 1 auto; min-width: 0; resize: none; padding: 9px 11px; font: inherit; font-size: 13px; color: #4A3320; background: #fff; border: 1px solid #E3D3C0; border-radius: 9px; } .kchat-row .cta { flex: 0 0 auto; padding: 9px 14px; } .kchat-msg { margin: 8px 0 0; font-size: 12px; font-weight: 600; } .kchat-msg--ok { color: #2F6B3A; } .kchat-msg--err { color: #9B2C2C; } @media (max-width: 640px) { /* Над баннером cookie и над «наверх»: перекрывать их нельзя. */ .kchat { right: 12px; bottom: 76px; } .kchat-box { width: calc(100vw - 24px); } .kchat-log { max-height: 46vh; } } /* ════ Шапка на узком экране ════ Пять пунктов меню в строку требуют около 700 px. На телефоне они не помещались, и последний обрезался на полуслове («ЖУРІ»). Хуже того: спрятанная выпадашка «Каталог» — блок шириной под тысячу пикселей — оставалась в потоке прокрутки и тянула горизонтальную полосу на КАЖДОЙ странице. Поэтому на узком экране меню уезжает в панель, а выпадашки внутри неё становятся обычными списками. Порог 860 px, а не 640: в строку меню перестаёт помещаться гораздо раньше, чем экран становится «телефоном». */ .hd-burger{display:none} .nav-back{display:none} .nav-head{display:none} @media (max-width:860px){ .hd-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; flex:0 0 auto; width:42px; height:42px; padding:0 10px; background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer; } .hd-burger span{display:block; height:2px; background:var(--ink); border-radius:2px} /* Логотип не должен драться с иконками за место: подпись под названием на телефоне съедает ширину и ничего не сообщает. */ .hd-row{gap:10px; flex-wrap:wrap} .logo{flex:1 1 auto; min-width:0} .logo-txt{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .logo-txt small{display:none} .tools{flex:0 0 auto; gap:6px} /* Поиск — во всю ширину следующей строкой: зажатый между логотипом и иконками, он превращался в поле на два символа. */ .find{flex:1 0 100%; order:3; margin-top:2px} /* Меню — выезжающая панель. Тот же