@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("/site-fonts/Montserrat-400.cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("/site-fonts/Montserrat-400.latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("/site-fonts/Montserrat-700.cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("/site-fonts/Montserrat-700.latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
*,*::before,*::after{box-sizing:border-box}
/* Атрибут hidden мусить вигравати: свій display у правилі (як у .popup)
   інакше перебиває його, і невидимий блок ловить кліки по всій сторінці. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 14px/1.4 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#010602;text-decoration:none}
a:hover{color:rgba(0,0,0,.55)}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ---------- Шапка ---------- */
/* Липка, як на чинному сайті: у каталозі на 54 сторінки повертатись угору
   заради пошуку й кошика — це довга дорога. */
header{background:#204029;position:sticky;top:0;z-index:80}
.hdr-top{background:#204029;color:#f7f7f7;font-size:13px}
.hdr-top a{color:#f7f7f7}
.hdr-top a:hover{color:#f87c15}
.hdr-top .wrap{display:flex;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.hdr-top nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.lang{display:flex;gap:8px}
.lang b{color:#f87c15}
/* Вхід в акаунт: на десктопі текстом у верхній смужці, на телефоні тієї
   смужки немає — там та сама дія іконкою в правому куті шапки (нижче). */
.hdr-login{display:inline-flex;align-items:center;gap:6px}
.hdr-login svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.hdr-account{display:none}
.hdr-mid{background:#204029}
.hdr-mid .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.hdr-burger{display:none;cursor:pointer;flex-shrink:0;align-items:center;
  border:0;background:none;padding:0}
.logo{font:700 26px/1 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;letter-spacing:.5px;color:#f7f7f7;white-space:nowrap}
.logo--img{display:block;flex-shrink:0}
.logo--img img{display:block;width:auto;height:44px;max-width:220px;object-fit:contain}
.logo span{color:#f87c15}
.btn-catalog{display:inline-flex;align-items:center;gap:8px;background:#f87c15;color:#fff;
  border:0;border-radius:10px;padding:11px 20px;font:700 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer}
.btn-catalog:hover{opacity:.85}
.btn-catalog-icon{flex-shrink:0}
.btn-catalog-chevron{flex-shrink:0}
.search{position:relative;flex:1;display:flex;align-items:center;background:#fff;border-radius:12px;height:44px;
  padding:0 8px 0 16px;min-width:200px}
.search input{flex:1;border:0;outline:0;background:transparent;font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:#010602;min-width:0}
.search input::placeholder{color:#acacac}
.search-btn{border:0;background:transparent;padding:8px;display:flex;align-items:center;cursor:pointer}
.search-btn:hover{opacity:.75}
.search-icon{color:#204029}
/* Телефон із випадайкою «передзвонити вам?» — як у шапці чинного сайту */
.phone{position:relative;flex-shrink:0}
.phone__btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  white-space:nowrap;color:#f7f7f7;font:700 17px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.phone__btn:hover{color:#f87c15}
.phone-chevron{flex-shrink:0;color:currentColor}
.phone__drop{position:absolute;top:calc(100% + 12px);right:0;z-index:60;min-width:220px;background:#fff;
  border-radius:12px;padding:8px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35)}
.phone__num{display:block;padding:9px 14px;font:700 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;border-radius:8px}
.phone__num:hover{background:#f5f7f5}
.phone__callback{display:block;width:100%;text-align:left;padding:9px 14px;border:0;background:none;
  border-radius:8px;font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#204029;cursor:pointer}
.phone__callback:hover{background:#f5f7f5}
.hdr-icon{display:flex;align-items:center;cursor:pointer;position:relative;flex-shrink:0}
/* Лупа — тільки для мобільної: на десктопі поруч і так стоїть поле пошуку,
   і друга точка входу в ту саму дію лише збиває з пантелику. */
.hdr-icon-search{display:none}
/* Усі три іконки одного кольору: різнобій у шапці читається як помилка. */
.hdr-icon svg{stroke:#f7f7f7;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.hdr-icon:hover svg{stroke:#f87c15}
.hdr-count{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#f87c15;color:#fff;font:700 11px/18px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;text-align:center}
.hdr-count.is-empty{display:none}

/* Будинок і квартира — поруч: обидва короткі, і в один рядок вони читаються
   як одна адреса, а не як два окремі питання. */
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:460px}
.fieldrow .field{max-width:none}
/* Карта для кур'єрської адреси. Leaflet вантажиться лише тут. */
.comap{margin:4px 0 12px;max-width:460px}
/* z-index:0 робить коробку карти власним контекстом накладання: Leaflet
   роздає своїм шарам z-index 400–800, і без цього плитки й кнопки
   масштабу малювались поверх липкої шапки (z-index:80). */
.comap__box{position:relative;z-index:0;height:260px;border:1px solid rgba(0,0,0,.12);
  border-radius:10px;overflow:hidden}
.comap .field__hint{margin-top:8px}

/* Підказка довідника Нової Пошти під полем форми замовлення. */
.field__hint{display:block;margin-top:6px;font-size:12px;color:#acacac;font-style:normal}
.npdrop{position:absolute;z-index:20;top:100%;left:0;right:0;margin-top:4px;background:#fff;
  border:1px solid rgba(0,0,0,.12);border-radius:10px;max-height:260px;overflow-y:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.14)}
.npdrop__row{display:block;width:100%;padding:10px 14px;border:0;background:none;
  font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;text-align:left;cursor:pointer}
.npdrop__row:hover{background:#f5f7f5}

/* ---------- Пошук: смужка поверх сторінки й підказка ---------- */
.searchbar{position:fixed;inset:0;z-index:130}
.searchbar__backdrop{position:absolute;inset:0;background:rgba(255,255,255,.88)}
.searchbar__form{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.18)}
body.search-open{overflow:hidden}
.searchbar__icon{flex:0 0 auto;fill:none;stroke:#acacac;stroke-width:1.6;stroke-linecap:round}
.searchbar__form input{flex:1 1 auto;min-width:0;border:0;background:none;
  font:400 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;padding:8px 0}
.searchbar__form input:focus{outline:none}
.searchbar__close{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:0;background:none;cursor:pointer}
.searchbar__close svg{fill:none;stroke:#010602;stroke-width:1.6;stroke-linecap:round}
/* Підказка однакова і в смужці на телефоні, і під полем у шапці. */
/* Поле й панель підказки мають зростатись в одне: поки підказка відкрита,
   нижні кути поля рівні, інакше між ними прозирає зелена шапка. */
.search.is-suggesting{border-radius:12px 12px 0 0}
.suggest{position:absolute;z-index:5;top:100%;left:0;right:0;background:#fff;
  border:1px solid rgba(0,0,0,.12);border-top:0;border-radius:0 0 12px 12px;
  max-height:70vh;overflow-y:auto;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.suggest__group{border-bottom:1px solid #e6e6e6}
.suggest__group:last-child{border-bottom:0}
.suggest__title{padding:10px 16px 4px;font:700 11px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;letter-spacing:.6px;
  text-transform:uppercase;color:#acacac}
.suggest__row{display:flex;align-items:center;gap:12px;padding:10px 16px;color:#010602}
.suggest__row:hover{background:#f5f7f5}
.captcha:empty{display:none}.captcha{margin:6px 0 10px;min-height:0}
.suggest__img{flex:0 0 auto;width:44px;height:44px;object-fit:contain;background:#fff}
.suggest__img--none{background:#f3f3f3;border-radius:4px}
.suggest__name{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.3}
.suggest__price{flex:0 0 auto;font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;white-space:nowrap}
.suggest__count{flex:0 0 auto;font-size:12px;color:#acacac;white-space:nowrap}
.suggest__more{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602}
.suggest__more:hover{background:#f5f7f5}
.suggest__more svg{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.suggest__empty{padding:16px;font-size:14px;color:#acacac}
/* Знайдені розділи над товарами на сторінці пошуку */
.foundcats{margin:16px 0}
.foundcats__title{font:700 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin-bottom:10px}
.foundcats__list{display:flex;flex-wrap:wrap;gap:8px}
.foundcats__list--page{margin:16px 0}
.foundcats__item{display:inline-flex;align-items:center;padding:8px 14px;
  border:1px solid rgba(0,0,0,.2);border-radius:18px;font-size:14px;color:#010602}
.foundcats__item:hover{border-color:#010602;background:#f5f7f5}
.foundcats__back{display:inline-block;margin-top:8px;font-size:14px;color:#204029;
  border-bottom:1px dashed #e6e6e6}

/* ---------- Нижня панель на телефоні ---------- */
/* На десктопі її немає: там усе під рукою в шапці. */
.tabbar{display:none}
.tabbar__item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px calc(7px + env(safe-area-inset-bottom, 0px));color:#f7f7f7;min-width:0}
.tabbar__icon{position:relative;display:block;line-height:0}
.tabbar__icon svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.tabbar__label{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.tabbar__count{position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:#f87c15;color:#fff;font:700 10px/17px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center}
.tabbar__count.is-empty{display:none}

/* ---------- Бічне меню на телефоні ---------- */
/* На десктопі його немає взагалі: там усе видно в самій шапці. */
.sidemenu{display:none}
.sidemenu__backdrop{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.4)}
.sidemenu__panel{position:fixed;top:0;left:0;bottom:0;z-index:120;width:min(86vw,340px);
  display:flex;flex-direction:column;background:#fff;overflow-y:auto;
  -webkit-overflow-scrolling:touch;box-shadow:0 0 30px rgba(0,0,0,.25)}
.sidemenu__top{display:flex;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid #e6e6e6;position:sticky;top:0;background:#fff;z-index:2}
.sidemenu__back{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:0;background:none;color:#010602;cursor:pointer}
.sidemenu__back svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sidemenu__brand{flex:1 1 auto;text-align:center;padding-right:32px;
  font:700 18px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;letter-spacing:.5px}
.sidemenu__brand span{color:#f87c15}
/* Меню гортається між екранами: головний і каталог. Той самий #catmenu, що
   на десктопі висить під шапкою, shop.js переносить сюди — дерево категорій
   малюється один раз на сторінку, а не двічі. */
.sidemenu__screen{display:none}
.sidemenu__screen.is-active{display:block}
.sidemenu__heading{flex:1 1 auto;text-align:center;padding-right:32px;
  font:700 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602}
[data-catalog-slot] .catmenu{position:static;display:block;border:0;box-shadow:none;
  max-height:none;background:none}
[data-catalog-slot] .catmenu__inner{display:block;padding:0;max-width:none}
[data-catalog-slot] .catmenu__roots{display:block;border:0;max-height:none;padding:0}
[data-catalog-slot] .catmenu__root{display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;padding:14px 16px;border-bottom:1px solid #e6e6e6;
  font:400 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;text-align:left;background:none}
/* У шухляді жоден розділ не «поточний»: підсвічений перший збивав би з
   пантелику ще до того, як у нього зайшли. */
[data-catalog-slot] .catmenu__root.is-active{background:none;font-weight:400;color:#010602}
[data-catalog-slot] .catmenu__rootimg{display:block;flex:0 0 auto;width:28px;height:28px;
  object-fit:contain}
[data-catalog-slot] .catmenu__rootname{flex:1 1 auto;min-width:0}
[data-catalog-slot] .catmenu__arrow{flex:0 0 auto;color:#acacac}
[data-catalog-slot] .catmenu__panels{display:none;padding:0;max-height:none}
/* Зайшли в розділ — список розділів ховається, лишаються підрозділи. */
[data-catalog-slot] .catmenu.is-deep .catmenu__roots{display:none}
[data-catalog-slot] .catmenu.is-deep .catmenu__panels{display:block}
[data-catalog-slot] .catmenu__panel{display:none}
[data-catalog-slot] .catmenu.is-deep .catmenu__panel.is-active{display:block;
  grid-template-columns:1fr}
[data-catalog-slot] .catmenu__item{display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid #e6e6e6}
[data-catalog-slot] .catmenu__all{display:block;padding:14px 16px;font-weight:700}
.sidemenu__catalog{display:flex;align-items:center;gap:12px;width:100%;padding:16px;
  border:0;border-bottom:1px solid #e6e6e6;background:none;cursor:pointer;
  font:400 18px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;text-align:left}
.sidemenu__catalog span{flex:1 1 auto}
.sidemenu__grid{flex:0 0 auto;fill:currentColor}
.sidemenu__next{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;color:#acacac}
.sidemenu__pages{display:flex;flex-direction:column;padding:14px 16px;
  border-bottom:1px solid #e6e6e6}
.sidemenu__pages a{padding:9px 0;font-size:15px;color:#010602;line-height:1.35}
.sidemenu__row{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid #e6e6e6;font-size:15px;color:#010602}
.sidemenu__row svg{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sidemenu__block{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  border-bottom:1px solid #e6e6e6;font-size:15px}
.sidemenu__block svg{flex:0 0 auto;fill:none;stroke:#010602;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.sidemenu__block > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.sidemenu__phone{border-bottom:1px solid #e6e6e6}
.sidemenu__row--phone{border-bottom:0;padding-bottom:6px}
.sidemenu__callback{display:inline-block;margin:0 16px 16px 48px;padding:9px 16px;
  border:1px solid #010602;border-radius:20px;background:#fff;
  font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;cursor:pointer}
.sidemenu__callback:hover{background:#f5f5f5}
.sidemenu__hours span{white-space:nowrap}
.sidemenu__langtitle{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#acacac}
.sidemenu__langs{display:flex;gap:12px;font-size:15px}
.sidemenu__langs b{color:#010602}
.sidemenu__langs a{color:#acacac}
body.side-open{overflow:hidden}

/* ---------- Меню каталогу ---------- */
.catmenu__rootimg{display:none}
.catmenu{position:absolute;top:100%;left:0;right:0;z-index:70;background:#fff;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.35);border-radius:0 0 12px 12px}
.catmenu__inner{display:grid;grid-template-columns:280px 1fr;gap:0;padding:0}
.catmenu__roots{border-right:1px solid #e6e6e6;padding:12px 0;max-height:70vh;overflow-y:auto}
.catmenu__root{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 20px;border:0;background:none;text-align:left;cursor:pointer;
  font:400 14px/1.3 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602}
.catmenu__root:hover,.catmenu__root.is-active{background:#f5f7f5;font-weight:700}
.catmenu__arrow{flex-shrink:0;color:#acacac}
.catmenu__panels{padding:20px 24px;max-height:70vh;overflow-y:auto}
.catmenu__panel{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px}
.catmenu__panel.is-active{display:grid}
.catmenu__item{display:flex;align-items:center;gap:12px;min-width:0}
.catmenu__item:hover .catmenu__name{color:#f87c15}
.catmenu__img{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.catmenu__img--none{border-radius:50%;background:#f5f7f5}
.catmenu__name{font:700 14px/1.3 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602}
.catmenu__all{grid-column:1/-1;margin-top:6px;font-size:13px;color:#204029;
  border-bottom:1px dashed #e6e6e6;justify-self:start}

/* ---------- Попап ---------- */
.popup{position:fixed;inset:0;z-index:100;background:rgba(1,6,2,.45);display:flex;
  align-items:center;justify-content:center;padding:16px}
.popup__box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:12px;padding:28px 24px 24px}
.popup__box h2{margin:0 0 8px;font:700 20px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.popup__text{margin:0 0 18px;font-size:14px;color:#444;line-height:1.5}
.popup__close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;
  color:#acacac;cursor:pointer}
.popup__close:hover{color:#010602}
.popup__error{color:#e93f11;font-size:13px;margin-bottom:10px;min-height:1px}
.popup__done{font-size:15px;color:#17b260;line-height:1.5}
.popup .btn{width:100%}
/* Вікно кошика: те саме, що показує Хорошоп після «Купити», без блоку
   рекомендованих товарів. Ним же відкривається кошик із шапки — перехід на
   окрему сторінку заради «що я щойно поклав» зайвий. */
.popup__box--cart{max-width:480px;padding:22px 20px 20px}
.minicart{display:flex;flex-direction:column;gap:12px;margin:16px 0 0;
  max-height:46vh;overflow-y:auto}
.minicart__row{display:grid;grid-template-columns:56px minmax(0,1fr) max-content;
  gap:12px;align-items:center}
/* Щойно доданий рядок підсвічений — у кошику вже може лежати кілька товарів,
   і без позначки незрозуміло, який саме щойно поклали. */
.minicart__row.is-new{background:rgba(248,124,21,.1);border-radius:6px;
  box-shadow:0 0 0 8px rgba(248,124,21,.1)}
.minicart__img{width:56px;height:56px;object-fit:contain;background:#fff}
.minicart__img--none{background:#f3f3f3;border-radius:4px}
.minicart__name{font-size:14px;line-height:1.35;color:#2f6fbf}
.minicart__name:hover{text-decoration:underline}
.minicart__qty{font-size:14px;white-space:nowrap}
.minicart__empty{color:#acacac;font-size:14px}
.minicart__totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 12px;
  margin-top:16px;padding:14px 0;border-top:1px solid #e6e6e6;
  border-bottom:2px solid #17b260;font-size:13px;color:#acacac}
.minicart__totals b{display:block;color:#010602;font-size:17px}
.minicart__sum{text-align:right}
.minicart__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.minicart__actions .btn{width:100%;text-align:center}
.minicart__link{display:inline-block;margin-top:12px;font-size:13px;color:#acacac;
  border-bottom:1px dashed #e6e6e6}
.popup__box--cart.is-empty .minicart__totals,
.popup__box--cart.is-empty .minicart__link{display:none}
.popup__box--cart.is-empty .minicart__actions{grid-template-columns:1fr}
.popup__box--cart.is-empty .minicart__actions .btn--buy{display:none}

/* ---------- Спільні кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#f87c15;
  color:#010602;border:0;border-radius:4px;padding:12px 22px;font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer}
.btn:hover{filter:brightness(.94);color:#010602}
.btn--ghost{background:transparent;border:1px solid #e6e6e6;color:#010602}
.btn--ghost:hover{border-color:#010602;filter:none}
.btn--small{padding:9px 16px;font-size:13px;width:100%}
.btn--buy{padding:14px 28px;font-size:15px}
.btn[disabled]{background:#e6e6e6;color:#acacac;cursor:not-allowed}

/* ---------- Лічильник кількості ---------- */
.counter{display:inline-flex;align-items:center;border:1px solid #e6e6e6;border-radius:4px;overflow:hidden}
.counter__btn{width:38px;height:44px;border:0;background:#fff;font:400 20px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;cursor:pointer}
.counter__btn:hover{background:#f5f7f5}
.counter__field{width:48px;height:44px;border:0;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;
  text-align:center;font:700 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;-moz-appearance:textfield}
.counter__field::-webkit-outer-spin-button,.counter__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- Банери ---------- */
.banners{display:grid;gap:12px;margin:20px 0}
.banners--slider{grid-template-columns:1fr}
.banners--grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.banner{position:relative;display:block;border-radius:6px;overflow:hidden;background:#204029}
.banner img{width:100%;object-fit:cover;aspect-ratio:1280/380}
.banners--grid .banner img{aspect-ratio:16/9}
.banner-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:10px;padding:clamp(16px,4vw,48px);color:#fff;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.banner-txt h2{margin:0;font-size:clamp(20px,3vw,34px);line-height:1.1}
.banner-txt p{margin:0;font-size:clamp(13px,1.5vw,17px);max-width:46ch}
.banner-txt .cta{align-self:flex-start;background:#f87c15;color:#010602;font-weight:700;
  padding:11px 22px;border-radius:4px}

/* ---------- Сітки ---------- */
h1{font:400 32px/1.1 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:24px 0 16px}
h2.sec{font:700 20px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:32px 0 16px}

/* Вхід і реєстрація — одна вузька колонка: та сама розмітка працює і в
   модалці з шапки, і на окремій сторінці /login/. */
.auth{max-width:420px;margin:16px 0 48px}
.auth__form .btn{width:100%;margin-top:6px}
.auth__error{color:#e93f11;font-size:14px;margin:4px 0 0;min-height:20px}
.auth__switch{margin:14px 0 0;font-size:14px;color:#acacac;text-align:center}
.auth__switch button{border:0;background:none;padding:0;font:inherit;color:#010602;
  text-decoration:underline;cursor:pointer}
.auth__switch button:hover{color:#f87c15}
/* Кнопку малює сам Google у своєму iframe — ми лише даємо їй місце. */
.auth__google{display:flex;justify-content:center;min-height:44px;margin-bottom:16px}
.auth__or{position:relative;margin:0 0 16px;text-align:center}
.auth__or:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e6e6e6}
.auth__or span{position:relative;padding:0 12px;background:#fff;font-size:13px;color:#acacac}
.popup__box--auth{max-width:400px}
.popup__box--auth h2{margin-bottom:18px}

/* Кабінет: ліворуч хто увійшов, праворуч історія замовлень. */
.account{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;
  align-items:start;margin:16px 0 40px}
.account__side{border:1px solid #e6e6e6;border-radius:8px;padding:18px}
.account__who{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#acacac}
.account__who b{font-size:16px;color:#010602}
.account__logout{margin-top:16px}
.account__logout .btn{width:100%}
.account__main h2.sec{margin-top:0}
.ord{border:1px solid #e6e6e6;border-radius:8px;padding:16px 18px;margin-bottom:14px}
.ord__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
.ord__top b{font-size:16px}
.ord__date{color:#acacac}
.ord__status{padding:2px 10px;border-radius:11px;background:rgba(0,0,0,.06);font-size:13px}
.ord__status--done{background:rgba(23,178,96,.14);color:#0f7a42}
.ord__status--cancelled{background:rgba(0,0,0,.06);color:#acacac}
.ord__sum{margin-left:auto;font:700 17px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.ord__items{margin-top:12px;border-top:1px solid #e6e6e6;padding-top:10px;font-size:14px}
.ord__item{display:flex;gap:14px;padding:3px 0}
.ord__name{min-width:0;flex:1}
.ord__qty{color:#acacac;white-space:nowrap}
.ord__delivery{margin-top:8px;font-size:13px;color:#acacac}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:16px 0}
.cat{border:1px solid #e6e6e6;border-radius:6px;padding:16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:#204029;box-shadow:0 7px 15px -5px rgba(59,55,43,.25)}
.cat-img{width:110px;height:110px;object-fit:contain}
.cat-img--none{background:#2040290d;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 30px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#204029}
.cat b{font-weight:500;font-size:14px}
.cat small{color:#acacac;font-size:11px}
.cats-more{display:none}

/* ---------- Картка в сітці ----------
   Значення зняті з чинного stroyhubua: .catalogCard десктопної теми
   Хорошопа (радіус 12, рамка rgba(0,0,0,.2), фото квадратом, назва в два
   рядки фіксованої висоти, ціна 17/700 з кнопкою праворуч, наявність унизу)
   і .catalog-card окремої мобільної теми — на телефоні Хорошоп віддає інший
   шаблон, тож нижче в медіазапиті картка перебудовується під нього. */
.goods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
/* Велика плитка: один товар у рядок із великим фото — так дивляться, коли
   важливо роздивитись сам інструмент, а не перебрати десяток назв. */
/* На десктопі велика плитка — дві колонки: на всю ширину картка виходить
   завеликою. На телефоні лишається одна (правило в медіазапиті нижче). */
.goods.goods--big{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.goods--big .card-view{padding:0 0 12px}
.goods--big .card-image{padding-bottom:75%}
.goods--big .card-title{height:auto;-webkit-line-clamp:2;font-size:16px}
.goods--big .card-purchase{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  height:auto;margin-top:10px}
.goods--big .card-prices{display:contents}
.goods--big .card-old{order:1}
.goods--big .card-buy{order:2;margin-left:auto}

/* Рядками: фото ліворуч, усе інше — стовпчиком праворуч. Позначки
   лишаються в правому верхньому куті рядка, бо .card і тут position:relative. */
.goods.goods--list{grid-template-columns:1fr;gap:0;
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
.goods--list .card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;
  align-items:start;border:0;border-bottom:1px solid rgba(0,0,0,.12);border-radius:0;
  padding:16px 0}
.goods--list .card:last-child{border-bottom:0}
.goods--list .card:hover{box-shadow:none}
.goods--list .card-view{margin:0;padding:0}
.goods--list .card-info{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:6px 14px;padding:0}
.goods--list .card-code{flex:1 0 100%;order:1;margin:0;padding-right:88px}
.goods--list .card-title{flex:1 0 100%;order:2;height:auto;-webkit-line-clamp:3;
  font-size:15px;padding-right:88px}
.goods--list .card-purchase,.goods--list .card-prices{display:contents}
.goods--list .card-price{order:3}
.goods--list .card-old{order:4}
.goods--list .card-info:after{content:"";order:5;flex-basis:100%;height:0}
.goods--list .card-avail{order:6;margin:0 auto 0 0}
.goods--list .card-buy{order:7;margin:0}
.goods--list .card-marks{display:flex;gap:8px;top:14px;right:0}
.card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(0,0,0,.2);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#010602;box-shadow:0 7px 15px -5px rgba(59,55,43,.25)}
.card-view{display:block;position:relative;padding:15px 15px 0;margin-bottom:15px}
.card-image{display:block;position:relative;padding-bottom:100%;overflow:hidden}
.card-img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.card-img--none{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:#e6e6e6;font:700 13px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;border:1px dashed #e6e6e6;border-radius:4px}
.card--out .card-image{filter:grayscale(100%);opacity:.65}
/* Плашка знижки сидить на нижньому лівому куті фото й має загнутий хвостик —
   так вона виглядає на чинному сайті. */
.sticker{position:absolute;left:15px;bottom:0;z-index:1;height:24px;line-height:24px;padding:0 9px;
  border-radius:2px 2px 2px 0;background:#e93f11;color:#fff;font:400 14px/24px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.sticker:before{content:"";position:absolute;top:100%;left:0;width:0;height:0;border-style:solid;
  border-width:0 8px 8px 0;border-color:transparent #e93f11 transparent transparent}
.card-info{display:flex;flex-direction:column;padding:0 15px 15px}
.card-code{font-size:11px;color:#acacac;margin-bottom:4px}
.card-title{font-size:15px;line-height:1.2;margin:0 0 6px;height:2.4em;color:#010602;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Ціна й кнопка в один рядок, але з переносом: на дорогих товарах
   («92 900 грн») кнопка вже не влазить поруч і притискається до краю картки —
   тоді вона йде під ціну. Ціни складені в окрему коробку фіксованої висоти
   30px, щоб рядок «В наявності» стояв на одному рівні в усіх картках ряду —
   і там, де стара ціна є, і там, де її немає. */
.card-purchase{display:flex;flex-wrap:wrap;align-items:center;gap:8px 15px;
  min-height:30px;margin-top:9px;white-space:nowrap}
.card-prices{display:flex;flex-direction:column;justify-content:center;height:30px}
.card-old{font-size:13px;line-height:.8;color:#acacac;text-decoration:line-through}
.card-price{font:700 17px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#000}
.card--out .card-price{color:#acacac}
/* Кнопка «Купити» в каталозі: поки товару немає в кошику — помаранчева;
   щойно він там — чорний візок у білому полі з чорною рамкою й помаранчевим
   лічильником кількості в степені над кутом. */
/* min-width: інакше на межі кнопка не переноситься, а тулиться до краю
   картки впритул — той самий вигляд, від якого тікаємо.
   margin-left:auto — кнопка тримається правого краю картки: і коли стоїть
   поруч із ціною, і коли пішла під неї окремим рядком. */
.card-buy{align-self:center;min-width:112px;margin-left:auto;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 13px;border:1.6px solid #f87c15;border-radius:17px;
  background:#f87c15;color:#010602;font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer}
.card-buy:hover{background:#ff9029;border-color:#ff9029}
.card-buy.is-added{background:#fff;border-color:#010602;color:#010602}
.card-buy.is-added:hover{background:#f5f5f5;border-color:#010602}
.card-buy-icon{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.card-buy-count{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#f87c15;color:#fff;font:700 11px/18px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center;pointer-events:none}
/* Товар у кошику — велика кнопка на картці товару міняє вигляд і підпис, а не
   повертається за півтори секунди до «Купити». */
.btn--buy.is-added{background:#17b260;color:#fff;border-color:#17b260}
.btn--buy.is-added:hover{background:#13a055}
.card-avail{margin-top:4px;font-size:13px;color:#83b224}
.card-avail--no{color:#a2a2a2}

/* Наведення мишею: назва в картці розгортається з двох рядків до трьох, а під
   карткою розкривається панель із першими п'ятьма характеристиками — так само,
   як .catalogCard-extra у десктопній темі Хорошопа. Панель абсолютна, тож
   сусідні картки не зсуваються; рамка картки згори, панелі — знизу, разом
   вони читаються як одна рамка. На сенсорних екранах наведення немає, тому
   нічого цього там не показуємо. */
.card-extra{display:none}
@media (hover:hover) and (min-width:900px){
  /* align-self:start знімає розтягування картки на всю висоту рядка сітки, а
     min-height:100% лишає її не нижчою за сусідів: тоді третій рядок назви
     збільшує саму картку разом із рамкою, а не вилазить за її межі. */
  .goods:not(.goods--list) .card:hover{z-index:50;border-radius:12px 12px 0 0;
    align-self:start;min-height:100%}
  /* height:auto з мінімумом у два рядки: картка підростає рівно на третій
     рядок і тільки там, де назва справді довга. Коротка назва лишає сітку
     нерухомою. */
  .goods:not(.goods--list) .card:hover .card-title{-webkit-line-clamp:3;
    height:auto;min-height:2.4em}
  .goods:not(.goods--list) .card:hover .card-extra{display:block}
  .card-extra{position:absolute;top:100%;left:-1px;right:-1px;z-index:1;
    padding:12px 15px 16px;background:#fff;border:1px solid #010602;border-top:0;
    border-radius:0 0 12px 12px;box-shadow:0 7px 15px -5px rgba(59,55,43,.25)}
  /* Дві рівні колонки: назва характеристики довга, і якщо віддати їй усе
     місце «за змістом», значення лишається смужка в один символ. */
  .card-specs{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;
    margin:0;font-size:12px;line-height:1.3}
  .card-specs dt{min-width:0;color:#acacac;overflow-wrap:anywhere}
  /* Значення притискаємо до низу рядка: довга назва характеристики займає
     два-три рядки, і значення, що висить угорі, читається як підпис до
     першого рядка назви, а не до всієї. */
  .card-specs dd{margin:0;min-width:0;align-self:end;color:#010602;overflow-wrap:anywhere}
}

/* Позначки «в бажання» і «до порівняння» поверх фото — так вони стоять у
   мобільній темі Хорошопа, і на десктопі не заважають. */
.card-marks{position:absolute;top:10px;right:10px;z-index:2;display:grid;gap:6px}
.mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#acacac;cursor:pointer}
/* Серце й коло з однаковою товщиною лінії й однаковою оптичною висотою —
   ті самі контури, що в шапці. */
.mark svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mark:hover{color:#010602}
.mark.is-on{color:#f87c15}
.card{position:relative}
.product__marks{display:flex;gap:20px;flex-wrap:wrap}
.product__mark{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;
  font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#acacac;cursor:pointer}
.product__mark svg{stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.product__mark:hover{color:#010602}
.product__mark.is-on{color:#f87c15}

/* ---------- Списки бажань і порівняння ---------- */
.marks__row{display:grid;grid-template-columns:72px 1fr auto auto 32px;gap:14px;align-items:center;
  border-bottom:1px solid #e6e6e6;padding:14px 0}
.marks__img{width:72px;height:72px;display:block}
.marks__img img{width:100%;height:100%;object-fit:contain}
.marks__img--none{border:1px dashed #e6e6e6;border-radius:4px}
.marks__name{font-size:15px;line-height:1.3}
.marks__price{display:flex;flex-direction:column;line-height:1.2;text-align:right;min-width:110px}
.marks__out{color:#acacac;font-size:13px}
.marks__del{border:0;background:none;font-size:24px;line-height:1;color:#acacac;cursor:pointer;padding:0}
.marks__del:hover{color:#e93f11}
.cmp-scroll{overflow-x:auto;margin:16px 0 32px}
.cmp{border-collapse:collapse;min-width:100%}
.cmp th,.cmp td{border-bottom:1px solid #e6e6e6;padding:10px 14px;text-align:left;vertical-align:top;font-weight:400}
.cmp__corner{width:220px}
.cmp__head{position:relative;width:200px;min-width:200px;vertical-align:top;padding-top:16px}
.cmp__head .marks__del{position:absolute;top:0;right:8px}
.cmp__img{display:block;width:100%;max-width:150px;aspect-ratio:1;object-fit:contain;
  margin:0 auto 8px}
.cmp__img--none{background:#f3f3f3;border-radius:4px}
.cmp__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.3;height:3.9em;margin-bottom:6px}
.cmp__price{font:700 17px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin-bottom:10px;min-height:23px}
.cmp__row{color:#acacac;font-size:13px}
.cmp__none{color:#e6e6e6}

/* ---------- Каталог: сортування, фільтри, сторінки ---------- */
.catalog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.catalog-top h1{margin-bottom:8px}
.catalog-tools{display:flex;align-items:center;gap:16px}
/* Власна випадайка сортування: рідний список варіантів оформити не можна,
   а системна сіра плашка поверх каталогу виглядає чужою. */
.sorting{position:relative;font-size:14px}
.sorting__current{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:6px 4px;list-style:none;white-space:nowrap}
.sorting__current::-webkit-details-marker{display:none}
.sorting__title{color:#acacac}
/* Назва сортування стискається трьома крапками, а не виштовхує стрілку за
   межі поля: у вузькому рядку з трьома кнопками вигляду місця обмаль. */
.sorting__value{color:#010602;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sorting__chev{flex:0 0 auto;fill:none;stroke:#010602;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.sorting[open] .sorting__chev{transform:rotate(180deg)}
.sorting__menu{position:absolute;z-index:60;top:calc(100% + 6px);right:0;min-width:210px;
  background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14)}
.sorting__opt{display:block;padding:10px 12px;border-radius:8px;color:#010602;
  white-space:nowrap}
.sorting__opt:hover{background:#f3f5f3}
.sorting__opt.is-active{background:#204029;color:#f7f7f7}
/* Кнопка «Фільтр» — лише на телефоні, де сам фільтр згорнутий */
.filter-button{display:none;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.2);
  border-radius:12px;padding:7px 16px;font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer;user-select:none}
.filter-button:hover{border-color:#010602}
/* Перемикач вигляду списку. Розмітка картки одна на обидва режими —
   міняється лише розкладка, тож картку доводимо в одному місці. */
.viewmode{display:flex;gap:4px;flex:0 0 auto}
.viewmode__btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:8px;
  background:none;color:#b0b0b0;cursor:pointer}
.viewmode__btn svg{fill:currentColor;display:block}
.viewmode__btn:hover{color:#010602}
.viewmode__btn.is-active{color:#010602;border-color:rgba(0,0,0,.2)}

.catalog{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.catalog--plain{grid-template-columns:1fr}
.catalog__content{min-width:0}
/* Підкатегорії — у колонці товарів, а не на всю ширину над фільтром:
   інакше поруч із фільтром лишалася порожня смуга. */
.catalog__content .cats{margin-top:0}
.catalog__found{color:#acacac;font-size:13px;margin-top:8px}
.filter__toggle{display:none}
/* Шапка панелі, підкладка й помаранчева кнопка «Показати» живуть лише в
   мобільній розкладці — на десктопі фільтр просто стоїть збоку. */
.filter__backdrop{display:none}
.filter__top{display:none;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid #e6e6e6;position:sticky;top:0;background:#fff;z-index:2}
.filter__back{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;border:0;background:none;color:#010602;cursor:pointer;padding:0}
.filter__back svg,.filter__chev{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.filter__caption{flex:1 1 auto;text-align:center;padding-right:32px;font:700 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.filter__apply{display:none;width:100%;margin-top:24px;padding:14px 16px;border:0;
  border-radius:26px;background:#f87c15;color:#fff;font:700 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer}
.filter__section{margin-bottom:22px}
.filter__head{font:700 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin-bottom:12px}
button.filter__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.filter__chev{display:none;flex:0 0 auto;transition:transform .2s ease}
.filter__list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.filter__row{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
/* Кружечок із галочкою — такий самий прапорець, як у фільтрі чинного сайту
   (рідний квадратний чекбокс браузера туди не вписується). */
.filter__row input{appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;margin:0;
  width:14px;height:14px;border:1px solid rgba(1,6,2,.5);border-radius:50%;background:#fff;
  box-shadow:inset 0 0 3px rgba(0,0,0,.1);cursor:pointer}
.filter__row input:checked{background:#010602;border-color:#010602}
.filter__row input:checked:after{content:"";position:absolute;left:2.5px;top:3px;width:6px;height:3px;
  border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.filter__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter__count{color:#acacac;font-size:11px}
.filter__price{display:flex;align-items:center;gap:8px}
.filter__price input{width:100%;min-width:0;border:1px solid rgba(0,0,0,.2);border-radius:12px;
  padding:9px 12px;font:400 13px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;text-align:center}
.filter__ok{flex:0 0 auto;height:32px;padding:0 13px;border:1px solid #010602;border-radius:12px;
  background:#fff;color:#010602;font:400 12px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;cursor:pointer}
.filter__ok:hover{background:#f5f7f5}
.filter__reset{display:inline-block;margin-top:12px;font-size:12px;color:#acacac;
  border-bottom:1px dashed #e6e6e6}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:24px 0}
.pager__item{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid #e6e6e6;border-radius:4px;font-size:14px}
.pager__item:hover{border-color:#010602;color:#010602}
.pager__item.is-active{background:#204029;border-color:#204029;color:#f7f7f7;font-weight:700}
.pager__item.is-disabled{color:#e6e6e6;cursor:default}
.pager__gap{color:#acacac;padding:0 4px}

/* ---------- Картка товару ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin:8px 0 32px}
/* Без min-width:0 колонка грида розтягується під найширшу дитину: смужка
   вкладок ставала ширшою за екран і тягла вбік усю сторінку, замість
   гортатись сама. */
.product__left,.product__right{min-width:0}
.gallery__main{width:100%;aspect-ratio:1;object-fit:contain;border:1px solid #e6e6e6;border-radius:6px;background:#fff}
.gallery--none{border:1px dashed #e6e6e6;border-radius:6px;min-height:260px;display:flex;
  align-items:center;justify-content:center;color:#acacac}
.gallery__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.gallery__thumbs::-webkit-scrollbar{display:none}
.gallery__thumb{position:relative;flex:0 0 72px;height:72px;border:1px solid #e6e6e6;
  border-radius:4px;cursor:pointer;padding:4px;display:block}
.gallery__thumb.is-active{border-color:#204029}
/* position:relative вище обов'язковий: без нього прихований перемикач
   рахується від сторінки, а не від мініатюри, вилазить зі стрічки, що
   гортається, і тягне сторінку вбік. */
.gallery__thumb input{position:absolute;left:0;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none}
.gallery__thumb img{width:100%;height:100%;object-fit:contain}
.product__title{font:400 26px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:0 0 12px}
.product__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#acacac;margin-bottom:16px}
.product__meta b{color:#010602}
.product__avail{color:#17b260}
.product__avail--no{color:#acacac}
/* Ціна й «Порівняти / В бажання» в один рядок — як на чинній картці товару */
.product__pricerow{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:18px}
.product__price{display:flex;align-items:baseline;gap:12px}
.product__now{font:700 30px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
.product__old{color:#acacac;text-decoration:line-through;font-size:16px}
.product__sale{background:#e93f11;color:#fff;font:700 13px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;padding:3px 8px;border-radius:3px}
.product__short{font-size:14px;line-height:1.6;color:#333;margin-bottom:18px}
.product__order{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.product__order--out{color:#acacac;border:1px dashed #e6e6e6;border-radius:6px;padding:14px 16px}
.product__terms{border-top:1px solid #e6e6e6;padding-top:16px;display:flex;flex-direction:column;
  gap:8px;font-size:13px;color:#444}
.product__block{margin:32px 0}
/* Характеристики — «зебра» без ліній, як на чинному сайті: рядки через один
   підфарбовані rgba(0,0,0,.05), назва ознаки — rgba(0,0,0,.5). Значення зняті
   з product-features живої теми, щоб таблиця не виглядала блідішою. */
.features{border-collapse:collapse;width:100%;font-size:13px;line-height:1.2}
.features tr:nth-child(odd){background:rgba(0,0,0,.05)}
.features th,.features td{padding:12px 20px;text-align:left;vertical-align:top}
.features th{font-weight:400;color:rgba(0,0,0,.5);width:45%;padding-right:0}
.features td{word-break:break-word}

/* ---------- Вкладки на картці товару ---------- */
.tabs{border-top:1px solid #e6e6e6;padding-top:16px}
/* Смужка вкладок гортається вбік і не переноситься: перенесений «Консультація»
   з'їдав окремий рядок і відсував опис. Той самий прийом, що в службовому
   меню шапки й у стрічці категорій. */
.tabs__nav{display:flex;gap:24px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs__nav::-webkit-scrollbar{display:none}
.tabs__btn{flex:0 0 auto;white-space:nowrap;border:0;background:none;padding:0 0 6px;cursor:pointer;
  font:400 15px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#acacac;border-bottom:2px solid transparent}
.tabs__btn:hover{color:#010602}
.tabs__btn.is-active{color:#010602;font-weight:700;border-bottom-color:#010602}
.tabs__panel{display:none;font-size:14px;line-height:1.6;color:#333}
.tabs__panel.is-active{display:block}
.tabs__panel p{margin:0 0 8px}
.tabs__panel p:last-child{margin-bottom:0}
.tabs__panel b{color:#010602}

/* ---------- Кошик ---------- */
.cart-row{display:grid;grid-template-columns:72px 1fr auto auto 32px;gap:14px;align-items:center;
  border-bottom:1px solid #e6e6e6;padding:14px 0}
.cart-row__img{width:72px;height:72px;display:block}
.cart-row__img img{width:100%;height:100%;object-fit:contain}
.cart-row__img--none{border:1px dashed #e6e6e6;border-radius:4px}
.cart-row__name{font-size:15px;line-height:1.3}
.cart-row__code{color:#acacac;font-size:12px;margin-top:4px}
.cart-row__sum{font:700 16px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;white-space:nowrap;min-width:110px;text-align:right}
.cart-row__del{border:0;background:none;font-size:24px;line-height:1;color:#acacac;cursor:pointer;padding:0}
.cart-row__del:hover{color:#e93f11}
.cart-total{display:flex;justify-content:flex-end;align-items:baseline;gap:16px;padding:18px 0;font-size:15px}
.cart-total b{font-size:24px}
.cart-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:32px}

/* ---------- Оформлення ---------- */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;margin-bottom:40px}
.checkout__form{max-width:660px}
.checkout__section{border-bottom:1px solid #e6e6e6;padding-bottom:20px;margin-bottom:20px}
.checkout__section .sec{margin-top:0}
.checkout__hint{color:#acacac;font-size:13px;margin:0 0 12px}
.field{display:block;position:relative;margin-bottom:12px;max-width:460px}
.field>span{display:block;font-size:13px;margin-bottom:5px}
.field>span i{color:#acacac;font-style:normal}
.field input,.field textarea{width:100%;border:1px solid #e6e6e6;border-radius:4px;
  padding:12px 14px;font:400 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#010602;background:#fff}
.field input:focus,.field textarea:focus{outline:0;border-color:#204029}
.choice{position:relative;display:flex;align-items:center;gap:14px;border:1px solid #e6e6e6;border-radius:6px;
  padding:12px 15px;margin-bottom:10px;cursor:pointer;max-width:560px;transition:border-color .15s,background .15s}
.choice:hover{border-color:#c9d3c9}
.choice:has(input:checked){border-color:#204029;background:#f6faf7}
.choice input{margin:0;width:17px;height:17px;accent-color:#204029;flex-shrink:0}
/* З іконкою кружечок радіо не потрібен: вибране показує галочка на іконці.
   Сам input лишається (прозорим) — для клавіатури й скрінрідерів. */
.choice:has(.choice__icon) input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.choice:has(input:focus-visible){outline:2px solid #204029;outline-offset:2px}
.choice__icon{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.choice__icon svg{display:block}
.choice__icon--np{background:#fff;color:#da291c;box-shadow:inset 0 0 0 1px #f0d2cf}
.choice__icon--bank{background:#204029;color:#fff}
.choice__badge{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;
  background:#da291c;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.choice__icon::after{content:"";position:absolute;left:-5px;top:-5px;width:16px;height:16px;border-radius:50%;
  background:#204029 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  box-shadow:0 0 0 2px #fff;transform:scale(0);transition:transform .15s}
.choice:has(input:checked) .choice__icon::after{transform:scale(1)}
.choice__body b{display:block;font-size:14px}
.choice__body i{display:block;color:#acacac;font-style:normal;font-size:12px;margin-top:3px}
/* Фізособа / юрособа — звичайні радіокнопки в рядок, без рамок: це уточнення,
   а не головний вибір сторінки, тож і вагу має меншу за доставку й оплату. */
.buyer-type{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 14px;font-size:14px}
.buyer-type label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.buyer-type input{width:16px;height:16px;margin:0;accent-color:#204029}
.checkout__note{color:#acacac;font-size:13px;margin:-4px 0 12px;max-width:560px}
.field__hint.is-ok{color:#204029}
.field__hint.is-bad{color:#e93f11}
.checkout__error{color:#e93f11;font-size:14px;margin-bottom:12px;min-height:1px}
.checkout__summary{border:1px solid #e6e6e6;border-radius:6px;padding:18px;position:sticky;top:16px}
.checkout__summary .sec{margin:0 0 12px}
/* Рядок замовлення — з фотографією: місця збоку вистачає, а впізнати товар
   по картинці швидше, ніж вичитувати назву. */
.sum-row{display:grid;grid-template-columns:56px minmax(0,1fr) max-content;gap:12px;
  align-items:center;font-size:14px;padding:12px 0;border-bottom:1px solid #e6e6e6}
.sum-row__img{width:56px;height:56px;object-fit:contain;background:#fff}
.sum-row__img--none{background:#f3f3f3;border-radius:4px}
.sum-row__name{min-width:0;line-height:1.35}
.sum-row__name i{display:block;margin-top:2px;font-style:normal;font-size:12px;color:#acacac}
.sum-row b{white-space:nowrap}
.sum-row--total{grid-template-columns:minmax(0,1fr) max-content;border-bottom:0;
  padding-top:14px;font-size:15px}
.sum-row--total b{font-size:20px}
.checkout__back{display:inline-block;margin-top:14px;font-size:13px;color:#acacac;border-bottom:1px dashed #e6e6e6}
.done{max-width:640px;margin:0 auto;text-align:center;padding:24px 0 48px}
.done__number{font-size:16px}
.done__note{color:#acacac;font-size:13px;margin-bottom:24px}

@media(min-width:1440px){
  .goods{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Картка на телефоні ----------
   На телефоні Хорошоп віддає окрему тему, і картка там інша: сітка на всю
   ширину екрана з розділовими лініями замість рамок навколо кожної картки,
   дві колонки, назва жирна й дрібніша, стара ціна поруч із новою, а не над
   нею, і кнопки «Купити» в списку немає зовсім — купують із картки товару.
   Відступ від наявності лишаємо тільки для «немає»: у Хорошопа її на
   телефоні не видно взагалі, але товар, якого нема, має про це сказати. */
@media(max-width:899px){
  .goods{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:16px -16px;
    border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2)}
  .card{border:0;border-right:.5px solid rgba(0,0,0,.2);border-bottom:.5px solid rgba(0,0,0,.2);
    border-radius:0;padding:16px}
  .card:hover{border-color:rgba(0,0,0,.2);box-shadow:none}
  .card:nth-child(2n){border-right:0}
  .card-view{padding:0;margin-bottom:8px}
  .card-info{padding:0}
  .sticker{left:0;height:20px;line-height:20px;padding:0 8px;font:400 12px/20px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
  .sticker:before{border-width:0 6px 6px 0}
  .card-code{font-size:12px}
  .card-title{font-size:13px;font-weight:700;line-height:1.43;height:2.86em;margin:0}
  .card-purchase{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;height:auto;margin-top:4px}
  .card-prices{display:contents}
  .card-price{font:400 13px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;order:0}
  .card-old{font-size:12px;line-height:1.2;order:1}
  /* Кнопка «Купити» у вузькій картці — сама іконка кошика: підпис поруч із
     ціною не вміщається у дві колонки на 390px. */
  /* У вузькій картці лишається сама іконка: підпис поруч із ціною у дві
     колонки на 390px не вміщається. */
  .card-buy{order:2;align-self:center;margin-left:auto;width:34px;height:34px;min-width:0;
    padding:0;border-radius:50%;gap:0}
  .card-buy-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .card-avail{display:none}
  .card-avail--no{display:block;margin-top:4px;font-size:12px}
  .card-marks{top:0;right:0;gap:4px}
  .mark{width:30px;height:30px;background:rgba(255,255,255,.7)}
  /* Велика плитка на телефоні: картка на всю ширину, підпис на кнопці
     вміщається — ховати його тут нема потреби. */
  .goods.goods--big{grid-template-columns:1fr;gap:0;margin:16px -16px}
  .goods--big .card{border-right:0;padding:16px}
  .goods--big .card-title{font-size:15px;height:auto}
  .goods--big .card-price{font:700 17px/1.2 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif}
  .goods--big .card-old{font-size:13px}
  .goods--big .card-buy{width:auto;height:34px;padding:0 16px;border-radius:17px;
    gap:7px;margin-left:auto;margin-top:4px}
  .goods--big .card-buy-label{position:static;width:auto;height:auto;clip:auto;
    overflow:visible;font-size:14px}
  .goods--big .card-avail{display:block;margin-top:6px}
  .goods--big .card-marks{top:8px;right:8px}
  /* Рядками на телефоні: вужче фото, кнопка з підписом — на всю ширину
     рядка місця вистачає, на відміну від вузької плитки. */
  .goods.goods--list{grid-template-columns:1fr;margin:16px -16px}
  .goods--list .card{grid-template-columns:88px minmax(0,1fr);gap:12px;
    padding:14px 16px;border-right:0}
  .goods--list .card-code,
  .goods--list .card-title{padding-right:72px}
  .goods--list .card-title{font-size:13px;height:auto}
  .goods--list .card-buy{width:auto;height:32px;padding:0 14px;border-radius:16px;
    gap:7px;margin:0}
  .goods--list .card-buy-label{position:static;width:auto;height:auto;clip:auto;
    overflow:visible;font-size:13px}
  .goods--list .card-avail{display:block;margin:0 auto 0 0}
  .goods--list .card-marks{gap:6px;top:12px;right:16px}
}
@media(max-width:900px){
  /* Меню каталогу на телефоні: розділи списком, підрозділи під активним */
  .catmenu{max-height:calc(100vh - 60px);overflow-y:auto}
  body.menu-open{overflow:hidden}
  .catmenu__inner{grid-template-columns:1fr}
  .catmenu__roots{border-right:0;border-bottom:1px solid #e6e6e6;max-height:none}
  .catmenu__panels{padding:16px;max-height:none}
  .catmenu__panel.is-active{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phone__drop{right:auto;left:0}
  .marks__row{grid-template-columns:56px minmax(0,1fr) 28px;gap:8px 10px;
    grid-template-areas:"img name del" "img price buy"}
  .marks__img{width:56px;height:56px;grid-area:img}
  .marks__main{grid-area:name}
  .marks__price{grid-area:price;text-align:left;min-width:0}
  .marks__buy{grid-area:buy;justify-self:end}
  .marks__del{grid-area:del;align-self:start}
  .cmp__corner,.cmp__head{width:150px;min-width:150px}
}
@media(min-width:600px) and (max-width:899px){
  .goods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card:nth-child(2n){border-right:.5px solid rgba(0,0,0,.2)}
  .card:nth-child(3n){border-right:0}
}

/* ---------- Текстові сторінки ---------- */
.cols{display:grid;grid-template-columns:1fr 260px;gap:32px;align-items:start}
.text{font-size:15px;line-height:1.65;max-width:75ch}
.text h2{font:700 21px/1.23 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:22px 0 8px}
.text h3{font:700 17px/1.3 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:18px 0 6px}
.text p{margin:0 0 12px}
.text ul,.text ol{margin:0 0 12px;padding-left:22px}
.text li{margin:0 0 6px}
.text a{color:#204029;text-decoration:underline}
.text hr{border:0;border-top:1px solid #e6e6e6;margin:20px 0}
.text table{border-collapse:collapse;width:100%;margin:0 0 14px}
.text th,.text td{border:1px solid #e6e6e6;padding:8px 10px;text-align:left}
.side{border:1px solid #e6e6e6;border-radius:6px;padding:8px}
.side a{display:block;padding:9px 12px;border-radius:4px;font-size:14px}
.side a:hover{background:#f5f7f5}
.side a.on{background:#204029;color:#f7f7f7;font-weight:700}
.crumbs{font-size:12px;color:#acacac;margin:16px 0 0}
.crumbs a{color:#acacac}
.crumbs a:hover{color:#010602}
.seo-text{margin:32px 0;padding-top:20px;border-top:1px solid #e6e6e6;color:#333;font-size:14px;line-height:1.6}

/* ---------- Футер ---------- */
footer{background:#204029;color:#f7f7f7;margin-top:48px;border-top:4px solid #f87c15}
footer a{color:#f7f7f7}
footer a:hover{color:#f87c15}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px;padding:32px 0}
.fcols h4{font:700 14px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;margin:0 0 12px;color:#fff}
.fcols ul{list-style:none;margin:0;padding:0;font-size:13px}
.fcols li{margin:0 0 8px}
.flogo{font:700 22px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#fff}
.flogo span{color:#f87c15}
.flogo--img{display:inline-block;margin-bottom:10px}
.flogo--img img{display:block;width:auto;height:44px;max-width:220px;object-fit:contain}
.fnote{font-size:12px;color:rgba(247,247,247,.65);margin-top:10px;line-height:1.5}

/* ---------- Плашка «це чернетка» ---------- */
.draftbar{background:#f87c15;color:#010602;font:700 13px "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;padding:9px 0}
.draftbar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.draftbar span{font-weight:400}

.empty{border:1px dashed #e6e6e6;border-radius:6px;padding:40px 20px;text-align:center;color:#acacac}

@media(max-width:900px){
  .cols{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:20px}
  .checkout{grid-template-columns:1fr}
  .checkout__summary{position:static;order:-1}
  /* Фільтр ховається за кнопкою «Фільтр», як у мобільній темі Хорошопа:
     колонка в 240px тут не вміщається, а розгорнутий список брендів
     відсовував би товари на екран нижче. */
  .catalog{grid-template-columns:1fr}
  .catalog-top{gap:8px}
  .catalog-tools{width:100%;justify-content:space-between;gap:8px}
  .filter-button{display:inline-flex}
  .sorting__title{display:none}
  .sorting{flex:1 1 auto;min-width:0}
  .sorting__current{justify-content:space-between;border:1px solid rgba(0,0,0,.2);
    border-radius:12px;padding:7px 12px;font-weight:700}
  .sorting__menu{left:0;right:0;min-width:0}
  /* Три кнопки вигляду поруч із фільтром і сортуванням — трохи компактніші. */
  .viewmode{gap:2px}
  .viewmode__btn{width:30px;height:30px}
  /* Фільтр висувається зліва поверх сторінки, як у мобільній темі Хорошопа,
     а не розгортається всередині каталогу: панель на всю висоту з власною
     прокруткою й кнопкою «Показати» внизу. */
  .filter{position:fixed;top:0;left:0;bottom:0;z-index:120;width:min(86vw,360px);
    display:flex;flex-direction:column;background:#fff;margin:0;padding:0;border:0;border-radius:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 30px rgba(0,0,0,.25);
    transform:translateX(-100%);transition:transform .25s ease}
  .filter__toggle:checked ~ .filter{transform:none}
  .filter__backdrop{display:block;position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.4);
    opacity:0;visibility:hidden;transition:opacity .25s ease}
  .filter__toggle:checked ~ .filter__backdrop{opacity:1;visibility:visible}
  /* Поки панель відкрита, сторінка під нею не прокручується. */
  body.filter-open{overflow:hidden}
  .filter__top{display:flex}
  .filter__form{flex:1 1 auto;display:flex;flex-direction:column;padding:8px 16px 20px}
  .filter__section{margin-bottom:0}
  button.filter__head{padding:14px 0;margin-bottom:0;border-bottom:1px solid #e6e6e6}
  .filter__chev{display:block}
  .filter__section--group.is-open .filter__chev{transform:rotate(180deg)}
  .filter__section--group:not(.is-open) .filter__list{display:none}
  .filter__section--group .filter__list{padding:12px 0 4px;max-height:50vh}
  .filter__head{padding-top:18px}
  .filter__price input{padding:13px 12px;border-radius:24px;font-size:15px}
  .filter__ok{display:none}
  .filter__apply{display:block}
  .filter__reset{align-self:flex-start;margin-top:16px}
  /* Характеристики: на телефоні той самий крок, що в мобільній темі. */
  .features{line-height:1.25}
  .features th,.features td{padding:10px 16px}
  .features th{color:rgba(0,0,0,.6)}
  .fcols{grid-template-columns:1fr 1fr;gap:20px}
  /* Службове меню в один рядок, що горизонтально гортається: інакше шість
     довгих назв сторінок займають пів екрана ще до логотипа. */
  /* Верхню смужку на телефоні прибираємо: мова й ті самі сторінки є в
     бічному меню, а тут вони лише з'їдали висоту над логотипом. */
  .hdr-top{display:none}
}
/* Нижче 900px сайт переходить у «мобільний» режим цілком — так само, як
   Хорошоп там віддає окрему тему: шапка згортається до гамбургера з
   іконками, категорії стають стрічкою, картка товару — мобільною. Один
   поріг на все, щоб не було смуги 700-900px, де шапка вже не вміщається,
   а мобільні правила ще не діють. */
@media(max-width:900px){
  /* Текст поверх банера на вузькому екрані нечитабельний, а картинка стає
     смужкою у 110px. Тому розкладаємо: зображення зверху, текст під ним. */
  .banner{background:#204029}
  .banner img{aspect-ratio:16/9}
  .banner-txt{position:static;background:none;padding:16px 18px 20px}
  .banner-txt h2{font-size:21px}
  .banner-txt p{font-size:14px}
  /* Мобільна шапка: гамбургер зліва, логотип, три іконки справа */
  .hdr-burger,.hdr-icon{display:none}
  .sidemenu{display:block}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:#204029;box-shadow:0 -2px 14px rgba(0,0,0,.2)}
  /* Щоб панель не затуляла низ сторінки. */
  body{padding-bottom:64px}
  .tabbar__item:active{color:#f87c15}
  .hdr-mid .wrap{position:relative;flex-wrap:nowrap;gap:6px;justify-content:center;align-items:center}
  /* Логотип по центру, тож іконку акаунта кладемо поверх — інакше вона
     зсувала б його ліворуч. */
  .hdr-account{display:flex;align-items:center;justify-content:center;
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:34px;height:34px;color:#f7f7f7}
  .hdr-account svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .hdr-account.is-in{color:#f87c15}
  /* Вхід і кабінет — в одну колонку: два бланки поруч на телефоні не влазять. */
  .account{grid-template-columns:1fr;gap:16px}
  .logo--img img{height:30px}
  .logo--img{flex-shrink:1;min-width:0;max-width:180px}
  .logo{flex-shrink:1;min-width:0;max-width:180px;font-size:16px}
  .btn-catalog,.search,.phone{display:none}
  /* Категорії як горизонтальна стрічка з прокруткою */
  .cats{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x proximity;
    scrollbar-width:none;margin:16px 0;padding:0}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:0 0 132px;scroll-snap-align:start;border:0;padding:0;background:none;
    flex-direction:column;align-items:center;gap:6px}
  .cat-img,.cat-img--none{width:110px;height:110px;font-size:26px}
  .cat b{font-size:13px;max-width:100%;overflow:hidden;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
  .cat small{display:none}
  /* Кнопка каталогу на мобільній */
  .cats-more{display:flex}
  .cats-more{width:100%;background:#f87c15;color:#010602;font-weight:700;
    font-size:16px;border-radius:12px;padding:15px;border:0;justify-content:center;
    align-items:center;gap:10px;margin:22px 0;cursor:pointer}
  .cats-more:hover{filter:brightness(.94)}
  .cats-more-icon{flex-shrink:0}
  .cart-row{grid-template-columns:56px minmax(0,1fr) auto;gap:8px 10px;
    grid-template-areas:"img name del" "img qty sum"}
  .cart-row__img{width:56px;height:56px;grid-area:img}
  .cart-row__main{grid-area:name}
  .cart-row .counter{grid-area:qty;justify-self:start}
  .cart-row .counter__btn{width:32px;height:36px}
  .cart-row .counter__field{width:40px;height:36px}
  .cart-row__sum{grid-area:sum;align-self:center;min-width:0;font-size:14px}
  .cart-row__del{grid-area:del;align-self:start}
  .cart-actions .btn{flex:1}
  .product__now{font-size:26px}
}
@media(max-width:560px){
  .fcols{grid-template-columns:1fr}
  h1{font-size:24px}
  .hdr-mid .wrap{gap:12px}
  .logo{font-size:22px}
  .search{order:3;flex-basis:100%}
}