/* ТЗ-51 (08.11.2026, макет власника на живій головній, механіка comfy.ua): верх головної без лівого меню категорій.
   .hb — сітка [карусель банерів | 270px «Товар тижня»], gap 14px (без дилу — одна колонка).
   Карусель (≥961, ТЗ-51e fix — власне «кільце» без Swiper): n центральних (4; ≥1440 — 5) + по 2 сусіди-сходинки з кожного боку (88 %/56px/.55 і 76 %/40px/.3),
   позиції ставить JS (render) на всі події; стрілки 44px, автопрокрутка 3 с, drag зі snap. Моб (≤960): нативний scroll-snap, 1 слайд 80% + край наступного, автопрокрутка 3 с.
   «Товар тижня» (.hb-deal): золота рамка 6px, таймер дн/год/хв/сек (секунди червоні), фото, назва, ★ і 💬, стара ціна + бейдж −%, ціна, квадратна
   кнопка кошика r=10; кілька дилів — ‹ ● ○ ○ ›. Смуга кошика (.hb-cart) ПІД банерами: пілюля, «В кошику N / На суму X грн», фото+назва першого
   товару, рядок драбини, велика кнопка «Оформити замовлення». Підключається лише на головній (layouts/app, роут main). Усі тексти ≥ 4.5:1 на білому. */
.hb{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;align-items:stretch;margin-top:2px}
.hb.hb--nodeal{grid-template-columns:minmax(0,1fr)}
.hb-car{position:relative;min-width:0;display:flex;flex-direction:column}
.hb-stage{position:relative;padding:0 100px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* по 2 сусіди-сходинки з кожного боку (56 + 40px) */
.hb-sw{overflow:visible}
/* до ініту (деск): n слайдів у ряд з реальним аспектом файлів — нуль зсуву в момент ініту */
.hb-sw:not(.is-ready) .hb-ring{display:flex;gap:14px}
.hb-sw:not(.is-ready) .hb-slide{flex:0 0 calc((100% - 42px) / 4);width:calc((100% - 42px) / 4);display:block}
.hb-sw:not(.is-ready) .hb-slide:nth-child(n+5){display:none}
@media (min-width:1440px){.hb-sw:not(.is-ready) .hb-slide{flex-basis:calc((100% - 56px) / 5);width:calc((100% - 56px) / 5)}.hb-sw:not(.is-ready) .hb-slide:nth-child(5){display:block}.hb-sw:not(.is-ready) .hb-slide:nth-child(n+6){display:none}}
/* після ініту: «кільце» — усі слайди absolute, позиції/масштаб/прозорість ставить JS (render) */
.hb-sw.is-ready .hb-ring{position:relative;overflow:visible}
.hb-sw.is-ready .hb-slide{position:absolute;left:0;top:0;width:var(--w,25%);margin:0;display:block;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
.hb-ring .hb-slide{transition:none}   /* ТЗ-51j: рух — JS-твін (450 мс ease-out) у render(), без CSS-transition */
.hb-slide{display:block;border-radius:14px;overflow:hidden;background:#f4f4f2;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.hb-slide img{display:block;width:100%;height:auto;aspect-ratio:941 / 1672;object-fit:cover;border-radius:14px;pointer-events:none}
.hb-arr{position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:#fff;color:#1c1c1c;box-shadow:0 4px 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.hb-arr:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.24)}
.hb-arr svg{width:12px;height:18px;display:block}
.hb-arr--prev{left:22px}
.hb-arr--next{right:22px}   /* поверх сходинок */
/* ТЗ-51b: смужки прогресу під слайдами нема (як у comfy) */
/* ── «Товар тижня» (ТЗ-51c): висоту ряду задає банер — комірка .hb-dealcol, картка absolute усередині; вміст на компонентах картки товару ── */
.hb-dealcol{position:relative;min-width:0;min-height:0}
.hb-deal{position:absolute;inset:0;box-sizing:border-box;min-width:0;border:6px solid #C9A24B;border-radius:18px;background:#fff;padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.hb-deal-h{flex:0 0 auto;font-family:"MazzardM Bold",system-ui,sans-serif;font-size:17px;font-weight:800;line-height:1.1;color:#111}
.hb-deal-item{display:none;flex:1 1 auto;flex-direction:column;gap:6px;min-height:0}
.hb-deal-item.is-on{display:flex}
.hb-deal-timer{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hb-deal-tc{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;border-radius:9px;background:#f4f4f2;box-sizing:border-box}
.hb-deal-tc b,main.pm .hb-deal-tc b{font-family:"Manrope","MazzardM Bold",system-ui,sans-serif;font-weight:800;font-size:18px;line-height:1;color:#111!important;font-variant-numeric:lining-nums tabular-nums}
.hb-deal-tc i{font-style:normal;font-size:9px;line-height:1;color:#5F5F5A;margin-top:3px;text-transform:lowercase}
.hb-deal-tc.is-sec b,main.pm .hb-deal-tc.is-sec b{color:#C62828!important}
.hb-deal-img{flex:1 1 auto;min-height:0;display:block;text-decoration:none;overflow:hidden}   /* ТЗ-51d: фото — весь вільний простір, без max-height */
.hb-deal-img img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block}
.hb-deal-bottom{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;gap:6px;min-width:0}   /* ТЗ-51d: низ притиснутий до рамки */
.hb-deal-name{flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:"MazzardM SemiBold",system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1.2;color:#1a1a1a;text-decoration:none;overflow-wrap:normal;word-break:normal;hyphens:none}
.hb-deal-name:hover{color:#8A6D2B}
.hb-deal-name:visited,.hb-deal-name:focus{color:#1a1a1a;font-weight:700}   /* main.css: a:visited{color:inherit;font-weight:normal} */
/* рейтинг і низ — ті самі класи й розміри, що в .pcard (custom.css), продубльовані під .hb-deal */
.hb-deal .pc-rate{flex:0 0 auto;height:20px;display:flex;align-items:center;gap:6px}
.hb-deal .pc-stars{position:relative;display:inline-block;font-size:16px;line-height:1;white-space:nowrap;letter-spacing:1px}
.hb-deal .pc-stars-base{color:#e0e0dd}
.hb-deal .pc-stars-fill{position:absolute;top:0;left:0;color:#F5B82E;overflow:hidden}
.hb-deal .pc-rate-count{font-size:12px;color:#2B679F;line-height:1}   /* у картках #3a86c8 (3.5:1) — тут темніший, ≥4.5 */
.hb-deal .pc-old{display:flex;align-items:center;gap:7px;height:16px;margin-bottom:1px;line-height:1.1;font-size:12px;color:#5F5F5A}
.hb-deal .pc-old s{text-decoration:line-through;text-decoration-color:#e24b4a;white-space:nowrap}
.hb-deal .pc-old sup{font-size:.72em}
.hb-deal .pc-disc{display:inline-block;flex:none;background:#C62828;color:#fff;font-size:11px;font-weight:800;line-height:1;padding:3px 7px;border-radius:6px;white-space:nowrap}
.hb-deal-buy{display:flex;align-items:center;gap:8px}   /* ТЗ-51d: [ціна 24/800 | кнопка] по центру по вертикалі */
.hb-deal-pricebox{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
.hb-deal .pc-price{flex:0 0 auto;font-family:"MazzardM Bold",system-ui,sans-serif;font-size:24px;font-weight:800;line-height:1;color:#111;white-space:nowrap}
.hb-deal-inl{display:none;align-items:center;gap:6px;font-size:12px;line-height:1.1;color:#5F5F5A;white-space:nowrap}   /* компактний режим <1400: «· 765 · −15%» поруч із ціною */
.hb-deal-inl s{text-decoration:line-through;text-decoration-color:#e24b4a}
/* компактний режим 961–1399px (доповнення власника): фото ≥130px на 1280 */
@media (min-width:961px) and (max-width:1399px){
  .hb-deal-h{font-size:15px}
  .hb-deal-tc{height:32px}
  .hb-deal-tc b,main.pm .hb-deal-tc b{font-size:16px}
  .hb-deal-tc i{display:none}
  .hb-deal-name{display:block;-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}
  .hb-deal .pc-old{display:none}
  .hb-deal-inl{display:inline-flex}
  .hb-deal .pc-rate{height:16px}
  .hb-deal-nav{flex-basis:24px;height:24px}   /* з навігацією + рейтингом на 1280 фото лишається ≥130px */
}
.hb-deal .pc-price.is-sale{color:#C62828}   /* у картках #e24b4a (3.5:1) */
.hb-deal .pc-price sup{font-size:11px;font-weight:700}
.hb-deal .pc-cart{flex:none;width:46px;height:46px;border:0;border-radius:11px;background:#000;box-shadow:0 3px 10px rgba(0,0,0,.28);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.hb-deal .pc-cart.loading{opacity:.6;pointer-events:none}
.hb-deal .pc-cart-ic{width:28px;height:28px;display:block}
.hb-deal-nav{flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;gap:6px;margin:0}
.hb-deal-nav button{border:0;background:transparent;cursor:pointer;padding:4px;color:#1a1a1a;font-size:18px;line-height:1}
.hb-deal-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid #1a1a1a;background:transparent;padding:0!important}
.hb-deal-dot.is-on{background:#1a1a1a}
/* ── смуга кошика під банерами (ТЗ-51c): деск — «В кошику N» 16/800 #111, «На суму» 14 + сума 17/800 #111, без рядка драбини; моб — не показуємо ── */
.hb-cart{display:flex;align-items:center;gap:16px;margin-top:14px;padding:10px 12px 10px 20px;border:1.5px solid #1c1c1c;border-radius:999px;background:#fff;min-width:0}
.hb-cart-sum{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.2;gap:2px}
.hb-cart-sum>b{font-family:"MazzardM Bold",system-ui,sans-serif;font-size:16px;font-weight:800;color:#111;white-space:nowrap}
.hb-cart-sum>span{font-size:14px;color:#111;white-space:nowrap}
.hb-cart-sum>span b{font-family:"MazzardM Bold",system-ui,sans-serif;font-size:17px;font-weight:800;color:#111}
.hb-cart-item,.hb-cart-thumbs{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;font:inherit;color:#1a1a1a}
.hb-cart-item{flex:1 1 auto}
.hb-cart-thumbs{flex:0 0 auto}
.hb-cart-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:8px;background:#F4F4F2;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hb-cart-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.hb-cart-more{flex:0 0 46px;width:46px;height:46px;border-radius:8px;background:#EDEDED;color:#555;font-family:"MazzardM Bold",system-ui,sans-serif;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.hb-cart-more--m{display:none}
.hb-cart-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.hb-cart-name{font-size:13.5px;line-height:1.25;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:520px}
.hb-cart-name em{font-style:normal;color:#5F5F5A}
.hb-cart--many .hb-cart-btn{margin-left:auto}
.hb-cart-btn,.hb-cart-btn:link,.hb-cart-btn:visited,.hb-cart-btn:focus,.hb-cart-btn:hover,.hb-cart-btn:active{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:999px;background:#1c1c1c;color:#fff;font-family:"MazzardM Bold",system-ui,sans-serif;font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .15s}   /* main.css: a:visited,a:focus{color:inherit;font-weight:normal} */
.hb-cart-btn:hover{background:#000;color:#fff}
/* кнопка «Каталог товарів» на мобі лишається під блоком (як було); на деску її нема */
.hb-mcat{margin-top:12px}
@media (max-width:960px){
  .hb{display:flex;flex-direction:column;gap:12px;margin-top:0}   /* моб-брейкпоінт сітки 960 (2md); картка дилу під каруселлю */
  .hb-car{margin-right:-15px}   /* край наступного слайда до правого краю екрана (як було у .prs) */
  .hb-stage{padding:0;overflow:visible}
  .hb-sw{overflow:visible}
  .hb-sw .hb-ring{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:15px;scroll-padding-left:0;height:auto!important}
  .hb-sw .hb-ring::-webkit-scrollbar{display:none}
  .hb-sw .hb-slide,.hb-sw:not(.is-ready) .hb-slide{position:static!important;flex:0 0 80%!important;width:80%!important;margin-right:0;scroll-snap-align:start;opacity:1!important;transform:none!important;visibility:visible!important;display:block!important;box-shadow:none}   /* ТЗ-52-перевірка 08.11: перебиває деск-fallback (flex-basis 25 % + nth-child(n+5) none) — інакше на мобі 4 плитки по 20vw */
  .hb-sw .hb-slide[aria-hidden="true"]{display:none!important}   /* моб: без повторів і без «лівого сусіда» — нативний скрол */
  .hb-arr{display:none}
  .hb-dealcol{position:static}
  .hb-deal{position:static;width:100%;height:auto;padding:12px 14px 14px}   /* моб: під каруселлю, висота за вмістом */
  .hb-deal-img{flex:0 0 auto;height:220px;min-height:0}   /* моб: висота картки за вмістом → фото фіксовані 220px */
  .hb-cart{display:none!important}   /* ТЗ-51c: смугу кошика на мобі не показуємо */
}