:root {
    --bg: white;
    --bg-darker: #e8eaea;
    --bg-shadow: rgba(247, 249, 247, 0.8);
    --green: #92D500;
    --blue: #0bafe4;
    --red: #E20513;
    --gray: #767C83;
    --lightgray: #e4e4e4;
    --black: #060606;
    --transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    --box-shadow-top: 0 -2px 3px rgba(0, 0, 0, 0.1);
    --mobile-menu-height: 45px;
    --container-padding: 16px;
    --rating: 0;
    --font: "Manrope", "Segoe UI", Roboto;
    --vm-mobile: 747px;   /* ≤747px = mobile */
    --vw-desktop: 1440px; /* ≥1440px = desktop */
}

html, body, div, span, button, input, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

ul {
    list-style: none;
}

html {
    box-sizing: border-box;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    color: var(--black);
    background: var(--bg);
    font-family: flags, "Manrope", "Segoe UI", Roboto, system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

img, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe {
    display: block;
    width: 100%;

    @media (max-width: 767px) {
        & {
            height: auto;
        }
    }
}

label {
    cursor: pointer;
}

input, button, textarea, select {
    font: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: unset;
    text-decoration: unset;
    text-decoration-skip-ink: auto;
    cursor: pointer;
}

:target {
    scroll-margin-block: 60px;
}

@media (min-width: 768px) {
    :target {
        scroll-margin-block: 80px;
    }
}

@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #F2F2F2;
    }

    ::-webkit-scrollbar-thumb {
        background: #BDBDBD;
    }
}

:user-invalid {
    border: 2px solid red;
}

.flex-right {
    margin-left: auto;
}

.no-padding {
    padding: 0;
}

.relative {
    position: relative;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

sticky-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;

    background-color: #050505;
}

h1 {
    font-size: 34px;
    line-height: 46px;
    font-weight: bold;
    padding-bottom: 20px;
    border-bottom: 0.5px solid #D5D5D5;
}

max-container {
    display: block;
    max-width: 1760px;
    margin: 0 auto;
    height: 100%;

    @media (max-width: 1385px) {
        &:not([no-padding]) {
            padding: 0 var(--container-padding);
        }
    }

    &[white] {
        background: white;
    }
}

center-container {
    display: flex;
    justify-content: center;
}

top-header {
    display: block;
    height: 55px;
    background-color: var(--green);
    font-weight: 700;
    color: black;

    @media (max-width: 767px) {
        height: 34px;

        div {
            width: 100%;
            justify-content: center;
        }
    }

    max-container {
        display: flex;
        justify-content: space-between;

        div {
            display: flex;
            align-items: center;
            gap: 30px;
        }
    }
}

menu-bar {
    display: block;
    position: relative;

    menu-bar-elements {
        display: grid;
        grid-template-areas:  "logo  categories  brands      newest      promo       search settings    fav         cart";
        grid-template-columns: 292px min-content min-content min-content min-content 1fr    min-content min-content min-content;
        gap: 30px;
        align-items: stretch;
        align-items: center;
        white-space: nowrap;
        height: 95px;
        font-size: 15px;
        font-weight: 700;

        > label, > a {
            color: white;
        }

        @media (max-width: 767px) {
            & {
                height: 50px;
                grid-template-areas:  "menu logo search-toggle settings fav  cart";
                grid-template-columns: 40px 1fr  40px          40px     40px 40px;
                column-gap: 0;
                row-gap: 0;

                .logo {
                    aspect-ratio: unset !important;
                }

                .search {
                    line-height: 1;
                    position: relative;
                    top: -5px;

                    input {
                        padding: 0;
                        border: 0 !important;
                    }

                    search-results {
                        left: calc(-1 * var(--container-padding));
                        width: calc(100% + calc(2 * var(--container-padding)));
                    }
                }
            }
        }

        .logo {
            background: url(/image/catalog/muscle-zone-logo.svg) left center no-repeat;
            height: 100%;

            @media (max-width: 1200px) {
                & {
                    background-size: auto 26px;
                }
            }
        }

        > label:has(text-icon) {
            display: flex;
            align-items: center;
            margin: 0;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            position: initial;
        }

        label[for="categories-panel-toggle"],
        label[for="brands-panel-toggle"],
        .newest-link,
        .promo-link {
            padding: 0 9px;
        }

        label[for="cart-panel-toggle"],
        label[for="fav-panel-toggle"] {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dropdown {
            position: initial;

            &.arrow:after {
                content: '';
                background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ij48L3BhdGg+PC9zdmc+') no-repeat center/contain;
                display: inline-block;
                width: 14px;
                height: 12px;
                margin-left: 6px;
                vertical-align: middle;

                @media (max-width: 767px) {
                    & {
                        background: none;
                        padding-right: 0;
                    }
                }
            }
        }

        .search {
            flex: 1;
            font-size: 15px;
            margin: 0;
            justify-self: end;

            background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjUgMTcuNUwxMy4xNjk0IDEzLjE2OTRNMTMuMTY5NCAxMy4xNjk0QzE0LjMwMDQgMTIuMDM4NCAxNSAxMC40NzU5IDE1IDguNzVDMTUgNS4yOTgyMiAxMi4yMDE4IDIuNSA4Ljc1IDIuNUM1LjI5ODIyIDIuNSAyLjUgNS4yOTgyMiAyLjUgOC43NUMyLjUgMTIuMjAxOCA1LjI5ODIyIDE1IDguNzUgMTVDMTAuNDc1OSAxNSAxMi4wMzg0IDE0LjMwMDQgMTMuMTY5NCAxMy4xNjk0WiIgc3Ryb2tlPSIjMjIyMjIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=') 15px center no-repeat white;
            background-size: 20px;

            @media (min-width: 768px) {
                width: 100%;
                max-width: 560px;
            }

            input {
                height: 44px;
                width: 100%;
                outline: 0;
                padding: 12px 16px 12px 45px;
                background: transparent;
                border: 1px solid var(--gray);
                color: #333;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;

                &.htmx-request {
                    background-image: url(/image/loading.gif);
                    background-repeat: no-repeat;
                    background-position: right 10px center;
                    background-size: contain;
                }
            }
        }
    }
}

body:has(#categories-panel-toggle:checked) label.arrow[for="categories-panel-toggle"]:after {
    transform: rotate(180deg);
}
body:has(#brands-panel-toggle:checked) label.arrow[for="brands-panel-toggle"]:after {
    transform: rotate(180deg);
}
body[data-route="checkout-cart"],
body[data-route="checkout-checkout"] {
    label[for="cart-panel-toggle"] {
        opacity: 0.5;
        filter: grayscale(1);
        pointer-events: none;
    }
}

.dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    pointer-events: none;
    z-index: 2;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;

    @media (max-width: 767px) {
        & {
            visibility: hidden;
            opacity: 0;
            transform: none !important;
            pointer-events: unset;
            z-index: 2;
        }
    }
}

@media (max-width: 767px) {
    [mobile-shadow-end], .mobile-shadow-end {
        padding-right: 50px;

        &:after {
            content: "";
            position: absolute;
            height: 30px;
            margin: auto 0;
            width: calc(100vw / 4);
            border: 0;
            pointer-events: none;
            box-shadow: inset -80px 0 30px -30px var(--bg-shadow);
            right: 0;
        }

        &[white-shadow]:after {
            box-shadow: inset calc(-0.285 * 100vw + 22.85px) 0 30px -30px rgba(255, 255, 255, 0.8);
        }
    }

    .mobile-hidden {
        display: none;
    }
    .mobile-hidden-important {
        display: none !important;
    }

    mobile-break {
        display: block;
    }
}

@media (min-width: 768px) {
    .desktop-hidden {
        display: none;
    }
}

ul.breadcrumbs-bar {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--black);

    margin: 0;
    padding: 24px 0;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;

    > li {
        display: inline-block;

        + li::before {
            content: "/";
            padding: 0 8px;
            color: #aaa;
        }

        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.panel-toggle {
    display: none;
}

body:has(.panel-toggle:checked) {
    overflow: hidden;

    .panel-toggle:checked + side-panel {
        visibility: visible;
        pointer-events: unset;

        @media (min-width: 768px) {
            &[desktop-dropdown] {
                opacity: 1;
                transform: none !important;
                display: table;
            }
        }


        side-panel-overlay {
            opacity: 1;
            pointer-events: unset;
        }

        side-panel-content {
            translate: 0;
        }
    }
}
@media (min-width: 768px) {
    body:has(.panel-toggle:checked + side-panel[desktop-dropdown]) {
        sticky-overlay {
            opacity: 1;
            pointer-events: unset;
        }
    }
}
@media (max-width: 767px) {
    body:has(.panel-toggle:not(#menu-panel-toggle):checked) side-panel[name="menu-panel"] {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

side-panel {
    inset: 0;
    z-index: 999;
    contain: strict;
    visibility: hidden;
    transition: var(--transition);
    position: fixed;

    @media (max-width: 767px) {
        & {
            pointer-events: none;
        }
    }

    @media (min-width: 768px) {
        &[desktop-dropdown] {
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: white;
            transition: var(--transition);
            visibility: hidden;
            opacity: 0;
            transform: translateY(15px) translateZ(0);
            pointer-events: none;
            z-index: 2;
        }
    }

    side-panel-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .7);
        opacity: 0;
        transition: var(--transition);
        pointer-events: none;
        backdrop-filter: blur(1px);
    }

    side-panel-content {
        --width: 400px;
        display: block;
        width: var(--width);
        position: fixed;
        top: 0;
        height: 100%;
        left: 0;
        background: white;
        overflow: auto;
        max-width: 83vw;
        outline: 0;
        touch-action: pan-y;
        z-index: 4;
        padding: 0;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
        transition: var(--transition);
        translate: calc(-1 * var(--width)) 0;
        overscroll-behavior: none;
    }

    &[right] {
        side-panel-content {
            left: unset;
            right: 0;
            translate: var(--width) 0;
        }
    }
}

@media (max-width: 767px) {
    side-panel side-panel-content {
        padding: 0;
        overflow: hidden;

        > label {
            line-height: 50px;
            width: 100%;
            text-align: right;
            position: relative;
            padding-right: 20px;
            top: -15px;
        }

        ul {
            line-height: 40px;
            list-style: none;
        }
    }
}

@media (min-width: 768px) {
    side-panel[name="filters"] {
        display: contents;
        visibility: visible;

        > label {
            display: none;
        }

        side-panel-content {
            display: contents;

            > label {
                display: none;
            }
        }
    }
}

@media (min-width: 768px) {
    side-panel[desktop-dropdown] {
        display: block;
        visibility: visible;

        > label {
            display: none;
        }

        side-panel-content {
            display: contents;

            > label {
                display: none;
            }
        }
    }

    side-panel[name="side-panel"] side-panel-content {
        ul {
            list-style: none;
            padding: 10px;
            line-height: 25px;
            color: black;

            max-height: 500px;
            overflow-y: auto;
            overscroll-behavior-block: contain;
        }

        li {
            padding: 0 10px;

            a {
                display: block;
            }
        }

        li:hover {
            background: var(--bg);
        }

        /*> ul > li:has(ul)::after {
            content: '>';
            position: absolute;
            left: 380px;
        }*/

        ul ul {
            display: none;
        }

        ul li:has(ul):hover ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            position: absolute;
            left: 400px;
            top: 0;
            background: white;
            right: 0;
            height: 100%;
        }
    }
}

@media (min-width: 768px) {
    side-panel[desktop-dropdown] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: var(--transition);
        pointer-events: none;
        z-index: 2;
    }

    body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel[desktop-dropdown] {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    side-panel[desktop-dropdown] side-panel-content {
        display: block;
        width: 100%;
        position: static;
        transform: none !important; /* Ważne - wyłącz transform */
        translate: none !important; /* Wyłącz translate */
        box-shadow: none; /* Usuń shadow z content */
        background: transparent;
        overflow: visible;
        max-width: none;
        transition: none; /* Wyłącz transition na content */
    }

    /* Usuń overlay dla desktop dropdown */
    side-panel[desktop-dropdown] side-panel-overlay {
        display: none;
    }
}

text-icon {
    span {
        display: flex;
        line-height: 16px;
    }

    @media (max-width: 767px) {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
        aspect-ratio: 1/1;
        height: 50px;
        display: block;

        span {
            display: none;
        }

        &.svg-search {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /><path d='M21 21l-6 -6' /></svg>");
            background-size: 30px;
        }

        &.svg-user {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.7' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h2.5' /><path d='M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M19.001 15.5v1.5' /><path d='M19.001 21v1.5' /><path d='M22.032 17.25l-1.299 .75' /><path d='M17.27 20l-1.3 .75' /><path d='M15.97 17.25l1.3 .75' /><path d='M20.733 20l1.3 .75' /></svg>");
            background-size: 30px;
        }
    }
}

menu-bar label[for="cart-panel-toggle"],
menu-bar label[for="fav-panel-toggle"] {
    height: 100%;
    width: 40px;
    cursor: pointer;

    @media (min-width: 768px) {
        & {
            background-size: 34px;
        }
    }
}

section-header,
filter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;

    @media (max-width: 767px) {
        & {
            margin-bottom: 20px;
        }
    }

    span, h1, h2, h3 {
        font-size: 34px;
        font-weight: 700;

    }

    a, label {
        font-size: 15px;
        font-weight: 700;
    }

    /*&[small] {

        span, h1 {
            font-size: 16px;
            line-height: 16px;
            grid-column-start: 1;
            grid-column-end: span 3;
            text-align: left;

            &:after {
                left: 0;
            }
        }
    }*/

    label[x] {
        padding: 15px;
        position: absolute;
        right: 0;
        height: 50px;
        font-weight: bold;
        font-size: 20px;
    }

    @media (max-width: 767px) {
        span, h1 {
            font-size: 20px;
            grid-column-start: 1;
            grid-column-end: span 3;
            text-align: left;

            &:after {
                left: 0;
            }

            &:has(+ a), &:has(+ label) {
                grid-column-end: span 2;
            }
        }
        a, label {
            font-size: 12px;
        }
    }

    &[left] {
        span, h1 {
            font-size: 18px;
            grid-column-start: 1;
            grid-column-end: span 3;
            text-align: left;

            &:after {
                left: 0;
            }

            &:has(+ a), &:has(+ label) {
                grid-column-end: span 2;
            }
        }
    }
}

filter-header {
    margin-bottom: 16px;
}

products-section {
    display: block;
    background: white;
    white-space: normal;
    margin: 24px 0;

    @media (max-width: 767px) {
        & {
            margin: 10px 0;
        }
    }

    > div {
        grid-area: content;

        @media (max-width: 767px) {
            & {
                padding: 20px 0 10px;
            }

            &:has(section-description) {
                display: flex;
                flex-direction: column;

                section-description {
                    order: 1;
                }
            }
        }
    }

    section-header {
        @media (max-width: 767px) {
            & {
                padding: 0 var(--container-padding);
            }
        }
    }
}

section-description {
    display: block;
    line-height: 26px;
    padding: 0;
    font-size: 15px;

    * {
        padding: 0 !important;
        margin: 0 !important;
    }
    a {
        color: var(--gray);
    }
    p {
        margin: 24px 0 !important;
    }
    h2, h3, h4 {
        margin: 1rem 0 !important;
        font-weight: 600;
    }
    h2 {
        font-size: 150%;
    }
    h3 {
        font-size: 117%;
    }
    h4 {
        font-size: 100%;
    }
    ul {
        list-style: disc;
        padding-left: 16px !important;
    }
    li {
        padding-left: 2px !important;
    }

    p.has-read-more {
        &~ *:not(.read-more) {
            display: none;
        }

        .read-more {
            color: var(--gray);
            margin-left: 6px !important;
            padding-left: 24px !important;
            cursor: pointer;
            white-space: nowrap;
            background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.40002 7.9998C2.40002 7.66843 2.66865 7.3998 3.00002 7.3998L11.5104 7.3998L8.18416 4.2323C7.9453 4.00263 7.93785 3.6228 8.16752 3.38394C8.3972 3.14508 8.77703 3.13763 9.01589 3.3673L13.4159 7.5673C13.5335 7.68043 13.6 7.83659 13.6 7.9998C13.6 8.16301 13.5335 8.31918 13.4159 8.4323L9.01589 12.6323C8.77703 12.862 8.3972 12.8545 8.16753 12.6157C7.93785 12.3768 7.9453 11.997 8.18416 11.7673L11.5104 8.5998L3.00002 8.5998C2.66865 8.5998 2.40002 8.33117 2.40002 7.9998Z" fill="%230F172A"/></svg>') left center no-repeat;
        }
    }
}

.single-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    text-align: left;
    padding: var(--container-padding);
    border: 1px solid #F2F2F2;
    transition: box-shadow var(--transition);
    color: var(--black);

    &:hover {
        box-shadow: 0 0 27.7px 0 rgba(0, 0, 0, 0.14);
    }

    &.out-of-stock {
        opacity: 0.5;
        filter: grayscale(0.5);
    }

    product-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;

        product-labels {
            display: flex;
            align-items: center;
            gap: 4px;
            color: white;
            text-transform: uppercase;
            width: 100%;

            product-label {
                display: inline-grid;
                place-items: center;
                padding: 0 15px;
                height: 28px;
                font: 600 10px/1 var(--font);
                color: #fff;
                background-color: var(--green);

                &.new        { background-color: var(--green); }
                &.promo      { background-color: var(--red); }
                &.preorder   { background-color: #573FCF; }
                &.bestseller { background-color: var(--black); }
            }
        }

        .wishlist-btn {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: url('data:image/svg+xml;utf8,<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 5.75C19 3.26472 16.9013 1.25 14.3125 1.25C12.3769 1.25 10.7153 2.37628 10 3.98342C9.28472 2.37628 7.62312 1.25 5.6875 1.25C3.09867 1.25 1 3.26472 1 5.75C1 12.9706 10 17.75 10 17.75C10 17.75 19 12.9706 19 5.75Z" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>') no-repeat center/contain;
            background-size: 19px 19px;
            cursor: pointer;
            transition: background var(--transition);

            &:hover {
                background: url('data:image/svg+xml;utf8,<svg width="20" height="19" viewBox="0 0 20 19" fill="%23E20513" xmlns="http://www.w3.org/2000/svg"> <path d="M19 5.75C19 3.26472 16.9013 1.25 14.3125 1.25C12.3769 1.25 10.7153 2.37628 10 3.98342C9.28472 2.37628 7.62312 1.25 5.6875 1.25C3.09867 1.25 1 3.26472 1 5.75C1 12.9706 10 17.75 10 17.75C10 17.75 19 12.9706 19 5.75Z" stroke="%23E20513" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>') no-repeat center/contain;
                background-size: 19px 19px;
            }
        }
    }

    product-image {
        display: inline-grid;
        place-items: center;
        padding: 32px 0;

        img {
            max-height: 230px;
            width: auto;
        }

        @media (max-width: 767px) {
            & {
                /*padding: 10px;*/
            }
        }
    }

    product-bottom {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 8px;

        manufacturer-rating {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-self: stretch;

            manufacturer-name {
                display: inline;
                color: var(--gray);
                font-size: 13px;
                text-transform: uppercase;
            }

            rating-score {
                display: inline;
                color: black;

                &:before {
                    content: '★';
                    letter-spacing: 3px;
                    color: #FFBB52;
                }
            }
        }

        product-name {
            display: block;
            width: 100%;
            font-weight: 700;
            font-size: 17px;
            min-height: 48px;
        }

        price-cart {
            margin-top: auto;
            display: flex;
            flex-direction: row;
            width: 100%;

            product-price {
                font-size: 24px;
                font-weight: 700;
                flex: 1;
                display: flex;
                align-items: center;
            }

            add-to-cart {
                display: inline-block;
                width: 52px;
                height: 52px;
                background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1248 8.75V5C13.1248 3.27411 11.7256 1.875 9.99975 1.875C8.27386 1.875 6.87475 3.27411 6.87475 5V8.75M16.3381 7.08936L17.3907 17.0894C17.449 17.6429 17.015 18.125 16.4584 18.125H3.54112C2.98452 18.125 2.5505 17.6429 2.60877 17.0894L3.6614 7.08936C3.71162 6.61222 4.11397 6.25 4.59375 6.25H15.4058C15.8855 6.25 16.2879 6.61222 16.3381 7.08936ZM7.18725 8.75C7.18725 8.92259 7.04734 9.0625 6.87475 9.0625C6.70216 9.0625 6.56225 8.92259 6.56225 8.75C6.56225 8.57741 6.70216 8.4375 6.87475 8.4375C7.04734 8.4375 7.18725 8.57741 7.18725 8.75ZM13.4373 8.75C13.4373 8.92259 13.2973 9.0625 13.1248 9.0625C12.9522 9.0625 12.8123 8.92259 12.8123 8.75C12.8123 8.57741 12.9522 8.4375 13.1248 8.4375C13.2973 8.4375 13.4373 8.57741 13.4373 8.75Z" stroke="%23060606" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
                background-size: 19px 19px;
                cursor: pointer;
                border: 1px solid var(--green);
                transition: background-color var(--transition);

                &:hover {
                    background-color: var(--green);
                }
            }
        }
    }
}

products-listing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 16px;

    @media (min-width: 768px) {
        & {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
    }

    &.htmx-settling {
        opacity: 0.5;
        transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    &[mobile-horizontal] {
        --gap: 10px;
        --padding-end: 50px;

        @media (max-width: 767px) {
            & {
                display: flex;
                flex-wrap: nowrap;
                gap: var(--gap);
                overflow-x: auto;
                /*scroll-snap-type: x mandatory;*/

                .single-product {
                    min-width: 175px;
                    scroll-snap-align: center;
                }

                padding-right: var(--padding-end);

                &:after {
                    content: "";
                    position: absolute;
                    height: 100%;
                    margin: auto 0;
                    width: calc(100vw / 4);
                    border: 0;
                    pointer-events: none;
                    box-shadow: inset -70px 0 30px -30px var(--bg);
                    right: 0;
                }

                + scroll-button {
                    display: block;
                    width: 40px;
                    height: 40px;
                    background: white url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23555' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 6l6 6l-6 6' /></svg>") center no-repeat;
                    fill: black;
                    position: absolute;
                    top: 30%;
                    right: 20px;
                    border: 2px solid black;
                    opacity: 0.2;
                }

                &:not(:has(.single-product + .single-product + .single-product)) {
                    --padding-end: 0;

                    &:after {
                        display: none;
                    }

                    + scroll-button {
                        display: none;
                    }

                    &:not(:has(.single-product + .single-product)) {
                        justify-content: center;

                        .single-product {
                            width: 50%;
                        }
                    }
                }
            }
        }
        @media (max-width: 767px) and (orientation: portrait) {
            .single-product {
                min-width: calc(50% + calc((var(--padding-end) - var(--gap)) / 2));
            }
        }
    }

    &[vertical] {
        display: flex;
        flex-direction: column;

        .single-product {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            min-height: 60px;
            border: 0;
            box-shadow: none;
            overflow: hidden;

            &:hover {
                box-shadow: none;
                background: #f9f9f9;
            }

            /* ukryte elementy */
            product-header,
            .wishlist-btn,
            rating-score,
            add-to-cart {
                display: none;
            }

            product-image {
                padding: 0;
                width: 56px;
                height: 56px;
                flex: 0 0 56px;
                display: grid;
                place-items: center;
                box-sizing: border-box;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            product-bottom {
                flex: 1;
                min-width: 0;
                display: grid;
                grid-template-areas: 'brand price' 'name price';
                grid-template-columns: 1fr auto;
                gap: 2px 12px;

                manufacturer-rating {
                    grid-area: brand;
                }

                manufacturer-rating manufacturer-name {
                    display: block;
                    color: #999;
                    font-size: 11px;
                    text-transform: uppercase;
                    line-height: 1.2;
                }

                product-name {
                    grid-area: name;
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 1.3;
                    height: auto;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                price-cart {
                    grid-area: price;
                    margin: 0;
                    display: flex;
                    align-items: center;
                }
            }

            @media (min-width: 768px) {
                min-height: 70px;

                product-image {
                    width: 64px;
                    height: 64px;
                    flex: 0 0 54px;
                }

                product-bottom {
                    gap: 4px 16px;
                }

                product-bottom manufacturer-rating manufacturer-name { font-size: 12px; }
                product-bottom product-name { font-size: 15px; }
                product-bottom product-price { font-size: 20px; }
            }
        }
    }
}

#categories-tree {
    font-size: 15px;
}

@media (max-width: 767px) {
    body:has([id^=cat-]:checked) {
        .list-lvl1 > a,
        .list-lvl1 > label {
            translate: -100%;
            pointer-events: none;
            opacity: 0;
        }
    }
}

categories-list {
    &.relative {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    @media (max-width: 767px) {
        &.relative {
            height: calc(100% - 62px);
        }

        nav {
            background: white;
            font-size: 14px;

            input {
                display: none;
            }

            label {
                margin: 0;
                font-weight: bold;

                &:has(> input:checked) + div {
                    left: 0;
                    visibility: visible;
                    z-index: 1
                }
            }

            a {
                padding: 10px 15px;
                white-space: normal;
                min-height: var(--mobile-menu-height);
                display: flex;
                align-items: center;
                color: #333;
                border-bottom: 1px solid #ddd;
                border-right: 1px solid #ddd;
                line-height: 1.2;
                font-weight: bold;

                &.grid-row {
                    grid-column: 1 / -1;
                }
            }
        }

        .list-lvl1 {
            display: grid;
            grid-template-columns: 1fr var(--mobile-menu-height);

            > * {
                min-width: var(--mobile-menu-height);
            }

            > label {
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: initial;
                border-bottom: 1px solid #ddd;
                background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23555' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 6l6 6l-6 6' /></svg>") center no-repeat;
                background-size: 20px;
            }
        }

        .list-lvl1, .list-lvl2 {
            width: 100%;
            overflow: auto;
            overscroll-behavior: contain;
            transition: all .15s cubic-bezier(.07, .95, 0, 1);
        }

        .list-lvl2 {
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 100%;
            height: 100%;
            visibility: hidden;

            .go-back {
                padding: 10px 15px;
                line-height: 20px;
                white-space: normal;
                min-height: var(--mobile-menu-height);
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                background: #ddd;
                font-weight: 700;
                font-size: 14px;
            }
        }

        .list-lvl1 > a,
        .list-lvl1 > label {
            transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            translate: 0;
        }

        category-children {
            :first-child {
                font-weight: bold;
            }
            .grandchild {
                font-weight: normal !important;
                padding-left: 40px;
            }
        }
    }
    @media (min-width: 768px) {
        & {
            /* Override starych domyślnych styli */
            nav {
                /* Kill stare */
                overflow-y: visible !important;
                overscroll-behavior-block: unset !important;
                height: auto !important;
                min-height: 0 !important;
                flex-direction: row !important;  /* wymuszenie row zamiast column */
            }

            /* Kill stare style dla wszystkich <a> */
            nav a {
                /* Reset starych szerokości */
                &:not(.list-lvl1 > a) {
                    width: auto !important;
                    min-width: unset !important;
                }

                /* Kill stare hover na linkach prowadzące do otwarcia panelu */
                &:hover + label + div {
                    visibility: hidden !important;
                    pointer-events: none !important;
                }

                /* Kill stare :has styles */
                &:has(+ label + div) {
                    &:after {
                        display: none !important;  /* usuń strzałkę '＞' */
                    }
                }

                &:has(+ label + div:hover) {
                    color: inherit !important;  /* nie zmieniaj koloru */
                }
            }

            /* Kill stare style dla div (paneli) */
            nav div {
                /* Kill stare absolutne pozycjonowanie */
                &:not(.list-lvl1 > label:has(> input:checked) + div) {
                    visibility: hidden !important;
                    pointer-events: none !important;
                    position: static !important;
                    left: auto !important;
                    top: auto !important;

                    /* Kill hover na samym panelu */
                    &:hover {
                        visibility: hidden !important;
                        pointer-events: none !important;
                    }
                }
            }

            nav.list-lvl1 {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 16px;
                padding: 24px;

                /* Przyciski kategorii - PIERWSZE */
                > a {
                    order: 1;
                    flex: 0 0 auto;
                    display: inline-flex;
                    align-items: center;
                    height: 42px;
                    padding: 16px;
                    border: 1px solid var(--black);
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 1;
                    text-decoration: none;
                    cursor: pointer;
                    transition: all 0.2s;
                    white-space: nowrap;
                    width: auto !important;

                    &:after {
                        content: '';
                    }

                    /* Aktywny przycisk */
                    &:has(+ label > input:checked) {
                        color: white !important;
                        background-color: var(--green);
                        border-color: var(--green);
                    }
                }

                /* Ukryj labele i spany */
                > label,
                > span {
                    display: none;
                }

                /* Panel z podkategoriami - NA KOŃCU */
                > .list-lvl2 {
                    order: 2;
                    flex-basis: 100% !important;
                    width: 100% !important;
                    display: none !important;
                    position: static !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    visibility: hidden !important;
                    pointer-events: none !important;
                }

                /* Panel widoczny gdy checkbox checked */
                > label:has(> input:checked) + .list-lvl2 {
                    display: flex !important;
                    flex-flow: column wrap;
                    max-height: 200px;
                    visibility: visible !important;
                    pointer-events: auto !important;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 30px;
                    margin-top: 32px !important;
                    animation: slideDown 0.2s ease-out;

                    /* Ukryj go-back */
                    .go-back {
                        display: none;
                    }

                    /* Kolumny kategorii */
                    category-children {
                        display: flex;
                        flex-direction: column;

                        a:hover {
                            color: var(--green);
                        }

                        /* Nagłówek kategorii */
                        > a:first-child {
                            font-size: 16px;
                            font-weight: 700;
                            padding: 0;
                            text-transform: uppercase;
                            margin-bottom: 24px;
                        }

                        /* Linki podkategorii */
                        .grandchild,
                        .grandgrandchild {
                            padding: 0;
                            line-height: 25px;
                            font-size: 14px;
                            text-decoration: none;
                            display: flex;
                        }

                        .grandgrandchild {
                            padding-left: 20px;
                            color: #555;
                        }

                        &.cat-166,
                        &.cat-349 {
                            display: block !important;
                            columns: 2;

                            > a:first-child {
                                display: block;
                                column-span: all;
                            }
                        }

                        category-grandchildren {
                            display: table;
                        }
                    }
                }
            }

            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }

        .list-lvl2.subcat-74 {
            min-height: 300px;
        }
        .list-lvl2.subcat-646 {
            min-height: 370px;
        }
        .list-lvl2.subcat-75 {
            min-height: 500px;
            max-height: 580px !important;
        }
        .list-lvl2.subcat-512 {
            max-height: 300px !important;
        }
    }
}

.manufacturers {
    white-container {
        padding: 30px 0 20px;

        @media (max-width: 767px) {
            & {
                padding: 20px 0 10px;

                section-header {
                    padding: 0 var(--container-padding);
                }
            }
        }
    }
}

manufacturers-list {
    display: block;
    text-transform: uppercase;
    padding: 20px 30px;
    line-height: 35px;
    font-size: 15px;
    white-space: nowrap;
    overflow-y: auto;
    height: 100%;

    a {
        padding: 10px 15px;

        &:hover {
            color: var(--blue);
            background-color: var(--bg);
        }
    }

    ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        @media (max-width: 767px) {
            & {
                grid-template-columns: 1fr;
            }
        }

        &.images {
            gap: 40px 0;

            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;
                height: 100%;
            }

            img {
                max-height: 80px;
                max-width: 150px;

                @media (max-width: 767px) {
                    & {
                        max-height: 100px;
                        max-width: 70%;
                    }
                }
            }
        }
    }

    li {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .featured {
        font-weight: bold;
    }

    @media (max-width: 767px) {
        & {
            columns: unset;
        }
    }
}

styled-select {
    display: block;
    position: relative;
    background: #fff;

    &.top-33 {
        width: 300px;
        position: relative;
        top: -33px;

        @media (max-width: 767px) {
            width: 40%;
            position: initial;
            top: initial;
        }
    }

    span {
        font-size: 12px;
        color: #767C83;
    }

    select {
        border: none;
        width: 100%;
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        background: var(--bg);
        color: #333;
        text-align: center;
        appearance: none;
        line-height: 2;
    }

    &:has(span) {
        border: 1px solid #E2E2E2;
        padding: 12px 16px;

        select {
            text-align: left;
            line-height: 1;
            padding-top: 20px;
            margin-top: -10px;
            background: transparent;
        }
    }

    &:after {
        content: '';
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMi43MDcxIDE0LjcwNzFDMTIuMzE2NiAxNS4wOTc2IDExLjY4MzQgMTUuMDk3NiAxMS4yOTI5IDE0LjcwNzFMNi4yOTI4OSA5LjcwNzExQzUuOTAyMzcgOS4zMTY1OCA1LjkwMjM3IDguNjgzNDIgNi4yOTI4OSA4LjI5Mjg5QzYuNjgzNDIgNy45MDIzNyA3LjMxNjU4IDcuOTAyMzcgNy43MDcxMSA4LjI5Mjg5TDEyIDEyLjU4NThMMTYuMjkyOSA4LjI5Mjg5QzE2LjY4MzQgNy45MDIzNyAxNy4zMTY2IDcuOTAyMzcgMTcuNzA3MSA4LjI5Mjg5QzE4LjA5NzYgOC42ODM0MiAxOC4wOTc2IDkuMzE2NTggMTcuNzA3MSA5LjcwNzExTDEyLjcwNzEgMTQuNzA3MVonIGZpbGw9JyMwMDAwMDAnLz48L3N2Zz4=");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 20px;
        position: absolute;
        right: 10px;
        height: 100%;
        width: 20px;
        top: 1px;
        pointer-events: none;
    }
}

[loading="lazy"][onload] {
    opacity: 0;
    transition: 0.5s;
}

[loading="lazy"].loaded {
    opacity: 1
}

footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    line-height: 25px;

    div > span {
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    @media (max-width: 767px) {
        & {
            grid-template-columns: 1fr;
            gap: 40px;

            ul {
                line-height: 30px;
            }
        }
    }
}

under-line {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;

    &:after {
        background-color: #ccc;
        content: "";
        display: block;
        width: 30px;
        height: 2px;
        margin-top: 2px;
    }
}

home-icon {
    display: block;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMS41IDcuOTk5ODlMNy40Njk2NyAyLjAzMDIyQzcuNzYyNTYgMS43MzczMiA4LjIzNzQ0IDEuNzM3MzIgOC41MzAzMyAyLjAzMDIyTDE0LjUgNy45OTk4OU0zIDYuNDk5ODlWMTMuMjQ5OUMzIDEzLjY2NDEgMy4zMzU3OSAxMy45OTk5IDMuNzUgMTMuOTk5OUg2LjVWMTAuNzQ5OUM2LjUgMTAuMzM1NyA2LjgzNTc5IDkuOTk5ODkgNy4yNSA5Ljk5OTg5SDguNzVDOS4xNjQyMSA5Ljk5OTg5IDkuNSAxMC4zMzU3IDkuNSAxMC43NDk5VjEzLjk5OTlIMTIuMjVDMTIuNjY0MiAxMy45OTk5IDEzIDEzLjY2NDEgMTMgMTMuMjQ5OVY2LjQ5OTg5TTUuNSAxMy45OTk5SDExIiBzdHJva2U9IiM3NjdDODMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+") center no-repeat;
    background-size: 16px;
    width: 20px;
    height: 20px;
}

relative-container {
    display: block;
    position: relative;
}

footer {
    background: black;
    color: white;
    padding: 40px 0;
    font-size: 14px;
}

sticky-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    will-change: opacity;
    transition: var(--transition);
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(1px);
    display: block;
}

body:has(search-results:not(:empty)) {
    overflow: hidden;

    sticky-overlay {
        opacity: 1;
        pointer-events: unset;
    }
}

search-results {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: var(--box-shadow);
    z-index: 2;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    max-height: calc(100vh - 75px);
    border-left: 1px solid var(--gray);
    border-right: 1px solid var(--gray);

    @media (min-width: 768px) {
        & {
            max-height: calc(100vh - 150px);

            &:has(products-section + products-section) {
                display: grid;
                grid-template-columns: 1fr 5fr;
            }
        }
    }
}

product-container {
    display: block;

    product-top {
        display: grid;
        grid-template-areas: "images availability-fav" "images title" "images rating-seller-date" "images features" "images details";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content min-content min-content min-content 1fr;
        grid-column-gap: 40px;
        grid-row-gap: 24px;

        .availability-fav {
            grid-area: availability-fav;

            &.available div span {
                color: var(--green) !important;
            }
        }
        .rating-seller-date {
            grid-area: rating-seller-date;
        }
        .features {
            grid-area: features;
        }

        @media (max-width: 767px) {
            & {
                grid-template-areas: "availability-fav" "title" "images" "rating-seller-date" "features" "details";
                grid-template-columns: 1fr;
            }
        }

        horizontal-info {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            line-height: 24px;
            font-size: 15px;
            color: #767C83;

            @media (max-width: 767px) {
                line-height: 30px;

                &[mobile-vertical] {
                    flex-direction: column;
                }
            }

            span {
                font-weight: 700;
                color: var(--black);
            }
        }

        product-title {
            display: block;
            grid-area: title;
            background: white;
            position: relative;

            @media (max-width: 767px) {
                & {
                    background: none;
                    padding: 10px;
                    text-align: center;
                }
            }

            .manufacturer {
                color: #767C83;
                text-transform: uppercase;
                font-size: 16px;
                font-weight: 700;
                line-height: 22px;
            }

            h1 {
                line-height: 1;
                border-bottom: none;
                padding: 0;
                margin-bottom: 0;

                .manufacturer {
                    font-weight: bold;
                }

                span {
                    display: block;
                    font-size: 30px;
                    font-weight: 700;
                    letter-spacing: -1px;
                    word-spacing: -1px;
                }

                + h2 {
                    line-height: 25px;
                    font-style: italic;
                }
            }
        }

        product-images {
            display: flex;
            grid-area: images;

            main-image {
                display: block;
                padding: 10% 17%;
                background: white;
                flex: 1;
                position: relative;

                img {
                    margin: 0 auto;
                }

                @media (max-width: 767px) {
                    & {
                        padding: 30px;
                    }
                }

                fav-icon {
                    display: block;
                    width: 50px;
                    line-height: 50px;
                    font-size: 30px;
                    cursor: pointer;
                    text-align: center;
                    position: absolute;
                    top: 15px;
                    right: 15px;
                }
            }

            ul {
                width: 100px;
                margin-right: 20px;

                li {
                    margin-bottom: 20px;
                    padding: 15px;
                    background: white;
                }
            }

            img {
                cursor: pointer;
            }

            @media (max-width: 767px) {
                & {
                    flex-direction: column;

                    ul {
                        order: 2;
                        display: flex;
                        column-gap: 10px;
                        width: 100%;
                        margin: 10px 0 0;

                        li {
                            max-width: 100px;
                        }
                    }
                }
            }
        }

        product-details {
            display: grid;
            grid-area: details;
            background: white;
            padding: 10px 25px 20px;
            grid-template-areas: "attrs price" "options options" "bottom bottom";
            grid-template-columns: 1fr 1fr;

            @media (min-width: 768px) {
                &[wide] {
                    grid-template-columns: 2fr 1fr
                }
            }


            @media (max-width: 767px) {
                & {
                    grid-template-areas: "price" "options" "attrs" "bottom";
                    grid-template-columns: 1fr;
                }
            }

            product-attrs {
                display: flex;
                grid-area: attrs;
                flex-direction: column;
                gap: 10px;
                font-size: 15px;
                font-weight: 600;

                span {
                    font-weight: normal;

                    &.bold {
                        font-weight: bold;
                    }
                }

                .green {
                    color: var(--green);
                }
                .red {
                    color: var(--red);
                }
                .blue {
                    color: var(--blue);
                }

                product-features {
                    display: block;
                    line-height: 25px;
                    font-size: 15px;
                    font-weight: normal;
                    margin-top: 10px;
                    margin-bottom: 20px;

                    ul {
                        list-style: disc;
                        padding-left: 14px;
                    }
                }
            }
            product-price {
                display: block;
                grid-area: price;
                text-align: right;

                @media (max-width: 767px) {
                    & {
                        margin-bottom: 20px;
                    }
                }

                price-normal {
                    display: inline-block;
                    font-size: 48px;
                    color: var(--green);
                    font-weight: 700;
                    letter-spacing: -2px;
                }
                preorder-info {
                    display: block;
                    font-size: 16px;
                    font-weight: bold;
                    color: var(--blue);
                    text-transform: uppercase;
                    line-height: 2;
                }
                special-info {
                    display: block;
                    font-size: 10.5px;
                    color: #4c4c4c;
                    text-transform: uppercase;
                }
                price-old {
                    display: inline-block;
                    font-size: 25px;
                    color: #050505;
                    text-decoration: line-through;
                    font-weight: 600;
                    letter-spacing: -2px;
                    vertical-align: bottom;
                }
                special-percent {
                    display: inline-block;
                    font-size: 28px;
                    color: white;
                    background: var(--red);
                    padding: 0 6px;
                    font-weight: 700;
                    vertical-align: bottom;
                    line-height: 36px;
                    margin: 0 5px 0 10px;

                    &.preorder {
                        background: var(--blue);
                    }
                }
                price-new {
                    display: inline-block;
                    font-size: 48px;
                    color: var(--red);
                    font-weight: 700;
                    letter-spacing: -2px;
                    vertical-align: bottom;
                    position: relative;
                    top: 3px;

                    + portion-text {
                        color: var(--red);
                        margin-top: 3px;
                    }
                }
                portion-text {
                    display: block;
                    font-size: 14px;
                    color: var(--green);
                }
            }
            product-options {
                grid-area: options;
            }
            product-variants {
                grid-area: variants;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin: 30px 0 10px;

                a, span {
                    background: var(--bg);
                    font-size: 15px;
                    padding: 15px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2px solid var(--bg);
                    cursor: pointer;
                    text-align: center;

                    &.selected, &[selected] {
                        border: 2px solid var(--green);
                        background: var(--green);
                        color: white;
                        font-weight: bold;
                    }
                    &.disabled, &[disabled] {
                        color: lightgray;
                        pointer-events: none;

                        &.selected, &[selected] {
                            border: 2px solid var(--red);
                        }
                    }
                }

                option.out-of-stock {
                    color: lightgray;
                }

                @media (max-width: 767px) {
                    & {
                        margin-bottom: 0;
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                    }
                }
            }
            product-buy {
                grid-area: buy;
                margin-top: auto;

                form {
                    display: flex;
                    flex-direction: row;
                    font-size: 20px;
                    line-height: 72px;
                    text-align: center;

                    [name="quantity"] {
                        width: 100px;
                        height: 100%;
                        vertical-align: bottom;
                        text-align: left;
                        padding-left: 40px;
                        border: 1px solid #767C83;
                    }
                    button {
                        flex: 1;
                        background: var(--green);
                        border: 1px solid var(--green);
                        color: var(--black);
                        border: 0;
                        cursor: pointer;
                        font-size: 18px;
                        font-weight: 700;

                        &:active {
                            filter: brightness(.95);
                        }

                        &[readonly] {
                            background: var(--green);
                            color: white;
                        }
                    }
                }

                @media (max-width: 767px) {
                    & {
                        position: fixed;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        z-index: 3;
                        box-shadow: var(--box-shadow-top);

                        form {
                            gap: 0;

                            [name="quantity"] {
                                width: 70px;
                                padding-left: 20px;
                            }
                            button {
                                font-size: 16px;
                                font-weight: 700;

                                svg {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    sticky-shortcuts {
        display: block;
        z-index: 2;
        box-shadow: 0 1px 0px rgba(0,0,0,0.1);
        background-color: white;
        line-height: 50px;
        font-size: 15px;
        margin-top: 20px;

        @media (max-width: 767px) {
            & {
                top: 50px;
                position: sticky;
            }
        }

        > div {
            display: flex;
            max-width: 758px;
            margin: 0 auto;
            overflow-x: auto;
            white-space: nowrap;
        }

        span {
            padding: 0 20px;
            cursor: pointer;

            &.active {
                border-bottom: 2px solid var(--green);
            }

            &:hover {
                background: rgb(250,250,250);
            }

            & + span {
                border-left: 1px solid var(--bg);
            }
        }
    }

    product-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        padding: 20px 25px;
        background: white;
        gap: 10px;

        article {
            grid-column: 1;
        }
        aside {
            grid-column: 2;
            display: flex;              /* niezależne „stackowanie” od góry */
            flex-direction: column;
            gap: 10px;
        }
    }

    product-description {
        display: block;
        background: white;
        line-height: 1.5;
        font-size: 15px;
        margin: 10px auto 0;
        padding: 0;
        max-width: 758px;

        @media (max-width: 767px) {
            & {
            }
        }

        p {
            margin: 1rem 0;

            &:last-child {
                margin-bottom: 0;
            }
        }
        h2 {
            margin: 1rem 0;
            font-weight: bold;
        }
        ul {
            list-style: disc;
            padding-left: 16px;
        }
        li {
            padding-left: 2px;
        }
    }

    details {
        font-size: 15px;
        line-height: 1.5;

        summary {
            font-size: 24px;
            line-height: 22px;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            position: relative;
            margin-top: 15px;
            margin-bottom: 10px;

            @media (max-width: 767px) {
                & {
                    font-size: 20px;
                }
            }
        }

        &[open] summary {
            margin-bottom: 25px;

            &:after {
                content: '';
                display: block;
                width: 100px;
                height: 2px;
                background: var(--green);
                position: absolute;
                top: calc(100% + 10px);
                left: 0;
            }
        }
    }
}

rating-info {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
}

rating-stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 20px;
    font-family: Times, serif;
    vertical-align: sub;

    &::before {
        content: '★★★★★';
        letter-spacing: 3px;
        background: linear-gradient(90deg, #F59E0B var(--percent), #D1D5DB var(--percent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

lab-info {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 25px;
    padding-left: 30px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAEbElEQVQ4jXWUXYhUZRzGn/O+7/me79nd2S+0XV3dTVHSNAWzJKWIwhsviqCMKAi60EIwKOnOAqFCEKG6sTWRxAIpkbKPi9RKF/xYXTfX2l3XnNnZnZkzZ86Zc8573rcLF7aUnpv/zf95+P8vnp8ipcR9isI4aPI4jmPOCaGEapohDUO7fxOAck9EEIb1qufH0zRR4nBjxQtRpDJBmp1GsCyZTCVSpqL8f0Rtls/6F28a70WsuDj9rIZ0hFkXIwpoiEYzcpL1rW3eS7mCpavzF7G5KVEsVgL9kug6A3G5Wh8f4ze62PMENkUBEBy3ffVKM3dB2MOivDuX6TJN/a6V3B0zZf+2emA0u83FaDd5sTVdiFiFoakiloAEVORtPEiQr+hfFNvema5NRlE8H9Fwm6687uYHa6LckOMW8t7EwODuxLGDJQI9AQJoDLaBdhO9DEtq9Ptq9rPZqWDuESml6/jV1kEXo3k8VFA2aYivnyNHP+AnyFlLz7/w8mIB14VFIDVkCYgHp6TvJ2af7T2XsCzS9HhJPVFk+3PY0kfesNDjo7ZkjbK0XyNK8PWhS0cGxw3YSaQlAFApmYo2BUoz97Nf4wDoWzvfvqXtj4zLi7BLR4ePyQBeNusMPMHuXE3/NVI5+8OIoPTRdb06wCGlAgVEICTEthobLD1Nd+x8vageCvWJAI6htDMkOVwff69s7ch3rrt27WYySb75/Do3sXL1ApXZMQwFhMMxlJTFVxqim4DGSbuTKlYlHhqTH07jtI3eDPpn3CXHPvm1eKscUa5a+GjXL1tXHb14vpIDiTHTgi1J9DfpDSFAhBLnycbl2NfDXiWKXsVvNZymMD/d+8exL39qyXVsfmp9NpPxZG346pRmhz7GVORMdMdwBSIoYCQ20czE1p8GCv3YU8V5guKFofHDB08BytOvpPa8tj10zei4/+b7q3sHuI9cBqs4agS2yhdSDcRgmaaYKuHbABNMJrJ4uICNV875pVnnge78bWf4wFd7Qz7z+GNrVzzSQ6AmsEJDTiJS4lbmL1J1hegWUZsDBDkBIsAU1DmmxkdmdKpRnZz8WDsyeJ613ejuM+tFNUbdxXAdIyUc96OyRVsYY8ww1YSzKopWm6ppKWykfPndHd/9eLhGICbHHIbUgmUZAVHozFXL/qzLSeL3Eoo6TKO+PpFMzDU1CINb05fsrlEL5tDE6d3bT3mu15ZpDcM4YsXAVZ1iVBVhR4+67/Dm5V39ZVwzG0+mnW2FjtR82auVhiOumvnJaXEmCutUJbZYeic+6WBIRkYj8nnk6yTXke+3SLvpbbKqzxTaWigj82XPZG1UBpySrrWMN40TKayRtOSp5zTY0ggspE10WujjIMLto5UNbe1z/n/xAshkE6gucu7YRtLgZlWwpoWFEkIiTmOTHi8GN9TZ5a10bbpTJ3SeXPeCT8SyXvc8v8HVSa5NSiViMBXeGvsZk+YzqYxuMvxX90bMMUzIIIhiDikgAcqg6YSxe8139Q9axRCh/8Iu6QAAAABJRU5ErkJggg==') left center no-repeat;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;

    @media (max-width: 767px) {
        & {
            position: unset;
        }
    }
}

menu-container {
    display: block;
    padding: var(--container-padding);
}

filterable-container {
    display: block;
    margin-bottom: 24px;

    @media (min-width: 768px) {
        &:has(filters-container) {
            display: grid;
            grid-template-columns: 1fr 5.6fr;
            column-gap: 32px;
        }

        products-section:not(:has(section-description)) {
            margin: 24px 0;
        }
    }

    filters-container {
        display: block;
        background: white;

        @media (max-width: 767px) {
            position: fixed;
            inset: 0;
            overflow-y: auto;
        }

        filter-container {
            display: block;
            padding: 24px 0;

            ul {
                line-height: 30px;
                display: flex;
                flex-direction: column;
                gap: 5px;
                font-size: 15px;
                list-style: none;
                font-weight: 400;
                padding: 0;
                letter-spacing: 0.3px;

                @media (max-width: 768px) {
                    & {
                        gap: 10px;
                    }
                }

                li:has(input + label) {
                    grid-template-columns: 18px 1fr;
                    align-items: center;
                    gap: 5px;
                    display: grid;
                    height: 30px;

                    label {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                width: 20px;
                height: 20px;
                border: 1px solid #E2E2E2;
                display: inline-grid;
                place-content: center;
                cursor: pointer;
                transition: var(--transition);
                vertical-align: middle;

                &:checked {
                    background-color: var(--green);
                    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSA2LjVMNSAxMC41TDExIDEuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 12px;
                }
            }

            label {
                margin-left: 6px;
                font: 400 14px/1.4 var(--font);
                color: #060606;
                cursor: pointer;
            }

            &:has(+ filter-container),
            &:has(+ form) {
                border-bottom: 0.5px solid #D5D5D5;
            }
        }
    }
}
white-container {
    display: block;
    background: white;
}

article.blog {
    h1 {
        font-size: 34px;
        font-weight: 600;
        text-transform: none;
        text-align: center;
        margin: 10px 0 30px;

        @media (max-width: 767px) {
            & {
                margin-bottom: 20px;
            }
        }
    }
    white-container {
        padding: 30px 0 100px;

        @media (max-width: 767px) {
            & {
                padding-top: 15px;
            }
        }
    }
    .main_thumb {
        position: relative;

        .article-img {
            width: 100%;
            max-width: 100%;
            max-height: 300px;
            object-fit: cover;
            aspect-ratio: 1;
        }
        .date_added {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ffffff;
            color: #111111;
            box-shadow: 0 0 9px rgba(0,0,0,0.1);
            min-width: 53px;
            padding: 7px 4px 10px;
            text-align: center;
            line-height: 1;

            .day {
                display: block;
                font-size: 24px;
                margin-bottom: 3px;
            }
            .year {
                display: block;
                font-size: 12px;
                margin-top: 7px;
            }
        }
    }
    .stats {
        margin: 20px;
        color: #777;

        i + i::before {
            content: "/";
            margin: 0 9px 0 8px;
            font-size: 9px;
            vertical-align: middle;
        }

        @media (max-width: 767px) {
            & {
                margin: 20px 0;
            }
        }
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        line-height: 1.3;

        b {
            font-weight: inherit;
            display: contents;
        }
    }
    h2, h3, h4 {
        margin-block: 20px;
    }
    h2 {
        font-size: 150%;
    }
    h3, h4 {
        font-size: 117%;
    }
    .main_description {
        line-height: 1.7;
        font-size: 15px;

        p {
            margin-block: 20px;

            &:empty {
                display: none;
            }

            span {
                display: contents;
            }
        }
        ul, ol {
            list-style: square;
            margin: 20px 30px;

            li {
                padding-left: 10px;

                p {
                    margin: 0;
                }
            }

            &.collapsed {
                display: none;
            }
        }
        a {
            color: var(--blue);
            text-decoration: underline;
        }
        img {
            margin-block: 20px 0;
        }
        br {
            display: none;
        }
        button[data-target] {
            margin: 20px 0;
            padding: 10px 20px;
            display: block;
            cursor: pointer;
        }
    }

    prev-next-articles {
        display: flex;
        flex-direction: row;

        a {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: min-content 1fr;
            grid-column-gap: 15px;
            grid-template-areas: "image text text" "image title title";
            text-align: left;

            &.next {
                grid-template-areas: "text text image" "title title image";
                text-align: right;
            }

            img {
                grid-area: image;
            }
            span {
                grid-area: text;
            }
            h4 {
                grid-area: title;
            }
        }
    }
}
notifications-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    transition: var(--transition);
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(1px);
    visibility: hidden;

    &:not(:empty) {
        opacity: 1;
        pointer-events: initial;
        visibility: visible;
    }
}
body:has(notifications-container:not(:empty)) {
    overflow: hidden;
}
notification-dialog {
    padding: 20px;
    background: white;
    font-size: 16px;
    min-width: 300px;
    max-width: min(90%, 500px);
    line-height: 1.3;
    position: relative;

    @media (min-width: 768px) {
        & {
            min-width: 500px;
        }
    }

    img {
        margin: 40px auto 20px;

        @media (max-width: 767px) {
            & {
                display: none;
            }
        }
    }

    .bold {
        font-weight: bold;
    }

    input[type="email"] {
        display: block;
        color: black;
        background-color: #eee;
        padding: 0 30px;
        font-weight: 600;
        line-height: 40px;
        text-align: center;
        width: 100%;
        margin-top: 20px;
    }
    button,
    buy-button {
        display: block;
        color: white;
        background-color: var(--green, #64BD12FF);
        padding: 0 30px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
        width: 100%;

        &[blue] {
            background-color: var(--blue);
        }

        &:active {
            filter: brightness(.95);
        }
    }

    a button,
    a buy-button {
        margin-top: 20px;
    }
}
crypted-email {
    cursor: pointer;

    &:after {
        content: attr(data-name) "@" attr(data-domain);
    }
}
.latest-articles {
    display: block;
    background: white;
    margin-bottom: 20px;

    .single-product {
        @media (min-width: 768px) {
            & {
                margin: 0 20px;
            }
        }
    }
}
.blue-heading {
    display: inline-block;
    font-size: 26px;
    font-weight: bold;
    font-style: italic;
    color: white;
    transform: skew(-5deg, 0deg);
    width: auto;
    padding-right: 20px;
    text-transform: uppercase;

    @media (max-width: 767px) {
        & {
            font-size: 20px;
            width: 80%;
        }
    }

    &:before {
        content: '';
        display: block;
        width: 100%;
        background: #40a8de;
        transform: skew(-5deg, 0deg);
        z-index: -1;
        position: absolute;
        top: -3px;
        left: -10px;
        height: calc(100% + 8px);
    }
}

/* roboto-regular - latin_latin-ext */
@font-face {
    font-display: fallback; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v30-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin_latin-ext */
@font-face {
    font-display: fallback; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v30-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: fallback;
    font-family: 'flags';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

#checkout-checkout {
    .panel-body {
        .radio {
            border: 2px solid #e9e9e9;
            padding: 5px 25px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: 0.1s;
            background-color: #fff;

            &:hover {
                border-color: #c0c0c0;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            }

            &:has(input:checked) {
                border-color: var(--blue);
                background-color: #f0f8ff;
            }

            input[type="radio"] {
                margin-right: 10px;
                vertical-align: middle;
            }

            label {
                display: block;
                padding: 10px;

                img {
                    margin-top: 10px;
                }
            }
        }

        .paczkomat {
            display: flex;
            align-items: stretch;
            margin-top: 10px;
            margin-bottom: 5px;

            #button-paczkomaty-select {
                border-right: none;
                white-space: nowrap;
                flex-shrink: 0;
            }

            #paczkomat {
                background-color: #f8f9fa;
                cursor: default;
            }

            #paczkomat:focus,
            #button-paczkomaty-select:focus + #paczkomat {
                border-color: #86b7fe;
                box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
                position: relative;
                z-index: 2;
            }

            #paczkomat::placeholder {
                color: #6c757d;
                font-style: italic;
            }

            @media (max-width: 768px) {
                flex-direction: column;

                #button-paczkomaty-select {
                    width: 100%;
                    border-right: 1px solid transparent;
                }

                #paczkomat {
                    text-align: center;
                    width: 100%;
                    border-top: 0;
                }
            }
        }
    }
}
@media screen and (max-width: 600px) {
    body.product-product #CookiebotWidget:not(.CookiebotWidget-inactive) {
        bottom: 60px !important;
    }
}