/* ============================================================
   UNI-BUYUI v2 — єдина кнопка «в кошик» на ВСЬОМУ сайті
   Дві розмітки карток:
     A) лістинги:  .pcard-img / .pcard-body / .pcard-priceline / .pcard-add
     B) стрічки:   .imgbox    / .body       / .priceline       / .addbtn
   ============================================================ */

/* ---------- 1. Кнопка на картці ---------- */
.pcard-add .plus, .addbtn .plus{ display:none; }
.pcard-add svg, .addbtn svg{ width:18px; height:18px; display:block; }

.pcard-body, .pcard .body{ position:relative; }
.pcard-priceline .pcard-pricewrap,
.priceline .pcard-pricewrap{ display:flex; flex-direction:column; gap:1px; }

.pcard-priceline .pcard-add,
.pcard .priceline .addbtn{
  position:absolute !important; right:10px !important; top:-26px !important;
  width:46px !important; height:40px !important;
  border:1.5px solid #FDBA74 !important; background:#FFF7F0 !important; color:#F97316 !important;
  border-radius:12px !important; box-shadow:0 2px 8px rgba(0,0,0,.10) !important; z-index:5;
  display:flex !important; align-items:center; justify-content:center; padding:0 !important;
  font-size:0 !important;
  transition:background .15s, border-color .15s, color .15s, width .18s ease !important;
}
/* заливка на ховері — тільки у стані «додати» */
.pcard-priceline .pcard-add:not(.qty):hover,
.pcard .priceline .addbtn:not(.qty):hover{ background:#F97316 !important; border-color:#F97316 !important; color:#fff !important; }
.pcard-priceline .pcard-add:not(.qty):active,
.pcard .priceline .addbtn:not(.qty):active{ background:#EA6A0A !important; border-color:#EA6A0A !important; color:#fff !important; }
/* крокер на ховері лишається світлим */
.pcard-priceline .pcard-add.qty:hover,
.pcard .priceline .addbtn.qty:hover{ background:#FFF7F0 !important; border-color:#F97316 !important; }

/* стан «щойно додано» */
.pcard-add.ok, .addbtn.ok{ background:#F97316 !important; border-color:#F97316 !important; color:#fff !important; }
.pcard-add.ok .ic-cart, .addbtn.ok .ic-cart{ display:none; }
.pcard-add.ok .ic-ok, .addbtn.ok .ic-ok{ display:block; }
.pcard-add .ic-ok, .addbtn .ic-ok{ display:none; }

/* стан «у кошику N» — крокер */
.pcard-add.qty, .addbtn.qty,
.pcard-priceline .pcard-add.qty,
.pcard .priceline .addbtn.qty{ width:96px !important; justify-content:space-between; }
.pcard-add.qty .ic-cart, .pcard-add.qty .ic-ok,
.addbtn.qty .ic-cart, .addbtn.qty .ic-ok{ display:none; }
.pcard-add.qty .step, .addbtn.qty .step{ display:flex; }
.pcard-add .step, .addbtn .step{ display:none; align-items:center; width:100%; height:100%; }
.pcard-add .step b, .addbtn .step b{ flex:1; text-align:center; font:700 14px/1 -apple-system,'Segoe UI',sans-serif; color:#9A3412; }
.pcard-add .step i, .addbtn .step i{
  width:30px; height:100%; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:18px; font-weight:600; color:#F97316; cursor:pointer; border-radius:11px;
}
.pcard-add .step i:hover, .addbtn .step i:hover{ background:#FFE9D8; }

@media(max-width:699px){
  .pcard-priceline .pcard-add, .pcard .priceline .addbtn{ right:8px !important; }
  .pcard-priceline .pcard-add svg, .pcard .priceline .addbtn svg{ width:19px; height:19px; }
}

/* ---------- 2. Пошук ---------- */
.search{ background:#fff !important; border:1px solid #DCDCDC !important; }
.search:hover{ border-color:#C4C4C4 !important; }
.search:focus-within{ background:#fff !important; border-color:#F97316 !important; }
.search button, .search button:hover{ background:transparent !important; }
.search button:hover svg{ stroke:#F97316 !important; }
.search input::placeholder{ color:#9A9A9A; }

/* ---------- 3. Кошик у хедері ---------- */
.cart-link, .top-cart{
  background:#FFF7F0 !important; border:1px solid #FED7AA !important; box-shadow:none !important;
  transition:background .15s, border-color .15s !important;
}
.cart-link svg, .top-cart svg{ stroke:#F97316 !important; }
.cart-link:hover, .top-cart:hover{ background:#FFE9D8 !important; border-color:#F97316 !important; }
.cart-link.has, .top-cart.has{ background:#FFF7F0 !important; border-color:#FED7AA !important; }
.cart-link .count, .top-cart .count{ background:#F97316 !important; }
.cart-link, .top-cart,
.cart-link .cart-label, .top-cart .cart-label,
.cart-link.has .cart-label, .top-cart.has .cart-label,
.cat-acts > a.cart-link, .cat-acts > a.cart-link span:not(.count),
.cat-acts > a.cart-link .cart-label{ color:#9A3412 !important; }

/* ---------- 4. Приглушені лічильники ---------- */
.cat-acts a:not(.cart-link) .count,
.top-wish .count, .top-wish .mn-count,
a[href*="wishlist"] .count, a[href*="wishlist"] .mn-count,
a[href*="orders"] .count, a[href*="orders"] .mn-count{
  background:#ECECEC !important; color:#5A5B5D !important;
  font-weight:700 !important; box-shadow:0 0 0 2px #fff !important;
}


/* ============================================================
   UNI-SIDESCROLL v1 — сайдбар фільтрів більше не обрізається
   Було: position:sticky без обмеження висоти. Коли фільтрів багато,
   сайдбар прилипав, а його низ назавжди лишався під екраном.
   Стало: липкий + власна прокрутка, коли не вміщається.
   Коли фільтрів мало — поводиться як раніше, смуги прокрутки немає.
   ============================================================ */
@media(min-width:1080px){
  .sidebar{
    max-height:calc(100vh - 92px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;          /* не «перекидає» скрол на сторінку */
    scrollbar-width:thin;
    scrollbar-color:#D8D8D8 transparent;
  }
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .sidebar::-webkit-scrollbar-thumb{ background:#D8D8D8; border-radius:3px; }
  .sidebar::-webkit-scrollbar-thumb:hover{ background:#BDBDBD; }
  /* підказка, що контент прокручується: м'яке згасання знизу */
  .sidebar{ scroll-behavior:smooth; }
}


/* ============================================================
   UNI-MEGABRANDS v1 — логотипи брендів у мегаменю
   За замовчуванням чорно-білі й приглушені, щоб не перетягували
   увагу з пунктів меню. Колір повертається на наведенні.
   ============================================================ */
.mega-brands .brand-pill{
  filter:grayscale(1);
  opacity:.5;
  transition:filter .18s ease, opacity .18s ease;
}
.mega-brands .brand-pill:hover{
  filter:none;
  opacity:1;
}
/* коли курсор у ряду — решта гасне ще трохи, обраний виділяється сильніше */
.mega-brands .brands-pills:hover .brand-pill{ opacity:.35; }
.mega-brands .brands-pills:hover .brand-pill:hover{ opacity:1; }


/* ============================================================
   UNI-WISHHEART v1 — обране: чисте сердечко замість білого кола
   Як у Zakaz: без підкладки й обводки, сіре за замовчуванням,
   заливається червоним у активному стані. Помаранчевий лишається
   тільки за кошиком — один акцент на сторінці.
   ============================================================ */
.pcard .wish-btn, .wish-btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  width:30px !important; height:30px !important;
  top:8px !important; right:8px !important;
  padding:0 !important;
}
.pcard .wish-btn svg, .wish-btn svg{
  width:22px !important; height:22px !important;
  stroke:#B0B0B0 !important; fill:none !important;
  stroke-width:1.8 !important;
  transition:stroke .15s ease, fill .15s ease, transform .15s ease;
}
.pcard .wish-btn:hover svg, .wish-btn:hover svg{
  stroke:#DC2626 !important;
  transform:scale(1.08);
}
.pcard .wish-btn.on, .wish-btn.on{
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.pcard .wish-btn.on svg, .wish-btn.on svg{
  stroke:#DC2626 !important;
  fill:#DC2626 !important;
}
@media(max-width:699px){
  .strip .pcard .wish-btn, .brow .pcard .wish-btn{ width:28px !important; height:28px !important; }
  .pcard .wish-btn svg, .wish-btn svg{ width:21px !important; height:21px !important; }
}
/* картка товару — квадратна кнопка біля «Купити»: рамку лишаємо, колір червоний */
.wish-sq.on{ border-color:#DC2626 !important; background:#FEF2F2 !important; }
.wish-sq.on svg{ stroke:#DC2626 !important; fill:#DC2626 !important; }
.wish-sq:hover{ border-color:#DC2626 !important; }
.wish-sq:hover svg{ stroke:#DC2626 !important; }


/* ============================================================
   UNI-MEGACOLS v1 — 4 категорії мегаменю в один ряд
   Сітка стояла на 3 колонки ще з часів, коли категорій було три.
   Після додавання «Обладнання та професійна хімія» четверта
   колонка падала на другий рядок.
   ============================================================ */
@media(min-width:1080px){
  .mega-inner{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:32px !important;
  }
}


/* ============================================================
   UNI-WISHCOUNT v2 — лічильник обраного: другорядний, але читабельний
   v1 робив його червоним — зайвий акцент у хедері. Повертаємо сірий,
   лише піднімаємо контраст, бо #ECECEC на білому зливався.
   Акцент у хедері лишається один — кошик.
   ============================================================ */
#wishCount, #wishCountM, #mnWish{
  background:#E0E0E0 !important;
  color:#3A3B3D !important;
  font-weight:800 !important;
  box-shadow:0 0 0 2px #fff !important;
}
#wishCount:empty, #wishCountM:empty, #mnWish:empty{ display:none !important; }


/* ============================================================
   UNI-FILTERCASE v1 — заголовки фасетів без капслоку
   Було 12px/800 UPPERCASE з letter-spacing — це стиль службової
   мітки, а не заголовка. Як у Zakaz: звичайний регістр, більший
   кегль, перша літера велика. Заголовок фасета тепер явно більший
   за опції (15/700 проти 14/400), тому ієрархія стала чіткішою.
   ============================================================ */
.sf-title, .fp-title, .fgroup-title{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#13131E !important;
  margin-bottom:10px !important;
}
.subcats-label, .seo-label{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#8A8B8D !important;
}
@media(max-width:699px){
  .sf-title, .fp-title, .fgroup-title{ font-size:15px !important; }
}


/* ============================================================
   UNI-MEGACASE v1 — мегаменю: без капслоку, однакова насиченість
   1. Заголовки категорій були 13/800 UPPERCASE з letter-spacing —
      стиль службової мітки. Робимо звичайний регістр, як у фільтрах.
   2. Підкатегорії були #3A3B3D, а назва товару на лістингу #1A1A1A —
      меню виглядало блідішим за каталог. Зрівнюємо.
   ============================================================ */
.mega-col-title{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#13131E !important;
}
.mega-col a.item,
.mega-col .item{
  color:#1A1A1A !important;
}
.mega-col a.item:hover,
.mega-col .item:hover{
  color:#F97316 !important;
}


/* ============================================================
   UNI-PRICEBADGE v3
   1. «грн» — окремою вагою: дрібніша й сіра, щоб домінувала цифра.
      Одиницю лишаємо літерами, а не ₴: сайт на системному шрифті,
      де гліф гривні подекуди підмінюється з іншої гарнітури.
   2. Стікери. Помаранчевий тепер тільки на дії (кнопка, кошик,
      каталог). ХІТ і НОВИНКА — інформаційні мітки, не оффери:
      темна заливка і темний контур. Червоний лишається єдиним
      промо-кольором на фото.
   ============================================================ */
.cur{
  font-style:normal !important;
  font-size:.74em !important;
  font-weight:600 !important;
  color:#8A8B8D !important;
  margin-left:1px;
}
.pcard-oldprice .cur, .price-old .cur, .oldprice .cur,
.pcard-price-old .cur, .ck-oldp .cur{ font-size:.88em !important; color:inherit !important; }
.price-big .cur, #price .cur{ font-size:.5em !important; font-weight:600 !important; }

/* стікери на фото — варіант B: світлі тінти */
/* усі варіанти найменувань бейджів, що є на сайті */
.badge.b-hit, .badge.hit, .badge-hit, .b-hit,
.pcard-badge.badge-hit, .badge.top{
  background:#EEF2F7 !important;
  color:#1E3A5F !important;
  border:none !important;
}
.badge.b-new, .badge.new, .badge-new, .b-new,
.pcard-badge.badge-new{
  background:#E6F4F1 !important;
  color:#0F766E !important;
  border:none !important;
}
/* знижка / розпродаж — єдиний промо-колір, лишається червоним */
.badge-disc, .badge.disc, .badge.sale, .badge.b-sale, .b-sale,
.badge-sale, .pcard-badge.badge-sale, .cu-badge{
  background:#DC2626 !important;
  color:#fff !important;
  border:none !important;
}


/* ============================================================
   UNI-KOP v1 — копійки дрібним, як і одиниця валюти
   Точна ціна до копійки (сайт = Odoo = фід Google), але
   домінує гривнева частина: копійки і «грн» удвічі тихіші.
   ============================================================ */
.kop{
  font-style:normal !important;
  font-size:.62em !important;
  font-weight:700 !important;
  color:#8A8B8D !important;
  vertical-align:baseline;
}
.pcard-oldprice .kop, .price-old .kop, .oldprice .kop,
.pcard-price-old .kop, .ck-oldp .kop{ font-size:.82em !important; color:inherit !important; }
.price-big .kop, #price .kop{ font-size:.45em !important; }


/* ============================================================
   UNI-PRICECOLOR v1 — копійки й «грн» тим самим кольором, що й ціна
   Відрізняються тільки кеглем: гривнева частина домінує за розміром,
   а не за контрастом. На акційній ціні все лишається червоним,
   на звичайній — чорним, на старій — сірим.
   ============================================================ */
.kop, .cur{ color:inherit !important; }
.kop{ font-size:.72em !important; font-weight:700 !important; }
.price-big .kop, #price .kop{ font-size:.5em !important; }


/* ============================================================
   UNI-PRICELINE v1 — ціна на одному рівні в усіх картках
   Було: картка зі знижкою мала рядок ціни 36px, без знижки 24px —
   стара ціна штовхала поточну на 16px нижче, і назва їхала слідом.
   У ряду з 4 карток ціни стояли «сходинкою».
   Стало: під блок ціни завжди зарезервована однакова висота, вміст
   притиснутий донизу. Поточна ціна лежить на спільній базовій лінії
   незалежно від того, є знижка чи ні — як у Zakaz і Metro.
   ============================================================ */
.pcard .pcard-priceline, .pcard .priceline{
  min-height:40px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}
.pcard .pcard-priceline .pcard-pricewrap,
.pcard .priceline .pcard-pricewrap{ min-height:0 !important; }
@media(max-width:699px){
  .pcard .pcard-priceline, .pcard .priceline{ min-height:36px !important; }
}


/* ============================================================
   UNI-PRICESTRIKE v1 — дрібний кегль тільки на активній ціні
   Закреслення в CSS малюється окремо для кожного шматка тексту
   й прив'язане до його власного кегля. Коли «619» був 13px,
   а «,00 грн» 9px — лінія йшла через них на різній висоті
   й виглядала рваною.
   Правило: копійки й «грн» дрібніші там, де ціна велика
   й контрастна; у старій ціні — той самий кегль, бо вона
   й так дрібна, сіра й закреслена, приглушувати нема чого.
   ============================================================ */
.pcard-oldprice .kop, .pcard-oldprice .cur,
.price-old .kop,     .price-old .cur,
.oldprice .kop,      .oldprice .cur,
.pcard-price-old .kop, .pcard-price-old .cur,
.ck-oldp .kop,       .ck-oldp .cur,
#price-old .kop,     #price-old .cur{
  font-size:1em !important;
  font-weight:inherit !important;
  color:inherit !important;
}


/* ============================================================
   UNI-NAMECLAMP v1 — назва товару фіксованої висоти
   Ціна вже стояла на спільній лінії, але назва була по вмісту:
   2 рядки = 36px, 3 рядки = 55px. Через це об'єм під назвою
   і низ картки «плавали» на 19px, а картки в ряду виходили
   різної висоти.
   Тепер під назву завжди зарезервовано 3 рядки. Довші назви
   обрізаються з трикрапкою, а не рубаються посередині.
   ============================================================ */
.pcard .pcard-name, .pcard .name{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  height:auto !important;
  min-height:4.05em !important;   /* 3 рядки × 1.35 line-height */
  max-height:4.05em !important;
  line-height:1.35 !important;
}
@media(max-width:699px){
  .pcard .pcard-name, .pcard .name{
    -webkit-line-clamp:3;
    min-height:4.05em !important;
    max-height:4.05em !important;
  }
}


/* ============================================================
   UNI-SEARCH v1 — пошук з підказками, як у Zakaz
   Ввід від 2 символів показує до 6 товарів прямо під полем:
   фото, назва, ціна. Enter або «Показати всі» — на сторінку
   видачі /pages/search.html?q=
   ============================================================ */
.search{ position:relative; }
.sg-drop{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:400;
  background:#fff; border:1px solid #E5E5E5; border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.13); overflow:hidden; display:none;
}
.sg-drop.open{ display:block; }
.sg-item{ display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer; text-decoration:none; color:inherit; }
.sg-item + .sg-item{ border-top:1px solid #F4F4F4; }
.sg-item:hover, .sg-item.sel{ background:#FFF7F0; }
.sg-item img{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.sg-tx{ flex:1; min-width:0; }
.sg-nm{ font-size:13.5px; color:#1A1A1A; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.sg-nm mark{ background:#FFE9D8; color:inherit; border-radius:2px; padding:0 1px; }
.sg-meta{ font-size:11.5px; color:#8A8B8D; margin-top:2px; }
.sg-pr{ font-size:14px; font-weight:800; color:#13131E; white-space:nowrap; }
.sg-pr.sale{ color:#DC2626; }
.sg-all{ display:block; text-align:center; padding:11px; font-size:13.5px; font-weight:700; color:#9A3412; background:#FFF7F0; border-top:1px solid #FDE6D0; text-decoration:none; }
.sg-all:hover{ background:#FFE9D8; }
.sg-none{ padding:16px 14px; font-size:13.5px; color:#8A8B8D; }

/* UNI-TAPSIZE v1 — мінімальні тап-зони 44px на мобільному, візуал не змінюється */
@media(max-width:699px){
  .wish-btn{width:44px !important;height:44px !important;top:1px !important;right:1px !important;display:flex !important;align-items:center;justify-content:center}
  .pcard-add,.addbtn{min-width:44px !important;min-height:44px !important}
  .pb-close{width:44px !important;height:44px !important;display:flex !important;align-items:center;justify-content:center;right:0 !important;margin:0 !important}
  .promobar .wrap{padding-right:46px !important}
  .sec-link,.sec-nav button,.strip-nav button{min-width:44px !important;min-height:44px !important}
  .hero .dots button,.slide-dots button,.dots button{position:relative}
  .hero .dots button::after,.slide-dots button::after,.dots button::after{content:'';position:absolute;left:-6px;right:-6px;top:-20px;bottom:-20px}
  .bc a,.breadcrumbs a{padding:6px 0;display:inline-block}
}

/* UNI-HIDEFIX v1 — .pcard{display:flex!important} перебивав inline display:none від JS,
   тому фільтри, пошук по чіпах і пагінація не ховали картки. Повертаємо пріоритет інлайну. */
.pcard[style*="display: none"],.pcard[style*="display:none"],
.pcard[hidden]{display:none !important}

/* UNI-GRIDEDGE v1 — рамка сітки має обводити тільки картки, а не порожні
   комірки останнього ряду. Раніше контейнер мав власну рамку + радіус + overflow:hidden,
   тому при неповному ряді малювався великий порожній прямокутник. Модель zakaz.ua:
   контейнер дає лише верхню й ліву лінію, кожна картка — праву й нижню. */
.pgrid, .plist, #wlGrid{
  border:0 !important; border-radius:0 !important; overflow:visible !important;
  border-top:1px solid #E9E9E9 !important;
  border-left:1px solid #E9E9E9 !important;
  background:transparent !important;
}
.pgrid > .pcard, .plist > .pcard, #wlGrid > .pcard{
  border:0 !important;
  border-right:1px solid #E9E9E9 !important;
  border-bottom:1px solid #E9E9E9 !important;
  border-radius:0 !important; box-shadow:none !important; background:#fff !important;
}
/* колишні правила знімали праву межу в останній колонці — тепер вона потрібна як край сітки */
@media(min-width:1080px){
  .pgrid > .pcard:nth-child(4n), .plist > .pcard:nth-child(4n),
  #wlGrid > .pcard:nth-child(5n){border-right:1px solid #E9E9E9 !important}
}
@media(min-width:700px) and (max-width:1079px){
  .pgrid > .pcard:nth-child(3n), .plist > .pcard:nth-child(3n),
  #wlGrid > .pcard:nth-child(3n){border-right:1px solid #E9E9E9 !important}
}
@media(max-width:699px){
  .pgrid > .pcard:nth-child(2n), .plist > .pcard:nth-child(2n),
  #wlGrid > .pcard:nth-child(2n){border-right:1px solid #E9E9E9 !important}
}

/* UNI-CHECKBOX v1 — нативний accent-color давав помаранчеву заливку з темною
   галочкою: браузер сам підбирає колір галочки під контраст, а #F97316 для нього «світлий».
   Малюємо чекбокс самі — темно-помаранчева заливка + біла галочка. Модель rozetka/zakaz. */
.sf-opt input[type="checkbox"],
.fp-opt input[type="checkbox"],
.sidebar input[type="checkbox"],
.fsheet input[type="checkbox"],
.filters-sheet input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; flex:0 0 18px;
  margin:0; padding:0; position:relative; cursor:pointer;
  border:1.5px solid #CFCFCF; border-radius:5px; background:#fff;
  transition:background-color .15s, border-color .15s;
}
.sf-opt input[type="checkbox"]:hover,
.fp-opt input[type="checkbox"]:hover,
.sidebar input[type="checkbox"]:hover{ border-color:#FDBA74; }

.sf-opt input[type="checkbox"]:checked,
.fp-opt input[type="checkbox"]:checked,
.sidebar input[type="checkbox"]:checked,
.fsheet input[type="checkbox"]:checked,
.filters-sheet input[type="checkbox"]:checked{
  background:#EA6A0A; border-color:#EA6A0A;
}
/* біла галочка */
.sf-opt input[type="checkbox"]:checked::after,
.fp-opt input[type="checkbox"]:checked::after,
.sidebar input[type="checkbox"]:checked::after,
.fsheet input[type="checkbox"]:checked::after,
.filters-sheet input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1.5px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.sf-opt input[type="checkbox"]:focus-visible,
.sidebar input[type="checkbox"]:focus-visible{
  outline:2px solid #FDBA74; outline-offset:2px;
}
/* тап-зона на мобільному лишається 44px, сам квадрат — 18px */
@media(max-width:699px){
  .sf-opt input[type="checkbox"],
  .sidebar input[type="checkbox"]{ width:20px; height:20px; flex:0 0 20px; }
  .sf-opt input[type="checkbox"]:checked::after,
  .sidebar input[type="checkbox"]:checked::after{ left:6px; top:2px; }
}