/**
 * Swatch Override - Hummingbird + FIX alignment od góry (listingi)
 */

/* === FIX: swatche zawsze zaczynają od GÓRY (nawet przy 1 kolorze) === */
.products .product-miniature .product-miniature__infos_bottom,
.products .product-miniature .variant-links,
.products .product-miniature .color-variants,
.product-miniature__infos_bottom .variant-links,
.product-miniature__infos_bottom .color-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;   /* <--- KLUCZOWE */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;                    /* Twój odstęp między kolorami */
    min-height: 70px !important;            /* zapas na 1-2 linie – dopasuj jeśli potrzeba */
    padding-bottom: 0 !important;
}

/* Jeśli masz dodatkowy wrapper (często w custom module) */
.product-miniature .swatches-wrapper,
.product-miniature .variant-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
}

/* Ukryj swatche przed załadowaniem tekstur */
.variant-links .color,
.color-variants .color {
  opacity: 0;
  transition: opacity .15s ease, transform .2s ease-out, box-shadow .2s ease-out !important;
}

.variant-links .color.swatch-ready,
.color-variants .color.swatch-ready {
  opacity: 1;
}

/* CLP: ukrywanie wyłącznie klasami (bez inline display w JS) */
.variant-links a.color.icar-hidden-combo,
.color-variants a.color.icar-hidden-combo,
.variant-links a.color.icar-clp-swatch-hidden,
.color-variants a.color.icar-clp-swatch-hidden {
  display: none !important;
}

/* Przy filtrze: tylko .color.swatch-ready.icar-filter-visible */
.icar-color-filter-active .variant-links a.color.swatch-ready.icar-filter-visible,
.icar-color-filter-active .color-variants a.color.swatch-ready.icar-filter-visible {
  display: block !important;
  opacity: 1 !important;
}

.icar-color-filter-active .variant-links a.color.swatch-ready:not(.icar-filter-visible),
.icar-color-filter-active .color-variants a.color.swatch-ready:not(.icar-filter-visible) {
  display: none !important;
}

.icar-color-filter-active .variant-links a.color:not(.swatch-ready),
.icar-color-filter-active .color-variants a.color:not(.swatch-ready) {
  display: none !important;
}

/* Główne style — wysoki specificity żeby wygrać z Hummingbird */
.page-product .product__variants .variant .color-variants .color-variant .color,
.custom-checkbox input[type=checkbox]+span.color,
.variant-links .color,
.color-variants .color,
label .color {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3) !important;
  transition: transform .2s ease-out, box-shadow .2s ease-out, opacity .15s ease !important;
}

/* Hover — tylko poświata */
.page-product .product__variants .variant .color-variants .color-variant .color:hover,
.custom-checkbox input[type=checkbox]+span.color:hover,
.variant-links .color:hover,
.color-variants .color:hover,
label .color:hover {
  border: none !important;
  box-shadow: 0 0 7px rgba(181, 146, 74, 0.85) !important;
  transform: scale(1.08);
}

/* Aktywny — solid border + poświata */
.page-product .product__variants .variant .color-variants .color-variant .color.active,
.custom-checkbox input[type=checkbox]+span.color.active,
.variant-links .color.active,
.color-variants .color.active,
label input:checked + .color {
  border: 2px solid #f29028 !important;
  box-shadow: 0 0 7px rgba(181, 146, 74, 0.85) !important;
  transform: scale(1.05);
}

/* Okładka listingu po podmianie na zdjęcie wariantu (filtr koloru) */
.product-miniature__image.icar-cover-swatch {
  object-fit: cover !important;
  width: 100%;
  height: auto;
  transition: opacity 0.22s ease, transform 0.3s ease-in-out;
}

.product-miniature__image.icar-cover-swatch.icar-cover-loading {
  opacity: 0.35;
}

@media (hover: hover) and (pointer: fine) {
  .product-miniature:hover .product-miniature__image.icar-cover-swatch,
  .js-product-miniature:hover .product-miniature__image.icar-cover-swatch {
    transform: scale(1.05);
  }
}