/*
 * BiCroma kosik — vizual a poradi bloku.
 * Vychazi z promennych a prvku sablony Samba stejne jako bicroma-homepage_1.css.
 * Vsechno je scopovane na body.in-kosik, jinam to nezasahuje.
 */

/* ---------- Zjednodusene zahlavi ---------- */
/* V kroku nakupu nema menu, hledani ani prepinac meny vyssi prioritu nez
   dokonceni objednavky. Prepinani meny navic rozchazi cenu dopravy
   a hranici dopravy zdarma. Logo a prihlaseni zustavaji — vraceny zakaznik
   ma diky nemu predvyplnenou adresu. */
@media (min-width: 768px) {
  body.in-kosik.bicroma-cart-flow .header-bottom,
  body.in-kosik.bicroma-cart-flow #navigation,
  body.in-kosik.bicroma-cart-flow .navigation-buttons a.toggle-window:not(.top-nav-button-login) {
    display: none;
  }

  /* Levy sloupec nese odkaz zpet do obchodu. Prepinac meny se skryva —
     rozchazi cenu dopravy. Sloupec ma tretinovou sirku, takze zustava
     logo na stredu i kdyz se jeho puvodni obsah skryje. */
  body.in-kosik.bicroma-cart-flow .navigation-tools > *:not(.bicroma-cart-back) {
    display: none;
  }

  body.in-kosik.bicroma-cart-flow .header-top {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Na mobilu zustavalo hledani i hamburger, zato chybel ucet. Menu v kroku
   nakupu nepomaha; prihlaseni ano, protoze vracenemu zakaznikovi predvyplni
   adresu. Tlacitko je nativni, jen ho sablona na mobilu skryva. */
@media (max-width: 767px) {
  body.in-kosik.bicroma-cart-flow .navigation-buttons a.toggle-window {
    display: none;
  }

  body.in-kosik.bicroma-cart-flow .navigation-buttons .top-nav-button-login {
    display: flex;
  }
}

/* ---------- Kroky objednavky ---------- */
/* Cisla zustavaji, jen se sablonovy ramecek o vysce 64 px zmensi na
   kruh 22 px a kroky se propoji linkou. */
body.in-kosik .bicroma-cart-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--bc-border);
  list-style: none;
}

body.in-kosik .bicroma-cart-steps > .step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--bc-muted-soft);
  font-size: 14px;
  line-height: 20px;
}

/* Spojnice mezi kroky. */
body.in-kosik .bicroma-cart-steps > .step + .step::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bc-border);
}

body.in-kosik .bicroma-cart-steps > .step > a,
body.in-kosik .bicroma-cart-steps > .step > strong {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Cislo kroku: sablona ho kresli jako ramecek 64 px. */
body.in-kosik .bicroma-cart-steps > .step > a::before,
body.in-kosik .bicroma-cart-steps > .step > strong::before {
  display: flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid var(--bc-border);
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

body.in-kosik .bicroma-cart-steps > .step.active {
  color: var(--bc-text);
  font-weight: 700;
}

body.in-kosik .bicroma-cart-steps > .step.active > strong::before,
body.in-kosik .bicroma-cart-steps > .step.active > a::before {
  border-color: var(--bc-accent);
  background: var(--bc-accent);
  color: var(--bc-surface);
}

body.in-kosik .bicroma-cart-steps > .step span {
  padding: 0;
  font-size: inherit;
}

/* ---------- Darek ---------- */
/* Duplicitni box od Ellity; nativni „Darky a slevy" ho uvadi taky
   a jeste u nej ukazuje postup k doprave zdarma. */
body.in-kosik .cart-content > .up-cart-gifts-container {
  display: none;
}

body.in-kosik .bicroma-cart-extras {
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--bc-surface-soft);
}

body.in-kosik .bicroma-cart-extras > .h4 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.02em;
}

/* Nativni radek darku ma jen obrazek a nazev, takze vypadal jako dalsi
   polozka kosiku. Stitek rika, ze se za nej neplati. */
body.in-kosik .bicroma-cart-extras .free-gift-label::before {
  content: "Dárek zdarma";
  display: block;
  margin-bottom: 2px;
  color: var(--bc-accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.in-kosik .bicroma-cart-extras .free-gifts-img img {
  width: 48px;
  height: 48px;
}

/* ---------- Nadpisy ---------- */
/* Zlate nadpisy na mekkem zlatem podkladu maly slaby kontrast. */
body.in-kosik .summary-wrapper .h4,
body.in-kosik .checkout-box-wrapper .h4,
body.in-kosik .cart-summary .h4,
body.in-kosik .bicroma-cart-extras > .h4 {
  color: var(--bc-heading);
}

/* ---------- Ukazatel dopravy zdarma ---------- */
/* Nad zbozim: cil objednavky je videt driv, nez zakaznik zacne resit obsah,
   takze se muze rovnou otocit a neco pridat. */
body.in-kosik .bicroma-cart-shipping {
  width: 100%;
  margin: 0 0 8px;
  padding: 14px 16px;
  background: var(--bc-surface-soft);
}

/* ---------- Zpet do obchodu ---------- */
/* Pri prekresleni kosiku Shoptet vyrobi novy odkaz zpet v souhrnu, zatimco
   ten nas uz sedi v zahlavi — byl by tam dvakrat. Skryva se az podle
   priznaku, takze kdyby nas skript nedobehl, zustane nativni odkaz videt. */
body.in-kosik.bicroma-cart-flow .next-step .next-step-back {
  display: none;
}

/* Presunuty do leveho sloupce zahlavi na misto ikon. */
body.in-kosik.bicroma-cart-flow #header .bicroma-cart-back {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 0;
  margin-right: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bc-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  text-decoration: none;
  white-space: nowrap;
}

body.in-kosik .bicroma-cart-back::before {
  content: "‹";
  font-size: 17px;
  line-height: 1;
}

body.in-kosik .bicroma-cart-back:hover,
body.in-kosik .bicroma-cart-back:focus-visible {
  color: var(--bc-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Kontakt v pravem sloupci ---------- */
/* Fotografie poradkyne je i tady; drzi stejny kruhovy tvar jako
   u nakupniho bloku na produktove strance. */
body.in-kosik .checkout-box-wrapper .contact-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

body.in-kosik .checkout-box-wrapper .contact-box > img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

body.in-kosik .checkout-box-wrapper .contact-box > strong {
  flex: 1 1 auto;
  color: var(--bc-heading);
  font-family: var(--bc-font-heading), sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.in-kosik .checkout-box-wrapper .contact-box > ul {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sablonove ikonky u kontaktu jsou tezke a rozbijeji lehkou sazbu zbytku
   stranky. Radek nese uz jen text, stejne jako kontakt v paticce. */
body.in-kosik .checkout-box-wrapper .contact-box [class*="icon-"] {
  display: none;
}

body.in-kosik .checkout-box-wrapper .contact-box li {
  padding-left: 0;
}

/* Bez ikon uz nejde „BiCroma.cz" a „bicroma.cz" rozeznat a v kroku nakupu
   vedou navic pryc z objednavky. V paticce zustavaji obe site dostupne. */
body.in-kosik .checkout-box-wrapper .contact-box .facebook,
body.in-kosik .checkout-box-wrapper .contact-box .instagram {
  display: none;
}

/* Provozni doba je doplnujici udaj k telefonu, ne dalsi kontakt —
   proto tlumene a o neco mensi nez odkazy nad ni. */
body.in-kosik .checkout-box-wrapper .contact-box .bicroma-cart-hours {
  margin-top: -2px;
  color: var(--bc-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Stejne chovani jako kontakt v paticce — cerny text, zlaty hover. */
body.in-kosik .checkout-box-wrapper .contact-box a {
  color: var(--bc-text);
  font-weight: 500;
  text-decoration: none;
}

body.in-kosik .checkout-box-wrapper .contact-box a:hover,
body.in-kosik .checkout-box-wrapper .contact-box a:focus-visible {
  color: var(--bc-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Bonusovy program ---------- */
/* Hnedy pruh na plnou sirku pusobil jako hlavni sdeleni stranky,
   pritom je to doplnkova informace k cene. */
body.in-kosik .mehub-bonus-cart-container {
  margin: 0 0 24px;
}

/* Ze samostatne sekce s nadpisem a barevnym pruhem jedna veta. Prvky se
   sazi inline, aby se na uzkem displeji lamaly jako text a nedelaly ze
   tri radku tri samostatne bloky. */
body.in-kosik .mehub-bonus-cart-container > div {
  display: block;
}

/* Nadpis nese stejny tvar jako stitek u darku — kratky zlaty popisek nad
   vetou. Bez nej splyval s vetou v jeden dlouhy beh textu.
   Sablona prebiji zobrazeni i velikost z uzsich selektoru, proto ID. */
body.in-kosik #content .mehub-bonus-cart-container h4 {
  display: block;
  margin: 0 0 2px;
  color: var(--bc-accent-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.in-kosik .mehub-bonus-cart-container .card {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Sablona widgetu ma na obou castech kartovy padding i bilou barvu z modre
   varianty karty — na svetlem pozadi byl druhy kus vety neviditelny. */
body.in-kosik .mehub-bonus-cart-container .card-title,
body.in-kosik .mehub-bonus-cart-container .card-text {
  display: inline;
  margin: 0;
  padding: 0;
  color: var(--bc-muted);
  font-size: 13px;
  line-height: 19px;
}

/* Widget mezi vetou a poctem bodu nema zadnou mezeru, v inline sazbe by
   tak text zustal slepeny. Sirka odpovida mezere mezi slovy. */
body.in-kosik .mehub-bonus-cart-container .card-title {
  margin-right: 0.28em;
}

/* Sablona zvetsuje cislo na 1,3 em, cimz vyskakovalo z radku vety.
   Prebit to jde jen selektorem s ID sablony. */
body.in-kosik #content .mehub-bonus-cart-container .card-text b {
  color: var(--bc-accent-dark);
  font-size: inherit;
  font-weight: 700;
}

/* ---------- Doplnkova nabidka ---------- */
/* Karusel se neorezaval a rozsiroval dokument o 15 px. */
body.in-kosik .up-cart-offers-slot,
body.in-kosik .up-cart-offers-slot .swiper,
body.in-kosik .up-cart-offers-slot .swiper-wrapper,
body.in-kosik .cart-content [class*="swiper"] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.in-kosik .up-cart-offers-slot {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--bc-border);
}

body.in-kosik .up-cart-offers-slot .up-cart-offers-header,
body.in-kosik .up-cart-offers-slot h2,
body.in-kosik .up-cart-offers-slot h4 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.02em;
}

/* ---------- Souhrn objednavky ---------- */
/* Pravy sloupec byl kratsi nez obsah, takze Pokracovat odjelo pri scrollu
   pryc. Drzi se u okraje, dokud sloupec staci. */
/* Poradi bloku plati na vsech sirkach: zbozi a rozhodovaci informace napred,
   bonus a doplnkova nabidka az za nimi. */
/* .checkout-box-wrapper (kontakt v pravem sloupci) nese tridu .cart-content
   take — flexove poradi patri jen vlastnimu vypisu kosiku. */
body.in-kosik .cart-content:not(.checkout-box-wrapper) {
  display: flex;
  flex-direction: column;
}

body.in-kosik .bicroma-cart-steps { order: 1; }
body.in-kosik .bicroma-cart-shipping { order: 2; }
body.in-kosik .bicroma-cart-table { order: 3; }
body.in-kosik .cart-content:not(.checkout-box-wrapper) > .delivery-time { order: 5; }
body.in-kosik .bicroma-cart-extras { order: 6; }
body.in-kosik .cart-content > .mehub-bonus-cart-container { order: 8; }
body.in-kosik .cart-content > .up-cart-offers-slot { order: 9; }

/* Hlavni akce kroku na plnou sirku sloupce. Uzke tlacitko u praveho okraje
   se hledalo ocima; takto je to zjevne pokracovani rekapitulace. */
body.in-kosik .summary-wrapper .next-step-forward {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  body.in-kosik .sidebar-in-cart {
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }

  body.in-kosik .cart-row {
    display: flex;
    align-items: flex-start;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* Tri kroky s popisky se na 390 px lamou do tri radku. */
  body.in-kosik .bicroma-cart-steps {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }

  body.in-kosik .bicroma-cart-steps > .step {
    min-width: 0;
    gap: 7px;
    font-size: 12px;
    line-height: 17px;
  }

  body.in-kosik .bicroma-cart-steps > .step > a,
  body.in-kosik .bicroma-cart-steps > .step > strong {
    min-width: 0;
    gap: 7px;
  }

  body.in-kosik .bicroma-cart-steps > .step span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.in-kosik .bicroma-cart-steps > .step + .step::before {
    width: 12px;
    flex: 0 0 12px;
  }

  body.in-kosik .bicroma-cart-steps > .step > a::before,
  body.in-kosik .bicroma-cart-steps > .step > strong::before {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 11px;
  }

  body.in-kosik .bicroma-cart-extras {
    padding: 16px;
  }

  /* Kroky, bonus a doplnkova nabidka nemely vodorovne odsazeni a lepily se
     na okraj obrazovky, zatimco ostatni bloky maji 16 px. */
  body.in-kosik .bicroma-cart-steps,
  body.in-kosik .mehub-bonus-cart-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.in-kosik .up-cart-offers-slot {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Radek s doruceni patri k polozkam, ne aby visel samostatne. */
  body.in-kosik .cart-content > .delivery-time {
    margin-top: 0;
    margin-bottom: 20px;
  }
}