/* Review candidate. Native Avada slider 2760 only; no slider engine or content replacement.
 * One design unit = 1 px at >=1240 px; below it the 1240x400 composition scales together.
 * Avada owns slide visibility, fading, autoplay, navigation and editable content.
 */
.fusion-slider-container[data-id="2760"] {
  container-type: inline-size;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 400px !important;
  aspect-ratio: 31 / 10;
  overflow: hidden;
}

.fusion-slider-container[data-id="2760"] .tfs-slider {
  --sp-u: min(1px, 0.0806451613cqw);
}
.fusion-slider-container[data-id="2760"] :is(.tfs-slider, .flex-viewport, .slides, .slides > li, .background) {
  height: min(400px, 32.25806452cqw) !important;
  min-height: 0 !important;
  max-height: none !important;
}
.fusion-slider-container[data-id="2760"] .background-image {
  background-position: var(--sp-bg-position, 50% 0%) !important;
}
.fusion-slider-container[data-id="2760"] .slide-content-container {
  top: 0 !important;
  left: 50%;
  width: min(100%, 1240px);
  height: 100%;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}
.fusion-slider-container[data-id="2760"] .slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none !important;
  margin: 0 auto !important;
}
.fusion-slider-container[data-id="2760"] .slide-content::before {
  content: var(--sp-panel-content, none);
  position: absolute;
  z-index: 0;
  left: calc(var(--sp-panel-x) * var(--sp-u));
  top: calc(var(--sp-panel-y) * var(--sp-u));
  width: calc(var(--sp-panel-w) * var(--sp-u));
  height: calc(var(--sp-panel-h) * var(--sp-u));
  background: rgb(0 0 0 / 50%);
  pointer-events: none;
}
.fusion-slider-container[data-id="2760"] .heading {
  position: absolute;
  z-index: 1;
  left: calc(var(--sp-heading-x) * var(--sp-u));
  top: calc(var(--sp-heading-y) * var(--sp-u));
  width: calc(var(--sp-heading-w) * var(--sp-u));
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins, sans-serif !important;
  font-size: calc(var(--sp-heading-font) * var(--sp-u)) !important;
  font-weight: 600 !important;
  line-height: calc(70 * var(--sp-u)) !important;
  color: #fff !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal;
}
.fusion-slider-container[data-id="2760"] .heading * {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
}
.fusion-slider-container[data-id="2760"] .heading :is(.fusion-title-sc-wrapper, .fusion-title) {
  display: block !important;
  width: 100%;
  background: transparent !important;
}
.fusion-slider-container[data-id="2760"] .buttons {
  position: absolute;
  z-index: 1;
  left: calc(var(--sp-button-x) * var(--sp-u));
  top: calc(var(--sp-button-y) * var(--sp-u));
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.fusion-slider-container[data-id="2760"] :is(.tfs-button-1, .tfs-button-2) {
  margin: 0 !important;
  padding: 0 !important;
}
.fusion-slider-container[data-id="2760"] .buttons .fusion-button {
  box-sizing: border-box;
  width: auto !important;
  min-height: 0 !important;
  padding: calc(15 * var(--sp-u)) calc(35 * var(--sp-u)) calc(8 * var(--sp-u)) !important;
  border: calc(2 * var(--sp-u)) solid transparent !important;
  border-radius: 0 !important;
  background: #db1c22 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  font-size: calc(33 * var(--sp-u)) !important;
  line-height: calc(33 * var(--sp-u)) !important;
  letter-spacing: calc(2 * var(--sp-u)) !important;
  text-transform: none !important;
  white-space: nowrap;
}
.fusion-slider-container[data-id="2760"] .buttons .fusion-button :is(.fusion-button-text, span) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}
.fusion-slider-container[data-id="2760"] .buttons .fusion-button:is(:hover, :focus-visible) {
  background: #000 !important;
  color: #fff !important;
}
.fusion-slider-container[data-id="2760"] .buttons .fusion-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The first image remains the slide's native featured image through the MU loader variable. */
.fusion-slider-container[data-id="2760"] .slide-id-38009 .background-image,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(1) .background-image {
  background-image: var(--sp-native-banner, url("https://www.steelprofil.eu/wp-content/uploads/2025/10/banner-podstawowy.webp")), url("https://www.steelprofil.eu/wp-content/uploads/2024/04/diamenty-bg.jpg") !important;
  background-size: calc(2686 * var(--sp-u)) calc(502 * var(--sp-u)), cover !important;
  background-position: calc(50% - 27 * var(--sp-u)) calc(-49 * var(--sp-u)), 1% 47% !important;
  background-repeat: no-repeat !important;
}

/* Original grid coordinates; these are data for CSS, not a second layout engine. */
.fusion-slider-container[data-id="2760"] .slide-id-38010,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(2) {
  --sp-bg-position: 1% 47%;
  --sp-panel-content: ""; --sp-panel-x: -58; --sp-panel-y: 101; --sp-panel-w: 974; --sp-panel-h: 246;
  --sp-heading-x: 11; --sp-heading-y: 105; --sp-heading-w: 906; --sp-heading-font: 60;
  --sp-button-x: 13; --sp-button-y: 316;
}
.fusion-slider-container[data-id="2760"] .slide-id-38011,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(3) {
  --sp-bg-position: 1% 47%;
  --sp-panel-content: ""; --sp-panel-x: -58; --sp-panel-y: 101; --sp-panel-w: 974; --sp-panel-h: 246;
  --sp-heading-x: 22; --sp-heading-y: 111; --sp-heading-w: 882; --sp-heading-font: 65;
  --sp-button-x: 55; --sp-button-y: 317;
}
.fusion-slider-container[data-id="2760"] .slide-id-38012,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(4) {
  --sp-panel-content: ""; --sp-panel-x: -58; --sp-panel-y: 101; --sp-panel-w: 975; --sp-panel-h: 254;
  --sp-heading-x: 4; --sp-heading-y: 116; --sp-heading-w: 901; --sp-heading-font: 65;
  --sp-button-x: 40; --sp-button-y: 320;
}
.fusion-slider-container[data-id="2760"] .slide-id-38013,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(5) {
  --sp-panel-content: ""; --sp-panel-x: -30; --sp-panel-y: 95; --sp-panel-w: 1116; --sp-panel-h: 254;
  --sp-heading-x: -2; --sp-heading-y: 112; --sp-heading-w: 1090; --sp-heading-font: 60;
  --sp-button-x: 40; --sp-button-y: 321;
}
.fusion-slider-container[data-id="2760"] .slide-id-38014,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(6) {
  --sp-panel-content: ""; --sp-panel-x: -58; --sp-panel-y: 101; --sp-panel-w: 975; --sp-panel-h: 254;
  --sp-heading-x: 4; --sp-heading-y: 116; --sp-heading-w: 901; --sp-heading-font: 65;
  --sp-button-x: 44; --sp-button-y: 322;
}
.fusion-slider-container[data-id="2760"] .slide-id-38015,
.fusion-slider-container[data-id="2760"].fusion-slider-sc-steelprofil-podstawowy-avada .slides > li:nth-child(7) {
  --sp-bg-position: 50% 50%;
  --sp-panel-content: ""; --sp-panel-x: -2; --sp-panel-y: 100; --sp-panel-w: 1199; --sp-panel-h: 254;
  --sp-heading-x: 14; --sp-heading-y: 112; --sp-heading-w: 1226; --sp-heading-font: 65;
  --sp-button-x: 44; --sp-button-y: 322;
}

/* REVIEW CANDIDATE ONLY. Append after the deployed native-slider CSS.
 * Desktop rules remain byte-for-byte unchanged. Avada remains the slider engine.
 */
@media (max-width: 640px) {
  .fusion-slider-container[data-id="2760"],
  .fusion-slider-container[data-id="2760"] :is(.tfs-slider, .flex-viewport, .slides, .slides > li, .background) {
    min-height: 150px !important;
  }

  /* Reserve a separate bottom row for the touch target on short viewports. */
  .fusion-slider-container[data-id="2760"] .buttons {
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 13px !important;
    width: auto !important;
  }
  .fusion-slider-container[data-id="2760"] .buttons .fusion-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 30px !important;
    padding: 6px 12px !important;
    border-width: 1px !important;
    font-size: max(14px, calc(33 * var(--sp-u))) !important;
    line-height: 1.2 !important;
  }

  /* Keep three/four heading lines above that row at the 640px breakpoint. */
  .fusion-slider-container[data-id="2760"] .heading {
    top: min(36px, calc(var(--sp-heading-y) * var(--sp-u))) !important;
    font-size: calc(min(var(--sp-heading-font), 60) * var(--sp-u)) !important;
    line-height: calc(60 * var(--sp-u)) !important;
  }
}


/* Only the dedicated native shop-link content box. */
.steelprofil-shop-link .content-box-wrapper {
  padding: 8px 12px !important;
}
.steelprofil-shop-link .heading {
  margin: 0 !important;
}
.steelprofil-shop-link img {
  margin: 0 !important;
  display: block;
  max-width: 100%;
  height: auto;
}
.steelprofil-shop-link a {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* The native content-box heading is table-sized and its link floats inline.
 * Center this one graphic without changing slider layout or other content boxes. */
.steelprofil-shop-link .heading {
  display: block !important;
  width: 100% !important;
}
.steelprofil-shop-link .heading-link {
  float: none !important;
  display: block !important;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto !important;
}
.steelprofil-shop-link .heading-link > .image {
  display: block !important;
  max-width: 100%;
}
.steelprofil-shop-link .heading-link img {
  max-width: min(100%, 280px) !important;
  height: auto !important;
  margin-inline: auto !important;
}


/* This one home row keeps Avada's native columns, Post Slider and form.
 * Keep three square desktop cards; let the message field use spare height. */
@media (min-width: 1280px) {
  .steelprofil-home-tiles > .fusion-builder-row {
    align-items: stretch !important;
  }
  .steelprofil-home-tiles > .fusion-builder-row > .fusion-layout-column {
    align-self: stretch;
  }
  .steelprofil-home-tiles > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper {
    flex: 1 1 auto;
    min-height: 0;
  }
  .steelprofil-home-tiles .fusion-column-wrapper > .fusion-text {
    flex: 0 0 auto;
  }
  .steelprofil-home-tiles .fusion-post-slider {
    position: relative;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 310px;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides {
    position: absolute;
    inset: 0;
    height: 100% !important;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides > li {
    height: 100% !important;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides > li > a {
    display: block;
    height: 100% !important;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides > li > a > img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-image-element {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-image-element > .fusion-imageframe {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-image-element a,
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-image-element img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > :not(.fusion-image-element) {
    flex: 0 0 auto;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-separator:last-child {
    display: none;
  }
}

/* Give the former 34px of empty consent padding to the message field instead.
 * Keep the consent, country picker, validation messages and mobile flow intact. */
.steelprofil-home-tiles #main_form_b24 .privacy {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.steelprofil-home-tiles #main_form_b24 textarea.form_message_b24 {
  height: 125px !important;
}

/* Below this width a third-width square cannot accommodate the complete form.
 * Keep this one section in its natural stacked layout instead of clipping it. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .steelprofil-home-tiles > .fusion-builder-row {
    flex-wrap: wrap !important;
  }
  .steelprofil-home-tiles > .fusion-builder-row > .fusion-layout-column {
    width: 100% !important;
  }
}

@media (min-width: 1280px) {
  .steelprofil-home-tiles > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper {
    aspect-ratio: 1;
  }
  .steelprofil-home-tiles #main_form_b24 {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .steelprofil-home-tiles #main_form_b24 > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    width: 100%;
    margin: 0;
  }
  .steelprofil-home-tiles #main_form_b24 > form > br {
    display: none;
  }
  .steelprofil-home-tiles #main_form_b24 > form > :is(input:not([type="hidden"]):not([type="checkbox"]), .select-box, textarea, button[type="submit"], .privacy) {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 70% !important;
    margin: 0 auto !important;
  }
  .steelprofil-home-tiles #main_form_b24 > form > textarea.form_message_b24 {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 64px;
  }
}


/* Keep the stacked tablet/narrow-desktop cards centred and their pictures
 * inside the card, without the empty right half of an oversized column. */
@media (min-width: 641px) and (max-width: 1279px) {
  .steelprofil-home-tiles > .fusion-builder-row > .fusion-layout-column {
    max-width: 640px;
    margin-inline: auto !important;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides {
    width: 100%;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides > li > a {
    display: block;
    width: 100%;
  }
  .steelprofil-home-tiles .fusion-post-slider > .slides > li > a > img {
    width: 100%;
    height: 310px !important;
    object-fit: cover;
    object-position: center top;
  }
  .steelprofil-home-tiles .fusion-column-wrapper:has(> .steelprofil-shop-link) > .fusion-image-element :is(.fusion-imageframe, a, img) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}