/* ============================================================
   BASTLIK.CZ — Redesign výpisu produktů v KATEGORII (v2)
   Vložit do: Shoptet -> Vzhled a obsah -> Editor -> HTML kód ->
   Záhlaví, do <style>...</style>. VLOŽIT AŽ ZA stávající CSS.
   K tomuto souboru patří i JS (bastlik-category-listing.js) pro
   tlačítko u nejprodávanějších — viz zpráva.

   Scope: vše je pod body.type-category #content.
   v2 změny:
   - dlaždice podkategorií: 2 sloupce na mobilu, ellipsis (2 řádky),
     bílé pozadí obrázku, bez hover podtržení, stejná výška
   - hlavní výpis: rovnoměrné sloupce (minmax 0) i na mobilu,
     bez šedých pozadí, ORIGINÁLNÍ cenovky (nesahám na ně)
   - nejprodávanější: bílé karty, doplněná skladovost + místo pro
     tlačítko (Do košíku/Detail přidá JS podle dostupnosti)
   - řazení "Řadit podle" jako pěkný pill + dropdown
   - font sjednocen s kategoriemi/detailem (system stack)
   ============================================================ */

body.type-category #content {
  --bstlcl-navy: #16233a;
  --bstlcl-blue: #007bff;
  --bstlcl-green: #9ccc00;
  --bstlcl-green-dark: #8bb400;
  --bstlcl-border: #e5e7eb;
  --bstlcl-bg-soft: #f9fafb;
  --bstlcl-text-muted: #6b7280;
  --bstlcl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* font sjednocený napříč blokem kategorie */
body.type-category #content .category-top,
body.type-category #content .category-content-wrapper,
body.type-category #content .subcategories,
body.type-category #content .products-block,
body.type-category #content #productsTop,
body.type-category #content .listSorting,
body.type-category #content .category-header {
  font-family: var(--bstlcl-font) !important;
}

/* ---------- Nadpisy ---------- */
body.type-category #content .category-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--bstlcl-navy);
  margin-bottom: 24px;
}
body.type-category #content .products-top-header {
  font-size: 22px;
  font-weight: 800;
  color: var(--bstlcl-navy);
  margin: 8px 0 18px;
}

/* ============================================================
   DLAŽDICE PODKATEGORIÍ (ul.subcategories.with-image)
   ============================================================ */
body.type-category #content .subcategories.with-image {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;
  list-style: none !important;
  margin: 0 0 36px 0 !important;
  padding: 0 !important;
}
body.type-category #content .subcategories.with-image > li {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}
body.type-category #content .subcategories.with-image > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100%;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--bstlcl-border) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.type-category #content .subcategories.with-image > li > a:hover {
  border-color: var(--bstlcl-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 123, 255, 0.10);
  text-decoration: none !important;
}
/* zrušit systémové podtržení při hoveru */
body.type-category #content .subcategories.with-image > li > a:hover,
body.type-category #content .subcategories.with-image > li > a:hover .text,
body.type-category #content .subcategories.with-image > li > a:focus .text {
  text-decoration: none !important;
}
body.type-category #content .subcategories.with-image .image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 !important;
}
body.type-category #content .subcategories.with-image .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 !important;
}
body.type-category #content .subcategories.with-image .text {
  font-size: 15px;
  font-weight: 600;
  color: var(--bstlcl-navy);
  line-height: 1.3;
  /* dlouhé názvy: max 2 řádky, pak "…" */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   NEJPRODÁVANĚJŠÍ (#productsTop .products-inline)
   ============================================================ */
body.type-category #content #productsTop.products-inline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  margin-bottom: 8px;
}
body.type-category #content #productsTop .product {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 !important;
}
body.type-category #content #productsTop .product .p {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  height: 100%;
  background: #ffffff !important;
  border: 1px solid var(--bstlcl-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
body.type-category #content #productsTop .product .p > a.image {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.type-category #content #productsTop .product .p > a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 !important;
}
body.type-category #content #productsTop .product .p-in {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 4px !important;
}
/* natvrdo zarovnat VŠE doleva (Shoptet dává obsahu text-align:center,
   proto se to rozhazovalo) + vynulovat marginy */
body.type-category #content #productsTop .product .p-in,
body.type-category #content #productsTop .product .p-in-in,
body.type-category #content #productsTop .product .ratings-wrapper,
body.type-category #content #productsTop .product .p-bottom,
body.type-category #content #productsTop .product .offers,
body.type-category #content #productsTop .product .prices,
body.type-category #content #productsTop .product .name,
body.type-category #content #productsTop .product .availability,
body.type-category #content #productsTop .product .price-final {
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.type-category #content #productsTop .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.type-category #content #productsTop .product .price-standard-wrapper {
  display: none !important;
}
body.type-category #content #productsTop .product .ratings-wrapper {
  display: block !important;
}
body.type-category #content #productsTop .product .name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bstlcl-navy);
  line-height: 1.3;
}
body.type-category #content #productsTop .product .stars-wrapper,
body.type-category #content #productsTop .product .stars-placeholder {
  display: none !important;
}
body.type-category #content #productsTop .product .availability {
  font-size: 12.5px;
  font-weight: 600;
}
body.type-category #content #productsTop .product .availability-amount {
  color: var(--bstlcl-text-muted);
  font-weight: 500;
}
body.type-category #content #productsTop .product .p-code {
  display: none !important;
}
/* původní cenovku nechávám být, jen velikost pro malou kartu */
body.type-category #content #productsTop .product .price-final {
  font-size: 17px !important;
}
body.type-category #content .toggle-top-products {
  color: var(--bstlcl-blue) !important;
  font-weight: 600;
}

/* ============================================================
   ŘAZENÍ "Řadit podle" (.listSorting)
   ============================================================ */
body.type-category #content .listSorting .sortingToggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid var(--bstlcl-border);
  border-radius: 10px;
  color: var(--bstlcl-navy);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.type-category #content .listSorting .sortingToggle:hover {
  border-color: var(--bstlcl-blue);
  box-shadow: 0 4px 14px rgba(0, 123, 255, 0.08);
}
/* žádné duplicitní pseudo-šipky ze šablony */
body.type-category #content .listSorting .sortingToggle::before,
body.type-category #content .listSorting .sortingToggle::after {
  content: none !important;
}
/* ikonky: statická pozice (ne absolutní), aby se nepřekrývaly */
body.type-category #content .listSorting .sortingToggle .icon-sort,
body.type-category #content .listSorting .sortingToggle .icon-chevron-down {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  flex-shrink: 0;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}
body.type-category #content .listSorting .sortingToggle .sortingToggle__label {
  position: static !important;
}
body.type-category #content .listSorting .sortingToggle .sortingToggle__value {
  position: static !important;
  color: var(--bstlcl-blue);
  font-weight: 700;
  margin-right: 2px;
}
body.type-category #content .listSorting .sortingToggle .icon-chevron-down {
  margin-left: 2px !important;
  font-size: 12px;
}
body.type-category #content .listSorting__controls {
  background: #ffffff;
  border: 1px solid var(--bstlcl-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(22, 34, 56, 0.10);
  padding: 6px;
  margin-top: 6px;
}
body.type-category #content .listSorting__control {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  color: var(--bstlcl-navy);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
body.type-category #content .listSorting__control:hover {
  background: var(--bstlcl-bg-soft);
  color: var(--bstlcl-blue);
}
body.type-category #content .listSorting__control--current {
  color: var(--bstlcl-blue);
  font-weight: 700;
}

/* ============================================================
   HLAVNÍ VÝPIS (#products.products-block)
   ============================================================ */
body.type-category #content .products-block {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
}
body.type-category #content .products-block > .product {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
  background: transparent !important;
}
/* Karta */
body.type-category #content .products-block > .product > .p {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  width: 100%;
  min-width: 0;
  background: #ffffff !important;
  border: 1px solid var(--bstlcl-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  transition: box-shadow .2s ease;
}
body.type-category #content .products-block > .product > .p:hover {
  box-shadow: 0 8px 24px rgba(22, 34, 56, 0.08);
}
/* Obrázek — bílé pozadí (žádná šedá) */
body.type-category #content .products-block > .product .p > a.image {
  display: block;
  margin: 0 0 14px 0 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 4 / 3;
}
body.type-category #content .products-block > .product .p > a.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Vnitřní layout */
body.type-category #content .products-block > .product .p-in,
body.type-category #content .products-block > .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-width: 0;
}
/* Název — max 2 řádky, pak "…" */
body.type-category #content .products-block > .product .name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bstlcl-navy) !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}
body.type-category #content .products-block > .product .name span {
  color: var(--bstlcl-navy) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hvězdičky skryté */
body.type-category #content .products-block > .product .stars-wrapper,
body.type-category #content .products-block > .product .stars-placeholder {
  display: none !important;
}
/* Dostupnost */
body.type-category #content .products-block > .product .availability {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
body.type-category #content .products-block > .product .availability-amount {
  color: var(--bstlcl-text-muted);
  font-weight: 500;
}
/* Kód produktu skrytý */
body.type-category #content .products-block > .product .p-code {
  display: none !important;
}
/* Spodní blok — tlačítko dole */
body.type-category #content .products-block > .product .p-bottom {
  margin-top: auto !important;
}
body.type-category #content .products-block > .product .prices {
  margin-bottom: 12px;
}
/* CENOVKU nechávám v původním stylu (nesahám na .price-final) */

/* Tlačítko (Do košíku i Detail) — zelené na celou šířku */
body.type-category #content .products-block > .product .p-tools {
  margin: 0 !important;
}
body.type-category #content .products-block > .product .p-tools form {
  margin: 0 !important;
}
body.type-category #content .products-block > .product .p-tools .btn,
body.type-category #content .products-block > .product .p-tools .btn:last-child,
body.type-category #content .products-block > .product .p-tools .add-to-cart-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px !important;
  background: var(--bstlcl-green) !important;
  border: none !important;
  border-color: var(--bstlcl-green) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  transition: background .15s ease, transform .1s ease;
}
body.type-category #content .products-block > .product .p-tools .btn:hover,
body.type-category #content .products-block > .product .p-tools .btn:last-child:hover,
body.type-category #content .products-block > .product .p-tools .add-to-cart-button:hover {
  background: var(--bstlcl-green-dark) !important;
  border-color: var(--bstlcl-green-dark) !important;
  transform: translateY(-1px);
}

/* ============================================================
   Responzivita
   ============================================================ */
@media (max-width: 991px) {
  body.type-category #content .subcategories.with-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  body.type-category #content .products-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
  }
  body.type-category #content #productsTop.products-inline {
    grid-template-columns: 1fr;
  }
  body.type-category #content .category-title {
    font-size: 24px;
  }
  body.type-category #content .products-block > .product > .p {
    padding: 12px !important;
  }
  body.type-category #content .subcategories.with-image .text {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  body.type-category #content .subcategories.with-image {
    grid-template-columns: 1fr;
  }
  body.type-category #content .products-block > .product .p-tools .btn {
    font-size: 13.5px !important;
    height: 44px !important;
  }
}