/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ============================================================
   APPLE-GLASS MEGAMENU — glassmorphism / матове скло
   Тема світла (білий/чорний), акцент #2fb5d2.
   Вантажиться останнім (custom.css, priority 1000) → перебиває модуль.
   Структура: #iqitmegamenu-horizontal > ul.cbp-hrmenu > li.cbp-hrmenu-tab > a
   Sticky: #iqitmegamenu-horizontal.cbp-sticky (на повну ширину, fixed)
   ============================================================ */
:root{
  --glass-bg:        rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.80);
  --glass-blur:        saturate(180%) blur(18px);
  --glass-blur-strong: saturate(180%) blur(28px);
  --glass-edge:    rgba(255,255,255,.65);
  --glass-hairline: rgba(0,0,0,.08);
  --glass-text:     #1d1d1f;
  --glass-text-dim: #4a4a4f;
  --glass-accent:   #2fb5d2;
  --glass-hover:    rgba(0,0,0,.05);
  --glass-shadow:   0 22px 60px -14px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.06);

  /* Apple-easing криві */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);    /* плавне сповільнення (iOS-feel) */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* пружинка з овершутом */
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);     /* material/Apple-baseline */

  /* glass-градієнт-overlay для глибини на пунктах */
  --pill-highlight:  linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 50%);
}

/* ---- контейнери: робимо прозорими, скло — на самому барі ---- */
#iqitmegamenu-wrapper,
.iqit-megamenu-container{ background: transparent !important; box-shadow: none !important; }

/* ---- БАР (звичайний стан): плаваюча скляна «пігулка» ---- */
#iqitmegamenu-horizontal{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.7) !important;
  margin: 8px 0 !important;
  padding: 3px 6px !important;        /* було 5px 8px → коротший бар */
  transition: background .3s ease, box-shadow .3s ease, border-radius .3s ease;
}
#iqitmegamenu-horizontal .cbp-hrmenu{ background: transparent !important; border: 0 !important; }

/* ---- БАР (sticky): суцільна скляна смуга на всю ширину ---- */
#iqitmegamenu-horizontal.cbp-sticky{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 0 !important;
  border-bottom: 1px solid var(--glass-hairline) !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 28px -12px rgba(0,0,0,.18) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Пункти верхнього рівня — БЕЗ власного фону (фон тепер у liquid-pill) ---- */
#iqitmegamenu-horizontal .cbp-hrmenu{ position: relative; }  /* контекст для pill */
/* РОЗТЯГУЄМО ПУНКТИ ПО ВСІЙ ШИРИНІ БАРУ — рівні колонки на широких,
   природна ширина як floor при стисненні. */
#iqitmegamenu-horizontal .cbp-horizontal > ul,
#iqitmegamenu-horizontal .cbp-hrmenu > ul{
  display: flex !important;
  flex-wrap: nowrap;
  width: 100%;
  font-size: initial !important;   /* override .cbp-horizontal > ul { font-size: 0 } з front.css */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab{
  border: 0 !important;
  position: relative;            /* контекст для дропдауна .cbp-hrsub (absolute) */
  z-index: 1;
  flex: 1 1 0;                   /* рівна колонка В <ul> */
  min-width: max-content;        /* не стискаємось нижче ширини тексту */
  /* НЕ display:flex — лишаємо block-default, інакше ламається absolute-позиціонування дропдауна */
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a{
  display: block !important;     /* щоб <a> заповнив всю ширину <li> */
  width: 100% !important;
  text-align: center;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a{
  position: relative;
  z-index: 2;                /* текст над pill */
  color: var(--glass-text) !important;
  font-weight: 500;
  letter-spacing: .1px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;     /* було 980px (capsule) → скруглений прямокутник */
  margin: 2px 2px !important;          /* трохи стиснули vertically */
  padding: 6px 14px !important;        /* було 9px 16px → коротше і компактніше */
  white-space: nowrap !important;
  transition:
    color     .35s var(--ease-out-expo),
    transform .25s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a .cbp-tab-title{
  position: relative;
  white-space: nowrap !important;
}
/* HOVER: текст лишається чорним, стає жирним */
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a:hover{
  background: transparent !important;
  color: var(--glass-text) !important;
  font-weight: 700 !important;
}
/* OPEN: те саме (чорний + жирний) — щоб контрастно читалось на тонованому pill */
#iqitmegamenu-horizontal .cbp-hrmenu-tab.cbp-hropen > a{
  background: transparent !important;
  color: var(--glass-text) !important;
  font-weight: 700 !important;
}
/* PRESS: тільки scale-down тексту/контейнера, БЕЗ фону */
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a:active{
  transform: scale(.94);
  transition: transform .12s var(--ease-smooth);
}

/* ---- LIQUID PILL — Apple Liquid Glass (iOS 18 style) ----
   Pill виглядає так, ніби «піднявся» з поверхні бару — кнопка Control Center.
   Шари об'єму:
   • 0.5px світлий контур — гострий край скла
   • inset top-1px rim light — верхня підсвітка
   • inset bottom -1px hairline — нижня грань
   • outer 1-2px shadow — щільна короткa тінь (прив'язує до поверхні)
   • outer 8px shadow — м'яка довга (свічення на тлі бару) */
.atk-liquid-pill{
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  background: var(--glass-hover);
  background-image: var(--pill-highlight);
  border-radius: 12px;
  border: 0.5px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,.7),
    inset 0 -1px 0  rgba(0,0,0,.06),
    0 1px 2px       rgba(0,0,0,.08),
    0 8px 20px -6px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  will-change: transform, width, height, opacity;
  transition:
    transform .55s var(--ease-out-expo),
    width    .55s var(--ease-out-expo),
    height   .55s var(--ease-out-expo),
    opacity  .25s var(--ease-out-expo),
    background-color .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo);
}
.atk-liquid-pill.atk-no-transition{ transition: none !important; }

/* OPEN-STATE: pill активний (dropdown відкритий) — підсилюємо об'єм
   + тонуємо акцентом. Тіні стають довшими, наче pill піднявся ще вище. */
#iqitmegamenu-horizontal .cbp-hrmenu:has(.cbp-hrmenu-tab.cbp-hropen) .atk-liquid-pill{
  background-color: rgba(47,181,210,.10);
  border-color: rgba(47,181,210,.30);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,.7),
    inset 0 -1px 0  rgba(47,181,210,.10),
    0 2px 4px       rgba(47,181,210,.12),
    0 12px 28px -8px rgba(47,181,210,.25);
}
/* стрілка-chevron: трохи обертається при відкритому дропдауні */
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a .cbp-submenu-aindicator{
  display: inline-block;
  transition: transform .35s var(--ease-out-expo);
  margin-left: 4px;
  opacity: .6;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab.cbp-hropen > a .cbp-submenu-aindicator{
  transform: rotate(180deg);
  opacity: 1;
}
/* іконки в пунктах — у тон тексту/акценту */
#iqitmegamenu-horizontal .cbp-mainlink-icon{ color: inherit !important; opacity: .85; }
/* активна (поточна) категорія — теж чорний, але жирний для розпізнавання */
#iqitmegamenu-horizontal .cbp-hrmenu-tab.cbp-active > a{
  color: var(--glass-text) !important;
  font-weight: 700 !important;
}

/* ---- ВИПАДНІ ПАНЕЛІ: головне скло ---- */
.cbp-hrmenu .cbp-hrsub{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-edge) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  margin-top: 12px !important;
  overflow: visible;
  /* НЕ position: relative — це ламає absolute з front.css і панель починає
     штовхати сусідні таби, бар рветься на кілька рядків. Дефолт = absolute. */
}
/* ---- HOVER-МІСТ: 12px невидиме покриття між баром і панеллю,
   щоб дропдаун не зникав, коли курсор перетинає margin-top ---- */
.cbp-hrmenu .cbp-hrsub::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;            /* трошки більше за margin, щоб точно перекрити */
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
.cbp-hrmenu .cbp-hrsub-inner{
  background: transparent !important;
  padding: 14px 18px !important;
  border-radius: 20px;
  /* НЕ overflow:hidden — обрізало текст брендів у вузькій панелі */
}
.cbp-hrmenu .cbp-hrsub .cbp-inner-border-hider{ display: none !important; }

/* ---- ШИРИНА ПАНЕЛІ: col-3 Bootstrap дає ~80px у вузькому контейнері;
   фіксуємо мінімальну ширину, далі панель сама розтягнеться до контенту ---- */
.cbp-hrmenu .cbp-hrsub.col-3,
.cbp-hrmenu .cbp-hrsub.col-4{
  width: auto !important;
  min-width: 240px;
  max-width: 360px;
}

/* заголовки колонок / легенди — рафінована типографіка */
.cbp-hrsub .cbp-legend,
.cbp-hrsub .cbp-column-title,
.cbp-hrsub .cbp-tab-title{
  color: var(--glass-text) !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}

/* посилання в підменю — заокруглений hover-highlight */
.cbp-hrsub a{
  color: var(--glass-text-dim) !important;
  border-radius: 10px !important;
  transition: background .2s ease, color .2s ease, padding .2s ease !important;
}
.cbp-hrsub a:hover{
  background: var(--glass-hover) !important;
  color: var(--glass-accent) !important;
}
.cbp-hrsub .cbp-category-link-w > a{ padding: 6px 10px !important; }

/* плавна поява панелі: scale + fade + slight lift (iOS popup feel) */
.cbp-hrmenu-tab.cbp-hropen > .cbp-hrsub{
  animation: glassMenuIn .42s var(--ease-out-expo) both;
  transform-origin: top center;
}
@keyframes glassMenuIn{
  0%   { opacity: 0; transform: translateY(-12px) scale(.96); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* доступність: менше руху */
@media (prefers-reduced-motion: reduce){
  .cbp-hrmenu-tab.cbp-hropen > .cbp-hrsub{ animation: none; }
  #iqitmegamenu-horizontal, #iqitmegamenu-horizontal .cbp-hrmenu-tab > a{ transition: none; }
}
/* фолбек: якщо backdrop-filter не підтримується — щільніший фон */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #iqitmegamenu-horizontal{ background: rgba(255,255,255,.92) !important; }
  #iqitmegamenu-horizontal.cbp-sticky{ background: rgba(255,255,255,.96) !important; }
  .cbp-hrmenu .cbp-hrsub{ background: rgba(255,255,255,.97) !important; }
}

/* ============================================================
   ПІДМЕНЮ-СПИСОК БРЕНДІВ (contentType=3 → .cbp-valinks-vertical)
   Перебивати треба з !important + високою специфічністю:
   модуль ставить .cbp-hrmenu .cbp-links.cbp-valinks-vertical li {display:inline-block}
   (попри назву "vertical") і додає ">" стрілку через ::before.
   ============================================================ */

/* приховати дефолтні ">" стрілки з front.css (.cbp-links li a:before content "\f105") */
.cbp-hrmenu .cbp-hrsub .cbp-links li a::before{
  content: none !important;
  display: none !important;
}

/* справжній вертикальний список замість module's inline-block */
.cbp-hrmenu .cbp-hrsub .cbp-links.cbp-valinks-vertical{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}
.cbp-hrmenu .cbp-hrsub .cbp-links.cbp-valinks-vertical > li{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}
.cbp-hrmenu .cbp-hrsub .cbp-links.cbp-valinks-vertical > li > a{
  display: block !important;
  padding: 10px 14px !important;
  color: var(--glass-text) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  /* прозорий border-0.5px для стабільного layout (щоб ширина не «прыгала» при появі) */
  border: 0.5px solid transparent !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  position: relative !important;
  background-color: transparent !important;
  background-image: none;     /* gradient з'явиться на hover */
  /* плавне переливання усього — фон, колір, тіні, border, зсув */
  transition:
    background-color .28s var(--ease-out-expo),
    background-image .35s var(--ease-out-expo),
    color            .28s var(--ease-out-expo),
    border-color     .28s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo),
    padding-left     .35s var(--ease-spring),
    transform        .25s var(--ease-spring) !important;
  -webkit-tap-highlight-color: transparent;
}
/* HOVER: Apple Liquid Glass з сірим фоном (як у головному pill) */
.cbp-hrmenu .cbp-hrsub .cbp-links.cbp-valinks-vertical > li > a:hover{
  background-color: var(--glass-hover) !important;   /* сірий */
  background-image: var(--pill-highlight) !important; /* підсвітка зверху */
  border: 0.5px solid rgba(255,255,255,.6) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.7),
    inset 0 -1px 0   rgba(0,0,0,.06),
    0 1px 2px        rgba(0,0,0,.08),
    0 8px 20px -6px  rgba(0,0,0,.18);
  color: var(--glass-text) !important;
  font-weight: 700 !important;
  padding-left: 20px !important;
}
.cbp-hrmenu .cbp-hrsub .cbp-links.cbp-valinks-vertical > li > a:active{
  transform: scale(.97);
  transition: transform .1s var(--ease-smooth) !important;
}

/* ============================================================
   ПОШУК У ХЕДЕРІ — Apple Liquid Glass (узгоджено з кошиком)
   Selector: #search_widget .input-group (Bootstrap input-group обгортка).
   Glass — на КОНТЕЙНЕРІ (.input-group), input і button — прозорі.
   ============================================================ */
#search_widget .input-group{
  border-radius: 12px !important;
  background-color: var(--glass-bg) !important;
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 24px -10px rgba(0,0,0,.20);
  overflow: hidden;                                /* щоб inner-елементи не виходили за rounded edge */
  transition:
    background-color .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo);
}
/* FOCUS-WITHIN: коли input активний — лифт + посилена тінь (як hover кошика) */
#search_widget .input-group:focus-within{
  background-color: var(--glass-bg-strong) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.8),
    inset 0 -1px 0   rgba(0,0,0,.06),
    0 2px 4px        rgba(0,0,0,.10),
    0 12px 28px -8px rgba(0,0,0,.22);
}
/* input — прозорий, без border/shadow; padding/колір узгодити з кошиком */
#search_widget .input-group input[type="text"],
#search_widget .input-group input[name="s"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 11px 18px !important;        /* було 8px 14px → трошки більший */
  font-size: 15px !important;           /* було ~14px дефолт теми */
  color: var(--glass-text) !important;
  font-weight: 500;
}
#search_widget .input-group input[type="text"]:focus,
#search_widget .input-group input[name="s"]:focus{
  outline: none !important;
  box-shadow: none !important;
  /* НЕ font-weight: 700 — щоб не дьоргати layout (як було в кошику) */
}
#search_widget .input-group input::placeholder{
  color: var(--glass-text-dim) !important;
  opacity: .7;
}
/* кнопка-лупа — прозора, тільки іконка з кольором; на hover — акцент */
#search_widget .search-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--glass-text-dim) !important;
  padding: 11px 18px !important;        /* симетрично input */
  font-size: 15px !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease-out-expo), transform .25s var(--ease-spring);
}
#search_widget .search-btn:hover,
#search_widget .search-btn:focus-visible{
  color: var(--glass-accent) !important;
  transform: scale(1.08);
}
#search_widget .search-btn:active{
  transform: scale(.92);
  transition: transform .12s var(--ease-smooth);
}

/* ============================================================
   КНОПКА КОШИКА — Apple Liquid Glass (сірий-варіант, як у дропдауні)
   Selector: #cart-toogle (це власна назва класу від теми — НЕ опечатка)
   Reuse design-system recipe з notes/design-system.md §2.
   ============================================================ */
#cart-toogle{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  /* IDLE: постійна скляна підкладка (як мегаменю-бар) */
  background-color: var(--glass-bg) !important;
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 24px -10px rgba(0,0,0,.20);
  color: var(--glass-text) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .35s var(--ease-out-expo),
    color            .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo),
    transform        .25s var(--ease-spring) !important;
}
#cart-toogle:hover,
#cart-toogle:focus-visible{
  /* HOVER: щільніший фон + посилена 4-шарова тінь (pill піднявся вище) */
  background-color: var(--glass-bg-strong) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.8),
    inset 0 -1px 0   rgba(0,0,0,.06),
    0 2px 4px        rgba(0,0,0,.10),
    0 12px 28px -8px rgba(0,0,0,.22);
  color: var(--glass-text) !important;
  text-decoration: none !important;
  /* Псевдо-bold через text-shadow — НЕ змінює ширину тексту,
     тож пошукова форма поруч не «дьоргається». font-weight лишаємо 500. */
  text-shadow:
    0.45px 0 0 currentColor,
    -0.45px 0 0 currentColor;
}
#cart-toogle:active{
  transform: scale(.94);
  transition: transform .12s var(--ease-smooth) !important;
}
/* псевдо-bold каскадується на дочірні span-и через успадкування text-shadow,
   тож окремих правил не потрібно. */
/* іконка сумки — нейтральна, успадковує колір тексту */
#cart-toogle .fa-shopping-bag{
  color: inherit !important;
  transition: transform .25s var(--ease-spring);
}
#cart-toogle:hover .fa-shopping-bag{
  transform: scale(1.08);    /* легка анімація іконки */
}

/* ============================================================
   КНОПКИ КАРТКИ ТОВАРУ — Apple Liquid Glass
   • #quantity_wanted        — glass input (як пошук)
   • .add-to-cart            — PRIMARY акцентна бірюзова (CTA)
   • .btn-iqitwishlist-add   — secondary glass (♥, на hover червоніє)
   • .btn-iqitcompare-add    — secondary glass (↔, на hover акцент)
   ============================================================ */

/* QUANTITY INPUT — компактний glass, без високого padding щоб не штовхати spinner-buttons */
.product-add-to-cart #quantity_wanted,
#quantity_wanted{
  border-radius: 12px !important;
  background-color: var(--glass-bg) !important;
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 4px 12px -6px rgba(0,0,0,.15);
  padding: 6px 8px !important;            /* було 11px 14px */
  color: var(--glass-text) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-align: center;
  width: 56px !important;                 /* фіксована вузька ширина */
  min-width: 0 !important;
  height: auto !important;
  transition:
    background-color .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo);
}
#quantity_wanted:focus{
  outline: none !important;
  background-color: var(--glass-bg-strong) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.8),
    0 6px 14px -6px  rgba(0,0,0,.18);
}
/* нативні webkit/firefox spinner-стрілки в number-input — приховуємо
   (їх замінює Bootstrap-Touchspin плагін з ▲/▼ кнопками) */
#quantity_wanted::-webkit-inner-spin-button,
#quantity_wanted::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#quantity_wanted{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---- TOUCHSPIN-КАПСУЛА: уся група (input + ▲/▼) в одному glass-shell ----
   JS-плагін bootstrap-touchspin обертає <input> у <div class="bootstrap-touchspin">
   і додає <span.input-group-btn-vertical> з двома <button>. Стилізуємо всю
   групу як одну Liquid Glass капсулу, всередині — прозорі елементи з
   hairline-розділювачами. */
.bootstrap-touchspin{
  display: inline-flex !important;
  align-items: stretch;
  border-radius: 12px !important;
  background-color: var(--glass-bg) !important;
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 4px 12px -6px rgba(0,0,0,.15);
  overflow: hidden;
  transition:
    background-color .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo);
}
.bootstrap-touchspin:focus-within{
  background-color: var(--glass-bg-strong) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.8),
    0 6px 14px -6px  rgba(0,0,0,.18);
}
/* input всередині wrapper — прозорий (фон/border/тінь уже у wrapper) */
.bootstrap-touchspin #quantity_wanted,
.bootstrap-touchspin input[type="number"]{
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  width: 48px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--glass-text) !important;
}
.bootstrap-touchspin #quantity_wanted:focus{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* контейнер кнопок ▲/▼ — flex-column, hairline зліва від input */
.bootstrap-touchspin .input-group-btn-vertical{
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  border-left: 1px solid var(--glass-hairline);
}
/* самі кнопки — прозорі, hairline-розділювач між ▲ і ▼, hover-підсвітка */
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down{
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  width: 26px;
  min-width: 0 !important;
  padding: 0 6px !important;
  margin: 0 !important;
  flex: 1;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--glass-text-dim) !important;
  cursor: pointer;
  transition:
    background-color .2s var(--ease-out-expo),
    color            .2s var(--ease-out-expo);
}
.bootstrap-touchspin .bootstrap-touchspin-up{
  border-bottom: 1px solid var(--glass-hairline) !important;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover{
  background: rgba(0,0,0,.05) !important;
  color: var(--glass-text) !important;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn:active{
  background: rgba(0,0,0,.10) !important;
}
/* іконки всередині кнопок — скинути absolute-позиціонування з front.css */
.bootstrap-touchspin .input-group-btn-vertical > .btn i,
.bootstrap-touchspin .bootstrap-touchspin-up i,
.bootstrap-touchspin .bootstrap-touchspin-down i{
  position: static !important;
  top: auto !important;
  left: auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* «У КОШИК» — PRIMARY glass з ЛЕГКО СІРИМ фоном (виділяється на тлі сторінки).
   Idle = світло-сірий glass; hover = трохи темніший + лифт. */
.btn.add-to-cart,
button.add-to-cart{
  border-radius: 12px !important;
  background-color: rgba(0,0,0,.06) !important;       /* легкий сірий tint */
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  color: var(--glass-text) !important;
  font-weight: 500 !important;
  letter-spacing: .15px;
  padding: 11px 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 24px -10px rgba(0,0,0,.20);
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo),
    transform        .25s var(--ease-spring),
    color            .35s var(--ease-out-expo);
}
.btn.add-to-cart:hover,
.btn.add-to-cart:focus-visible{
  background-color: rgba(0,0,0,.09) !important;       /* трохи темніший на hover */
  border-color: rgba(255,255,255,.7) !important;
  color: var(--glass-text) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.7),
    inset 0 -1px 0   rgba(0,0,0,.06),
    0 2px 4px        rgba(0,0,0,.10),
    0 12px 28px -8px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
.btn.add-to-cart:active{
  transform: scale(.97);
  transition: transform .12s var(--ease-smooth);
}
.btn.add-to-cart .bag-icon{
  margin-right: 6px;
  transition: transform .25s var(--ease-spring);
}
.btn.add-to-cart:hover .bag-icon{
  transform: translateY(-1px) scale(1.05);
}
/* у списках товарів (related/similar) — компактніший padding, той самий стиль */
.btn.add-to-cart.btn-product-list{
  padding: 8px 14px !important;
  font-size: 14px !important;
  letter-spacing: 0;
}

/* WISHLIST / COMPARE — secondary glass іконкові */
.btn-iqitwishlist-add,
.btn-iqitcompare-add{
  border-radius: 12px !important;
  background-color: var(--glass-bg) !important;
  background-image: var(--pill-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge) !important;
  color: var(--glass-text) !important;
  padding: 11px 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 24px -10px rgba(0,0,0,.20);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .35s var(--ease-out-expo),
    border-color     .35s var(--ease-out-expo),
    box-shadow       .35s var(--ease-out-expo),
    transform        .25s var(--ease-spring),
    color            .35s var(--ease-out-expo);
}
.btn-iqitwishlist-add:hover,
.btn-iqitcompare-add:hover,
.btn-iqitwishlist-add:focus-visible,
.btn-iqitcompare-add:focus-visible{
  background-color: var(--glass-bg-strong) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0    rgba(255,255,255,.8),
    inset 0 -1px 0   rgba(0,0,0,.06),
    0 2px 4px        rgba(0,0,0,.10),
    0 12px 28px -8px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
/* окремі hover-кольори для іконок: серце — червоне, compare — акцент */
.btn-iqitwishlist-add:hover{ color: #e63946 !important; }
.btn-iqitcompare-add:hover{ color: var(--glass-accent) !important; }
.btn-iqitwishlist-add .fa,
.btn-iqitcompare-add .fa{
  transition: transform .25s var(--ease-spring);
}
.btn-iqitwishlist-add:hover .fa,
.btn-iqitcompare-add:hover .fa{
  transform: scale(1.15);
}
.btn-iqitwishlist-add:active,
.btn-iqitcompare-add:active{
  transform: scale(.94);
  transition: transform .12s var(--ease-smooth);
}

/* ============================================================
   ФАСЕТИ — прокручуваний список для довгих фільтрів (Тип деталі ~99)
   Короткі фасети (Бренд/Ціна/Тип запчастини) не зачіпаються (нижче 320px).
   ============================================================ */
#search_filters .facet .facet-type-checkbox{
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
#search_filters .facet-type-checkbox{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
#search_filters .facet-type-checkbox::-webkit-scrollbar{ width: 7px; }
#search_filters .facet-type-checkbox::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 4px; }
#search_filters .facet-type-checkbox::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.35); }
#search_filters .facet-type-checkbox li{ line-height: 1.5; }