/* idepar-kosik-4.css — košík idepar.cz
   Skládáno z tokenů hlavičky (idepar-header-11): --ip-o, --ip-ink, --ip-muted, --ip-line, --ip-soft.
   Nic z nativního Shoptetu se nemaže, jen se překrývá. */

body.in-kosik {
  --ipk-gap: 22px;
  --ipk-r: 16px;        /* globální zaoblení, žádné pilulky */
}

/* ---------- 0. zarovnání s hlavičkou ----------
   Nativně je .cart-inner přes celou šířku okna (na 1440 od 0 do 1440), zatímco logo
   hlavičky začíná na 103 px. Obsah košíku se tím lepil ke kraji a vlezl pod fixed
   ouško „Hodnocení obchodu“. Dáváme mu stejnou šířku, jakou má hlavička. */

body.in-kosik .cart-inner {
  max-width: var(--max, 1440px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ---------- 0b. pořadí bloků v levém sloupci ----------
   Doplněk fvStudio („Poděkování pro skladníky“) se načítá asynchronně a vloží se
   hned pod tabulku, tedy nad cross-sell. Almužna za 10 Kč tak předbíhá nabídku
   za 549 Kč. Řadíme flexem, ne přesunem v DOM — cizí doplněk si svůj blok
   překresluje sám a přesunutý uzel by poskakoval. */

body.in-kosik .cart-content {
  display: flex;
  flex-direction: column;
}

body.in-kosik .cart-content > .cart-header { order: 1; }
body.in-kosik .cart-content > .cart-table { order: 2; }
body.in-kosik .cart-content > .ipk-doprava { order: 3; }
body.in-kosik .cart-content > .ipk-krizak { order: 4; }
body.in-kosik .cart-content > .fvDoplnek-upsell { order: 5; }
body.in-kosik .cart-content > .cart-summary { order: 6; }
body.in-kosik .cart-content > .extras-col,
body.in-kosik .cart-content > .delivery-time { order: 7; }

/* ---------- 1. sloupce a sticky souhrn ---------- */

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

body.in-kosik .sidebar-in-cart {
  position: sticky;
  top: 24px;
}

/* souhrn nahoru, pomoc hned pod něj — nativně je mezi nimi prázdno */
body.in-kosik .sidebar-in-cart .summary-wrapper { order: 1; margin-bottom: 14px; }
body.in-kosik .sidebar-in-cart .checkout-box-wrapper { order: 3; margin-top: 0; }
body.in-kosik .sidebar-in-cart {
  display: flex;
  flex-direction: column;
}

/* ---------- 2. karta souhrnu ---------- */

body.in-kosik .summary-wrapper .box {
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
  background: #fff;
  padding: 20px 22px;
}

body.in-kosik .summary-wrapper .price-wrapper { margin-bottom: 4px; }

body.in-kosik .next-step--cart .btn {
  width: 100%;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .02em;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ---------- 3. jistoty pod tlačítkem ---------- */

.ipk-jistoty {
  order: 2;
  list-style: none;
  margin: 0 0 14px;
  padding: 16px 22px;
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
  background: var(--soft, #FAF8F5);
  display: grid;
  gap: 10px;
}

.ipk-jistoty li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink, #1B1A16);
}

.ipk-jistoty svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--acc, #B0603A); }
.ipk-jistoty b { font-weight: 700; }

/* ---------- 4. doprava zdarma: proužek místo věty ---------- */

.ipk-doprava {
  margin: 0 0 var(--ipk-gap);
  padding: 16px 20px;
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
  background: #fff;
}

.ipk-doprava__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink, #1B1A16);
  margin-bottom: 10px;
}

.ipk-doprava__text svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--mut, #6E6A63); }
.ipk-doprava__text b { font-weight: 700; }
.ipk-doprava--hotovo .ipk-doprava__text svg { color: #669c35; }

.ipk-doprava__bar {
  height: 8px;
  border-radius: 99px;
  background: var(--line, #E6E3DC);
  overflow: hidden;
}

.ipk-doprava__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--acc, #B0603A);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.ipk-doprava--hotovo .ipk-doprava__fill { background: #669c35; }

/* ---------- 5. cross-sell pás ---------- */

/* nativní rozbalovačku schovat, obsah si bereme do vlastního bloku */
body.in-kosik a.show-related { display: none !important; }
body.in-kosik tr.related { display: none !important; }

.ipk-krizak { margin: var(--ipk-gap) 0; }

.ipk-krizak__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ipk-krizak__nadpis {
  font-family: "Exo 2", var(--template-headings-font), sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #1B1A16);
  margin: 0;
}

.ipk-krizak__podnadpis {
  font-size: 13.5px;
  color: var(--mut, #6E6A63);
}

.ipk-krizak__pas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ipk-karta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ipk-karta:hover {
  border-color: var(--acc, #B0603A);
  box-shadow: 0 6px 20px rgba(20, 20, 20, .08);
  transform: translateY(-2px);
}

.ipk-karta__foto {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--soft, #FAF8F5);
  overflow: hidden;
}

.ipk-karta__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.ipk-karta__telo {
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ipk-karta__nazev {
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink, #1B1A16);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.ipk-karta__nazev:hover { color: #96502F; }

.ipk-karta__cena {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #1B1A16);
  margin-top: auto;
}

.ipk-karta__btn {
  appearance: none;
  border: 1px solid var(--ink, #1B1A16);
  background: #fff;
  color: var(--ink, #1B1A16);
  border-radius: 7px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ipk-karta__btn:hover {
  background: var(--ink, #1B1A16);
  color: #fff;
}

.ipk-karta__btn[data-stav="pridano"] {
  background: #669c35;
  border-color: #669c35;
  color: #fff;
  cursor: default;
}

/* ---------- 6. poděkování skladníkům ----------
   Doplněk fvStudio. Nativně: prázdný <h4> s výškou 60 px, fotka s inline výškou 60 px
   a tři holé checkboxy pod sebou. Necháváme jeho DOM i onclick, měníme jen vzhled. */

/* prázdný <h4> má nativně padding-top 60px + margin-bottom 20px = 80 px díry nad obsahem;
   doplněk to má s !important, takže musíme taky */
body.in-kosik .fvDoplnek-upsell > h4 { display: none !important; }
body.in-kosik .fvDoplnek-produkt { margin-bottom: 0 !important; }

body.in-kosik .fvDoplnek-upsell {
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
  padding: 16px 20px;
  margin: var(--ipk-gap) 0;
  background: var(--soft, #FAF8F5);
}

body.in-kosik .fvDoplnek-alignCenter { align-items: center; gap: 16px; width: 100%; }
body.in-kosik .fvDoplnek-produkt { width: 100%; }

body.in-kosik .fvDoplnek-product-image {
  height: 44px !important;
  width: 44px;
  object-fit: contain;
  margin-right: 0 !important;
  mix-blend-mode: multiply;
}

body.in-kosik .fvDoplnek-upsell .fvcontent { flex: 1; }

body.in-kosik .fvDoplnek-upsell .header { margin-bottom: 8px; }

body.in-kosik .fvDoplnek-upsell .header .name {
  font-family: "Exo 2", var(--template-headings-font), sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, #1B1A16);
}

body.in-kosik .fvDoplnek-description { display: none; }

body.in-kosik .fvDoplnek-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* celá pilulka je klikací plocha nativního checkboxu */
body.in-kosik form.fvDoplnek-variant {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line, #E6E3DC);
  border-radius: 16px;
  background: #fff;
  transition: border-color .18s ease, background .18s ease;
}

body.in-kosik form.fvDoplnek-variant:hover { border-color: var(--acc, #B0603A); }

body.in-kosik .fvDoplnek-variant-checkbox {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

body.in-kosik form.fvDoplnek-variant .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1B1A16);
}

body.in-kosik form.fvDoplnek-variant .price { display: none; }

body.in-kosik form.fvDoplnek-variant:has(.fvDoplnek-variant-checkbox:checked) {
  border-color: var(--acc, #B0603A);
  background: rgba(255, 170, 0, .12);
}

/* ---------- 7. kupón ---------- */

body.in-kosik .cart-summary {
  margin: var(--ipk-gap) 0 0;
  padding: 16px 20px;
  border: 1px solid var(--line, #E6E3DC);
  border-radius: var(--ipk-r);
}

body.in-kosik .cart-summary > h2.h4 {
  font-size: 15px;
  margin: 0 0 10px;
  letter-spacing: 0;
  text-transform: none;
}

body.in-kosik .cart-summary .extras-wrapper { margin: 0; width: 100%; }
body.in-kosik .cart-summary .discount-coupon .form-control { max-width: 260px; }

/* ---------- 8. tabulka položek ---------- */

body.in-kosik .cart-table { margin-bottom: var(--ipk-gap); }
body.in-kosik .cart-table tr.removeable > td { border-color: var(--line, #E6E3DC); }

/* ---------- 9. mobil ---------- */

@media (max-width: 767px) {
  .ipk-krizak__pas {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .ipk-krizak__pas::-webkit-scrollbar { display: none; }

  /* 2,2 karty na obrazovku — třetí vykukuje a říká „posuň mě" */
  .ipk-karta {
    flex: 0 0 calc((100% - 12px) / 2.2);
    scroll-snap-align: start;
  }

  body.in-kosik .sidebar-in-cart { position: static; }
  .ipk-krizak__hlava { flex-direction: column; gap: 2px; }

  /* pilulky dýška: doplněk je na mobilu staví pod sebe přes celou šířku.
     Fotka mincí je jen dekorace, na 390 px si šířku zaslouží pilulky. */
  body.in-kosik .fvDoplnek-product-image { display: none !important; }
  body.in-kosik .fvDoplnek-upsell { padding: 14px 16px; }
  body.in-kosik .fvDoplnek-variants { flex-wrap: wrap; }
  body.in-kosik form.fvDoplnek-variant {
    flex: 0 0 auto;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0;
    padding: 7px 10px;
  }

  /* kupón: nativní max-width uřízne placeholder a vystrčí tlačítko z rámu */
  body.in-kosik .cart-summary .discount-coupon .form-control { max-width: none; font-size: 13px; }
  body.in-kosik .cart-summary .input-group { display: flex; width: 100%; }
  body.in-kosik .cart-summary .input-group .btn { flex: 0 0 auto; }
}