/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


/*
 * Finales "Smart Grid" CSS für den Shortcode V4
 */

/* 1. Der Grid-Container (unsere <ul>) */
.hp-dynamic-grid {
    display: grid;
    gap: 20px; /* Abstand zwischen den Blöcken */
    
    /* WICHTIG: Das <ul>-Styling von WoodMart (wd-sub-menu) zurücksetzen,
       damit es sich wie ein Grid verhält und nicht wie eine Liste */
    padding: 0;
}

/* 2. Die "Smarte" Spalten-Logik (Standard) */
.hp-dynamic-grid.cols-auto {
    /* Magie: Erstelle Spalten, die min. 180px breit sind.
       Passe die 180px an, bis es Dir gefällt. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* 3. Manuelle Spalten-Logik (falls cols="X" gesetzt) */
.hp-dynamic-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.hp-dynamic-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hp-dynamic-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.hp-dynamic-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.hp-dynamic-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* 4. Styling der Blöcke (<li>) */
/* (Wir brauchen fast nichts, da wir die WoodMart-Klassen 'item-with-label' erben!) */
.hp-dynamic-grid > li.item-with-label {
    /* Optional: Falls die Blöcke Ränder haben sollen (wie in Deinem CSS von vorhin) */
    /* padding: 15px; */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.07); */
    /* border-radius: 4px; */
}

/*
 * Ergänzung: Produktanzahl "blasser" gestalten
 */
.hp-dynamic-grid .cat-count {
    color: #999;
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 2px;
}



/*
 * Versteckt die "Hersteller/Marke"-Zeile im "Zusätzliche Informationen"-Tab
 * (MVP-Lösung, da PHP-Filter von WoodMart ignoriert wird)
 */
.woocommerce-product-attributes-item--attribute_herstellermarke {
    display: none !important;
}