/* ──────────────────────────────────────────────────────────────────────────
   Avoir — jednotná produktová dlaždice na mobilu
   Platí pro VŠECHNY výpisy: kategorie, vyhledávání, akce, výrobce, moduly
   na homepage. Dřív ta pravidla žila jen v category.twig, takže ostatní
   výpisy zůstávaly rozbité.

   Skutečná struktura karty (větev image_effect = swatches):
     .product-thumb > .product-item > .image > [ a > (h4.product-name-overlay + img) , .box-cart ]

   Pozor: název i košík jsou VNOŘENÉ uvnitř .image, ne sourozenci
   .product-thumb. Proto flex order na .product-thumb nikdy nefungoval
   a .box-cart si držel position:absolute z desktopu — cena s košíkem
   pak ležela přes fotku. Flex kontejnerem musí být .image.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

  .product-layout { padding: 4px; margin-bottom: 8px; }

  .product-thumb {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    height: 100%;
  }

  .product-thumb .product-item { height: 100%; }

  .product-thumb .image {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
  }

  /* <a> nese název + fotku a roztáhne se, takže cenu vždy odtlačí dolů */
  .product-thumb .image > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 10px 0;
    text-decoration: none;
  }

  /* Název — 2 řádky s pevnou výškou, aby fotky lícovaly napříč kartami */
  .product-thumb .product-name-overlay {
    position: static;
    order: 1;
    margin: 0 0 8px;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.3;
    /* min-height místo height — o oříznutí se stará line-clamp sám,
       pevná výška mu do toho fušuje a seká druhý řádek v půlce */
    min-height: 30px;
    font-weight: 500;
    color: #5a4e37;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Fotka — pevná plocha + contain, aby drobné náušnice a velké kruhy
     měly stejnou vizuální váhu a všechny karty stejnou výšku */
  .product-thumb .image > a img {
    order: 2;
    width: 100%;
    height: 132px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Košík + cena — statické, oddělené linkou, už nepřekrývá fotku */
  .product-thumb .box-cart {
    position: static;
    order: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid #f1ede5;
    background: #fff;
  }

  .product-thumb .box-cart .button-cart {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
  }

  .product-thumb .box-cart .price {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    color: #3d3427;
    line-height: 1.2;
  }

  /* "Cena bez DPH" se na ~180px šířky karty nevejde */
  .product-thumb .box-cart .price-tax { display: none; }

  /* Wishlist / Compare / Quickview — na mobilu nemá smysl */
  .product-thumb .button-group { display: none; }

  /* Štítky Sale/New zůstávají nad fotkou */
  .product-thumb .pro-label { z-index: 3; }

  /* ── Varianta B: karta s .caption ────────────────────────────────────
     Vyhledávání, akce a výrobce renderují jiný markup:
       .product-item > [ .image > (a>img, .box-cart) , .caption > (h4, .price, .product-description) ]
     Název a cena jsou v .caption, košík zůstává v .image — CSS je
     přerodičovat neumí, takže spodní pruh vyhradíme paddingem a obě
     části do něj usadíme absolutně. Výsledek je stejný jako varianta A.
     Bez toho měly karty rozdílnou výšku podle délky popisu (až 40 px). */

  .product-thumb .product-item:has(> .caption) {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 50px; /* vyhrazený pruh pro košík + cenu */
  }

  /* .image nesmí být pozicovací kontext, jinak by se do něj košík ukotvil */
  .product-thumb .product-item:has(> .caption) .image {
    position: static;
    order: 2;
    display: block;
    height: auto;
    padding: 0 10px;
  }

  .product-thumb .product-item:has(> .caption) .caption {
    order: 1;
    padding: 10px 10px 0;
    text-align: center;
  }

  .product-thumb .product-item:has(> .caption) .caption h4 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.3;
    /* min-height místo height — o oříznutí se stará line-clamp sám,
       pevná výška mu do toho fušuje a seká druhý řádek v půlce */
    min-height: 30px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-thumb .product-item:has(> .caption) .caption h4 a {
    color: #5a4e37;
    text-decoration: none;
  }

  /* Popis je hlavní příčina rozdílných výšek a na dlaždici nemá co dělat */
  .product-thumb .product-item:has(> .caption) .product-description { display: none; }

  .product-thumb .product-item:has(> .caption) .caption .price {
    position: absolute;
    right: 10px;
    bottom: 12px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #3d3427;
    line-height: 1.2;
  }

  .product-thumb .product-item:has(> .caption) .box-cart {
    position: absolute;
    left: 10px;
    bottom: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  /* Lišta „Tříděno podle / počet" na vyhledávání přetékala mimo obrazovku
     (input-group má pevnou šířku selectu) — na mobilu ať se zalomí. */
  .product-filter .form-group.input-group,
  .tool-bar .form-group.input-group {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }
  .product-filter .form-group.input-group > .form-control,
  .tool-bar .form-group.input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* Dělicí linka nad spodním pruhem */
  .product-thumb .product-item:has(> .caption)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    border-top: 1px solid #f1ede5;
  }
}