/* Modern product card prototype: DATECS WP-50 ONLINE PLUS (product 783). */

#RamkaProduktu {
  --product-red: #cf261f;
  --product-red-dark: #a91c17;
  --product-ink: #202733;
  --product-muted: #667085;
  --product-line: #e4e7ec;
  --product-soft: #f7f8fa;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(31, 41, 55, 0.11);
  margin: 4px 0 28px;
  overflow: hidden;
  padding: 28px;
}

#KartaProduktu {
  align-items: stretch;
  display: grid !important;
  gap: 30px;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  width: 100%;
}

#ZdjeciaProduktu,
#InformacjeProduktu {
  display: block !important;
  padding: 0 !important;
  width: auto !important;
}

#ZdjeciaProduktu {
  background: linear-gradient(145deg, #fff 0%, #f4f5f7 100%);
  border: 1px solid var(--product-line);
  border-radius: 18px;
  min-width: 0;
  padding: 20px !important;
}

#ZdjeciaProduktu .ZdjeciaKontener {
  max-width: 430px;
  width: 100% !important;
}

#ZdjeciaProduktu #ZdjeciaDuze {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 390px;
}

#ZdjeciaProduktu #ZdjeciaDuze a {
  width: 100%;
}

#ZdjeciaProduktu #ZdjeciaDuze img {
  filter: drop-shadow(0 20px 20px rgba(20, 26, 34, 0.14));
  height: 370px !important;
  max-height: 370px;
  object-fit: contain;
  transition: opacity 0.18s ease, transform 0.25s ease;
  width: 100% !important;
}

#ZdjeciaProduktu #ZdjeciaDuze img.WariantZmiana {
  opacity: 0.25;
  transform: scale(0.97);
}

#ZdjeciaProduktu .DodatkoweZdjecia {
  margin: 18px 0 0;
}

#ZdjeciaProduktu .DodatkoweZdjecia div img {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 10px;
  height: 58px !important;
  object-fit: contain;
  padding: 5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 58px !important;
}

#ZdjeciaProduktu .DodatkoweZdjecia div img:hover,
#ZdjeciaProduktu .DodatkoweZdjecia div img:focus,
#ZdjeciaProduktu .DodatkoweZdjecia div.slick-current img {
  border-color: var(--product-red);
  box-shadow: 0 0 0 3px rgba(207, 38, 31, 0.11);
  transform: translateY(-2px);
}

#InformacjeProduktu {
  background: var(--product-soft);
  border: 1px solid var(--product-line);
  border-radius: 18px;
  padding: 26px !important;
}

#InformacjeProduktu .NazwaProducent h1 {
  color: var(--product-ink);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
  margin: 0 0 20px;
}

#InformacjeProduktu .ListaOpisy {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 13px;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  overflow: hidden;
}

#InformacjeProduktu .ListaOpisy .TbPoz {
  border: 0;
  margin: 0;
  padding: 13px 15px;
}

#InformacjeProduktu .ListaOpisy .TbPoz + .TbPoz {
  border-left: 1px solid var(--product-line);
}

#InformacjeProduktu .ListaOpisy .TbPoz span,
#InformacjeProduktu .ListaOpisy .TbPoz strong {
  display: block;
  padding: 0;
}

#InformacjeProduktu .ListaOpisy .TbPoz span {
  color: var(--product-muted);
  font-size: 12px;
  margin-bottom: 3px;
  text-transform: uppercase;
}

#InformacjeProduktu .ListaOpisy .TbPoz strong {
  color: var(--product-ink);
  font-size: 15px;
}

#CechyProduktu {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 13px;
  margin-bottom: 18px;
  padding: 9px 15px 11px;
}

#CechyProduktu table {
  width: 100%;
}

#CechyProduktu td {
  padding: 6px 0;
  vertical-align: middle;
}

#CechyProduktu td:first-child {
  color: var(--product-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding-right: 14px;
  text-transform: uppercase;
  width: 74px;
}

#CechyProduktu .SelectCechyProduktu {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6l5-4.5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  border: 1px solid #cfd4dc;
  border-radius: 9px;
  color: var(--product-ink);
  font-size: 14px;
  min-height: 43px;
  padding: 9px 38px 9px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

#CechyProduktu .SelectCechyProduktu:focus {
  border-color: var(--product-red);
  box-shadow: 0 0 0 4px rgba(207, 38, 31, 0.1);
  outline: 0;
}

.SekcjaCen {
  align-items: end;
  display: grid !important;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 0 !important;
}

.CenyProduktu {
  display: block !important;
  padding: 0 !important;
}

#CenaGlownaProduktuBrutto,
#CenaGlownaProduktuNetto {
  color: var(--product-muted);
  margin: 0;
}

#CenaGlownaProduktuBrutto strong {
  color: var(--product-ink);
  display: block;
  font-size: 36px;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-top: 3px;
}

#CenaGlownaProduktuNetto {
  font-size: 13px;
  margin-top: 4px;
}

#PlatnosciRatalne {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

#PlatnosciRatalne > div {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 10px;
  margin: 0 !important;
  padding: 8px 10px;
}

#PlatnosciRatalne img {
  max-height: 30px;
  width: auto;
}

#PlatnosciRatalne span {
  font-size: 11px;
}

#PrzyciskKupowania {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 13px;
  margin: 2px 0 0;
  padding: 15px;
  text-align: left !important;
}

#PrzyciskKupowania .ErrorCechy {
  background: #fff6f5;
  border-radius: 8px;
  color: #9f1c17;
  margin-bottom: 12px;
  padding: 10px 12px;
}

#PrzyciskKupowania .PrzyciskIlosc {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

#PrzyciskKupowania .PoleIlosciKoszyka input {
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  height: 42px;
  margin: 0 6px;
  text-align: center;
  width: 58px;
}

#PrzyciskKupowania .DoKoszykaKartaProduktu,
#PrzyciskKupowania .DoKoszykaKartaProduktu:hover {
  background: var(--product-red) !important;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(207, 38, 31, 0.22);
  box-sizing: border-box;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.01em;
  min-width: 190px;
  padding: 13px 22px !important;
  text-transform: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

#PrzyciskKupowania .DoKoszykaKartaProduktu:hover {
  background: var(--product-red-dark) !important;
  transform: translateY(-1px);
}

#SzybkiZakup {
  background: transparent;
  border: 1px solid #cfd4dc;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--product-ink);
  display: block;
  margin-top: 10px;
  padding: 11px 18px;
  text-align: center;
}

#GlowneLinkiProduktu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

#GlowneLinkiProduktu a {
  background: #fff;
  border: 1px solid var(--product-line);
  border-radius: 999px;
  color: #394150;
  margin: 0;
  padding: 9px 15px;
  text-decoration: none;
}

#ZakladkiProduktu {
  margin-top: 26px;
}

#ZakladkiProduktu #TloZakladek {
  border-bottom: 1px solid var(--product-line);
}

#ZakladkiProduktu #Zakladki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

#ZakladkiProduktu #Zakladki li,
#ZakladkiProduktu #Zakladki li.aktywna,
#ZakladkiProduktu #Zakladki li:hover {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--product-muted);
  font-size: 15px;
  margin: 0;
  padding: 13px 17px;
}

#ZakladkiProduktu #Zakladki li.aktywna,
#ZakladkiProduktu #Zakladki li:hover {
  border-bottom-color: var(--product-red);
  color: var(--product-ink);
}

#ZakladkiProduktu #TresciZakladek {
  border: 0;
  color: #3d4654;
  font-size: 16px;
  line-height: 1.75;
  padding: 28px 6px 10px;
}

#ZakladkiProduktu .FormatEdytor h1,
#ZakladkiProduktu .FormatEdytor h2,
#ZakladkiProduktu .FormatEdytor h3 {
  color: var(--product-ink);
  line-height: 1.2;
}

#ZakladkiProduktu .FormatEdytor img {
  border-radius: 14px;
}

@media only screen and (max-width: 1023px) {
  #RamkaProduktu {
    border-radius: 18px;
    padding: 18px;
  }

  #KartaProduktu {
    grid-template-columns: 1fr;
  }

  #ZdjeciaProduktu #ZdjeciaDuze {
    min-height: 340px;
  }

  #ZdjeciaProduktu #ZdjeciaDuze img {
    height: 320px !important;
  }
}

@media only screen and (max-width: 599px) {
  #RamkaProduktu {
    border-radius: 14px;
    padding: 10px;
  }

  #ZdjeciaProduktu,
  #InformacjeProduktu {
    border-radius: 12px;
    padding: 15px !important;
  }

  #ZdjeciaProduktu #ZdjeciaDuze {
    min-height: 275px;
  }

  #ZdjeciaProduktu #ZdjeciaDuze img {
    height: 260px !important;
  }

  #InformacjeProduktu .ListaOpisy {
    grid-template-columns: 1fr;
  }

  #InformacjeProduktu .ListaOpisy .TbPoz + .TbPoz {
    border-left: 0;
    border-top: 1px solid var(--product-line);
  }

  #PrzyciskKupowania .PrzyciskIlosc {
    align-items: stretch;
    flex-direction: column;
  }

  #PrzyciskKupowania .DoKoszykaKartaProduktu {
    display: block;
    min-width: 0;
    width: 100%;
  }

  #CenaGlownaProduktuBrutto strong {
    font-size: 31px;
  }
}