/**
 * Clyro Multipack - boxy wielopaków (zero-shift, akcent Clyro #C7FF2E)
 * Boxy zawsze w jednej linii - liczba kolumn = liczba boxów (max 3).
 */

.clyro-mp {
  display: block !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.clyro-mp-heading {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.clyro-mp-title {
  font-weight: 700 !important;
  color: var(--clyro-text-dark, #0f1318) !important;
  letter-spacing: -0.01em !important;
  line-height: 18px !important;
}

/* Siatka: równe kolumny na desktopie, węższy grid nie ciągnący się do prawej krawędzi */
@media (min-width: 769px) {
  .clyro-mp-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 112px)) !important;
    width: max-content !important;
    max-width: 100% !important;
    gap: 6px !important;
    align-items: stretch !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .clyro-mp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 112px)) !important;
  }

  .clyro-mp-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    width: 112px !important;
    min-width: 112px !important;
    padding: 3px 6px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #d9dde2 !important;
    border-radius: 8px !important;
    color: #1f2937 !important;
    text-align: center !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease, background-color 0.12s ease !important;
  }

  .clyro-mp-radio {
    display: none !important;
  }

  .clyro-mp-box-total-mobile {
    display: none !important;
  }

  .clyro-mp-box-left,
  .clyro-mp-box-info,
  .clyro-mp-box-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .clyro-mp-box:hover {
    border-color: #b7bec7 !important;
    background: #f9fafb !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .clyro-mp-box:focus,
  .clyro-mp-box:focus-visible {
    outline: none !important;
  }

  /* Zaznaczony wielopak na desktopie: ciemne tło + ramka #C7FF2E (bez cienia pogrubiającego) */
  .clyro-mp-box--active,
  .clyro-mp-box.is-active,
  .clyro-mp-box--active:hover,
  .clyro-mp-box.is-active:hover {
    background: #0f1318 !important;
    border: 1.5px solid #C7FF2E !important;
    box-shadow: none !important;
  }

  .clyro-mp-box--active .clyro-mp-box-main,
  .clyro-mp-box.is-active .clyro-mp-box-main {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .clyro-mp-box--active .clyro-mp-box-total-desktop,
  .clyro-mp-box.is-active .clyro-mp-box-total-desktop {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
  }

  .clyro-mp-box--active .clyro-mp-box-save,
  .clyro-mp-box.is-active .clyro-mp-box-save {
    color: #C7FF2E !important;
    font-weight: 700 !important;
  }

  /* Linia główna: "2 x 10,75 zł" */
  .clyro-mp-box-main {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    color: var(--clyro-text-dark, #0f1318) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Linia druga: cena łączna */
  .clyro-mp-box-total-desktop {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Linia trzecia: oszczędność */
  .clyro-mp-box-save {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 12px !important;
    color: #16a34a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Box bazowy "1 x cena" - jedna linia, wyśrodkowana pionowo */
  .clyro-mp-box:not(:has(.clyro-mp-box-total-desktop)) .clyro-mp-box-main {
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

/* ==========================================================================
   MOBILE: Stacked Tier Cards (D2C / Styl Clyro)
   Kompaktowe, niepowiększające się karty z delikatnym obrysem 1.5px
   ========================================================================== */
@media (max-width: 768px) {
  .clyro-mp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .clyro-mp-box,
  body .clyro-mp-grid .clyro-mp-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d9dde2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease !important;
  }

  .clyro-mp-box:hover {
    border-color: #b7bec7 !important;
    background: #f9fafb !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .clyro-mp-box:focus,
  .clyro-mp-box:focus-visible {
    outline: none !important;
  }

  .clyro-mp-box-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .clyro-mp-radio {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d1d5db !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 0.12s ease, background-color 0.12s ease !important;
  }

  .clyro-mp-radio-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: background-color 0.12s ease !important;
  }

  .clyro-mp-box-info {
    display: flex !important;
    align-items: center !important;
  }

  .clyro-mp-box-main {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f1318 !important;
    line-height: 1 !important;
  }

  .clyro-mp-box-total-desktop {
    display: none !important;
  }

  .clyro-mp-box-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    text-align: right !important;
  }

  .clyro-mp-box-total-mobile {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f1318 !important;
    line-height: 1 !important;
  }

  .clyro-mp-box-save {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    line-height: 1 !important;
  }

  /* Aktywny na mobile: Styl Clyro (ciemne tło #0f1318 + limonka #C7FF2E, stały obrys 1.5px, zero powiększania) */
  body .clyro-mp-grid .clyro-mp-box.is-active,
  body .clyro-mp-grid .clyro-mp-box--active,
  body .clyro-mp-grid .clyro-mp-box.is-active:hover,
  body .clyro-mp-grid .clyro-mp-box--active:hover {
    background: #0f1318 !important;
    border: 1.5px solid #C7FF2E !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body .clyro-mp-grid .clyro-mp-box.is-active .clyro-mp-radio,
  body .clyro-mp-grid .clyro-mp-box--active .clyro-mp-radio {
    border-color: #C7FF2E !important;
    background: #0f1318 !important;
  }

  body .clyro-mp-grid .clyro-mp-box.is-active .clyro-mp-radio-dot,
  body .clyro-mp-grid .clyro-mp-box--active .clyro-mp-radio-dot {
    background: #C7FF2E !important;
  }

  body .clyro-mp-grid .clyro-mp-box.is-active .clyro-mp-box-main,
  body .clyro-mp-grid .clyro-mp-box--active .clyro-mp-box-main {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  body .clyro-mp-grid .clyro-mp-box.is-active .clyro-mp-box-total-mobile,
  body .clyro-mp-grid .clyro-mp-box--active .clyro-mp-box-total-mobile {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  body .clyro-mp-grid .clyro-mp-box.is-active .clyro-mp-box-save,
  body .clyro-mp-grid .clyro-mp-box--active .clyro-mp-box-save {
    color: #C7FF2E !important;
    font-weight: 700 !important;
  }
}

/* Natywna tabela rabatów ilościowych dubluje wielopaki - ukrywana przez JS */
.clyro-mp-native-hidden {
  display: none !important;
}

/* --- Plakietka "Wielopak" nad produktem w koszyku ---
   Odwrotność aktywnego boxu z karty: tam czerń z limonkową ramką, tu limonka
   z czarnym tekstem. Jasny wiersz koszyka nie znosi ciemnej plamy. */
.clyro-mp-cart-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 19px !important;
  padding: 0 8px !important;
  margin: 0 0 5px 0 !important;
  background: #C7FF2E !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  line-height: 19px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  /* Kontener nazwy jest flex-column, bez tego plakietka rozciąga się na całą kolumnę. */
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
}

.clyro-mp-cart-badge-label {
  color: #0f1318 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.clyro-mp-cart-badge-save {
  color: #0f1318 !important;
  font-weight: 800 !important;
}

/* --- Plakietka w drawerze / dropdownie koszyka --- */
.clyro-cart-drawer-product-info .clyro-mp-cart-badge {
  margin: 0 0 4px 0 !important;
}

/* Personalizacja jest tylko technicznym nośnikiem rozdzielenia pozycji wielopaku -
   klient nie ma czego "dostosowywać", więc chowamy natywny modal i jego przycisk. */
.clyro-cart-item-row:has([data-clyro-mp="1"]) [class*="product-customization-modal"],
.clyro-cart-drawer-product:has([data-clyro-mp="1"]) [class*="product-customization-modal"] {
  display: none !important;
}

/* Plakietka w podsumowaniu zamówienia - węższa kolumna, więc drobniejsza */
.clyro-summary-product__body .clyro-mp-cart-badge {
  height: 17px !important;
  padding: 0 6px !important;
  margin: 0 0 3px 0 !important;
  font-size: 9.5px !important;
  line-height: 17px !important;
  gap: 4px !important;
}

/* Cena jednostkowa pod ceną kompletu w koszyku */
.clyro-mp-unit-note {
  display: block !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
}

/* Pozycja-komplet ze starym licznikiem (legacy customization): w polu ilości ukrywamy input tylko gdy jest zastępczy licznik */
.clyro-mp-pack-row.has-pack-count .clyro-qty-input,
.clyro-mp-pack-row:has(.clyro-mp-pack-count) .clyro-qty-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  min-width: 1px !important;
}

.clyro-mp-pack-count {
  display: inline-block !important;
  min-width: 22px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--clyro-text-dark, #0f1318) !important;
}

/* --- Usuwanie pozycji: wygaszenie + loader na pozycji --- */

/* Pozostałe kosze i przyciski nieaktywne, dopóki trwa kasowanie */
body.clyro-mp-cart-busy .js-clyro-cart-remove:not(.is-loading),
body.clyro-mp-cart-busy .clyro-cart-remove-btn:not(.is-loading),
body.clyro-mp-cart-busy .clyro-cart-drawer-remove:not(.is-loading),
body.clyro-mp-cart-busy .js-clyro-qty-btn,
body.clyro-mp-cart-busy .clyro-qty-input,
body.clyro-mp-cart-busy .clyro-btn-checkout {
  pointer-events: none !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transition: opacity 0.2s ease !important;
}

/* Usuwany wiersz: wygaszona treść, brak interakcji */
.clyro-cart-item-row.is-deleting .td-product,
.clyro-cart-item-row.is-deleting .td-delivery,
.clyro-cart-item-row.is-deleting .td-quantity,
.clyro-cart-item-row.is-deleting .td-price,
.clyro-cart-item-row.is-deleting .td-total,
.js-clyro-drawer-product.is-deleting .clyro-cart-drawer-product-media,
.js-clyro-drawer-product.is-deleting .clyro-cart-drawer-product-info,
.js-clyro-drawer-product.is-deleting .clyro-cart-drawer-product-bottom {
  opacity: 0.35 !important;
  filter: grayscale(40%) !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

/* Loader zastępuje ikonę kosza na klikniętym przycisku */
.clyro-cart-remove-btn.is-loading,
.clyro-cart-drawer-remove.is-loading,
.js-clyro-cart-remove.is-loading {
  position: relative !important;
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
  border-color: #0f1318 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(15, 19, 24, 0.08) !important;
}

.clyro-cart-remove-btn.is-loading svg,
.clyro-cart-drawer-remove.is-loading svg,
.js-clyro-cart-remove.is-loading svg {
  opacity: 0 !important;
  visibility: hidden !important;
}

.clyro-cart-remove-btn.is-loading::after,
.clyro-cart-drawer-remove.is-loading::after,
.js-clyro-cart-remove.is-loading::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin: -9px 0 0 -9px !important;
  border: 2.5px solid #d9dde2 !important;
  border-top-color: #0f1318 !important;
  border-radius: 50% !important;
  animation: clyro-mp-spin 0.6s linear infinite !important;
  box-sizing: border-box !important;
}

@keyframes clyro-mp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .clyro-cart-remove-btn.is-loading::after,
  .clyro-cart-drawer-remove.is-loading::after,
  .js-clyro-cart-remove.is-loading::after {
    animation-duration: 2s !important;
  }
}