/*
Theme Name: Melli Child
Theme URI: https://nove.melli.cz
Template: reactwind
Author: Pítr / WebyAShopy
Author URI: https://webyashopy.cz
Description: Child theme pro melli.cz — grafický klon melli.sk. Přebírá reactwind (Tailwind v4 + DaisyUI v5, WindPress runtime) a nastavuje design tokeny: vínová #9D0A0F, krémová #F9F8F6, font Roboto (latin-ext), plochý design (ostré rohy), tlačítka VERZÁLKAMI.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: melli-child
*/

/* Veškeré styly řeší DaisyUI/Tailwind (WindPress runtime) + functions.php (tokeny, font override). */

/* =========================================================================
 * Klasické WooCommerce shortcody jako jednotný stylovaný výpis
 * [products], [best_selling_products], [sale_products], [featured_products], …
 *
 * Reactwind odstraňuje výchozí WC layout CSS, takže `ul.products` nemá mřížku
 * (karty by se naskládaly pod sebe). Doplňujeme grid, aby shortcode vypadal
 * stejně jako archiv (content-product.php = jedna sdílená karta).
 *
 * Karta sama (foto 4/3, hover, název + „od" cena, bez tlačítka) se řídí
 * `content-product.php` + reactwind Customizerem (`.card figure`), tady řešíme
 * jen rozložení mřížky. Počet sloupců = atribut `columns` shortcodu (.columns-N).
 * ========================================================================= */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobil: 2 sloupce */
  gap: var(--spacing-lg, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Reset zbytků po výchozím WC layoutu (float/šířky), grid si řídí umístění sám. */
.woocommerce ul.products > li,
.woocommerce ul.products > .product,
ul.products > li,
ul.products > .product {
  width: auto;
  margin: 0;
  float: none;
}

/* Desktop: výchozí 3 sloupce (jako výpis melli.sk); atribut columns přebíjí. */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
  ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
  ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
  ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
  ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
  ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
}