/*
Theme Name: Nesradio Custom
Description: Кастомная тема nesradio.is вместо WPBakery + Flozen. Каталог WooCommerce
с запросом цены: покупки, корзины и оплаты на сайте нет. Вёрстка
собрана по снимку builder-to-theme, числа — из эталона на 1903.
Author: Studio Mango
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: nesradio
*/
/* ========================================================================= *
Шрифт
Файлы те же, что грузила Flozen (assets/font-nasa-custom). Подобрать
«похожий» нельзя: метрики разъедутся, и вся геометрия текста уедет с ними.
========================================================================= */
@font-face{font-family:'NS-Proxima-Nova';src:url('assets/fonts/Proxima-Nova-Light.woff2') format('woff2'),url('assets/fonts/Proxima-Nova-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'NS-Proxima-Nova';src:url('assets/fonts/Proxima-Nova-Regular.woff2') format('woff2'),url('assets/fonts/Proxima-Nova-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NS-Proxima-Nova';src:url('assets/fonts/Proxima-Nova-Medium.woff2') format('woff2'),url('assets/fonts/Proxima-Nova-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'NS-Proxima-Nova';src:url('assets/fonts/Proxima-Nova-SemiBold.woff2') format('woff2'),url('assets/fonts/Proxima-Nova-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'NS-Proxima-Nova';src:url('assets/fonts/Proxima-Nova-Bold.woff2') format('woff2'),url('assets/fonts/Proxima-Nova-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
/* Иконочные шрифты эталона — файлами, а не перерисованными контурами (правило
скилла). Базовые правила и коды глифов перенесены дословно из темы Flozen. */
@font-face{font-family:'Pe-icon-7-stroke';src:url('assets/fonts/Pe-icon-7-stroke.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}
@font-face{font-family:'nasa-font';src:url('assets/fonts/nasa-font.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}
@font-face{font-family:'FontAwesome';src:url('assets/fonts/fontawesome-webfont.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:block}
[class^="pe-7s-"],[class*=" pe-7s-"]{display:inline-block;font-family:'Pe-icon-7-stroke';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[class^="icon-nasa-"],[class*=" icon-nasa-"]{display:inline-block;font-family:'nasa-font';font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.pe-7s-user:before{content:"\e605"}.pe-7s-search:before{content:"\e618"}.pe-7s-plus:before{content:"\e623"}
.pe-7s-menu:before{content:"\e636"}.pe-7s-look:before{content:"\e63e"}.pe-7s-less:before{content:"\e644"}
.pe-7s-filter:before{content:"\e655"}.pe-7s-close:before{content:"\e680"}.pe-7s-angle-up:before{content:"\e682"}
.pe-7s-angle-right:before{content:"\e684"}.pe-7s-angle-left:before{content:"\e686"}
.icon-nasa-if-search:before{content:"\57"}
.fa-caret-right:before{content:"\f0da"}.fa-caret-left:before{content:"\f0d9"}
/* ========================================================================= *
Токены
Палитра из distill: красный кнопок #EE001F, красный текста #EE0424,
тёмный текст #333E48, рамки #EFEFEF. Шкала отступов с шагом 5px.
========================================================================= */
:root{
--nes-font:'NS-Proxima-Nova',helvetica,arial,sans-serif;
--nes-red:#EE001F;
--nes-red-text:#EE0424;
--nes-dark:#333E48;
--nes-black:#000;
--nes-white:#fff;
--nes-border:#EFEFEF;
--nes-muted:rgba(0,0,0,.6);
--nes-muted-32:rgba(0,0,0,.32);
--nes-on-dark-60:rgba(255,255,255,.6);
--nes-wrap:1300px;
--nes-gutter:10px;
}
/* ========================================================================= *
Сброс и основа
========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--nes-font);font-size:15px;line-height:1.6;color:var(--nes-dark);background:var(--nes-white)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse}
.nes-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nes-skip{position:absolute;left:-9999px;top:0;background:var(--nes-white);padding:10px 20px;z-index:1000}
.nes-skip:focus{left:0}
/* Контейнер: max-width 1300 с полем 10px. Проверено на 375…1903:
до 1320 поле остаётся 10, дальше колонка упирается в 1300 и центрируется. */
.nes-row{width:100%;max-width:var(--nes-wrap);margin-inline:auto;padding-inline:var(--nes-gutter)}
/* Ниже 1201 поле контейнера удваивается: у эталона внутренняя строка получает
собственный `padding:0 10px` поверх поля ряда. Граница снята probe —
1200 → 1201 двигает по x 177 узлов ровно на 10. */
/* Поле ряда у эталона 10 на ВСЕХ ширинах. Здесь стояло 20 ниже 1200, и это
расходилось не только на каталоге: подвал — общий блок, и его контейнер
выходил на 20 у́же эталонного на 848, 745, 643, 547, 450 и 375. Замер:
`a.footer-info-link` контейнер 828/725/623/527/430/355 у эталона против
808/705/603/507/410/335 у меня. */
/* ========================================================================= *
Шапка
Десктоп от 848px: строка padding 25px по вертикали, боковые колонки по 30%,
логотип 170×51 с полями 5.6/14. Высота полосы 120.58.
========================================================================= */
/* Без своего слоя — как у эталона (`position:static; z-index:auto`). Здесь
стоял `position:relative; z-index:3`, и он запирал выпадающее меню внутри
контекста шапки: против содержимого страницы работал не `z-index:100`
панели, а тройка шапки — ровно столько же, сколько у `.nes-banner__link`.
При равенстве побеждает тот, кто ниже в разметке, то есть баннер: панель
было видно сквозь прозрачную ссылку, но мышь попадала в ссылку, `:hover`
слетал и меню закрывалось на полпути к пунктам. */
.nes-header{background:var(--nes-white)}
.nes-header__mobile{display:block}
.nes-header__desk{display:none}
@media (min-width:848px){
.nes-header__mobile{display:none}
.nes-header__desk{display:block}
}
.nes-header__inner{display:flex;align-items:center;justify-content:space-between;padding:25px 0}
.nes-header__left{width:30%;display:flex;align-items:center;justify-content:flex-start}
.nes-header__right{width:30%;display:flex;align-items:center;justify-content:space-between}
.nes-logo{margin:5.6px 0 14px;flex:0 0 auto}
/* display:block, иначе строчный бокс добавляет к h1 15px под базовой линией
и шапка становится на 15 выше эталона. */
.nes-logo__link{display:block}
.nes-logo__img{width:170px;height:51px}
/* «Valmynd» — раскрывашка по наведению.
Подпись 16/700 с интерлиньяжем 14.5 и полем 32 слева под иконку,
высота 46.5 = 14.5 + 16 + 16. */
.nes-vmenu{position:relative;margin-right:16px;border-radius:5px}
/* Переход `all .35s` — как у эталона; без него смена цвета при наведении
происходила скачком. */
/* box.mjs эталона: `h5.section-title` 95.09x46.5 с полями 15/0/16/32 и
прозрачной рамкой 1px только сверху; обёртка `div.vertical-menu` без полей. */
.nes-vmenu__label{position:relative;margin:0;padding:15px 0 16px 32px;border:0;border-top:1px solid transparent;
font:700 16px/14.5px var(--nes-font);color:var(--nes-dark);white-space:nowrap;
cursor:pointer;transition:all .35s}
/* Ниже 1200 у эталона на подписи меню появляется ПРОЦЕНТНОЕ поле: 15.87
по вертикали и 22.65 справа при 1012, 17.82 и 24.11 при 1129. Проценты
считаются от ширины контейнера, поэтому вертикаль растёт вместе с
горизонталью — фиксированными числами это не выражается. Из-за его
отсутствия «Leit» стоял на 21px левее эталонного на всех средних
ширинах, а за ним съезжала и правая часть шапки. */
@media (max-width:1199px){
/* Через ширину ОКНА, а не проценты: процентное поле считается от своего
контейнера, а он у подписи шириной с неё саму (95), и 1.63% давали
1.55px вместо 15.87 — `explain` показал это сразу.
Коэффициенты сняты с эталона на трёх ширинах: правое поле 22.65 при
1012, 24.11 при 1129, 21.2 при 894; вертикальное 15.87 и 17.82. */
.nes-vmenu__label{padding:calc(1.6667vw - 1px) calc(1.2479vw + 10.02px)
calc(1.6667vw - 1px) 32px}
}
/* Иконка бургера. В оригинале это фон ::before размером 24×12 со ссылкой на
ФАЙЛ ЧУЖОГО ДОМЕНА (studiomango.is), который отдаёт 404 — то есть на боевом
сайте иконки не видно вообще. Коробка воспроизведена, картинка выключена:
включить — одна строка, но это видимое изменение, и решение за владельцем.
Файл лежит в теме: assets/img/menu-24px.png */
.nes-vmenu__label::before{content:"";position:absolute;left:10px;top:22.75px;
width:24px;height:12px;transform:translateY(-6px);
/* Цвет у эталона на этом псевдоэлементе объявлен красным (#EE001F) — он
ничего не красит, картинка рисуется фоном, но сверка его сравнивает. */
color:#EE001F;
/* background:url('assets/img/menu-24px.png') no-repeat center/24px 12px; */}
.nes-vmenu__panel{position:absolute;top:47.5px;left:0;width:280px;z-index:100;
opacity:0;visibility:hidden;transition:.2s}
.nes-vmenu:hover .nes-vmenu__panel,
.nes-vmenu:focus-within .nes-vmenu__panel{opacity:1;visibility:visible}
.nes-vmenu__list{background:var(--nes-white);padding:5px 0}
.nes-vmenu__list li{padding:0 20px}
.nes-vmenu__list a{display:block;padding:6px 0;font:400 15.225px/24.36px var(--nes-font);color:var(--nes-dark)}
.nes-vmenu__list a:hover{color:var(--nes-red-text)}
/* Лупа «Leit»: иконка 32px, подпись 16/600. */
/* У эталона значок поиска — фон `search-24px.png` 18x18 в ::before, файл
отдаёт 404, и на экране пусто: остаётся коробка 18x18 с полем 14 справа.
Ссылка flex без выравнивания — подпись растянута на 18 (глифы на 48.28). */
.nes-search-link{display:flex;margin-right:13px}
.nes-search-link__icon{display:block;width:18px;height:18px;flex:0 0 18px;margin-right:14px;font-size:24px;line-height:24px}
.nes-search-link__icon.icon-nasa-if-search:before{content:"";display:block;width:18px;height:18px}
.nes-search-link__label{font:600 16px/14.5px var(--nes-font);color:var(--nes-dark)}
/* Часы работы: две строки в ряд с зазором 5. */
.nes-hours{position:relative;z-index:2}
.nes-hours__state{display:flex;align-items:center;gap:5px}
.nes-hours__state .op-closed{font:600 17px/17px var(--nes-font);color:var(--nes-red-text)}
/* Подпись «Opið •» у эталона КРАСНАЯ и в открытом состоянии тоже:
замер даёт rgb(238,4,36), то есть тот же #EE0424, что и у «Lokað». */
.nes-hours__state .op-open{font:600 17px/17px var(--nes-font);color:var(--nes-red-text)}
/* Приписка после подписи набирается ПО-РАЗНОМУ в двух состояниях, и одним
правилом их путать нельзя:
открыто — период дня «08:00 - 17:00», 17/17 чёрным;
закрыто — дата «September 3, 2026», 14.5/14.5 цветом #333E48.
Я задал 17 на оба, и в закрытом состоянии строка выходила крупнее и
темнее эталонной. Различаем соседним селектором по классу состояния. */
.nes-hours__state .op-next-period{font:600 14.5px/14.5px var(--nes-font);
color:var(--nes-dark)}
.nes-hours__state .op-open + .op-next-period{font-size:17px;line-height:17px;color:#000}
.nes-hours__table{position:absolute;top:100%;left:0;z-index:5;min-width:260px;
background:var(--nes-white);box-shadow:0 2px 12px rgba(0,0,0,.15);padding:10px 15px;
opacity:0;visibility:hidden;transition:.2s}
.nes-hours:hover .nes-hours__table{opacity:1;visibility:visible}
/* Ячейки таблицы часов — box.mjs эталона: таблица 220 в ширину, строка 38.45,
поля ячеек 9.62 сверху и снизу; день 15.5/700 (строка 15.5), время
15.5/400 (строка 19.24). */
.nes-hours__table table{width:220px;border-collapse:collapse}
.nes-hours__table th,.nes-hours__table td{text-align:left;padding:9.62px 0;vertical-align:middle}
.nes-hours__table th{font:700 15.5px/15.5px var(--nes-font)}
.nes-hours__table td{font:400 15.5px/19.2415px var(--nes-font)}
/* Телефон. */
.nes-hotline{margin:3.4px 0 8.5px;font:400 17px/23.8px var(--nes-font);color:var(--nes-dark)}
.nes-hotline__link{display:inline}
.nes-hotline__icon{display:inline-block;font-style:normal}
/* Иконка стоит на 3.4px выше середины строки: у эталона её верх на 46.3 при
ссылке на 46.8, то есть она чуть выступает над строкой, а `middle` опускал
её на 49.7. */
.nes-hotline__img{width:18px;height:18px;display:inline-block;vertical-align:middle;
position:relative;top:-3.4px}
.nes-hotline__link:hover{color:var(--nes-black)}
/* Мобильная шапка. Числа с эталона на 375: полоса 59.22, три ячейки
71 / 210 / 74, иконки 23.25×23.25 с зазором 12, логотип 83.33×25.
Логотип центрируется в средней ячейке, а не во всей строке. */
/* Мобильная шапка эталона — таблица (Flozen): `table{width:100%;border-collapse:
collapse;margin-bottom:0}`, у ячеек `table tr td` поле 0.62069em сверху и
снизу при кегле 1.06897em (15.5px → 9.62px), без боковых; `td.nasa-td-20`
20%, `td.nasa-td-mobile-icons` 74px; обёртка логотипа блоком со строкой 40
и выключкой по центру, картинка не выше 25. */
.nes-header__mobile-inner{width:100%;border-collapse:collapse;border-spacing:0;margin:0;table-layout:auto}
.nes-header__mobile-inner td{padding:9.62069px 0;font-size:15.5px;line-height:19.2414px;vertical-align:middle;
text-align:left;border:0}
.nes-header__mobile-left{width:20%}
.nes-header__mobile-icons{display:flex;align-items:center;gap:12px}
/* Высоту ячейки у эталона задаёт блок иконок `div.mini-icon-mobile`: 40.23 от
421 и шире (значок меню 245%), 27.23 ниже — тогда выше обёртка логотипа (40).
Отсюда таблица 59.45 от 421 и 59.22 на 375 (box.mjs, 847…375). */
@media (min-width:421px){ .nes-header__mobile-icons{min-height:40.23px} }
.nes-header__mobile-logo{display:block;max-width:500px;line-height:40px;text-align:center;font-size:14.5px}
.nes-header__mobile-logo .nes-logo__link{display:inline}
.nes-header__mobile-right{width:74px}
.nes-burger,.nes-search-toggle{display:block;line-height:0;color:var(--nes-dark)}
.nes-burger__icon,.nes-search-toggle__icon{font-size:23.25px;display:block}
.nes-header__mobile-logo .nes-logo__img{display:inline-block;width:auto;height:auto;max-height:25px;vertical-align:middle}
/* ========================================================================= *
Мобильная панель меню
Ширина 300, фон белый, поверх страницы чёрный оверлей z-index 400.
========================================================================= */
.nes-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400}
.nes-flyout{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;
background:var(--nes-white);z-index:401;overflow-y:auto;
transform:translateX(-100%);transition:transform .3s ease}
.nes-flyout.is-open{transform:none}
.nes-flyout__head{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--nes-border)}
.nes-flyout__icon{font-size:18px;flex:0 0 18px}
.nes-flyout__title{font:700 17px/1 var(--nes-font);text-transform:uppercase;letter-spacing:.5px}
.nes-flyout__close{margin-left:auto;font-size:24px;line-height:1;color:var(--nes-dark)}
.nes-flyout__group-btn{display:flex;align-items:center;justify-content:space-between;
width:100%;padding:16px 20px;border-bottom:1px solid var(--nes-border);
font:600 15px/1 var(--nes-font);text-transform:uppercase;color:var(--nes-dark)}
.nes-flyout__group-sign::before{content:"+"}
.nes-flyout__group-btn[aria-expanded="true"] .nes-flyout__group-sign::before{content:"–"}
.nes-flyout__list a{display:block;padding:12px 20px;font:400 15px/1.4 var(--nes-font);color:var(--nes-dark)}
.nes-flyout__list a:hover{color:var(--nes-red-text)}
.nes-flyout__account{border-bottom:1px solid var(--nes-border)}
.nes-flyout__account-link{display:flex;align-items:center;gap:12px;padding:16px 20px;
font:600 15px/1 var(--nes-font);text-transform:uppercase;color:var(--nes-dark)}
.nes-flyout__account-icon{font-size:20px;flex:0 0 20px}
.nes-flyout__account-link:hover{color:var(--nes-red-text)}
body.nes-locked{overflow:hidden}
/* ========================================================================= *
Баннеры главной
Высота задаётся ПРОПОРЦИЕЙ, а не пикселями: оригинал ставит инлайновый
height и пересчитывает его скриптом по ширине контейнера (2528×860 →
442.23 при 1300; 582×276 → 298.75 при 630). aspect-ratio делает то же
без JS и без скачка при загрузке.
========================================================================= */
/* width:100% обязателен рядом с aspect-ratio и min-height.
Без него браузер волен решать ОБА размера, и минимальная высота начинает
диктовать ширину через пропорцию: 330 × 2528/860 = 970 у hero и
290 × 582/276 = 612 у маленьких баннеров — ровно те числа, которые
вылезали за край экрана на всех ширинах ниже 1200. С явной шириной
пропорция считает только высоту, а min-height её подпирает. */
/* Курсор-указатель на самом баннере: у эталона кликабелен именно он
(`div.banner` с onclick), и цель наведения — баннер целиком. */
.nes-banner{position:relative;overflow:hidden;width:100%;cursor:pointer}
/* Ссылка баннера лежит ПОД содержимым. У эталона кликабелен сам баннер
(`onclick` на div), а текст и кнопки получают наведение: «Nánar» тускнеет
до .9 (`p a:hover`). Ссылка поверх всего гасила любое наведение внутри;
клик по содержимому переводит на её адрес скрипт (nav.js). */
.nes-banner__link{position:absolute;inset:0;z-index:1}
.nes-banner__image{position:absolute;inset:0;background-position:center center;background-size:cover;background-repeat:no-repeat;transition:transform .5s ease}
/* `.banner.hover-zoom:hover .banner-image{transform:scale(1.05)}`, переход
`all .3s cubic-bezier(.3,.1,.58,1)` (Flozen). */
.nes-banner--zoom .nes-banner__image{transition:all .3s cubic-bezier(.3,.1,.58,1)}
.nes-banner--zoom:hover .nes-banner__image{transform:scale(1.05)}
/* Ниже 644 картинка hero и широкого баннера у эталона не cover по центру, а
`background-size:170%; background-position:0 50%` (custom CSS страницы,
`.banner .banner-image.nasa-banner-image`); у пары малых баннеров — снова
cover по центру. Наложение на 375 показывало другой кусок фотографии. */
@media (max-width:643px){
.nes-banner--hero .nes-banner__image,
.nes-banner--wide .nes-banner__image{background-size:170%;background-position:0 50%}
}
.nes-banner__content{position:absolute;inset:0;display:flex;padding-left:var(--nes-gutter);z-index:2}
.nes-banner__content--hero{align-items:center}
/* Ниже 644 hero перестаёт центрировать содержимое и прижимает его к верху с
полем 27.2: у эталона сверху 27.5, снизу 4.2 — центрирование дало бы 15.9
и там, и там. Внутренние отступы hero при этом одинаковы на всех ширинах. */
@media (max-width:643px){
.nes-banner__content--hero{align-items:flex-start;padding-top:27.2px}
}
.nes-banner__content--middle{align-items:center}
.nes-banner__content--top{align-items:flex-start}
.nes-banner__content--center{align-items:center;justify-content:center;text-align:center;padding-left:0}
.nes-banner__inner{position:relative;z-index:2}
/* Баннеры держат ПРОПОРЦИЮ, но не бесконечно: у каждого своя минимальная
высота, и на узких экранах побеждает именно она. Замерено по эталону на
тринадцати ширинах:
hero 2528:860, минимум 330 (с 643 и ниже высота стоит на 330)
маленькие 582:276, минимум 290 в две колонки и 360 в одну
широкий 1280:298.88, минимум 200
Hero при этом во всю ширину окна вплоть до 1300 — поля у него нет вовсе. */
.nes-hero-section{background:var(--nes-black)}
.nes-hero-section .nes-row{padding-inline:0}
.nes-banner--hero{aspect-ratio:2528/860;container-type:inline-size}
.nes-banner__content--hero .nes-banner__inner{width:304.42px}
/* `.p-banner-gray{color:#fff;opacity:.3}` эталона — серый получается
прозрачностью, а не цветом; diff прозрачность не сравнивает, нашло наложение. */
.nes-banner__eyebrow{font:600 15px/24px var(--nes-font);color:var(--nes-white);text-transform:uppercase;margin-bottom:25px;opacity:.3}
.nes-banner__logo{margin-bottom:30px}
.nes-banner__logo-img{width:300px;height:36px}
.nes-banner__line{font:400 15px/20px var(--nes-font);color:var(--nes-white)}
/* Кнопка живёт в абзаце с интерлиньяжем 60 и полем 10.28 снизу — как у
оригинала. Без этого блок текста в hero на 20px короче, а раз он
центрируется по высоте баннера, весь текст съезжает на 12 вниз. */
.nes-banner__btn-wrap{margin:33px 0 10.28px;line-height:60px}
/* Абзац с «Nánar» в hero — модель эталона: скрипт Flozen ставит блоку
содержимого кегль 0.5736% ширины баннера (7.456 при 1300, 6.005 при 1047,
2.151 при 375), абзац его наследует, а кнопка — СТРОЧНАЯ ссылка 17/60 с
полями 14/58. Строка из крошечной распорки и кнопки выходит 63, а не 60, и
отступ снизу (1.37931em) тоже от этого кегля. С 60 блок hero стоял на 1.5
ниже эталона (наложение 1440). */
.nes-banner--hero .nes-banner__btn-wrap{font-size:.573576cqw;margin-bottom:calc(20em / 14.5)}
.nes-banner--hero .nes-btn{display:inline;min-width:0;height:auto;padding:14px 58px;line-height:60px}
@media (max-width:643px){ .nes-banner--hero .nes-btn{padding:10px 40px} }
/* Между hero и парой баннеров у оригинала распорка 20px (vc_empty_space).
Без неё вся страница ниже уезжает на 20 вверх. */
.nes-duo-section{margin-top:20px;margin-bottom:50px}
.nes-duo{display:flex;flex-wrap:wrap;margin-inline:-10px}
.nes-duo__col{width:50%;padding-inline:10px}
/* На 847 и ниже баннеры встают в одну колонку. */
@media (max-width:847px){ .nes-duo__col{width:100%} }
/* 20px снизу — на самом баннере, как у эталона: там `.banner{margin-bottom:20px}`,
а секция вокруг него без отступа. У героя такого отступа нет. */
.nes-banner--small{aspect-ratio:582/276;margin-bottom:20px}
/* Два баннера выровнены ПО-РАЗНОМУ, и это видно по замерам на всех ширинах:
у первого зазор до текста гуляет вместе с высотой баннера (29.9 при 1400,
1.0 при 894, 54.6 при 643) — значит он центрируется; у второго держится
около 29 на десктопе и 46 на мобильном — значит он прижат к верху. */
/* Боковое поле 10% и колонка текста 37% — оба процента от ширины БАННЕРА.
Поэтому они висят на самом блоке, а не на обёртке с полем: внутри
обёртки с `padding-left:10%` процент считался бы от оставшихся 90%,
и колонка вышла бы 33.3% вместо 37%.
Проверено на всех тринадцати ширинах: поле 63/630, 57/570, 49.3/494,
41.7/417, 80.7/807 … везде 0.100; колонка 233.1/630, 210.9/570,
182.6/494, 154.3/417 … везде 0.3700. */
.nes-banner__content--small{padding:0}
/* Модель эталона, а не flex на всю площадь: `.banner-content.valign-middle
{bottom:50%;top:auto;transform:translateY(50%)}` и `.valign-top{top:10%;
bottom:auto}`. Блок содержимого высотой в текст, а не во весь баннер, —
поэтому наведение на текст приходится на сам баннер с его картинкой
(увеличение 1.05), как у эталона, а не на слой поверх неё. */
.nes-banner__content--small.nes-banner__content--middle{display:block;inset:auto 0 50% 0;transform:translateY(50%)}
/* Верхнее выравнивание — `.banner-content.valign-top{top:10% !important}`
эталона: десятая часть ВЫСОТЫ баннера (29.9 при 298.75, 38.3 при 382.69,
33.4 при 334.33). Подобранные 29 и 46 сходились только на двух ширинах. */
.nes-banner__content--small.nes-banner__content--top{display:block;inset:10% 0 auto 0}
/* От ширины колонки зависит, на сколько строк ляжет текст, а от этого —
высота содержимого и, через центрирование, положение всего блока. */
.nes-banner__content--small .nes-banner__inner{margin-left:10%;width:37%}
.nes-banner__small-eyebrow{font:600 15px/24px var(--nes-font);color:var(--nes-muted-32)}
/* Логотип внутри абзаца — строчный, как в оригинале: у заменяемого
строчного элемента вертикальные поля входят в высоту строки, и абзац
получается 118.91 вместо 92. У блочной картинки нижнее поле схлопывается. */
/* Логотипы внутри баннеров НЕ имеют жёсткой ширины: они рисуются в свою
натуральную величину и ужимаются по колонке. Viper 186px влезает в колонку
233 и 210.9, но на 894 колонка уже 154.3 — и он обязан ужаться вместе с ней.
Escort 300px не влезает никуда и всегда равен ширине колонки.
С жёсткой шириной абзац не менял высоту, и второй баннер уезжал на 12–16px
на всех ширинах ниже 1200. */
.nes-banner__small-logo{display:inline-block;vertical-align:top;max-width:100%;height:auto;margin:27px 0}
.nes-banner__small-logo--wide{width:100%}
.nes-banner__small-title{font:400 15px/24px var(--nes-font);color:var(--nes-black);margin-bottom:27px}
/* Строка «Kaupa + цена». Ниже 1301 она переворачивается в столбец:
probe прямо показывает переключение `column-reverse → row` на границе
1300/1301 и снятие margin-top 15 у кнопки. В столбце цена оказывается НАД
кнопкой, и блок вырастает с 45 до 77 (45 + 15 + 17) — именно эти 32px
двигали всё содержимое баннера на всех ширинах ниже 1300. */
.nes-banner__buy{font:700 17px/17px var(--nes-font);color:var(--nes-dark);
display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0}
/* Кнопка у эталона (`a.banner-small-red-btn`) с полем 19 справа; строка шире
1300 разнесена по краям (`.banner-small-btn-wrapper` space-between). */
.nes-banner__buy .nes-btn{margin-right:19px}
/* `a.banner-small-red-btn{margin-right:19px}` у эталона и у широкой «Nánar»:
в строке с text-align:center поле справа сдвигает кнопку на 9.5 влево
(наложение 1440 и 847). Ниже 644 у широкой поле 0. */
.nes-banner__sub .nes-btn--wide{margin-right:19px}
@media (max-width:1300px){
.nes-banner__buy{flex-direction:column-reverse;justify-content:flex-start;align-items:flex-start;gap:0}
.nes-banner__buy .nes-btn{margin-top:15px}
}
/* Широкий баннер: контейнер 1280, высота 298.88 — то есть своя пропорция,
не такая, как у hero. Содержимое в колонке 1200 (поле 40 с каждой стороны):
заголовок 60/700 с интерлиньяжем 57 на 44.61 от верха, подпись 15.7/400 с
интерлиньяжем 60, внутри неё кнопка 162.02×49. */
/* Ноль: у эталона расстояние до партнёров даёт не отступ этой секции, а
её собственное поле сверху (см. .nes-brands-section). Пока 100px висели
здесь, на 1400 всё сходилось, а на 643 разъезжалось на 20. */
/* У `single-banner-row` эталона поле 20 снизу на вложенной обёртке (brief),
поверх отступа 20 у самого баннера. */
/* Поля снизу нет: у эталона заголовок партнёров стоит ровно на 20 (отступ
баннера) + 100 ниже баннера на 1300, 847, 643 и 375 (box.mjs). */
/* flow-root: отступ баннера 20 не должен схлопываться с отступом 100 у
заголовка партнёров — у эталона между ними 120. */
.nes-wide-section{margin-bottom:0;padding-bottom:0;display:flow-root}
.nes-brands-section{margin-top:0}
.nes-banner--wide{aspect-ratio:1280/298.88;container-type:inline-size;margin-bottom:20px}
/* Отступы внутри широкого баннера тоже пропорциональны его ширине:
44.61/1280 = 3.485%, поле по бокам 40/1280 = 3.125%, зазор до подписи
23/1280 = 1.797%. Единица cqw — от ширины самого баннера. */
/* Боковых полей нет: у эталона внутренний блок это `width:100%` с пределом
1200. Проверка на трёх ширинах сразу — баннер 1280 даёт блок 1200 (предел),
баннер 1160 даёт 1160, баннер 854 даёт 854. Пропорциональные поля 3.125cqw
совпадали только на 1400, а на 1200 отнимали лишние 72.5. */
/* Вертикаль — правило эталона, а не пропорция: `.banner-content.valign-middle
{bottom:50%;top:auto;transform:translateY(50%)}` (Flozen). Блок высотой в
содержимое стоит по центру баннера; в его высоту входят отступ заголовка 12
сверху (`.banner-inner h1{margin:12px 0}`) и отступ подписи снизу. Поле
3.485cqw совпадало только на 1300: на 847 подпись стояла на 20 ниже. */
.nes-banner__content--center{display:block;inset:auto 0 50% 0;transform:translateY(50%);
text-align:center;padding:0}
.nes-banner__content--center .nes-banner__inner{width:100%;max-width:1200px;margin-inline:auto}
.nes-banner__content--center .nes-banner__h1{margin:12px 0 23px}
/* `margin-bottom:0 !important` у `h1.banner-h1` ниже 931. */
@media (max-width:930px){ .nes-banner__content--center .nes-banner__h1{margin-bottom:0} }
.nes-banner__h1{font:700 60px/57px var(--nes-font);color:var(--nes-black);text-transform:uppercase}
/* Ниже 895 заголовок широкого баннера перестаёт быть 60px и становится
ровно 4.66% ширины БАННЕРА: 39.81/854, 37.62/807, 32.86/705, 28.11/603,
23.63/507, 19.11/410, 15.62/335 — доля одна и та же на семи ширинах.
Отсюда container-type на баннере и единица cqw: от вьюпорта эта доля
не считается, там поля контейнера мешают. */
@media (max-width:894px){
.nes-banner__h1{font-size:4.66cqw;line-height:0.95}
}
/*
* Подпись широкого баннера: у эталона ЧЕТЫРЕ режима, и устроены они наоборот
* к тому, что стояло здесь. Выше ~935 размер шрифта пропорционален ширине
* БАННЕРА — ровно 1.2267%: даёт 15.7022 при 1280, 14.2301 при 1160, 11.8993
* при 970, 11.0406 при 900. Интерлиньяж при этом фиксированный, 60. Ниже идут
* ступени с фиксированным размером и своим интерлиньяжем.
*
* Раньше здесь было обратное — шрифт прибит к 15.7022, интерлиньяж плавает.
* На 1400 это совпадало (4.6875% от 1280 как раз 60), а на 894 подпись
* получалась 89 в высоту против эталонных 100.
*
* Точная граница верхней ступени лежит между 931 и 939 — эталон при 930 ещё
* даёт 17/50, при 940 уже пропорциональный. Уточнять смысла нет: ни одна
* проверяемая ширина в этот промежуток не попадает.
*/
/* Отступ снизу — `p{margin-bottom}` темы в em: 17.04 при кегле 12.35, 20.69
при 15, 16.55 при 12 — везде 1.3793em (20/14.5). Сверху отступа нет: зазор
до подписи даёт отступ заголовка. */
.nes-banner__sub{font:400 1.2267cqw/60px var(--nes-font);color:var(--nes-dark);margin:0 0 calc(20em / 14.5)}
/* Запросы стоят ПОСЛЕ базового правила: специфичность одинаковая, решает
порядок. Записанные выше, они молча не сработали бы. */
@media (max-width:934px){
.nes-banner__sub{font-size:17px;line-height:50px}
}
@media (max-width:850px){ .nes-banner__sub{font-size:15px;line-height:50px} }
@media (max-width:643px){
/* Ровно половина ширины баннера: 301.5 при 603. Заголовок ужимается вместе
с блоком, но его размер считается от баннера (cqw), поэтому остаётся 28.1. */
/* У эталона ниже 644 содержимое баннера — правая половина: `width:50%;
margin-left:50%` на `.nasa-banner-content` (x 187.5 при 375, 301.5 при 603). */
.nes-banner__content--center .nes-banner__inner{width:50%;margin-left:50%;transform:translateY(10px)}
/* `.banner .banner-inner{transform:translateY(10px)}` и у кнопки
`a.banner-small-red-btn.red-btn-wide{transform:translateY(-10px)}`. */
.nes-banner__sub .nes-btn--wide{transform:translateY(-10px);margin-right:0}
/* `a.banner-small-red-btn{margin-top:15px}` (до 1300) начинает влиять на
строку, когда кнопка становится строчно-блочной: подпись 69 = 17 + 15 + 37. */
.nes-banner__sub .nes-btn--wide{margin-top:15px}
.nes-banner__sub{font-size:12px;line-height:17px}
}
/* Минимальные высоты баннеров.
Стоят ЗДЕСЬ, после базовых правил: медиазапрос с той же специфичностью,
записанный выше по файлу, проигрывает обычному правилу ниже — на этом
минимум 360 у маленьких баннеров молча не применялся.
Границы сняты по эталону: hero держит пропорцию до 644 и только с 643
упирается в 330; маленькие берут 290 в две колонки и 360 в одну;
широкий упирается в 200 с 847 (на 894 у эталона ещё 199.4, то есть
пропорция). */
@media (max-width:1200px){ .nes-banner--small{min-height:290px} }
/* Поле колонки секций главной у эталона 10 шире 1200 и 20 на 1200 и уже
(box.mjs: `div.nasa-col` padding 0/10 → 0/20; баннеры 570 на x=20 и 610,
широкий баннер 1160 на x=20, контейнер категорий с полем 20). У hero поля нет. */
@media (max-width:1200px){
.nes-duo-section .nes-row,
.nes-cats-section .nes-row,
.nes-wide-section .nes-row{padding-inline:20px}
}
/* Текст hero у эталона сидит в `div.banner-content-warper` с полем слева 10
шире 1200 и 20 на 1200 и уже (box.mjs: x 110/10 на 1500/1300, 20 на 1200,
847 и 375), при том что сам баннер во всю ширину без поля. */
@media (max-width:1200px){
.nes-banner--hero .nes-banner__content{padding-left:20px}
}
/* Порог 360 у маленьких баннеров включается только с 643, а не с 847: эталон
держит пропорцию 582/276 и в одну колонку — при 745 его баннер 334.3, что
ровно 705/2.1087. Стоя с 847, порог срабатывал раньше времени и раздувал
баннер до 360, унося вниз всё, что за ним. При 847 порог не связывает
ни там, ни тут: 382.7 больше 360. */
/* Пороги высоты — ВСЕ с 643, а не с 847: эталон держит пропорцию и в одну
колонку. Широкий при 745 у него 164.6 (705/4.283), при 800 — 177.5,
при 847 — 188.4, и только при 643 упирается в 200. С порогом от 847
мой баннер стоял 200 на всех трёх и уносил страницу вниз на 35, 22 и 12. */
@media (max-width:643px){ .nes-banner--hero{min-height:330px}
.nes-banner--small{min-height:360px}
.nes-banner--wide{min-height:200px} }
/* `.banner .banner-inner{transform:translateY(10px)}` ниже 644 — у ОБОИХ
баннеров пары: первый стоит на центр + 10, второй на 10% высоты + 10
(36 + 10 = 46 при высоте 360). Раньше второй держали полем 46 без этого
сдвига; с правилом `top:10%` сдвиг нужен и ему. */
@media (max-width:643px){
.nes-banner__content--middle .nes-banner__inner,
.nes-banner__content--top .nes-banner__inner{position:relative;top:10px}
}
/* Кнопка: красная, радиус 7, интерлиньяж 60 в hero и 17 в маленьких баннерах. */
/* Габариты кнопок у эталона фиксированные, а не по содержимому: обычная
118.03×45, широкая 162.02×49. Задаём min-width, чтобы правка текста через
Live Edit могла кнопку расширить, но не сузить. */
.nes-btn{display:inline-flex;align-items:center;justify-content:center;
background:var(--nes-red);color:var(--nes-white);border-radius:7px;
font:600 17px/60px var(--nes-font);min-width:118.03px;height:45px;
padding:0 12px;text-align:center}
.nes-btn--wide{min-width:162.02px;height:49px}
/* Ниже 644 кнопка мельчает целиком: кегль 17 → 14, коробка 162×49 → 117.9×37.
Граница именно 643, а не 745: замер по эталону на тринадцати ширинах
показывает 162×49 вплоть до 745 включительно. */
@media (max-width:643px){
/* Только широкая: `a.banner-small-red-btn.red-btn-wide{font-size:14px}`;
«Kaupa» в паре малых баннеров остаётся 17 (box.mjs на 375). */
.nes-btn--wide{font-size:14px}
.nes-btn--wide{min-width:117.9px;height:37px}
}
/* Красные кнопки баннеров у эталона при наведении фон не меняют; кнопки
внутри абзаца (hero «Nánar», широкий баннер) получают `p a:hover{opacity:.9}`,
«Kaupa» в двойных баннерах стоит вне абзаца и эффекта не имеет. */
.nes-banner__btn-wrap .nes-btn:hover,.nes-banner__sub .nes-btn:hover,.nes-contact__intro a:hover{opacity:.9}
/* ========================================================================= *
Сетка категорий
Пять колонок, рамка 1px #efefef, подпись 15.95/400 uppercase с прозрачностью
.6, счётчик Woo спрятан.
========================================================================= */
/* Зазоры между секциями замерены по эталону, а не выведены из шкалы: у
оригинала между блоками стоят распорки vc_empty_space разной высоты.
Верхний зазор задан ПОЛЕМ, а не отступом: соседние вертикальные margin
схлопываются в максимум, и margin-top:24.3 рядом с margin-bottom:50 у
предыдущей секции не давал ничего вовсе. */
/* 4.2 сверху — внутри секции: у эталона заголовок стоит на 955.8 при секции
с 951.6, и эти же 4.2 видны при 375. Полем, а не отступом заголовка:
отступ сбрасывается наружу и секция начинается не там. */
.nes-cats-section{padding-top:4.2px;margin-bottom:60px}
/* Регистр не преобразуется: у эталона текст заголовка набран заглавными в
самой разметке («VELDU VÖRUFLOKK»), `text-transform` у него none. */
.nes-cats__title{font:600 21px/29.4px var(--nes-font);color:var(--nes-black);
text-transform:none;margin:0}
/* Сетка категорий — модель эталона (box.mjs `li.product-category` на 1500,
1300, 1200, 847, 375):
пункт поле 0/5, рамки на нём нет (она у ссылки внутри);
ширина 18% / 23% / 31% / 48.75% ширины списка — 5 / 4 / 3 / 2 колонки,
границы 1100, 991, 643;
отступы 1.25% со всех сторон, у первого в ряду слева 0, у последнего
справа 0; ряд прижат влево (на трёх колонках остаётся 2%);
список шире 1200 выходит на 5 за поле колонки (232.19 = 18% от 1290 при
содержимом 1280, первая плитка на x=5), на 1200 и уже — ровно
по полю (208.8 = 18% от 1160, первая на x=20). */
.nes-cats{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;
list-style:none;padding:0;margin:0 -5px}
@media (max-width:1200px){ .nes-cats{margin-inline:0} }
.nes-cats__item{width:18%;padding:0 5px;margin:1.25%;min-width:0}
.nes-cats__item:nth-child(5n+1){margin-left:0}
.nes-cats__item:nth-child(5n){margin-right:0}
.nes-cats__link{border:1px solid var(--nes-border)}
@media (max-width:1100px){
.nes-cats__item{width:23%}
/* Сброс правил предыдущего числа колонок той же цепкостью (0,2,0). */
.nes-cats__item:nth-child(n){margin:1.25%}
.nes-cats__item:nth-child(4n+1){margin-left:0}
.nes-cats__item:nth-child(4n){margin-right:0}
}
@media (max-width:991px){
.nes-cats__item{width:31%}
/* Сброс правил предыдущего числа колонок той же цепкостью (0,2,0). */
.nes-cats__item:nth-child(n){margin:1.25%}
.nes-cats__item:nth-child(3n+1){margin-left:0}
.nes-cats__item:nth-child(3n){margin-right:0}
}
@media (max-width:643px){
.nes-cats__item{width:48.75%}
/* Сброс правил предыдущего числа колонок той же цепкостью (0,2,0). */
.nes-cats__item:nth-child(n){margin:1.25%}
.nes-cats__item:nth-child(2n+1){margin-left:0}
.nes-cats__item:nth-child(2n){margin-right:0}
}
.nes-cats__link{display:block}
.nes-cats__name{font:400 15.95px/22.33px var(--nes-font);color:var(--nes-muted);
text-transform:uppercase;text-align:center;margin:10px 0 .5em}
/* Отступ снизу и интерлиньяж — правило `h2` темы эталона в долях кегля:
.5em и 1.1931 (7.975 и 19.03 при 15.95, 7.25 и 17.30 при 14.5). Числа
7.98 и 1.19 сходились до 547, а на 375 каждый ряд сетки выходил на 0.68
выше, и к подвалу набегало 5px (наложение 375). */
.nes-cats__name .count{display:none}
/* Порог 847, а не 643: у эталона интерлиньяж подписи 19.03 уже на 847 и 745
(сверка главной по свежему probe), 22.33 — с 894. */
@media (max-width:847px){ .nes-cats__name{line-height:1.1931} }
@media (max-width:546px){ .nes-cats__name{font-size:14.5px} }
.nes-cats__thumb{display:block}
.nes-cats__img{width:80%;height:auto;margin-inline:auto}
/* Описание категории. Числа с эталона: абзац 14.5/23.2 с отступом 20 снизу,
цвет обычного текста. Наследование от темы давало 15/24 и нулевой отступ. */
.term-description{font:400 14.5px/14.5px var(--nes-font);color:var(--nes-dark)}
.term-description p{font:400 14.5px/1.6 var(--nes-font);margin:0 0 20px}
/* ========================================================================= *
Партнёры
========================================================================= */
/* Отступ секции — ровно 40px, как класс `margin-bottom-40` у эталона. Всё
остальное расстояние до подвала даёт пустота под последним рядом ячеек. */
.nes-brands-section{padding-top:0;margin-bottom:40px}
.nes-brands-section .nes-row{padding-inline:0}
/* Партнёры — правила эталона (`.brands-container`, custom CSS страницы), а не
подогнанная высота ячеек: заголовок не шире 1280 по центру с отступом 100
сверху; список flex с переносом, выравниванием по центру и разносом
space-between; пункт не шире 20%, отступ 2%, поле 10; логотип не шире 225
(на 1200 и уже — 100% пункта); на 1300 и уже у текстовой колонки поля 20;
на 450 и уже пункт до 40%. */
.nes-brands__title{max-width:1280px;margin:100px auto 0;font:600 21px/29.4px var(--nes-font);
color:var(--nes-black);text-transform:uppercase}
@media (max-width:847px){
.nes-cats__title,.nes-brands__title{line-height:normal}
}
/* Сетка Foundation у эталона: список `[class*=block-grid-]` с полями −10 по
краям, пункт `block-grid-4 > li` 25% при `max-width:20%` — итог 20% (260 при
списке 1300, explain.mjs), логотип внутри по центру (`li.text-center`). */
/* Список во всю ширину ряда (1300 при окне 1300, 847 при 847 — box.mjs), и
у него есть clearfix Foundation: `::before`/`::after` с content " ". Во
flex они становятся пустыми элементами строки, и space-between делит
свободное место на ЧЕТЫРЕ промежутка, а не на три: первый логотип на 39,
а не на 26. */
.nes-brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
list-style:none;margin:0;padding:0;
/* Строка ячейки — кегль основного блока эталона 14.5/23.2, а не 15/24:
логотип строчный, и ячейка с низким логотипом равна строке (43.2, а не
44) — наложение 375 давало подвал на пиксель ниже. */
font-size:14.5px;line-height:23.2px}
.nes-brands::before,.nes-brands::after{content:" ";display:table}
.nes-brands__item{width:25%;max-width:20%;margin:2%;padding:10px;text-align:center}
/* Ширина — из атрибута width, как у эталона (`img.attachment-full`), с
пределом 225 / 100%. */
.nes-brands__img{display:inline-block;max-width:225px;height:auto;vertical-align:middle}
/* У эталона поле 20 у колонки, а заголовок внутри неё не шире 1280 — на 1300
и уже он встаёт на x=20, а не центруется. */
@media (max-width:1300px){ .nes-brands__title{max-width:none;margin-left:20px;margin-right:20px} }
@media (max-width:1200px){ .nes-brands__img{max-width:100%} }
/* Ниже 451 `small-block-grid-2` (50%) при `max-width:40%` — итог 40%. */
@media (max-width:450px){ .nes-brands__item{width:50%;max-width:40%} }
/* ========================================================================= *
Подвал
Секция padding 100 по вертикали, левая колонка 2/3 с добавочным полем 10
справа, правая 1/3. Карта сайта — список в три колонки неравной ширины:
flex-direction column + wrap + height 180, ширину колонки задаёт самый
длинный пункт в ней.
========================================================================= */
/* Светлая линия над чёрным подвалом — у эталона `1px solid #ECECEC` на самой
обёртке. Без неё подвал был на 1px выше на каждой ширине, и это ровно тот
остаток, который держался после всех прочих правок. */
.nes-footer{background:var(--nes-black);color:var(--nes-white);
/* Не var(--nes-border): у рамок каталога #EFEFEF, а здесь у эталона
именно #ECECEC — цвета разные. */
border-top:1px solid #ECECEC}
.nes-footer__section{padding:100px 0}
/* Отрицательное поле строки, как у эталона: без него содержимое колонок
начинается на 10px правее (x=70 вместо 60 при 1400). */
.nes-footer__cols{display:flex}
/* Поле колонок подвала — ВСЕГДА 10, а не переменная контейнера: у эталона это
поле сетки Foundation, оно не растёт вместе с полем ряда. С var(--nes-gutter)
ниже 1201 содержимое уезжало на 10px вправо (x=30 вместо 20). */
.nes-footer__left{width:66.6667%;padding-inline:10px;padding-right:20px}
.nes-footer__right{width:33.3333%;padding-inline:10px}
/* `.footer-menu .section-title{color:#fff;opacity:.6}` эталона. */
.nes-sitemap__title{font:400 17px/17px var(--nes-font);color:var(--nes-white);margin:0 0 5px;opacity:.6}
.nes-sitemap__list{display:flex;flex-direction:column;flex-wrap:wrap;height:180px;margin:0 0 20px}
.nes-sitemap__list li{line-height:35px}
/* display:block, а не inline-block: у строчно-блочной ссылки строка пункта
выходит 36 вместо 35, и за четырнадцать пунктов подвал уезжает на 4px. */
.nes-sitemap__list a{display:block;font:600 17px/35px var(--nes-font);color:var(--nes-white)}
/* Наведение у эталона — прозрачность 0.6 без смены цвета (hover.mjs на
«Um fyrirtæki»: Heim, Hljómtæki… `opacity:0.6`). */
.nes-sitemap__list a:hover{opacity:.6}
.nes-info{display:flex;justify-content:flex-end}
.nes-info__col--hours{margin-right:60px}
.nes-info__item{margin-bottom:34px;font:600 17px/16px var(--nes-font);color:var(--nes-white)}
/* У последней строки поля нет: у эталона правый столбец 212 = 48+34+48+34+48,
а не 246. Из-за лишних 34 подвал был на 23px выше. */
.nes-info__item:last-child{margin-bottom:0}
/* Подпись — БЛОЧНАЯ, и это не мелочь: после блока идёт
, который даёт
пустую строку. Отсюда высота строки контактов 48, а не 32, и шаг блока 82.
Со строчной подписью весь правый столбец подвала короче на 16px за пункт. */
.nes-info__head{display:block;font:400 17px/16px var(--nes-font);color:var(--nes-on-dark-60)}
.nes-info__link{color:var(--nes-white)}
/* `a.footer-info-link:hover{color:rgba(255,255,255,.6)}` эталона. */
.nes-info__link:hover{color:rgba(255,255,255,.6)}
/* Число колонок карты сайта задаёт ВЫСОТА списка, а не смена направления:
14 пунктов по 35px = 490 в высоту, и при height:180 они ложатся в три
колонки, при 245 — в две, при 490 — в одну. Замер эталона: 3 колонки на
1400/1047/894, 2 на 643, 1 на 375.
Ниже 895 блок контактов уходит ПОД карту сайта — у эталона на 894
«Símanumer» уже стоит слева внизу, а не справа. */
@media (max-width:894px){
.nes-footer__cols{flex-wrap:wrap}
.nes-footer__left,.nes-footer__right{width:100%}
/* Никакого отступа между блоками: у эталона сложенные колонки идут встык на
всех ширинах — замер даёт зазор ровно 0 при 375, 547, 643, 745 и 894.
Стоявшие здесь 40px гасили вторую ошибку — короткий список карты сайта, —
и из-за этого высота документа сходилась при обеих неверных величинах. */
.nes-info{justify-content:flex-start;gap:60px}
.nes-footer__left{padding-right:10px}
/* Колонки контактов у эталона делят ширину 3:10 с зазором 60: 183.22 и
610.78 на 894, 172.61 и 575.39 на 848, 125.5 на 644. */
.nes-info__col--hours{margin-right:0;flex:3 1 0;min-width:0}
.nes-info__col--contact{flex:10 1 0;min-width:0}
/* Карта сайта у эталона на 10 уже колонки подвала: столбцы 223.69 / 262.58 /
311.72 на 848 против моих 227.02 / 265.91 / 315.05 — лишние 10 делились
на три столбца (на 547 — на два, по 5). */
.nes-sitemap__list{margin-right:10px}
}
@media (max-width:643px){
/* 1:2 на 451…643: 181 и 362 на 643, 117 на 451. */
.nes-info__col--hours{flex:1 1 0}
.nes-info__col--contact{flex:2 1 0}
/* 270, а не 245: двух колонок хватает и там и там (270/35 = 7 пунктов в
колонке), но у эталона сам блок карты сайта высотой 312 = 22 + 270 + 20. */
.nes-sitemap__list{height:270px}
}
@media (max-width:450px){
.nes-sitemap__list{height:auto;flex-wrap:nowrap}
/* Контакты тоже встают в столбец: у эталона на 375 «Símanumer» и
«Heimilisfang» идут под часами, а не справа от них. */
.nes-info{flex-direction:column;gap:0}
.nes-info__col--hours{flex:none;width:50%}
.nes-info__col--contact{flex:none;width:100%}
/* Вертикально колонки расходятся на 30: у эталона «Helgar Lokað» кончается
на 3644.4, а «Símanumer» начинается на 3674.4. */
.nes-info__col--hours{margin-right:0;margin-bottom:30px}
}
/* ========================================================================= *
Обычные страницы
========================================================================= */
/* Заголовок страницы: 23.2/700 с интерлиньяжем 32.48, uppercase, #333,
по центру, на 40 ниже шапки и на 15 выше содержимого. */
.nes-page-head{padding-top:40px}
.nes-page-title{font:700 23.2px/32.48px var(--nes-font);color:#333;
text-transform:uppercase;text-align:center;margin:0 0 15px}
/* Ниже 848 у эталона интерлиньяж заголовка страницы — от общего `h1`
(27.68 при 23.2), а не 32.48 (explain.mjs на request-quote, 375). */
@media (max-width:847px){ .nes-page-title{line-height:27.6799px} }
/* «Senda fyrirspurn»: список запроса цены. */
/* От кнопки до подвала у эталона ровно 191.75 на всех ширинах (снимки):
отбивка 21.75 у `p.return-to-shop` плюс 40 до подвала. Стояло 66.8 — на 5.05
больше, и на узких ширинах страница прокручивалась до кнопки «наверх». */
.nes-quote{padding-bottom:61.75px}
.nes-quote__empty{font:400 14.5px/1.6 var(--nes-font);color:var(--nes-dark);margin:0 0 21.75px}
.nes-quote__back{margin:0}
.nes-quote__back-btn{display:inline-block;background:#FDCE07;color:#000;border:1px solid #FDCE07;border-radius:4px;
font:700 15px/15px var(--nes-font);letter-spacing:normal;text-transform:capitalize;text-align:center;
padding:13px 35px}
.nes-quote__back-btn:hover{opacity:.8;background:#000;border-color:#333;color:#fff}
.nes-quote__table{width:100%;margin-bottom:30px;border-collapse:collapse}
.nes-quote__table th,.nes-quote__table td{border-bottom:1px solid var(--nes-border);
padding:12px 10px;font:400 14.5px/23.2px var(--nes-font);color:var(--nes-dark);text-align:left;vertical-align:middle}
.nes-quote__col-img{width:90px}
.nes-quote__col-img img{width:70px;height:auto}
.nes-quote__col-del{width:40px;text-align:right}
.nes-quote__del{font-size:20px;line-height:1;color:var(--nes-dark)}
.nes-quote__del:hover{color:var(--nes-red-text)}
.nes-quote-btn.is-added{background:#0a7d28}
/* Заполненный список запроса — разметка пакета mango-request-quote (как YITH на
эталоне). Правила перенесены из style.css Flozen эталона (`.shop_table …`,
`.quantity …`, `.woocommerce-message`), числа сверены снимком
`/request-quote/?add-to-quote=2310` (out/quote-filled). Селекторы через id:
на кандидате подключены woocommerce-layout/woocommerce.css, у эталона их нет,
и их правила (скругление таблицы, красный «×» с !important, padding у
.form-row) иначе перебивают. */
/* От низа формы до подвала у эталона ровно 40 (box.mjs на 375/847/1440). */
.nes-quote--filled{padding-bottom:40px}
/* Отступ таблицы (10px) иначе схлопывается с нижним полем заголовка страницы;
у эталона между ними стоит блок #yith-ywraq-message. */
.nes-quote .ywraq-form-table-wrapper{display:flow-root}
.nes-quote #yith-ywraq-form{margin:0 0 14px}
.nes-quote #yith-ywrq-table-list{width:100%;margin:10px 0 0;border:0;border-radius:0;border-collapse:collapse;border-spacing:0}
.nes-quote #yith-ywrq-table-list th,.nes-quote #yith-ywrq-table-list td{box-sizing:border-box;border:1px solid #aaa;border-radius:0;padding:8.5517px;vertical-align:middle}
.nes-quote #yith-ywrq-table-list thead{text-transform:uppercase;color:#222}
/* У заголовков поле 8 (у эталона 7.99994), у ячеек 8.5517: при 8.5517 у всех
автоматическая раскладка таблицы на 745 отдавала колонке Total на 2px больше. */
.nes-quote #yith-ywrq-table-list th{padding:7.99994px}
/* Flozen `.shop_table thead tr{border-bottom:2px solid #ECECEC}`: при схлопнутых
рамках граница под заголовком становится 2px и добавляет по 0.5px заголовку и
строке товара — без неё таблица на 1px короче и подвал в наложении двоится. */
.nes-quote #yith-ywrq-table-list thead tr{border-bottom:2px solid #ECECEC}
.nes-quote #yith-ywrq-table-list th{font:700 14.5px/18px var(--nes-font);color:#222;text-transform:uppercase;text-align:left}
.nes-quote #yith-ywrq-table-list td{font:400 15.5001px/19.2415px var(--nes-font);color:#333e48}
.nes-quote #yith-ywrq-table-list .product-remove{width:30px}
.nes-quote #yith-ywrq-table-list .product-remove a.remove{display:block;position:relative;width:20px;height:20px;margin:0;padding:0;border:0;border-radius:0;
text-indent:-9999px;font:400 15.5001px/19.2415px var(--nes-font);color:#333e48!important;background:none;text-align:left;text-decoration:none}
.nes-quote #yith-ywrq-table-list .product-remove a.remove::before,.nes-quote #yith-ywrq-table-list .product-remove a.remove::after{content:"";
position:absolute;top:10px;left:0;width:15px;height:1px;border-top:2px solid #222;transition:all .2s ease}
.nes-quote #yith-ywrq-table-list .product-remove a.remove::before{transform:rotate(-45deg)}
.nes-quote #yith-ywrq-table-list .product-remove a.remove::after{transform:rotate(45deg)}
.nes-quote #yith-ywrq-table-list .product-remove a.remove:hover{background:none}
/* Наведение как у Flozen: обе линии «×» распрямляются в одну. */
.nes-quote #yith-ywrq-table-list .product-remove a.remove:hover::before,.nes-quote #yith-ywrq-table-list .product-remove a.remove:hover::after{transform:rotate(0)}
.nes-quote #yith-ywrq-table-list td.product-name a:hover{color:#000}
.nes-quote #yith-ywrq-table-list th.product-name{padding:0;width:auto}
.nes-quote #yith-ywrq-table-list td.product-name{padding:8px 10px;color:#444}
.nes-quote #yith-ywrq-table-list td.product-name a{font:700 14.5px/18px var(--nes-font);color:#333e48}
.nes-quote #yith-ywrq-table-list td.product-thumbnail{width:70px;padding-top:15px;padding-right:10px;padding-bottom:15px}
.nes-quote #yith-ywrq-table-list td.product-thumbnail img{display:inline-block;width:60px;max-width:100%;height:auto;vertical-align:middle}
.nes-quote #yith-ywrq-table-list .product-quantity{width:120px;text-align:center}
.nes-quote #yith-ywrq-table-list .product-subtotal{font-weight:700;text-align:right}
.nes-quote #yith-ywrq-table-list td.product-subtotal,.nes-quote #yith-ywrq-table-list td.product-subtotal .amount{color:#FDCE07;font-weight:700}
.nes-quote #yith-ywrq-table-list td.actions{text-align:left}
.nes-quote #yith-ywrq-table-list .quantity{display:inline-block;float:none;position:relative;top:-1px;width:70px;margin:0;text-align:left;vertical-align:middle}
.nes-quote #yith-ywrq-table-list .quantity .input-text.qty{box-sizing:border-box;display:inline-block;width:50px;height:42px;margin:0;padding:0;
border:2px solid #ccc;border-radius:0!important;background:#fff;color:#fb0000;font:700 13.8966px/42px var(--nes-font);text-align:center;-moz-appearance:textfield}
.nes-quote #yith-ywrq-table-list .quantity .qty::-webkit-inner-spin-button,.nes-quote #yith-ywrq-table-list .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nes-quote #yith-ywrq-table-list .quantity .plus,.nes-quote #yith-ywrq-table-list .quantity .minus{box-sizing:border-box;display:block;overflow:hidden;position:absolute;left:auto;right:1px;
width:21px;height:21px;padding:0;border:2px solid #ccc;border-radius:0;background:#fff;font:400 15.5001px/18px var(--nes-font);color:#333e48;text-align:center;text-decoration:none;transition:all .35s}
.nes-quote #yith-ywrq-table-list .quantity .plus{top:0}
.nes-quote #yith-ywrq-table-list .quantity .minus{bottom:0;border-top:none}
.nes-quote #yith-ywrq-table-list .quantity .plus:hover,.nes-quote #yith-ywrq-table-list .quantity .minus:hover{background:#efefef}
.nes-quote #yith-ywrq-table-list .quantity .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nes-quote #yith-ywraq-form input.button,.nes-quote #yith-ywraq-default-form .raq-send-request{display:inline-block;box-sizing:border-box;margin:0;padding:13px 35px;
background:#FDCE07;color:#000;border:1px solid #FDCE07;border-radius:4px;font:700 16.0345px/16.0345px var(--nes-font);text-transform:capitalize;cursor:pointer;
-webkit-appearance:button;transition:all .5s}
.nes-quote #yith-ywraq-default-form .raq-send-request{font-size:15px;line-height:15px}
.nes-quote #yith-ywraq-form input.button:hover,.nes-quote #yith-ywraq-default-form .raq-send-request:hover{opacity:.8;background:#000;border-color:#333;color:#fff}
.nes-quote .yith-ywraq-mail-form-wrapper{padding:25px}
.nes-quote .yith-ywraq-mail-form-wrapper h3{font:400 24px/33.6px var(--nes-font);color:#000;margin:.2em 0 .5em}
.nes-quote #yith-ywraq-default-form .form-row{margin:0 0 21.75px;padding:0}
.nes-quote #yith-ywraq-default-form label{display:block;font:500 14.5px/1.6 var(--nes-font);color:#4d4d4d;margin:0 0 3.00005px}
.nes-quote #yith-ywraq-default-form .required{color:red;text-decoration:none;border:0}
.nes-quote #yith-ywraq-default-form .optional{color:#4d4d4d}
/* Высота 34.953125 (34+61/64), а не 34.9531: Chrome кладёт размер на сетку 1/64 с
округлением вниз, и 34.9531 (чуть меньше 61/64) раскладывается в 34.9375, а 34.98 —
в 34.96875. У эталона ровно 34.953125 (explain.mjs + box.mjs, 13.09). */
.nes-quote #yith-ywraq-default-form .input-text{display:block;box-sizing:border-box;width:100%;height:34.953125px;padding:6.27587px;
border:1px solid #ccc;border-radius:5px;background:#fff;color:rgba(0,0,0,.75);font:400 13px/normal var(--nes-font);box-shadow:none}
.nes-quote #yith-ywraq-default-form textarea.input-text{height:50px}
@media (max-width:847px){
.nes-quote .yith-ywraq-mail-form-wrapper h3{font-size:18.9999px;line-height:22.6688px}
}
/* Уведомление после отправки формы (эталон `/request-quote/?order=1`,
out/quote-sent): Flozen `.woocommerce-message` — поле 15, фон #5cb85c, белый
текст; перед текстом галочка (у эталона FontAwesome \f00c с полем 3px — здесь
тот же знак векторной картинкой, шрифт FontAwesome тема не грузит). */
.nes-quote .woocommerce-message{display:block;position:relative;box-sizing:border-box;margin:0;padding:15px;background:#5cb85c;border:0;border-radius:0;
color:#fff;font:400 14.5px/14.5px var(--nes-font);list-style:none}
.nes-quote .woocommerce-message::before{content:"";display:inline-flex;box-sizing:content-box;position:static;width:14.5px;height:14.5px;padding:3px;margin-right:10px;
border-radius:99px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath fill='%23fff' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") center/12px no-repeat;
vertical-align:middle}
/* «Hafðu samband»: вводный абзац и форма в две колонки. */
.nes-contact{padding-bottom:40.2px}
.nes-contact__intro{font:400 14.5px/1.6 var(--nes-font);color:var(--nes-dark);margin:0 0 21.75px}
.nes-contact__intro a{color:#000;text-decoration:underline}
/* Числа формы с эталона на 1400 (контейнер 1280):
колонки по 640 без зазора, поле ввода 615 (у левой колонки поле 25 справа,
у правой — 25 слева), подпись 23.2, поле 35, зазор между парами 32.5,
текстовое поле 615×117, кнопка 121.4×38. Форма начинается на 60 ниже
вводного абзаца. */
.nes-form__form{padding-top:60px;padding-bottom:44.3px}
.nes-form__cols{display:flex;gap:0}
.nes-form__col{flex:0 0 50%;min-width:0}
.nes-form__col--left{padding-right:25px}
.nes-form__col--right{padding-left:25px}
.nes-form__item{margin-bottom:32.5px}
/* Подпись — правило Foundation эталона `label{color:#4d4d4d;font-weight:500;
margin-bottom:.2069em}`, семейство наследуется (Proxima Nova). `familyUsed`
снимка писал «sans-serif», но глифы эталона 39.19×17 против 40.31×16 у
Arial — наложение показало другой шрифт. */
.nes-form__label{display:block;font:500 14.5px/23.2px var(--nes-font);color:#4d4d4d;margin-bottom:3px}
/* Поля — `input[type=text]` / `textarea` Foundation эталона: 13px,
интерлиньяж normal, поле .48276em (6.276), цвет rgba(0,0,0,.75). */
.nes-form__input,.nes-form__textarea{width:100%;box-sizing:border-box;
font:400 13px/normal var(--nes-font);color:rgba(0,0,0,.75);
border:1px solid #ccc;border-radius:5px;background:#fff}
/* 10px между подписью и полем — у эталона их даёт
плюс обёртка CF7. */
.nes-form__input{height:34.9531px;padding:6.27587px;margin-top:10px}
/* У эталона отступ 10 сверху только у text, email и textarea
(`.wpcf7 input[type=text], input[type=email], textarea`) — у tel его нет. */
.nes-form__input[type="tel"]{margin-top:0}
.nes-form__textarea{height:117px;min-height:0;padding:6.27587px;margin-top:10px;resize:vertical}
.nes-form__input:focus,.nes-form__textarea:focus{outline:2px solid var(--nes-red);outline-offset:0}
/* Кнопка эталона — `body .button` Flozen (explain.mjs): 15px/15px 700, поле
13/35, фон и рамка 1px #FDCE07, радиус 4 (dynamic.css), текст #000,
capitalize, по центру; при наведении прозрачность 0.8. Высота 43 выходит
сама. */
.nes-form__submit{display:inline-block;background:#FDCE07;color:#000;border:1px solid #FDCE07;border-radius:4px;
font:700 15px/15px var(--nes-font);letter-spacing:normal;text-transform:capitalize;text-align:center;
height:auto;padding:13px 35px;margin-top:10px;cursor:pointer}
/* У формы контактов своя кнопка `.button.small.btn-contact`: `div.wpcf7
.button.btn-contact{font-size:12px;padding:12px 40px}` — высота 38, а не 43
(diff), и переход all 0.5s. Лишние 5px сдвигали весь подвал. */
.nes-form__submit{font-size:12px;line-height:12px;padding:12px 40px;transition:all .5s}
/* `.button:hover{color:white;border-color:#333;background:black}` и
`body .button:hover{opacity:.8}` эталона вместе. */
.nes-form__submit:hover{opacity:.8;background:#000;border-color:#333;color:#fff}
/* Ловушка для ботов: убрана из потока и с глаз, но не `display:none` —
часть ботов такие поля пропускает. */
.nes-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nes-form__ok{color:#0a7d28;font:600 14.5px/23.2px var(--nes-font);margin-bottom:14px}
.nes-form__err{color:var(--nes-red-text);font:600 14.5px/23.2px var(--nes-font);margin-bottom:14px}
/* Колонки у эталона не складываются ни на какой ширине (`.form-wrapper{display:flex}`,
`.form-col{width:50%}` без медиазапросов). */
/* «Um fyrirtæki»: две колонки по 630 с зазором 20, картинка 363×283. */
/* Поле снизу 361.5 — столько пустоты у эталона между текстом и подвалом:
контент кончается на 643.1, подвал начинается с 1004.6. Это отступы пустых
секций билдера (padding 100/100 плюс распорки). Повторяем как есть. */
/* Поле снизу было 361.5px — подпорка под недостающую карту. Теперь карта на
месте, и высоту даёт она сама. */
.nes-about{display:flex;gap:20px;padding-bottom:43.5px}
/* Колонки эталона — `large-6` по половине ряда с зазором 20 (box.mjs: текст 630/580/503.5/427
на 1440/1200/1047/894, картинка с x = половина + 10), в одну колонку ниже 848. */
.nes-about__text{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}
/* Интерлиньяж абзацев — числом, как `p{line-height:1.6}` Foundation эталона:
от числа Blink округляет строку вниз (23.1875), от 23.2px — к ближайшему
(23.203). На абзаце из 15 строк это пиксель, и подвал «О компании» на 375
стоял ниже эталона. */
.nes-about__text p{font:400 14.5px/1.6 var(--nes-font);color:var(--nes-dark);margin:0 0 21.75px}
.nes-about__text p:last-child{margin-bottom:0}
.nes-about__media{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}
.nes-about__img{width:363px;height:auto;max-width:100%}
/* Карта блоком, а не строчным элементом: у строчного снизу остаётся место
под нижние выносные элементы строки, и врезка вылезала из колонки.
Зазор 20 под картинкой — у эталона она кончается на 491.1, а карта
начинается на 511.1. */
.nes-about__map{display:block;margin-top:20px;max-width:100%;border:0}
@media (max-width:847px){
/* Сложенные колонки: у эталона картинка стоит на 21.75 ниже последнего
абзаца — это его отступ снизу, а не зазор колонок 20 (наложение 847:
подвал выше на 1.58). */
.nes-about{flex-direction:column;gap:21.75px}
.nes-about__text,.nes-about__media{flex:1 1 auto;max-width:none}
}
.nes-page-body{padding:60px 10px}
.nes-entry__title{font:700 33.35px/46.69px var(--nes-font);color:var(--nes-black);text-align:center;text-transform:uppercase;margin-bottom:30px}
.nes-entry__content p{margin-bottom:20px;font:400 15px/24px var(--nes-font);color:var(--nes-dark)}
/* ========================================================================= *
Входные анимации
Кейфреймы и длительности скопированы из anim.md эталона (WOW.js fadeIn,
1000ms). Узел до порога обязан быть невидимым — иначе он мигает: прыгает в
стартовый кадр и проявляется заново. Прячем только под классом, который
вешает инлайновый скрипт в head, чтобы без JS страница осталась видимой.
========================================================================= */
@keyframes nes-fadeIn{from{opacity:0}to{opacity:1}}
/* Второй эффект эталона — `fadeInUp` на карточках товара. Кейфреймы взяты
из anim.md эталона дословно: 0% — opacity 0 и translateY(20px), 100% —
opacity 1 и translateY(0). Длительность 1000ms, как у fadeIn. */
@keyframes nes-fadeInUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.nes-anim-ready .nes-anim{opacity:0}
.nes-anim-ready .nes-anim.is-in{animation:nes-fadeIn 1000ms ease both}
/* Логотипы партнёров: `li.wow.bounceIn` эталона — 1000ms без задержки, по ряду
при входе в окно; кейфреймы Animate.css из его CSS. */
@keyframes nes-bounceIn{
0%{opacity:0;transform:scale(.3)}
50%{opacity:1;transform:scale(1.05)}
70%{transform:scale(.9)}
100%{opacity:1;transform:scale(1)}
}
.nes-anim-ready .nes-anim[data-anim="bounceIn"].is-in{animation:nes-bounceIn 1000ms ease both}
.nes-anim-ready .nes-anim[data-anim="fadeInUp"].is-in{
animation:nes-fadeInUp 1000ms ease both;
animation-delay:var(--nes-delay,0ms)}
@media (prefers-reduced-motion:reduce){
.nes-anim-ready .nes-anim{opacity:1}
.nes-anim-ready .nes-anim.is-in{animation:none}
.nes-banner--zoom:hover .nes-banner__image{transform:none}
}
/* Правила наведения только для мыши: на тач-устройствах hover залипает. */
@media (hover:none){
.nes-vmenu__panel{position:static;opacity:1;visibility:visible;width:auto}
.nes-hours__table{display:none}
}
/* ========================================================================= *
Каталог: полоса крошек, сайдбар, сетка товаров
Числа из снимка категории на 1400: полоса 80px, фон #F2F2F2, крошки
14.5/400 с интерлиньяжем 20.3 в контейнере 1280; переключатель вида
14.5/400 с интерлиньяжем 38. Сетка по умолчанию 4 колонки, 16 товаров
на страницу.
========================================================================= */
.nes-shopbar{background:#F2F2F2}
.nes-shopbar__inner{display:flex;align-items:center;justify-content:space-between;min-height:80px}
.nes-shopbar__inner--center{justify-content:center}
/* Крошки прижаты влево и во всю ширину контейнера: у эталона это `H3.breadcrumb`
при x=60 и ширине 1280 с `text-align:left`, а у меня блок сжимался до
376.8 и вставал по центру. */
.nes-crumbs{font:400 14.5px/20.3px var(--nes-font);color:var(--nes-dark);
display:block;width:100%;text-align:left}
.nes-crumbs__sep{margin:0 7px;color:var(--nes-dark)}
/* Наведение на крошку у эталона подчёркивает ссылку и НЕ меняет цвет —
замер hover.mjs: `textDecorationLine: none → underline`. Красный цвет
здесь был лишним. */
.nes-crumbs__link:hover{text-decoration:underline}
.nes-crumbs__cur{color:var(--nes-dark)}
/* Между «List» и сортировкой у эталона 42.75 (конец «List» 1137.25, select
с 1180), а правый край select на 8 ЗА краем ряда: 1368 при ряде до 1360 на
1440 и 2px от края окна на 1200, 989 и 848 (box.mjs). */
.nes-shopbar__tools{display:flex;align-items:center;gap:8px}
.nes-viewswitch{display:flex;align-items:center;gap:20px;font:400 14.5px/38px var(--nes-font);color:var(--nes-dark)}
.nes-viewswitch__label{color:var(--nes-dark);opacity:.7}
/* Ссылки переключателя у эталона того же цвета, что и подпись, — синий
цвет ссылок сюда не доходит, — и приглушены до 0.7. */
.nes-viewswitch__opt{color:var(--nes-dark);opacity:.7}
/* Активный пункт у эталона помечен ПОДЧЁРКИВАНИЕМ, а не рамкой снизу
(`text-decoration: underline` от `.nasa-change-layout.active`), и его
непрозрачность 1 против 0.7 у остальных. */
.nes-viewswitch__opt.is-active{text-decoration:underline;opacity:1}
/* Переключатель вида: у эталона при наведении чернеет и подчёркивается
(`color: rgb(0,0,0)`, `opacity: 1`, подчёркивание чёрным), а не краснеет. */
.nes-viewswitch__opt:hover{color:#000;opacity:1;
text-decoration:underline;text-decoration-color:#000}
/* Переключателя вида «Show 3 4 5 List» у эталона нет ниже 1130: узлы Show,
3, 4, 5 и List снимаются только на 1440, 1320 и 1200. Медиазапрос стоит
НИЖЕ базового правила — при равной цепкости решает порядок. */
@media (max-width:1129px){.nes-viewswitch{display:none}}
/* Сортировка. Числа сняты explain.mjs с эталона, а не подобраны: у него
`select.orderby` 188x39 с полями 10 сверху и снизу, без рамки и фона, и
стоит он в полосе `.sort-bar` ровно той же высоты 39 — то есть заполняет
строку целиком.
Раньше здесь было `line-height:1; padding:6px 0` без высоты, и по вертикали
выходило не по центру: WooCommerce вешает на саму форму `margin: 0 0 1em`,
а в ряду с `align-items:center` центрируется коробка ВМЕСТЕ с полем — сам
select при этом сидит выше середины на половину поля. Поэтому обнуляем
поле формы, а не двигаем select. */
/* Селектор тяжелее `.woocommerce .woocommerce-ordering` (0,2,0) из
woocommerce.css: тот оставлял поле 15 снизу и поднимал select на 8px
выше середины полосы (explain.mjs). */
.nes-shopbar form.woocommerce-ordering{margin:0;padding:0;line-height:39px}
.woocommerce-ordering select{font:400 14.5px/normal var(--nes-font);color:var(--nes-dark);
border:0;background:transparent;padding:10px 5px;width:188px;height:39px;
box-sizing:border-box;vertical-align:middle}
/* Две колонки: дерево 25% слева, товары 75% справа. Ряд шире контейнера на
20px (поле −10 с каждой стороны) — как у эталона: сайдбар начинается с 42.5
при контейнере на 52.5. */
/* Свой контейнер, а не `.nes-row`: у эталона ряд каталога занимает все 1300
без бокового поля, а поле 10 висит на колонках. Через .nes-row не выходило —
`margin-inline:-10px` перебивает `margin-inline:auto` и ряд теряет
центрирование (сайдбар уезжал в x=0). */
.nes-shop{width:100%;max-width:var(--nes-wrap);margin-inline:auto;
display:flex;padding-top:20px}
/* Поля колонки у эталона несимметричны: `div.large-3.left` — 10 слева и 20
справа, отчего содержимое 295 при колонке 325. С 10 по обе стороны
получалось 305, и вся колонка была шире эталонной на 10. */
/* `min-width:0` обязателен: у flex-элемента по умолчанию `min-width:auto`,
и колонка не сжимается ниже самого длинного неразрывного слова. В полосе
848…1129, где поля по 60, это давало ширину 240.5 вместо эталонных 212 —
ссылки не переносились, сетка товаров ехала вправо, и одна эта причина
держала 181 расхождение на ширине 848. */
.nes-shop__side{flex:0 0 25%;min-width:0;padding:0 20px 15px 10px}
/* Поле колонки товаров несимметрично: у эталона сетка начинается с 382.5 при
колонке от 367.5 и кончается на 1337.5 при её правом крае 1342.5 — то есть
15 слева и 5 справа. Выглядит как случайность вёрстки оригинала, но именно
она даёт совпадение позиций всех карточек. */
.nes-shop__main{flex:0 0 75%;padding-left:15px;padding-right:5px;min-width:0}
/* Числа дерева с эталона: заголовок 23.8 в высоту на 3.4 ниже верха колонки,
первый пункт на 268.3 (то есть 20.5 от заголовка), строка пункта 20.3,
шаг 30.1 — значит зазор 9.8. */
/* Поле справа 20 у эталона есть (`h5.widgettitle` padding 0/20/0/0): на 848
при виджете 92 из-за него «Categories» переносится в две строки (47.59). */
.nes-tree{position:relative}
.nes-tree__title{font:700 17px/23.8px var(--nes-font);color:var(--nes-black);margin:3.4px 0 18.5px;padding-right:20px}
.nes-tree__list{font-size:14.5px;line-height:23.2px;font-family:var(--nes-font);font-weight:400}
.nes-tree__item{position:relative;padding:0;margin:0 0 7px}
.nes-tree__link{display:inline-block;line-height:20.3px;color:var(--nes-dark)}
/* Красным только при наведении. Текущая категория у эталона обычного цвета —
замер на «Alpine Style» даёт rgb(51,62,72) и вес 400, а не красный. */
.nes-tree__link:hover{color:var(--nes-red-text)}
/* Раскрывающая кнопка ветки. У эталона это НЕ текстовый плюс, а глиф
`pe-7s-plus` — плюс В КРУГЕ (при раскрытой ветке `pe-7s-less`, минус в
круге). Текстовый «+», стоявший здесь раньше, круга не рисует вовсе, и
владелец опознал подделку с первого взгляда.
Числа с эталона (explain.mjs): `a.accordion` — absolute, top 0, right 0,
поля 3px 0 3px 30px, кегль 16.675; глиф 16.67x16.67, цвет rgb(51,62,72).
Отсюда коробка 46.67x29.33, а видимый круг — её правые 16.67. */
.nes-tree__toggle{position:absolute;right:0;top:0;padding:3px 0 3px 30px;
color:var(--nes-dark);background:none;border:0;cursor:pointer;
font-size:16.675px;line-height:23.345px}
.nes-tree__toggle .icon{font-size:16.675px;line-height:16.675px}
.nes-tree__toggle .pe-7s-less,
.nes-tree__toggle[aria-expanded="true"] .pe-7s-plus{display:none}
.nes-tree__toggle[aria-expanded="true"] .pe-7s-less{display:inline-block}
/* Отступ вложенной ветки — 10, а не 16: у эталона дочерний пункт стоит на 70
при родителе на 60. */
.nes-tree__children{padding-left:10px}
/* Сетка товаров. Числа с эталона на 1400: колонка товаров 955, карточка
238.8 = ровно четверть, БЕЗ зазора по горизонтали — карточки смыкаются, а
воздух даёт их собственное поле 20. Шаг ряда 301 при высоте карточки 285,
то есть зазор рядов 16. */
/* Список отступает от верха на 2, карточка внутри — ещё на 6 (у эталона ul
на 222.6 при колонке 220.6, карточка на 228.6). Шаг ряда 301 = карточка 285
+ поле 6 + зазор 10. */
.nes-grid{display:grid;column-gap:0;row-gap:0;margin-top:2px}
/* Клирфикс-псевдоэлементы чужих стилей в grid-контейнере становятся
ПОЛНОЦЕННЫМИ ячейками и сдвигают всю сетку на одну колонку: в блоке похожих
товаров первая карточка вставала во вторую колонку, а четвёртая уезжала на
второй ряд.
`display:none` тут не помогает — правило WooCommerce специфичнее. Убираем
сам псевдоэлемент через `content:none`, и с `!important`, потому что
перебить чужую специфичность своим одноклассовым селектором нельзя. */
.nes-grid::before,.nes-grid::after{content:none !important;display:none !important}
/* minmax(0,1fr), а не 1fr: у 1fr минимум — min-content ячейки, и название
товара в одну строку (nowrap + многоточие) распирало колонку. На «Hljómtæki»
колонки выходили 272 / 241 / 317 / 149 вместо четырёх по 238.75, как у
эталона (`width:25%`). На «Hátalarar» названия короткие, и сверка не видела. */
.nes-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.nes-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nes-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nes-grid--1{grid-template-columns:minmax(0,1fr)}
/* Границы сетки у эталона — 1130 и 848, а не 1024/768/480. Замер: ширина
картинки товара по ширинам окна 1440/1320 = 199 (4 колонки), 1200 = 182
(4), 1129 = 378 (2), 989 = 326 (2), 848 = 278 (2), 847 и ниже = во всю
колонку (1). Прежние границы были взяты «типовыми», и на 1129 у меня
стояли 4 колонки против двух у эталона — отсюда почти девятьсот строк
расхождений по картинкам. */
@media (max-width:1129px){.nes-grid--5,.nes-grid--4,.nes-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:847px){.nes-grid{grid-template-columns:minmax(0,1fr)}}
/* Собственный CSS WooCommerce стилизует `li.product` (флоты, ширины,
display:flex) — класс на элементе ставит `wc_product_class`, и от него не
уйти переименованием списка. Поэтому раскладку карточки задаём явно:
без этого в блоке похожих товаров картинка и подпись вставали в ряд. */
/* Карточка: поле 20 по бокам и 35 сверху, картинка во всю ширину содержимого
(198.8 при карточке 238.8), название на 9.9 ниже картинки. */
.nes-prod{text-align:center;display:block;width:auto;float:none;margin:6px 0 10px;padding:0 5px}
.nes-prod__wrap{position:relative;padding:15px 15px 6px;background:#FFF;
transition:box-shadow 100ms ease}
.nes-prod__media{position:relative;display:block;width:100%;overflow:hidden}
.nes-prod__info{width:100%}
.nes-prod__img{display:block}
/* Картинка тянется на всю ширину колонки, а не упирается в свои 300px
натурального размера: у эталона на 1129 она 378, на 847 — 827. Правило
`max-width:100%` из умолчаний темы держало её на 300 и центрировало, и
это давало 888 строк расхождений по ширине, высоте и x. */
.nes-prod__img img{margin-inline:auto;width:100%;height:auto;max-width:none}
/* Подмена картинки при наведении — как у эталона: вторая из галереи.
Наводится ВСЯ карточка, а не картинка: у эталона правила висят на
`.product-item:hover`, и полоса быстрого просмотра выезжает в том числе
при наведении на название и цену. */
.nes-prod__img--back{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
/* Полоса быстрого просмотра. Числа с эталона, правила перенесены целиком,
а не подобраны по виду: см. комментарий в content-product.php. */
.nes-prod__bar{position:absolute;left:15px;right:15px;bottom:6px;height:45px;
background:#FFF;text-align:center;
border-top:1px solid #eee;border-bottom:1px solid #eee;
opacity:0;visibility:hidden;transform:translateY(100%);
transition:all 200ms ease;z-index:10}
.nes-prod__quick{display:inline-block;width:30px;height:43px;color:var(--nes-dark);
line-height:43px}
/* Глиф у эталона — кегль 21.75 при интерлиньяже 43 и коробке 20x43 с полями
по 5. У шрифта глиф занимает всю площадку em, поэтому в SVG это квадрат
21.75, отцентрованный в тех же 43: (43-21.75)/2 = 10.625. */
.nes-prod__eye{font-size:21.75px;line-height:43px;width:20px;margin:0 5px;font-weight:bold}
@media (hover:hover) and (pointer:fine){
.nes-prod:hover .nes-prod__img--back{opacity:1}
.nes-prod:hover .nes-prod__bar{transform:translateY(0);opacity:.8;visibility:visible}
.nes-prod:hover .nes-prod__wrap{box-shadow:0 0 6px 0 rgba(0,1,1,.3)}
.nes-prod:hover .nes-prod__info{box-shadow:0 6px 6px 0 rgba(1,1,1,.3)}
}
/* Высоту подписи не фиксируем: у эталона карточка 285 при содержимом 294.9,
то есть цена выходит за её низ. Повторять это через height значит ломать
положение самой цены. Вместо этого шаг ряда добирается нулевым зазором:
294.9 карточки + 6 поля = 300.9 при эталонных 301. */
/* Зазор от картинки до названия у эталона 10, а не 15.9: сверка мерит его
от нижнего края обёртки картинки, и лишние 5.9 давали 184 строки. */
/* Блок подписи — модель `.product-info-wrap` эталона: он заходит на 6px
внутрь обёртки картинки (margin-top:-6px, ровно её нижнее поле), белый и
лежит поверх неё (position:relative). Так нижний край тени картинки закрыт,
а боковые края тени обоих блоков идут одной линией — карточка при
наведении выглядит одним контейнером, а полоса под глазом остаётся только
рамкой полосы. Встык, без захода, тень ломалась ступенькой на стыке.
Поле сверху 10 = прежние 4 + 6 захода: текст стоит там же. */
.nes-prod__info{padding:10px 0;margin-top:-6px;width:100%;position:relative;background:#FFF}
.nes-prod__name{font:400 15.95px/20.735px var(--nes-font);margin-bottom:5px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ссылка названия — БЛОЧНАЯ во всю ширину колонки (у эталона 198.8 при
интерлиньяже 20.7). Строчная сжималась по тексту и вставала на 12.9 ниже. */
/* Цвет и насыщенность названия сняты сверкой: у эталона #0062BD и 600,
стояло #3F8DC4 и 400 — 384 строки расхождений на двенадцати ширинах. */
.nes-prod__name a{display:block;line-height:20.735px;color:#0062BD;font-weight:600}
/* У эталона `.product-item .info .name a:hover{color:#0062bd}` — тот же цвет,
что в покое: видимой смены нет. */
.nes-prod__name a:hover{color:#0062BD}
/* Цена у эталона строчная и центрируется в колонке (66.6 при колонке 198.8),
а не растянута во всю ширину. */
.nes-prod__price{font:400 15.95px/25.52px var(--nes-font);color:var(--nes-dark);display:inline-block}
/* Белая полоса — `div.nasa-clear-box-shadow` эталона: ВНУТРИ блока подписи,
absolute, bottom:-5px, 10px, z-index 10. Она прикрывает только первые 5px
нижней тени (0 6px 6px), остальная тень видна. Отдельным блоком после
подписи она закрывала все 10px, и тень снизу почти пропадала. Высоту 10
теперь даёт поле подписи снизу — шаг ряда прежний (285). */
.nes-prod__clear{position:absolute;left:0;right:0;bottom:-5px;height:10px;background:#FFF;z-index:10}
/* Карточка товара. */
/* Карточка товара. Числа с эталона на 1400 (контейнер 1280):
колонка галереи 630 (49.2%), сводка 650 (50.8%) с зазором 10. */
/* Снизу поля нет: у эталона подвал начинается ровно через 40 после ленты
похожих (её отбивка), box.mjs 4180.71 + 40 = 4220.7. */
.nes-single{padding-top:25px;padding-bottom:0}
/*
* Сетка эталона, а не её пересказ процентами. У него ряд 1300 без поля, а
* КАЖДАЯ колонка — 650 (ровно половина) с внутренним полем 10px. Отсюда
* содержимое: галерея x=60 шириной 630, сводка x=710 шириной 630.
*
* Здесь стояло другое: ряд с полем 10, галерея 48.84%, сводка «остаток» и
* отрицательное поле справа. Внешне похоже, а на деле сводка начиналась с
* x=700 шириной 650 — весь текст описания стоял на 10px левее эталонного,
* и `diff.mjs` показал это как расхождение контейнера на 32 узлах сразу.
*
* align-items:flex-start обязателен, иначе сводка растягивается по высоте
* галереи (2859 вместо 416).
*/
.nes-single{padding-inline:0}
.nes-single .product{width:100%}
/* Ряд «галерея + сводка». Именно он ограничивает липкую колонку: она
останавливается у начала Description, а не едет до конца страницы. */
.nes-single__top{display:flex;flex-wrap:wrap;align-items:flex-start;width:100%}
.nes-single__top .nes-gallery,
.nes-single__top .summary{flex:0 0 50%;min-width:0;padding-inline:10px;margin:0}
/*
* Сводка держится у верха окна при прокрутке — как у эталона.
*
* У него это делает скрипт: на `.nasa-product-info-scroll` вешается класс
* `nasa-single-fixed`, а стили пересчитываются на каждом кадре —
* `position:fixed; top:10px; left:710px; width:630px`. Замер при прокрутке
* на 600, 1500, 3000 и 6000 даёт экранную Y ровно 10 во всех случаях.
*
* Здесь то же самое одним правилом: `position:sticky` с тем же `top:10px`.
* Видимое поведение совпадает, а пересчёта на каждом кадре нет — колонку
* держит сам браузер. Занесено в журнал отклонений как замена механизма.
*/
.nes-single__top .summary{position:sticky;top:10px;align-self:flex-start}
/* WooCommerce даёт сводке 2em снизу (`.woocommerce div.product div.summary`,
0,2,3) — у эталона поля нет. Зато в конце сводки у него пустой
`div.nasa-single-share` с полем 20 сверху: сводка 578.11 на 375. */
body.single-product div.product .nes-single__top div.summary{margin-bottom:0}
.nes-single__top .summary::after{content:"";display:block;height:20px}
/* Вкладки и похожие товары — во всю ширину под колонками, с тем же полем. */
.nes-single .nes-desc,
.nes-single .related,
.nes-single .upsells{flex:0 0 100%;width:100%;padding-inline:10px}
/* Панель показывается всегда: WooCommerce прячет её (`.panel{display:none}`)
и открывает скриптом вкладок, а вкладок у нас больше нет — без этого
блок схлопывался в нулевую высоту. */
.nes-single .nes-desc .panel,
.nes-single .nes-desc .woocommerce-Tabs-panel{display:block}
/* Вкладки и описание — числа box.mjs по эталону (out/prod/box-ref1.txt) и
CSS Flozen (`.nasa-tabs-content.nasa-classic-style…`). */
/* flow-root: у эталона ряд с clearfix, и отбивка последнего списка (20)
не схлопывается с полем строки категорий (40). */
.nes-single .nes-desc{margin:30px 0 0;position:relative;z-index:2;display:flow-root}
.nes-single .nes-desc .nes-panels{margin-bottom:10px}
.nes-tabs-wrap{text-align:center}
.nes-tabs{display:block;width:100%;margin:0 0 20px;padding:10px 0;list-style:none;
font:400 14.5px/23.2px var(--nes-font)}
.nes-tabs li{list-style:none;display:inline-block;position:relative;margin-left:15px}
.nes-tabs li.first{margin-left:0}
.nes-tabs li > a{display:block;padding:0 20px;border:0}
/* ≥848 поля снимаются по классам first/last настоящих вкладок, ≤847 — по
:first-child/:last-child, где последним стоит пустой пункт. Отсюда разный
сдвиг центра заголовка: 18.75 и 13.77. */
@media (min-width:848px){
.nes-tabs li.first > a{padding-left:0}
.nes-tabs li.last > a{padding-right:0}
}
.nes-tabs__title{margin:0;padding:8px 0;font:600 20.3px/20.3px var(--nes-font);color:#000;
text-transform:none;letter-spacing:inherit;position:relative;transition:all 350ms ease}
.nes-single .nes-desc .nes-panel{display:none}
.nes-single .nes-desc .nes-panel.is-active{display:block}
.nes-panel__block{font:400 14.5px/14.5px var(--nes-font);color:var(--nes-dark)}
.nes-panel__block p{margin:0 0 20px;font:400 14.5px/1.6 var(--nes-font)}
.nes-panel__block ul{list-style:disc inside;margin:0 0 20px;padding:0;
font:400 14.5px/23.2px var(--nes-font)}
.nes-panel__block ol{list-style:decimal inside;margin:0 0 20px;padding:0;
font:400 14.5px/23.2px var(--nes-font)}
.nes-panel__block li{list-style:inherit;margin:0}
@media (max-width:847px){
.nes-tabs{margin-bottom:10px;overflow-y:auto;white-space:nowrap;
-webkit-mask-image:linear-gradient(to left,transparent 5px,black 40px);
mask-image:linear-gradient(to left,transparent 5px,black 40px)}
.nes-tabs::-webkit-scrollbar{display:none}
.nes-tabs li{margin-left:0}
/* У эталона пункт вкладки ниже 848 с отбивкой 15 снизу: полоса 72.75. */
.nes-tabs li.nes-tabs__tab{margin-bottom:15px}
.nes-tabs li > a{padding:0 10px}
.nes-tabs li:first-child > a{padding-left:0}
.nes-tabs li:last-child > a{padding-right:0}
.nes-tabs__title{font-size:21.75px;line-height:21.75px}
}
/* Галерея: миниатюры столбцом слева, основные картинки стопкой. Числа —
box.mjs по эталону (out/prod/box-ref1.txt) и CSS Flozen, см. шапку
woocommerce/single-product/product-image.php. Миниатюры у эталона липнут
к верху окна тем же скриптом, что и сводка, — здесь `sticky`. */
.nes-single__top .nes-gallery{margin-bottom:25px}
.nes-gallery{display:flex;align-items:flex-start}
.nes-gallery__thumbs-wrap{flex:0 0 13%;max-width:13%;min-height:1px;position:sticky;top:10px}
.nes-gallery__thumbs{max-height:565px;overflow-y:auto;scrollbar-width:none}
.nes-gallery__thumbs::-webkit-scrollbar{display:none}
.nes-gallery__thumb{margin:0 0 10px;border:1px solid transparent;opacity:.3;cursor:pointer;
transition:all 350ms ease}
.nes-gallery__thumb.is-active{border-color:#AAA;opacity:1}
.nes-gallery__thumb img{display:block;width:100%;height:auto}
.nes-gallery__main-wrap{flex:0 0 87%;max-width:87%}
.nes-gallery__main{padding-left:5px}
/* У `figure` поле 15 снизу из стилей блоков WordPress (`:where(figure)`) —
у эталона обёртка div без поля. */
.nes-gallery__main .woocommerce-product-gallery__wrapper{margin:0}
.nes-gallery__item{margin:0;padding:0 5px 10px}
.nes-gallery__img{display:block;width:100%;height:auto;vertical-align:bottom}
.nes-gallery__hint{display:block;padding:25px 10px 0;text-align:center;clear:both;
font:400 14.5px/14.5px var(--nes-font);color:var(--nes-dark)}
.nes-gallery__end{border-top:1px solid transparent;min-height:1px;width:100%}
.woocommerce-product-gallery__trigger{display:none}
/* Снятая фиксация (nav.js): колонка стоит на своём месте в начале ряда. */
.nes-gallery__thumbs-wrap.is-released,.nes-single__top .summary.is-released{position:relative;top:0}
/* ≤847 (52.96552em): колонки в стопку без зазора, миниатюр и подписи нет,
основные картинки во всю ширину без поля слева; под галереей 20. */
@media (max-width:847px){
.nes-single .nes-gallery,.nes-single .summary{width:100%;flex:0 0 100%;max-width:100%}
.nes-single__top .nes-gallery{margin-bottom:20px}
.nes-gallery__thumbs-wrap,.nes-gallery__hint{display:none}
.nes-gallery__main-wrap{flex:0 0 100%;max-width:100%}
.nes-gallery__main{padding-left:0}
}
/* Сводка. Числа с эталона на 1400: заголовок 33.35/700 с интерлиньяжем 36.685,
цена 20.3/500 с интерлиньяжем 32.48 в блоке 47.5, короткое описание
14.5/300 с полем 10 сверху и снизу, кнопка заявки 188.2×43. */
.nes-single .product_title{font:700 33.35px/36.685px var(--nes-font);color:var(--nes-black);margin:0}
/* Цепкость поднята намеренно: правило WooCommerce `.woocommerce div.product
p.price` перебивало `.nes-single .price`, и цена выходила золотой
(rgb(149,142,9)) кеглем 18.75 вместо эталонных 20.3/500 цвета
rgb(51,62,72). Цвет наследуется внутрь — у Woo он задан и на вложенных
`.woocommerce-Price-amount` и `bdi`, поэтому они перечислены явно. */
/* Якорь — класс на , а не `.nes-single`: последний в разметке товара
не оказался предком сводки, и правило молча не совпадало — признак был
ровно нулевой, цена оставалась золотой при 18.75.
`body.single-product div.product p.price` даёт цепкость выше правила
WooCommerce, а вложенные узлы перечислены потому, что цвет задан и им. */
body.single-product div.product p.price,
body.single-product div.product p.price .woocommerce-Price-amount,
body.single-product div.product p.price bdi,
body.single-product div.product p.price .woocommerce-Price-currencySymbol{
font:500 20.3px/32.48px var(--nes-font);color:var(--nes-dark)}
/* У эталона это inline-block с полем 15 сверху, а не блок с 7.5/7.5. */
body.single-product div.product p.price{display:inline-block;margin:0;padding:15px 0 0}
/* Вес 400, а не 300. У эталона абзац короткого описания именно 400, и это
важнее, чем кажется: `` внутри наследует `bolder`, а это
ОТНОСИТЕЛЬНОЕ значение — от 400 оно даёт 700, а от 300 всего 400. При
моих 300 жирная первая строка описания переставала быть жирной вовсе. */
.nes-single .woocommerce-product-details__short-description{margin:10px 0}
.nes-single .woocommerce-product-details__short-description p{margin:0 0 20px;
font:400 14.5px/23.2px var(--nes-font);color:var(--nes-dark)}
.nes-single .woocommerce-product-details__short-description p:last-child{margin-bottom:0}
/* Кнопка заявки у эталона СИНЯЯ (#0066B4), а не красная, и меньше обычной:
188.2×43, радиус 4, кегль 15/700, поле 13/35. */
.nes-quote-btn{display:inline-flex;align-items:center;justify-content:center;
background:#0066B4;color:var(--nes-white);border-radius:4px;
font:700 15px/15px var(--nes-font);padding:13px 35px;height:43px}
.nes-quote-btn{transition:all .5s}
/* Рамка 1px #FDCE07 в покое и #333 при наведении, заливка при наведении
rgb(4,74,128), регистр capitalize — всё с эталона (diff, hover.mjs). */
.nes-quote-btn{border:1px solid #FDCE07;text-transform:capitalize}
.nes-quote-btn:hover{background:rgb(4,74,128);border-color:#333;opacity:.8}
/* Цепкость поднята: правило `p` из общей типографики перебивало обнуление,
и над кнопкой оставалось 24px, которых у эталона нет — его кнопка стоит
на 578.4 сразу за описанием, моя уезжала на 592.6. */
.nes-single__top .summary .nes-quote-btn-wrap{margin:0}
/* Пустой блок атрибутов не должен занимать место: у этого товара
характеристик нет, и его 14px отступа сдвигали кнопку заявки. */
.nes-attrs:empty{display:none}
.nes-attrs table{width:100%;margin:20px 0}
.nes-attrs th,.nes-attrs td{padding:6px 10px;border-bottom:1px solid var(--nes-border);
font:400 15px/1.4 var(--nes-font);text-align:left}
.nes-quote-btn-wrap{margin-top:24px}
/* Похожие товары.
У эталона это КАРУСЕЛЬ (9 записей, показывает 4) — такое скилл сравнивать
не берётся: клоны пересобираются при каждой загрузке, и пары по путям
случайны. Собран статичный ряд из четырёх с теми же габаритами:
блок 1280×366.3, картинка 216×216, заголовок и подпись под ней.
Занесено в журнал отклонений. */
/* Заголовок блока похожих: у эталона 21/400 ЧЁРНЫМ по центру и БЕЗ верхнего
регистра — на странице написано «Related Products», а не «RELATED
PRODUCTS». Отступы 4.2 сверху и 10.5 снизу. Здесь стояло 600 uppercase
с отступом 22 и выключкой влево. */
/* Только ПРЯМОЙ потомок: иначе правило заголовка блока накрывает и `h2`
названий товаров внутри карточек — они набирались 21px вместо своих 15. */
.nes-single .related > h2,
.nes-single .upsells > h2{font:400 21px/29.4px var(--nes-font);color:#000;
text-align:center;margin:4.2px 0 10.5px}
/* Строка категорий товара: у эталона это полоса во всю ширину контейнера
с волосяными линиями сверху и снизу и текстом по центру —
1px solid #EFEFEF, поле 15/15, отступы 40/50, кегль 14.5. У меня блок
сжимался по содержимому (190.6 вместо 1280) и стоял у левого края без
единой линии. */
.nes-single .product_meta{width:100%;text-align:center;
font:400 14.5px/21.75px var(--nes-font);color:var(--nes-dark);
border-top:1px solid #EFEFEF;border-bottom:1px solid #EFEFEF;
padding:15px 0;margin:40px 0 50px}
.nes-single .product_meta > span{display:inline;margin:0}
.nes-single .product_meta > span a{font-weight:400;opacity:.7;transition:opacity .3s ease}
.nes-single .product_meta > span a:hover{opacity:1}
@media (max-width:847px){
.nes-single .product_meta > span{display:block;margin-bottom:10px}
}
/*
* Похожие товары — лента с прокруткой, а не сетка.
*
* У эталона это карусель: 12 карточек по 246 в ширину с шагом 256 (зазор 10),
* видно пять, первая начинается с x=65 при блоке от 60. Стрелки в разметке
* есть, но нулевого размера — листается перетаскиванием, поэтому здесь
* горизонтальная прокрутка с примагничиванием: то же поведение мышью, пальцем
* и трекпадом, без своего скрипта.
*/
/* Лента похожих товаров — карточка каталога без своих поправок. Числа —
снимок эталона по ширинам: карточка = ряд / N − 10 при отбивке 5 по краям,
N = 5 от 1130 (70.62069em), 3 на 848…1129, 2 ниже 848. Внутри те же поля,
что у витрины (15, ниже 848 — 5), картинка во всю ширину своей пропорции
(264.jpg 216×162, а не квадрат). Карточка с отбивкой 5 сверху и 15 снизу. */
.nes-single .related .nes-grid{display:flex;align-items:flex-start;gap:10px;
grid-template-columns:none;padding:0 5px;margin:0;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:5px;scrollbar-width:none}
/* Без scroll-padding привязка тянула первую карточку к краю ряда — лента
прокручивалась на 5 и карточка стояла на x=10 вместо 15. */
.nes-single .related .nes-grid::-webkit-scrollbar{display:none}
.nes-single .related .nes-grid > li{flex:0 0 calc((100% + 10px) / 5 - 10px);
max-width:calc((100% + 10px) / 5 - 10px);scroll-snap-align:start;
margin:5px 0 15px;padding:0}
@media (max-width:1129px){
.nes-single .related .nes-grid > li{flex-basis:calc((100% + 10px) / 3 - 10px);
max-width:calc((100% + 10px) / 3 - 10px)}
}
@media (max-width:847px){
.nes-single .related .nes-grid > li{flex-basis:calc((100% + 10px) / 2 - 10px);
max-width:calc((100% + 10px) / 2 - 10px)}
}
/* Пагинация. Числа с эталона: блок 111 в высоту, 30 от сетки сверху и 47.2 до
подвала снизу. Сама строка кнопок 36 — остальное поле блока. */
.woocommerce-pagination{margin:30px 0 47.2px;padding:35.5px 0;text-align:center}
/* Постраничная навигация задаётся ниже, по числам эталона. Прежний блок
(inline-flex, коробка 36, шрифт 15) убран: он спорил с ним и выигрывал
по `display`. */
/* ========================================================================= *
Боковая панель фильтра на странице товара
Числа с эталона на 1400: ярлык 48.7×41.8 приклеен к левому краю на y=360,
фон #333 прозрачностью .8, слой 100. Панель 380 во всю высоту окна, слой
401, фон белый, поле 60 по кругу; закрытая стоит на x=−400. Заголовки
17/700 без верхнего регистра, пункты 14.5 высотой 30 с шагом 37.
========================================================================= */
/* Коробка НЕ заливается. Вычисленный фон у эталона хоть и `rgb(51,51,51)`,
на экране его нет: проба пикселей в этой области даёт белый фон и серые
`(91,91,91)` только на самих полосках. Это #333 при прозрачности .8
поверх белого — то есть окрашен значок, а не подложка. У меня было
наоборот: серая коробка с белыми полосками. */
/* Ярлык эталона (`.nasa-sidebar-single-product .toggle-sidebar-shop`, box.mjs):
обёртка fixed на 40% высоты окна, слой 100, прозрачность .8 (при наведении 1),
радиус 0 3 3 0; ссылка — белая коробка 48.66×41.75 с полем 10/15 и тенью
`1px 1px 5px 1px rgba(0,0,0,.1)`; внутри глиф FontAwesome fa-bars (U+F0C9)
кеглем 150% (21.75) цвета #333, интерлиньяж 1. ≤847 глиф опущен на 5. */
.fa-bars:before{content:"\f0c9"}
.nes-side-tab{position:fixed;left:0;top:40%;z-index:100;text-align:center;
background:#333;color:#fff;opacity:.8;border-radius:0 3px 3px 0;transition:opacity 350ms ease}
.nes-side-tab:hover{opacity:1}
.nes-side-tab__link{display:block;padding:10px 15px;color:#333;background:#fff;
font-size:14.5px;line-height:1;box-shadow:1px 1px 5px 1px rgba(0,0,0,.1);transition:all 300ms ease}
.nes-side-tab__link:hover{box-shadow:1px 1px 10px 1px rgba(0,0,0,.1)}
.nes-side-tab__icon{display:block;font-size:21.75px;line-height:1;color:#333}
.nes-side-tab__link:hover .nes-side-tab__icon{color:#000}
@media (max-width:847px){ .nes-side-tab__icon{position:relative;top:5px} }
/* Тень с эталона: `rgba(0,0,0,0.15) 0 1px 5px 0`. Без неё дифф отмечал её
отсутствие на каждом узле внутри панели — 41 строка на одну причину. */
.nes-side{position:fixed;left:-400px;top:0;width:380px;height:100vh;z-index:401;
background:var(--nes-white);padding:60px;max-width:80%;overflow-y:auto;overflow-x:hidden;transition:all 800ms ease;
box-shadow:rgba(0,0,0,.15) 0 1px 5px 0}
.nes-side.is-open{left:0}
/* Виджеты панели — box.mjs по эталону (out/prod/box-side.txt) и CSS Flozen
(`.nasa-side-sidebar .widget`, `.nasa-open-toggle`):
виджет поле снизу 18, рамка снизу 1px, отбивка 25; у последнего ни того, ни другого
заголовок 17/700 чёрный, интерлиньяж 23.8 (≤847: 20.2826), поля 3.4/8.5,
справа 20; у эталона он поднят на 10 над полем 10 обёртки
пункт высота 30, отбивка 7, ссылка сжата по тексту, счётчик #999
с интерлиньяжем 30 и полем 10 слева; текущая категория чёрная */
.nes-side__widget{position:relative;padding:10px 0 18px;margin-bottom:25px;
border-bottom:1px solid rgb(51,62,72)}
/* Геометрия эталона (box.mjs): ≥848 поле 3.4 над заголовком внутри виджета
(виджет 360.67), ниже 848 — один раз над первым виджетом (виджет 353.77,
второй сразу через 25). */
@media (max-width:847px){
.nes-side__widget .nes-side__title{margin-top:0}
.nes-side__widget:first-child{margin-top:3.4px}
}
.nes-side__widget:last-child{border-bottom:0;margin-bottom:0}
.nes-side__title{font:700 17px/23.8px var(--nes-font);color:#000;text-transform:none;
margin:3.4px 0 8.5px;padding-right:20px;position:relative;top:-10px}
@media (max-width:847px){ .nes-side__title{line-height:20.2826px} }
.nes-side__list{list-style:none;margin:0;padding:0}
.nes-side__list li{margin:0 0 7px;height:30px;font:400 14.5px/23.2px var(--nes-font)}
/* Строка 30 у эталона даёт счётчик (интерлиньяж 30), а не поле ссылки:
текст ссылки 20.3, глифы обоих на 6 ниже верха пункта. */
.nes-side__cat{display:inline-block;
font:400 14.5px/20.3px var(--nes-font);color:var(--nes-dark);padding:0}
.nes-side__cat:hover{color:var(--nes-red-text)}
.nes-side__cat.is-current{color:#000}
.nes-side__count{color:#999;line-height:30px;margin-left:10px;position:relative}
/* Облако меток эталона (`.widget .tagcloud a`, box.mjs): контейнер нулевой
высоты с плавающими ссылками — поле 9/20, отбивка 0/7/7/0, фон #F1F1F1,
радиус 4, цвет #666, интерлиньяж 1; кегль из облака WordPress
(27.23 / 10.67 / 29.33). При наведении фон и рамка #333, текст белый. */
.nes-side__tags{display:block;line-height:14.5px}
.nes-side__widget::after{content:"";display:block;clear:both}
.nes-side__tags a{float:left;display:inline-block;padding:9px 20px;margin:0 7px 7px 0;
color:#666;background:#F1F1F1;border-radius:4px;font-family:var(--nes-font);font-weight:400;
line-height:1;transition:all 250ms ease}
.nes-side__tags a:hover{color:#FFF;background:#333;border-color:#333}
/* Значок сворачивания виджета — две черты 11×1 у правого края, как у дерева
категорий каталога (`.nasa-toggle-widget`: absolute, top 7, высота 15). */
.nes-side__toggle{position:absolute;top:7px;right:0;width:100%;height:15px;display:block;z-index:1}
.nes-side__toggle::before,.nes-side__toggle::after{content:"";display:inline-block;position:absolute;
width:11px;height:1px;right:0;top:7px;border-top:1px solid #333;transition:all 200ms ease}
.nes-side__toggle.is-collapsed::after{transform:rotate(90deg)}
@media (max-width:847px){ .nes-side__toggle{top:2px} }
.nes-side__widget.is-collapsed .nes-side__list,.nes-side__widget.is-collapsed .nes-side__tags{display:none}
@media (max-width:480px){ .nes-side{padding:60px 20px} }
/* Ячейка галереи держит своё увеличение внутри себя: без этого наложение
.zoomImg растекалось поверх соседних картинок и перехватывало мышь. */
/* Ячейка держит своё увеличение внутри себя. Ширину не задаём: класс `images`
с обёртки снят, и правило WooCommerce про превью в четверть ширины больше
не срабатывает. */
.nes-gallery__main .woocommerce-product-gallery__image{
width:100%;display:block;position:relative;overflow:hidden}
.nes-gallery__main .woocommerce-product-gallery__image > a{display:block}
.nes-gallery__main .zoomImg{cursor:pointer}
/* ========================================================================= *
Стрелки на соседние товары в полосе крошек
Числа с эталона на 1400: кнопки 23.8×58.5 у правого края контейнера
(x=1282.5 и 1316.3), иконка 21.75, карточка при наведении 340×65.
========================================================================= */
.nes-shopbar--single .nes-shopbar__inner{display:flex;align-items:center;
justify-content:space-between;gap:20px}
.nes-shopbar--single .nes-crumbs{width:auto;flex:1 1 auto}
/* Глиф у эталона стоит В ВЕРХУ коробки кнопки (его верх на 147.1 при коробке
с 148.1), а не по центру её 58.5. Сама коробка при этом свисает ниже серой
полосы — видно только глиф, и он приходится на середину полосы 120.6…200.6.
Прежний сдвиг всей группы на 16.8 равнял коробки, а не глифы, и опускал
стрелки на 17px ниже нужного. */
/* Верх ссылки у эталона на 147.08 при полосе 120.6…200.6 (box.mjs, 1440 и
1200): ссылка inline 23.75×23 с глифом прямо на ней. */
.nes-pnav{display:flex;align-items:flex-start;gap:10px;position:relative;top:-2.01px;
flex:0 0 auto}
/* Стрелка — это КОРОБКА, а не голый шеврон: у эталона `a.icon-next-prev`
размером 23.8×23 с белым фоном, рамкой 1px solid #DDD и шевроном цвета
#AAA при кегле 21.75. Внешние 58.5 в высоту принадлежат у него
обёртке, а не видимой кнопке — я по ошибке сделал коробкой её. */
.nes-pnav__btn{position:relative;display:inline-block;height:23px;padding:0;
background:var(--nes-white);border:1px solid #DDD;color:#AAA;
font-size:21.75px;line-height:21px}
/* Наведение у эталона (hover.mjs): жёлтая заливка и рамка #FDCE07, шеврон белый. */
.nes-pnav__btn{transition:all 350ms ease}
.nes-pnav__btn:hover{color:#FFF;background:#FDCE07;border-color:#FDCE07}
/* Карточка соседа: у эталона она выезжает под полосой и прижата вправо. */
.nes-pnav__card{position:absolute;top:100%;right:0;width:320px;height:65px;
display:flex;align-items:center;gap:12px;background:var(--nes-white);
box-shadow:0 2px 12px rgba(0,0,0,.15);padding:10px;
opacity:0;visibility:hidden;transition:.2s;z-index:200;pointer-events:none}
.nes-pnav__btn:hover .nes-pnav__card,
.nes-pnav__btn:focus-visible .nes-pnav__card{opacity:1;visibility:visible}
.nes-pnav__thumb{flex:0 0 45px}
.nes-pnav__thumb img{width:45px;height:45px;object-fit:contain;display:block}
.nes-pnav__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.nes-pnav__name{font:400 14.5px/20px var(--nes-font);color:var(--nes-dark);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nes-pnav__price{font:400 14.5px/20px var(--nes-font);color:var(--nes-dark)}
/* У эталона `.products-arrow{display:none}` ниже 52.96552em. */
@media (max-width:847px){ .nes-pnav{display:none} }
/* ------------------------------------------- быстрый просмотр из каталога */
/* Числа с эталона (разовый замер out/qv-ref/quickview.json): панель fixed
на всю высоту окна, ширина 600 при max-width 90%, поле 25, фон #FFF,
цвет #333e48, z-index 9998; в покое `right:-610px`, открытая `right:0`,
переход `all 700ms ease`. Затемнение — чёрное с прозрачностью 0.7 и
z-index 400 (у эталона это тот же `.black-window`, что и под мобильным
меню, поэтому число совпадает с `.nes-overlay`). */
.nes-qv-overlay{position:fixed;inset:0;background:#000;opacity:0;z-index:400;
transition:opacity 700ms ease}
.nes-qv-overlay.is-open{opacity:.7}
.nes-qv{position:fixed;top:0;bottom:0;right:-610px;width:600px;max-width:90%;
padding:25px;background:#FFF;color:#333e48;z-index:9998;
overflow:hidden;overflow-y:auto;text-align:left;
transition:all 700ms ease}
.nes-qv.is-open{right:0}
.nes-qv__close{position:absolute;top:10px;right:14px;font-size:28px;line-height:1;
color:#333e48;background:none;border:0;cursor:pointer}
.nes-qv__gallery{padding:30px 0 0}
/* Галерея — модель owl-carousel эталона (`loadLightboxCarousel`: items 1,
loop false, nav true, navSpeed 500): лента слайдов со сдвигом,
перетаскивание мышью и свайп. Стрелки — `.owl-nav div` темы Flozen:
60x60 на 40% высоты у краёв, глифы pe-7s \e686 / \e684 кеглем 400%,
#979797, скрыты и проявляются при наведении на карусель
(`.product-lightbox .owl-carousel:hover .owl-nav div`), при наведении на
саму стрелку #FDCE07. Точки у эталона в быстром просмотре скрыты
(`.product-lightbox .owl-carousel .owl-dots{display:none}`). */
.nes-qv__stage{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}
.nes-qv__stage.is-dragging{cursor:grabbing}
.nes-qv__track{display:flex;transition:transform .5s ease;will-change:transform}
.nes-qv__stage.is-dragging .nes-qv__track{transition:none}
.nes-qv__slide{flex:0 0 100%;min-width:0}
.nes-qv__slide img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;pointer-events:none}
.nes-qv__nav{position:absolute;top:40%;left:0;width:100%;height:1px}
.nes-qv__arrow{position:absolute;display:block;width:60px;height:60px;margin-top:-30px;padding:0;
border:0;background:transparent;color:#979797;line-height:60px;text-align:center;
font-size:14.5px;cursor:pointer;opacity:0;visibility:hidden;transition:all 350ms ease;user-select:none}
.nes-qv__arrow::before{font-family:'Pe-icon-7-stroke';font-size:400%}
.nes-qv__arrow--prev{left:0}
.nes-qv__arrow--prev::before{content:"\e686"}
.nes-qv__arrow--next{right:0}
.nes-qv__arrow--next::before{content:"\e684"}
.nes-qv__gallery:hover .nes-qv__arrow{opacity:1;visibility:visible}
.nes-qv__arrow:hover{color:#FDCE07}
.nes-qv__info{padding:30px 0}
.nes-qv__title{font:400 30px/1.2 var(--nes-font);margin:0 0 14px}
.nes-qv__title a{color:#3F8DC4}
.nes-qv__title a:hover{color:var(--nes-red-text)}
.nes-qv__price{font:400 20px/1.4 var(--nes-font);color:var(--nes-dark);margin:0 0 18px}
.nes-qv__desc{font:400 14.5px/23.2px var(--nes-font);color:var(--nes-dark)}
.nes-qv__desc p{margin:0 0 14px}
.nes-qv__actions{display:flex;align-items:center;gap:16px;padding:10px 0 20px}
.nes-qv__more{font:400 14.5px/1 var(--nes-font);color:var(--nes-dark);
text-decoration:underline}
.nes-qv__more:hover{color:var(--nes-red-text)}
.nes-qv__meta{font:400 14.5px/23.2px var(--nes-font);color:var(--nes-dark);
border-top:1px solid #eee;padding-top:16px}
/* --------------------------------------------------------------- страницы */
/* Постраничная навигация. У эталона `.nasa-pagination.style-2`: коробка 40x40
с интерлиньяжем 40 и радиусом 5, кегль 14.5, ссылки #444444 на белом,
текущая — белым по #333333; пункты inline-block с полем 4 справа, список
отцентрован. Своих правил здесь не было вовсе, и страница рисовалась
умолчаниями браузера: коробка 20x36, сиреневый цвет посещённой ссылки. */
.woocommerce-pagination ul.page-numbers{text-align:center;font-size:14.5px;
margin:0;padding:0;list-style:none}
.woocommerce-pagination ul.page-numbers li{display:inline-block;margin:0 4px 0 0;
padding:0}
.woocommerce-pagination .page-numbers li a.page-numbers,
.woocommerce-pagination .page-numbers li span.page-numbers{display:block;
width:40px;height:40px;line-height:40px;text-align:center;border-radius:5px;
font-size:14.5px;color:#444;background:transparent}
.woocommerce-pagination .page-numbers li span.page-numbers.current{
background:#333;color:#FFF}
.woocommerce-pagination .page-numbers li a.page-numbers:hover{background:#333;color:#FFF}
/* Стрелка «дальше» у эталона — глиф каретки, а не знак «→». Рисуем
треугольником: у оригинала это FontAwesome `fa-caret-right`, отдельный
шрифт ради одной стрелки не подключаем. */
.woocommerce-pagination .page-numbers li a.next,.woocommerce-pagination .page-numbers li a.prev{font-size:14.5px}
/* Волосяная линия под страницами. Числа сняты explain.mjs с эталона:
ширина 50% (472.5 при колонке 945), высота 0, только верхняя рамка 1px
#eee, поле 45 сверху и 7.25 снизу. */
/* Коробка линии у эталона 26 в высоту: рамка 1 и поле 25 снизу (box.mjs). */
.nes-pag__hr{width:50%;margin:45px auto 7.25px;border:0;border-top:1px solid #eee;
height:0;padding:0 0 25px;box-sizing:content-box}
/* ------------------------------- выезжающий фильтр каталога ниже 848 ----- */
/* Числа с эталона (explain.mjs на 847): `div.large-3.left` — fixed, left
-510, top 0, ширина 500, поля 25 сверху и 30 по бокам, фон #FFF, слой
9998, переход 0.7s, прокрутка по вертикали. Содержимое начинается с
-480, что сходится с замером ссылок дерева. */
.nes-filter-tab{display:none}
.nes-filter-overlay{position:fixed;inset:0;background:#000;opacity:0;z-index:400;
transition:opacity .7s ease}
.nes-filter-overlay.is-open{opacity:.7}
@media (max-width:847px){
.nes-filter-tab{display:block;position:fixed;left:0;top:360px;z-index:100;
opacity:.3;transition:opacity .2s ease}
.nes-filter-tab:hover{opacity:1}
.nes-filter-tab__btn{display:flex;align-items:center;justify-content:center;
width:41.58px;height:41.58px;background:none;border:0;cursor:pointer;
color:var(--nes-dark)}
.nes-filter-tab__icon{font-size:20px}
.nes-shop{display:block}
.nes-shop__side{position:fixed;left:-510px;top:0;width:500px;max-width:90%;
height:100%;padding:25px 30px 30px;background:#FFF;z-index:9998;
overflow-y:auto;transition:all .7s ease}
.nes-shop__side.is-open{left:0}
.nes-shop__main{padding-left:0;padding-right:0}
}
/* --------------------------- каталог по ширинам: числа с эталона --------- */
/* Полоса крошек: у эталона поле ряда остаётся 10 и ниже 1200, тогда как
общее `--nes-gutter` темы там становится 20. Правим точечно для каталога,
а не глобально: замер сделан на этом шаблоне. */
@media (max-width:1200px){
.nes-catalog .nes-shopbar__inner{padding-inline:10px}
}
/* В полосе 848…1129 колонка категорий у эталона сжимается и отъезжает
вправо: сама колонка 282/247/212, а виджет внутри 162/127/92 — то есть
поля по 60 с каждой стороны. Стояло 10 и 20, и все ссылки дерева
расходились по x на пятьдесят пикселей. */
@media (min-width:848px) and (max-width:1129px){
.nes-shop__side{padding:60px 60px 15px}
}
/* Ниже 848 карточка у эталона теряет поля: `li` 847 при поле 5 и обёртка
картинки с полем 5 вместо 15 — картинка идёт от 10 и во всю ширину. */
@media (max-width:847px){
.nes-shop__main{padding-left:0;padding-right:0}
.nes-prod__wrap{padding:5px 5px 6px}
.nes-prod__bar{left:5px;right:5px}
}
/* Белой полосы под карточкой у эталона ниже 848 нет вовсе. */
@media (max-width:847px){ .nes-prod__clear{display:none} }
/* Правый край блока переключателей у эталона на 10 левее правого края ряда. */
/* ------------------- ряд шапки и подвала: два уровня поля ---------------- */
/* У эталона шапка и подвал собраны из ДВУХ полей, а не одного: ряд шириной
1320 с полем 10 и колонка внутри ещё с полем 10. Отсюда содержимое стоит
на 80 при окне 1440 (60 центровки + 10 + 10) и на 20 при 1200 и ниже.
У ряда полосы крошек колонки нет вовсе: там 1300 с полем 10, то есть 80
и 10 соответственно — и это уже совпадало.
Замер: `Valmynd` и `Veftré` у эталона 80/20/20 на 1440/1200/848, у меня
было 80/10/10; телефон справа 1276/1096/744 против 1276/1106/754.
Одним полем эти три числа не сходятся — нужны именно два. */
/* Уточнено замером главной на 1300 (probe дал точку, которой не было на
каталоге и товаре): у эталона ряд 1300 с колонкой 10, а поле самого ряда
(10) появляется только с 1200 и ниже. Ряд 1320 с двумя полями совпадал
лишь от 1320: на 1201…1319 содержимое стояло на 20 вместо 10
(«Valmynd» x 52 против 42 на 1300). */
.nes-header__desk > .nes-row{max-width:1300px}
@media (min-width:1201px){
.nes-header__desk > .nes-row{padding-inline:0}
}
/* Подвал — та же модель, что у шапки: ряд 1300 без поля выше 1200, колонки
без отступа −10 и поля +10 (они гасили друг друга по ширине, но на
1201…1319 давали x 20 вместо 10 или вылезали за окно). Поле колонок 10
остаётся на самих колонках. */
.nes-footer__section > .nes-row{max-width:1300px}
@media (min-width:1201px){ .nes-footer__section > .nes-row{padding-inline:0} }
/* Мобильная шапка у эталона второго поля не имеет: значок меню на x=10. */
.nes-header__inner{padding-inline:10px}
/* Ниже 848 карточка эталона собирается иначе: `.info` получает поля 10
сверху и снизу (против 4 сверху на широких), а сама карточка — ещё 10
поля снизу поверх десяти у пункта списка. Отсюда зазор от цены до
следующей картинки 43.2 против моих 24.5. Числа сняты explain.mjs
на 375. */
@media (max-width:847px){
/* Поле сверху остаётся 4: зазор от картинки до названия у эталона 10 и на
узких ширинах тоже. Прибавка живёт снизу. */
.nes-prod__info{padding:10px 0 10px}
.nes-prod{margin-bottom:20px}
}
/* Блок страниц занимает всю ширину колонки и центрует содержимое: без этого
его контейнер выходил 165 при эталонных 355. */
.woocommerce-pagination{text-align:center}
/* ------------------------------------------------------ кнопка «наверх» -- */
/* Правило `#nasa-back-to-top` эталона: в покое кнопка в потоке, но
`visibility:hidden`, прозрачность .7, двойная тень, переходы 350ms. */
.nes-totop{position:fixed;right:25px;bottom:200px;width:45px;height:45px;
border-radius:50%;background:#FFF;color:#333e48;z-index:100;
line-height:45px;text-align:center;font-size:29px;display:block;
visibility:hidden;opacity:.7;
box-shadow:0 2px 0 0 rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04);
transition:all 350ms ease}
.nes-totop:hover{background:#f5f5f5;opacity:1}
.nes-totop__icon{font-size:29px;line-height:45px}
/* Ниже 848 сортировка у эталона сворачивается в кнопку 30x44 у правого края
полосы (x=343 при окне 375, справа 2), белую со скруглением 5; селект
внутри неё absolute. Интерлиньяж крошек там же 17.3 вместо 20.3. */
@media (max-width:847px){
.nes-catalog .nes-shopbar{position:relative}
.nes-catalog .nes-shopbar__tools{position:absolute;right:2px;top:50%;
transform:translateY(calc(-50% + 3px));margin:0;gap:0}
.nes-shopbar form.woocommerce-ordering{width:30px;height:44px;line-height:44px}
.nes-shopbar form.woocommerce-ordering select{width:30px;height:44px;padding:0;
background:#FFF;border-radius:5px;color:transparent}
.nes-crumbs{line-height:17.3px}
}
/* ---------------- каталог: полосы ширин по probe.mjs и box.mjs эталона ---- */
/* Колонка товаров. Отступ сетки от левого края колонки у эталона 15 на
≥1201, 10 на 849…1200 и 0 на 848; справа 5, 0 и 0. Отсюда li 238.75 на
1440, 222.5 на 1200, 313.4 на 849 и 318 на 848. На 848 у колонки ещё поле
40 снизу, а у сайдбара — 60 снизу вместо 15 (граница 848→849). */
@media (max-width:1200px){ .nes-shop__main{padding-left:10px;padding-right:0} }
@media (min-width:848px) and (max-width:848px){
.nes-shop__main{padding-left:0}
.nes-shop__side{padding-bottom:60px}
}
/* Поле 40 под колонкой товаров у эталона на всех ширинах ≤848
(`div.nasa-products-page-wrap` margin 0/0/40/0 и на 848, и на 375). */
@media (max-width:848px){ .nes-shop__main{margin-bottom:40px} }
/* Свернуть виджет категорий — у эталона `a.nasa-toggle-widget`: absolute,
top 7, right 0, во всю ширину виджета, высота 15; минус из двух линий
11x1 (`border-top:1px solid #333`) справа на 7 сверху, у свёрнутого
вторая линия повёрнута на 90° и получается плюс. */
.nes-tree__collapse{position:absolute;top:7px;right:0;width:100%;height:15px;display:block}
.nes-tree__collapse::before,.nes-tree__collapse::after{content:"";display:inline-block;
position:absolute;width:11px;height:1px;right:0;top:7px;border-top:1px solid #333;
transition:all 200ms ease}
.nes-tree.is-collapsed .nes-tree__collapse::after{transform:rotate(90deg)}
.nes-tree.is-collapsed > .nes-tree__list{display:none}
/* Крошки у эталона — во всю строку (1280 на 1440, 828 на 848), а сортировка
лежит поверх, не отнимая у них ширину. */
.nes-catalog .nes-shopbar__inner{position:relative}
.nes-catalog .nes-crumbs{flex:1 1 100%}
.nes-catalog .nes-shopbar__tools{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
@media (min-width:1201px){ .nes-catalog .nes-shopbar__tools{right:calc((100% - 1280px) / 2 - 8px)} }
/* Постраничная навигация: блок у эталона на 20 правее колонки на ≥849 и на
10 на 848 и уже, отступ 30 сверху, без внутренних полей; пункты 40x40 с
полем 4 справа, без разделительной рамки (её ставит woocommerce.css). */
.woocommerce nav.woocommerce-pagination{margin:30px 5px 0;padding:0}
@media (max-width:1200px){ .woocommerce nav.woocommerce-pagination{margin:30px 10px 0} }
.woocommerce nav.woocommerce-pagination ul{border:0;margin:0;padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 4px 0 0;float:none;display:inline-block}
/* Шапка ≤894: правая колонка у эталона 32% ряда (со старта 68%), а не 30% —
граница 894→895, ширина 273.3 → 256.5 (probe.mjs). */
@media (max-width:894px){ .nes-header__right{width:32%} }
/* Раскрытая ветка: у эталона дочерний список начинается на 30.19 ниже верха
пункта-родителя (li 387 → ul.children 417.19), то есть на 7 ниже строки
самого пункта; строка без ветки — 23.2. */
.nes-tree__children{padding-top:7px}
/* Каретка «дальше»: woocommerce.css даёт каждому span внутри пункта поля
.5em и display:block — глиф раздувался до 25.5x29 при эталонных 5.19x14.5. */
.woocommerce nav.woocommerce-pagination ul li a span.fa{display:inline-block;padding:0;min-width:0;line-height:1}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers{padding:0;min-width:0}
/* Ниже 848 колонка товаров без полей — правило «≤1200» выше иначе
возвращало 10 слева и сдвигало всю сетку на 10. */
@media (max-width:847px){ .nes-shop__main{padding-left:0;padding-right:0} }
/* ----------------------------------------------- панель поиска «Leit» ---- */
.nes-dsearch{position:fixed;top:0;left:0;right:0;height:580px;z-index:398;background:#FFF;
visibility:hidden;transform:translateY(-30px);transition:.3s}
.nes-dsearch.is-open{visibility:visible;transform:none}
.nes-dsearch__wrap{position:relative;height:580px;padding:95px 10px 0;overflow:auto;
background:#FFF;box-shadow:rgba(0,0,0,.1) 0 4px 4px 1px}
.nes-dsearch__form{position:relative;margin:0 110px}
.nes-dsearch__input{display:block;width:100%;height:44px;padding:14px 0;margin:0;border:0;
border-bottom:1px solid #ccc;background:transparent;border-radius:0;outline:0;
font:700 29px/normal var(--nes-font);color:rgba(0,0,0,.75)}
.nes-dsearch__input::placeholder{color:#757575;font-weight:700;opacity:1}
.nes-dsearch__close{position:absolute;top:60px;right:80px;color:#333e48;line-height:1}
.nes-dsearch__close .pe-7s-close{font-size:44.95px;line-height:44.95px}
body.nes-dsearch-open .nes-header__desk{position:relative;z-index:399}
/* Длинные названия в виджете переносятся посреди слова, как у эталона
(`.widget{overflow-wrap:break-word}`): на 848 «Categories» идёт в две
строки, а «Dension - iPod/iPhone/Aux» в три. */
.nes-tree{overflow-wrap:break-word}
/* Мобильная шапка: значок меню у эталона 37.98 на 421…847 и 23.25 на ≤420. */
@media (min-width:421px) and (max-width:847px){
.nes-burger__icon{font-size:37.9752px}
/* Лупа рядом — 24.8 на 421…847 (box.mjs: 24.81 на 745, 23.25 на 375). */
.nes-search-toggle__icon{font-size:24.8001px}
}
/* Ярлык фильтра ≤847: у эталона `li.li-toggle-sidebar` 41.58 с рамкой 1px
#333 и заливкой #333, внутри ссылка с полями 10 и белая воронка 19.575. */
@media (max-width:847px){
.nes-filter-tab{top:360px;opacity:1;background:#333;border:1px solid #333}
.nes-filter-tab__btn{width:39.58px;height:39.58px;padding:10px;color:#FFF}
.nes-filter-tab__icon{font-size:19.575px;line-height:19.575px;display:block}
}
/* ---------------- сортировка каталога: оформление эталона по CSS Flozen ---- */
/* ≥1130: перед select разделитель — `border-left:1px solid #888`, высота 15,
поля по 15, на 2 ниже строки; на 848…1129 его нет. Стрелка — глиф
pe-7s-angle-down (U+E688) кеглем 150% в 2 сверху и 5 справа; сам select
без рамки, поля 10/5, `appearance:button` — родной стрелки нет. */
.nes-shopbar form.woocommerce-ordering{position:relative;white-space:nowrap;font-size:14.5px}
.nes-shopbar form.woocommerce-ordering::after{content:"\e688";font-family:'Pe-icon-7-stroke';
font-size:150%;display:inline-block;position:absolute;top:2px;right:5px;line-height:1.6;
pointer-events:none;color:var(--nes-dark)}
/* Родную стрелку селекта гасим (appearance:none). У эталона `appearance:
button` в настоящем Chrome рисует её рядом с глифом pe-7s — две стрелки
подряд (проверено chrome-devtools на обоих стендах). Владелец счёл это
дефектом: оставляем одну, тонкую, как задумано темой. */
.nes-shopbar form.woocommerce-ordering select{-webkit-appearance:none;appearance:none;
border-radius:5px;position:relative;z-index:1;cursor:pointer}
@media (min-width:1130px){
.nes-shopbar form.woocommerce-ordering::before{content:"";border-left:1px solid #888;height:15px;
display:inline-block;margin:0 15px;position:relative;top:2px}
}
/* ≤847: вместо стрелки значок U+E659 кеглем 25 цвета #2d2a2a в строке 38,
select растянут поверх и текст убран за край. */
@media (max-width:847px){
.nes-shopbar form.woocommerce-ordering{text-align:right}
.nes-shopbar form.woocommerce-ordering::after{content:"\e659";position:static;margin:0 2px;
color:#2d2a2a;font-size:25px;height:38px;line-height:38px}
.nes-shopbar form.woocommerce-ordering select{position:absolute;inset:0;padding:0;width:100%;
height:100%;text-indent:-9999px;color:var(--nes-dark)}
}
/* Затемнение под мобильным меню у эталона лежит в разметке всегда, скрытое
(`div.black-window-mobile`), а не вынимается из потока. */
.nes-overlay[hidden]{display:block !important;visibility:hidden;opacity:0;pointer-events:none}
/* Разделитель теперь рисует сама сортировка (::before, 31 с полями), поэтому
от «List» до неё остаётся только поле пункта 8. Подписи переключателя у
эталона выровнены по центру своих коробок. */
.nes-viewswitch__label,.nes-viewswitch__opt{text-align:center}
/* Текущая категория в дереве у эталона чёрная (`.widget li a.nasa-active`). */
.nes-tree__item.is-current > .nes-tree__link{color:#000}
/* `.widget li.current-cat a{color:black}` эталона красит и раскрывающую
кнопку текущей ветки: минус в круге у «Hátalarar» чёрный, у остальных
#333E48 (box.mjs, ::before). */
.nes-tree__item.is-current > .nes-tree__toggle{color:#000}
/* Переносы внутри слова влияют и на ширину строчно-блочной ссылки, как у
эталона: на 848 «Miðhátalarar» идёт в две строки при колонке 72. */
.nes-tree__item{word-break:break-word}
/* До подвала ≤847 у эталона 87.25 от конца линии страниц: её поле 7.25 не
схлопывается (колонка товаров плавает), затем поле колонки 40 и поле ряда
40. У меня поле линии схлопывалось с полем колонки и ряд поля не имел. */
@media (max-width:847px){
.nes-shop__main{display:flow-root}
}
/* Под рядом каталога у эталона поле 40 на всех ширинах (`div.row.fullwidth`
padding-bottom 40): подвал на 47.25 ниже конца блока страниц на ≥848 и на
87.25 на ≤847. Без него на ≥848 подвал стоял на 32.8 выше. */
.nes-shop{padding-bottom:40px}
/* Список страниц — блок высотой 40 (у эталона `ul.page-numbers` 945x40), а не
строчный блок: строка давала ему 47.19, и всё ниже уезжало на 7. */
.woocommerce nav.woocommerce-pagination ul.page-numbers{display:block;height:40px;line-height:40px}
.woocommerce nav.woocommerce-pagination ul.page-numbers li{vertical-align:top}
/* Наведение на «Valmynd» и на часы (hover.mjs эталона): выпадашка не только
проявляется, но и поднимается на 8 (`translate(0,8px)` → `none`); таблица
часов при этом раскрывается из 270x50 в 280x300. У меня была только смена
прозрачности. */
/* Числа explain.mjs эталона: выпадашка меню — top 47.5, margin-top −1,
переход 0.2s, слой 100; таблица часов — top 17 (высота строки часов),
left −15 и margin-left −20, margin-top −1, поля 25, ширина 270, без тени и
скругления, переход 0.2s, слой 1. */
.nes-vmenu__panel{transform:translateY(8px);margin-top:-1px;transition:.2s}
.nes-vmenu:hover .nes-vmenu__panel,.nes-vmenu:focus-within .nes-vmenu__panel{transform:none}
.nes-hours__table{top:100%;left:-15px;margin:-1px 0 0 -20px;padding:25px;width:270px;min-width:0;
height:50px;overflow:hidden;box-shadow:none;border-radius:0;z-index:1;
transform:translateY(8px);transition:.2s}
.nes-hours:hover .nes-hours__table{width:280px;height:300px;transform:none}
/* Верх ряда каталога ≤847 у эталона 15, а не 20: `div.nasa-products-page-wrap`
на 154.22 при начале ряда на 139.22 (box.mjs, 375) — картинки стояли на 5 ниже. */
@media (max-width:847px){ .nes-shop{padding-top:15px} }
/* Пункты выпадающего меню у эталона разделены линией 1px #DDD снизу (кроме
последнего): шаг пункта 37.34, а не 36.36 — за тринадцать пунктов скрытое
меню уезжало на 13px, и соседи в сверке мерились от неверной точки. */
.nes-vmenu__list a{border-bottom:1px solid #DDD}
.nes-vmenu__list li:last-child a{border-bottom:0}
/* Время в таблице часов у эталона — блок во всю ячейку (115.73) со строкой
19.24, а сама таблица стоит под строкой часов (`top` 17 на 1440, где строка
в одну линию, и 34 на 848, где «Lokað •» переносится). */
.nes-hours__table .op-period-time{display:block;line-height:19.2415px}
/* Выпадашка меню стоит не на фиксированных 47.5, а на 1px ниже низа подписи:
расстояние от низа `div.vertical-menu` до первого пункта у эталона 21.0 на
1440, 1129 и 848, при высоте подписи 46.5 / 51.13 / 41.75. */
.nes-vmenu__panel{top:calc(100% + 1px)}
/* Строка подписи карточки у эталона наследует 14.5/23.2 от body, а цена на
≤847 — строчный блок высотой 22 (`body .product-item .info .price`). Строка
цены тогда 24.19, а не 25.52, и карточка на 1.33 ниже эталона не уезжает —
за 16 карточек это давало 21px к подвалу (explain.mjs на 375 и 1440). */
.nes-prod__info{font-size:14.5px;line-height:23.2px}
@media (max-width:847px){ .nes-prod__price{height:22px} }
/* Заголовок виджета на ≤847 — строка 20.28, а не 23.8 (distill: heading5
lh 24 → 20 на границе 847/848); из-за этого всё дерево в выезжающей
панели стояло на 3.5 ниже. */
@media (max-width:847px){ .nes-tree__title{line-height:20.2826px} }
/* ------------------------------------------- «Recently Viewed» (inc/viewed.php) */
/* Кнопка и панель эталона `#nasa-init-viewed` / `#nasa-viewed-sidebar`.
Числа — out/cat/viewed/*.json и CSS Flozen, см. шапку inc/viewed.php. */
.pe-7s-clock:before{content:"\e66b"}
.nes-viewed-btn{display:block;text-align:center;position:fixed;z-index:100;bottom:140px;right:25px;
width:45px;height:45px;line-height:45px;font-size:21.75px;background:#FFF;color:#333e48;opacity:.7;
border-radius:50%;box-shadow:0 2px 0 0 rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04)}
.nes-viewed-btn:hover{cursor:pointer;opacity:1;background:#f5f5f5;color:#333e48}
.nes-viewed-btn .pe-icon{display:block;font-size:21.75px;line-height:45px}
.nes-viewed-btn__text{display:none}
.nes-viewed-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.7;
z-index:400;cursor:pointer}
.nes-viewed{position:fixed;top:0;bottom:0;right:-510px;width:500px;max-width:80%;padding:75px 80px;
overflow:hidden;overflow-y:auto;text-align:left;z-index:9998;background:#FFF;color:#333e48;
font:400 14.5px/14.5px var(--nes-font);transition:all 700ms ease}
.nes-viewed.is-open{right:0}
.nes-viewed a{color:#333}
.nes-viewed__close{display:none}
.nes-viewed__title{margin:0;padding:0 10px;font:700 33.35px/46.69px var(--nes-font);color:#000}
.nes-viewed__title.is-center{text-align:center}
/* У эталона `.row` с clearfix-псевдоэлементом: поле 30 у пустого сообщения
не схлопывается с 40 списка. */
.nes-viewed__list{margin-top:40px;display:flow-root}
.nes-viewed__empty{margin:30px 10px 0;text-align:center;text-transform:uppercase;
font:700 15.95px/25.52px var(--nes-font);color:#777}
.nes-viewed__empty-icon{display:block;margin-bottom:20px;font-size:143.55px;line-height:143.55px;color:#ccc}
.nes-viewed a.nes-viewed__return{display:block;margin:40px 0 0;padding:13px 35px;border:1px solid #fdce07;
background:#fdce07;color:#FFF;font:700 12px/12px var(--nes-font);letter-spacing:2px;text-align:center;
text-transform:capitalize;cursor:pointer;border-radius:3px}
.nes-viewed a.nes-viewed__return:hover{opacity:.8}
.nes-viewed__item{display:flex;margin:0 0 10px;background:#FFF;border-radius:5px;position:relative;
z-index:1;animation:nes-fadeInUp 1s both}
.nes-viewed__image{flex:0 0 25%;max-width:25%;padding:0 10px;position:relative}
.nes-viewed__image > a:first-child{display:block;position:relative;text-align:center}
.nes-viewed__image img{display:block;width:100%;height:auto}
.nes-viewed__shade{position:absolute;inset:0;opacity:0;background:transparent}
.nes-viewed__item:hover .nes-viewed__shade{opacity:.7;background:#aaa}
.nes-viewed__quick{position:absolute;top:50%;left:50%;width:29px;height:29px;margin:-14px 0 0 -14.5px;
border-radius:50%;background:#FFF;line-height:35px;text-align:center;opacity:0;visibility:hidden}
.nes-viewed__quick i{display:inline-block;width:18px;height:18px;margin-top:4px;vertical-align:top}
.nes-viewed__item:hover .nes-viewed__quick{opacity:1;visibility:visible}
.nes-viewed__quick:hover{background:#fdce07}
.nes-viewed__meta{flex:1 1 auto;min-width:0;overflow:hidden;padding:5px 5px 10px}
.nes-viewed a.nes-viewed__name{display:block;padding:0 0 3px;font:700 15.225px/18.27px var(--nes-font);
color:#333;transition:all 350ms ease}
.nes-viewed a.nes-viewed__name:hover{color:#0062bd}
.nes-viewed__price{display:inline-block;font:400 15.95px/25.52px var(--nes-font);color:#333}
@media (max-width:847px){
.nes-viewed{scrollbar-width:none}
.nes-viewed::-webkit-scrollbar{display:none}
.nes-viewed__title{font-size:26.1px;line-height:31.1399px}
.nes-viewed__image{flex-basis:33.3333%;max-width:33.3333%}
}
@media (max-width:600px){
.nes-viewed{padding:30px 20px}
}
/* ------------------------------------------ стрелки похожих товаров (related.php) */
/* Блок не схлопывает поле заголовка (4.2) с полем строки категорий (50) —
у эталона ряд с clearfix; снизу 40. */
.nes-single .related{display:flow-root;position:relative;margin-bottom:40px}
.nes-rel-nav{position:absolute;left:0;right:0;top:0;height:41.25px;text-align:right;z-index:2}
.nes-rel-nav__prev,.nes-rel-nav__next{display:inline-block;width:20px;overflow:hidden;
font-size:36.25px;line-height:41.25px}
.nes-rel-nav__prev{float:left}
.nes-rel-nav__next{float:right}
.nes-rel-nav__btn{display:block;color:var(--nes-dark)}
.nes-rel-nav__btn span{position:relative;opacity:.6;transition:all 350ms ease}
.nes-rel-nav__prev span{left:-4px}
.nes-rel-nav__next span{right:12px}
.nes-rel-nav__btn:hover{color:#000}
.nes-rel-nav__btn:hover span{opacity:1;color:#000}