html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}
a {
    text-decoration: none;
}
img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
} 
.btn-check:active+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    background-color: #fff;
    color: #0d6efd;
    border-color: #0d6efd;
}

label.btn-outline-primary:hover {
    background-color: #fff;
    color: #0d6efd;
    border-color: #0d6efd;
}
.navbar {
    min-height: 100px;
    padding-top:0;
    padding-bottom:0;
}
.container-app {
    padding-top: 100px;
    padding-bottom: 76px;
    /*    padding-left: 10px;
        padding-right: 10px;*/
}
.btn-app {
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}
.col-cat {
    padding: 5px;
}
.footer-app .col {
    padding: 10px 5px;
}
.header-app h2 {
    margin: 0;
    line-height: 72px;
}
.header-app .col {
    padding: 5px;
    padding-top: 10px;
}
.container-product {
    padding-top: 105px;
}
.container-category {
    padding-top: 105px;
}
.container-products {
    padding-top: 105px;
}
.container-products .col-cat a {
    margin-bottom: 10px;
}

.lds-dual-ring {
    display: none;
    width: 64px;
    height: 64px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid red;
    border-color: red transparent red transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
.cover-anim {
    display: none;
    width: 64px;
    height: 64px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: 10px;
    color: red;
}

.img-fluid {
    border: none;
}

.cover-anim img {
    margin-top: 20px;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.search-wrap{
  position: relative;
  width: 500px;
  max-width: 100%;
  margin-left: auto;
}

.search-wrap .fa-search{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#3a1f0f;
}

.search-wrap input{
  width:100%;
  border:none;
  border-bottom:2px solid #3a1f0f;
  padding:6px 6px 6px 32px;
  font-size:18px;
  outline:none;
  background:transparent;
}

#suggestBox{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:9999;
}


/* =========================================
   UI LIFT: typografia + karty + miękkość
   Wklej na KONIEC style.css
   ========================================= */

/* Paleta (z wnętrza: burgund/krem/brąz) */
:root {
  --ui-primary: #7b2d2d;
  --ui-text: #3a1f0f;
  --ui-muted: #8a6b5a;
  --ui-bg: #faf7f5;
  --ui-card: #ffffff;
  --ui-border: rgba(58, 31, 15, 0.10);
  --ui-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --ui-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.10);
  --ui-radius: 14px;
}

/* Delikatniejsze tło + tekst */
body {
  background: var(--ui-bg);
  color: var(--ui-text);
}

/* Linki czytelniejsze */
a {
  color: inherit;
}

/* -----------------------------------------
   Typografia (bez rewolucji)
   Jeśli dodasz fonty przez <link> w headerze,
   to tu zadziała od razu.
----------------------------------------- */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------
   Header / navbar: mniej "kanciato"
----------------------------------------- */
.navbar {
  min-height: 96px; /* lekko niżej niż 100 */
}

.header-app h2 {
  color: var(--ui-text);
  letter-spacing: 0.2px;
}

/* -----------------------------------------
   Kontenery: więcej oddechu
----------------------------------------- */
.container-app {
  padding-top: 100px;
  padding-bottom: 86px; /* troszkę więcej pod stopkę */
}

.container-products,
.container-category,
.container-product {
  padding-top: 108px;
}

/* -----------------------------------------
   Karty produktów / kafle w listach
----------------------------------------- */
.col-cat {
  padding: 8px;
}

.col-cat a {
  display: block;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 10px;
  box-shadow: var(--ui-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.col-cat a:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-hover);
  border-color: rgba(123, 45, 45, 0.18);
}

/* Obrazek w kaflu: łagodniejsze rogi */
.col-cat img,
.container-products img {
  border-radius: 12px;
}

/* -----------------------------------------
   Nazwy produktów: uporządkowanie
   (obsługujemy kilka typowych struktur HTML)
----------------------------------------- */

/* Jeśli tytuł jest w h3/h4 w kaflu */
.col-cat h3,
.col-cat h4,
.col-cat .title,
.col-cat .product-title,
.container-products h3,
.container-products h4 {
  margin: 8px 2px 4px;
  line-height: 1.25;
  font-size: 16px;
  /*font-weight: 600;*/
  color: var(--ui-text);
  letter-spacing: 0.1px;
}

/* Jeśli masz dodatkowy opis pod nazwą */
.col-cat .subtitle,
.col-cat .desc,
.col-cat .product-subtitle,
.col-cat small,
.container-products .subtitle {
  display: block;
  margin: 0 2px 2px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ui-muted);
  font-weight: 500;
}

/* Ceny / wyróżnienia (jeśli występują) */
.price,
.product-price,
.col-cat .price,
.container-products .price {
  color: var(--ui-primary);
  font-weight: 700;
}

/* -----------------------------------------
   Przyciski / elementy klikalne: miękko
----------------------------------------- */
.btn,
.btn-app {
  border-radius: 12px;
}

.btn-outline-primary {
  border-color: rgba(123, 45, 45, 0.45);
  color: var(--ui-primary);
}

.btn-outline-primary:hover {
  background: rgba(123, 45, 45, 0.06);
  border-color: rgba(123, 45, 45, 0.65);
  color: var(--ui-primary);
}

/* -----------------------------------------
   Wyszukiwarka: bardziej "premium" i lżejsza
----------------------------------------- */
.search-wrap{
  position: relative;
  width: 500px;
  max-width: 100%;
  margin-left: auto;
}

.search-wrap .fa-search {
  color: var(--ui-muted);
}

.search-wrap input {
  border-bottom: 2px solid rgba(58, 31, 15, 0.25);
  color: var(--ui-text);
  font-size: 16px;
  padding: 8px 8px 8px 34px;
}

.search-wrap input:focus {
  border-bottom-color: rgba(123, 45, 45, 0.55);
}

/* Sugestie: miękki dropdown */
#suggestBox {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}

/* -----------------------------------------
   Stopka / dolne menu: delikatniej
----------------------------------------- */
.footer-app .col {
  padding: 10px 6px;
}

.footer-app {
  border-top: 1px solid rgba(58, 31, 15, 0.10);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ================================
   LOADER – mrożona szyba (POPRAWNIE)
   ================================ */

/* Domyślnie: brak loadera */
/* Loader aktywny */
/* Spinner */
cover .lds-dual-ring {
  display: block;
}

/* ===== BLUR TREŚCI ===== */
/* UWAGA: blurujemy CAŁE body, ale wyłączamy navbar i footer */
body.loading content {
  filter: blur(14px);
  transition: filter 0.2s ease;
}

/* Navbar i footer zawsze ostre */
body.loading .navbar,
body.loading .footer-app {
  filter: none !important;
}

/* =========================================
   Navbar – lekko przezroczysty (glass)
   ========================================= */

.navbar {
  background: rgba(255, 255, 255, 0.85); /* przezroczystość */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(58, 31, 15, 0.08);
}

/* Jeśli navbar ma klasę bootstrapową */
.navbar.bg-light,
.navbar.bg-dark,
.navbar.bg-white {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Delikatny cień – „unosi się” nad treścią */
.navbar {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* =========================================
   Dolny pasek – zaokrąglone buttony
   ========================================= */

/* Kolumny jako „buttony” */
.footer-app .col a,
.footer-app .col button {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;          /* miękkie rogi */
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.85);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: 
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

/* Hover / aktywne */
.footer-app .col a:hover,
.footer-app .col button:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Ikony + tekst w buttonach */
.footer-app i,
.footer-app svg {
  margin-bottom: 2px;
}

/* Tekst */
.footer-app span,
.footer-app small {
  font-size: 12px;
  font-weight: 600;
  color: #3a1f0f;
}
/* =========================================
   Karta produktu – nazwa (ujednolicenie)
   ========================================= */

/* TYLKO karta produktu */
.container-product h1 {
	font-family: 'Bebas Neue', cursive;
	font-size: 2.5rem;
}


/* =========================================
   PRODUCTS SPLIT VIEW (products.php)
   Lewa lista + prawa kolumna (podgląd produktu / reklama)
   ========================================= */

.products-split-row {
  min-height: calc(100vh - 100px - 76px); /* header ~100, footer ~76 */
}

.products-left-scroll,
.products-right-scroll {
  max-height: calc(100vh - 100px - 76px);
  overflow-y: auto;
  padding-right: 6px;
}

/* Prawa kolumna – lekki odstęp */
.products-right .product-pane {
  padding: 14px;
}

/* Reklama 800x800 */
.product-ad-img {
  width: min(800px, 100%);
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(58, 31, 15, 0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.product-ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(800px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px dashed rgba(58, 31, 15, 0.25);
  background: rgba(255,255,255,0.60);
}

.product-ad-box {
  font-size: 18px;
  font-weight: 600;
  color: rgba(58, 31, 15, 0.60);
}

/* Aktywny produkt na liście */
.product-link.is-active {
  border-color: rgba(123, 45, 45, 0.35) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
  transform: translateY(-1px);
}

.product-link.is-active .card-title {
  color: #7b2d2d;
}

/* Prawa kolumna – typografia (podgląd produktu) */
.product-detail {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(58, 31, 15, 0.10);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.product-detail .product-title {
  margin: 0 0 8px 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 700;
  color: #3a1f0f;
}

.product-detail .product-lead {
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 500;
  color: #8a6b5a;
}

.product-detail .product-lead p { margin: 0; }

.product-pane-error {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(123, 45, 45, 0.25);
  color: #7b2d2d;
  font-weight: 600;
}

/* Prev/Next w stopce – stan disabled */
#btnPrev.is-disabled,
#btnNext.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ================================
   FIX: #cover nie może blur'ować, gdy nie jest .on
   ================================ */

/* Dopiero w stanie ON: mrożona szyba + blokada klików */
/* Spinner tylko gdy ON */
#cover .lds-dual-ring { display: none; }

/* ================================
   LOADER (kręciołek + mrożona szyba) – jedna wersja
   ================================ */

/* Treść domyślnie ostra */
#content { filter: none; }

/* Gdy loader ON: blur treści */
#content.on { filter: blur(14px); }

/* Cover domyślnie niewidoczny */
#cover {
  position: fixed;
  inset: 0;
  z-index: 1666;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Cover ON */
#cover.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Spinner / animacje tylko gdy ON */
#cover .lds-dual-ring { display: none; }
#cover.on .lds-dual-ring { display: inline-block; }

#cover .cover-anim { display: none; }
#cover.on .cover-anim { display: block; }




/* =========================================
   GLOBAL KILL SWITCH – BRAK ANIMACJI
   Touch-first UX
   ========================================= */

/* Wyłącz wszystko */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

/* Pewność: brak transformacji na hover/focus */
a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active {
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================
   PRAWA KOLUMNA – layout & scroll
   ========================================= */

/* Wrapper prawej kolumny */
.product-pane {
  height: calc(100vh - 176px); /* navbar + footer */
  overflow-y: auto;
  overflow-x: hidden;

  padding: 16px;
}

/* Kontent produktu – BEZ tła, BEZ obrysu */
.product-pane .product-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Reklama (placeholder 800x800) – może mieć tło */
.product-pane .product-ad {
  background: #faf7f5;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 800px;
}
/* =========================================
   Active product highlight (lewa kolumna)
   Styl: ciepły beż + burgund (Sowa)
   ========================================= */

.product-link.is-active {
  background: #f6efe6 !important;              /* ciepły beż */
  border: 1px solid rgba(63, 24, 6, 0.22) !important; /* brąz/czekolada z palety */
  border-left: 8px solid #7b2d2d !important;   /* burgund */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10) !important;
}

/* Żeby tło beżowe było widoczne nawet gdy "card" ma własne tło */
.product-link.is-active .card,
.product-link.is-active .card-body {
  background: transparent !important;
}

/* Tekst w aktywnym – delikatnie ciemniej */
.product-link.is-active .card-title {
  color: #3f1806 !important;
}

/* Opcjonalnie: mały oddech wizualny bez animacji (bez transform) */
.product-link {
  border-radius: 14px;
}
/* Fallback, jeśli nie ma klasy product-link */
.products-left-scroll a.is-active {
  background: #f6efe6 !important;
  border: 1px solid rgba(63, 24, 6, 0.22) !important;
  border-left: 8px solid #7b2d2d !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10) !important;
  border-radius: 14px;
}

.products-left-scroll a.is-active .card,
.products-left-scroll a.is-active .card-body {
  background: transparent !important;
}

/* Active item – lewa kolumna */
.products-left-scroll a.is-active {
  background: #f6efe6 !important;
  border: 1px solid rgba(63, 24, 6, 0.22) !important;
  border-left: 8px solid #7b2d2d !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10) !important;
  border-radius: 14px;
}

.products-left-scroll a.is-active .card,
.products-left-scroll a.is-active .card-body {
  background: transparent !important;
}

.products-left-scroll a.is-active .card-title {
  color: #3f1806 !important;
}
/* Aktywny produkt na liście – ciepły beż + burgund (Sowa) */
a.product-link.is-active {
  background: #f6efe6 !important;                 /* ciepły beż */
  border-left: 8px solid #7b2d2d !important;      /* burgund */
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
}

/* Żeby beż był widoczny, gdy wewnątrz jest .card-body */
a.product-link.is-active .card,
a.product-link.is-active .card-body {
  background: transparent !important;
}

/* Delikatnie ciemniejszy tytuł aktywnego */
a.product-link.is-active .card-title {
  color: #3f1806;
}

/* Miękkie rogi dla całego klikalnego wiersza */
a.product-link {
  display: block;
  border-radius: 14px;
}
.product-lead-list {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #8a6b5a;
  font-weight: 500;
}

/* ================================
   MODAL ZDJĘCIA PRODUKTU
   ================================ */

.img-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  
}

.img-modal-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-modal-box {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  max-width: 90vw !important;
  max-height: 90vh !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.img-modal-box img {
  max-width: 80vw;
  max-height: 80vh;
  display: block;
}

.img-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #3a1f0f;
}

/* ================================
   MODAL ZDJĘCIA – center + fade
   ================================ */

.img-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  z-index: 99999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.img-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.img-modal-box {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;

  width: auto;
  height: auto;

  max-width: 90vw;
  max-height: 90vh;

  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  transform: scale(0.96);
  transition: transform 0.5s ease;
}

.img-modal-overlay.is-open .img-modal-box {
  transform: scale(1);
}

.img-modal-box img {
  display: block;
  width: auto;
  height: auto;

  max-width: 90vw;
  max-height: 90vh;

  object-fit: contain;
}

.img-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;

  border: none;
  background: transparent;
  cursor: pointer;

  font-size: 32px;
  line-height: 1;
  color: #3a1f0f;
}

/* ================================
   MODAL ZDJĘCIA – tytuł + nawigacja
   ================================ */

.img-modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-modal-noimg {
  padding: 32px 24px;
  color: rgba(58, 31, 15, 0.65);
  font-weight: 600;
  text-align: center;
}

.img-modal-title {
  font-family: 'Bebas Neue', cursive;
  margin-top: 12px;
  text-align: center;
  font-size: 1.25rem;
  color: #3a1f0f;
  line-height: 1.2;
}

.img-modal-nav {
  margin-top: 12px;
}

.img-modal-nav .col {
  padding: 6px 6px 0 6px;
}

/* Buttony w modalu – identyczna baza jak .footer-app .col a/button */
.img-modal-nav .col a,
.img-modal-nav .col button {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  padding: 10px 6px;
  background: rgba(55, 25, 9, 1);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Tekst (jak w stopce) */
.img-modal-nav .col a,
.img-modal-nav .col button {
  font-size: 1.25rem;
  /*font-weight: 600;*/
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

/* Disabled jak w stopce (spójnie z JS) */
#imgBtnPrev.is-disabled,
#imgBtnNext.is-disabled,
#imgBtnPrev:disabled,
#imgBtnNext:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/*ALERGENY WYBÓR*/
.alergens .btn {
	border-radius: 27px;
}

/* wyłączenie niebieskiej obwódki focus dla przycisków aplikacji */
.btn-app:focus,
.btn-app:focus-visible,
.btn-check:focus + .btn-app,
.btn-check:checked + .btn-app:focus,
.btn-check:checked + .btn-app:focus-visible,
.alergens .btn:focus,
.alergens .btn:focus-visible,
.alergens .btn-check:focus + .btn,
.alergens .btn-check:focus-visible + .btn,
.alergens .btn-check:checked + .btn:focus,
.alergens .btn-check:checked + .btn:focus-visible{
    outline: none !important;
    box-shadow: none !important;
}
label.btn-app.zaznaczall,
label.btn-app.kategorie,
label.btn.predyspozycje,
label.btn.alergeny,
label.btn.sladowe {
	background: #f6efe6 !important;
}
/* =========================================
   SEARCH SUGGEST – FINAL OVERRIDE
   tło: #f6efe6, tekst: #3f1806
   ========================================= */

/* Kontener podpowiedzi */
#suggestBox {
  background-color: #f6efe6 !important;
  color: #3f1806 !important;

  border: 1px solid rgba(63, 24, 6, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;

  overflow-y: auto !important;
}

/* WAŻNE: wymuś tło/tekst na wszystkich elementach w środku */
#suggestBox * {
  color: #3f1806 !important;
  background-color: transparent !important;
}

/* Wiersze podpowiedzi – ustawiamy „bazę” */
#suggestBox > *,
#suggestBox a,
#suggestBox div,
#suggestBox li {
  display: block !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
}

/* Hover / focus / active – żeby nie było efektu „działa dopiero po najechaniu” */
#suggestBox > *:hover,
#suggestBox > *:focus,
#suggestBox > *:active,
#suggestBox a:hover,
#suggestBox a:focus,
#suggestBox a:active,
#suggestBox div:hover,
#suggestBox div:focus,
#suggestBox div:active,
#suggestBox li:hover,
#suggestBox li:focus,
#suggestBox li:active,
#suggestBox .active,
#suggestBox .hover {
  background-color: rgba(63, 24, 6, 0.08) !important;
  color: #3f1806 !important;
}

/* Jeśli któryś element miał tło z inline style, to i tak wymusimy je tak: */
#suggestBox [style*="background"],
#suggestBox [style*="color"] {
  background-color: transparent !important;
  color: #3f1806 !important;
}

/* Scrollbar pod #suggestBox (Chrome/Edge/Safari) */
#suggestBox::-webkit-scrollbar {
  width: 8px;
}
#suggestBox::-webkit-scrollbar-track {
  background: #f6efe6;
}
#suggestBox::-webkit-scrollbar-thumb {
  background: rgba(63, 24, 6, 0.35);
  border-radius: 8px;
}
#suggestBox::-webkit-scrollbar-thumb:hover {
  background: rgba(63, 24, 6, 0.55);
}

/* Firefox */
#suggestBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 24, 6, 0.45) #f6efe6;
}

.card h3 {
	font-size: 2.5rem !important;
}

.product-lead-list { white-space: pre-line; }