.layout-left-column .products, .layout-right-column .products {
    display: grid;
   }
@media (max-width: 1000px) {
  
.layout-left-column .products, .layout-right-column .products {
    display: block;
   }
}
.img-fluid, .img-thumbnail {
    max-width: 80%;
}

.btn-xs {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    border-radius: 0.2rem !important;
    min-height: auto !important; /* Wichtig, da PrestaShop oft Mindesthöhen erzwingt */
}

 .inpt-xs {
    text-align: center;
    font-size: 0.6rem !important;
    border-width: 1px
    border-radius: 0.3rem !important;
    width:20px;
    height:20px;
}

/* Mobile Filter immer sichtbar */
.ps-facetedsearch--mobile.visible-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
}



/* Filter-Button ausblenden */
@media (max-width: 767px) {
  #search_filter_toggler {
    display: none !important;
  }
}

/*Filter Titel Mobile */
@media (max-width: 768px) {
.ps-facetedsearch .left-block__title {
    color: #9999999 !important;
    margin-bottom: -15px !important;
}
.ps-facetedsearch {

    margin-bottom: 25px !important;
}
}

/* Mobile-Menü immer sichtbar, auch auf Startseite */
.ps-mainmenu__mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
}


/* Kategoriebaum (left-block) auch auf Mobile anzeigen */
/*.ps-categorytree.category-tree.left-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
}
*/
/* Falls Hummingbird ihn per Bootstrap versteckt */
.d-none.d-md-block {
    display: block !important;
}

/* Optional: etwas Abstand auf kleinen Screens */
@media (max-width: 768px) {
    .ps-categorytree.category-tree.left-block {
        /*margin-bottom: 1rem;*/
        display: none !important;
    }
}


/* Farbfilter überall ausblenden */
.facet.color {
    display: none !important;
}

/* Aber auf der Suchseite anzeigen */
.page-search .facet.color {
    display: block !important;
}
/* Nur auf Mobilgeräten bis 575px Breite */
/* Zielgerichtet nur für das Modul "Neue Produkte" auf Mobilgeräten */
@media (max-width: 768px) {
  .ps-newproducts .products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .ps-bestsellers .products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

@layer utilities {
    /* Ändert die Schriftgrösse aller Links im ausgeklappten Megamenü */
    .submenu__right-items .menu-item,
    .submenu__right .menu-item_group-main-item,
    [class*="submenu__"] .menu-item {
        font-size: 14px !important; /* Passe die 16px nach deinen Wünschen an */
        line-height: normal !important;
    }
     /* Logo */
     #_desktop_logo a .logo,
    .header-logo img,
    img.logo.img-fluid {
        width: 320px !important;      /* Erhöhe diesen Wert schrittweise (z. B. 420px, 450px, 500px), bis es passt */
        margin-top:10px;
        max-width: 100% !important;   /* Verhindert, dass es auf kleineren Desktops über den Bildschirmrand bricht */
        height: auto !important;      /* Wichtig, damit das Logo nicht verzerrt oder gestaucht wird */
    }
    
   /* Schiebt die Leiste mit den Hauptkategorien nach links */
   
    @media screen and (min-width: 1200px) { /* xl-Breakpoint passend zur Klasse d-xl-block */
        ul#top-menu.ps-mainmenu__tree {
            margin-left: -8px !important; /* Passe den Wert (z.B. -20px oder -60px) nach Wunsch an */
            padding-left: 0 !important;    /* Entfernt Standard-Innenabstände */
        }
    }
    /* Ändert die Schriftgrösse des Titels auf der Produktlistenseite */
    #js-product-list-header h1.page-title-section,
    .page-title-section {
        font-size: 18px !important; /* Passe die 24px nach deinen Wünschen an */
        line-height: 1.2 !important;
    }
    /* Blendat den Titelblock auf der linken Seite komplett aus */
    .left-block__title,
    .left-block__title-link {
        display: none !important;
    }
    /* Blendet den gesamten Kategoriebaum in der linken Spalte aus */
    
    .ps-categorytree.category-tree.left-block,
    .accordion--category {
        display: none !important;
    }
    
    /* Markiert den Text der aktuell ausgewählten Kategorie */
    /* Markiert den Link der aktuell aktiven Unterkategorie fett und farbig */
    /*
    .category-tree_item.accordion-item.active > .category-tree_item-header .category-tree_item-link,
    li.accordion-item.active > div a.category-tree__item-link {

        color: #24b9d7 !important; /* Deine Wunschfarbe */
    }
    */
}