/* ===============================
   KOSZYK I PRODUKTY
   =============================== */

.cart-preview.active:hover i,
.cart-preview.active:hover svg path,
.cart-preview.has-products:hover i,
.cart-preview.has-products:hover svg path {
  color: #28a745 !important;
  fill: #28a745 !important;
  stroke: #28a745 !important;
}

.product-miniature button[data-button-action="add-to-cart"] {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.product-miniature button[data-button-action="add-to-cart"]:hover {
    background-color: #222 !important;
    border-color: #222 !important;
}

.product-miniature .js-quickview {
    display: none !important;
}

.header-block__action-btn {
    position: relative;
}

.header-block__badge {
    position: absolute;
    top: 2px;
    right: 11px;
    background-color: #ff0000 !important;
    color: #fff !important;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
}

#_desktop_contact_link {
    display: none;
}

/* ===============================
   SLIDER
   =============================== */

#home-slider.ratio-homeSlider {
    height: 700px;
}

#home-slider .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    #home-slider.ratio-homeSlider {
        height: 600px;
    }
}

/* ===============================
   HEADER I MENU – overlay + transparent
   NAPRAWA (2026-09): ograniczone do desktopu (min-width: 768px).
   Wcześniej te reguły działały też na mobile - #header dostawał
   position:absolute + z-index:9999, co tworzyło "stacking context"
   w którym uwięzione było mobilne menu (offcanvas) i jego tło
   (backdrop), przez co menu mobilne renderowało się puste / tło
   zasłaniało kategorie. Na mobile #header ma teraz zostać w swoim
   normalnym, domyślnym zachowaniu z motywu Hummingbird.
   =============================== */

@media (min-width: 768px) {

#header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

#header .header-top,
#header .header-nav,
#header .header-main,
#header .header-bottom {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

}

#home-slider,
.ps_imageslider,
#carousel {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

body,
#wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===============================
   HEADER – sticky po scrollu
   NAPRAWA (2026-09): ograniczone do desktopu (min-width: 768px).
   Ta sekcja używała backdrop-filter (nawet blur(0px)), co również
   tworzy własny "stacking context" i na mobile blokowało poprawne
   wyświetlanie menu (offcanvas) w tym samym mechanizmie co powyżej.
   =============================== */

@media (min-width: 768px) {

#header.scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

#header .header-bottom {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.5s ease;
}

#header.scrolled,
#header.scrolled .header-top,
#header.scrolled .header-nav,
#header.scrolled .header-main,
#header.scrolled .header-bottom {
    background-color: #ffffff !important;
    backdrop-filter: blur(6px);
    transition: background-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
}

#header.scrolled a,
#header.scrolled .header-top a,
#header.scrolled .header-nav a,
#header.scrolled .header-main a,
#header.scrolled .header-bottom a {
    color: #fff !important;
}

#header.scrolled select,
#header.scrolled .form-select {
    color: #fff !important;
}

#header.scrolled .header-block__action-btn i,
#header.scrolled .header-block__action-btn svg path {
    color: #fff !important;
    fill: #fff !important;
}

#header.scrolled::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);
    position: relative;
    top: 0;
}

}

/* ===============================
   PRZESUNIĘCIE ZDJĘCIA KATEGORII POD HEADER
   (breadcrumb ukryty, odstęp przeniesiony na block-category)
   =============================== */

.page-category .breadcrumb {
    display: none !important;
}

.page-category .block-category {
    margin-top: 140px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .page-category .block-category {
        margin-top: 100px;
    }
}

/* ===============================
   ZDJĘCIE KATEGORII NA PEŁNĄ SZEROKOŚĆ
   =============================== */

.block-category .category-cover {
  width: 100%;
  margin-bottom: 2rem;
}

.block-category .category-cover img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ===============================
   ODSTĘP MIĘDZY BREADCRUMB A ZDJĘCIEM KATEGORII
   =============================== */

.page-category .breadcrumb__wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ===============================
   KOLOR PASKA BREADCRUMB
   =============================== */

.breadcrumb__wrapper {
    background-color: #ffffff !important;
}

/* ===============================
   WYSZUKIWARKA NA ŚRODKU – tylko strona koszyka
   =============================== */

body.page-cart .header-bottom__row {
  position: relative;
}

body.page-cart #_desktop_search {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  order: unset !important;
}

/* ===============================
   LOGO W HEADER-TOP – tylko strona koszyka
   =============================== */

body.page-cart .header-bottom,
body.page-cart .header-bottom__container,
body.page-cart .header-bottom__row {
  overflow: visible !important;
}

body.page-cart .header-top {
  z-index: 1 !important;
}

body.page-cart .header-bottom .logo {
  position: absolute !important;
  top: -18px !important;
  left: 40px !important;
  z-index: 99999 !important;
  width: auto !important;
  flex: none !important;
  height: 44px !important;
  align-items: center !important;
}

body.page-cart .header-bottom .logo a {
  display: block !important;
  width: 100px !important;
}

body.page-cart .header-bottom .logo a img {
  width: 100px !important;
  height: 28px !important;
  display: block !important;
}

@media (max-width: 767px) {
  body.page-cart .header-bottom .logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
  }
}

/* ===============================
   BRAK STICKY MENU – tylko strona koszyka
   =============================== */

body.page-cart #header.scrolled {
  position: absolute !important;
}

/* ===============================
   UKRYJ MENU KATEGORII – tylko strona koszyka
   =============================== */

body.page-cart #header .main-menu {
  display: none !important;
}

/* ===============================
   UKRYJ CONTINUE SHOPPING – tylko strona koszyka
   =============================== */

body.page-cart .cart-grid__body .btn-outline-primary {
  display: none !important;
}

.blockreassurance_product {
  display: none !important;
}

.featured-products {
  margin-top: -50px !important;
}

body#checkout .header-bottom .main-menu,
body#checkout .header-bottom #_desktop_search {
    display: none !important;
}

#customer-form .form-text {
    display: none !important;
}

body#checkout .js-sticky-header.scrolled {
    position: static !important;
    top: auto !important;
}

body#checkout p.fw-bold.fs-5.mb-0 {
    display: none !important;
}

.js-back {
  display: none !important;
}

body#checkout #footer .email-subscription {
    display: none !important;
}

#delivery textarea#delivery_message {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
}

.footer__main a[title="Order tracking"],
.footer__main a[title="My alerts"],
.footer__main a[title="Bestellverfolgung"],
.footer__main a[title="Meine Benachrichtigungen"],
.footer__main a[title="Sendungsverfolgung"],
.footer__main a[title="Benachrichtigungen"] {
    display: none !important;
}

#cart .breadcrumb__wrapper {
  display: none !important;
  height: 0;
  margin: 0;
  padding: 0;
}

#cart #wrapper {
  padding-top: 108px !important;
}

@media (min-width: 768px) {
  #cart .logo {
    margin-left: -40px !important;
  }
}

.js-address-form [name="alias"],
.js-address-form label[for="field-alias"] {
  display: none;
}

.js-address-form [name="alias"] ~ .form-text {
  display: none;
}

.page-authentication .breadcrumb {
  display: none;
}

.page-authentication .main-menu__tree {
  display: none;
}

@media (min-width: 992px) {
  .page-authentication .logo {
    margin-top: -20px;
  }
}

.page-registration .breadcrumb {
  display: none;
}

.page-registration .main-menu__tree {
  display: none;
}

@media (min-width: 992px) {
  .page-registration .logo {
    margin-top: -20px;
  }
}

.page-my-account .breadcrumb {
  display: none;
}

.page-my-account .main-menu__tree {
  display: none;
}

@media (min-width: 992px) {
  .page-authentication .logo,
  .page-registration .logo,
  .page-my-account .logo {
    position: relative;
    top: -30px;
  }
}

.page-customer-account .footer__before {
    display: none !important;
}

.page-my-account .page-header {
    text-align: center;
    margin-top: 120px;
    padding-bottom: 55px;
}

.page-my-account .page-header h1 {
    font-size: 3.5rem !important;
    font-weight: 700;
    line-height: 1.2;
}

.page-my-account .link-item {
    display: block;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-my-account .link-item:hover {
    background-color: #007bff;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

#_desktop_user_info .dropdown-menu a:hover {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.1) !important;
}

body#identity .breadcrumb {
  display: none;
}

body#identity .main-menu {
  display: none !important;
}

body#identity .page-header {
  margin-top: 40px;
  text-align: center;
}

body#identity #header {
  position: static !important;
}

body#addresses .breadcrumb {
  display: none;
}

body#addresses .main-menu {
  display: none !important;
}

body#addresses #header {
  position: static !important;
}

body#addresses .page-header {
  margin-top: 30px;
  text-align: center;
}

body#addresses .email-subscription__content {
  display: none !important;
}

body#history .breadcrumb {
  display: none;
}

body#history .main-menu {
  display: none !important;
}

body#history #header {
  position: static !important;
}

body#history .page-header {
  margin-top: 30px;
  text-align: center;
}

body#history #wrapper {
  min-height: calc(100vh - 470px);
}

body#order-slip .breadcrumb {
  display: none;
}

body#order-slip .main-menu {
  display: none !important;
}

body#order-slip #header {
  position: static !important;
}

body#order-slip .page-header {
  margin-top: 30px;
  text-align: center;
}

body#order-slip #wrapper {
  min-height: calc(100vh - 470px);
}

body#module-psgdpr-gdpr .breadcrumb {
  display: none;
}

body#module-psgdpr-gdpr .main-menu {
  display: none !important;
}

body#module-psgdpr-gdpr #header {
  position: static !important;
}

body#module-psgdpr-gdpr .page-header {
  margin-top: 30px;
  text-align: center;
}

body#module-psgdpr-gdpr #wrapper {
  min-height: calc(100vh - 470px);
}

body#module-ps_emailalerts-account .breadcrumb {
  display: none;
}

body#module-ps_emailalerts-account .main-menu {
  display: none !important;
}

body#module-ps_emailalerts-account #header {
  position: static !important;
}

body#module-ps_emailalerts-account .page-header {
  margin-top: 30px;
  text-align: center;
}

body#module-ps_emailalerts-account .email-subscription__content {
  display: none !important;
}

body#module-ps_emailalerts-account #wrapper {
  min-height: calc(100vh - 525px);
}

body#address .breadcrumb {
  display: none;
}

body#address .main-menu {
  display: none !important;
}

body#address #header {
  position: static !important;
}

body#address .page-header {
  margin-top: 1px;
  text-align: center;
}

body#contact .breadcrumb {
  display: none;
}

body#contact .main-menu {
  display: none !important;
}

body#contact #header {
  position: static !important;
}

body#contact .page-header {
  margin-top: 80px;
  text-align: center;
}

body#contact .email-subscription__content {
  display: none !important;
}

body#registration #header {
  position: static !important;
}

#blockcart-modal {
    z-index: 10001 !important;
}

.modal-backdrop {
    z-index: 10000 !important;
}

@media (min-width: 992px) {
  .page-authentication .logo {
    position: relative;
    top: 10px;
  }
  .page-registration .logo,
  .page-my-account .logo {
    position: relative;
    top: -30px;
  }
}

.page-my-account #header {
  position: static !important;
}

/* 5 produktów w rzędzie w sekcji Popular Products na stronie głównej */
.featured-products .products .col-xl-3 {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

.product.js-product-container {
  margin-top: 60px;
}

body#product .email-subscription,
body.page-product .email-subscription,
body[class*="product"] .email-subscription {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 992px) {

  .product__images.js-images-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 15px;
  }

  .product__images .carousel {
    order: 2;
    flex: 1;
  }

  .product__images .thumbnails__container {
    order: 1;
    width: 90px;
    flex-shrink: 0;
  }

  .product__images .thumbnails__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .product__images .thumbnail {
    width: 100% !important;
  }
}

@media (max-width: 991px) {
  .product__images.js-images-container {
    display: block !important;
  }

  .product__images .thumbnails__list {
    flex-direction: row !important;
    overflow-x: auto;
  }
}

#product-details,
body#product #product-details,
body.page-product #product-details,
body[class*="product"] #product-details {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

body#product #product-comments,
body#product .product-comments,
body#product .js-product-comments,
body#product .comments-area,
body#product #reviews,
body#product .product-tab-reviews,
body#product [id*="comment"],
body#product [class*="comment"] {
  display: none !important;
}

.product__description-short {
  background: #f0f4ff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 12px rgba(80,120,255,0.10);
}

#product-availability,
.product-availability,
.js-product-availability {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

h1 {
  font-weight: 700 !important;
  font-size: 34px !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.co-box {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

.co-wrap {
  width: 100%;
  overflow: hidden;
}

.co-arrow {
  transition: transform 0.25s;
}

.co-btn.open .co-arrow {
  transform: rotate(180deg);
}

.co-content {
  padding: 12px 0;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .co-content {
    font-size: 16px;
    font-weight: 500;
  }
}

/* ===== FIX: Produkty - poziomy scroll + przyciski na mobile ===== */
@media (max-width: 767px) {
  .featured-products .products,
  .sale-products .products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 12px !important;
    gap: 0 !important;
  }

  .featured-products .products .product-miniature,
  .sale-products .products .product-miniature,
  .featured-products .products .col-xl-3,
  .sale-products .products .col-xl-3 {
    width: 60vw !important;
    flex: 0 0 60vw !important;
    max-width: 60vw !important;
    scroll-snap-align: start !important;
  }

  .product-miniature__infos__bottom form.d-flex {
    flex-wrap: nowrap !important;
    height: auto !important;
  }

  .product-miniature__infos__bottom form .btn {
    width: 100% !important;
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap !important;
  }
}
/* Karty produktów na mobile: 48vw = 2 produkty widoczne jednocześnie, małe marginesy */
@media (max-width: 767px) {
  .featured-products .products .product-miniature,
  .sale-products .products .product-miniature,
  .featured-products .products .col-xl-3,
  .sale-products .products .col-xl-3 {
    width: 48vw !important;
    flex: 0 0 48vw !important;
    max-width: 48vw !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .featured-products .products,
  .sale-products .products {
    gap: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
/* Fix: modal zdjęć produktu nad sticky headerem - 2026-04 */
#product-modal {
    z-index: 10001 !important;
}
/* === Shipping & Returns (cms-id-1) === */
.cms-id-1 .breadcrumb {
  display: none !important;
}
.cms-id-1 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-1 .email-subscription {
  display: none !important;
}

/* === Legal Notice (cms-id-2) === */
.cms-id-2 .breadcrumb {
  display: none !important;
}
.cms-id-2 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-2 .email-subscription {
  display: none !important;
}

/* === Terms and Conditions (cms-id-3) === */
.cms-id-3 .breadcrumb {
  display: none !important;
}
.cms-id-3 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-3 .email-subscription {
  display: none !important;
}

/* === About Us (cms-id-4) === */
.cms-id-4 .breadcrumb {
  display: none !important;
}
.cms-id-4 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-4 .email-subscription {
  display: none !important;
}

/* === Secure Payment (cms-id-5) === */
.cms-id-5 .breadcrumb {
  display: none !important;
}
.cms-id-5 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-5 .email-subscription {
  display: none !important;
}

/* === Privacy Policy (cms-id-6) === */
.cms-id-6 .breadcrumb {
  display: none !important;
}
.cms-id-6 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-6 .email-subscription {
  display: none !important;
}

/* === Cookies Policy (cms-id-7) === */
.cms-id-7 .breadcrumb {
  display: none !important;
}
.cms-id-7 h1.h4 {
  margin-top: 140px !important;
}
.cms-id-7 .email-subscription {
  display: none !important;
}
/* Custom: logo sklepu przeniesione (na desktopie) z header-bottom na wysokość paska header-top (język/waluta/konto/koszyk) i wyśrodkowane za pomocą position:absolute — mobile bez zmian */
/* UWAGA: ta sekcja jest częściowo nadpisana przez nowy blok "CZARNY, POŁĄCZONY PASEK GÓRNEGO MENU" na końcu pliku (logo dostaje position:static tam) */
@media (min-width: 768px) {
  .header-top {
    position: relative;
    z-index: 2;
  }
  .header-bottom {
    position: relative;
    z-index: 3; /* wyżej niż header-top, żeby logo nie chowało się pod sticky menu po scrollu */
  }
  .header-bottom .logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(calc(-50% - 260px), calc(-100% - 0px));
    z-index: 10;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .header-bottom .logo a.navbar-brand {
    display: block !important;
  }
  .header-bottom .logo img.logo.img-fluid {
    height: 45px !important;
    width: 125px !important; /* proporcja 223/80 zachowana */
    max-width: none !important;
    max-height: none !important;
  }
  .header-top-desktop {
    min-height: 55px;
  }
}
/* Custom: ograniczenie rozmiaru logo na mobile po podmianie na plik w wyższej rozdzielczości */
@media (max-width: 767.98px) {
  .header-bottom .logo img.logo.img-fluid {
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }
}
/* Białe zaokrąglone boxy dla menu głównego */
/* UWAGA: ta sekcja jest nadpisana przez nowy blok "CZARNY, POŁĄCZONY PASEK GÓRNEGO MENU" na końcu pliku (menu dostaje przezroczyste tło tam) */
#top-menu {
    gap: 10px;
}

#top-menu > .main-menu__tree__item {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 0 20px;
    border: 1px solid #999999;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: visible;
}

#top-menu > .main-menu__tree__item:hover {
    border-color: #555555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#top-menu > .main-menu__tree__item > .main-menu__tree__link {
    color: #222 !important;
    text-decoration: none;
    padding: 8px 0 !important;
}

/* Usuń podkreślenie przy hover na linku */
#top-menu > .main-menu__tree__item > .main-menu__tree__link:hover {
    text-decoration: none;
}

/* ===============================================
   CZARNY, POŁĄCZONY PASEK GÓRNEGO MENU (desktop)
   Łączy header-top (english/usd/konto/koszyk)
   z header-bottom (logo/menu) w jeden wizualny wiersz.
   Mobile (poniżej 768px) — bez zmian.
   =============================================== */
@media (min-width: 768px) {

  #header,
  #header.scrolled {
    background-color: #000 !important;
  }

  #header .header-top,
  #header.scrolled .header-top,
  #header .header-bottom,
  #header.scrolled .header-bottom {
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .header-top-desktop {
    min-height: 0 !important;
    height: 100% !important;
    align-items: center;
    pointer-events: none;
  }

  .header-top {
    position: relative;
    z-index: 5;
    height: 34px !important;
    display: flex;
    align-items: center;
    pointer-events: none;
  }
  .header-top__left {
    display: none;
  }
  .header-top__right {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 100%;
    margin-left: auto;
    pointer-events: auto;
  }

  .header-bottom {
    position: relative;
    margin-top: -34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .header-bottom__row {
    align-items: center;
    min-height: 34px !important;
  }
  .header-bottom__container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header-bottom,
  .header-bottom__container,
  .header-bottom__row,
  .header-bottom .logo {
    overflow: visible !important;
  }

  .header-bottom .logo {
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .header-bottom .logo img.logo.img-fluid {
    height: 46px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateY(-13px);
  }

  /* Wyszukiwarka — wyśrodkowana pod english/usd/konto/koszyk, połowa na pasku */
  #_desktop_search {
    position: absolute !important;
    top: 100% !important;
    right: 320px !important;
    margin-top: -20px !important;
    width: 260px !important;
    max-width: 260px !important;
    z-index: 40;
  }

  /* Wyszukiwarka — ciemnoszare tło, jasna ramka, biała lupa, jasnoszary placeholder */
  #_desktop_search #search_widget {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px;
    background-color: #2b2b2b !important;
    overflow: hidden;
  }

  #_desktop_search .js-search-input {
    border: none !important;
    background-color: transparent !important;
    color: #fff !important;
  }

  #_desktop_search .js-search-input::placeholder {
    color: #b0b0b0 !important;
    opacity: 1;
  }

  #_desktop_search .js-search-icon,
  #_desktop_search .clear {
    color: #fff !important;
  }

  #_desktop_search .js-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
  }

  #header a,
  #header.scrolled a {
    color: #fff !important;
  }
  #header .header-block__action-btn i,
  #header .header-block__action-btn svg path,
  #header.scrolled .header-block__action-btn i,
  #header.scrolled .header-block__action-btn svg path {
    color: #fff !important;
    fill: #fff !important;
  }
  .header-top select,
  .header-top .form-select {
    color: #fff;
    background-color: transparent;
    border: none;
    font-size: 13px;
  }

  #top-menu {
    gap: 18px;
  }
  #top-menu > .main-menu__tree__item {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  #top-menu > .main-menu__tree__item:hover {
    border: none;
    box-shadow: none;
  }
  #top-menu > .main-menu__tree__item > .main-menu__tree__link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .header-bottom .logo,
  .main-menu,
  .js-menu-desktop,
  #top-menu,
  #top-menu > .main-menu__tree__item {
    height: 34px !important;
    display: flex;
    align-items: center;
  }

  .main-menu {
    margin-left: 60px !important;
  }

  .header-bottom .logo a.navbar-brand {
    display: flex !important;
    align-items: center;
    height: 100%;
  }
}

/* ===============================================
   NAPRAWA ROZWIJANEGO PODMENU (Men/Women itd.)
   =============================================== */
@media (min-width: 768px) {

  #top-menu > .main-menu__tree__item {
    position: relative;
  }

  #top-menu .menu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 220px !important;
    z-index: 50;
  }

  #top-menu .menu-container .container {
    width: auto !important;
    max-width: none !important;
    padding: 14px 18px !important;
  }

  #top-menu .menu-container ul.row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 6px;
  }

  #top-menu .menu-container ul.row > li {
    width: auto !important;
  }

  #top-menu .menu-container .main-menu__tree__link {
    white-space: nowrap !important;
    color: #222 !important;
    padding: 4px 0 !important;
  }
}
/* ===============================================
   FIX: STRONA KOSZYKA (shopping cart) — logo + wyszukiwarka
   Dotyczy tylko /koszyk, tylko desktop (min-width:768px)
   =============================================== */
@media (min-width: 768px) {

  /* Logo — ta sama logika co reszta sklepu (koniec ze starym top:-18px) */
  body.page-cart .header-bottom .logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    z-index: auto !important;
    width: auto !important;
    flex: initial !important;
    align-items: center !important;
  }

  body.page-cart .header-bottom .logo a {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }

  body.page-cart .header-bottom .logo a img {
    width: auto !important;
    height: 46px !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateY(-13px);
  }

  /* Wyszukiwarka — na środku czarnego paska, tylko na koszyku */
  body.page-cart .header-bottom__row {
    position: relative;
  }

  body.page-cart #_desktop_search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    order: unset !important;
    width: 260px !important;
    max-width: 260px !important;
    z-index: 40;
  }
}
/* ===============================================
   FIX: STRONA CHECKOUT — header nie zasłania treści
   =============================================== */
body#checkout #header {
  position: static !important;
}
/* ===============================================
   FIX: STRONA LOGOWANIA (login) — header nie zasłania treści
   =============================================== */
.page-authentication #header {
  position: static !important;
}
/* ===============================================
   UKRYJ NEWSLETTER — tylko na kategoriach z podkategoriami
   (np. Keyrings, gdzie strona pokazuje kafelki marek)
   =============================================== */
body:has(#subcategories) .email-subscription {
  display: none !important;
}
/* ===============================================
   UKRYJ "No products available yet" — tylko gdy
   kategoria MA podkategorie (np. Keyrings)
   =============================================== */
body:has(#subcategories) #content.page-not-found {
  display: none !important;
}
/* ===============================================
   UKRYJ LEWY PASEK BOCZNY — tylko na kategorii Keyrings (id 16)
   (drzewko kategorii + Brands) — reszta rozciąga się na całość
   =============================================== */
body.category-id-16 #left-column {
  display: none !important;
}

body.category-id-16 #left-column ~ * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* ===============================================
   Kategoria Custom Order (id 22) — tylko informacje,
   bez paska bocznego, bez pustych komunikatów o produktach,
   bez breadcrumb, bez newslettera
   =============================================== */
body.category-id-22 #left-column {
  display: none !important;
}

body.category-id-22 #left-column ~ * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.category-id-22 #content.page-not-found {
  display: none !important;
}

body.category-id-22 .breadcrumb {
  display: none !important;
}

body.category-id-22 .block-category {
  margin-top: 140px !important;
}

body.category-id-22 .email-subscription {
  display: none !important;
}

/* Ukryj CAŁĄ systemową siatkę podkategorii (nagłówek "Choose your brand"
   + boxy z nazwami/linkami do podkategorii) — tylko na Custom Order.
   Widoczne na stronie zdjęcia to ręczne boxy wstawione w opisie kategorii,
   niezwiązane z systemowymi podkategoriami. */
body.category-id-22 #subcategories {
    display: none !important;
}

/* ===============================================
   STRONA KATEGORII "KEYRINGS" (marki/podkategorie)
   Dotyczy: siatki boxów z markami (BMW, Audi, itd.)
   pod zdjęciem-okładką kategorii.
   - stylizacja boxów marek (białe tło, czarna gruba pochylona czcionka,
     czerwona kreska, hover: czerwone tło + biały tekst i kreska)
   - nagłówek "CHOOSE YOUR BRAND" z liniami po bokach (generowany przez CSS ::before)
   - ukrycie nagłówka H1 "Keyrings" pod zdjęciem (klasa .page-title-section)
   - usunięcie zbędnego odstępu 140px na .block-category (był potrzebny
     wcześniej dla breadcrumba, teraz zdjęcie samo dobrze się pozycjonuje)
   =============================================== */

/* Ukryj obrazki marek — zostaje sam tekst w boxie */
.subcategory__image {
    display: none !important;
}

.subcategory__wrapper {
    padding: 8px !important;
}

.subcategory {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    padding: 20px 15px 26px;
    text-decoration: none !important;
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    color: #1a1a1a !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

/* Czerwona kreska pod nazwą marki */
.subcategory::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    background: #e63329;
    transition: background 0.25s ease;
}

/* Podświetlenie po najechaniu myszką — tło na czerwono, tekst i kreska na biało */
.subcategory:hover {
    background: #e63329;
    border-color: #e63329;
    box-shadow: 0 6px 16px rgba(230, 51, 41, 0.3);
    transform: translateY(-3px);
    color: #fff !important;
}

.subcategory:hover::after {
    background: #fff;
}

/* Nagłówek "CHOOSE YOUR BRAND" z liniami po bokach — generowany przez CSS, bez ruszania szablonu */
#subcategories::before {
    content: "CHOOSE YOUR BRAND";
    order: -1;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.4rem;
    color: #1a1a1a;
    margin: 10px 0 35px;
    background:
        linear-gradient(#ccc, #ccc) left center / 38% 1px no-repeat,
        linear-gradient(#ccc, #ccc) right center / 38% 1px no-repeat;
}

/* Usuń nagłówek H1 "Keyrings" pod zdjęciem kategorii */
.page-category .page-title-section {
    display: none !important;
}

/* Usuń zbędny odstęp nad siatką boxów — zdjęcie kategorii samo się
   już poprawnie pozycjonuje pod przezroczystym headerem */
.page-category .block-category {
    margin-top: 0;
    position: relative;
    z-index: 2;
}


/* ===============================================
   STRONA KATEGORII "CUSTOM ORDER" (id 22)
   3 boxy wstawione RĘCZNIE jako HTML w polu "Opis" tej kategorii
   (Katalog → Kategorie → Custom Order → Opis → widok kodu <>),
   ze zdjęciami wgranymi bezpośrednio przez menedżer plików
   edytora WYSIWYG — bez automatycznego skalowania przez system.
   Każdy box to link <a> prowadzący do /contact-us.

   UWAGA: cały layout (flex, gap, border-radius, cień, object-fit)
   MUSI siedzieć tutaj, w custom.css — edytor WYSIWYG treści
   filtruje/wycina te własności ze stylu inline przy zapisie,
   więc w HTML-u w opisie kategorii zostają tylko czyste tagi
   z klasami "custom-order-boxes" / "custom-order-box", bez
   żadnych atrybutów style="".
   =============================================== */

.custom-order-boxes {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
    margin: 20px 0 10px;
    width: 100%;
}

.custom-order-box {
    display: block;
    width: 420px;
    max-width: 30%;
    flex: 1 1 420px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.custom-order-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.custom-order-box img {
    width: 100%;
    height: auto;
    aspect-ratio: 420 / 560;
    object-fit: cover;
    display: block;
    transition: filter 0.25s ease;
}

.custom-order-box:hover img {
    filter: brightness(0.85);
}

@media (max-width: 900px) {
    .custom-order-boxes {
        flex-wrap: wrap;
        gap: 24px;
    }
    .custom-order-box {
        max-width: 100%;
        flex: 1 1 260px;
    }
}
/* ===============================================
   UKRYJ LEWY PASEK BOCZNY — tylko na kategorii Wall Decors (id 19)
   (drzewko kategorii + Brands) — reszta rozciąga się na całość
   =============================================== */
body.category-id-19 #left-column {
  display: none !important;
}

body.category-id-19 #left-column ~ * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* ===============================================
   UKRYJ LEWY PASEK BOCZNY — kategorie Emblems (id 20) i Wall Hangers (id 21)
   (drzewko kategorii + Brands) — reszta rozciąga się na całość
   =============================================== */
body.category-id-20 #left-column,
body.category-id-21 #left-column {
  display: none !important;
}

body.category-id-20 #left-column ~ *,
body.category-id-21 #left-column ~ * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* ===============================================
   UKRYJ LEWY PASEK BOCZNY + NEWSLETTER — wszystkie podkategorie
   Keyrings (parent id 16) i Wall Decors (parent id 19)
   =============================================== */
body.category-id-parent-16 #left-column,
body.category-id-parent-19 #left-column {
  display: none !important;
}

body.category-id-parent-16 #left-column ~ *,
body.category-id-parent-19 #left-column ~ * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.category-id-parent-16 .email-subscription,
body.category-id-parent-19 .email-subscription {
  display: none !important;
}
/* Opis podkategorii (np. Bmw pod Keyrings) wjeżdżał pod czarny pasek menu — dodajemy margines */
body.category-id-parent-16 #category-description,
body.category-id-parent-19 #category-description {
  margin-top: 140px !important;
}
/* Emblems (id 20) i Wall Hangers (id 21):
   ukrycie newslettera na dole strony (jak w kat. 22) */
body.category-id-20 .email-subscription,
body.category-id-21 .email-subscription {
  display: none !important;
}
/* Ukrycie dropdownu podkategorii w górnym menu dla Keyrings (ID 16) i Wall decors (ID 19) - na życzenie klienta */
#top-menu li#category-16 .js-sub-menu,
#top-menu li#category-19 .js-sub-menu {
    display: none !important;
}

#top-menu li#category-16 > a.dropdown-toggle::after,
#top-menu li#category-19 > a.dropdown-toggle::after {
    display: none !important;
}
/* Animowane białe podkreślenie przy hover na kategoriach w górnym menu */
#top-menu .main-menu__tree__link {
    position: relative;
}

#top-menu li.main-menu__tree__item {
    overflow: visible !important;
}

#top-menu .main-menu__tree__link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

#top-menu .main-menu__tree__link:hover::before {
    width: 100%;
}
/* Fix: dropdown menu konta (ikona użytkownika w headerze) miało biały tekst
   na białym tle. Prawdziwa przyczyna (znaleziona przez DevTools, custom.css
   ~linia 1141, sekcja "CZARNY, POŁĄCZONY PASEK GÓRNEGO MENU" powyżej):
   reguła "#header a, #header.scrolled a { color: #fff !important; }"
   łapie też linki wewnątrz .dropdown-menu w .user-info. Poprzednia próba
   naprawy przez nadpisanie zmiennej --bs-dropdown-link-color nie działała,
   bo selektor ID (#header) + !important ma wyższą wagę niż zmienna CSS.
   Rozwiązanie: selektor zaczynający się od #header (ta sama waga ID),
   ale z dodatkowymi klasami .user-info .dropdown-menu — dzięki temu jest
   bardziej szczegółowy niż "#header a" i wygrywa mimo !important po obu
   stronach. */
#header .user-info .dropdown-menu a {
    color: #333 !important;
}

#header .user-info .dropdown-menu a:hover,
#header .user-info .dropdown-menu a:focus {
    color: #007bff !important;
    background-color: rgba(0, 123, 255, 0.1) !important;
}
/* Przesunięcie strzałek nawigacji galerii zdjęć produktu wyżej
   niż domyślne wycentrowanie na całej wysokości.
   Dotyczy głównego widoku zdjęcia (#product-images) oraz powiększonego
   widoku modalnego (#product-images-modal).
   Używamy transform zamiast zmiany wysokości/align-items,
   żeby nie zniekształcać elementów wewnątrz przycisku (np. poświaty). */
#product-images .carousel-control-prev,
#product-images .carousel-control-next {
    transform: translateY(-260px);
}

#product-images-modal .carousel-control-prev,
#product-images-modal .carousel-control-next {
    transform: translateY(-100px);
}
/* Ukrycie strzałek galerii zdjęć na mobile — swipe dalej działa (natywna funkcja Bootstrap Carousel) */
@media (max-width: 767px) {
    #product-images .carousel-control-prev,
    #product-images .carousel-control-next {
        display: none;
    }
}
/* ============================================
   Mobile header - wymuszenie czarnego tła i białych ikon
   (Hummingbird domyślnie ma jasny/przezroczysty header na mobile,
   inny niż na desktopie - patrz #_mobile_* elementy)
   UWAGA: celowo NIE używamy selektora "#header a" ani "#header svg",
   bo łapały też linki w rozwijanym menu kategorii (który też jest
   wewnątrz #header) i robiły biały tekst na białym tle - niewidoczny.
   Dodano: [data] przez [imię/firma]
   ============================================ */
@media (max-width: 991px) {
  #header,
  .header-nav,
  #_mobile_menu_icon,
  #_mobile_cart,
  #_mobile_user_info,
  #_mobile_search {
    background-color: #000 !important;
  }

  #_mobile_menu_icon i,
  #_mobile_cart i,
  #_mobile_user_info i,
  #_mobile_search i,
  #_mobile_menu_icon svg,
  #_mobile_cart svg,
  #_mobile_user_info svg,
  #_mobile_search svg {
    color: #fff !important;
    fill: #fff !important;
  }
}
/* Header (mobile) - nadpisanie zmiennych CSS motywu (--header-bg itp.),
   zamiast pojedynczych elementów, żeby usunąć biały pasek/border */
@media (max-width: 991px) {
  .header {
    --header-bg: #000 !important;
    --header-top-bg: #000 !important;
    --header-color: #fff !important;
    --header-top-color: #fff !important;
  }
  
  .header-bottom {
    --header-bottom-border-bottom: none !important;
    border-bottom: none !important;
  }
}
/* Menu kategorii w hamburgerze (mobile) - przywrócenie ciemnego koloru
   tekstu, bo dziedziczyło białe --header-color po zmianie tła headera */
@media (max-width: 991px) {
  .main-menu__tree__link,
  .menu__link,
  .dropdown-item {
    color: rgb(34, 34, 34) !important;
  }
}
/* Baner kategorii (cover image) na mobile: ogranicz wysokość do 50% ekranu
   i przytnij zdjęcie (object-fit: cover) zamiast rozciągać je proporcjonalnie
   na całą szerokość. Dotyczy .container-fluid.p-0.mb-4 z layout-left-column.tpl.
   width:100% !important nadpisuje sztywne atrybuty width/height z <img>,
   które inaczej wymuszają proporcje zdjęcia desktopowego. */
@media (max-width: 767px) {
  .container-fluid.p-0.mb-4 picture {
    display: block;
    width: 100%;
  }
  .container-fluid.p-0.mb-4 img.img-fluid.w-100 {
    width: 100% !important;
    height: 50vh !important;
    object-fit: cover;
  }
}