/*
 * Ręczne poprawki motywu. PrestaShop dołącza ten plik automatycznie po theme.css.
 */

/*
 * Poziome przewijanie strony (Windows, klasyczny pasek przewijania).
 * Pełnoszerokie paski (.est-fluid-container, .est-container-wide, .est-bottom-nav) mają width: 100vw,
 * a 100vw obejmuje też pasek przewijania, więc wystają o jego połowę. clip (w odróżnieniu od hidden)
 * nie tworzy kontenera przewijania, więc nie psuje position: sticky prawej kolumny na karcie produktu.
 */
body > main {
  overflow-x: clip;
}

/*
 * Podmenu górnego menu: width: 100vw + margin 15px wychodziło ~30 px poza ekran poniżej ~1350 px.
 * Rozciągnięcie między krawędziami kontenera daje ten sam wygląd na szerokich ekranach (max-width 1320px).
 */
@media (min-width: 768px) {
  #_desktop_top_menu .top-menu .popover {
    right: 0;
    width: auto;
  }
}

/*
 * Zakładki opisu: pasek jest siatką (display: grid), a clearfix ::after stawał się w niej dodatkową,
 * pustą kolumną (~45 px po prawej). Bez niego zakładki wypełniają całą szerokość.
 */
.tabs .nav-tabs::after {
  display: none;
}

/*
 * Karta produktu (desktop): zakładki opisu zaraz pod galerią, bez pustej przestrzeni.
 *
 * Wiersz z zakładkami jest w catalog/product.tpl zagnieżdżony w .product-container, obok galerii
 * i prawej kolumny. Wszystkie trzy kolumny miały float: left, więc kolumna zakładek zawsze trafiała
 * pod prawą kolumnę. Prawa kolumna do prawej + wiersz bez ujemnych marginesów (inaczej jest o 30 px
 * za szeroki) pozwalają zakładkom stanąć od razu pod galerią, obok prawej kolumny.
 */
@media (min-width: 992px) {
  #product #est-product-right {
    float: right;
  }

  #product .product-container > .row {
    margin-right: 0;
    margin-left: 0;
  }
}

/*
 * Filmy YouTube w opisie produktu: kod osadzenia z YouTube ma sztywne width="560", a motyw skaluje
 * tylko iframe'y opakowane w .video-container. Na telefonie film wychodził poza ekran i był ucinany
 * (overflow-x: clip na main). Maks. 100% szerokości kolumny, wysokość z proporcji 16:9.
 */
.product-description iframe {
  max-width: 100%;
}

.product-description :not(.video-container) > iframe[src*="youtube"] {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
 * WERSJA MOBILNA (< 768 px)
 * Nagłówek i menu: templates/_partials/header.tpl, modules/ps_mainmenu/ps_mainmenu.tpl.
 * Zachowanie (menu, wyszukiwarka, podsumowanie wyszukiwarki części, pasek „Kup teraz”):
 * assets/js/custom.js. Siatka kategorii: modules/zeii_categoryslider/views/js/zeii_categoryslider.js.
 * ========================================================================== */

.est-cart-count,
.est-buybar {
  display: none;
}

/*
 * Wyniki wyszukiwarki części: wybrane kryteria nad listą (dodaje je custom.js, na każdej szerokości).
 */
.est-as-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.est-as-summary__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.est-as-summary__list li {
  padding: 5px 12px;
  border-radius: 16px;
  background: #e3eef7;
  font-size: 14px;
  font-weight: 600;
  color: #0969b3;
}

.est-as-summary__change {
  padding: 4px 12px;
  border: 1px solid #0969b3;
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #0969b3;
  cursor: pointer;
}

@media (max-width: 767px) {
  /*
   * Nagłówek: jeden pasek przyklejony do góry ekranu (menu, logo, szukaj, koszyk).
   * position: sticky tu nie zadziała, bo pasek siedzi głęboko w #header, który przewija się ze stroną,
   * więc jest fixed, a #header ma na niego miejsce w padding-top. Zamówienie (body#checkout) ma własny
   * nagłówek bez tego paska (checkout/_partials/header.tpl).
   */
  body:not(#checkout) #header {
    padding-top: 56px;
  }

  html {
    scroll-padding-top: 64px;
  }

  #header .header-nav .est-mobile-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 0 8px;
    background: #f1f1f1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  #header .header-nav .est-mobile-bar__btn,
  #header .header-nav #menu-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    min-width: 48px;
    height: 48px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: #4a4a49;
    cursor: pointer;
  }

  #header .est-mobile-bar__label {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }

  #header .est-mobile-bar__icon-close,
  body.est-menu-open #header .est-mobile-bar__icon-open {
    display: none;
  }

  body.est-menu-open #header .est-mobile-bar__icon-close {
    display: block;
  }

  #header .est-mobile-bar .top-logo {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  #header .est-mobile-bar .top-logo > h1 {
    width: auto;
  }

  #header .est-mobile-bar .top-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 34px;
    margin: 0 auto;
  }

  /* Koszyk: sama ikona z liczbą produktów, bez napisu i kwoty (brak miejsca w jednym pasku). */
  #header .est-mobile-bar #_mobile_cart .cart-preview {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 44px;
    padding: 0;
  }

  #header .est-mobile-bar #_mobile_cart .cart-preview .est-shopingcart-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  #header .est-mobile-bar #_mobile_cart .cart-preview span:not(.est-cart-count) {
    display: none;
  }

  #header .est-mobile-bar #_mobile_cart .cart-preview .est-cart-count {
    position: absolute;
    top: 3px;
    right: 3px;
    display: block;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: #0969b3;
    text-align: center;
  }

  #header .est-mobile-bar #_mobile_cart .cart-preview .est-cart-count--empty {
    display: none;
  }

  /* Pole wyszukiwania wysuwa się spod paska, więc działa też po przewinięciu strony. */
  #header #search_widget.search-widgets {
    position: fixed;
    top: 56px;
    right: 0;
    left: 0;
    z-index: 1040;
    max-width: none;
    margin: 0;
    padding: 8px 12px 12px;
    overflow: visible;
    background: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-110%);
    transition: transform 0.2s, opacity 0.2s;
  }

  #header #search_widget.search-widgets.est-mobile-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /*
   * Podpowiedzi wyszukiwarki (ps_searchbar, jQuery UI): liczone od góry dokumentu, więc po przewinięciu
   * strony lądowały poza ekranem. Przypięte pod polem: 56 px paska + 65 px pola.
   */
  body > .searchbar-autocomplete {
    position: fixed !important;
    top: 121px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1060;
    width: auto !important;
    max-height: calc(100vh - 121px);
    overflow-y: auto;
  }

  /*
   * Menu: jasne tło, wiersze 56 px z liniami, podkategorie wyraźnie wcięte. Wiersz z podkategoriami
   * w całości rozwija listę (przycisk rozwijania rozciągnięty na cały wiersz), a sama kategoria
   * jest pierwszą pozycją listy („Wszystkie produkty”).
   */
  #header #mobile_top_menu_wrapper {
    padding: 0;
    background: #fff;
  }

  /*
   * „Wyszukaj części” nad menu, nie pod nim: w HTML pasek wyszukiwarki (.est-nav-full-width) jest za
   * .header-top z menu, więc otwarte menu spychało go na sam dół, pod telefony. Motyw chował go przy
   * otwartym menu (#header.is-open), ale ta klasa potrafi się rozjechać ze stanem menu, a wyszukiwarka
   * części ma być zawsze pod ręką. z-index: rozwinięty formularz ma przykrywać menu.
   */
  #header {
    display: flex;
    flex-direction: column;
  }

  #header > .header-top {
    order: 1;
  }

  #header > .est-nav-full-width {
    position: relative;
    z-index: 2;
  }

  #header.is-open .est-nav-full-width #est-search-module-container {
    display: flex;
  }

  #header #mobile_top_menu_wrapper #_mobile_top_menu,
  #header #mobile_top_menu_wrapper #top-menu {
    margin: 0;
    padding: 0;
  }

  #header #mobile_top_menu_wrapper #top-menu > li {
    border-bottom: 1px solid #e3e3e3;
  }

  #header #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 56px 8px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #222 !important;
  }

  #header #mobile_top_menu_wrapper #top-menu > li.current > a[data-depth="0"] {
    color: #0969b3 !important;
  }

  #header #mobile_top_menu_wrapper .est-menu-icon {
    display: flex;
    flex: 0 0 40px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #e3eef7;
    color: #0969b3;
  }

  #header #mobile_top_menu_wrapper .top-menu a[data-depth="0"] > .float-xs-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    float: none !important;
  }

  #header #mobile_top_menu_wrapper .top-menu a[data-depth="0"] .navbar-toggler {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 12px;
  }

  #header #mobile_top_menu_wrapper .top-menu .collapse-icons .material-icons {
    font-size: 30px;
    color: #4a4a49;
  }

  #header #mobile_top_menu_wrapper .top-menu .sub-menu {
    background: #f6f6f6;
  }

  #header #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li {
    padding-left: 0;
    border-top: 1px solid #e6e6e6;
  }

  #header #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li:last-of-type {
    margin-bottom: 0;
  }

  #header #mobile_top_menu_wrapper .top-menu .sub-menu li > a,
  #header #mobile_top_menu_wrapper .top-menu .est-menu-all {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px 8px 68px;
    font-size: 15px;
    font-weight: 400;
    color: #4a4a49 !important;
  }

  #header #mobile_top_menu_wrapper .top-menu .est-menu-all {
    border-top: 1px solid #e6e6e6;
    font-weight: 600;
    color: #0969b3 !important;
  }

  /* Dół menu zostaje ciemny: ikony telefonu i e-maila w module kontaktu są białe. */
  #header #mobile_top_menu_wrapper .js-top-menu-bottom {
    padding: 8px 16px 16px;
    background: #4a4a49;
  }

  #header #mobile_top_menu_wrapper .est-mobile-menu-links {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
  }

  #header #mobile_top_menu_wrapper .est-mobile-menu-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  #header #mobile_top_menu_wrapper .est-mobile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }

  /*
   * Strona główna: pod banerem logotypy marek, zaraz pod nimi kategorie (siatka 3 x 3 zamiast karuzeli),
   * dopiero potem produkty. Kolejność bez zmian w panelu: #content jest kolumną flex, a order przesuwa bloki.
   */
  #content.page-home {
    display: flex;
    flex-direction: column;
  }

  #content.page-home > #carousel {
    order: -3;
  }

  #content.page-home > #pwbhtmlblock {
    order: -2;
  }

  #content.page-home > #cs-block {
    order: -1;
  }

  #cs-block.cs-grid {
    margin: 20px 0 12px;
  }

  #cs-block.cs-grid .cs-grid-title {
    margin: 0 0 12px;
    font-size: 22px;
  }

  #cs-block.cs-grid #cs-block-ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #cs-block.cs-grid .cs-block-li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    float: none;
    width: auto;
    padding: 8px 4px 10px;
    background: #fff;
    text-align: center;
  }

  #cs-block.cs-grid .cs-block-a-img {
    display: block;
    float: none;
    width: 100%;
  }

  #cs-block.cs-grid .cs-block-a-img > img {
    width: 100% !important;
    height: 72px;
    object-fit: cover;
  }

  #cs-block.cs-grid .cs-block-a-name {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  /* Baner: niższy (220 zamiast 340 px), bez opisu, żeby kategorie mieściły się na pierwszym ekranie. */
  #carousel,
  #carousel .carousel-inner,
  #carousel .carousel-item,
  #carousel .carousel-item figure {
    height: 220px;
  }

  #carousel .carousel-item figure {
    width: 100%;
    overflow: hidden;
  }

  #carousel .carousel-item figure img {
    width: 100%;
    max-width: none;
    height: 220px;
    margin: 0;
    object-fit: cover;
    object-position: 70% 50%;
  }

  #carousel .carousel-item .caption {
    padding: 14px;
  }

  #carousel .carousel-item .caption .display-1 {
    font-size: 20px;
  }

  #carousel .carousel-item .caption-description {
    display: none;
  }

  /*
   * Strony z lewą kolumną: na wynikach wyszukiwarki części drzewko całego sklepu (ok. 460 px)
   * spychało produkty poniżej pierwszego ekranu, więc na telefonie go nie ma (kategorie są w menu).
   * Na stronach kategorii podkategorie są „pigułkami” zamiast listy jedna pod drugą.
   */
  body.page-module-pm_advancedsearch4-searchresults #left-column .block-categories {
    display: none;
  }

  #left-column .block-categories {
    margin-bottom: 12px;
  }

  #left-column .block-categories .category-sub-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
  }

  #left-column .block-categories .category-sub-menu > li[data-depth="0"] {
    margin: 0;
    border: 1px solid #d5d5d5;
    border-radius: 20px;
    background: #fff;
  }

  #left-column .block-categories .category-sub-menu > li[data-depth="0"] > a {
    display: block;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.2;
    color: #4a4a49;
  }

  #left-column .block-categories .category-sub-menu .collapse-icons,
  #left-column .block-categories .category-sub-menu .collapse {
    display: none !important;
  }

  /*
   * Karta produktu: nazwa i cena nad galerią, potem „Kup teraz”, dane techniczne (EAN, MPN, wymiary)
   * pod przyciskiem. Prawa kolumna ma display: contents, więc jej bloki układają się razem z galerią.
   * W .product-container są też zakładki, akcesoria i produkty powiązane (displayFooterProduct):
   * zostają z order: 0, czyli za przestawionymi blokami, w swojej kolejności.
   */
  #product .product-container {
    display: flex;
    flex-direction: column;
  }

  #product #est-product-right {
    display: contents;
  }

  #product #est-product-right > * {
    padding-right: 15px;
    padding-left: 15px;
  }

  #product #est-product-right > .est-product-name {
    order: -5;
    margin-top: 0;
  }

  #product #est-product-right > .product-prices {
    order: -4;
  }

  #product .product-container > .col-lg-7 {
    order: -3;
  }

  #product #est-product-right > .product-information {
    order: -2;
  }

  #product #est-product-right > .est-product-basic-data {
    order: -1;
  }

  /* Pasek „Kup teraz” na dole ekranu (custom.js), gdy główny przycisk jest już nad ekranem. */
  .est-buybar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(110%);
    transition: transform 0.2s;
  }

  .est-buybar--visible {
    transform: none;
  }

  .est-buybar__price {
    font-size: 18px;
    font-weight: 700;
    color: #060707;
    white-space: nowrap;
  }

  .est-buybar__btn {
    flex: 0 0 auto;
    min-width: 150px;
    height: 44px;
  }

  /* Przyciski „do góry” i ustawień cookies nie mogą zasłaniać paska. */
  body.est-buybar-visible .mypresta_scrollup,
  body.est-buybar-visible #cookie-change-button {
    bottom: 76px;
  }

  /*
   * Kafelki produktów: cały kafelek prowadzi do produktu (link nazwy rozciągnięty na kafelek),
   * więc przycisk „Więcej” znika, a koszyk zajmuje całą szerokość.
   */
  .product-miniature .product-title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }

  .product-miniature .product-description .view-more-and-add-to-cart {
    position: relative;
    z-index: 2;
  }

  .product-miniature .product-description .view-more-and-add-to-cart .view-more {
    display: none;
  }

  .product-miniature .product-description .view-more-and-add-to-cart .product-miniature__actions {
    flex: 1 1 auto;
  }

  .product-miniature .product-description .view-more-and-add-to-cart .product-miniature__actions .btn {
    width: 100%;
  }
}