/*
 * BiCroma produktova stranka — vizual nakupniho bloku.
 * Vychazi z promennych a prvku sablony Samba stejne jako bicroma-homepage_1.css.
 * Zadny novy vizualni jazyk: USP si nechavaji svuj globalni styl, meni se
 * jen jejich misto a hustota, plus odsazeni nad nakupnim tlacitkem.
 */

/* ---------- Jistoty u nakupniho tlacitka ---------- */
/* Blok je Shoptet .full-width (position:relative + left:50% + margin-left:-50vw);
   v novem kontextu prezije jen left:50%, proto se posun cileně rusi. */
body.type-detail .bicroma-product-usp {
  position: static;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin: 16px 0 0;
  background: var(--bc-surface-soft);
}

body.type-detail .bicroma-product-usp > .container-full-width {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

body.type-detail .bicroma-product-usp .benefitBanner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 14px 16px;
}

body.type-detail .bicroma-product-usp .benefitBanner__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
}

body.type-detail .bicroma-product-usp .benefitBanner__picture,
body.type-detail .bicroma-product-usp .benefitBanner__img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin: 0;
}

body.type-detail .bicroma-product-usp .benefitBanner__content {
  min-width: 0;
  flex: 1 1 auto;
}

body.type-detail .bicroma-product-usp .benefitBanner__title {
  margin: 0;
  font-size: 13px;
  line-height: 17px;
  text-align: left;
}

/* U tlacitka staci samotna jistota; rozvedeny popis je tu balast. */
body.type-detail .bicroma-product-usp .benefitBanner__data {
  display: none;
}

/* ---------- Poradenstvi pod jistotami ---------- */
/* Sdili plochu s USP, oddelene vlasovou linkou — cte se to jako jeden blok
   ujisteni, ne jako dalsi samostatny box. */
body.type-detail .bicroma-product-help {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 16px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--bc-border);
}

body.type-detail .bicroma-product-help__photo {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bc-surface-soft-strong);
}

body.type-detail .bicroma-product-help__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Docasny zastupny kruh, nez bude nahrana skutecna fotografie. */
body.type-detail .bicroma-product-help__photo--placeholder {
  position: relative;
}

body.type-detail .bicroma-product-help__photo--placeholder::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bc-accent);
  border-radius: 50%;
  transform: translate(-50%, -62%);
  box-shadow: 0 14px 0 -3px var(--bc-accent);
}

body.type-detail .bicroma-product-help__text {
  display: flex;
  min-width: 0;
  flex: 1 1 150px;
  flex-direction: column;
}

body.type-detail .bicroma-product-help__title {
  color: var(--bc-heading);
  font-family: var(--bc-font-heading), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.02em;
}

body.type-detail .bicroma-product-help__note {
  color: var(--bc-muted);
  font-size: 13px;
  line-height: 18px;
}

body.type-detail .bicroma-product-help__contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
}

body.type-detail .bicroma-product-help__phone-block {
  display: flex;
  flex-direction: column;
}

body.type-detail .bicroma-product-help__phone {
  color: var(--bc-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

body.type-detail .bicroma-product-help__hours {
  color: var(--bc-muted);
  font-size: 12.5px;
  line-height: 17px;
  white-space: nowrap;
}

body.type-detail .bicroma-product-help__mail {
  color: var(--bc-accent-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

body.type-detail .bicroma-product-help__phone:hover,
body.type-detail .bicroma-product-help__mail:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Nakupni blok ---------- */
body.type-detail .bicroma-product-lead {
  margin-bottom: 18px;
  color: var(--bc-muted);
  font-size: 15px;
  line-height: 23px;
}

body.type-detail .bicroma-product-price {
  margin-bottom: 14px;
}

body.type-detail .bicroma-product-params {
  margin-bottom: 14px;
}

/* ---------- Body za nakup ---------- */
body.type-detail .bicroma-product-bonus {
  margin: -4px 0 14px;
}

body.type-detail .bicroma-product-bonus .card,
body.type-detail .bicroma-product-bonus .card-text {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.type-detail .bicroma-product-bonus .card-text > span {
  color: var(--bc-muted);
  font-size: 13px;
  line-height: 19px;
}

/* Odkaz na dodavatele widgetu nepatri do nakupniho rozhodnuti. */
body.type-detail .bicroma-product-bonus .ellity-link {
  display: none;
}

/* Tisk, Zeptat se a Sdileni jsou vedlejsi cesty, ktere u nakupniho
   rozhodnuti jen odvadeji pozornost. */
body.type-detail .bicroma-product-social {
  display: none;
}

/* ---------- Doplnkovy prodej ---------- */
/* Widget kreslil vlastni stin a svetle sedy ramecek, coz na webu bez stinu
   pusobilo cize. Sjednoceno s mekkou plochou pouzitou jinde na webu. */
body.type-detail .bicroma-product-upsell {
  margin: 24px 0 0;
}

body.type-detail .bicroma-product-upsell .up-container {
  padding: 20px 20px 8px;
  border: 0;
  border-radius: 0;
  background: var(--bc-surface-soft);
  box-shadow: none;
}

body.type-detail .bicroma-product-upsell .up-products-header {
  margin: 0 0 4px;
  color: var(--bc-heading);
  font-family: var(--bc-font-heading), sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.02em;
  text-align: left;
}

body.type-detail .bicroma-product-upsell .up-product {
  padding: 12px 0;
}

/* ---------- Darek k objednavce ---------- */
/* Kompaktni radek u ceny misto karty s velkym obrazkem — nahore uz je
   prvku dost a darek je jen dalsi polozka hodnoty, ne samostatna sekce. */
/* Sablona darku nastavuje margin z uzsiho selektoru (12px 0 0), takze se
   blok lepil na udaj o dostupnosti pod nim — proto ID sablony. */
body.type-detail #content .bicroma-product-gift {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 0;
  background: transparent;
}

body.type-detail .bicroma-product-gift .p-gifts-heading {
  margin: 0;
  color: var(--bc-muted);
  font-family: var(--bc-font-body), sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0;
  white-space: nowrap;
}

body.type-detail .bicroma-product-gift .p-gift {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body.type-detail .bicroma-product-gift .p-gift-image {
  flex: 0 0 36px;
  width: 36px;
  margin: 0;
}

body.type-detail .bicroma-product-gift .p-gift-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Odkaz na darek je zanoreny v .p-gift-name, ne primo v .p-gift — driv sem
   mirilo pravidlo na primeho potomka, ktere nikdy nesedlo, a nazev se sazel
   sablonovymi 16 px ve zlate, takze se lamal na dva radky. */
body.type-detail .bicroma-product-gift .p-gift-name,
body.type-detail .bicroma-product-gift .p-gift-name a {
  color: var(--bc-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  text-decoration: none;
}

/* Zlata zustava jen na hover, stejne jako u kontaktu v paticce a v kosiku. */
body.type-detail .bicroma-product-gift .p-gift-name a:hover,
body.type-detail .bicroma-product-gift .p-gift-name a:focus-visible {
  color: var(--bc-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Nadpisy sekci pod nakupnim blokem ---------- */
/* „Podobne produkty" mely 32 px, tedy vic nez H1 stranky (30 px). */
body.type-detail .products-alternative-header,
body.type-detail .products-related-header {
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.02em;
}

/* Nadpis uvnitr popisu je v obsahu jako H1 a vykresloval se 48 px, tedy
   vetsi nez nazev produktu. Vizualne se sroni na uroven H2; spravna oprava
   je zmenit znacku primo v obsahu. */
body.type-detail #description h1 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0.02em;
}

/* ---------- Plovouci nakupni lista na telefonu ---------- */
body.type-detail .bicroma-product-bar {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bc-border);
  background: var(--bc-surface);
  box-shadow: 0 -2px 12px rgba(31, 31, 31, 0.08);
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
}

body.type-detail .bicroma-product-bar--visible {
  transform: translateY(0);
}

body.type-detail .bicroma-product-bar__info {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

body.type-detail .bicroma-product-bar__name {
  overflow: hidden;
  color: var(--bc-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.type-detail .bicroma-product-bar__price {
  color: var(--bc-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

body.type-detail .bicroma-product-bar__button {
  flex: 0 0 auto;
  padding: 12px 22px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  body.type-detail .bicroma-product-bar {
    display: flex;
  }
}

/* ---------- Sticky galerie na desktopu ---------- */
/* .p-detail-inner je flex a oba sloupce se natahovaly na plnou vysku, takze
   pod galerii zustaval prazdny sloupec. align-self ji srazi na vlastni vysku
   a sticky ji drzi u nakupniho bloku pri scrollovani. */
@media (min-width: 992px) {
  body.type-detail .p-detail-inner > .p-image-wrapper {
    align-self: flex-start;
    position: sticky;
    top: 24px;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* Nakupni tlacitko bylo na 865 px, tedy tesne pod ohybem 844 px.
     Odsazeni nad nim se stahuje, aby se veslo do prvni obrazovky. */
  body.type-detail .bicroma-product-title-mobile {
    margin-bottom: 6px;
  }

  body.type-detail .bicroma-product-title-mobile .h1,
  body.type-detail .bicroma-product-title-mobile h1 {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.01em;
  }

  /* Pas miniatur mel 16 px nad i pod ramec sve vysky. */
  body.type-detail .p-image-wrapper .p-thumbnails-wrapper {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  body.type-detail .bicroma-product-lead {
    margin: 2px 0 4px;
    font-size: 14px;
    line-height: 21px;
  }

  body.type-detail .bicroma-product-price {
    margin-bottom: 10px;
  }

  body.type-detail .bicroma-product-params {
    margin-bottom: 8px;
  }

  body.type-detail .p-detail-inner .p-data-wrapper {
    padding-top: 4px;
  }

  body.type-detail .bicroma-product-usp .benefitBanner {
    gap: 8px 10px;
    padding: 12px 14px;
  }

  body.type-detail .bicroma-product-help {
    margin: 0 14px;
    padding: 12px 0 14px;
    gap: 6px 12px;
  }

  body.type-detail .bicroma-product-help__phone {
    font-size: 17px;
  }

  body.type-detail .bicroma-product-gift {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  /* Kod produktu neni informace k nakupnimu rozhodnuti a na telefonu
     odsouval tlacitko pod ohyb; zustava v parametrech v popisu. */
  body.type-detail .bicroma-product-params .detail-parameter-code,
  body.type-detail .bicroma-product-params .detail-parameter:last-child {
    display: none;
  }

  body.type-detail .pr-action > .bicroma-product-price { order: 1; }
  body.type-detail .pr-action > .bicroma-product-bonus { order: 2; }
  body.type-detail .pr-action > .bicroma-product-params { order: 3; }
  body.type-detail .pr-action > .p-to-cart-block { order: 4; }
  body.type-detail .pr-action > .bicroma-product-gift { order: 5; margin: 12px 0 0; }
  body.type-detail .pr-action > .bicroma-product-usp { order: 6; }
  body.type-detail .pr-action > .bicroma-product-upsell { order: 7; }

}