/* ============================================================
   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: 20px = stejne siroka bila mezera nahore, jaka uz je od prirozene
     pod strihovym pruhem (tu mezeru dole tvori odsazeni nasledujiciho banneru,
     ktere je soucasti sablony a nemenime ho - misto toho jsme dorovnali tuto
     horni mezeru na stejnou siri, aby to bylo opticky symetricke).
     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: 20px 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 ----
     scroll-snap-type: x MANDATORY (misto puvodniho "proximity") zajisti, ze prst
     po puštění vzdy doscroluje uplne na zacatek nejblizsi karty. Diky tomu se
     nikdy nezastavi "napul" mezi dvema kartami, coz drive zpusobovalo, ze
     zleva prosvitaval kousek predchozi bile karty misto ciste oranzove. */
  #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 mandatory;
    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;
  }
}