/* =============================================================================
   Shoplik - wlasne style i nadpisania Webflow.

   TU pisze sie wszystkie wlasne regulki. NIE w css/shoplik-templates.css,
   css/components.css ani css/normalize.css - te trzy pochodza z eksportu
   Webflow (zrodlo: ___szablon/css/) i przy kazdym kolejnym eksporcie sa
   nadpisywane w calosci, wiec zmiany w nich przepadaja bez sladu.

   Ten arkusz laduje sie PO shoplik-templates.css, wiec przy tej samej
   specyficznosci wygrywa i nadaje sie zarowno na nowe komponenty,
   jak i na nadpisania regul Webflow.

   Wpiety w szablonach jako {$css_custom} oraz w buildzie bundla
   (script/build_shoplik_core_css.php).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   NADPISANIA WEBFLOW
   Kazde nadpisanie z komentarzem: co i dlaczego, zeby przy kolejnym eksporcie
   bylo wiadomo, czy nadal jest potrzebne.
   -------------------------------------------------------------------------- */

/* Webflow ustawia .pc-info { height: 100% }. Blok opisu produktu stoi w kolumnie
   sticky, wiec procentowa wysokosc rozciagala jego pusta czesc poza sekcje
   produktu - niewidoczna warstwa nachodzila na sekcje produktow powiazanych
   i przechwytywala kliki w strzalki slidera. */
.pc-info {
  height: auto;
}


/* -----------------------------------------------------------------------------
   MINIATURY WYBORU WARIANTU (product/variants.tpl)
   -------------------------------------------------------------------------- */

.pc-war-pictures {
  flex-flow: wrap;
  display: flex;
}

.pwp-photo {
  cursor: pointer;
  border: 1px solid #0000000a;
  width: 80px;
  height: 110px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 1px;
  transition: border-color .2s;
}

.pwp-photo:hover {
  border-color: #000;
}

.pwp-photo.pwp-active {
  border: 1px solid #000;
}

.pwp-img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pwp-img-contain {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.pc-subname {
  color: #0000004a;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}


/* -----------------------------------------------------------------------------
   LICZNIK DARMOWEJ DOSTAWY (free-delivery-counter.tpl)
   Uwaga: styl uzywany takze w koszyku i checkoucie - dlatego ten arkusz musi
   byc wpiety wszedzie tam, gdzie laduje sie shoplik-templates.css.
   -------------------------------------------------------------------------- */

.c1-delivery-counter {
  flex-flow: column;
  margin-top: 20px;
  display: flex;
}

.cdc-loader {
  flex-flow: row;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 6px;
  display: flex;
}

.cdc-load {
  background-color: #eee;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  height: 4px;
  display: flex;
}

.cds-left {
  padding-right: 5px;
}

.cdc-right {
  padding-left: 5px;
}

.cdcl {
  background-color: #000;
  width: 50%;
}

.cdcl-bottom {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cdc-ico {
  width: 30px;
  margin-right: 5px;
}

.cdc-inf {
  font-size: 12px;
  line-height: 12px;
}


/* -----------------------------------------------------------------------------
   RESPONSYWNOSC
   Breakpointy zgodne z eksportem Webflow (991 / 767 / 479 px).
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .pwp-photo {
    width: 70px;
    height: 90px;
    margin-bottom: 5px;
    margin-right: 5px;
  }

  .pc-subname {
    line-height: 30px;
  }
}

@media screen and (max-width: 479px) {
  .pc-war-pictures {
    padding-top: 5px;
  }

  .pwp-photo {
    width: 18vw;
    height: 23vw;
  }
}