/* ⚠️  GENEROVANÝ SOUBOR — NEEDITUJ RUČNĚ.
   Kopie ze zdroje v Kouskysveta/design-system/css/. Změny dělej tam a spusť:
   node scripts/build.mjs  (přepíše tuto kopii). */

/* ═══════════════════════════════════════════════════════════════════
   NÁKUPNÍ BLOK — karty množství a doplňky na stránce produktu
   (modul pluginu BuyBox). Načítá se jen na produktu, který má v editoru
   zapnutý „Nový nákupní blok"; body má pak třídu .ks-bb-on.
   Build kopíruje do pluginu: includes/assets/design-system/buy-box.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Co nový blok nahrazuje: velká cena (je v kartách), pole s počtem
       (přepíná ho karta) a řádek „2 kits for €52" ze starého mu-pluginu ─── */
.ks-bb-on .elementor-widget-woocommerce-product-price,
.ks-bb-on .summary > p.price,
.ks-bb-on .ks-pair-offer,
.ks-bb-on form.cart .quantity { display: none; }

/* Šablona .com (widget Add To Cart v Elementoru) drží formulář jako řádek bez
   zalamování; bez !important by doplňky a tlačítko stály vedle sebe. */
.ks-bb-on form.cart { flex-wrap: wrap !important; }
.ks-bb-on form.cart .single_add_to_cart_button { flex: 1 1 100% !important; width: 100% !important; }

/* Doplněk by v Apple Pay / Google Pay na stránce chyběl → při zaškrtnutém
   doplňku rychlé platby schovat, zákazník jde přes košík. */
.ks-bb-has-addons #wc-stripe-express-checkout-element,
.ks-bb-has-addons #wc-stripe-payment-request-wrapper { display: none !important; }

/* ─── Společné ─── */
.ks-bb,
.ks-bb-addons { margin: 0 0 var(--s-sm); }
.ks-bb-addons { flex: 0 0 100% !important; width: 100%; }

.ks-bb__title {
  margin: 0 0 var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tx);
}
.ks-bb__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-bb__sub { font-size: 13px; line-height: 1.35; color: var(--color-tx-2); }
.ks-bb__sub .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

/* ─── Karty množství ─── */
.ks-bb__opts { display: flex; flex-direction: column; gap: 12px; }
.ks-bb__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  min-height: var(--min-touch);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ks-bb__opt:hover { border-color: var(--color-line-2); }
.ks-bb__opt.is-on {
  border: 2px solid var(--color-tx);
  padding: 11px 13px;
  background: var(--color-bg);
  background: color-mix(in srgb, var(--color-primary-light) 30%, var(--color-bg));
}
/* Rámeček fokusu jen při ovládání klávesnicí, ne po kliknutí myší. */
.ks-bb__opt:has(.ks-bb__radio:focus-visible),
.ks-bb-addon:has(.ks-bb-addon__input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.ks-bb__radio,
.ks-bb-addon__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ks-bb__dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-line-2);
  border-radius: 50%;
  box-sizing: border-box;
}
.ks-bb__opt.is-on .ks-bb__dot { border: 5px solid var(--color-tx); }

.ks-bb__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-tx);
}
.ks-bb__save {
  padding: 2px 8px;
  border-radius: var(--radius-xl);
  background: var(--color-secondary-light);
  color: var(--color-secondary-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ks-bb__save .woocommerce-Price-amount { color: inherit; }

.ks-bb__price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.ks-bb__price b {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-tx);
}
.ks-bb__price s { font-size: 13px; color: var(--color-tx-3); }
.ks-bb__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

.ks-bb__badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 9px;
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-bb__note { margin: var(--s-xs) 2px 0; font-size: 13px; line-height: 1.4; color: var(--color-tx-2); }
.ks-bb__note[hidden] { display: none; }

/* ─── Doplňky ─── */
.ks-bb-addon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  cursor: pointer;
}
.ks-bb-addon:last-child { margin-bottom: 0; }
.ks-bb-addon.is-on {
  border: 2px solid var(--color-tx);
  padding: 9px 11px;
  background: var(--color-bg);
  background: color-mix(in srgb, var(--color-primary-light) 30%, var(--color-bg));
}
.ks-bb-addon__img {
  flex: 0 0 56px;
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-grey-light);
}
.ks-bb-addon__name { font-size: var(--t-sm); font-weight: 600; color: var(--color-tx); }
.ks-bb-addon__price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-tx);
}
.ks-bb-addon__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.ks-bb-addon__box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-line-2);
  border-radius: 5px;
  box-sizing: border-box;
}
.ks-bb-addon.is-on .ks-bb-addon__box {
  border-color: var(--color-tx);
  background: var(--color-tx) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ─── Zamknutá galerie (desktop) ───
   Sloupec s fotkou stojí na místě, dokud se neproroluje sloupec s nákupem.
   Sloupec najde buy-box.js (společný řádek galerie a nákupního bloku) a dá mu
   .ks-bb-sticky; --ks-bb-sticky-top dopočítá: 100px = lišta webu po
   odrolování (84px) + mezera, u sloupce vyššího než okno méně, ale fotka
   pod lištu nikdy nezajede (radši se ořízne spodek náhledů).
   !important: Elementor dává sloupci position: relative selektorem
   .elementor .e-<id>, který je silnější. */
@media (min-width: 1025px) {
  .ks-bb-sticky {
    position: sticky !important;
    top: var(--ks-bb-sticky-top, 100px) !important;
    align-self: flex-start !important;
  }
}