/* ==========================================================================
   PLUGIN ISLE — RESPONSIVE / MOBILE
   Arkusz musi być ładowany jako ostatni.
   ========================================================================== */


/* ==========================================================================
   TABLETY ORAZ MENU MOBILNE
   ========================================================================== */

@media (max-width: 1199.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    @supports (overflow: clip) {
        html,
        body {
            overflow-x: clip;
        }
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    picture,
    video,
    iframe,
    svg {
        max-width: 100%;
    }

    body .container,
    body .container-sm,
    body .container-md,
    body .container-lg,
    body .container-xl,
    body .container-xxl {
        width: 100%;
        max-width: 100%;

        padding-right: 18px;
        padding-left: 18px;
    }
    
    body#index::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 950px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .08)
        ),
        url('/img/cms/background.png');

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
}


    /* ======================================================================
       HEADER
       ====================================================================== */

    #header .header-bottom {
        padding: 8px 10px 0;
    }

    #header .header-bottom__container {
        width: 100%;
        max-width: none;
    }

    #header .header-bottom__row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        min-height: 72px;

        margin: 0;
        padding: 0 12px;

        border-radius: 30px;
    }

    #header .header-bottom__logo,
    #header #_desktop_logo {
        flex: 0 1 auto;

        width: auto;
        min-width: 0;
        max-width: 190px;

        margin-right: auto;
    }

    #header .header-bottom__logo img,
    #header #_desktop_logo img {
        display: block;

        width: auto;
        max-width: 180px;
        max-height: 54px;

        object-fit: contain;
    }

    #header .pi-mobile-menu-toggle {
        flex: 0 0 42px;
        order: 6;
        width: 64px;
        height: 64px;

        margin: 0 8px 0 0;
    }

    #header #_desktop_ps_searchbar,
    #header #_desktop_user_info,
    #header #_desktop_ps_customersignin,
    #header #_desktop_wishlist,
    #header #_desktop_blockwishlist,
    #header #_desktop_ps_shoppingcart {
        flex: 0 0 42px;

        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;
        min-height: 42px;
        max-height: 42px;

        margin: 0 0 0 7px;
        padding: 0;
    }
    
    #header .ps-searchbar--mobile, 
    #header #_mobile_ps_customersignin, 
    #header #_mobile_user_info, 
    #header #_mobile_ps_shoppingcart {
        width: 64px;
        height: 64px;
    }

    #header #_desktop_ps_searchbar .ps-searchbar__magnifier,
    #header #_desktop_user_info .header-block__action-btn,
    #header #_desktop_ps_customersignin .header-block__action-btn,
    #header #_desktop_wishlist .header-block__action-btn,
    #header #_desktop_blockwishlist .header-block__action-btn,
    #header #_desktop_ps_shoppingcart .cart-preview {
        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;
        min-height: 42px;
        max-height: 42px;

        margin: 0;
    }

    #header
    #_desktop_ps_searchbar.is-search-open
    #ps_searchbar,

    #header
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__form {
        width: min(320px, calc(100vw - 36px));
        min-width: min(320px, calc(100vw - 36px));
        max-width: min(320px, calc(100vw - 36px));
    }
    
    


    /* ======================================================================
       GLOBALNE ELEMENTY STRON
       ====================================================================== */
    #content,
    #wrapper,
    #content-wrapper,
    #center-column,
    .center-column,
    .page-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .breadcrumb,
    .breadcrumb-wrapper {
        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar,
    .breadcrumb-wrapper::-webkit-scrollbar {
        display: none;
    }

    .rich-text,
    .product__description,
    .product__description-short,
    .category-description {
        overflow-wrap: anywhere;
    }

    .rich-text img,
    .rich-text video,
    .rich-text iframe,
    .rich-text table,
    .product__description img,
    .product__description iframe,
    .product__description table {
        max-width: 100%;
    }

    .table-responsive,
    .rich-text:has(table) {
        overflow-x: auto;
    }
    
    .block-categories.hidden-sm-down, body .block-categories {
        display: block;
        margin: 45px auto;
        padding: 40px 18px 48px;
    }
    
    html body .block-categories .blog-post {
        display: flex;
    }
    
    body .pi-slider__cta {
        flex-wrap: wrap;
    }

    .reassurance {
        padding-left: 20px;
    }
    
    body#product .pi-product-reassurance .blockreassurance--product {
        flex-wrap: wrap;
    }

    /* ======================================================================
       FORMULARZE
       ====================================================================== */

    input.form-control,
    select.form-select,
    textarea.form-control {
        max-width: 100%;

        border-radius: 12px;
    }

    textarea.form-control {
        resize: vertical;
    }
}


/* ==========================================================================
   TABLETY — UKŁAD JEDNOKOLUMNOWY
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ======================================================================
       STRONA GŁÓWNA — HERO
       ====================================================================== */

    body#index .pi-slider__content,
    body#index .pi_slider__content,
    body#index .pi-slider__slide,
    body#index .pi_slider__slide {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 28px !important;

        width: 100% !important;
    }

    body#index .pi-slider__text,
    body#index .pi_slider__text,
    body#index .pi-slider__image,
    body#index .pi_slider__image {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body#index .pi-slider__image img,
    body#index .pi_slider__image img {
        display: block;

        width: auto !important;
        max-width: min(100%, 520px) !important;
        height: auto !important;

        margin: 0 auto;
    }

    body#index .pi-slider__buttons,
    body#index .pi_slider__buttons {
        display: flex;
        flex-wrap: wrap;

        gap: 12px;
    }
    
    .pi-platforms {
        flex-wrap: wrap;
    }
    
    body .pi-slider__content {
        padding: 40px 20px 0 20px;
    }
    
    .pi-slider p {
        display: none;
    }

    #header #mobileMenu .btn-close {
        background: #006cff;
        border: 1px solid #006cff;
    }
    
     #header #mobileMenu .btn-close::before,
     #header #mobileMenu .btn-close::after{
         background: #fff;
     }
     
     .pis-stats-bar__icon-wrap {
         display: none !important;
     }
     
     .pis-stats-bar__content {
         text-align: center;
     }
     
     .pis-stats-bar__title {
         color: #006CFF !important;
     }
     
     .pis-stats-bar__value {
         font-size: 40px !important;
     }
     
     .pis-stats-bar__inner {
         display: flex !important;
         flex-wrap: wrap !important;
     }
     
     
    .pis-stats-bar__inner:nth-child(1) {
        order: 1 !important;
    }

    .pis-stats-bar__inner:nth-child(2) {
        order: 3 !important;
    }

    .pis-stats-bar__inner:nth-child(3) {
        order: 4 !important;
    }

    .pis-stats-bar__inner:nth-child(4) {
        order: 2 !important;
    }
    
    .journey-banner__fishes {
        order:2;
    }
    
    .journey-banner__title{
        font-size: 32px !important;
    }
    
    .journey-banner__accent{
        font-size: 32px !important;
    }
     
    .journey-banner__fish--large {
    top: 30px;
    left: 54px;
    width: 50%;
    }
    
    .journey-banner__fish--small {
    right: 30px;
    bottom: 40px;
    width: 40%;
  }
  
   .journey-banner {
    margin: 50px auto 0;
    padding: 30px 18px 0;
  }
   

    /* ======================================================================
       LISTINGI PRODUKTÓW
       ====================================================================== */

    body#category #js-product-list .products,
    body#search #js-product-list .products,
    body#manufacturer #js-product-list .products,
    body#prices-drop #js-product-list .products,
    body#new-products #js-product-list .products,
    body#best-sales #js-product-list .products {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 22px !important;

        width: 100% !important;

        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body#category #js-product-list .products > *,
    body#search #js-product-list .products > *,
    body#manufacturer #js-product-list .products > *,
    body#prices-drop #js-product-list .products > *,
    body#new-products #js-product-list .products > *,
    body#best-sales #js-product-list .products > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .product-miniature,
    .product-miniature__infos {
        width: 100%;
        min-width: 0;
    }

    .product-miniature img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: cover;
    }


    /* ======================================================================
       KATEGORIA
       ====================================================================== */

    body#category .category-cover,
    body#category .category-description,
    body#category .block-category {
        width: 100%;
        max-width: none;
    }

    body#category .category-sub-menu,
    body#category .pi-category-buttons,
    body#category .category-tags {
        display: flex;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 8px;

        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    body#category .category-sub-menu::-webkit-scrollbar,
    body#category .pi-category-buttons::-webkit-scrollbar,
    body#category .category-tags::-webkit-scrollbar {
        display: none;
    }

    body#category .category-sub-menu > *,
    body#category .pi-category-buttons > *,
    body#category .category-tags > * {
        flex: 0 0 auto;

        scroll-snap-align: start;
    }

    body#category #js-product-list-top .products__selection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        gap: 16px;

        width: 100%;
    }

    body#category #js-product-list-top .products__sort {
        margin-left: auto;
    }


    /* ======================================================================
       STRONA PRODUKTU
       ====================================================================== */

    body#product .pi-product-layout {
        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;

        width: 100% !important;
    }

    body#product .pi-product-gallery {
        order: 1;
    }

    body#product .pi-product-buybox {
        order: 2;

        position: static !important;

        top: auto !important;

        transform: none !important;
    }

    body#product .pi-product-content {
        order: 3;
    }

    body#product .pi-product-gallery,
    body#product .pi-product-buybox,
    body#product .pi-product-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }

    body#product .product__cover img,
    body#product .product-cover img {
        display: block;

        width: 100% !important;
        height: auto !important;
    }

    body#product .product__name {
        font-size: clamp(30px, 5vw, 42px) !important;
        line-height: 1.08 !important;
    }

    body#product .product__actions,
    body#product #add-to-cart-or-refresh {
        width: 100% !important;
    }

    body#product .product__actions-qty-add {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;

        gap: 12px !important;

        width: 100% !important;
    }

    body#product
    .product__actions-qty-add
    > .pi-installation-addon {
        order: -1 !important;

        flex: 0 0 100% !important;

        width: 100% !important;
    }

    body#product .product__add-to-cart,
    body#product .product-add-to-cart {
        flex: 1 1 240px !important;
    }



    body#product .pi-product-reassurance {
        width: 100% !important;

        margin-top: 24px !important;
    }

    body#product
    .pi-product-reassurance
    .blockreassurance_product {
        display: flex !important;
        flex-direction: column !important;

        gap: 14px !important;

        width: 100% !important;
    }

    body#product
    .pi-product-reassurance
    .reassurance {
        width: 100% !important;
    }

    body#product
    .pi-product-content
    .product__accordion {
        width: 100% !important;
        max-width: none !important;
    }


    /* ======================================================================
       KOSZYK
       ====================================================================== */

    body#cart .cart-grid,
    body#cart .cart-grid.row {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 30px !important;

        width: 100% !important;

        margin: 0 !important;
    }

    body#cart .cart-grid-body,
    body#cart .cart-grid-right {
        width: 100% !important;
        max-width: none !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body#cart .cart-grid-right {
        position: static !important;
    }

    body#cart .product-line-grid {
        grid-template-columns:
            minmax(90px, 130px)
            minmax(0, 1fr) !important;
    }

    body#cart .cart-summary {
        width: 100% !important;
    }


    /* ======================================================================
       CHECKOUT
       ====================================================================== */

    body#checkout .checkout-grid,
    body#checkout .checkout-grid.row {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 32px !important;

        width: 100% !important;

        margin: 0 !important;
    }

    body#checkout .checkout-grid__content,
    body#checkout .checkout-grid__aside {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body#checkout .checkout-grid__aside {
        order: 2;
    }

    body#checkout .checkout-grid__aside-wrapper {
        position: static !important;

        top: auto !important;

        width: 100% !important;
    }

    body#checkout .checkout-steps__list {
        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
    }

    body#checkout .checkout-steps__list::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       FOOTER
       ====================================================================== */

    #footer .pi-footer__top,
    #footer .pi-footer__contact,
    #footer .footer-container .row {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 28px !important;
    }

    #footer .pi-footer__top > *,
    #footer .pi-footer__contact > *,
    #footer .footer-container .row > * {
        width: 100% !important;
        max-width: none !important;
    }
}


/* ==========================================================================
   TELEFONY
   ========================================================================== */

@media (max-width: 767.98px) {

    body .container,
    body .container-sm,
    body .container-md,
    body .container-lg,
    body .container-xl,
    body .container-xxl {
        padding-right: 14px;
        padding-left: 14px;
    }

    .block-categories.hidden-sm-down, body .block-categories {
        display: block;
        padding: 40px 18px 48px !important;
    }

    /* ======================================================================
       HEADER
       ====================================================================== */

    #header .header-bottom {
        padding-right: 6px;
        padding-left: 6px;
    }

    #header .header-bottom__row {
        min-height: 64px;

        padding: 0 8px;

        border-radius: 26px;
    }

    #header .header-bottom__logo,
    #header #_desktop_logo {
        max-width: 145px;

        margin-right: auto;
    }

    #header .header-bottom__logo img,
    #header #_desktop_logo img {
        max-width: 140px;
        max-height: 44px;
    }

    #header #_desktop_ps_searchbar,
    #header #_desktop_user_info,
    #header #_desktop_ps_customersignin,
    #header #_desktop_wishlist,
    #header #_desktop_blockwishlist,
    #header #_desktop_ps_shoppingcart {
        flex-basis: 40px;

        width: 40px;
        min-width: 40px;
        max-width: 40px;

        height: 40px;
        min-height: 40px;
        max-height: 40px;

        margin-left: 5px;
    }

    #header #_desktop_ps_searchbar .ps-searchbar__magnifier,
    #header #_desktop_user_info .header-block__action-btn,
    #header #_desktop_ps_customersignin .header-block__action-btn,
    #header #_desktop_wishlist .header-block__action-btn,
    #header #_desktop_blockwishlist .header-block__action-btn,
    #header #_desktop_ps_shoppingcart .cart-preview {
        width: 40px;
        min-width: 40px;
        max-width: 40px;

        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }


    /* ======================================================================
       STRONA GŁÓWNA
       ====================================================================== */

    body#index .pi-slider__content,
    body#index .pi_slider__content {
        gap: 20px !important;
    }

    body#index .pi-slider__title,
    body#index .pi_slider__title,
    body#index .pi-slider__content h1,
    body#index .pi_slider__content h1 {
        font-size: clamp(38px, 12vw, 58px) !important;
        line-height: .98 !important;

    }

    body#index .pi-slider__buttons,
    body#index .pi_slider__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    body#index .pi-slider__buttons .btn,
    body#index .pi_slider__buttons .btn {
        width: 100%;
        max-width: none;
    }


    /* ======================================================================
       KATEGORIA I LISTING
       ====================================================================== */

    body#category .category-description h1,
    body#category .block-category h1 {
        font-size: clamp(36px, 10vw, 50px) !important;
        line-height: 1 !important;
    }

    body#category #js-product-list-top .products__selection {
        flex-direction: column;
        align-items: stretch;
    }

    body#category #js-product-list-top .products__sort,
    body#category #js-product-list-top .products__sort-dropdown {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    body#category
    #js-product-list-top
    .products__sort-dropdown-button {
        width: 100% !important;
        max-width: none !important;
    }


    /* ======================================================================
       PRODUKT
       ====================================================================== */

    body#product .product__name {
        font-size: 30px !important;
    }

    body#product .product__description-short {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    body#product .pi-installation-addon__option {
        display: grid !important;

        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;

        width: 100% !important;
    }

    body#product
    .pi-product-content
    .accordion-button {
        min-height: 54px !important;

        padding: 14px 16px !important;

        font-size: 17px !important;
    }

    body#product
    .pi-product-content
    .accordion-body {
        padding: 8px 16px 20px !important;
    }

    body#product .pi-product-details__row {
        grid-template-columns: 1fr !important;

        gap: 6px !important;
    }

    body#product .pi-product-download {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body#product .pi-product-download .attachment__link {
        width: 100% !important;
        max-width: none !important;
    }


    /* ======================================================================
       KOSZYK
       ====================================================================== */

    body#cart .product-line-grid {
        display: grid !important;

        grid-template-columns: 90px minmax(0, 1fr) !important;

        gap: 14px !important;
    }

    body#cart .product-line-grid-left {
        width: 90px !important;
    }

    body#cart .product-line-grid-right,
    body#cart .product-line-grid-body {
        width: 100% !important;
        min-width: 0 !important;
    }

    body#cart .cart-overview .product-price {
        white-space: nowrap;
    }


    /* ======================================================================
       CHECKOUT
       ====================================================================== */

    body#checkout .checkout-steps__desktop {
        padding-right: 0;
        padding-left: 0;
    }

    body#checkout .checkout-steps__list {
        gap: 28px;

        padding: 0 14px 10px;
    }

    body#checkout .checkout-steps__step {
        flex: 0 0 auto;

        min-width: 125px;
    }

    body#checkout
    #checkout-addresses-step
    .pi-address-buttons {
        flex-direction: column-reverse !important;
        align-items: stretch !important;

        gap: 14px !important;
    }

    body#checkout
    #checkout-addresses-step
    .pi-address-buttons > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }


    /* ======================================================================
       FORMULARZE
       ====================================================================== */

    input.form-control,
    select.form-select,
    textarea.form-control {
        min-height: 50px;

        padding-right: 14px;
        padding-left: 14px;
    }

    .form-group,
    .form-field {
        width: 100%;
        min-width: 0;
    }


    /* ======================================================================
       FOOTER
       ====================================================================== */

    #footer .pi-footer__top,
    #footer .pi-footer__contact,
    #footer .footer-container .row {
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 24px !important;
    }

    #footer {
        overflow: hidden;
    }
}


/* ==========================================================================
   MAŁE TELEFONY
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Jedna karta produktu w wierszu */

    body#category #js-product-list .products,
    body#search #js-product-list .products,
    body#manufacturer #js-product-list .products,
    body#prices-drop #js-product-list .products,
    body#new-products #js-product-list .products,
    body#best-sales #js-product-list .products {
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 18px !important;
    }


    /* Pełna szerokość przycisków */

    .page-content .btn-primary,
    .page-content .btn-outline-primary {
        max-width: 100%;
    }

    body#product .product__actions-qty-add {
        flex-direction: column !important;
    }

    body#product .product__quantity,
    body#product .product-actions__quantity,
    body#product .product__add-to-cart,
    body#product .product-add-to-cart {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: none !important;
    }

    body#product .pi-installation-addon__option {
        grid-template-columns:
            44px
            minmax(0, 1fr) !important;
    }

    body#product .pi-installation-addon__price {
        grid-column: 2;

        justify-self: start;
    }


    /* Header na bardzo małym ekranie */

    #header .header-bottom__logo,
    #header #_desktop_logo {
        max-width: 120px;
    }

    #header .header-bottom__logo img,
    #header #_desktop_logo img {
        max-width: 115px;
    }

    #header #_desktop_wishlist,
    #header #_desktop_blockwishlist {
        display: none !important;
    }
}

/* ==========================================================================
   HOME — HERO MOBILE
   układ:
   tekst
   przyciski
   pirat lewo + platformy prawo
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------
       CAŁY BANNER
       ---------------------------------------------------------- */

    body#index .pi-slider {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 860px !important;

        margin: 0 !important;
        padding: 38px 22px 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------
       GŁÓWNY KONTENER
       ---------------------------------------------------------- */

    body#index .pi-slider__content {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 820px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ----------------------------------------------------------
       LEWA KOLUMNA
       ---------------------------------------------------------- */

    body#index .pi-slider__left {
        /*
         * position: static jest tutaj celowe.
         * Dzięki temu .pi-slider__platforms po absolute
         * pozycjonuje się względem .pi-slider__content,
         * a nie względem lewej kolumny.
         */
        position: static !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
    }


    /* ----------------------------------------------------------
       MAŁY TYTUŁ
       ---------------------------------------------------------- */

    body#index .pi-slider__eyebrow {
        display: block !important;

        width: 100% !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        color: #086cff !important;

        text-transform: uppercase !important;
    }


    /* ----------------------------------------------------------
       H1
       ---------------------------------------------------------- */

    body#index .pi-slider__left h1 {
        display: block !important;

        width: 100% !important;
        max-width: 340px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 52px !important;
        font-weight: 500 !important;
        line-height: .98 !important;
        letter-spacing: -2px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* ----------------------------------------------------------
       OPIS — NA MOBILE UKRYTY
       ---------------------------------------------------------- */

    body#index .pi-slider__left > p {
        display: none !important;
    }


    /* ----------------------------------------------------------
       PRZYCISKI
       ---------------------------------------------------------- */

    body#index .pi-slider__cta {
        position: relative !important;
        z-index: 5 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 10px !important;

        width: 245px !important;
        max-width: 245px !important;

        margin: 28px 0 0 !important;
        padding: 0 !important;
    }

    body#index .pi-slider__cta .btn,
    body#index .pi-slider__cta a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 245px !important;
        min-width: 245px !important;
        max-width: 245px !important;

        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        font-size: 15px !important;
        line-height: 1.1 !important;

        border-radius: 999px !important;

        box-sizing: border-box !important;
    }
    
    body#index .pi-btn::after {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }


    /* ----------------------------------------------------------
       PRAWA KOLUMNA = PIRAT
       ---------------------------------------------------------- */

    body#index .pi-slider__right {
        position: absolute !important;

        z-index: 2 !important;

        left: 10px !important;
        right: auto !important;

        bottom: 0 !important;
        top: auto !important;

        display: block !important;

        width: 225px !important;
        min-width: 0 !important;
        max-width: 225px !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;

        transform: none !important;
    }

    body#index .pi-slider__right img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;

        transform: none !important;
    }


    /* ----------------------------------------------------------
       PLATFORMY — PRAWA DOLNA CZĘŚĆ
       ---------------------------------------------------------- */

    body#index .pi-slider__platforms {
        position: absolute !important;

        z-index: 4 !important;

        right: 0 !important;
        left: auto !important;

        bottom: 55px !important;
        top: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;

        gap: 11px !important;

        width: 130px !important;
        min-width: 0 !important;
        max-width: 130px !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }

    body#index .pi-slider__platforms > * {
        display: block !important;

        flex: none !important;

        width: auto !important;
        max-width: 125px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body#index .pi-slider__platforms img {
        display: block !important;

        width: auto !important;
        max-width: 125px !important;
        height: auto !important;

        margin: 0 !important;
    }
}


/* ==========================================================================
   MAŁE TELEFONY
   ========================================================================== */

@media (max-width: 380px) {

    body#index .pi-slider {
        min-height: 825px !important;

        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    body#index .pi-slider__content {
        min-height: 785px !important;
    }

    body#index .pi-slider__left h1 {
        max-width: 310px !important;

        font-size: 48px !important;
    }

    body#index .pi-slider__cta {
        width: 230px !important;
        max-width: 230px !important;
    }

    body#index .pi-slider__cta .btn,
    body#index .pi-slider__cta a {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }

    body#index .pi-slider__right {
        left: 3px !important;

        width: 210px !important;
        max-width: 210px !important;
    }

    body#index .pi-slider__platforms {
        right: -2px !important;

        bottom: 45px !important;

        width: 115px !important;
        max-width: 115px !important;
    }

    body#index .pi-slider__platforms > *,
    body#index .pi-slider__platforms img {
        max-width: 110px !important;
    }
}

/* ==========================================================================
   HOME HERO — MOBILE FINAL
   ========================================================================== */

@media (max-width: 767.98px) {

    body#index .pi-slider {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 38px 22px 20px !important;

        overflow: hidden !important;
    }


    /* ================================================================
       GŁÓWNY GRID
       ================================================================ */

    body#index .pi-slider__content {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) 135px !important;

        grid-template-areas:
            "eyebrow eyebrow"
            "title title"
            "cta cta"
            "pirate platforms" !important;

        column-gap: 12px !important;
        row-gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
    }


    /*
     * Klucz:
     * usuwamy wizualny wrapper LEFT,
     * ale jego dzieci nadal istnieją.
     */
    body#index .pi-slider__left {
        display: contents !important;
    }


    /* ================================================================
       EYEBROW
       ================================================================ */

    body#index .pi-slider__eyebrow {
        grid-area: eyebrow !important;

        width: 100% !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        color: #086cff !important;
    }


    /* ================================================================
       NAGŁÓWEK
       ================================================================ */

    body#index .pi-slider__left h1 {
        grid-area: title !important;

        width: 100% !important;
        max-width: 340px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 52px !important;
        font-weight: 500 !important;
        line-height: .98 !important;
        letter-spacing: -2px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* Opis wyłączony na mobile */
    body#index .pi-slider__left > p {
        display: none !important;
    }


    /* ================================================================
       PRZYCISKI
       ================================================================ */

    body#index .pi-slider__cta {
        grid-area: cta !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 10px !important;

        width: 300px !important;
        max-width: 300px !important;

        margin: 28px 0 34px !important;
        padding: 0 !important;
    }

    body#index .pi-slider__cta .btn,
    body#index .pi-slider__cta a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 240px !important;
        min-width: 245px !important;
        max-width: 300px !important;

        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        font-size: 14px !important;
        margin: 0 !important;

        border-radius: 999px !important;

        box-sizing: border-box !important;
    }
    
        body#index .pi-slider .pi-btn--outline {
            width: 200px !important;
            min-width: 210px !important;
            max-width: 300px !important;
        }



    /* ================================================================
       PIRAT — LEWY DÓŁ
       ================================================================ */

    body#index .pi-slider__right {
        grid-area: pirate !important;

        position: static !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;

        align-self: end !important;
        justify-self: start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    body#index .pi-slider__right img {
        display: block !important;

        width: 230px !important;
        max-width: 245px !important;
        height: auto !important;

        margin: 0 0 0 -10px !important;
        padding: 0 !important;

        object-fit: contain !important;

        transform: none !important;
    }
    
    body#index .pi-platforms img {
        height:20px;
    }
    
    body#index .pi-platforms {
        gap: 20px;
        margin-top: 140px;
}


    /* ================================================================
       PLATFORMY — PRAWY DÓŁ
       ================================================================ */

    body#index .pi-slider__platforms {
        grid-area: platforms !important;

        position: static !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;

        align-self: end !important;
        justify-self: end !important;

        gap: 10px !important;

        width: 135px !important;
        min-width: 0 !important;
        max-width: 135px !important;

        height: auto !important;

        margin: 0 0 48px !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }

    body#index .pi-slider__platforms > * {
        display: block !important;

        width: auto !important;
        max-width: 130px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
    }

    body#index .pi-slider__platforms img {
        display: block !important;

        width: auto !important;
        max-width: 130px !important;
        height: auto !important;

        margin: 0 !important;
    }
}


/* ==========================================================================
   MAŁE TELEFONY
   ========================================================================== */

@media (max-width: 380px) {

    body#index .pi-slider {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    body#index .pi-slider__content {
        grid-template-columns: minmax(0, 1fr) 115px !important;

        column-gap: 8px !important;
    }

    body#index .pi-slider__left h1 {
        max-width: 310px !important;

        font-size: 48px !important;
    }

    body#index .pi-slider__cta,
    body#index .pi-slider__cta .btn,
    body#index .pi-slider__cta a {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }

    body#index .pi-slider__right img {
        width: 220px !important;
        max-width: 220px !important;
    }

    body#index .pi-slider__platforms {
        width: 115px !important;
        max-width: 115px !important;

        margin-bottom: 40px !important;
    }

    body#index .pi-slider__platforms > *,
    body#index .pi-slider__platforms img {
        max-width: 110px !important;
    }
}


@media (max-width: 767.98px) {

    #header .pi-mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        background-color: #fff !important;
        background-image: url('/themes/hummingbird/assets/img-dist/burger.svg') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
        border: 1px solid #64A1F4 !important;
        border-radius: 50% !important;
        margin-left: 15px;
  }

    #header .pi-mobile-menu-toggle span,
    #header .pi-mobile-menu-toggle i,
    #header .pi-mobile-menu-toggle svg {
        display: none !important;
    }

    #header .pi-mobile-menu-toggle::before,
    #header .pi-mobile-menu-toggle::after {
        content: none !important;
        display: none !important;
    }
    
    #header #_mobile_ps_customersignin .header-block__action-btn,
    #header .ps-searchbar--mobile .header-block__action-btn {
        display: none !important;
    }
    
}

@media (max-width: 767.98px) {


    #header #_mobile_ps_shoppingcart .header-block__action-btn {
        background: transparent ;
    }
    
    /* Kółko koszyka */
    #header #_mobile_ps_shoppingcart .cart-preview,
    #header #_desktop_ps_shoppingcart .cart-preview {
        position: relative !important;

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

        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 !important;

        background-image: url('/themes/hummingbird/assets/img-dist/streamline-flex_shopping-cart-2.svg') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 22px auto !important;

        border: 1px solid #64A1F4 !important;
        border-radius: 50% !important;
    }

    /* Ukryj starą ikonę koszyka */
    #header #_mobile_ps_shoppingcart .cart-preview i,
    #header #_mobile_ps_shoppingcart .cart-preview svg,
    #header #_mobile_ps_shoppingcart .cart-preview .material-icons,
    #header #_desktop_ps_shoppingcart .cart-preview i,
    #header #_desktop_ps_shoppingcart .cart-preview svg,
    #header #_desktop_ps_shoppingcart .cart-preview .material-icons {
        display: none !important;
    }

    /* Licznik nadal widoczny */
    #header #_mobile_ps_shoppingcart .cart-products-count,
    #header #_desktop_ps_shoppingcart .cart-products-count {
        position: absolute !important;

        top: -5px !important;
        right: -3px !important;
        z-index: 10 !important;

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

        min-width: 20px !important;
        height: 20px !important;

        padding: 0 5px !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        color: #fff !important;
        background: #086cff !important;

        border-radius: 999px !important;
    }
}


/* ==========================================================================
   MOBILE BURGER MENU — FINAL
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ================================================================
       OFFCANVAS
       ================================================================ */

    .ps-mainmenu.ps-mainmenu--mobile {
        --bs-offcanvas-width: 100vw;

        width: 100vw !important;
        max-width: 430px !important;

        background: #fff !important;

        border: 0 !important;

        box-shadow: 20px 0 60px rgba(0, 0, 0, .12) !important;
    }
    
     #header #mobileMenu .offcanvas-header {
         border-bottom: none !important;
     }

    .pi-mobile-menu__body {
        display: block !important;

        width: 100% !important;

        padding: 0 34px 60px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    /* ================================================================
       CLOSE
       ================================================================ */

    .pi-mobile-menu__header {
        position: relative !important;

        display: block !important;

        height: 105px !important;
        min-height: 105px !important;

        padding: 0 !important;
    }


    .pi-mobile-menu__close {
        position: absolute !important;

        top: 26px !important;
        right: 26px !important;

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

        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #086cff !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 50% !important;

        box-shadow: 0 10px 24px rgba(8, 108, 255, .20) !important;

        transform: none !important;
    }


    .pi-mobile-menu__close::before,
    .pi-mobile-menu__close::after {
        content: "" !important;

        position: absolute !important;

        display: block !important;

        width: 24px !important;
        height: 2px !important;

        background: #fff !important;

        border: 0 !important;

        top: 26px !important;
        left: 15px !important;
    }


    .pi-mobile-menu__close::before {
        transform: rotate(45deg) !important;
    }


    .pi-mobile-menu__close::after {
        transform: rotate(-45deg) !important;
    }


    /* ================================================================
       TITLE
       ================================================================ */

    .pi-mobile-menu__intro {
        width: 100% !important;
    }


    .pi-mobile-menu__title {
        margin: 0 0 26px !important;

        font-family: 'Syne', sans-serif !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 100% !important;
        letter-spacing: 2% !important;

        color: #171717 !important;
    }


    .pi-mobile-menu__title span {
        color: #086cff !important;
        font-family: 'Syne', sans-serif !important;
    }


    /* ================================================================
       SEARCH
       ================================================================ */

    .pi-mobile-menu__search {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 45px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        border: 1.5px solid #64a1f4 !important;
        border-radius: 999px !important;

        overflow: hidden !important;
    }


    .pi-mobile-menu__search-input {
        flex: 1 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 45px !important;

        margin: 0 !important;
        padding: 0 64px 0 22px !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 17px !important;
        font-weight: 400 !important;

        color: #292929 !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        outline: none !important;
        box-shadow: none !important;
    }
    
    html body button[type="submit"]:not(.js-search-button):not(.btn-close):not(.ps-searchbar__clear) {
        min-height: 45px !important;
    }


    .pi-mobile-menu__search-input::placeholder {
        color: #757676 !important;
        opacity: 1 !important;
        font-size: 13px !important;
    }


    .pi-mobile-menu__search-submit {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;

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

        width: 45px !important;
        height: 45px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }


    .pi-mobile-menu__search-submit::before,
    .pi-mobile-menu__search-submit::after {
        content: none !important;
        display: none !important;
    }


    /* lupa */

    .pi-mobile-menu__search-icon {
    display: block !important;

    width: 23px !important;
    height: 23px !important;

    background-image: url('/themes/hummingbird/assets/img-dist/magnifying-glass.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    border: 0 !important;
    border-radius: 0 !important;
}

.pi-mobile-menu__search-icon::before,
.pi-mobile-menu__search-icon::after {
    content: none !important;
    display: none !important;
}


    /* ================================================================
       MENU
       ================================================================ */

    .pi-mobile-menu__nav {
        width: 100% !important;
    }


    .pi-mobile-menu__nav .menu__list {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .pi-mobile-menu__nav .menu__item {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* pojedynczy główny wiersz */

    .pi-mobile-menu__row {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
    }


    /* główne linki */

    .pi-mobile-menu__nav
    .menu__list
    > .menu__item
    > .pi-mobile-menu__row
    > .menu__link {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        padding: 15px 40px 15px 0 !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;

        color: #292929 !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        text-decoration: none !important;
        text-transform: uppercase !important;
    }


    /* ================================================================
       CHEVRON
       ================================================================ */

    .pi-mobile-menu__toggle {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;

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

        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: translateY(-50%) !important;
    }


    .pi-mobile-menu__toggle::before,
    .pi-mobile-menu__toggle::after {
        content: none !important;
        display: none !important;
    }


    .pi-mobile-menu__chevron {
        display: block !important;

        width: 9px !important;
        height: 9px !important;

        margin-top: -4px !important;

        border-right: 2px solid #086cff !important;
        border-bottom: 2px solid #086cff !important;

        transform: rotate(45deg) !important;

        transition: transform .2s ease !important;
    }


    .pi-mobile-menu__toggle[aria-expanded="true"]
    .pi-mobile-menu__chevron {
        margin-top: 4px !important;

        transform: rotate(225deg) !important;
    }


    /* ================================================================
       ACCORDION CONTENT
       ================================================================ */

    .pi-mobile-submenu {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 0 8px 14px !important;
    }


    .pi-mobile-submenu__list {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .pi-mobile-submenu__list
    .pi-mobile-menu__row
    .menu__link {
        display: block !important;

        width: 100% !important;

        padding: 8px 34px 8px 0 !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;

        color: #5d5d5d !important;
        background: transparent !important;

        border: 0 !important;

        text-decoration: none !important;
        text-transform: none !important;
    }


    /* ================================================================
       LOGIN
       ================================================================ */

    .pi-mobile-menu__account {
        width: 100% !important;

        margin: 50px 0 0 !important;
        padding: 0 !important;
    }


    .pi-mobile-menu__account-link {
        display: inline-block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;

        color: #292929 !important;
        background: transparent !important;

        border: 0 !important;

        text-decoration: none !important;
        text-transform: uppercase !important;
    }


    .pi-mobile-menu__account-link::before,
    .pi-mobile-menu__account-link::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 767.98px) {

    /* ================================================================
       MENU NIE MOŻE ROZCIĄGAĆ SIĘ NA CAŁĄ WYSOKOŚĆ
       ================================================================ */

    .pi-mobile-menu__nav {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-top: 26px !important;
        padding: 0 !important;

        flex: 0 0 auto !important;

        overflow: visible !important;
    }


    /* ================================================================
       LISTY
       ================================================================ */

    .pi-mobile-menu__nav .menu__list {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .pi-mobile-menu__nav .menu__item {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ================================================================
       WIERSZE GŁÓWNEGO MENU
       ================================================================ */

    .pi-mobile-menu__nav
    > .menu__list
    > .menu__item
    > .pi-mobile-menu__row {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Główne linki — styl jak na projekcie */

    .pi-mobile-menu__nav
    > .menu__list
    > .menu__item
    > .pi-mobile-menu__row
    > .menu__link,

    .pi-mobile-menu__account-link {
        display: block !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 15px 40px 15px 0 !important;

        font-family: 'Syne', sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 100% !important;
        letter-spacing: 2% !important;

        color: #292929 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        text-decoration: none !important;
        text-transform: uppercase !important;

        transform: none !important;
    }


    /* usuń globalne pseudo-elementy przycisków/linków */

    .pi-mobile-menu__nav .menu__link::before,
    .pi-mobile-menu__nav .menu__link::after {
        content: none !important;
        display: none !important;
    }


    /* ================================================================
       LOGIN JAK NORMALNA POZYCJA MENU
       ================================================================ */

    .pi-mobile-menu__account-list {
        margin-top: 30px !important;
    }

    .pi-mobile-menu__account-item {
        width: 100% !important;
    }

    .pi-mobile-menu__account-link {
        width: 100% !important;

        padding-right: 0 !important;
    }


    /* ================================================================
       KONTAKT NIEBIESKI
       ================================================================ */

    .pi-mobile-menu__nav
    #lnk-kontakt
    > .pi-mobile-menu__row
    > .menu__link,

    .pi-mobile-menu__nav
    a[href*="kontakt"],

    .pi-mobile-menu__nav
    a[href*="contact"] {
        color: #086cff !important;
    }


    /* ================================================================
       DZIUBKI
       ================================================================ */

    .pi-mobile-menu__toggle {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;

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

        width: 30px !important;
        height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: translateY(-50%) !important;
    }

    .pi-mobile-menu__toggle::before,
    .pi-mobile-menu__toggle::after {
        content: none !important;
        display: none !important;
    }

    .pi-mobile-menu__chevron {
        display: block !important;

        width: 9px !important;
        height: 9px !important;

        margin-top: -4px !important;

        border-right: 2px solid #086cff !important;
        border-bottom: 2px solid #086cff !important;

        transform: rotate(45deg) !important;

        transition: transform .2s ease !important;
    }

    .pi-mobile-menu__toggle[aria-expanded="true"]
    .pi-mobile-menu__chevron {
        margin-top: 4px !important;

        transform: rotate(225deg) !important;
    }


    /* ================================================================
       SUBMENU
       ================================================================ */

    .pi-mobile-submenu {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 0 10px 14px !important;
    }

    .pi-mobile-submenu .menu__link {
        display: block !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 8px 0 !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;

        color: #5d5d5d !important;

        text-transform: none !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 767.98px) {

    .pi-mobile-menu__nav #category-15 {
        display: none !important;
    }

    .pi-mobile-menu__nav #lnk-blog {
        display: none !important;
    }
}

/* ==========================================================================
   POLECANE PRODUKTY — MOBILE FINAL
   ========================================================================== */

@media (max-width: 767.98px) {

    /* sekcja */
    body#index .ps-featuredproducts {
        width: 100% !important;

    }


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

    body#index .ps-featuredproducts .products {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        gap: 18px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;

        scrollbar-width: none !important;
    }

    body#index .ps-featuredproducts .products::-webkit-scrollbar {
        display: none !important;
    }


    /* jedna karta */
    body#index .ps-featuredproducts .products > * {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        scroll-snap-align: start !important;
    }


    /* ================================================================
       KARTA
       ================================================================ */

    body#index
    .ps-featuredproducts
    .product-miniature {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 16px 16px 24px !important;

        background: #fff !important;

        border-radius: 24px !important;

        box-shadow:
            0 8px 24px rgba(30, 45, 70, .12) !important;

    }



    body#index
    .ps-featuredproducts
    .product-miniature
    .thumbnail-container {
        overflow: hidden !important;
    }

    /* ================================================================
       ZDJĘCIE
       ================================================================ */

    body#index
    .ps-featuredproducts
    .product-miniature
    .thumbnail-container {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 26px !important;
        padding: 0 !important;

        aspect-ratio: 1 / 1 !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }

    body#index
    .ps-featuredproducts
    .product-miniature
    .thumbnail-container
    img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        border-radius: 20px !important;
    }


    /* ================================================================
       TREŚĆ KARTY
       ================================================================ */

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-description,

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-miniature__infos,

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-miniature__content {
        width: 100% !important;

        padding: 0 8px !important;
    }


    /* nazwa */
    body#index
    .ps-featuredproducts
    .product-miniature
    .product-title {
        margin: 0 0 22px !important;

        font-family: 'Syne', sans-serif !important;
        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 1.12 !important;

        color: #111 !important;
    }

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-title a {
        color: inherit !important;

        text-decoration: none !important;
    }


    /* ================================================================
       OPIS — WYŁĄCZAMY
       ================================================================ */

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-description-short,

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-miniature__description,

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-description
    p {
        display: none !important;
    }


    /* ================================================================
       CENA
       ================================================================ */

    body#index
    .ps-featuredproducts
    .product-miniature
    .product-price-and-shipping {
        margin: 0 !important;

        font-family: 'Syne', sans-serif !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        color: #086cff !important;
    }

    body#index
    .ps-featuredproducts
    .product-miniature
    .price {
        color: #086cff !important;
    }


    /* ================================================================
       UKRYJ "WSZYSTKIE POLECANE PRODUKTY"
       ================================================================ */

    body#index
    .ps-featuredproducts
    .all-product-link,

    body#index
    .ps-featuredproducts
    .all-products-link,

    body#index
    .ps-featuredproducts
    .featured-products__all {
        display: none !important;
    }


    /* ================================================================
       STRZAŁKI POD SLIDEREM
       ================================================================ */

    body#index .pi-featured-mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        width: 100% !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;
    }

    body#index .pi-featured-mobile-nav__btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 58px !important;

        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 30px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        color: #fff !important;

        border: 0 !important;
        border-radius: 50% !important;

        box-shadow:
            0 8px 18px rgba(20, 40, 70, .14) !important;

        transform: none !important;
    }

    body#index
    .pi-featured-mobile-nav__btn::before,

    body#index
    .pi-featured-mobile-nav__btn::after {
        content: none !important;
        display: none !important;
    }

    body#index
    .pi-featured-mobile-nav__btn--prev {
        background: #a5a7a9 !important;
    }

    body#index
    .pi-featured-mobile-nav__btn--next {
        background: #086cff !important;
    }
}

/* ==========================================================================
   PI SERVICES — MOBILE SLIDER
   ========================================================================== */

@media (max-width: 767.98px) {

    body#index .pi-services {
        position: relative !important;

        width: 100% !important;

        overflow: hidden !important;
    }


    body#index .pi-services__inner {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }


    /* ================================================================
       GRID DESKTOPOWY -> SLIDER
       ================================================================ */

    body#index .pi-services__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        grid-template-columns: none !important;

        gap: 0 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;
    }

    body#index .pi-services__grid::-webkit-scrollbar {
        display: none !important;
    }


    /* ================================================================
       JEDEN .pi-service = JEDEN SLAJD
       ================================================================ */

    body#index .pi-services__grid > .pi-service {
        display: block !important;

        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }


    /* ================================================================
       IKONA
       ================================================================ */

    body#index .pi-service__icon {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 52px !important;
        height: 52px !important;

        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    body#index .pi-service__icon img,
    body#index .pi-service__icon svg {
        display: block !important;

        width: 100% !important;
        max-width: 52px !important;
        height: auto !important;
        max-height: 52px !important;
    }


    /* ================================================================
       TREŚĆ
       ================================================================ */

    body#index .pi-service__content {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body#index .pi-service__title {
        max-width: 100% !important;

        margin: 0 0 18px !important;

        font-family: 'Syne', sans-serif !important;
        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;

        color: #086cff !important;
    }


    body#index .pi-service__description {
        max-width: 340px !important;

        margin: 0 0 22px !important;

        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;

        color: #292929 !important;
    }


    body#index .pi-service__link {
        display: inline-block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 16px !important;

        color: #66a3ff !important;
        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        text-decoration: underline !important;
        text-underline-offset: 5px !important;
    }

    body#index .pi-service__link::before,
    body#index .pi-service__link::after {
        content: none !important;
        display: none !important;
    }

@media (max-width: 767.98px) {
    /* ================================================================
       STRZAŁKI
       ================================================================ */

    body#index .pi-services-mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        width: 100% !important;

        margin: 34px 0 0 !important;
        padding: 0 !important;
    }


    body#index .pi-services-mobile-nav__btn {
        position: relative !important;

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

        flex: 0 0 58px !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: Arial, sans-serif !important;
        font-size: 30px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        color: #fff !important;

        border: 0 !important;
        border-radius: 50% !important;

        box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;

        transform: none !important;
    }


    /* wywalamy Twój globalny ::after z buttonów */

    body#index .pi-services-mobile-nav__btn::before,
    body#index .pi-services-mobile-nav__btn::after {
        content: none !important;
        display: none !important;
    }


    body#index .pi-services-mobile-nav__btn--prev {
        background: #a5a7a9 !important;
    }

    body#index .pi-services-mobile-nav__btn--next {
        background: #086cff !important;
    }


    body#index .pi-services-mobile-nav__btn:disabled {
        background: #a5a7a9 !important;
        opacity: 1 !important;
    }
}
}

@media (max-width: 767.98px) {

    body#index
    .block-categories
    > article.blog-post
    + article.blog-post {
        display: none !important;
    }

    body#index
    .block-categories
    > article.blog-post {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        grid-column: 1 / -1 !important;
    }
    
    
     html body .block-categories .blog-post {
         flex-direction: column;
     }
     
     body .block-categories > h2.blog-tag {
         margin-bottom: 40px;
     }
     
     
      .about-ocean__eyebrow {
          font-size: 18px;
          letter-spacing: 2%;
      }
      
      .mobile-new-line {
        display: block;
        padding-top: 5px;
    }
    
    .about-ocean__title {
        font-size: 32px !important;
        margin-bottom: 10px;
    }
    
    .about-ocean__title strong {
        display: block;
    }
    
    .about-ocean__mermaid {
        display: none;
    }
}

@media (max-width: 767.98px) {

    /* cały układ sekcji */
    .about-ocean__inner {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 0 !important;
    }

    /* 1. nagłówek */
    .about-ocean__header {
        order: 1 !important;
    }

    /* 2. pierwszy blok tekstu */
    .about-ocean__copy--left {
        order: 2 !important;

        width: 100% !important;
    }

    /* 3. dekoracje między tekstami */
    .about-ocean__shells {
        order: 3 !important;

        width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;

        margin: 20px 0 28px !important;

        position: relative !important;
        overflow: hidden !important;
    }

    /* 4. drugi blok tekstu */
    .about-ocean__copy--right {
        order: 4 !important;

        width: 100% !important;
    }


    .about-ocean__shells img {
    width: 560px;
    max-width: 800px;
    position: absolute;
    right: 5px;
  }
  
 
  
  .pirate-cta__pirate {
      order: 1;
      margin-top: 0;
  }
  
  .pirate-cta__content {
    order: 2;
    margin-top: 20px;
    text-align: start;
  }
    
    
    .pirate-cta__eyebrow {
        font-size: 18px;
        line-height: 100%;
    }
}

/* ================================================================
   SERVICES — STRZAŁKI TYLKO MOBILE
   ================================================================ */

@media (min-width: 768px) {

    html body#index .pi-services-mobile-nav {
        display: none !important;
    }

    html body#index .pi-services-mobile-nav__btn {
        display: none !important;
    }
}

/* ==========================================================================
   HOME — BLOG CTA + CUSTOM TEXT — MOBILE FIX
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ================================================================
       BLOG — CAŁA SEKCJA
       ================================================================ */

    body#index .block-categories,
    body#index .block-categories.hidden-sm-down {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 40px 36px 48px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* ================================================================
       NAGŁÓWEK BLOGA
       ================================================================ */

    body#index .block-categories > h2.blog-tag {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 40px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* ================================================================
       KARTA WPISU
       ================================================================ */

    body#index .block-categories > article.blog-post {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* KLUCZOWE:
       resetujemy desktopowe szerokości dzieci artykułu */
    body#index .block-categories > article.blog-post > * {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* ================================================================
       ZDJĘCIE
       ================================================================ */

    body#index .block-categories .blog-post img,
    body#index .block-categories .blog-post picture,
    body#index .block-categories .blog-post picture img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* link obejmujący obraz też nie może mieć desktopowej szerokości */
    body#index .block-categories .blog-post > a,
    body#index .block-categories .blog-post picture > a {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ================================================================
       TYLKO PIERWSZY WPIS NA MOBILE
       ================================================================ */

    body#index
    .block-categories
    > article.blog-post
    + article.blog-post {
        display: none !important;
    }
}


    /* ================================================================
       PS CUSTOM TEXT
       ================================================================ */

    body#index .ps-customtext {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* To tutaj nadajemy właściwy gutter */
    body#index .ps-customtext > .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        box-sizing: border-box !important;
    }


    /* ================================================================
       ABOUT OCEAN
       ================================================================ */

    body#index .about-ocean,
    body#index .about-ocean__inner,
    body#index .about-ocean__header,
    body#index .about-ocean__copy,
    body#index .about-ocean__copy--left,
    body#index .about-ocean__copy--right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }
}

@media (max-width: 767.98px) {

    /* cała sekcja polecanych produktów */
    body#index .ps-featuredproducts {
        width: calc(100% + 28px) !important;
        max-width: none !important;

        margin-left: -14px !important;
        margin-right: -14px !important;

        padding: 50px 10px 40px !important;

        box-sizing: border-box !important;
    }


    /* slider */
    body#index .ps-featuredproducts .products {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* pojedynczy slajd */
    body#index .ps-featuredproducts .products > * {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }


    /* karta produktu */
    body#index .ps-featuredproducts .product-miniature {
        width: 100% !important;
        max-width: 100% !important;

        padding: 10px 10px 22px !important;

        box-sizing: border-box !important;
    }


    /* zdjęcie */
    body#index
    .ps-featuredproducts
    .product-miniature
    .thumbnail-container {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 24px !important;
    }
}

/* =========================================================
   REASSURANCE — DESKTOP
   tylko ukrywamy gwarancję
   ========================================================= */

@media (min-width: 768px) {

    /* schowaj wyłącznie Gwarancję */
    body#product
    .pi-product-reassurance
    .blockreassurance--product
    > *:last-child {
        display: none !important;
    }
}


/* =========================================================
   PRODUCT REASSURANCE — MOBILE 2 x 2
   ========================================================= */

@media (max-width: 767.98px) {

    body#product .pi-product-reassurance {
        width: 100% !important;
        margin-top: 24px !important;
    }

    /* TO JEST KONTENER 4 ELEMENTÓW */
    body#product
    .pi-product-reassurance
    .blockreassurance--product {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 30px 24px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }

    /* KAŻDY Z 4 ELEMENTÓW */
    body#product
    .pi-product-reassurance
    .blockreassurance--product
    > * {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* IKONA */
    body#product
    .pi-product-reassurance
    .blockreassurance--product
    > *
    img {
        flex: 0 0 40px !important;

        width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }

    /* TEKST */
    body#product
    .pi-product-reassurance
    .blockreassurance--product
    > *
    span {
        min-width: 0 !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.15 !important;

        text-align: left !important;
    }
}

@media (max-width: 767.98px) {

    /* sekcja nie może ucinać cienia */
    body#index .ps-featuredproducts {
        overflow: visible !important;
    }

    /* daj przestrzeń na cień nad i pod kartą */
    body#index .ps-featuredproducts .products {
        padding-top: 18px !important;
        padding-bottom: 30px !important;

        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /* sama karta */
    body#index
    .ps-featuredproducts
    .product-miniature {
        position: relative !important;

        overflow: visible !important;

        box-shadow:
            0 12px 32px rgba(30, 45, 70, .14) !important;
    }

    /* tylko zdjęcie nadal przycinamy do radiusa */
    body#index
    .ps-featuredproducts
    .product-miniature
    .thumbnail-container {
        overflow: hidden !important;
    }
    

}


@media (max-width: 767.98px) {
  .breadcrumb__wrapper > .container {
    padding-left: 0;
  }
  
  body#product .breadcrumb__wrapper > .container,
  body#module-pi_onepagecheckoutpro-checkout .breadcrumb__wrapper > .container,
  body#contact .breadcrumb__wrapper > .container{
    padding-left: 20px;
  }
  
  .ps-featuredproducts {
      padding-left: 14px;
  }
  
  body#contact .contact-form {
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }
  
  body#contact .contact-form .buttons-wrapper {
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
}