/**
 * Katalog: mřížka a karta produktu (templates/partials/product-tile.php), lišta řazení a tlačítko Filtry.
 * Načítá se po archive-product.css (sdílí ho Singles). Ten má pravidla s !important a vyšší
 * specifičností (např. 3 sloupce i na mobilu), proto tady selektory začínají .ed-list.
 * Staré části archive-product.css se odstraní ve fázi C9.
 */

/* Počet sloupců podle šířky obsahu, ne okna (stránka funguje i na půlce obrazovky). */
.ed-list {
    container: ed-list / inline-size;
    width: 100%;
    min-width: 0;
}

.ed-list > ul.products.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@container ed-list (min-width: 480px) {
    .ed-list > ul.products.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
}

@container ed-list (min-width: 1000px) {
    .ed-list > ul.products.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
}

/* ── Karta ────────────────────────────────────────────────────────────── */
.ed-list li.ed-tile.product {
    min-width: 0;
}

.ed-list li.ed-tile.product .woocommerce-loop-product__title a {
    overflow-wrap: anywhere;
}

/* Štítek: v HTML normální text (čtečky), vzhled verzálek zůstává. */
.ed-list li.ed-tile.product .stock-badge {
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

/* Vyprodané: šedé tlačítko „Není skladem" (odkaz na detail zůstává). */
.ed-list li.ed-tile.product.outofstock .button,
.ed-list li.ed-tile.product.outofstock .button:hover {
    background: var(--ed-disabled, #d1d5db) !important;
    color: var(--ed-disabled-text, #6b7280) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Úzká karta (2 sloupce na mobilu): menší písmo a odsazení, tlačítko na jeden řádek. */
@container ed-list (max-width: 479px) {
    .ed-list li.ed-tile.product .woocommerce-loop-product__link { padding: 7px !important; margin-bottom: 6px !important; }
    .ed-list li.ed-tile.product .woocommerce-loop-product__title { font-size: 12.5px !important; height: 36px !important; padding: 0 8px !important; margin: 0 0 6px !important; }
    .ed-list li.ed-tile.product .price { font-size: 15px !important; padding: 0 8px 10px !important; }
    .ed-list li.ed-tile.product .stock-badge { padding: 3px 7px !important; font-size: 9.5px !important; top: 6px !important; left: 6px !important; }
    .ed-list li.ed-tile.product .button { width: calc(100% - 14px) !important; margin: auto 7px 0 !important; padding: 10px 8px !important; font-size: 12px !important; white-space: nowrap; }
}

/* ── Lišta řazení a tlačítko Filtry ───────────────────────────────────── */
.epicdecks-sorting-bar .epicdecks-orderby-select {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-family: var(--ed-font);
}

/* Dřív černé (jediný černý prvek webu) – nově v barvách webu. */
.epicdecks-sorting-bar .epicdecks-mobile-filter-btn {
    background: var(--ed-brand-soft);
    color: var(--ed-brand-ink);
    border: 1.5px solid var(--ed-brand-line);
    font-family: var(--ed-font);
    transition: background var(--ed-ease), border-color var(--ed-ease);
}

.epicdecks-sorting-bar .epicdecks-mobile-filter-btn:hover,
.epicdecks-sorting-bar .epicdecks-mobile-filter-btn:focus-visible {
    background: var(--ed-surface);
    border-color: var(--ed-brand);
}

.ed-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ed-pill);
    background: var(--ed-brand);
    color: #fff;
    font-size: var(--ed-fs-xs);
    font-weight: 700;
    line-height: 1;
}

.ed-filter-count[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .epicdecks-sorting-bar .epicdecks-orderby-select { flex: 1 1 auto; }
    .epicdecks-sorting-bar .epicdecks-mobile-filter-btn { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-list li.ed-tile.product,
    .ed-list li.ed-tile.product:hover { transition: none !important; transform: none !important; }
}