/* DOMATORIA - naglowek: pasek kontaktu, logo, ikony (lupka, konto, koszyk), menu kategorii
   i wysuwane menu. Markup: scripts/body_head.tpl, zachowanie: js/dm-header.js.
   Uwaga: walidator CSS Shopera odrzuca calc() ze zmienna w srodku - nie uzywac. */

:root {
    --dm-hdr-bg: #fff;
    --dm-hdr-border: #e8e8e8;
    --dm-hdr-text: #111;
    --dm-hdr-muted: #777;
    --dm-hdr-ease: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. Wylaczenie starych zachowan szablonu
   ========================================================================== */

/* overflow-x: hidden na .wrap blokuje position: sticky; clip daje to samo bez tego skutku */
.wrap.rwd {
    overflow-x: clip;
}

/* stary "przyklejany" pasek menu i koszyk doklejany do rogu ekranu po przewinieciu */
.wrap.scrolled {
    padding-top: 0 !important;
}

.wrap.scrolled .menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    box-shadow: none !important;
}

.menu .innermenu .menu-list li.home-link-menu-li {
    display: none !important;
}

/* stary pasek 4 ikon na telefonie i boks kontaktowy doklejany tylko na czesci podstron */
ul.menu-mobile,
#fx-phone {
    display: none !important;
}

/* ==========================================================================
   2. Naglowek i pasek kontaktu
   ========================================================================== */

header.row.dm-header {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    position: sticky;
    top: -37px; /* wysokosc paska kontaktu: przy przewijaniu chowa sie, zostaje pasek z logo */
    z-index: 1000;
    padding: 0 !important;
    border: 0 !important;
    /* linia pod paskiem z logo: na naglowku (cala szerokosc okna), nie na kontenerze */
    border-bottom: 1px solid var(--dm-hdr-border) !important;
    background: var(--dm-hdr-bg) !important;
    transition: box-shadow var(--dm-hdr-ease);
}

header.row.dm-header.is-stuck {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.dm-topbar {
    height: 36px;
    border-bottom: 1px solid var(--dm-hdr-border);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--dm-hdr-muted);
}

.dm-topbar__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    box-sizing: border-box;
    height: 36px;
    padding: 0;
}

.dm-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.dm-topbar__item:hover {
    color: var(--dm-hdr-text);
    text-decoration: none;
}

.dm-topbar__item svg {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* ==========================================================================
   3. Pasek z logo i ikonami
   ========================================================================== */

.dm-header .logo-bar {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    max-width: 100vw;
    min-height: 72px;
    padding: 0 !important;
    border-bottom: 0;
    background: var(--dm-hdr-bg);
}

.dm-header .logo-bar .link-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.dm-header .logo-bar .link-logo img {
    display: block;
    width: auto;
    max-width: none;
    height: 30px;
}

.dm-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--dm-hdr-text);
    cursor: pointer;
    transition: background .2s ease;
}

.dm-icon-btn:hover {
    background: #f4f4f4;
}

/* Ikony naglowka musza wygladac tak samo na kazdej podstronie. Arkusze poszczegolnych stron
   (np. kroki koszyka) potrafia stylowac wszystkie przyciski naraz (button, button[type="button"],
   * { border-radius: 0 }) - te reguly z !important sa od nich mocniejsze. */
html body .wrap.rwd header.row.dm-header .dm-icon-btn,
.dm-header .dm-icon-btn,
.dm-drawer .dm-icon-btn,
.dm-drawer .dm-drawer__toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--dm-hdr-text) !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

.dm-drawer .dm-drawer__toggle {
    width: 56px !important;
    height: 50px !important;
    border-radius: 0 !important;
}

.dm-header .dm-icon-btn:hover,
.dm-header .dm-pop.is-open > .dm-pop__toggle,
.dm-drawer .dm-icon-btn:hover {
    background-color: #f4f4f4 !important;
}

.dm-header .dm-icon-btn svg,
.dm-drawer .dm-icon-btn svg {
    width: 24px !important;
    height: 24px !important;
}

.dm-header .dm-pop__panel,
.dm-header .logo-bar .dm-basket .basket-contain {
    border-radius: 0 !important;
}

.dm-header .dm-account__link--primary,
.dm-drawer .dm-account__link--primary {
    border-radius: 0 !important;
}

.dm-icon-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

.dm-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* hamburger: na telefonie zawsze, na komputerze dopiero gdy menu kategorii zniknie z ekranu */
.dm-hamburger {
    margin-left: -10px;
}

.dm-header-right {
    margin-right: -10px;
}

@media (min-width: 980px) {
    .dm-hamburger {
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease, background .2s ease;
    }

    .dm-header.is-stuck .dm-hamburger {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================================================
   4. Okienka pod ikonami (wyszukiwarka, konto)
   ========================================================================== */

.dm-pop {
    position: relative;
}

.dm-pop__panel {
    position: absolute;
    top: 56px;
    right: -8px;
    z-index: 1200;
    padding: 22px 24px 24px;
    border-radius: 0;
    background: var(--dm-hdr-bg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* strzalka okienka wskazujaca ikone */
.dm-pop__panel::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 23px;
    width: 14px;
    height: 14px;
    background: var(--dm-hdr-bg);
    box-shadow: -1px -1px 0 rgba(0, 0, 0, .05);
    transform: rotate(45deg);
}

.dm-pop.is-open .dm-pop__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* przy otwieraniu widocznosc wlacza sie od razu, zeby pole dalo sie natychmiast zaznaczyc */
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.dm-pop.is-open > .dm-pop__toggle {
    background: #f4f4f4;
}

.dm-pop__title {
    margin: 0 0 14px;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dm-hdr-muted);
}

/* --- wyszukiwarka --- */

.dm-search__panel {
    width: 460px;
    max-width: 92vw;
}

.dm-search__panel .search__container,
.dm-search__panel .search-form {
    position: static !important;
    display: block !important; /* stary szablon chowa formularz na telefonie */
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.dm-search__panel .search__container.none,
.dm-search__panel .search-form.none {
    display: none !important;
}

/* skrypt Shopera na telefonie sam dodaje formularzowi klase "none" (czekal na stara ikone
   lupy z paska mobilnego) - w okienku formularz ma byc widoczny zawsze */
.dm-search__panel .search__container .js__search.search-form.none {
    display: block !important;
}

.dm-search__panel .search__input-area {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 50px !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dm-hdr-text) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.dm-search__panel .search__input-area-item {
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.dm-search__panel .search__input-area-item_grow {
    flex: 1 1 auto;
    min-width: 0;
}

.dm-search__panel .search__input,
.dm-search__panel .search-form input[type="text"] {
    width: 100% !important;
    height: 48px !important;
    margin: 0;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 17px;
    color: var(--dm-hdr-text);
    outline: none;
}

.dm-search__panel .search__btn-search {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--dm-hdr-text) !important;
    cursor: pointer;
}

.dm-search__panel .search__btn-search:hover {
    background: #f4f4f4 !important;
}

.dm-search__panel .js__search-close-btn {
    display: none !important;
}

/* Stary szablon na ekranach do 767 px przelacza formularz w tryb pelnoekranowy (klasa
   search_open): odwraca kolejnosc elementow, chowa przycisk lupy, pokazuje strzalke "wstecz"
   i rozciaga liste wynikow. W okienku ma zostac zwykly uklad: pole, a po prawej lupa. */
.dm-search__panel .search__container {
    clear: none !important;
    min-width: 0 !important;
}

.dm-search__panel .search-form,
.dm-search__panel .search-form.search_open {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.dm-search__panel .search__input-area .search__input-area-item {
    order: 0 !important;
}

.dm-search__panel .search__input-area .search__input-area-item > span {
    padding: 0 !important;
}

.dm-search__panel .search__input-area .js__search-submit-btn {
    display: flex !important;
}

/* podpowiedzi rozwijaja sie w tym samym okienku, pod polem */
.dm-search__panel .search__content {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 56vh !important;
    opacity: 1 !important;
    margin: 12px 0 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto;
}

.dm-search__panel .search__content:empty {
    margin: 0;
}

.dm-search__panel .search__list-item {
    border-bottom: 1px solid #f0f0f0;
}

.dm-search__panel .search__list-item:last-child {
    border-bottom: 0;
}

.dm-search__panel .search__result-icon img {
    max-width: 64px;
}

/* --- konto --- */

/* ikona konta jest zwyklym linkiem; ukryte linki sluza tylko jako zrodlo dla wysuwanego menu */
.dm-account__go {
    text-decoration: none !important;
}

.dm-account__panel[hidden] {
    display: none !important;
}

.dm-account__link {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
    color: var(--dm-hdr-text);
    text-decoration: underline;
}

.dm-account__link:hover {
    color: var(--dm-hdr-muted);
}

.dm-account__link--primary {
    margin-top: 0;
    padding: 13px 16px;
    background: var(--dm-hdr-text);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none !important;
    transition: background .2s ease;
}

.dm-account__link--primary:hover {
    background: #333;
}

/* ==========================================================================
   5. Koszyk: wlasna ikona, pod spodem nietkniety blok Shopera (licznik, podglad)
   ========================================================================== */

.dm-basket {
    position: relative;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.dm-basket__icon {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* display: stary szablon na telefonie chowa blok koszyka, przez co ikona nie reagowala na dotyk */
.dm-header .logo-bar .dm-basket .basket {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    float: none !important;
    width: 44px !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    line-height: 1 !important;
}

.dm-basket .basket a.count {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
}

.dm-basket .basket .px1,
.dm-basket .basket .countlabel > span,
.dm-basket .basket .countlabel b.sum {
    display: none !important;
}

/* z tekstu "Koszyk: (2)" zostaje sama liczba w kolku; pusty koszyk nie pokazuje nic */
.dm-basket .basket .countlabel,
.dm-basket .basket .countlabel b {
    position: static !important;
    font-size: 0 !important;
}

.dm-basket .basket .countlabel b.count span {
    position: absolute !important;
    top: 3px !important;
    right: 1px;
    left: auto !important;
    display: block;
    min-width: 17px;
    width: auto !important;
    height: 17px !important;
    padding: 0 4px;
    border-radius: 0 !important;
    background: var(--dm-hdr-text) !important;
    box-sizing: border-box;
    font-size: 10px !important;
    font-weight: 400;
    line-height: 17px !important;
    text-align: center;
    color: #fff !important;
}

/* --- podglad koszyka (po najechaniu na ikone) ---
   Lekkie, polprzezroczyste okienko z rozmyciem tla. Markup Shopera zostaje bez zmian:
   .basket-products > ul > li (img, a.product-name, .product-info, .remove-product)
   .basket-summery (a "do kasy", .basket-price) */

.dm-header .logo-bar .dm-basket .basket-contain {
    top: 56px !important;
    right: -8px !important;
    left: auto !important;
    z-index: 1200;
    box-sizing: border-box;
    width: 370px !important;
    max-width: 92vw;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05);
    font-size: 14px;
    line-height: 1.4;
    color: var(--dm-hdr-text);
}

/* niewidoczny mostek nad okienkiem: kursor nie "wypada" w przerwie miedzy ikona a okienkiem */
.dm-header .logo-bar .dm-basket .basket-contain::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    left: 0;
    height: 14px;
}

/* Otwieranie: mysza - po najechaniu; dotykiem - pierwsze dotkniecie ikony (klasa is-open z JS),
   drugie prowadzi do koszyka. Nie polegamy na skrypcie Shopera, ktory dziala tylko z mysza. */
.dm-header .logo-bar .dm-basket.is-open .basket-contain {
    display: block !important;
}

@media (hover: hover) {
    .dm-header .logo-bar .dm-basket:hover .basket-contain {
        display: block !important;
    }
}

/* pusty koszyk nie pokazuje okienka */
.dm-header .logo-bar .dm-basket .basket.empty-basket + .basket-contain {
    display: none !important;
}

.dm-basket .basket-contain .basket-products {
    float: none !important;
    width: auto !important;
    max-height: 50vh;
    margin: 0 !important;
    padding: 6px 20px !important;
    border: 0 !important;
    background: none !important;
    overflow-y: auto;
}

.dm-basket .basket-contain .basket-product-list {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none;
}

/* pozycja: miniatura po lewej, obok nazwa, pod nia ilosc x cena i "usun" w jednym wierszu */
.dm-basket .basket-contain .basket-product-list li {
    position: relative;
    display: grid !important;
    grid-template-columns: 64px 1fr auto;
    grid-column-gap: 14px;
    grid-row-gap: 6px;
    align-items: start;
    float: none !important;
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    background: none !important;
    text-align: left;
}

.dm-basket .basket-contain .basket-product-list li:last-child {
    border-bottom: 0 !important;
}

.dm-basket .basket-contain .basket-product-list li > img {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border-radius: 0;
    background: #f4f4f4;
    object-fit: cover;
}

.dm-basket .basket-contain .product-name {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--dm-hdr-text) !important;
    text-decoration: none;
}

.dm-basket .basket-contain .product-name:hover {
    text-decoration: underline;
}

.dm-basket .basket-contain .product-variant {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--dm-hdr-muted);
}

.dm-basket .basket-contain .product-info {
    grid-column: 2;
    grid-row: 2;
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: 400 !important;
    white-space: nowrap;
    text-align: left !important;
    color: var(--dm-hdr-text);
}

.dm-basket .basket-contain .product-info span {
    float: none !important;
    display: inline !important;
    font-size: inherit !important;
    font-weight: 400 !important;
}

.dm-basket .basket-contain .remove-product {
    grid-column: 3;
    grid-row: 2;
    position: static !important;
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

.dm-basket .basket-contain .remove-product a {
    font-size: 12px;
    color: var(--dm-hdr-muted) !important;
    text-decoration: underline;
}

.dm-basket .basket-contain .remove-product a:hover {
    color: var(--dm-hdr-text) !important;
}

/* podsumowanie: najpierw "Suma", pod nia przycisk na cala szerokosc
   (w HTML przycisk jest pierwszy, stad odwrocona kolejnosc) */
.dm-basket .basket-contain .basket-summery {
    display: flex !important;
    flex-direction: column-reverse;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 20px 20px !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 0;
    background: none !important;
    color: var(--dm-hdr-text) !important;
    text-align: left;
}

.dm-basket .basket-contain .basket-summery > a {
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 14px 0 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 0;
    background: #4a4a50 !important;
    font-size: 12px !important;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff !important;
    transition: background .2s ease;
}

.dm-basket .basket-contain .basket-summery > a:hover {
    background: #2f2f33 !important;
}

.dm-basket .basket-contain .basket-price {
    display: block !important;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    color: var(--dm-hdr-text) !important;
}

.dm-basket .basket-contain .basket-price > span {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    float: none !important;
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}

.dm-basket .basket-contain .basket-price > span + span {
    margin-top: 4px;
}

.dm-basket .basket-contain .basket-price > span > span {
    float: none !important;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--dm-hdr-text) !important;
}

.dm-basket .basket-contain .basket-price strong {
    float: none !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--dm-hdr-text) !important;
}

/* przy rabacie cena przed rabatem jest przekreslona i mniejsza */
.dm-basket .basket-contain .basket-price-discount .price-total:first-child strong {
    font-size: 14px !important;
    text-decoration: line-through;
    color: var(--dm-hdr-muted) !important;
}

/* ==========================================================================
   6. Menu kategorii na komputerze
   ========================================================================== */

.menu.row {
    z-index: 100;
    padding: 0 !important;
    border-bottom: 1px solid var(--dm-hdr-border);
    background: var(--dm-hdr-bg);
}

.menu .innermenu {
    height: auto !important;
    line-height: normal !important;
}

.menu .innermenu::before,
.menu .innermenu::after {
    display: none !important;
}

.menu .menu-list.large {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: auto !important;
    border: 0 !important;
    overflow: visible !important;
}

.menu .menu-list > li {
    position: relative;
    float: none !important;
}

.menu .menu-list > li > .cat-h3 a {
    display: block;
    padding: 18px 20px;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dm-hdr-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

/* na wezszych ekranach hasla sa mniejsze, zeby zmiescily sie w jednym wierszu */
@media (max-width: 1279px) {
    .menu .menu-list.large {
        flex-wrap: nowrap;
    }

    .menu .menu-list > li > .cat-h3 a {
        padding: 16px 13px;
        font-size: 13px;
    }
}

@media (max-width: 1099px) {
    .menu .menu-list > li > .cat-h3 a {
        padding: 16px 9px;
        font-size: 12px;
    }
}

.menu .menu-list > li:hover > .cat-h3 a,
.menu .menu-list > li.current > .cat-h3 a {
    color: var(--dm-hdr-muted);
}

/* --- rozwijane listy ---
   Struktura Shopera: li.parent > div.submenu.levelN > ul.levelN > li ...
   Okienkiem jest div.submenu (pozycjonowany wzgledem swojego li), a ul w srodku to zwykla lista.
   Stary szablon pozycjonowal samo ul, a div zostawal w ukladzie - stad rozpychanie listy
   i pozycje wystajace poza okienko. Poziomy: 1 pod haslem, 2 i 3 wysuwane w bok.
   Poziom 4 jest na komputerze pominiety (dostepny w menu hamburgerowym i na stronie kategorii). */

.menu .menu-list li {
    position: relative;
}

.menu .menu-list .submenu {
    position: absolute !important;
    top: 100%;
    left: 0;
    z-index: 200;
    display: none !important;
    box-sizing: border-box;
    width: 270px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: var(--dm-hdr-bg) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);
}

.menu .menu-list li:hover > .submenu,
.menu .menu-list li:focus-within > .submenu {
    display: block !important;
}

.menu .menu-list .submenu > ul {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
}

/* stary szablon dorysowuje przy rozwinieciach trojkaty i kreski (pseudo-elementy) - wylaczamy
   wszystkie; jedynym ozdobnikiem zostaje strzalka "ma podkategorie" zdefiniowana nizej */
.menu .menu-list .submenu::before,
.menu .menu-list .submenu::after,
.menu .menu-list .submenu > ul::before,
.menu .menu-list .submenu > ul::after,
.menu .menu-list .submenu li::before,
.menu .menu-list .submenu li::after,
.menu .menu-list .submenu .cat-h3::before,
.menu .menu-list .submenu .cat-h3::after,
.menu .menu-list .submenu a::before,
.menu .menu-list .submenu li:not(.parent) > .cat-h3 a::after {
    display: none !important;
}

/* pozycje zawsze jedna pod druga (stary szablon ustawia im float: left) */
.menu .menu-list .submenu li {
    display: block !important;
    float: none !important;
    clear: both;
    width: auto !important;
    margin: 0 !important;
}

.menu .menu-list .submenu li .cat-h3 {
    display: block;
}

.menu .menu-list .submenu li .cat-h3 a {
    display: block;
    padding: 9px 34px 9px 20px !important;
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
    color: var(--dm-hdr-text);
}

.menu .menu-list .submenu li:hover > .cat-h3 a {
    background: #f5f5f5;
    text-decoration: none !important;
}

/* znacznik "ma podkategorie" */
.menu .menu-list .submenu li.parent > .cat-h3 a::after {
    content: "" !important;
    position: absolute !important;
    top: 15px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    box-sizing: content-box;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid currentColor !important;
    border-right: 1px solid currentColor !important;
    background: none !important;
    transform: rotate(45deg) !important;
    transition: none !important;
}

/* poziom 2 i 3: wysuwane w bok, na wysokosci wskazanej pozycji */
.menu .menu-list .submenu .submenu {
    top: -8px;
    left: 100%;
}

/* trzy ostatnie hasla menu sa przy prawej krawedzi - ich podlisty wysuwaja sie w lewo */
.menu .menu-list > li:nth-last-child(-n+3) .submenu .submenu {
    right: 100%;
    left: auto;
}

/* poziom 3 bywa dlugi (do ok. 30 pozycji) - przewija sie wewnatrz okienka */
.menu .menu-list .submenu.level3 {
    max-height: 70vh;
    overflow-y: auto;
}

.menu .menu-list .submenu.level3 li.parent > .cat-h3 a::after,
.menu .menu-list .submenu.level4 {
    display: none !important;
}

/* stary szablon po przewinieciu przycinal menu (overflow: hidden), co ucinalo rozwijane listy */
.wrap.scrolled .menu .innermenu .menu-list {
    overflow: visible !important;
}

/* ==========================================================================
   7. Wysuwane menu (hamburger)
   ========================================================================== */

html.dm-menu-open {
    overflow: hidden;
}

.dm-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1290;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dm-hdr-ease), visibility var(--dm-hdr-ease);
}

.dm-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: 88vw;
    background: var(--dm-hdr-bg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dm-hdr-ease), visibility var(--dm-hdr-ease);
}

html.dm-menu-open .dm-overlay {
    opacity: 1;
    visibility: visible;
}

html.dm-menu-open .dm-drawer {
    transform: none;
    visibility: visible;
}

.dm-drawer__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 22px;
    border-bottom: 1px solid var(--dm-hdr-border);
}

.dm-drawer__title {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dm-hdr-muted);
}

/* przewija sie tylko lista kategorii; naglowek i stopka menu stoja w miejscu */
.dm-drawer__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dm-drawer__nav ul {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: none;
    box-shadow: none !important;
    list-style: none;
}

.dm-drawer__nav li {
    position: relative;
    display: block;
    float: none !important;
    width: auto;
    margin: 0;
    border-bottom: 1px solid #f1f1f1;
}

.dm-drawer__nav .submenu li:last-child {
    border-bottom: 0;
}

.dm-drawer__nav .cat-h3 {
    display: block;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.dm-drawer__nav .cat-h3 a {
    display: block;
    padding: 15px 22px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--dm-hdr-text);
    text-decoration: none;
}

.dm-drawer__nav .dm-has-sub > .cat-h3 a {
    padding-right: 64px;
}

.dm-drawer__nav .cat-h3 a:hover {
    background: #f8f8f8;
    text-decoration: none;
}

/* przycisk rozwijania: duze pole dotyku po prawej stronie wiersza */
.dm-drawer__toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dm-hdr-text);
    cursor: pointer;
}

.dm-drawer__toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform var(--dm-hdr-ease);
}

.dm-submenu-open > .dm-drawer__toggle svg {
    transform: rotate(180deg);
}

/* wysokosc ustawia JS (0 -> wysokosc tresci -> auto), tu jest tylko samo przejscie */
.dm-drawer__nav .submenu {
    display: block !important;
    position: static !important;
    height: 0;
    overflow: hidden;
    background: #f7f7f7;
    transition: height var(--dm-hdr-ease);
}

.dm-drawer__nav .submenu .cat-h3 a {
    padding: 12px 22px 12px 36px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.dm-drawer__nav .submenu .submenu {
    background: #efefef;
}

.dm-drawer__nav .submenu .submenu .cat-h3 a {
    padding-left: 52px;
}

.dm-drawer__footer {
    flex: 0 0 auto;
    padding: 18px 22px 22px;
    border-top: 1px solid var(--dm-hdr-border);
}

.dm-drawer__account {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-drawer__account .dm-account__link {
    margin-top: 0;
}

.dm-drawer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--dm-hdr-muted);
}

/* ==========================================================================
   8. Tablet i telefon
   ========================================================================== */

@media (max-width: 979px) {
    .menu.row {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .dm-topbar__inner {
        justify-content: center;
        gap: 16px;
        width: 100%;
        padding: 0 12px;
    }

    /* na waskim ekranie zostaje jeden numer i adres e-mail */
    .dm-topbar__item + .dm-topbar__item:not(:last-child) {
        display: none;
    }

    .dm-header .logo-bar {
        width: 100%;
        min-height: 60px;
        padding: 0 10px !important;
    }

    .dm-header .logo-bar .link-logo img {
        height: 18px;
    }

    .dm-hamburger {
        margin-left: -4px;
    }

    .dm-header-right {
        gap: 0;
        margin-right: -4px;
    }

    /* konto jest w wysuwanym menu */
    .dm-account {
        display: none;
    }

    /* okienko wyszukiwarki: na cala szerokosc ekranu, tuz pod naglowkiem (--dm-pop-top ustawia JS) */
    .dm-pop {
        position: static;
    }

    .dm-pop__panel {
        position: fixed;
        top: var(--dm-pop-top, 110px);
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        padding: 18px 18px 20px;
    }

    .dm-pop__panel::before {
        display: none;
    }

    /* podglad koszyka: jak okienko wyszukiwarki - na szerokosc ekranu, pod naglowkiem (top z JS) */
    .dm-header .logo-bar .dm-basket .basket-contain {
        position: fixed !important;
        top: var(--dm-pop-top, 110px) !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-pop__panel,
    .dm-drawer,
    .dm-overlay,
    .dm-drawer__nav .submenu,
    .dm-drawer__toggle svg {
        transition: none !important;
    }
}