/* HAUSA - bestsellery w mega menu.
   Konwencja przejeta z kafelkow menu: biale tlo, kreski #e6e3de,
   czerwien marki #e2001a, ta sama typografia. Pasek pokazuje sie
   WYLACZNIE w rozwinietej zakladce kategorii - w widoku
   "Alle Kategorien" kafelki sa male i produkty nie maja tam sensu. */

#header .ets_mm_megamenu .hmb {
    display: none;
}

#header .ets_mm_megamenu .ets_mm_categories[data-mm-active] > li.mm-active .hmb {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e6e3de;
}

/* Miniatura kategorii (img.mm-shot) jest zbedna w rozwinietej zakladce -
   pod nia stoja trzy prawdziwe produkty ze zdjeciami. W widoku
   "Alle Kategorien" zostaje, bo tam jest jedynym elementem graficznym. */
#header .ets_mm_megamenu .ets_mm_categories[data-mm-active] > li.mm-active > img.mm-shot {
    display: none !important;
}

#header .ets_mm_megamenu .hmb__title {
    margin: 0 0 14px !important;
    font: 800 14px/1.1 Inter, sans-serif !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #15161a !important;
}

#header .ets_mm_megamenu .hmb__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#header .ets_mm_megamenu .hmb__item {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    padding: 10px !important;
    border: 1px solid #e6e3de;
    border-radius: 10px;
    background: #fff;
    text-decoration: none !important;
    color: #15161a !important;
    opacity: 1 !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#header .ets_mm_megamenu .hmb__item:hover {
    border-color: #d8d5cd;
    box-shadow: 0 8px 22px -14px rgba(13, 14, 17, .45);
    transform: translateY(-2px);
}

/* zdjecie + numer miejsca */
#header .ets_mm_megamenu .hmb__img {
    position: relative;
    display: grid;
    place-items: center;
    height: 78px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 6px;
    background: #f6f5f1;
}

#header .ets_mm_megamenu .hmb__img img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

#header .ets_mm_megamenu .hmb__rank {
    position: absolute;
    top: 5px;
    left: 5px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #e2001a;
    color: #fff;
    font: 700 11px/1 Inter, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Kolor i grubosc z !important - motyw ma w mega menu ogolne reguly
   dla linkow (rowniez z !important), ktore inaczej wygrywaja i nazwy
   robia sie wyblakle. */
#header .ets_mm_megamenu .hmb__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    font: 600 13px/1.3 Inter, sans-serif !important;
    color: #15161a !important;
    opacity: 1 !important;
}

#header .ets_mm_megamenu .hmb__item:hover .hmb__name {
    color: #e2001a !important;
}

#header .ets_mm_megamenu .hmb__price {
    margin-top: 7px;
    font: 800 15px/1 Inter, sans-serif !important;
    letter-spacing: -.01em;
    color: #15161a !important;
    opacity: 1 !important;
    font-variant-numeric: tabular-nums;
}

/* Na waskich ekranach mega menu przechodzi w liste rozwijana -
   pasek z produktami tylko by ja wydluzyl. */
@media (max-width: 1100px) {
    #header .ets_mm_megamenu .hmb {
        display: none !important;
    }
}