/* ====== Темна тема STH (Yabko-inspired) ======
   Підключається тільки на клієнтській стороні (вмикається у views/partials/head.ejs).
   Адмінка лишається у звичній світлій темі. */

body.dark {
  --bg:        #0a0a0a;
  --surface:   #141414;
  --surface-2: #1c1c1c;
  --text:      #f1f3f7;
  --text-2:    #a3a8b3;
  --muted:     #6e7280;
  --border:    #2a2a2a;
  --primary:       #8b5cf6;        /* фіолетовий акцент CTA */
  --primary-dark:  #7c3aed;
  --primary-light: rgba(139,92,246,.18);
  --accent:        #00bfa5;        /* бірюзовий */
  --success:       #2ecc71;
  --warning:       #f5c518;
  --danger:        #ef4444;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.6);
}
body.dark { background:var(--bg); color:var(--text) }
body.dark a { color:#cdb6ff }
body.dark a:hover { color:#fff }

body.dark .topbar { background:#000; color:#cfd2da }
body.dark .topbar a { color:#cfd2da }

body.dark .header { background:#000; border-bottom:1px solid #1a1a1a }
body.dark .logo { color:#fff }
body.dark .logo-mark { background:linear-gradient(135deg,#8b5cf6,#3b82f6); box-shadow:0 6px 18px rgba(139,92,246,.5) }
body.dark .logo small { color:#a3a8b3 }

body.dark .search-form { background:#1a1a1a; border-color:#2a2a2a; border-radius:24px; padding:4px 6px 4px 18px }
body.dark .search-form:focus-within { background:#1a1a1a; border-color:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.18) }
body.dark .search-form input { color:#fff; font-size:14px }
body.dark .search-form input::placeholder { color:#6e7280 }
body.dark .search-form button { background:#fff; color:#000; border-radius:18px; font-weight:700 }
body.dark .search-form button:hover { background:#cfd2da }

/* CTA-кнопки в шапці (Trade-IN/Ремонт/Кабінет) — кольорові «таблетки» */
body.dark .icon-btn { background:#1a1a1a; color:#fff; border-radius:24px; padding:10px 18px; font-weight:600 }
body.dark .icon-btn:hover { background:#2a2a2a; color:#fff }
body.dark .icon-btn.cta-teal   { background:#00bfa5; color:#0a0a0a }
body.dark .icon-btn.cta-purple { background:#8b5cf6; color:#fff }
body.dark .icon-btn.cta-blue   { background:#3b82f6; color:#fff }
body.dark .icon-btn .badge { background:#fff; color:#000 }

body.dark .nav { background:#000; border-bottom:1px solid #1a1a1a }
body.dark .nav a { color:#cfd2da }
body.dark .nav a:hover, body.dark .nav a.active { background:rgba(139,92,246,.15); color:#fff }

/* Карточки товару */
body.dark .card { background:var(--surface); border:1px solid var(--border); color:var(--text) }
body.dark .product-card { background:var(--surface); border:1px solid var(--border); border-radius:18px }
body.dark .product-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.6) }
body.dark .product-card .name, body.dark .product-card h3 { color:#fff }
body.dark .product-card .price { color:#fff }

/* Бейджі */
body.dark .badge { background:#2a2a2a; color:#fff }
body.dark .badge-success { background:rgba(46,204,113,.18); color:#2ecc71 }
body.dark .badge-warning { background:rgba(245,197,24,.18); color:#f5c518 }
body.dark .badge-danger  { background:rgba(239,68,68,.2); color:#fca5a5 }

/* Hero — темні картки з закругленнями */
body.dark .hero { background:linear-gradient(135deg,#1a1a1a 0%,#141414 100%); border:1px solid #2a2a2a }
body.dark .hero h1 { color:#fff }
body.dark .hero h1 span { background:linear-gradient(90deg,#8b5cf6,#00bfa5); -webkit-background-clip:text; -webkit-text-fill-color:transparent }

/* Ліва панель категорій (Yabko-style) */
body.dark .shop-grid > .shop-aside { background:#141414; border-color:#2a2a2a; padding:8px }
body.dark .shop-grid > .shop-aside h4 { color:#a3a8b3; padding:6px 10px }
body.dark .shop-grid > .shop-aside ul a { color:#fff; padding:10px 12px; border-radius:10px }
body.dark .shop-grid > .shop-aside ul a:hover { background:#1c1c1c }
body.dark .shop-grid > .shop-aside ul a.active { background:rgba(139,92,246,.18); color:#fff }
body.dark .shop-grid > .shop-aside ul .cnt { background:#000; color:#a3a8b3 }

/* Forms / inputs */
body.dark input, body.dark textarea, body.dark select {
  background:#1a1a1a; color:#fff; border:1px solid #2a2a2a; border-radius:8px; padding:10px 12px;
}
body.dark input::placeholder { color:#6e7280 }
body.dark .btn-primary { background:#8b5cf6; border-color:#8b5cf6 }
body.dark .btn-primary:hover { background:#7c3aed }
body.dark .btn-ghost { background:#1a1a1a; color:#fff; border:1px solid #2a2a2a }
body.dark .btn-ghost:hover { background:#2a2a2a }

/* Footer */
body.dark .footer { background:#000; color:#a3a8b3; border-top:1px solid #1a1a1a }
body.dark .footer h4 { color:#fff }
body.dark .footer a { color:#cfd2da }

/* Прапорець-перемикач теми */
.theme-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
                background:#1a1a1a; padding:6px 10px; border-radius:14px; color:#cfd2da; font-size:12px }
body:not(.dark) .theme-toggle { background:#f1f5fb; color:#1a2233 }

/* Категорії під шапкою (швидкий доступ) */
.cat-strip { display:flex; gap:10px; overflow-x:auto; padding:14px 0; margin-bottom:14px; scrollbar-width:none }
.cat-strip::-webkit-scrollbar { display:none }
.cat-strip a { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px;
               padding:10px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--border);
               color:var(--text); text-decoration:none; font-size:13px; min-width:90px; transition: all .2s }
.cat-strip a:hover { transform:translateY(-2px); border-color:var(--primary) }
.cat-strip a .ico { font-size:26px }
body.dark .cat-strip a { background:#1a1a1a; border-color:#2a2a2a; color:#fff }

/* ====== БАНЕР НОВИНКИ + ХІТИ (slider) ====== */
.hero-banner {
  position:relative;
  background:linear-gradient(135deg,#1a0f2e 0%,#0f1a2e 100%);
  border-radius:20px;
  overflow:hidden;
  min-height:340px;
  margin: 20px 0 28px;
  border:1px solid #2a2a2a;
}
body:not(.dark) .hero-banner {
  background:linear-gradient(135deg,#fff4ee 0%,#fff7f0 50%,#f0f7ff 100%);
  border-color:#e6ebf2;
}

.hb-slides { position:relative; height:100%; min-height:340px }
.hb-slide {
  display:none;
  grid-template-columns: 1fr 1.2fr;
  gap:30px;
  align-items:center;
  padding:36px 40px;
  min-height:340px;
  animation: hbFade .6s ease;
}
.hb-slide.active { display:grid }

.hb-slide-new  { background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(0,191,165,.05)) }
.hb-slide-hits { background:linear-gradient(135deg,rgba(245,197,24,.12),rgba(239,68,68,.08)) }

.hb-content { color:#fff }
body:not(.dark) .hb-content { color:#1a2233 }
.hb-badge {
  display:inline-block; padding:6px 14px; border-radius:20px;
  background:rgba(255,255,255,.15); color:#fff; font-size:13px; font-weight:600;
  margin-bottom:14px; backdrop-filter:blur(8px);
}
body:not(.dark) .hb-badge { background:rgba(0,0,0,.08); color:#1a2233 }
.hb-title { font-size:36px; font-weight:800; line-height:1.1; margin:0 0 12px }
.hb-desc { font-size:15px; color:#cfd2da; margin:0 0 22px; max-width:380px }
body:not(.dark) .hb-desc { color:#5b6478 }
.hb-cta {
  display:inline-block; padding:12px 28px; border-radius:14px;
  background:#fff; color:#0a0a0a; font-weight:700; text-decoration:none;
  transition:transform .2s;
}
.hb-cta:hover { transform:translateX(4px) }

.hb-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.hb-thumb {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:12px; text-decoration:none; color:inherit;
  transition:all .25s;
}
body:not(.dark) .hb-thumb { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.06) }
.hb-thumb:hover { transform:translateY(-3px); background:rgba(255,255,255,.12) }
.hb-thumb img { width:100%; height:90px; object-fit:contain; background:rgba(255,255,255,.05); border-radius:10px; padding:8px }
.hb-thumb-emoji { font-size:60px; text-align:center; padding:10px; background:rgba(255,255,255,.05); border-radius:10px; min-height:90px; display:grid; place-items:center }
.hb-thumb-info { margin-top:8px }
.hb-thumb-name { font-size:13px; font-weight:600; line-height:1.3; max-height:34px; overflow:hidden; color:#fff }
body:not(.dark) .hb-thumb-name { color:#1a2233 }
.hb-thumb-price { font-size:15px; font-weight:800; color:#00bfa5; margin-top:4px }

.hb-dots {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.hb-dot {
  width:8px; height:8px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background .2s, width .2s;
}
.hb-dot.active { background:#fff; width:24px; border-radius:6px }

.hb-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(255,255,255,.15); color:#fff; font-size:24px; cursor:pointer;
  z-index:5; transition:background .2s; backdrop-filter:blur(10px);
}
.hb-arrow:hover { background:rgba(255,255,255,.3) }
.hb-prev { left:14px }
.hb-next { right:14px }
body:not(.dark) .hb-arrow { background:rgba(0,0,0,.08); color:#1a2233 }
body:not(.dark) .hb-arrow:hover { background:rgba(0,0,0,.15) }

@keyframes hbFade { from { opacity:0 } to { opacity:1 } }

@media (max-width:760px) {
  .hb-slide { grid-template-columns:1fr; padding:24px 20px; gap:18px; min-height:auto }
  .hb-title { font-size:24px }
  .hb-desc { font-size:14px }
  .hb-thumbs { grid-template-columns:repeat(3, 1fr); gap:8px }
  .hb-thumb { padding:8px }
  .hb-thumb img, .hb-thumb-emoji { height:70px; min-height:70px; font-size:40px }
  .hb-thumb-name { font-size:11px; max-height:28px }
  .hb-thumb-price { font-size:13px }
  .hb-arrow { width:34px; height:34px; font-size:20px }
}

/* ====================================================================
   ВІДЗИВЧИВІСТЬ — без горизонтальної прокрутки на будь-якому пристрої
   ==================================================================== */

/* Базові правила, які допомагають всім сторінкам не лізти за межі */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width:100%; height:auto }
table { max-width:100%; }
.container { padding-left:16px; padding-right:16px; }

/* Будь-яка таблиця в адмінці стає скролабельною всередині свого блоку */
.card { overflow:hidden; }
.card .data, .card > table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
/* Зменшити cellpadding на дрібних екранах */
@media (max-width:760px) {
  table.data th, table.data td { padding:8px 6px; font-size:12px }
}

/* ====== АДМІН — згортний сайдбар з гамбургером ====== */
.admin-burger {
  display:none;
  position:fixed; top:14px; left:14px; z-index:200;
  width:42px; height:42px; border:0; border-radius:10px;
  background:#1a2233; color:#fff; font-size:22px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.admin-burger:active { transform:scale(.96) }
.admin-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99;
}
@media (max-width:1024px) {
  .admin-burger { display:block }
  .admin-layout { grid-template-columns: 1fr !important }
  .admin-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:280px; max-width:85vw;
    height:100vh !important; z-index:150;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  body.admin-menu-open .admin-sidebar { transform: translateX(0) }
  body.admin-menu-open .admin-overlay  { display:block }
  .admin-content { padding: 70px 16px 24px !important; }
}

/* ====== ШАПКА — компактна на мобільному ====== */
@media (max-width:900px) {
  .header-inner {
    grid-template-columns: 1fr !important;
    gap:10px !important;
    padding:12px 0 !important;
  }
  .logo { justify-content:flex-start }
  .logo-text small { display:none }
  .search-form { width:100%; grid-column: 1 / -1 !important; order: 3 }
  .header-actions { order: 2; flex-wrap:wrap; gap:6px; justify-content:flex-end }
  .header-actions .icon-btn { padding:8px 12px; font-size:13px }
  .topbar > .container > div:first-child { display:none } /* приховуємо рекламний рядок */
  .topbar-right { gap:8px; font-size:12px }
}
@media (max-width:520px) {
  .header-actions .icon-btn .hide-mobile { display:none }
  .header-actions .icon-btn { padding:8px 10px }
}

/* ====== КЛІЄНТСЬКА СІТКА — повна ширина без бічних відступів на мобільному ====== */
@media (max-width:900px) {
  .shop-grid { grid-template-columns: 1fr; gap:14px; margin-top:14px }
  .shop-grid > .shop-aside {
    position:relative; top:0;
    max-height: 0; overflow:hidden; padding:0;
    transition: max-height .3s ease, padding .3s ease;
    border-width:0;
  }
  /* Кнопка-перемикач каталогу на мобільному */
  .mobile-cat-toggle {
    display:flex !important; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px; margin-bottom:6px;
    background:#1a1a1a; color:#fff; border:1px solid #2a2a2a; border-radius:12px;
    font-weight:700; cursor:pointer;
  }
  body:not(.dark) .mobile-cat-toggle { background:#fff; color:#1a2233; border-color:#e6ebf2 }
  body.cat-open .shop-grid > .shop-aside {
    max-height: 70vh; padding:8px; border-width:1px; overflow:auto;
  }
}
.mobile-cat-toggle { display:none }   /* приховано на десктопі */

/* ====== ПРОДУКТОВА СІТКА ====== */
.product-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px }
@media (max-width:760px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap:10px }
}
@media (max-width:380px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ====== КАРТКИ КАТЕГОРІЙ ====== */
.cat-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px }
@media (max-width:760px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap:10px }
}

/* ====== ФОРМИ — двоколонкові стають одноколонковими ====== */
@media (max-width:760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap:8px !important }
  .form-row label { font-size:13px }
  .cart-grid { grid-template-columns: 1fr; gap:14px }
}

/* ====== BANER — менші відступи на мобілі (додатково до вже існуючого) ====== */
@media (max-width:480px) {
  .hero-banner { min-height: auto; border-radius:14px; margin:14px -16px; }
  .hb-slide { padding:18px 16px }
  .hb-arrow { display:none } /* лише крапки навігації */
}

/* ====== TABS у складі — горизонтально-скрол на маленьких екранах ====== */
.stock-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.stock-tabs::-webkit-scrollbar { display:none }
.stock-tabs a { flex-shrink:0 }

/* ====== Tabs у замовленнях — те саме ====== */
.tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.tabs::-webkit-scrollbar { display:none }
.tabs a { flex-shrink:0 }

/* ====== FOOTER — мобільно ====== */
@media (max-width:600px) {
  .footer-grid { grid-template-columns: 1fr; gap:24px; text-align:left }
  .footer { padding: 28px 0 14px }
}

/* ====== Універсальне: будь-яке слово, що повзе ====== */
h1, h2, h3 { overflow-wrap:break-word; word-wrap:break-word }
.shop-aside ul a { white-space:normal }

/* ====================================================================
   v5.2: Виправлення — контейнер на повну ширину + стрілки слайдера в кут
   ==================================================================== */

/* Розтягуємо контент на майже повну ширину — без бічних «полів» */
.container { max-width: 1640px !important; padding-left:20px !important; padding-right:20px !important; }
@media (min-width: 1700px) { .container { max-width: 95vw !important } }
@media (max-width: 760px)  { .container { padding-left:12px !important; padding-right:12px !important } }

/* ====== Стрілки слайдера — у правий верхній кут банера, разом ====== */
.hb-arrow {
  position: absolute !important;
  top: 18px !important;
  bottom: auto !important;
  transform: none !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  background: rgba(255,255,255,.12) !important;
  display:flex; align-items:center; justify-content:center;
}
.hb-prev { right: 64px !important; left: auto !important; }
.hb-next { right: 18px !important; left: auto !important; }
.hb-arrow:hover { background: rgba(255,255,255,.25) !important }
body:not(.dark) .hb-arrow { background:rgba(0,0,0,.06) !important; color:#1a2233 }
body:not(.dark) .hb-arrow:hover { background:rgba(0,0,0,.15) !important }

/* Точки залишаємо знизу по центру (як було) */

@media (max-width:480px) {
  .hb-arrow { top:10px !important; width:30px !important; height:30px !important; font-size:16px !important }
  .hb-prev { right: 48px !important }
  .hb-next { right: 10px !important }
}

/* ====================================================================
   v5.4.3 — НОРМАЛЬНА МОБІЛЬНА ШАПКА
   ==================================================================== */

/* Десктоп: лого + пошук + actions в одному рядку */
.header .container { padding-top:14px; padding-bottom:14px }
.header-row-1 {
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:20px;
  margin-bottom:10px;
}
.header-row-1 .logo { display:flex; align-items:center; gap:10px }
.header .search-form { width:100%; max-width:none }
.mobile-menu-btn {
  display:none;
  background:transparent; border:1px solid var(--border); color:var(--text);
  width:42px; height:42px; border-radius:10px; font-size:20px; cursor:pointer;
}
.mobile-menu-btn:active { transform:scale(.95) }
body.dark .mobile-menu-btn { background:#1a1a1a; border-color:#2a2a2a; color:#fff }

/* На десктопі бургер прихований, пошук — в одному рядку з логотипом */
@media (min-width: 901px) {
  .header .container { display:flex; align-items:center; gap:20px; padding-top:14px; padding-bottom:14px }
  .header-row-1 {
    display:contents;
  }
  .header .search-form { flex:1; margin:0 }
}

/* ====== МОБІЛЬНА ШАПКА (≤900px) ====== */
@media (max-width: 900px) {
  /* Topbar з рекламним рядком приховуємо */
  .topbar { display:none !important }

  .header { padding: 0 !important; }
  .header .container { padding: 10px 12px !important; display:block !important; }

  .header-row-1 {
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }
  .mobile-menu-btn { display:flex !important; align-items:center; justify-content:center }

  .logo { gap:8px !important }
  .logo-mark img { width:30px !important; height:30px !important }
  .logo-text { font-size:18px !important }
  .logo-text small { display:none !important }

  .header-actions { display:flex; gap:6px; align-items:center; flex-wrap:nowrap }
  .header-actions .icon-btn {
    padding:8px 10px !important; font-size:18px;
    border-radius:10px !important; min-width:38px; min-height:38px;
    display:flex; align-items:center; justify-content:center;
  }
  .header-actions .icon-btn .badge { font-size:10px; min-width:18px; height:18px }

  /* Пошук — окремий рядок під логотипом */
  .header .search-form {
    width:100% !important; margin:0 !important;
    border-radius:12px !important; padding:4px 6px 4px 14px !important;
  }
  .header .search-form input { font-size:14px !important; padding:9px 0 !important }
  .header .search-form button { padding:8px 14px !important; font-size:13px !important; border-radius:10px !important }
}

/* ====== МОБІЛЬНЕ DRAWER-МЕНЮ ====== */
.m-menu {
  position:fixed; top:0; left:0; bottom:0;
  width:300px; max-width:85vw;
  background:#0a0a0a; color:#fff;
  z-index:600; padding:0;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y:auto;
  border-right:1px solid #2a2a2a;
}
body:not(.dark) .m-menu { background:#fff; color:#1a2233; border-right-color:#e6ebf2 }

body.m-menu-open .m-menu { transform: translateX(0) }
.m-menu-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:599;
}
body.m-menu-open .m-menu-overlay { display:block }

.m-menu-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid #2a2a2a;
}
body:not(.dark) .m-menu-head { border-bottom-color:#e6ebf2 }
.m-menu-close {
  background:transparent; border:0; color:inherit; font-size:24px; cursor:pointer;
  padding:4px 8px; border-radius:8px;
}
.m-menu-close:hover { background:rgba(255,255,255,.1) }
body:not(.dark) .m-menu-close:hover { background:rgba(0,0,0,.06) }

.m-menu-nav, .m-menu-cats { display:flex; flex-direction:column; padding:6px 0 }
.m-menu-nav a, .m-menu-cats a {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; color:inherit; text-decoration:none; font-size:15px;
  border-left:3px solid transparent; transition: all .15s;
}
.m-menu-nav a:hover, .m-menu-cats a:hover {
  background:rgba(139,92,246,.15); border-left-color:#8b5cf6;
}
body:not(.dark) .m-menu-nav a:hover, body:not(.dark) .m-menu-cats a:hover {
  background:#f1f5fb; border-left-color:#ff6b35;
}

.m-menu-divider {
  font-size:11px; color:#a3a8b3; text-transform:uppercase; letter-spacing:1px;
  padding:14px 18px 6px; border-top:1px solid #2a2a2a; margin-top:8px;
}
body:not(.dark) .m-menu-divider { border-top-color:#e6ebf2; color:#5b6478 }

.m-menu-foot { padding:14px 18px; border-top:1px solid #2a2a2a; margin-top:10px }
body:not(.dark) .m-menu-foot { border-top-color:#e6ebf2 }

/* Прибираємо стрілки слайдера зовсім на дуже малих екранах */
@media (max-width: 480px) {
  .hb-arrow { display:none !important }
  .hb-slide { padding: 16px 14px !important; min-height:auto !important }
  .hb-title { font-size: 20px !important; margin-bottom:8px !important }
  .hb-desc { font-size: 13px !important; margin-bottom:14px !important }
  .hb-badge { font-size:11px !important; padding:4px 10px !important; margin-bottom:8px !important }
  .hb-cta { padding:9px 18px !important; font-size:14px !important }
  .hb-thumbs { gap:6px !important }
  .hb-thumb { padding:6px !important }
  .hb-thumb img, .hb-thumb-emoji { height:60px !important; min-height:60px !important; font-size:34px !important }
  .hb-thumb-name { font-size:10px !important; line-height:1.2 !important; max-height:24px !important }
  .hb-thumb-price { font-size:12px !important }
}

/* Кнопка-перемикач каталогу на мобільному — піднімаємо її в drawer-меню,
   тому на сторінці прибираємо щоб не дублювати */
@media (max-width: 900px) {
  .mobile-cat-toggle { display:none !important }
}