/* ═══════════════════════════════════════════════════════════
   Бізнес·Сервіс — бренд-оверрайд теми OpenCart (bs)
   Світлий дизайн за прототипом Магазин.html + assets/shop.css:
   фон #f4f7f5, білий хедер, teal #0fd4b0, Onest + Manrope
   Підключається ПІСЛЯ default stylesheet.css
   ═══════════════════════════════════════════════════════════ */

:root {
  --brand:        #0fd4b0;
  --brand-vivid:  #14e8c4;
  --brand-strong: #0aab8e;
  --brand-soft:   rgba(15, 212, 176, 0.10);
  --brand-ink:    #054538;
  --brand-glow:   rgba(15, 212, 176, 0.30);

  --navy:     #0d1f2d;
  --navy-2:   #091620;
  --navy-line: rgba(255,255,255,0.07);

  --bg:        #f4f7f5;
  --surface:   #ffffff;
  --surface-2: #eef2ef;
  --surface-3: #e5ebe7;

  --ink:   #0d1e28;
  --ink-2: #3a5060;
  --ink-3: #678090;

  --line:        #e0e8e3;
  --line-strong: #cad4ce;

  --amber: #f5b544;

  --font-head: "Onest", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(13,30,40,.08), 0 1px 2px rgba(13,30,40,.04);
  --shadow:    0 6px 20px rgba(13,30,40,.09), 0 2px 6px rgba(13,30,40,.05);
  --shadow-lg: 0 16px 48px rgba(13,30,40,.12), 0 6px 16px rgba(13,30,40,.07);
  --shadow-brand: 0 8px 28px rgba(15,212,176,.32), 0 2px 8px rgba(15,212,176,.16);
}

/* ─── Базова типографіка ─── */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
#content h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.06; }
#content h2 { font-size: 26px; }
#content h3 { font-size: 20px; }
#content > h3, #content > h2 {
  position: relative;
  padding-left: 16px;
  margin: 28px 0 20px;
}
#content > h2:first-child, #content > h3:first-child { margin-top: 2px; }

/* ─── Модуль швидких фільтрів (ліва колонка категорії) ─── */
.bs-filter {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.bs-filter .panel-heading {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 16px 18px;
  border: none;
}
.bs-filter-cat { display: block; font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.15; }
.bs-filter-sub { display: block; font-size: 12px; font-weight: 600; color: var(--brand-vivid); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
.bs-filter .list-group { margin: 0; }
.bs-filter .list-group-item { border: none; border-bottom: 1px solid var(--line); padding: 0; }
.bs-filter .bs-filter-gname {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  padding: 13px 18px 8px;
  background: transparent;
}
.bs-filter .bs-filter-gname:hover, .bs-filter .bs-filter-gname:focus { background: transparent; color: var(--ink); }
.bs-filter .list-group-item + .list-group-item .checkbox { margin: 0; }
.bs-filter [id^="filter-group"] { padding: 0 18px 12px; max-height: 240px; overflow-y: auto; }
.bs-filter .checkbox { margin: 4px 0; }
.bs-filter .checkbox label {
  font-size: 13.5px; color: var(--ink-2); font-weight: 500;
  padding-left: 26px; cursor: pointer; display: block; position: relative; line-height: 1.4;
}
.bs-filter .checkbox input[type="checkbox"] { position: absolute; left: 0; top: 2px; margin: 0; width: 17px; height: 17px; accent-color: var(--brand-strong); cursor: pointer; }
.bs-filter .checkbox label:hover { color: var(--ink); }
.bs-filter .panel-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 12px 18px;
  text-align: center;
}
.bs-filter #button-filter {
  width: 100%;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  border-radius: var(--r-sm);
  height: 42px;
}
.bs-filter #button-filter:hover { background: var(--brand-vivid); border-color: var(--brand-vivid); box-shadow: var(--shadow-brand); }

/* Тулбар категорії: тільки сортування, праворуч */
.bs-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 16px;
}
.bs-sort-label {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}
.bs-sortdd { position: relative; }
.bs-sortdd-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand-strong);
  cursor: pointer;
  padding: 4px 2px;
}
.bs-sortdd-caret { width: 15px; height: 15px; transition: transform .18s ease; }
.bs-sortdd.open .bs-sortdd-caret { transform: rotate(180deg); }
.bs-sortdd-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 500;
  margin: 0;
  padding: 8px;
  list-style: none;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.bs-sortdd.open .bs-sortdd-menu { display: block; }
.bs-sortdd-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.bs-sortdd-menu a:hover { background: var(--surface-2); color: var(--ink); }
.bs-sortdd-menu a svg { width: 21px; height: 21px; color: var(--ink); flex-shrink: 0; }
.bs-sortdd-menu a .bs-check { width: 18px; height: 18px; color: var(--brand); margin-left: auto; }
.bs-sortdd-menu a.active { color: var(--ink); }

/* Кнопка «Завантажити ще» */
.bs-more-wrap { text-align: center; margin: 8px 0 24px; }
#bs-load-more { padding: 12px 32px; font-size: 15px; }
#bs-load-more[hidden] { display: none !important; }

/* Шапка категорії над обома колонками (як у KTC): заголовок зліва, сортування справа */
.bs-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.bs-cat-head .bs-toolbar { margin: 0; }
.bs-cat-head h2 {
  position: relative;
  padding-left: 16px;
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
}
.bs-cat-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 72%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-vivid), var(--brand-strong));
}
.bs-cat-desc { color: var(--ink-2); font-size: 15.5px; max-width: 720px; }
.bs-cat-desc p { margin: 0; }
#content > h3::before, #content > h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 72%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-vivid), var(--brand-strong));
}

a { color: var(--brand-strong); }
a:hover, a:focus { color: var(--brand-ink); text-decoration: none; }

/* ─── Верхня смуга: navy, як хіро лендингу ─── */
#top {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  border-bottom: 1px solid var(--navy-line);
  padding: 0;
  min-height: 0;
}
.bs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.bs-top::before, .bs-top::after { display: none; }
.bs-top-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.bs-top-phone:hover { color: var(--brand-vivid); }
.bs-top-phone .fa-phone { color: var(--brand); font-size: 15px; }
.bs-top-phone span { display: flex; flex-direction: column; line-height: 1.15; }
.bs-top-phone small {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}
.bs-top-note { font-size: 12.5px; color: rgba(255,255,255,.5); font-weight: 600; }
.bs-top-note b { color: var(--brand-vivid); font-weight: 700; }
@media (max-width: 767px) { .bs-top-note { display: none; } }

/* ─── Хедер (світлий, липкий при прокручуванні — як site-header прототипу) ─── */
header {
  background: rgba(244,247,245,.88);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(13,30,40,.05);
  transition: box-shadow .3s, background .3s;
}
@media (min-width: 768px) {
  header {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  header.bs-scrolled {
    background: rgba(244,247,245,.96);
    box-shadow: 0 1px 0 var(--line), 0 6px 28px rgba(13,30,40,.10);
  }
  .bs-header-row { transition: padding .25s ease; }
  header.bs-scrolled .bs-header-row { padding: 9px 0; }
}

/* ─── Рядок шапки: лого | пошук | дії (розетка-стиль) ─── */
.bs-header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
}
.bs-header-row #logo { margin: 0; flex-shrink: 0; }
.bs-search-wrap { flex: 1 1 auto; min-width: 0; }
.bs-search-wrap #search { margin: 0; width: 100%; }
.bs-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bs-act {
  flex: 0 0 46px;
  width: 46px; min-width: 46px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: transparent; padding: 0; /* скидання рамки/фону кнопки-гостя */
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bs-header-actions > .dropdown { flex: 0 0 auto; }
.bs-act svg {
  width: 24px;
  height: 24px;
  display: block;
}
.bs-act:hover, .bs-act:focus { color: var(--brand-strong); background: var(--brand-soft); }
/* активний стан (у порівнянні є товари) — зелені терези з галочкою */
.bs-act.bs-on {
  color: var(--brand-strong);
  background: var(--brand-soft);
  position: relative;
}
.bs-act.bs-on::after {
  content: "";
  position: absolute;
  right: 4px; bottom: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054538' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-repeat: no-repeat; background-position: center;
  border: 2px solid var(--bg);
}
.bs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#wishlist-total { position: relative; }
.bs-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e2574c;
  color: #fff;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.bs-header-actions .dropdown-menu { border-radius: var(--r-sm); border-color: var(--line); box-shadow: var(--shadow-lg); }
@media (max-width: 767px) {
  .bs-header-row { flex-wrap: wrap; gap: 10px; }
  .bs-search-wrap { order: 3; flex-basis: 100%; }
  .bs-header-actions { margin-left: auto; }
}

/* Лого-блок БС */
#logo { margin: 15px 0; }
.bs-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.bs-logo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;
}
.bs-logo-wrap::after {
  content: "";
  position: absolute; right: -6px; bottom: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230fd4b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
  border: 2px solid var(--bg);
  z-index: 2;
}
.bs-logo-mark {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, #1ad8b4 0%, #0aab8e 100%);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(15,212,176,.42), inset 0 1px 0 rgba(255,255,255,.22);
  overflow: hidden;
  flex-shrink: 0;
}
.bs-logo-mark::before {
  content: "";
  position: absolute; top: -12px; right: -12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.bs-logo-mark span {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  letter-spacing: .5px;
  position: relative; z-index: 1;
}
.bs-brand-name { display: flex; flex-direction: column; line-height: 1; }
.bs-brand-name b {
  font-family: var(--font-head);
  font-weight: 800; font-size: 17.5px; letter-spacing: -.01em;
  color: var(--ink);
}
.bs-brand-name b i { font-style: normal; color: var(--brand-strong); }
.bs-brand-name small {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: .05em; margin-top: 3px; font-weight: 600;
}
.bs-brand:hover .bs-brand-name b { color: var(--brand-strong); }

/* ─── Пошук ─── */
#search { margin: 0; }
#search .form-control {
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--line-strong);
  border-right: none;
  background: var(--surface);
  height: 42px;
  color: var(--ink);
  box-shadow: none;
  font-family: var(--font-body);
}
#search .form-control::placeholder { color: var(--ink-3); }
#search .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
#search .btn {
  border-radius: 0 12px 12px 0;
  height: 42px;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
}
#search .btn:hover { background: var(--brand-vivid); border-color: var(--brand-vivid); }

/* ─── Кошик у хедері ─── */
#cart { margin: 0; }
#cart > .btn, #cart > button {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--navy);
  border-radius: 12px;
  color: #fff;
  height: 44px;
  text-shadow: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 16px;
  box-shadow: var(--shadow-sm);
}
#cart .fa-shopping-cart { font-size: 17px; margin-right: 4px; color: var(--brand-vivid); }
#cart > .btn:hover, #cart > button:hover {
  border-color: var(--brand);
  color: var(--brand-vivid);
}
#cart.open > .btn { background: var(--navy-2); color: #fff; }
#cart .dropdown-menu { border-radius: var(--r-sm); border-color: var(--line); box-shadow: var(--shadow-lg); }

/* ─── Головне меню категорій: navy-контраст ─── */
#menu {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  min-height: 46px;
  box-shadow: var(--shadow);
  margin-top: 14px;
  margin-bottom: 4px; /* прибираємо зайвий bootstrap-відступ .navbar (був 20px) */
}
#menu .nav.navbar-nav {
  float: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#menu .nav.navbar-nav > li { flex: 1 1 auto; text-align: center; }
#menu .nav > li > a {
  color: rgba(255,255,255,.88);
  text-shadow: none;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 18px;
  background: transparent;
  border-radius: 999px;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
  background: rgba(15,212,176,.16);
  color: var(--brand-vivid);
}
#menu .dropdown-menu {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
#menu .dropdown-inner a { color: var(--ink-2); }
#menu .dropdown-inner a:hover { color: var(--brand-strong); }
#menu #category { font-family: var(--font-head); color: #fff; font-weight: 700; }
#menu .btn-navbar {
  background: rgba(255,255,255,.08);
  border-color: var(--navy-line);
  color: #fff;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus { background: rgba(15,212,176,.16); color: var(--brand-vivid); }

/* ─── Кнопки ─── */
.btn { border-radius: 12px; font-family: var(--font-body); font-weight: 700; font-size: 14.5px; text-shadow: none; box-shadow: none; }
.btn-lg { font-size: 16px; }
.btn-primary, .btn-primary:focus {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
  background: var(--brand-vivid) !important;
  border-color: var(--brand-vivid) !important;
  color: var(--brand-ink) !important;
  box-shadow: var(--shadow-brand);
}
.btn-default { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.btn-default:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.btn-inverse { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-inverse:hover { background: var(--navy-2); color: var(--brand-vivid); }

/* ─── Ширший контейнер на великих екранах ─── */
@media (min-width: 1500px) { .container { width: 1400px; } }
@media (min-width: 2000px) { .container { width: 1680px; } }

/* ─── Сітка товарів категорії: кількість карток від ширини екрана
       (~1366 → 3, ~1920 → 4, ширші → 5) ─── */
#bs-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 8px;
}
#bs-products::before, #bs-products::after { content: none; }
#bs-products .product-layout {
  width: auto;
  max-width: none;
  padding: 0;
  float: none;
}
#bs-products .product-thumb { margin-bottom: 0; }

/* ─── Однакова висота карток у сітці ─── */
.row:has(> .product-layout) {
  display: flex;
  flex-wrap: wrap;
  margin-left: -4px;   /* вужчий gutter замість bootstrap 15px */
  margin-right: -4px;
}
.row > .product-layout { padding-left: 4px; padding-right: 4px; }
.row > .product-layout .product-thumb { margin-bottom: 8px; }
.product-layout { display: flex; }
.product-layout .product-thumb {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.product-layout .product-thumb .image { flex-shrink: 0; }
/* обгортка між .product-thumb і .caption — теж флекс-колонка */
.product-layout .product-thumb > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-layout .product-thumb .caption {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.product-layout .product-thumb .caption .price { margin-top: auto; padding-top: 10px; }
.product-layout .product-thumb .button-group { margin-top: 0; flex-shrink: 0; }

/* ─── Картки товарів (за .prod з прототипу) ─── */
.product-thumb {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.product-thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.product-thumb .image {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
/* Повітря навколо фото задаємо ТУТ (CSS), а не запікаємо в кожен файл — інакше
   Brain-фото (заповнюють кадр) і наші (з полями) виглядають різнокаліберно.
   Фото свідомо менше за контейнер (max-height ~78%), тож поле лишається завжди. */
.product-thumb .image img {
  display: block;
  max-width: 100%;
  max-height: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Іконки серце/терези на фото картки (як у KTC) */
.bs-card-acts {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.bs-card-act {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #9aa7b0;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-xs);
  transition: color .15s, border-color .15s, transform .15s;
}
.bs-card-act svg { width: 20px; height: 20px; display: block; }
.bs-card-act:hover { transform: scale(1.08); }
.bs-wish:hover, .bs-wish.on { color: #e2574c; border-color: rgba(226,87,76,.4); }
.bs-comp:hover { color: var(--brand-strong); }
.bs-comp.on {
  color: var(--brand-strong);
  border-color: rgba(15,212,176,.45);
  position: relative;
}
/* ═══ Сайдбар авторизації ═══ */
.bs-auth-overlay {
  position: fixed; inset: 0;
  background: rgba(9,22,32,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1000;
}
.bs-auth-overlay.open { opacity: 1; visibility: visible; }
.bs-auth {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 92vw;
  background: var(--bg);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(9,22,32,.18);
}
.bs-auth.open { transform: none; }
.bs-auth-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
}
.bs-auth-title { font-family: var(--font-head); font-weight: 800; font-size: 19px; }
.bs-auth-x {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; background: rgba(255,255,255,.08); border-radius: 10px;
  color: #fff; cursor: pointer;
}
.bs-auth-x:hover { background: rgba(255,255,255,.16); color: var(--brand-vivid); }
.bs-auth-x svg { width: 20px; height: 20px; }
.bs-auth-body { padding: 22px 24px 30px; overflow-y: auto; flex: 1; }

.bs-auth-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: 12px; margin-bottom: 20px;
}
.bs-auth-tab {
  flex: 1; height: 40px; border: none; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background .15s, color .15s;
}
.bs-auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.bs-auth-form { display: flex; flex-direction: column; gap: 14px; }
.bs-auth-form[hidden] { display: none; }
.bs-auth-error {
  background: #fdecea;
  border: 1px solid rgba(226,87,76,.35);
  color: #c0392b;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.bs-auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0; }
.bs-auth-form input:not([type="checkbox"]) {
  height: 46px; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 0 14px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink);
  background: var(--surface);
}
.bs-auth-form input[name="telephone"] { font-size: 17px; font-weight: 700; }
.bs-auth-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.bs-auth-row { display: flex; gap: 12px; }
.bs-auth-row label { flex: 1; }
.bs-agree { flex-direction: row !important; align-items: flex-start; gap: 9px !important; font-weight: 600 !important; font-size: 12.5px !important; color: var(--ink-3) !important; line-height: 1.4; cursor: pointer; }
.bs-agree input { margin-top: 2px; flex-shrink: 0; }
.btn-block { width: 100%; height: 48px; font-size: 15.5px; margin-top: 4px; }
.bs-forgot { text-align: center; font-size: 13px; font-weight: 600; margin-top: 2px; }

@media (max-width: 480px) {
  .bs-auth-row { flex-direction: column; }
}

/* Попап «Порівняти →» біля терезів */
.bs-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  z-index: 5;
  animation: bs-pop .18s ease;
}
.bs-popover::before {
  content: "";
  position: absolute;
  top: -5px; right: 14px;
  width: 10px; height: 10px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.bs-popover:hover { color: var(--brand-strong); }
.bs-popover-go {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bs-popover-go svg { width: 14px; height: 14px; }
@keyframes bs-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.bs-comp.on::after {
  content: "";
  position: absolute;
  right: -5px; top: -5px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23054538' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-repeat: no-repeat; background-position: center;
  border: 2px solid #fff;
}
.product-thumb h4, .product-thumb h4 a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.product-thumb h4 a:hover { color: var(--brand-strong); }
.product-thumb .caption { min-height: 84px; padding: 12px 16px 8px; }
.product-thumb .caption > p:not(.price) { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.product-thumb .price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0; /* прибираємо дефолтний margin <p> — інакше зайвий пробіл до кнопки */
}
.product-thumb .price-new { color: var(--brand-strong); }
.product-thumb .price-old { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.product-thumb .price-tax { display: none; }
.product-thumb .button-group {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.product-thumb .button-group button {
  color: var(--ink-3);
  font-weight: 700;
  line-height: 42px;
  transition: background .15s, color .15s;
}
.product-thumb .button-group button + button { border-left: 1px solid var(--line); }
.product-thumb .button-group button:first-child {
  background: var(--brand);
  color: var(--brand-ink);
  width: 100%;
}
.product-thumb .button-group button:first-child:hover {
  background: var(--brand-vivid);
}
.product-thumb .button-group button:hover { color: var(--brand-ink); background: var(--brand-soft); }

/* ─── Хлібні крихти ─── */
.breadcrumb {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0 0;
  margin-bottom: 2px;
}
/* поточна сторінка не дублюється в крихтах; самотня «Головна» — зайва */
.breadcrumb > li:last-child { display: none; }
.breadcrumb:not(:has(> li:nth-child(3))) { display: none; }
.breadcrumb > li > a { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.breadcrumb > li > a:hover { color: var(--brand-strong); }
.breadcrumb > li + li:before { color: var(--line-strong); content: "›"; padding: 0 8px; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li { padding: 0; display: inline-flex; align-items: center; }
/* перший елемент — іконка дому */
.bs-bc-home { display: inline-flex; align-items: center; color: var(--ink-3); }
.bs-bc-home svg { width: 17px; height: 17px; }
.bs-bc-home:hover { color: var(--brand-strong); }

/* ─── Бічна колонка ─── */
.list-group-item {
  border-color: var(--line);
  color: var(--ink-2);
  font-weight: 600;
  padding: 11px 16px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-color: var(--line);
}
.list-group-item:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* ─── Панелі, форми, алерти ─── */
.panel { border-radius: var(--r-sm); border-color: var(--line); box-shadow: var(--shadow-sm); }
.panel-default > .panel-heading { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.panel-title { font-family: var(--font-head); font-weight: 700; }
.form-control { border-radius: var(--r-sm); border-color: var(--line-strong); color: var(--ink); height: 40px; font-size: 14.5px; }
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.alert-success { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.label-warning { background: var(--amber); color: #4a3305; }
.well { background: var(--surface); border-color: var(--line); border-radius: var(--r-sm); box-shadow: none; }

/* ─── Пагінація ─── */
.pagination > li > a, .pagination > li > span { color: var(--ink-2); border-color: var(--line); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ─── Футер (navy, за макетом лендингу) ─── */
.bs-footer {
  background: var(--navy-2);
  border-top: 3px solid var(--brand);
  color: rgba(140,172,175,.78);
  margin-top: 48px;
  padding-block: clamp(40px,5vw,60px) 28px;
}
.bs-footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
}
.bs-footer .bs-brand { margin-bottom: 6px; }
.bs-footer .bs-brand-name b     { color: #fff; }
.bs-footer .bs-brand-name b i   { color: var(--brand); }
.bs-footer .bs-brand-name small { color: rgba(118,142,145,.85); }
.bs-footer-about { color: rgba(128,158,162,.72); font-size: 14.5px; margin-top: 18px; max-width: 300px; line-height: 1.7; }
.bs-footer-geo { color: rgba(155,185,185,.55); font-size: 13px; margin-top: 12px; max-width: 340px; line-height: 1.6; }
.bs-footer-col h5 {
  color: rgba(255,255,255,.82); font-family: var(--font-head);
  font-size: 13px; letter-spacing: .10em; text-transform: uppercase; margin: 0 0 18px;
}
.bs-footer-col ul { display: grid; gap: 12px; margin: 0; }
.bs-footer-col li { font-size: 14.5px; color: rgba(138,168,172,.72); }
.bs-footer-col a { font-size: 14.5px; color: rgba(138,168,172,.72); transition: color .15s; }
.bs-footer-col a:hover { color: var(--brand-vivid); }
.bs-footer-bottom {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--navy-line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: rgba(108,138,142,.58);
}
@media (max-width: 1100px) {
  .bs-footer-top { grid-template-columns: repeat(3, 1fr); }
  .bs-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .bs-footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 460px) {
  .bs-footer-top { grid-template-columns: 1fr; }
  .bs-footer-bottom { justify-content: flex-start; }
}

/* ─── Банери ─── */
.swiper-viewport { border-radius: var(--r); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* ═══ Сторінка товару (Rozetka-скелет) ═══════════════════════════ */
.bs-pp-head h1 {
  font-family: var(--font-head);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink);
  margin: 4px 0 10px;
}
.bs-pp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 14px; color: var(--ink-3); margin-bottom: 14px;
}
.bs-pp-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--brand-strong);
}
.bs-pp-stock::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.bs-pp-brand a { color: var(--ink-2); font-weight: 600; }
.bs-pp-rate { color: var(--amber); font-size: 13px; }
.bs-pp-rate span { color: var(--ink-3); margin-left: 6px; }
.bs-pp-rate:hover span { color: var(--brand-strong); }

/* якірне меню */
.bs-pp-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  margin: 0 0 20px; padding: 6px 0;
}
.bs-pp-nav a {
  padding: 9px 16px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; color: var(--ink-2);
}
.bs-pp-nav a:hover { background: var(--surface-2); text-decoration: none; }
.bs-pp-nav a.active { background: var(--brand-soft); color: var(--brand-ink); }
html { scroll-behavior: smooth; }
.bs-pp-section, #bs-about { scroll-margin-top: 70px; }

/* дві колонки: галерея+ключові / картка покупки */
.bs-pp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 28px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 940px) { .bs-pp-main { grid-template-columns: 1fr; } }

.bs-pp-gallery {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  padding: 20px;
}
/* Фіксована висота зони фото — щоб при переключенні мініатюр
   (портретні/альбомні фото різних пропорцій) вікно не стрибало */
.bs-pp-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}
@media (max-width: 560px) { .bs-pp-photo { height: 300px; } }
.bs-pp-photo img {
  max-width: 100%; max-height: 320px;
  width: auto; height: auto;
  object-fit: contain;
}
@media (max-width: 560px) { .bs-pp-photo img { max-height: 260px; } }
.bs-pp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.bs-pp-thumb {
  display: block; width: 72px; height: 72px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px; background: #fff;
}
.bs-pp-thumb:hover { border-color: var(--brand); }
.bs-pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bs-pp-gallery .bs-card-acts { top: 14px; right: 14px; }

/* ключові («попередні») характеристики — на всю ширину, як Опис/Характеристики;
   пари ключ→значення в дві колонки */
.bs-pp-keyspecs {
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  padding: 8px 28px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.bs-pp-keyspec {
  display: grid; grid-template-columns: minmax(160px, 45%) 1fr; gap: 16px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  font-size: 15px;
}
.bs-pp-keyspec span { color: var(--ink-3); }
.bs-pp-keyspec b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.bs-pp-allspecs {
  grid-column: 1 / -1;
  display: inline-block; margin: 12px 0 2px;
  font-weight: 700; font-size: 14.5px; color: var(--brand-strong);
}
@media (max-width: 680px) {
  .bs-pp-keyspecs { grid-template-columns: 1fr; column-gap: 0; padding: 8px 20px 14px; max-width: none; }
  .bs-pp-section { max-width: none; }
}
@media (max-width: 460px) {
  .bs-pp-keyspec { grid-template-columns: 1fr; gap: 2px; }
}
.bs-pp-allspecs::after { content: ' →'; }

/* картка покупки */
.bs-pp-buy {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  padding: 22px;
  position: sticky; top: 64px;
}
@media (max-width: 940px) { .bs-pp-buy { position: static; } }
.bs-pp-price { margin-bottom: 16px; }
.bs-pp-price-now {
  font-family: var(--font-head);
  font-size: 32px; font-weight: 800; color: var(--ink);
}
.bs-pp-price-now.bs-sale { color: #cf3b2c; }
.bs-pp-price-old {
  font-size: 16px; color: var(--ink-3); text-decoration: line-through;
}
.bs-pp-cartrow { display: flex; gap: 10px; }
.bs-pp-qty {
  display: flex; align-items: stretch; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  overflow: hidden;
}
.bs-pp-qty .form-control {
  width: 46px; border: 0; border-radius: 0; box-shadow: none;
  text-align: center; font-weight: 700; height: auto; padding: 0;
}
.bs-qty-btn {
  width: 38px; border: 0; background: var(--surface-2);
  font-size: 18px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.bs-qty-btn:hover { background: var(--surface-3); }
.bs-pp-btncart {
  flex: 1 1 auto;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-vivid) 100%) !important;
  border: 0 !important; color: var(--brand-ink) !important;
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
  border-radius: var(--r-sm) !important;
  padding: 13px 20px;
  box-shadow: 0 6px 18px var(--brand-glow);
}
.bs-pp-btncart:hover { filter: brightness(1.05); }
.bs-pp-options { margin-bottom: 14px; }
.bs-pp-options h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }

/* блок довіри */
.bs-pp-trust { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 6px; }
.bs-pp-trust-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.bs-pp-trust-item:last-child { border-bottom: 0; }
.bs-pp-trust-item svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  color: var(--brand-strong);
}
.bs-pp-trust-item b { display: block; font-size: 14.5px; color: var(--ink); }
.bs-pp-trust-item span { font-size: 13px; color: var(--ink-3); line-height: 1.45; }

/* секції */
.bs-pp-section { margin-bottom: 36px; }
.bs-pp-section > h2 {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800; color: var(--ink);
  padding-left: 14px; border-left: 4px solid var(--brand);
  margin: 0 0 18px;
}
.bs-pp-desc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); padding: 24px 28px;
  line-height: 1.65;
}
.bs-pp-desc img { max-width: 100%; height: auto; }

/* таблиця характеристик */
.bs-pp-specs {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); padding: 10px 28px;
}
.bs-pp-specs h3 { font-size: 16px; font-weight: 800; margin: 16px 0 4px; }
.bs-pp-specs dl { margin: 0; }
.bs-pp-spec {
  display: grid; grid-template-columns: minmax(180px, 40%) 1fr; gap: 16px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  font-size: 15px;
}
.bs-pp-spec:last-child { border-bottom: 0; }
.bs-pp-spec dt { color: var(--ink-3); font-weight: 500; }
.bs-pp-spec dd { color: var(--ink); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bs-pp-spec { grid-template-columns: 1fr; gap: 2px; }
}

/* мобільна липка смуга */
.bs-pp-mobilebar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 20px rgba(13, 30, 40, 0.10);
  padding: 10px 16px;
  align-items: center; justify-content: space-between; gap: 14px;
}
.bs-pp-mobprice { font-family: var(--font-head); font-size: 20px; font-weight: 800; }
.bs-pp-mobilebar .btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-vivid) 100%);
  border: 0; color: var(--brand-ink); font-weight: 800;
  border-radius: var(--r-sm); padding: 11px 26px;
}
@media (max-width: 767px) {
  .bs-pp-mobilebar { display: flex; }
  #product-product { padding-bottom: 70px; }
}
/* довгі значення в ключових характеристиках — обрізати у 2 рядки */
.bs-pp-keyspec b {
  max-width: 62%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Сторінка товару: міні-галерея, зірки, сума ── */
/* курсор-вказівник лише коли в галереї є що гортати (фото — це <a>, тож
   за замовчуванням pointer; при одному фото робимо default) */
.bs-pp-gallery:has(.bs-pp-thumb) .bs-pp-photo { cursor: pointer; }
.bs-pp-gallery:not(:has(.bs-pp-thumb)) .bs-pp-photo { cursor: default; }
.bs-pp-thumb { cursor: pointer; }
.bs-pp-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.bs-pp-priceunit {
  margin-top: 4px; font-size: 14px; color: var(--ink-3); font-weight: 600;
}

/* зірковий рейтинг у формі відгуку (клік = вибір оцінки) */
.bs-stars-input {
  display: inline-flex; flex-direction: row-reverse;
  gap: 4px; margin-top: 6px;
}
.bs-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.bs-stars-input label {
  font-size: 32px; line-height: 1; color: var(--line-strong);
  cursor: pointer; transition: color .12s ease; margin: 0;
}
.bs-stars-input label:hover,
.bs-stars-input label:hover ~ label,
.bs-stars-input input:checked ~ label { color: var(--amber); }
.bs-stars-input input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }

/* ── Список відгуків ── */
.bs-review {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); padding: 16px 20px; margin-bottom: 14px;
}
.bs-review-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.bs-review-author { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--ink); }
.bs-review-stars { font-size: 15px; letter-spacing: 1px; }
.bs-review-stars .fa-star { color: var(--amber); }
.bs-review-stars .fa-star-o { color: var(--line-strong); }
.bs-review-date { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.bs-review-text { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* ── Відгуки: дві колонки (зведення + список) ── */
.bs-reviews-wrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) { .bs-reviews-wrap { grid-template-columns: 1fr; } }

.bs-rev-summary {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); padding: 22px;
  position: sticky; top: 64px;
}
@media (max-width: 860px) { .bs-rev-summary { position: static; } }
.bs-rev-score { font-size: 15px; color: var(--ink-2); }
.bs-rev-score b { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); }
.bs-rev-score .fa-star { color: var(--amber); }
.bs-rev-based { font-size: 13.5px; color: var(--ink-3); margin: 2px 0 16px; }
.bs-rev-hist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.bs-rev-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.bs-rev-num { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); width: 34px; flex-shrink: 0; }
.bs-rev-num .fa-star { color: var(--amber); font-size: 12px; }
.bs-rev-track { flex: 1 1 auto; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bs-rev-fill { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.bs-rev-cnt { width: 26px; text-align: right; color: var(--ink-3); flex-shrink: 0; }
.bs-rev-write {
  width: 100%;
  background: transparent !important;
  border: 1.5px solid var(--brand) !important;
  color: var(--brand-strong) !important;
  font-weight: 700; border-radius: var(--r-sm) !important; padding: 11px;
}
.bs-rev-write:hover { background: var(--brand-soft) !important; }
.bs-rev-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); padding: 20px 22px; margin-bottom: 18px;
}
.bs-rev-form h3 { margin-top: 0; font-size: 18px; font-weight: 800; }

/* ── Залогінений користувач: та сама «людинка», але залита teal + зелена крапка ── */
.bs-act-user { position: relative; color: var(--navy); }
.bs-act-user:hover, .bs-act-user:focus { color: var(--navy-2); background: var(--brand-soft); }
/* зелена крапка «онлайн/увійшли» у кутику іконки */
.bs-act-dot {
  position: absolute; top: 8px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #2ecc71; border: 2px solid var(--surface);
}
/* привітання у випадайці кабінету */
.bs-acc-hi {
  padding: 8px 16px 6px; font-size: 13px; color: var(--ink-3);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.bs-acc-hi b { color: var(--ink); font-weight: 700; }

/* ── Сторінка закладок ── */
.bs-wish-title {
  font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 800;
  color: var(--ink); padding-left: 14px; border-left: 4px solid var(--brand);
  margin: 8px 0 22px;
}
.bs-wish-title span { color: var(--ink-3); font-weight: 600; font-size: 0.7em; }
.bs-wish-empty {
  text-align: center; padding: 50px 20px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
}
.bs-wish-empty svg { width: 54px; height: 54px; color: var(--line-strong); margin-bottom: 12px; }
.bs-wish-empty p { font-size: 16px; margin: 0 0 18px; line-height: 1.6; }
.bs-wish-empty b { color: #cf3b2c; }
.bs-wish-empty .btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-vivid) 100%);
  border: 0; color: var(--brand-ink); font-weight: 800; border-radius: var(--r-sm); padding: 12px 26px;
}

/* ── Компактне меню на середніх ширинах: 9 пунктів мають вміститись в один рядок ── */
@media (max-width: 1420px) {
  #menu .nav > li > a { padding: 13px 12px; font-size: 13.5px; }
}
@media (max-width: 1180px) {
  #menu .nav > li > a { padding: 13px 9px; font-size: 12.5px; }
}
@media (max-width: 1060px) {
  #menu .nav > li > a { padding: 13px 6px; font-size: 11.8px; }
}

/* ── Мобільні/планшетні ≤1024: меню категорій = випадаючий список-оверлей.
      Кнопка «Категорії ▾» на всю ширину; список випадає поверх контенту ── */
@media (max-width: 1024px) {
  #menu { position: relative; border-radius: 16px; padding: 0; }
  #menu .navbar-header { display: block; }
  #menu .btn-navbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin: 0; padding: 14px 20px; border: 0; border-radius: 16px;
    background: transparent; color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  }
  #menu .btn-navbar #category { color: #fff; padding: 0; font: inherit; }
  #menu .bs-menu-caret { transition: transform .2s ease; font-size: 13px; }
  #menu .navbar-header.bs-open .bs-menu-caret,
  #menu .navbar-collapse.in ~ .navbar-header .bs-menu-caret { transform: rotate(180deg); }
  /* випадаючий список поверх сторінки */
  #menu .navbar-collapse { display: none !important; }
  #menu .navbar-collapse.in, #menu .navbar-collapse.collapsing {
    display: block !important;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    margin-top: 6px; padding: 8px; border-radius: 16px;
    background: var(--navy, #0d1f2d);
    box-shadow: 0 18px 40px rgba(0,0,0,.32);
    max-height: 72vh; overflow-y: auto;
  }
  #menu .nav.navbar-nav { display: block; margin: 0; }
  #menu .nav > li { float: none; display: block; }
  #menu .nav > li > a { padding: 12px 16px; font-size: 15px; border-radius: 12px; text-align: center; }
  #menu .nav > li + li { border-top: 1px solid rgba(255,255,255,.07); }
  #menu .dropdown-menu {
    position: static; float: none; width: auto; min-width: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none; padding: 2px 0 6px;
  }
  #menu .dropdown-inner { padding: 0; text-align: center; }
  #menu .dropdown-inner ul { margin: 0; padding: 0; }
  #menu .dropdown-inner a { color: rgba(255,255,255,.82); text-align: center; padding: 9px 12px; border-radius: 10px; }
  #menu .dropdown-inner a:hover, #menu .dropdown-inner a:focus { color: #fff; background: rgba(255,255,255,.08); }
}
/* каретка обертається коли меню відкрите (бургер тогл додає .in) */
@media (max-width: 1024px) {
  #menu:has(.navbar-collapse.in) .bs-menu-caret { transform: rotate(180deg); }
}

/* ── Блог ── */
.bs-blog-title { font-family: 'Onest', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: #0d1f2d; margin: 12px 0 28px; }
.bs-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.bs-blog-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e9ec; border-radius: 16px;
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.bs-blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,31,45,.10); }
.bs-blog-card-img { display: block; aspect-ratio: 16/9; background: #f4f7f5 center/cover no-repeat; }
.bs-blog-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; }
.bs-blog-card-date { font-size: 13px; color: #7c8791; font-weight: 600; letter-spacing: .02em; }
.bs-blog-card-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.3; margin: 0; }
.bs-blog-card-title a { color: #0d1f2d; text-decoration: none; }
.bs-blog-card-title a:hover { color: #0b9a80; }
.bs-blog-card-short { color: #52606d; font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bs-blog-card-more { align-self: flex-start; margin-top: 6px; color: #0fd4b0; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.bs-blog-card-more:hover { color: #0b9a80; text-decoration: none; }
.bs-blog-empty { padding: 40px 0; color: #52606d; font-size: 16px; text-align: center; }
.bs-blog-pagination { margin-top: 30px; }

.bs-blog-article { max-width: 820px; margin: 0 auto; }
.bs-blog-back { display: inline-block; margin-bottom: 16px; color: #0fd4b0; font-weight: 700; text-decoration: none; }
.bs-blog-back:hover { color: #0b9a80; text-decoration: none; }
.bs-blog-article-title { font-family: 'Onest', sans-serif; font-weight: 800; font-size: clamp(26px, 4vw, 40px); color: #0d1f2d; margin: 0 0 12px; line-height: 1.2; }
.bs-blog-article-date { color: #7c8791; font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.bs-blog-article-image { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 24px; }
.bs-blog-article-body { font-size: 17px; line-height: 1.75; color: #212b33; }
.bs-blog-article-body h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 24px; margin: 32px 0 12px; color: #0d1f2d; }
.bs-blog-article-body h3 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; margin: 26px 0 10px; color: #0d1f2d; }
.bs-blog-article-body p { margin: 0 0 16px; }
.bs-blog-article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; }
.bs-blog-article-body a { color: #0b9a80; text-decoration: underline; }
.bs-blog-article-body ul, .bs-blog-article-body ol { padding-left: 22px; margin: 0 0 16px; }
.bs-blog-article-body li { margin-bottom: 6px; }
.bs-blog-article-body blockquote {
  border-left: 4px solid #0fd4b0; margin: 18px 0; padding: 6px 0 6px 18px;
  color: #3d4a56; font-style: italic; background: #f4f7f5;
}

@media (max-width: 480px) {
  .bs-blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .bs-blog-article-body { font-size: 16px; }
}

/* ── Інформаційні сторінки (Про нас, FAQ) ── */
.bs-info-button {
  display: inline-block; margin-bottom: 24px; padding: 12px 20px;
  background: linear-gradient(135deg, #0fd4b0, #0bb597); color: #06202a;
  font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14.5px;
  border-radius: 12px; text-decoration: none; transition: filter .15s ease;
}
.bs-info-button:hover { filter: brightness(1.08); color: #06202a; text-decoration: none; }

.bs-info-about h1, .bs-info-faq h1 { font-size: 28px; margin-bottom: 20px; color: #0d1f2d; }
.bs-info-about h2, .bs-info-faq h2 { font-size: 18px; margin-top: 24px; margin-bottom: 12px; color: #0d1f2d; font-weight: 700; }
.bs-info-about p, .bs-info-faq p { line-height: 1.7; color: #212b33; margin-bottom: 16px; }
.bs-info-about ul { padding-left: 20px; margin-bottom: 16px; }
.bs-info-about li, .bs-info-faq .faq-item { margin-bottom: 10px; line-height: 1.6; }

.bs-info-faq .faq-item { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #e0e4e7; }
.bs-info-faq .faq-item:last-child { border-bottom: 0; }
.bs-info-faq .faq-item h3 { color: #0fd4b0; font-weight: 700; margin-bottom: 8px; font-size: 16px; }

/* Кнопка "Оформити замовлення" у попапі кошика */
#cart .bs-cart-actions { margin: 12px 0 4px; text-align: center; }
#cart .bs-btn-checkout {
  display: block; width: 100%; min-height: 46px; line-height: 1.2;
  padding: 13px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #0fd4b0, #0bb597); color: #06202a;
  font-family: 'Onest', sans-serif; font-weight: 800; font-size: 15.5px;
  text-decoration: none; box-shadow: 0 6px 16px rgba(15,212,176,.28);
  transition: filter .15s ease, transform .15s ease;
}
#cart .bs-btn-checkout:hover, #cart .bs-btn-checkout:focus { filter: brightness(1.06); color: #06202a; text-decoration: none; }
#cart .bs-btn-checkout:active { transform: translateY(1px); }

/* Рядок «Відправлення» у картці товару */
.product-thumb .bs-ship {
  margin: 2px 0 8px; font-size: 13px; font-weight: 600;
  color: #0b9a80; display: flex; align-items: center; gap: 6px; line-height: 1.3;
}
.product-thumb .bs-ship-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #0fd4b0;
  box-shadow: 0 0 0 3px rgba(15,212,176,.18); flex: 0 0 auto;
}
.product-thumb .bs-ship-dot--order { background: #f0a02a; box-shadow: 0 0 0 3px rgba(240,160,42,.18); }
.product-thumb .bs-ship:has(.bs-ship-dot--order) { color: #b9761a; }
@media (max-width: 460px) { .product-thumb .bs-ship { font-size: 12.5px; } }
.bs-pp-meta .bs-ship--pp { font-size: 14px; font-weight: 700; color: #b9761a; display: inline-flex; align-items: center; gap: 6px; }
.bs-pp-meta .bs-ship--pp .bs-ship-dot { width: 7px; height: 7px; border-radius: 50%; background: #f0a02a; box-shadow: 0 0 0 3px rgba(240,160,42,.18); }

/* ---- Нова Пошта (крок доставки) ---- */
.bs-np{margin:18px 0;padding:16px;border:1px solid #dbe5e0;border-radius:12px;background:#f8fbfa}
.bs-np-row{position:relative}
.bs-np .control-label{font-weight:600}
.bs-np .form-control{height:46px;font-size:16px}
.bs-np-suggest{list-style:none;margin:2px 0 0;padding:0;position:absolute;z-index:30;left:0;right:0;background:#fff;border:1px solid #dbe5e0;border-radius:10px;max-height:260px;overflow:auto;box-shadow:0 10px 24px rgba(9,22,32,.12)}
.bs-np-suggest:empty{display:none}
.bs-np-suggest li{padding:11px 14px;cursor:pointer;min-height:44px}
.bs-np-suggest li:hover{background:#e8f7f3;color:#0d1f2d}
@media (max-width:480px){.bs-np{padding:12px}}

/* ---- Односторінкове оформлення замовлення ---- */
.bs-co-title{font-size:clamp(24px,3vw,34px);font-weight:800;margin:0 0 18px}
#bs-checkout .bs-card{background:#fff;border:1px solid #e3ebe7;border-radius:14px;padding:20px 22px;margin-bottom:18px;box-shadow:0 2px 10px rgba(9,22,32,.04)}
#bs-checkout .bs-card-title{font-size:19px;font-weight:700;margin:0 0 16px;padding-left:12px;border-left:4px solid #0fd4b0;line-height:1.2}
#bs-checkout label{font-weight:600}
#bs-checkout .form-control{height:46px;font-size:16px}
#bs-checkout textarea.form-control{height:auto}
.bs-ship{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;margin:0 0 10px;border:1px solid #e3ebe7;border-radius:12px;cursor:pointer;font-weight:500;min-height:56px;transition:border-color .15s,background .15s}
.bs-ship:hover{border-color:#0fd4b0}
.bs-ship.is-active{border-color:#0fd4b0;background:#f2fbf9;box-shadow:inset 0 0 0 1px #0fd4b0}
.bs-ship input[type=radio]{margin:0;flex:0 0 auto;width:18px;height:18px}
.bs-ship-name{flex:1 1 auto;display:block}
.bs-ship-name small{display:block;font-weight:400;color:#6c7d86;margin-top:2px}
.bs-ship-price{flex:0 0 auto;font-weight:700;color:#0d1f2d;white-space:nowrap}
.bs-ship-extra{margin:0 0 10px;padding-left:4px}
.bs-summary{position:sticky;top:90px}
.bs-sum-products{list-style:none;padding:0;margin:0 0 14px;border-bottom:1px solid #eef3f1}
.bs-sum-products li,.bs-sum-totals li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:15px}
.bs-sum-products li>span,.bs-sum-totals li>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.bs-sum-products li>b,.bs-sum-totals li>b{flex:0 0 auto;white-space:nowrap;text-align:right}
.bs-sum-totals{list-style:none;padding:0;margin:0 0 16px}
.bs-sum-totals li:last-child{font-size:19px;font-weight:800;border-top:1px solid #eef3f1;padding-top:12px;margin-top:6px}
#bs-co-confirm{min-height:52px;font-weight:700;font-size:17px}
.bs-sum-note{color:#6c7d86;font-size:13px;margin-top:12px}
@media (max-width:991px){.bs-summary{position:static}}
@media (max-width:480px){#bs-checkout .bs-card{padding:16px 14px}.bs-ship{padding:12px 12px;flex-wrap:wrap}.bs-ship-price{width:100%;padding-left:30px}}

/* ===== Телефонна OTP-реєстрація (account/phone_register) ===== */
#phone-register .bs-otp-well{max-width:440px;margin:24px auto 40px;padding:28px 28px 24px}
#phone-register .bs-otp-title{font-size:clamp(22px,3vw,28px);margin:0 0 8px;line-height:1.2}
#phone-register .bs-otp-lead{color:var(--ink-2);font-size:15px;line-height:1.5;margin:0 0 20px}
#phone-register .control-label{font-weight:600;color:var(--ink);margin-bottom:6px}
#phone-register .form-control{height:52px;font-size:16px;border-radius:var(--r-sm)} /* 16px — без zoom на iOS; 52px тач-ціль */
#phone-register #bs-otp-code{letter-spacing:.5em;text-align:center;font-size:26px;font-weight:700;padding-left:.5em}
#phone-register .btn-block{height:52px;font-size:16px;margin-top:14px}
#phone-register #bs-otp-resend{height:auto;min-height:44px;color:var(--ink-2);font-weight:600;margin-top:6px}
#phone-register #bs-otp-resend:disabled{color:var(--ink-3);text-decoration:none}
#phone-register #bs-otp-sent-to{color:var(--ink-3);font-size:13.5px;margin-top:8px}
#phone-register #bs-otp-alert .alert{margin-bottom:16px;border-radius:var(--r-sm)}
@media (max-width:480px){
  #phone-register .bs-otp-well{padding:20px 16px;margin:12px auto 28px;border-radius:12px}
  #phone-register .container{padding-left:12px;padding-right:12px}
}

/* ===== Модалка входу за номером (OTP) ===== */
.bs-auth-hint{color:var(--ink-3);font-size:12.5px;line-height:1.4;margin-top:10px;text-align:center}
.bs-auth-sentto{color:var(--ink-3);font-size:13px;margin:2px 0 4px}
#bsOtpCode{letter-spacing:.5em;text-align:center;font-size:22px;font-weight:700;padding-left:.5em}
#bsOtpResend{display:block;width:100%;background:none;border:0;padding:10px 0;margin-top:4px;cursor:pointer;font:inherit;text-align:center}
#bsOtpResend:disabled{opacity:.55;cursor:default}