/* ============================================================
   FAZONETKA – vodorovny posuvny pruh s produkty na homepage
   Plati jen pro mobil (do 767px) a jen pro 2 sekce na homepage:
   "Nejnovejsi a oblibene PDF strihy" (#products-1)
   "Popularni tistene strihy" (#products-2)
   Na pocitaci (nad 767px) se nic nemeni.
   ============================================================ */

/* Tlacitko "Detail strihu" vytvari doplnkovy JS soubor.
   Ve vychozim stavu je schovane, zobrazi se jen na mobilu (viz media query nize). */
#products-1 .fz-detail-btn,
#products-2 .fz-detail-btn {
  display: none;
}

@media (max-width: 767px) {

  /* ---- svetle oranzove pozadi za nadpisem sekce + kompaktni jednoradkovy nadpis ----
     margin-top: 2px necha tenkou bilou mezeru mezi predchozim blokem na strance a
     timto oranzovym pozadim, aby na sebe vizualne nelepily.
     margin-left/right + width: 100vw "probiji" bocni odsazeni stranky, aby oranzova
     barva sahala uplne od leveho i praveho kraje obrazovky (ne jen v ramci obsahu). */
  .homepage-products-heading-1,
  .homepage-products-heading-2 {
    background: #FDE6DC !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
    padding: 16px 16px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* ---- zadna bila mezera mezi nadpisem a prvni kartou ----
     Shoptet ma na obalu produktoveho pruhu vlastni vnitrni odsazeni nahore/dole,
     ktere by jinak vytvorilo bily pruh mezi oranzovym nadpisem a kartami. */
  .homepage-products-heading-1 + .products-wrapper,
  .homepage-products-heading-2 + .products-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ---- vypnuti puvodniho Shoptet slideru (sipky, tecky) ---- */
  #products-1 ~ .product-slider-navigation,
  #products-2 ~ .product-slider-navigation,
  #products-1 ~ .product-slider-pagination,
  #products-2 ~ .product-slider-pagination {
    display: none !important;
  }

  /* ---- zakladni vodorovne posuvny pruh ---- */
  #products-1.product-slider,
  #products-2.product-slider {
    width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px !important;
    cursor: auto !important;
    padding: 0 0 8px 16px !important;
    background-color: #FDE6DC !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
  }

  /* schovani scrollbaru */
  #products-1.product-slider,
  #products-2.product-slider {
    scrollbar-width: none;
  }
  #products-1.product-slider::-webkit-scrollbar,
  #products-2.product-slider::-webkit-scrollbar {
    display: none;
  }

  #products-1 .products-block,
  #products-2 .products-block {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: auto !important;
    transform: none !important;
    transition: none !important;
  }

  /* schovani technickych duplicitnich karet (oznaci je JS tridou fz-dup-hide) */
  #products-1 .products-block > .product.fz-dup-hide,
  #products-2 .products-block > .product.fz-dup-hide {
    display: none !important;
  }

  #products-1 .products-block > .product,
  #products-2 .products-block > .product {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 80% !important;
    width: 80% !important;
    max-width: 80% !important;
    margin-right: 8px !important;
    scroll-snap-align: start;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #products-1 .products-block > .product:last-of-type,
  #products-2 .products-block > .product:last-of-type {
    margin-right: 16px !important;
  }

  #products-1 .product .p,
  #products-2 .product .p {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #products-1 .product .p-in,
  #products-2 .product .p-in {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 8px 8px;
  }

  #products-1 .product .p-in-in,
  #products-2 .product .p-in-in {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  #products-1 .product .p-bottom,
  #products-2 .product .p-bottom {
    margin-top: auto;
  }

  /* ---- ctvercova fotka ---- */
  #products-1 .product .p > a.image,
  #products-2 .product .p > a.image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  #products-1 .product .p > a.image img,
  #products-2 .product .p > a.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- nazev max 2 radky, stejna vyska pro vsechny karty ---- */
  #products-1 .product .name,
  #products-2 .product .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3em;
    min-height: 2.6em;
  }

  /* ---- skryti zbytecnych dlouhych informaci ---- */
  #products-1 .product .ratings-wrapper,
  #products-2 .product .ratings-wrapper,
  #products-1 .product .price-additional,
  #products-2 .product .price-additional {
    display: none !important;
  }

  /* ---- modry pruh s velikostmi (mezi nazvem a cenou) ----
     Popisek "Tento strih obsahuje velikosti" schovame, necháme jen
     samotna cisla velikosti, zmensena tak, aby se vesla na jeden radek
     do uzsiho pruhu - stejne siroky jako karta, tenci nez tlacitko. */
  #products-1 .product .fzt-sizes-banner,
  #products-2 .product .fzt-sizes-banner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 6px !important;
    margin: 4px 0 !important;
    border-radius: 4px !important;
    background: rgba(164, 219, 232, 0.45) !important;
  }

  #products-1 .product .fzt-sizes-banner-title,
  #products-2 .product .fzt-sizes-banner-title {
    display: none !important;
  }

  #products-1 .product .fzt-sizes-banner-list,
  #products-2 .product .fzt-sizes-banner-list {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- skryti puvodniho formulare "vlozit do kosiku" s poctem kusu ---- */
  #products-1 .product .p-tools,
  #products-2 .product .p-tools {
    display: none !important;
  }

  /* ---- skryti dlouheho popisku produktu ---- */
  #products-1 .product .p-desc,
  #products-2 .product .p-desc {
    display: none !important;
  }

  /* ---- nove tlacitko Detail strihu ---- */
  #products-1 .fz-detail-btn,
  #products-2 .fz-detail-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 9px 0;
    background-color: #F68E5F;
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
  }
}