/* ============================================================
   misuge-product.css — CirkusovéPotřeby.cz
   Úpravy produktové stránky (celý eshop)
   ============================================================ */


/* ── 1. NADPISY BARVA / VELIKOST ─────────────────────────── */

span.variant-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #bbb !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 10px !important;
  margin-top: 4px !important;
}
span.variant-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #efefef !important;
  display: block !important;
}
.variant-list {
  padding-bottom: 14px !important;
}


/* ── 2. BAREVNÉ TEČKY ────────────────────────────────────── */

#parameter-id-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
}
#parameter-id-4 label.advanced-parameter {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#parameter-id-4 .advanced-parameter-inner {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 2.5px solid transparent !important;
  transition: border .2s !important;
  display: block !important;
  position: relative !important;
  cursor: pointer !important;
}
#parameter-id-4 label.advanced-parameter:has(input:checked) .advanced-parameter-inner {
  border-color: #0088bf !important;
  box-shadow: 0 0 0 1px #0088bf !important;
}
#parameter-id-4 .advanced-parameter-inner:hover {
  border-color: #0088bf80 !important;
}
#parameter-id-4 .advanced-parameter-inner::after,
#parameter-id-4 .advanced-parameter-inner::before {
  display: none !important;
  content: none !important;
}
.migu-check {
  display: none;
  position: absolute !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: white !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
  pointer-events: none !important;
}
#parameter-id-4 label.advanced-parameter:has(input:checked) .migu-check {
  display: flex !important;
}
#parameter-id-4 input[type=radio],
#parameter-id-4 .parameter-value {
  display: none !important;
}


/* ── 3. VELIKOSTI — PILL TLAČÍTKA ───────────────────────── */

#parameter-id-17 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
#parameter-id-17 label.advanced-parameter {
  margin: 0 !important;
  padding: 0 !important;
}
#parameter-id-17 .advanced-parameter-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  width: auto !important;
  height: auto !important;
}
#parameter-id-17 .advanced-parameter-inner:hover {
  border-color: #0088bf !important;
  color: #0088bf !important;
}
#parameter-id-17 label.advanced-parameter:has(input:checked) .advanced-parameter-inner:hover {
  color: #fff !important;
}
@media (hover: none) {
  #parameter-id-17 .advanced-parameter-inner:hover {
    border-color: #e8e8e8 !important;
    color: #333 !important;
  }
  #parameter-id-17 label.advanced-parameter:has(input:checked) .advanced-parameter-inner:hover {
    border-color: #0088bf !important;
    background: #0088bf !important;
    color: #fff !important;
  }
}
#parameter-id-17 label.advanced-parameter:has(input:checked) .advanced-parameter-inner {
  border-color: #0088bf !important;
  background: #0088bf !important;
  color: #fff !important;
}
#parameter-id-17 .advanced-parameter-inner::before,
#parameter-id-17 .advanced-parameter-inner img {
  display: none !important;
}
#parameter-id-17 input[type=radio],
#parameter-id-17 .parameter-value {
  display: none !important;
}
.migu-size-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: inherit !important;
  white-space: nowrap !important;
}


/* ── 4. DOSTUPNOST + KÓD ────────────────────────────────── */

.detail-parameters { display: none !important; }

.migu-avail-row {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 9px 0 !important;
  margin: 0 0 12px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.migu-avail-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.migu-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #bbb !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  position: relative !important;
  top: 1px !important;
}
.migu-val {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
}
.migu-val-code {
  color: #666 !important;
}
.migu-val-muted {
  color: #aaa !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}
.migu-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.migu-sep {
  width: 1px !important;
  height: 16px !important;
  background: #e0e0e0 !important;
  flex-shrink: 0 !important;
}


/* ── 5. CENA + MNOŽSTVÍ + KOŠÍK (jen na detailu produktu) ── */

.type-product .p-to-cart-block {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%) !important;
  border: 1px solid #e0eeff !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-top: 10px !important;
  justify-content: space-between !important;
}
.type-product .p-final-price-wrapper {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 2px !important;
}
.type-product .price-final {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: #0d0d0d !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.type-product .price-additional, .type-product .price-additional * {
  font-size: 11px !important;
  color: #aaa !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.type-product .add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.type-product .quantity {
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  height: 42px !important;
}
.type-product .decrease, .type-product .increase {
  width: 36px !important;
  height: 42px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #444 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .15s !important;
}
.type-product .decrease:hover, .type-product .increase:hover { background: #f5f5f5 !important; }
.type-product .decrease::before, .type-product .increase::before { display: none !important; content: none !important; }
.type-product .decrease__sign, .type-product .increase__sign {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  line-height: 42px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: #555 !important;
}
.type-product input.amount {
  width: 42px !important;
  height: 42px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1.5px solid #ddd !important;
  border-right: 1.5px solid #ddd !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;
  background: #fff !important;
  outline: none !important;
}
.type-product .btn-conversion.add-to-cart-button {
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  box-shadow: 0 4px 14px rgba(0,136,191,.25) !important;
  transition: all .2s !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
.type-product .btn-conversion.add-to-cart-button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,136,191,.35) !important;
}


/* ── 6. TISK / ZEPTAT SE / SDÍLET ──────────────────────── */

.social-buttons-wrapper {
  display: block !important;
  padding-top: 12px !important;
  border-top: 1px solid #f5f5f5 !important;
}
.link-icons {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 0 !important;
}
.link-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 6px !important;
  font-size: 12px !important;
  color: #aaa !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  margin: 0 !important;
}
.link-icon:hover { background: #f5f5f5 !important; color: #555 !important; }
.link-icon::before, .link-icon + .link-icon::before { display: none !important; content: none !important; }
.link-icon span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.migu-sep-dot {
  color: #ccc !important;
  font-size: 14px !important;
  line-height: 1 !important;
  align-self: center !important;
  padding: 0 2px !important;
  flex-shrink: 0 !important;
}


/* ── 7. SELECT VARIANTY → PILLS ─────────────────────────── */

.migu-select-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
.migu-select-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  white-space: nowrap !important;
}
.migu-select-pill:hover {
  border-color: #0088bf !important;
  color: #0088bf !important;
}
.migu-select-pill--active:hover {
  color: #fff !important;
}
/* Na mobilech bez myši nezobrazovat hover efekt */
@media (hover: none) {
  .migu-select-pill:hover {
    border-color: #e8e8e8 !important;
    color: #333 !important;
  }
  .migu-select-pill--active:hover {
    border-color: #0088bf !important;
    background: #0088bf !important;
    color: #fff !important;
  }
}
.migu-select-pill--active {
  border-color: #0088bf !important;
  background: #0088bf !important;
  color: #fff !important;
}


/* ── 8. ZNAČKA — přesunuta do avail-row (přes JS) ────────── */

.brand-wrapper {
  display: none !important;
}
.migu-brand-item a {
  color: #0088bf !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}


/* ── 9. RESPONSIVE — MOBIL ───────────────────────────────── */

@media (max-width: 480px) {

  /* Cenový box — wrap: cena vlevo, qty+košík vpravo/dole */
  .type-product .p-to-cart-block {
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    gap: 10px 16px !important;
    justify-content: space-between !important;
  }

  /* Cena — vlevo, nechá místo pro qty vpravo */
  .type-product .p-final-price-wrapper {
    flex: 0 1 auto !important;
    margin-top: 0 !important;
  }
  .type-product .price-final {
    font-size: 26px !important;
  }

  /* Qty + Košík wrapper — vpravo vedle ceny, pak košík pod */
  .type-product .add-to-cart {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* Tlačítko Do košíku — celá šířka na spodním řádku */
  .type-product .btn-conversion.add-to-cart-button {
    flex: 1 0 100% !important;
    width: 100% !important;
    padding: 0 16px !important;
    min-width: 0 !important;
    height: 46px !important;
    font-size: 15px !important;
    order: 10 !important;
  }

  /* Velikosti pills — menší padding */
  #parameter-id-17 .advanced-parameter-inner {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  #parameter-id-17 {
    gap: 6px !important;
  }

  /* Select pills — menší padding */
  .migu-select-pill {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  .migu-select-pills {
    gap: 6px !important;
  }

  /* Avail row — menší gap */
  .migu-avail-row {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
}