/* === ROZMIARY === */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-size-big .wp-block-button__link,
.woocommerce-Button,
.woocommerce-page:not(.tax-product_cat) .wp-element-button {
  padding: 20px 26px;
  font-size: 14px;
  border-radius: 48px;
  text-transform: uppercase;
  text-align: center;
  border: none;
}
.wp-block-button.is-size-small .wp-block-button__link {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 48px;
}

/* === MAPOWANIE KLAS -> ZMIENNE (base/contrast/shadow) === */
/* domyślne: contrast = biały, jeśli nie nadpisane */
/* domyślne: shadow = czarny, jeśli nie nadpisane */
.wp-block-button { --btn-contrast: #fff; }

.wp-block-button.is-color-niebieski {
  --btn-base: var(--wp--preset--color--niebieski);
}
.wp-block-button.is-color-blekitny {
  --btn-base: var(--wp--preset--color--blekitny);
}
.wp-block-button.is-color-rozowy {
  --btn-base: var(--wp--preset--color--rozowy);
}
.wp-block-button.is-color-granat {
  --btn-base: var(--wp--preset--color--granat);
  --btn-shadow: rgba(240, 55, 155, 0.16);
}
.wp-block-button.is-color-bialy-rozowy {
  --btn-base: var(--wp--preset--color--bialy);
  --btn-contrast: var(--wp--preset--color--rozowy);
  --btn-shadow: rgba(240, 55, 155, 0.16);
}
.wp-block-button.is-color-bialy-czarny {
  --btn-base: var(--wp--preset--color--bialy);
  --btn-contrast: var(--wp--preset--color--czarny);
}
.wp-block-button.is-color-szary-czarny {
  --btn-base: var(--wp--preset--color--szary);
  --btn-contrast: var(--wp--preset--color--czarny);
}
/* Gradient  */
.wp-block-button.is-color-gradient {
  --btn-base: var(--wp--preset--color--niebieski);
  --btn-base-gradient: linear-gradient(257.51deg, #7C1AE9 0%, #4572D8 100%);
}

/* === STYL: FILL (natywny is-style-fill) === */
.wp-block-button.is-style-fill .wp-block-button__link,
.woocommerce-Button,
.woocommerce-page:not(.tax-product_cat) .wp-element-button {
  background: var(--btn-base, var(--wp--preset--color--rozowy));
  color: var(--btn-contrast, #fff);
  box-shadow: 0px 13px 15px var(--btn-shadow, rgba(0, 0, 0, 0.16));
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  transform: scale(1);
  transform-origin: bottom center;
  will-change: transform;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus-visible,
.woocommerce-Button:hover,
.woocommerce-page:not(.tax-product_cat) .wp-element-button:hover {
  box-shadow: 0px 6px 7px var(--btn-shadow, rgba(0, 0, 0, 0.16));
  transform: scale(0.97);
}

/* FILL + GRADIENT – używamy background-image */
.wp-block-button.is-style-fill.is-color-gradient .wp-block-button__link {
  background: none;
  background-image: var(--btn-base-gradient);
  color: var(--btn-contrast, #fff);
}

/* === STYL: OUTLINE (natywny is-style-outline) === */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--btn-base, var(--wp--preset--color--rozowy));
  border: 1px solid var(--btn-base, var(--wp--preset--color--rozowy));
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--btn-base, var(--wp--preset--color--rozowy));
  color: var(--btn-contrast, #fff);
  border-color: var(--btn-base, var(--wp--preset--color--rozowy));
}

/* OUTLINE + GRADIENT – na hover wypełnij gradientem */
.wp-block-button.is-style-outline.is-color-gradient .wp-block-button__link:hover,
.wp-block-button.is-style-outline.is-color-gradient .wp-block-button__link:focus-visible {
  background: none;
  background-image: var(--btn-base-gradient);
  color: var(--btn-contrast, #fff);
  border-color: transparent;
}

@media (max-width: 781px){
  .wp-block-button,
  .wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}