.elementor-kit-17{--e-global-color-primary:#14110F;--e-global-color-secondary:#E3DED8;--e-global-color-text:#6B635B;--e-global-color-accent:#D81F26;--e-global-color-1437e52:#F7F5F2;--e-global-color-0e3883f:#8A827A;--e-global-color-ea0a769:#F7F5F21A;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.65;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem);--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Montserrat", Sans-serif;}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================================
   ZONDA — PRZYCISKI (wyodrębnione, bez zmiennych --zd-*)
   Zachowane efekty: strzałka na hover, shine, :active, reduced-motion.
   Fonty ustawiasz w Elementorze — tu jest tylko font-weight/size/spacing.

   WARTOŚCI PODMIENIONE ZA ZMIENNE:
   pewne (odczytane z pliku):
     #d81f26           = --zd-red        (rgb 216,31,38)
     #f7f5f2           = --zd-ivory      (rgb 247,245,242)
     #14110f           = --zd-black      (rgb 20,17,15)
     rgba(247,245,242,.2) = --zd-line-dark-2
   oszacowane (dopasuj, jeśli masz inne w Variable Managerze):
     #b3161c           = --zd-red-deep   (ciemniejsza czerwień na hover)
     #211d1a           = --zd-charcoal   (hover .btn--dark)
     3px               = --zd-radius
     cubic-bezier(.22,1,.36,1) = --zd-ease
     .35s              = --zd-dur
   ========================================================================= */


/* --- baza --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  line-height: 1.2;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  will-change: transform;
  transition:
    transform    .25s cubic-bezier(.22,1,.36,1),
    background   .35s cubic-bezier(.22,1,.36,1),
    color        .35s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn svg    { width: 1rem; height: 1rem; flex-shrink: 0; }

a.btn, button.btn { text-decoration: none; }


/* --- warianty kolorystyczne -------------------------------------------- */
.btn--red         { background: #d81f26; color: #fff; position: relative; overflow: hidden; }
.btn--red:hover   { background: #b3161c; color: #fff; }

.btn--ghost       { border-color: rgba(247,245,242,.2); color: #f7f5f2; }
.btn--ghost:hover { border-color: #f7f5f2; background: rgba(247,245,242,.06); }

.btn--dark        { background: #14110f; color: #f7f5f2; }
.btn--dark:hover  { background: #211d1a; color: #f7f5f2; }

.btn--light       { background: #f7f5f2; color: #14110f; }
.btn--light:hover { background: #fff; }


/* --- strzałka (SVG przez mask) — wysuwa się na hover -------------------- */
/* Uwaga: efekt jest tylko na .btn--red. Chcesz na innych — dopisz ich klasy
   do selektorów poniżej (np. .btn--dark::before, .btn--dark:hover::before). */
.btn--red::before {
  content: "";
  order: 2;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  z-index: 1;
}
.btn--red:hover::before { transform: translateX(5px); }


/* --- shine: gradient przejeżdżający po hoverze -------------------------- */
.btn--red::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.btn--red:hover::after { transform: translateX(130%); }


/* --- dostępność -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn--red::after { display: none; }
}

/* --- CHIP — mała etykieta (tag) --- */
.chip {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #14110F;
  border: 1px solid rgba(20,17,15,.16);
  padding: 7px 13px;
  border-radius: 2px;
  margin: 0;
}
.chip p { margin: 0; }   /* gdy tekst siedzi w <p> (np. Text Editor) */

/* wariant na ciemnym tle */
.chip--dark        { color: #F7F5F2; border-color: rgba(247,245,242,.28); }
.chip--dark p      { color: #F7F5F2; }

/* --- PATTERN „stitch" — ukośne przeszycie na ciemnej sekcji --- */
.has-stitch { position: relative; isolation: isolate; }
.has-stitch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.022) 0 1px,
    transparent 1px 13px
  );
}
.has-stitch > * { position: relative; z-index: 1; }

::selection {
  background-color: #d81f26;
  color: #ffffff;
}
::-moz-selection {
  background-color: #d81f26;
  color: #ffffff;
}/* End custom CSS */