/* =========================================================
   WK Color Swatches (ACF) — FULL CSS (Grid + Collapsible)
   ========================================================= */

/* 0) Bezpieczeństwo box-sizing */
.variations_form .wk-swatches-wrap,
.variations_form .wk-swatches-section,
.variations_form .wk-swatches,
.variations_form .wk-collapsible,
.variations_form .wk-collapsible__inner,
.variations_form .wk-swatch,
.variations_form .wk-swatch *{
  box-sizing: border-box;
}

/* 1) Wrapper dwóch sekcji */
.variations_form .wk-swatches-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
  max-width:100%;
}

/* 2) Sekcja + tytuł */
.variations_form .wk-swatches-section{
  width:100%;
  max-width:100%;
}

.variations_form .wk-swatches-title{
  font-size:18px;
	font-family: var(--e-global-typography-28cbbc7-font-family), Sans-serif;
    font-size: var(--e-global-typography-28cbbc7-font-size);
    font-weight: var(--e-global-typography-28cbbc7-font-weight);
    text-transform: var(--e-global-typography-28cbbc7-text-transform);
    font-style: var(--e-global-typography-28cbbc7-font-style);
    line-height: var(--e-global-typography-28cbbc7-line-height);
  color: var(--e-global-color-primary);
  margin:20px 0;
}

/* 3) GRID: 4 kolumny */
.variations_form .wk-swatches{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;

  width:100%;
  max-width:100%;
}

/* Responsywność */
@media (max-width: 1024px){
  .variations_form .wk-swatches{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  .variations_form .wk-swatches{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 4) Reset / nadpisanie stylów motywu/Elementora dla buttonów */
.variations_form .wk-swatches button.wk-swatch{
  margin:0 !important;
  min-width:0;
}

/* 5) Swatch button */
.variations_form .wk-swatch{
  display:flex;
  flex-direction:column;
  gap:8px;

  width:100%;
  max-width:100%;

  background:#fff !important;
  color:inherit !important;

  border:1px solid #e5e7eb !important;
  border-radius:0 !important;

  padding:10px !important;

  cursor:pointer;
  position:relative;

  -webkit-appearance:none;
  appearance:none;

  text-align:center;
  text-decoration:none;
  line-height:1.2;

  transition:transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}

.variations_form .wk-swatch:hover{ transform:translateY(-1px); }

.variations_form .wk-swatch.is-active{
  border-color:#111827 !important;
  box-shadow:0 0 0 2px rgba(17,24,39,.06);
}

.variations_form .wk-swatch.is-disabled{
  opacity:.35;
  pointer-events:none;
  filter:grayscale(1);
}

/* 6) Obrazek swatch */
.variations_form .wk-swatch__img{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:0;

  background-size:cover;
  background-position:center;
  background-color:#f3f4f6;

  border:1px solid #eef2f7;
}

/* 7) Nazwa koloru */
.variations_form .wk-swatch__label{
  display:block;
  font-size:12px;
  line-height:1.2;
  margin:0;
  word-break:break-word;
  white-space:normal;
}

/* 8) Kropka statusu */
.variations_form .wk-swatch__dot{
  position:absolute;
  right:10px;
  top:10px;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(17,24,39,.15);
}
.variations_form .wk-dot--standard{ background:#16a34a; }
.variations_form .wk-dot--custom{ background:#f59e0b; }


/* =========================================================
   COLLAPSIBLE (custom) — płynna animacja przycisku (bez skoków)
   ========================================================= */

.variations_form .wk-collapsible{
  position:relative;
  width:100%;
  max-width:100%;

  /* zmienne sterowane przez JS (dla dowolnego collapsed-height) */
  --wk-collapsed-h: 200px;
  --wk-collapsed-bottom: 80px;  /* collapsed/2 - button/2 */
}

/* inner: zwinięte ma max-height px, rozwinięte full */
.variations_form .wk-collapsible__inner{
  overflow:hidden;
  max-height:200px;
  transition:max-height .28s ease;
  padding-bottom:0;
}

/* overlay w collapsed */
.variations_form .wk-collapsible__overlay{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:200px;

  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #f6f6f6);
  opacity:1;
}

/* przycisk: ZAWSZE absolutny i animujemy TYLKO bottom (bez top) */
.variations_form .wk-collapsible .wk-collapsible__toggle{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:5;

  height:40px;
  padding:0 18px;
  border-radius:0px !important;
  border:0;
  cursor:pointer;

  font-weight:600;
  color:#fff;

  bottom: var(--wk-collapsed-bottom) !important;

  transition: bottom .28s ease, background-color .2s ease;
  background:#e11d2e;
}

/* collapsed: trzymamy overlay */
.variations_form .wk-collapsible.is-collapsed .wk-collapsible__overlay{
  display:block;
}

/* expanded: overlay znika, inner dostaje miejsce na button, button jedzie w dół płynnie */
.variations_form .wk-collapsible.is-expanded .wk-collapsible__overlay{
  display:none;
}

.variations_form .wk-collapsible.is-expanded .wk-collapsible__inner{
  max-height: 9999px !important;
  padding-bottom: 80px;
}

.variations_form .wk-collapsible.is-expanded .wk-collapsible__toggle{
  bottom: 20px !important;
  background:#111827;
}

/* Woo/Elementor czasem ucina overlay/button */
.variations_form table.variations td.value{
  overflow:visible;
}