/* ==========================================================================
   1. GLOBAL TYPOGRAPHY & BASE STYLES
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


body {
  font-family: 'Montserrat', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1140px !important;
  }
}



/*DODANE ostatnio*/



/*https://chemcraft.modernsolutions.it/en/about-our-brand*/

@media (max-width: 998px) {
body.itemid-103 .sppb-addon-wrapper.addon-root-button,
body.itemid-105 .sppb-addon-wrapper.addon-root-button,
body.itemid-244 .sppb-addon-wrapper.addon-root-button
{
  width: 100% !important;
}

body.itemid-103 .sppb-btn.sppb-btn-custom.sppb-btn-lg.sppb-btn-block.sppb-btn-square,
body.itemid-105 .sppb-btn.sppb-btn-custom.sppb-btn-lg.sppb-btn-block.sppb-btn-square,
body.itemid-244 .sppb-btn.sppb-btn-custom.sppb-btn-lg.sppb-btn-block.sppb-btn-square
{
  padding: 10px;
}

#sppb-addon-1640868694666 {
  padding-right: 0px !important;
}

section#section-id-1657211512112 {
    margin-bottom: 25px !important;
}

}

.sppb-btn-default {
  background: transparent;
}



/*
div#sppb-addon-wrapper-1640861745818 {
    width: 100%;
}

a#btn-1640861745818 {
    padding: 15px 10px;
}

/* KONIEC DOADANYCH ostatnio*/

/* Headings Base
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

/* Heading 1 (Large page headers, Hero banners)
h1, .h1 {
  font-size: 55px;
  line-height: 60px;
  font-weight: 700;
}

/* Heading 2 (Section titles, Slider main titles)
h2, .h2 {
  font-size: 38px;
  line-height: 44px;
  font-weight: 700;
}
*/
/* Heading 3 (Sub-sections, Category titles, Feature box titles)*/
h3, .h3 {
  font-size: 28px;
  line-height: 34px;
}

h3.sppb-addon-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.sppb-btn {
  padding-left: 0px;
}
/* Heading 4 (Cards, Location titles, Article titles)
h4, .h4 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

/* Heading 5 (Small module titles, list headers)
h5, .h5 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

/* Heading 6 (Subtitles, Micro-copy, Uppercase labels)
h6, .h6 {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Paragraphs & Text
p {
  font-size: 16px;
  line-height: 26px;
  margin-top: 0;
  margin-bottom: 1rem;
  color: inherit;
}

/* Lead text / Intro paragraphs
.lead,
.sppb-lead {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400;
}

/* SP Page Builder Title Fixes
.sppb-addon-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
}

.sppb-cta-title {
  font-weight: 700 !important;
  line-height: 34px !important;
}

.sppb-feature-box-title {
  font-weight: 700 !important;
  line-height: 36px !important;
}

/* Global Links
a {
  color: #ffffff;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: #00A94F;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #222222;
}

::-webkit-scrollbar-thumb {
  background: #00A94F;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #008f43;
}

.text-left, .text-left h3 {
  text-align: left;
}

.sppb-addon-title.sppb-feature-box-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

/* --- RESPONSIVE TYPOGRAPHY --- */

/* Tablet (< 992px) */
@media (max-width: 991.98px) {
  h1, .h1 {
    font-size: 42px;
    line-height: 48px;
  }
  h2, .h2 {
    font-size: 32px;
    line-height: 38px;
  }
  h3, .h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .back-button,
  #section-id-1640803076785 a.back-button,
  #section-id-1640803076785 #btn-1640806091141 {
    display: none !important
  }
}

/* Mobile (< 576px)*/
@media (max-width: 575.98px) {
  /*
  h1, .h1 {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  h2, .h2 {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h3, .h3 {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  h4, .h4 {
    font-size: 18px !important;
    line-height: 24px !important;
  }
  p {
    font-size: 15px;
    line-height: 24px;
  }*/

  .sppb-feature-box-title {
    padding-top: 30px;
}

}

@media (min-width: 576px) {
.mobile {
  display: none !important;
}
}


/* ==========================================================================
   2. TOP BAR (#sp-section-1) - Languages, Login Button, AkzoNobel Logo
   ========================================================================== */
#sp-section-1 {
  background-color: #000000 !important;
  position: relative;
  z-index: 30;
  border-bottom: 1px solid #1a1a1a;
}

#sp-section-1 .container,
#sp-section-1 .container-inner,
#sp-section-1 .row {
  min-height: 48px;
}

/* Top bar right column layout */
#sp-top2 .sp-column {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

#sp-top2 .sp-column > .sp-module {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* --- 1. Language Selector (Left of the top group) --- */
#sp-top2 .sp-column > .sp-module.swich-location {
  order: 1 !important;
  margin-right: 25px !important;
}

#sp-top2 .sp-module.swich-location select.inputbox {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#sp-top2 .sp-module.swich-location select.inputbox option {
  background-color: #000000;
  color: #ffffff;
}

/* --- 2. Log in Button (Solid Green Block in the middle) --- */
#sp-top2 .sp-column > .sp-module:not(.akzo-logo):not(.swich-location) {
  order: 2 !important;
  align-items: stretch !important;
}

#sp-top2 .sp-column > .sp-module:not(.akzo-logo):not(.swich-location) .sp-module-content,
#sp-top2 ul.mod-menu,
#sp-top2 ul.mod-menu li {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: end;
}

#sp-top2 a.login-menu {
  background-color: #00A94F !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 35px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 100% !important;
  min-height: 48px !important;
  transition: background-color 0.2s ease-in-out;
}

#sp-top2 a.login-menu:hover {
  background-color: #008f43 !important;
  color: #ffffff !important;
}

/* --- 3. AkzoNobel Logo (Right of the top group) --- */
#sp-top2 .sp-column > .sp-module.akzo-logo {
  order: 3 !important;
  margin-left: 25px !important;
  padding-right: 15px !important;
  margin-top: 1rem !important;
}

#sp-top2 .customakzo-logo p {
  margin: 0 !important;
}

#sp-top2 .customakzo-logo img {
  height: 22px !important;
  width: auto !important;
  display: block;
}


/* ==========================================================================
   3. HEADER & LOGO (#sp-section-2)
   ========================================================================== */
#sp-section-2 {
  background-color: #000000 !important;
  position: relative;
  z-index: 20;
  padding: 10px 0 !important;
}

/* Force column widths on Desktop so the menu stays on a single line */
@media (min-width: 992px) {
  #sp-section-2 .row {
    display: flex !important;
    align-items: center !important;
  }

  #sp-section-2 #sp-logo,
  #sp-section-2 #sp-logo.col-lg-4 {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }

  #sp-section-2 #sp-menu,
  #sp-section-2 #sp-menu.col-lg-8 {
    width: 80% !important;
    flex: 0 0 80% !important;
    max-width: 80% !important;
  }
}

/* Hide default Helix template logo */
#sp-logo .logo {
  display: none !important;
}

/* Custom SVG Logo */
#sp-logo .customlogo-module p {
  margin: 0 !important;
}

#sp-logo .customlogo-module img {
  max-height: 65px !important;
  width: auto !important;
  display: block;
}

/* ==========================================================================
   4. MAIN NAVIGATION & MEGAMENU (Pixel-Perfect 4-Columns & Alignment)
   ========================================================================== */

/* 1. ANCHORING FIX: Makes MegaMenu span exactly across the 1140px header container */
#sp-section-2 .container,
#sp-section-2 .container-inner,
#sp-section-2 .row {
  position: relative !important;
}

.sp-dropdown.sp-dropdown-main {
  width: auto !important;
}



#sp-section-2 #sp-menu,
#sp-section-2 #sp-menu .sp-column,
#sp-section-2 .sp-megamenu-wrapper,
#sp-section-2 .sp-megamenu-parent {
  position: static !important;
}

.sp-megamenu-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
}

.sp-megamenu-parent {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sp-megamenu-parent > li {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Main menu links */
.sp-megamenu-parent > li > a {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  padding: 15px !important;
  display: block;
  transition: color 0.2s ease;
  letter-spacing: 1px;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: #FFF !important;
}

/* Hide default carets (v) */
.sp-megamenu-parent .sp-has-child > a::after,
.sp-megamenu-parent .sp-has-child > a:after,
.sp-megamenu-parent .sp-has-child > a .caret,
.sp-megamenu-parent .sp-has-child > a .menu-toggler,
.sp-megamenu-parent .sp-has-child > a svg,
.sp-megamenu-parent .sp-has-child > a i {
  display: none !important;
  content: "" !important;
}

/* --- FULL-WIDTH 4-COLUMN MEGA MENU CONTAINER (Flush with 1140px container) --- */
#sp-section-2 .sp-dropdown.sp-dropdown-mega.sp-menu-full,
#sp-section-2 .sp-dropdown.sp-dropdown-mega {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  padding: 0 !important;
  background-color: #000000 !important;
  border: 1px solid #222222 !important;
  border-top: 2px solid #ffffff !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9) !important;
  z-index: 999 !important;
}

.sp-dropdown-inner {
  padding: 0 !important;
  background: #000000 !important;
}

/* 4 Mega Columns Layout */
.sp-dropdown-inner .row {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-dropdown-inner .col-sm-3 {
  padding: 0 !important;
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  border: none !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

.sp-dropdown-inner .row > div:last-child {
  border-right: none !important;
}

/* Reset default margins/paddings from all module containers */
.sp-dropdown-inner ul.sp-mega-group,
.sp-dropdown-inner ul.sp-mega-group > li.module,
.sp-dropdown-inner .sp-module,
.sp-dropdown-inner .sp-module-content,
.sp-dropdown-inner .mod-custom,
.sp-dropdown-inner .custom {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}

/* --- MEGA MENU INTERNAL LIST STYLING (.column) --- */
.sp-dropdown-inner ul.column {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 1. Black Category Headers (FEATURED, PRE-CATALYZED, etc. - Exactly 42px height) */
.sp-dropdown-inner ul.column li.title {
  background-color: #000000 !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #111111 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.sp-dropdown-inner ul.column li.title a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  display: block !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* 2. White Content Items (Exactly 38px height - keeps all 4 columns level) */
.sp-dropdown-inner ul.column li.item {
  background-color: #ffffff !important;
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-sizing: border-box !important;
}

.sp-dropdown-inner ul.column li.item a {
  color: #000000 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-dropdown-inner ul.column li.item a:hover {
  background-color: #f5f5f5 !important;
  color: #005596 !important;
}

/* 3. Small link "+ View full range" (Exactly 36px height) */
.sp-dropdown-inner ul.column li.item-small {
  background-color: #ffffff !important;
  height: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-sizing: border-box !important;
}

.sp-dropdown-inner ul.column li.item-small a {
  color: #777777 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.sp-dropdown-inner ul.column li.item-small a:hover {
  color: #005596 !important;
  background-color: #f5f5f5 !important;
}

/* --- SPECIAL MEGA MENU BOTTOM BARS (Exactly 44px height) --- */
/* Blue "SEARCH PRODUCTS" Bar (Column 1 bottom) */
.sp-dropdown-inner ul.column li.title.searchproducts {
  background-color: #005596 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}

.sp-dropdown-inner ul.column li.title.searchproducts a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.sp-dropdown-inner ul.column li.title.searchproducts:hover {
  background-color: #00457a !important;
}

/* Yellow "DISCOVER SELVA PRO" Bar (Column 2 bottom) */
.sp-dropdown-inner ul.column li.title.selva-pro-menu {
  background-color: #FFDD00 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}

.sp-dropdown-inner ul.column li.title.selva-pro-menu a {
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Star icon next to Selva Pro */
.sp-dropdown-inner img {
  display: inline-block !important;
  margin-right: 5px;
  vertical-align: middle;
}

/* --- STANDARD SINGLE-COLUMN DROPDOWNS (Distributors, Using our products) --- */
.sp-dropdown:not(.sp-dropdown-mega) {
  background-color: #000000 !important;
  border-top: 2px solid #fff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.sp-dropdown:not(.sp-dropdown-mega) .sp-dropdown-inner {
  padding: 10px 0 !important;
}

.sp-dropdown:not(.sp-dropdown-mega) a {
  color: #ffffff !important;
  padding: 10px 25px !important;
  font-size: 14px !important;
  display: block !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/*.sp-dropdown:not(.sp-dropdown-mega) a:hover {
  background-color: #111111 !important;
  color: #00A94F !important;
}
*/


/* ==========================================================================
   MEGAMENU HOVER BRIDGE & SMOOTH DELAY FIX
   Fixes premature closing when moving the cursor from navbar into dropdown
   ========================================================================== */

/* 1. Invisible bridge extending 20px upwards to catch the mouse cursor */
#sp-section-2 .sp-dropdown::before {
  content: "" !important;
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 20px !important;
  background: transparent !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* 2. Transition delay buffer: Prevents instant collapse on cursor flick */
.sp-megamenu-parent > li.sp-has-child > .sp-dropdown {
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
  transition-delay: 0.15s !important; /* 150ms grace period before closing */
}

/* Open immediately on hover without delay */
.sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown-mega {
  transition-delay: 0s !important;
}

/* Keep dropdown open while cursor is hovering over the dropdown container itself */
.sp-megamenu-parent .sp-dropdown:hover {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ==========================================================================
   5. FIND DISTRIBUTOR CTA BOX (#sp-section-3)
   ========================================================================== */
#sp-section-3 {
  position: relative;
  z-index: 10;
  max-height: 0px !important;
}

#find-distributor-box {
  background-color: #005596 !important;
  color: #ffffff !important;
  width: 350px !important;
  position: absolute !important;
  top: 0 !important;
  right: 0px !important;
  z-index: 99 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 25px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#find-distributor-box p {
  margin: 0 !important;
  line-height: 1.3 !important;
}

#find-distributor-box a {
  color: #ffffff !important;
}

#find-distributor-box a.search-now {
  font-size: 14px !important;
  opacity: 0.85;
}

#find-distributor-box a.search-now:hover {
  text-decoration: underline !important;
  opacity: 1;
}

#dis-plus a {
  font-size: 60px !important;
  font-weight: 200 !important;
  line-height: 1 !important;
  display: block;
}


/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS (Mobile & Tablet < 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Hide Top Bar on mobile/tablet */
  #sp-section-1 {
    display: none !important;
  }

  #sp-section-2 {
    min-height: 70px !important;
  }

  .sp-megamenu-parent {
  display: none !important;
}

  #sp-menu {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* Mobile Offcanvas Hamburger Button */
  #offcanvas-toggler {
    display: flex !important;
    align-items: center;
    color: #ffffff !important;
    font-size: 28px !important;
    padding: 10px !important;
  }

  /* Full-width distributor box on mobile */
  #find-distributor-box {
    position: relative !important;
    width: 100% !important;
    right: 0 !important;
    top: 0 !important;
    padding: 15px 20px !important;
  }
}

/* ==========================================================================
   7. HOMEPAGE SLIDER (SP Page Builder Slideshow - Pixel-Perfect Restoration)
   ========================================================================== */

/* Hide extra layer titles marked with .none */
.none,
.sppb-sp-slider-title.none {
  display: none !important;
}

#column-wrap-id-1639501065350 {
  padding: 0;
}

/* Hide desktop arrow navigation */
.slider-home .sp-nav-control,
#sppb-sp-slider-1639501096034 .sp-nav-control {
  display: none !important;
}

/* --- RESET SP PAGE BUILDER CONTAINER MARGINS & PADDINGS --- */
#sppb-addon-wrapper-1639501096034,
#sppb-addon-1639501096034,
.slider-home #sppb-sp-slider-1639501096034,
.slider-home .sppb-addon-sp-slider,
.slider-home .sp-slider {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slider-home .sp-slider-outer-stage {
  height: 760px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slides stacked absolutely for horizontal transition */
.slider-home .sp-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Background image filling the entire slide */
.slider-home .sp-item .sp-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center right !important;
  z-index: 1 !important;
}

/* Reset left padding so the green card touches the left screen edge */
.slider-home,
.slider-home .sppb-container-inner,
.slider-home .sppb-row,
.slider-home .sppb-column,
.slider-home .sppb-column-addons,
.slider-home .sppb-addon-wrapper,
.slider-home .sppb-addon-sp-slider,
.slider-home .sp-slider-outer-stage,
.slider-home .sp-item,
.slider-home .sppb-container,
.slider-home .sppb-col-sm-12 {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.slider-home .sppb-container {
  position: relative !important;
  z-index: 5 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-right: 0 !important;
}

.slider-home .sppb-row {
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Ensure active slide layers are visible */
.slider-home .sp-item.active .sppb-sp-slider-title:not(.none),
.slider-home .sp-item.active .sppb-sp-slider-text,
.slider-home .sp-item.active a.sppb-sp-slider-button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- FULL-BLEED LEFT GREEN CARD --- */
@media (min-width: 992px) {
  .slider-home .sp-item .sppb-col-xs-6:first-child,
  .slider-home .sp-item .sppb-col-sm-6:first-child,
  .slider-home .sp-item .sppb-col-md-6:first-child,
  .slider-home .sp-item .sppb-col-lg-6:first-child,
  .slider-home .sp-item .sppb-col-6:first-child {
    background-color: #00A94F !important;
    flex: 0 0 52% !important;
    max-width: 52% !important;
    width: 52% !important;
    align-self: center !important;
    margin: auto 0 !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-right: 50px !important;
    padding-left: calc(max(50px, (100vw - 1140px) / 2 + 15px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 6 !important;
  }
}

/* Typography */
.slider-home h2.sppb-sp-slider-title,
.slider-home .sppb-sp-slider-title {
  /*color: #ffffff !important;
  font-size: 38px !important;*/
  font-weight: 700 !important;
/*line-height: 44px !important;*/
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
}

.slider-home .sppb-sp-slider-text,
.slider-home .sppb-sp-slider-text p {
  /*color: #ffffff !important;
  font-size: 18px !important;
  line-height: 28px !important;*/
  margin-bottom: 25px !important;
  /*font-weight: 400 !important;*/
}

/* Button */
.slider-home a.sppb-sp-slider-button {
  display: inline-block !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: fit-content !important;
  transition: all 0.3s ease !important;
}

.slider-home a.sppb-sp-slider-button .sp-slider-btn-text {
  display: block !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 10px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: initial !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.slider-home a.sppb-sp-slider-button:hover {
  background-color: #ffffff !important;
}

.slider-home a.sppb-sp-slider-button:hover .sp-slider-btn-text {
  color: #005596 !important;
  background: transparent !important;
}

/* --- BOTTOM THUMBNAIL TABS --- */
.slider-home .sp-slider-custom-dot-indecators {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 20 !important;
  line-height: 1 !important;
}

.slider-home .sp-slider-custom-dot-indecators ul {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* Individual Tab (20% width per tab) */
.slider-home li.sp-text-thumbnail-list {
  position: relative !important;
  flex: 1 1 20% !important;
  width: 20% !important;
  max-width: 20% !important;
  min-height: 125px !important;
  padding: 22px 20px 20px 20px !important;
  background-color: #000000 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease;
}

/* --- NATIVE ANIMATED PROGRESS TIMELINE (SPPB Controlled) --- */
.slider-home .sp-dot-indicator-wrap {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

/* Let SPPB JS control the width and duration smoothly */
.slider-home .sp-dot-indicator-wrap .dot-indicator {
  display: block !important;
  height: 100% !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Active and Hover Tab Background */
.slider-home li.sp-text-thumbnail-list.active,
.slider-home li.sp-text-thumbnail-list:hover {
  background-color: #00A94F !important;
}

/* Slide Number (01, 02...) */
.slider-home li.sp-text-thumbnail-list .sp-slider-text-thumb-number {
  font-size: 22px !important;
  font-weight: bold !important;
  color: #707070 !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
  transition: color 0.3s ease;
}

.slider-home li.sp-text-thumbnail-list.active .sp-slider-text-thumb-number,
.slider-home li.sp-text-thumbnail-list:hover .sp-slider-text-thumb-number {
  color: #ffffff !important;
}

/* Tab Title */
.slider-home li.sp-text-thumbnail-list .sp-slider-dot-indecator-text.sp-dot-text-key-1 {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #707070 !important;
  line-height: 18px !important;
  min-height: 38px !important;
  display: block !important;
  transition: color 0.3s ease;
}

/* Tab Subtitle */
.slider-home li.sp-text-thumbnail-list .sp-slider-dot-indecator-text.sp-dot-text-key-2 {
  font-size: 14px !important;
  font-weight: normal !important;
  color: #707070 !important;
  line-height: 18px !important;
  margin-top: 4px !important;
  display: block !important;
  transition: color 0.3s ease;
}

.slider-home li.sp-text-thumbnail-list.active .sp-slider-dot-indecator-text.sp-dot-text-key-1,
.slider-home li.sp-text-thumbnail-list.active .sp-slider-dot-indecator-text.sp-dot-text-key-2,
.slider-home li.sp-text-thumbnail-list:hover .sp-slider-dot-indecator-text.sp-dot-text-key-1,
.slider-home li.sp-text-thumbnail-list:hover .sp-slider-dot-indecator-text.sp-dot-text-key-2 {
  color: #ffffff !important;
}

/* --- POPRAWKA SLIDERA NA MOBILE (< 992px) - Stable Height & Transitions --- */
@media (max-width: 991.98px) {
  /* 1. Wysokość całego slidera na mobile (200px foto + treść z przyciskiem) */
  .slider-home #sppb-sp-slider-1639501096034,
  .slider-home .sppb-addon-sp-slider,
  .slider-home .sp-slider,
  .slider-home .sp-slider-outer-stage {
    height: 470px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* 2. Slajdy w pozycji absolute dla płynnych przejść */
  .slider-home .sp-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 540px !important;
    display: block !important;
    background-color: #00A94F !important;
  }

  /* 3. Zdjęcie u góry – dokładnie 200px wysokości */
  .slider-home .sp-slider .sp-item .sp-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 150px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
  }

  .sp-item.slider-content-vercally-center .sppb-col-sm-12 {
    padding-right: 0 !important;
}

  /* 4. Kontener z tekstem zaczyna się zaraz pod zdjęciem (padding-top: 200px) */
  .slider-home .sp-item .sppb-container {
    position: relative !important;
    z-index: 5 !important;
    padding-top: 150px !important;
    width: 100% !important;
  }

  /* 5. Zielona karta z treścią */
  .slider-home .sp-item .sppb-col-xs-6,
  .slider-home .sp-item .sppb-col-sm-6,
  .slider-home .sp-item .sppb-col-md-6,
  .slider-home .sp-item .sppb-col-lg-6,
  .slider-home .sp-item .sppb-col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background-color: #00A94F !important;
    padding: 24px 20px 25px 20px !important;
    box-shadow: none !important;
  }

  /* 6. Tytuł slajdu */
  .slider-home h2.sppb-sp-slider-title,
  .slider-home .sppb-sp-slider-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  /* 7. Treść: Montserrat 400, 18px / 28px + Ograniczenie do max 5 linii z wielokropkiem */
  .slider-home .sppb-sp-slider-text,
  .slider-home .sppb-sp-slider-text p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
  }

  .slider-home .sppb-sp-slider-text p {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 8. Ukrycie dolnych zakładek (dot indicators) */
  .slider-home .sp-slider-custom-dot-indecators {
    display: none !important;
  }

  /* 9. Strzałki wyśrodkowane pionowo na zdjęciu (100px od góry, 0 padding po bokach) */
  /* --- STRZAŁKI NA MOBILE (Nadpisanie ID ze specyficznością) --- */
    .slider-home #sppb-sp-slider-1639501096034 .sp-nav-control,
    #sppb-sp-slider-1639501096034 .sp-nav-control {
      display: flex !important;
      position: absolute !important;
      top: 100px !important;
      transform: translateY(-50%) !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      justify-content: space-between !important;
      padding: 0 !important;
      margin: 0 !important;
      z-index: 50 !important;
      pointer-events: none !important;
    }

    .slider-home #sppb-sp-slider-1639501096034 .sp-nav-control .nav-control {
      pointer-events: auto !important;
      width: 44px !important;
      height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 0 !important;
      cursor: pointer !important;
    }

    /* Lewa strzałka (<) */
    .slider-home #sppb-sp-slider-1639501096034 .sp-nav-control span.prev-control {
      order: 1 !important;
      background-color: #000000 !important;
      color: #ffffff !important;
    }

    /* Prawa strzałka (>) */
    .slider-home #sppb-sp-slider-1639501096034 .sp-nav-control span.next-control {
      order: 2 !important;
      background-color: #00A94F !important;
      color: #ffffff !important;
    }

    /* Wymuszenie widoczności ikon wewnątrz przycisków */
    .slider-home #sppb-sp-slider-1639501096034 .sp-nav-control .nav-control i {
      color: #ffffff !important;
      font-size: 22px !important;
      display: inline-block !important;
      line-height: 1 !important;
    }

    .slider-home span.nav-control {
      border: 0 !important;
    }
}

/* ==========================================================================
   8. 3-COLUMN IMAGE CARDS (Products / Distributors / Using our products)
   ========================================================================== */

/* Equal height columns layout */
#section-id-1639071837597 .sppb-row,
[class*="3col-pdu"] .sppb-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

#section-id-1639071837597 .sppb-column,
#section-id-1639071837597 .sppb-column-addons,
#section-id-1639071837597 .sppb-addon-wrapper,
#section-id-1639071837597 .sppb-addon-image-layouts,
#section-id-1639071837597 .sppb-addon-content,
#section-id-1639071837597 .sppb-addon-image-layout-wrap,
[class*="3col-pdu"] .sppb-column,
[class*="3col-pdu"] .sppb-column-addons,
[class*="3col-pdu"] .sppb-addon-wrapper,
[class*="3col-pdu"] .sppb-addon-image-layouts,
[class*="3col-pdu"] .sppb-addon-content,
[class*="3col-pdu"] .sppb-addon-image-layout-wrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card cursor */
#section-id-1639071837597 .sppb-addon-image-layouts,
[class*="3col-pdu"] .sppb-addon-image-layouts,
#section-id-1639071837597 .addon-root-image-layouts {
  cursor: pointer !important;
}

/* Image container with hidden overflow for smooth zoom */
#section-id-1639071837597 .sppb-addon-image-layout-image,
[class*="3col-pdu"] .sppb-addon-image-layout-image {
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background: transparent !important;
}

/* Image base styling & transition */
#section-id-1639071837597 .sppb-addon-image-layout-image img,
[class*="3col-pdu"] .sppb-addon-image-layout-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  transform: scale(1) !important;
  transition: transform 0.4s ease-in-out !important;
}

/* --- HOVER EFFECT: Image Zoom --- */
#section-id-1639071837597 .sppb-addon-image-layouts:hover .sppb-addon-image-layout-image img,
[class*="3col-pdu"] .sppb-addon-image-layouts:hover .sppb-addon-image-layout-image img,
#section-id-1639071837597 .addon-root-image-layouts:hover .sppb-addon-image-layout-image img {
  transform: scale(1.08) !important;
}

/* --- UNIFIED SOLID BACKGROUND (Fix for the two-tone background issue) --- */
#section-id-1639071837597 .sppb-addon-image-layouts,
#section-id-1639071837597 .sppb-addon-content,
#section-id-1639071837597 .sppb-addon-image-layout-wrap,
#section-id-1639071837597 .sppb-addon-image-layout-content,
[class*="3col-pdu"] .sppb-addon-image-layouts,
[class*="3col-pdu"] .sppb-addon-content,
[class*="3col-pdu"] .sppb-addon-image-layout-wrap,
[class*="3col-pdu"] .sppb-addon-image-layout-content {
  background-color: #f1f1f1 !important;
  background: #f1f1f1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

/* Content Box (Equal height text area) */
#section-id-1639071837597 .sppb-addon-image-layout-content,
[class*="3col-pdu"] .sppb-addon-image-layout-content {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 120px !important; /* Uniform height across all 3 cards */
  padding: 25px 25px 30px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}


/* Hide accidental empty <br> line-breaks in text links */
#section-id-1639071837597 .sppb-addon-image-layout-text br,
[class*="3col-pdu"] .sppb-addon-image-layout-text br {
  display: none !important;
}

/* Card Description Wrapper */
#section-id-1639071837597 .sppb-addon-image-layout-text,
[class*="3col-pdu"] .sppb-addon-image-layout-text {
  display: block !important;
  border-bottom: none !important;
}

/* Card Description Link - underline attached directly to the text */
#section-id-1639071837597 .sppb-addon-image-layout-text a,
[class*="3col-pdu"] .sppb-addon-image-layout-text a {
  border-bottom: 1px solid transparent !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}

#section-id-1639071837597 .sppb-addon-image-layouts:hover .sppb-addon-image-layout-text a,
[class*="3col-pdu"] .sppb-addon-image-layouts:hover .sppb-addon-image-layout-text a {
  color: #005596 !important;
  border-bottom-color: #005596 !important;
}
/* ==========================================================================
   9. NEWSLETTER BANNER - Gradient on Inner Image Block & White Styling
   ========================================================================== */

/* Apply dark gradient ONLY to the inner block containing the image */
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b,
#gradientbox .sppb-column-addons > .sppb-section {
  position: relative !important;
  overflow: hidden !important;
}

#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b::before,
#gradientbox .sppb-column-addons > .sppb-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.8) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Ensure text & button stay above the gradient */
#gradientbox .sppb-row-column,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b .sppb-row-column,
#column-id-f3497e54-3f33-4780-99e2-005c935d593c {
  position: relative !important;
  z-index: 2 !important;
}

/* Right column padding & spacing */
#column-id-f3497e54-3f33-4780-99e2-005c935d593c {
  padding: 40px 30px 40px 15px !important;
  text-align: left !important;
}

/* White Title */
#gradientbox h3.sppb-addon-title,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b h3.sppb-addon-title {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}

/* White Subtitle */
#gradientbox .sppb-addon-content p,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b .sppb-addon-content p {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 24px !important;
  margin-bottom: 22px !important;
  max-width: 440px !important;
  opacity: 0.95;
}

/* White Outline Button */
#gradientbox a.sppb-btn,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b a.sppb-btn,
a[id*="btn-62297f6f"] {
  display: inline-block !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: initial !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.3s ease !important;
}

/* Button Hover */
#gradientbox a.sppb-btn:hover,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b a.sppb-btn:hover,
a[id*="btn-62297f6f"]:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* ==========================================================================
   9. PROMO BANNERS (#gradientbox & #gradientbox-2) - Background-Only Zoom
   ========================================================================== */

/* Outer Section Wrappers */
#gradientbox,
#gradientbox-2 {
  position: relative !important;
  overflow: hidden !important;
}

/* Inner Banner Cards */
#gradientbox .sppb-column-addons > .sppb-section,
#gradientbox-2 .sppb-column-addons > .sppb-section,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46 {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

/* --- LAYER 0: ONLY THE BACKGROUND IMAGE ZOOMS --- */
#gradientbox .sppb-column-addons > .sppb-section::after,
#gradientbox-2 .sppb-column-addons > .sppb-section::after,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b::after,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7::after,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: inherit !important; /* Inherits background image from SPPB */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: scale(1) !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 0 !important;
}

/* Hover Zoom ONLY on the background image layer */
#gradientbox:hover .sppb-column-addons > .sppb-section::after,
#gradientbox-2:hover .sppb-column-addons > .sppb-section::after,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b:hover::after,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7:hover::after,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46:hover::after {
  transform: scale(1.08) !important;
}

/* --- LAYER 1: GRADIENT OVERLAYS --- */
/* Banner 1 (Newsletter - Dark gradient on the RIGHT) */
#gradientbox .sppb-column-addons > .sppb-section::before,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.83) 54%) transparent !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Banner 2 (Mobile Web App - Dark gradient on the LEFT) */
#gradientbox-2 .sppb-column-addons > .sppb-section::before,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7::before,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.89) 37%, rgba(0, 0, 0, 0) 100%) transparent !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* --- LAYER 2: STATIC CONTENT (Does NOT scale or move) --- */
#gradientbox .sppb-row-column,
#gradientbox-2 .sppb-row-column,
#column-id-f3497e54-3f33-4780-99e2-005c935d593c,
#column-id-b0a53cf4-08e5-4995-a1bb-f2770c57400a,
#column-id-017920db-1f1f-40e2-a1c5-b1bfec32533c {
  position: relative !important;
  z-index: 2 !important;
}

/* Padding for Text Columns */
#column-id-f3497e54-3f33-4780-99e2-005c935d593c {
  padding: 40px 30px 40px 15px !important;
  text-align: left !important;
}

#column-id-b0a53cf4-08e5-4995-a1bb-f2770c57400a,
#column-id-017920db-1f1f-40e2-a1c5-b1bfec32533c,
#gradientbox-2 .sppb-nested-row > .sppb-row-column:first-child > .sppb-column {
  padding: 40px 15px 40px 40px !important;
  text-align: left !important;
}

/* White Titles for Both Banners */
#gradientbox h3.sppb-addon-title,
#gradientbox-2 h3.sppb-addon-title,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b h3.sppb-addon-title,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7 h3.sppb-addon-title,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46 h3.sppb-addon-title {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}

/* White Subtitle Text for Both Banners */
#gradientbox .sppb-addon-content p,
#gradientbox-2 .sppb-addon-content p,
#section-id-f70ad1f2-8e55-42af-804a-3da525a1bd1b .sppb-addon-content p,
#section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7 .sppb-addon-content p,
#section-id-5eec777c-d7f7-4305-8f85-8be276ae1c46 .sppb-addon-content p {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 24px !important;
  margin-bottom: 22px !important;
  max-width: 440px !important;
  opacity: 0.95;
}

/* White Outline Buttons for Both Banners */
#gradientbox a.sppb-btn,
#gradientbox-2 a.sppb-btn,
a[id*="btn-62297f6f"],
a[id*="btn-8515dfbc"],
a[id*="btn-3246908f"] {
  display: inline-block !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: initial !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.3s ease !important;
}

/* Button Hover for Both Banners */
#gradientbox a.sppb-btn:hover,
#gradientbox-2 a.sppb-btn:hover,
a[id*="btn-62297f6f"]:hover,
a[id*="btn-8515dfbc"]:hover,
a[id*="btn-3246908f"]:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}


body:not(.itemid-101, .itemid-104, .itemid-107, .itemid-106) .addon-root-image-layouts .sppb-addon-image-layout-text {
  min-height: 9em;
}

/* --- MOBILE: PROMO BANNER (#gradientbox-2 - CHEMCRAFT MOBILE WEB APP) --- */
@media (max-width: 991.98px) {
  /* --- POPRAWKA: PROMO BANNER (#gradientbox-2 - MOBILE WEB APP) --- */

    /* 1. Reset paddingów SPPB z góry (likwidacja pustej czarnej przestrzeni nad tekstem) */
    #gradientbox-2,
    #gradientbox-2 .sppb-row-container,
    #gradientbox-2 .sppb-row,
    #gradientbox-2 .sppb-col-md-12,
    #gradientbox-2 .sppb-column,
    #gradientbox-2 .sppb-column-addons,
    #gradientbox-2 .sppb-container-inner,
    #gradientbox-2 .sppb-nested-row {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    /* 2. Główna karta o stałej wysokości 700px (mieści tekst u góry i całego stolarza na dole) */
    #gradientbox-2 .sppb-column-addons > .sppb-section,
    #section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7 {
      min-height: 800px !important;
      height: 800px !important;
      position: relative !important;
      overflow: hidden !important;
      background-color: #000000 !important;
      background-size: 0 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      display: block !important;
    }

    /* 3. Zdjęcie stolarza: zaczyna się 230px od góry (DOKŁADNIE POD PRZYCISKIEM LEARN MORE) */
    #gradientbox-2 .sppb-column-addons > .sppb-section::after,
    #section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7::after {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background-image: inherit !important;
      background-size: cover !important;
      background-position: 78% bottom !important;
      background-repeat: no-repeat !important;
      z-index: 1 !important;
    }

    /* 4. Płynne przejście czerni w zdjęcie poniżej przycisku */
    #gradientbox-2 .sppb-column-addons > .sppb-section::before,
    #section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7::before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.3) 60%) transparent !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }

    /* 5. Kontener treści przyklejony do samej góry */
    #column-wrap-id-b0a53cf4-08e5-4995-a1bb-f2770c57400a,
    #column-id-b0a53cf4-08e5-4995-a1bb-f2770c57400a,
    #gradientbox-2 .sppb-nested-row > .sppb-row-column:first-child > .sppb-column {
      position: relative !important;
      z-index: 10 !important;
      width: 100% !important;
      padding: 30px 20px 0 20px !important;
      margin: 0 !important;
      text-align: left !important;
    }

    /* 6. Typografia tytułu i opisu */
    #gradientbox-2 h3.sppb-addon-title,
    #section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7 h3.sppb-addon-title {
      color: #ffffff !important;
      font-family: 'Montserrat', sans-serif !important;
      font-size: 30px !important;
      line-height: 30px !important;
      font-weight: 700 !important;
      margin-top: 0 !important;
      margin-bottom: 12px !important;
      text-align: left !important;
    }

    #gradientbox-2 .sppb-addon-content p,
    #section-id-c416f142-e4d0-4453-abed-dc0b37c1d3c7 .sppb-addon-content p {
      color: #ffffff !important;
      font-family: 'Montserrat', sans-serif !important;
      font-size: 18px !important;
      line-height: 24px !important;
      font-weight: 400 !important;
      margin-top: 0 !important;
      margin-bottom: 22px !important;
      text-align: left !important;
      max-width: 100% !important;
    }

    /* 7. Przycisk LEARN MORE na pełną szerokość z białym obramowaniem */
    #gradientbox-2 .sppb-button-wrapper,
    #sppb-addon-wrapper-8515dfbc-542a-48cd-92b7-9408513023b0 .sppb-button-wrapper {
      width: 100% !important;
      display: block !important;
      margin: 0 !important;
    }

    #gradientbox-2 a.sppb-btn,
    #btn-8515dfbc-542a-48cd-92b7-9408513023b0 {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      text-transform: uppercase !important;
      font-family: 'Montserrat', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      letter-spacing: 0.05em !important;
      border: 1px solid #ffffff !important;
      border-radius: 0 !important;
      background-color: transparent !important;
      color: #ffffff !important;
      padding: 12px 15px !important;
      margin: 0 !important;
      text-decoration: none !important;
    }
#gradientbox-2 .sppb-row-container
{
  padding: 0;
}

}

/* ==========================================================================
   10. "VIEW OUR RANGES" CAROUSEL SECTION (Locked Bottom-Left Controls)
   ========================================================================== */

/* Main Section Wrapper: Reset negative margins from SPPB */
.sp-page-builder .page-content #section-id-1643292017298,
#section-id-1649258489143,
#section-id-1643292017298 {
  background-color: #000000 !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#section-id-1643292017298 .sppb-row {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Left Column */
#column-id-1643292017309, .tide-column,  #column-id-e798b707-7c66-4479-b146-11f516f5ee94, #column-wrap-id-1642709347491, #column-id-1654871105048,
#column-id-1640866884543 {
  background-color: #000000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 60px 40px 45px calc(max(40px, (100vw - 1140px) / 2 + 15px)) !important;
  text-align: left !important;
}

#section-id-1643292017298 h3.sppb-addon-title,
#section-id-1643292017298 .sppb-cta-title {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  text-align: left !important;
  text-transform: none !important;
}

#section-id-1643292017298 .sppb-addon-content p,
#section-id-1643292017298 .sppb-cta-text {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 26px !important;
  margin-bottom: 25px !important;
  max-width: 480px !important;
  text-align: left !important;
  opacity: 0.95;
}

#section-id-1643292017298 a.sppb-btn,
#btn-3c004772-c6d6-422c-bcd6-b58a41b480fa {
  display: inline-block !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 12px 35px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: initial !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  width: fit-content !important;
  transition: all 0.3s ease !important;
}

#section-id-1643292017298 a.sppb-btn:hover,
#btn-3c004772-c6d6-422c-bcd6-b58a41b480fa:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Right Column (Carousel Container) */
#column-id-1643292017311 {
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  /*height: 500px !important;*/
}

#sppb-addon-wrapper-1643292017312,
#sppb-addon-1643292017312 {
  margin: 0 !important;
  padding: 0 !important;
  height: 500px !important;
}

#sppb-addon-1643292017312 .sppb-carousel-extended {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  height: 500px !important;
}

.sppb-carousel-extended-item img {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  transform: scale(1);
  transition: transform 0.5s ease !important;
}

.sppb-carousel-extended-item:hover img {
  transform: scale(1.08) !important;
}

.sppb-carousel-extended-heading,
#sppb-addon-1643292017312 .sppb-carousel-extended-dots {
  display: none !important;
}

/* Square Nav Buttons: Locked strictly to bottom-left of the photo */
#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control,
.sppb-carousel-extended-nav-control {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 25 !important;
  height: 80px !important;
}

#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control .nav-control,
.sppb-carousel-extended-nav-control .nav-control {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.sppb-carousel-extended-nav-control .nav-control i,
.sppb-carousel-extended-nav-control .nav-control svg {
  color: #ffffff !important;
  font-size: 28px !important;
  display: block !important;
}

/* Prev (<): Solid Black */
#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.prev-control,
.sppb-carousel-extended-nav-control span.prev-control {
  order: 1 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.prev-control:hover {
  background-color: #222222 !important;
}

/* Next (>): Solid Green */
#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.next-control,
.sppb-carousel-extended-nav-control span.next-control {
  order: 2 !important;
  background-color: #00A94F !important;
  color: #ffffff !important;
}

#sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.next-control:hover {
  background-color: #008f43 !important;
}

/* --- MOBILE LAYOUT (< 992px) - VIEW OUR RANGES --- */
@media (max-width: 991.98px) {
  /* 1. Full-bleed edge-to-edge container layout */
  #section-id-1643292017298 .sppb-container-inner,
  #section-id-1643292017298 .sppb-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-direction: column !important;
  }

  #column-wrap-id-1643292017309,
  #column-wrap-id-1643292017311 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Left-aligned text column with inner padding */
  #column-id-1643292017309, .tide-column,  #column-id-e798b707-7c66-4479-b146-11f516f5ee94, #column-wrap-id-1642709347491, #column-id-1654871105048
   {
    padding: 40px 20px 30px 20px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  #column-id-1640866884543 {
    padding: 0 !important;
  }


  #section-id-1643292017298 h3.sppb-addon-title {
    text-align: left !important;
    font-size: 28px !important;
    line-height: 34px !important;
    margin-bottom: 15px !important;
  }

  #section-id-1643292017298 .sppb-addon-content p {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 24px !important;
    margin-bottom: 25px !important;
  }

  /* 3. Full-width outlined button */
  #sppb-addon-wrapper-3c004772-c6d6-422c-bcd6-b58a41b480fa,
  #sppb-addon-wrapper-3c004772-c6d6-422c-bcd6-b58a41b480fa .sppb-button-wrapper {
    width: 100% !important;
    text-align: left !important;
  }

  #section-id-1643292017298 a.sppb-btn,
  #btn-3c004772-c6d6-422c-bcd6-b58a41b480fa {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    font-size: 16px !important;
  }

  /* 4. Full-width photo container without breaking carousel JS track */
  #column-id-1643292017311,
  #sppb-addon-wrapper-1643292017312,
  #sppb-addon-1643292017312 {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 320px !important;
  }

  #sppb-addon-1643292017312 .sppb-carousel-extended {
    height: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #sppb-addon-1643292017312 .sppb-carousel-extended-item img {
    height: 320px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Hide carousel dots on mobile */
  #sppb-addon-1643292017312 .sppb-carousel-extended-dots {
    display: none !important;
  }

  /* 5. Navigation controls pinned directly to the bottom corners ON the photo */
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control {
    position: absolute !important;
    bottom: 50px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 55px !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 25 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control .nav-control {
    pointer-events: auto !important;
    position: absolute !important;
    bottom: 0 !important;
    width: 55px !important;
    height: 55px !important;
    line-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 20px !important;
  }

  /* Black button on bottom-left corner of the photo */
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.prev-control {
    left: 0 !important;
    right: auto !important;
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Green button on bottom-right corner of the photo */
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.next-control {
    right: 0 !important;
    left: auto !important;
    background-color: #00A94F !important;
    color: #ffffff !important;
  }

  #sppb-addon-wrapper-1649258489145 {
    margin-bottom: -50px !important;
  }

  /* --- POPRAWKA STRZAŁEK W KARUZELI ZDJĘĆ NA MOBILE (< 992px) --- */

  /* 1. Kontener nawigacji rozciągnięty na całą szerokość u dołu zdjęcia */
  .addon-root-image-carousel .sppb-carousel-extended-nav-control,
  #sppb-addon-1642709347494 .sppb-carousel-extended-nav-control,
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 50px !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 25 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. Jednakowy, kwadratowy rozmiar obu przycisków (50px x 50px) */
  .addon-root-image-carousel .sppb-carousel-extended-nav-control .nav-control,
  #sppb-addon-1642709347494 .sppb-carousel-extended-nav-control .nav-control,
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control .nav-control {
    position: absolute !important;
    bottom: 58px !important;
    top: auto !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  /* 3. Czarna strzałka (<) przyklejona do lewego dolnego rogu zdjęcia */
  .addon-root-image-carousel .sppb-carousel-extended-nav-control span.prev-control,
  #sppb-addon-1642709347494 .sppb-carousel-extended-nav-control span.prev-control,
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.prev-control {
    left: 0 !important;
    right: auto !important;
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* 4. Zielona strzałka (>) przyklejona do prawego dolnego rogu zdjęcia */
  .addon-root-image-carousel .sppb-carousel-extended-nav-control span.next-control,
  #sppb-addon-1642709347494 .sppb-carousel-extended-nav-control span.next-control,
  #sppb-addon-1643292017312 .sppb-carousel-extended-nav-control span.next-control {
    right: 0 !important;
    left: auto !important;
    background-color: #00A94F !important;
    color: #ffffff !important;
  }

}



/* ==========================================================================
   11. NEED HELP BANNER (#sp-section-9 / #sp-bottom1) - Blue Bar & White Button
   ========================================================================== */

/* Main Blue Section */
#sp-section-9 {
  background-color: #005596 !important; /* Chemcraft Blue */
  position: relative !important;
  z-index: 10 !important;
  padding: 25px 0 !important;
}

#sp-bottom1 .sp-column {
  padding: 0 !important;
}

/* Flex Container: Aligns text on the left & button on the right inside 1140px container */
#sp-bottom1 .need .mod-custom,
#sp-section-9 .need .mod-custom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  gap: 20px !important;
}

/* "Need help?" Text */
#sp-bottom1 .need p:not(.bottom1-contact-button),
#sp-section-9 .need p:not(.bottom1-contact-button) {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* "Contact us" Button (Solid 3px white border) */
#sp-bottom1 p.bottom1-contact-button,
#sp-section-9 p.bottom1-contact-button {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  border: 3px solid #ffffff !important; /* Original 3px white border */
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

#sp-bottom1 p.bottom1-contact-button a,
#sp-section-9 p.bottom1-contact-button a {
  display: block !important;
  color: #ffffff !important;
  padding: 10px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 24px !important;
  transition: all 0.3s ease !important;
}

/* Button Hover State: White background with Blue text */
#sp-bottom1 p.bottom1-contact-button:hover,
#sp-section-9 p.bottom1-contact-button:hover {
  background-color: #ffffff !important;
}

#sp-bottom1 p.bottom1-contact-button:hover a,
#sp-section-9 p.bottom1-contact-button:hover a {
  color: #005596 !important;
}

/* --- MOBILE LAYOUT (< 768px) --- */
@media (max-width: 767.98px) {
  #sp-bottom1 .need .mod-custom,
  #sp-section-9 .need .mod-custom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
  }

  #sp-bottom1 p.bottom1-contact-button,
  #sp-section-9 p.bottom1-contact-button {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ==========================================================================
   12. FOOTER & BOTTOM NAVIGATION - MODERN SEMANTIC ENGINE (#sp-section-10 & #sp-footer)
   ========================================================================== */


   /* Domyślnie ukryj francuski copyright */
   .copyright-fr {
     display: none !important;
   }

   /* Gdy strona jest w języku francuskim (:lang(fr)), zamień widoczność */
   :lang(fr) .copyright-en {
     display: none !important;
   }
   :lang(fr) .copyright-fr {
     display: inline !important;
   }

/* Main Bottom Container */
#sp-section-10,
#sp-bottom-2 {
  background-color: #000000 !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 40px 0 0 0 !important;
  border: none !important;
}

/* Strictly enforce 1140px centered container */
#sp-section-10 .container,
#sp-section-10 .container-inner {
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
  border: none !important;
}

#sp-footer .container-inner {
  padding: 0;
  border-top: none !important;
}

/* Desktop Row Layout: Logo (left) + Menu (center/expand) + Social (right) */
@media (min-width: 992px) {
  #sp-section-10 .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 1. Chemcraft Logo Column (left edge) */
  #sp-bottom2 {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Menu Navigation Column - DAJEMY WIĘCEJ MIEJSCA DLA FRANCUSKICH TREŚCI */
  #sp-bottom3 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 830px !important; /* Zwiększone z 740px na 830px */
    padding: 0 15px 0 35px !important;
    margin: 0 !important;
  }

  /* 3. Social Media Column (prawa strona) */
  #sp-bottom4 {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
}

/* Chemcraft Footer Logo */
#sp-bottom2 img {
  max-width: 140px !important;
  height: auto !important;
  display: block;
}

/* --- REFACTORED 4-COLUMN FOOTER MENU --- */
.chemcraft-footer-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 4 kolumny o kontrolowanych proporcjach z minimalnym odstępem gap */
.footer-nav-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 20px !important; /* Gwarantuje, że kolumny NIGDY na siebie nie najdą */
}

/* Poszczególne szerokości kolumn dopasowane do francuskich tekstów */
.footer-nav-col {
  flex: 1 1 auto !important;
}

.footer-nav-col:nth-child(1) {
  flex: 0 0 120px !important; /* Notre marque */
}

.footer-nav-col:nth-child(2) {
  flex: 0 0 185px !important; /* Produits */
}

.footer-nav-col:nth-child(3) {
  flex: 1 1 230px !important; /* Distributeurs (długie nazwy portali) */
}

.footer-nav-col:nth-child(4) {
  flex: 1 1 220px !important; /* Utilisation */
}

/* Column Header Titles */
.footer-nav-title {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.footer-nav-title a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 24px !important;
  display: inline-block !important;
}

/* Navigation Lists - ELASTYCZNA WYSOKOŚĆ I NATURALNE ŁAMANIE LINII */
.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-nav-list li {
  padding: 0 !important;
  min-height: 24px !important;
  height: auto !important; /* Usunięto sztywne height: 24px */
  margin-bottom: 5px !important;
  display: flex !important;
  align-items: flex-start !important;
}

.footer-nav-list li a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 19px !important; /* Wygodny interlinia przy 2 liniach */
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: normal !important; /* KLUCZOWE: pozwalamy długim frazom przejść do 2. linii */
  word-break: normal !important;
  display: inline-block !important;
  transition: color 0.2s ease;
}

.footer-nav-list li a:hover {
  color: #00A94F !important;
}

.footer-nav-list li a.bold-link {
  font-weight: 700 !important;
}

/* --- BOTTOM LEGAL LINKS ROW (Cookies, Privacy, Sitemap) --- */
.footer-legal-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 15px !important;
  width: 100% !important;
  margin-top: 30px !important;
  padding-bottom: 22px !important;
  box-sizing: border-box !important;
}

.footer-legal-row a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease;
}

.footer-legal-row a:hover {
  color: #00A94F !important;
}

/* --- SOCIAL MEDIA ICONS --- */
#sp-bottom4 .sp-column,
#sp-bottom4 .sp-module,
#sp-bottom4 .sp-module-content,
#sp-bottom4 .mod-custom {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

p.social-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

p.social-footer a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
}

p.social-footer a:hover {
  opacity: 0.85 !important;
}

p.social-footer img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- COPYRIGHT BAR (sp-footer) & WHITE LINE --- */
footer#sp-footer {
  background-color: #000000 !important;
  padding: 0 0 25px 0 !important;
  position: relative !important;
  z-index: 10 !important;
  border-top: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

footer#sp-footer .container {
  border-top: 1px solid #ffffff !important;
  padding-top: 18px !important;
  margin-top: 0 !important;
  padding-left: 0;
}

footer#sp-footer .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  width: 100% !important;
}

#sp-footer1 {
  flex: 1 1 auto !important;
  max-width: calc(100% - 160px) !important;
  text-align: left !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

span.sp-copyright {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  line-height: 24px !important;
  color: #fff !important;
  display: block !important;
  white-space: nowrap !important;
}

#sp-footer2 {
  flex: 0 0 150px !important;
  max-width: 150px !important;
  width: 150px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

#sp-footer2 img {
  max-height: 24px !important;
  width: auto !important;
  display: block !important;
}

/* ==========================================================================
   POPRAWKA STOPKI NA MOBILE (< 992px)
   ========================================================================== */
   /* ==========================================================================
      12. FOOTER & BOTTOM NAVIGATION - MOBILE & TABLET (< 992px)
      ========================================================================== */
   @media (max-width: 991.98px) {

     /* --- 1. KONTENERY GŁÓWNE STOPKI (#sp-section-10) --- */
     #sp-section-10 {
       padding: 30px 0 0 0 !important;
     }

     #sp-section-10 .row {
       display: flex !important;
       flex-direction: column !important;
       margin: 0 !important;
       width: 100% !important;
     }

     #sp-bottom2,
     #sp-bottom3,
     #sp-bottom4 {
       width: 100% !important;
       max-width: 100% !important;
       flex: none !important;
       padding: 0 !important;
       margin: 0 !important;
     }

     /* Logo Chemcraft na samej górze */
     #sp-bottom2 {
       margin-bottom: 25px !important;
     }

     #sp-bottom2 img {
       max-width: 150px !important;
       height: auto !important;
       display: block !important;
     }

     /* --- 2. MENU NAWIGACYJNE - LIKWIDACJA NAŁOŻEŃ I GIGANTYCZNYCH DZIUR --- */
     .chemcraft-footer-wrap {
       width: 100% !important;
       height: auto !important;
       display: flex !important;
       flex-direction: column !important;
     }

     .footer-nav-grid {
       display: flex !important;
       flex-direction: column !important;
       justify-content: flex-start !important;
       align-items: flex-start !important;
       gap: 25px !important;                  /* Stały, równy odstęp między sekcjami */
       width: 100% !important;
       height: auto !important;
       min-height: 0 !important;
       margin: 0 !important;
       padding: 0 !important;
     }

     /* Resetowanie flex-basis dla wszystkich :nth-child (usunięcie sztywnych wysokości z desktopu) */
     .footer-nav-col,
     .footer-nav-col:nth-child(1),
     .footer-nav-col:nth-child(2),
     .footer-nav-col:nth-child(3),
     .footer-nav-col:nth-child(4) {
       flex: 0 0 auto !important;
       width: 100% !important;
       max-width: 100% !important;
       height: auto !important;
       min-height: 0 !important;
       margin: 0 !important;
       padding: 0 !important;
     }

     /* Tytuły kolumn (About our brand, Products, Distributors, Using our products) */
     .footer-nav-title {
       margin: 0 0 8px 0 !important;
       padding: 0 !important;
       line-height: 1 !important;
     }

     .footer-nav-title a {
       font-size: 15px !important;
       line-height: 22px !important;
       font-weight: 700 !important;
     }

     /* Listy linków */
     .footer-nav-list {
       list-style: none !important;
       margin: 0 !important;
       padding: 0 !important;
     }

     .footer-nav-list li {
       margin: 0 0 6px 0 !important;
       padding: 0 !important;
       height: auto !important;
       min-height: auto !important;
       display: block !important;
     }

     .footer-nav-list li a {
       font-size: 14px !important;
       line-height: 20px !important;
       display: inline-block !important;
     }

     /* --- 3. DOLNE LINKI PRAWNE (COOKIES, SITEMAP) --- */
     .footer-legal-row {
       display: flex !important;
       flex-direction: column !important;
       align-items: flex-start !important;
       justify-content: flex-start !important;
       gap: 12px !important;
       width: 100% !important;
       margin-top: 30px !important;
       margin-bottom: 25px !important;
       padding: 0 !important;
       box-sizing: border-box !important;
     }

     .footer-legal-row a {
       font-size: 14px !important;
       line-height: 20px !important;
       display: inline-block !important;
     }

     /* --- 4. IKONY SOCIAL MEDIA --- */
     p.social-footer {
       display: flex !important;
       flex-direction: row !important;
       justify-content: flex-start !important; /* Wyrównanie do lewej */
       align-items: center !important;
       gap: 10px !important;
       width: 100% !important;
       margin: 0 0 25px 0 !important;
       padding: 0 !important;
     }

     p.social-footer a {
       width: 44px !important;
       height: 44px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
     }

     /* --- 5. BIAŁA LINIA, COPYRIGHT I LOGO AKZONOBEL (footer#sp-footer) --- */
     footer#sp-footer {
       padding: 0 0 35px 0 !important;
       margin: 0 !important;
       background-color: #000000 !important;
     }

     footer#sp-footer .container {
       border-top: 1px solid #ffffff !important;
       padding-top: 20px !important;
       padding-left: 15px !important;
       padding-right: 15px !important;
       margin: 0 auto !important;
     }

     /* Wymuszenie pionowego ułożenia: Copyright na górze, AkzoNobel pod nim */
     footer#sp-footer .row {
       display: flex !important;
       flex-direction: column !important;
       align-items: flex-start !important;
       justify-content: flex-start !important;
       gap: 18px !important;
       margin: 0 !important;
       width: 100% !important;
     }

     /* Tekst Copyright (100% szerokości, wyrównany do lewej) */
     footer#sp-footer #sp-footer1,
     #sp-footer1 {
       width: 100% !important;
       max-width: 100% !important;
       flex: 0 0 100% !important;
       text-align: left !important;
       padding: 0 !important;
       margin: 0 !important;
     }

     span.sp-copyright {
       white-space: normal !important;
       font-size: 13px !important;
       line-height: 20px !important;
       color: #ffffff !important;
       display: block !important;
       text-align: left !important;
     }

     /* Logo AkzoNobel (pod tekstem, wyrównane do lewej) */
     footer#sp-footer #sp-footer2,
     #sp-footer2 {
       width: 100% !important;
       max-width: 100% !important;
       flex: 0 0 100% !important;
       display: flex !important;
       justify-content: flex-start !important; /* Wyrównanie do lewej */
       align-items: center !important;
       padding: 0 !important;
       margin: 0 !important;
     }

     footer#sp-footer #sp-footer2 img,
     #sp-footer2 img {
       max-height: 32px !important;            /* Większe, wyraźne logo AkzoNobel */
       width: auto !important;
       display: block !important;
       margin: 0 !important;
     }
   }


/* ==========================================================================
   13. MEGAMENU BACKDROP DIM & BLUR EFFECT
   ========================================================================== */

@media (min-width: 992px) {
  /* Dimming & Blur Overlay Layer */
  body::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.65) !important; /* Darkness level */
    backdrop-filter: blur(5px) !important;            /* Blur intensity */
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 15 !important;                           /* Under header (20), above page content */
    pointer-events: none !important;                  /* Smooth cursor pass-through */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
  }

  /* Trigger overlay when hovering any dropdown menu item */
  body:has(#sp-section-2 .sp-megamenu-parent > li.sp-has-child.menu-justify:hover)::after,
  body:has(#sp-section-2 .menu-justify .sp-dropdown:hover)::after {
    opacity: 1 !important;
    visibility: visible !important;
  }
}




/* ==========================================================================
   14. SUBPAGE HERO HEADER & FULL-WIDTH UNBOXING (#sp-section-4 & #section-id-1640803076785)
   ========================================================================== */

/* --- 1. UNBOX HELIX CONTAINER: Force Section 4 to 100% Full Viewport Width --- */
#sp-section-4,
#sp-section-4 > .container,
#sp-section-4 .container-inner,
#sp-section-4 .row,
#sp-section-4 #sp-pagebuilder-full-width,
#sp-section-4 .sp-column {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- 2. HERO BANNER BACKGROUND IMAGE (100% Screen Width, Edge-to-Edge) --- */
#section-id-1640803076785 {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  min-height: 400px !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 260px !important;           /* Space for overlapping green card into white body */
  overflow: visible !important;
  padding: 0 !important;
}

/* Green Box Container: Anchored absolutely to the bottom edge of the photo */
#section-id-1640803076785 .sppb-container-inner {
  position: absolute !important;
  bottom: -220px !important;                 /* Overhangs 60px into the main white content */
  top: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
}

#section-id-1640803076785 .sppb-row {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  min-height: 400px;
}

/* --- 3. FULL-BLEED GREEN CARD (Flushes with absolute left screen edge) --- */
@media (min-width: 992px) {
  #column-wrap-id-1640803076784,
  #section-id-1640803076785 .sppb-col-md-6:first-child {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
    background-color: #00A94F !important;
    position: relative !important;
    padding: 40px 40px 45px calc(max(40px, (100vw - 1140px) / 2 + 15px)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #column-id-1640803076784,
  #column-id-1640803076784 .sppb-column-addons {
    position: static !important;
  }
}

/* --- 4. BLACK "BACK" BUTTON (Pinned to top-left 0,0 of green block) --- */
#section-id-1640803076785 #sppb-addon-wrapper-1640806091141,
#section-id-1640803076785 #sppb-addon-1640806091141,
#section-id-1640803076785 .sppb-positioned-addon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 20 !important;
  width: auto !important;
  height: auto !important;
}

#section-id-1640803076785 a.back-button,
#section-id-1640803076785 #btn-1640806091141 {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 35px !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

#section-id-1640803076785 a.back-button:hover,
#btn-1640806091141:hover {
  background-color: #222222 !important;
  color: #ffffff !important;
}

/* --- 5. BREADCRUMBS INSIDE HERO BANNER --- */
#section-id-1640803076785 #sppb-addon-wrapper-1681905493204,
#section-id-1640803076785 .breadcrumb-pb {
  margin: 15px 0 0 0;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

#section-id-1640803076785 .breadcrumb,
#section-id-1640803076785 .mod-breadcrumbs {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 16px !important;
}

#section-id-1640803076785 .breadcrumb li,
#section-id-1640803076785 .breadcrumb a,
#section-id-1640803076785 .breadcrumb span,
#section-id-1640803076785 .breadcrumb-item {
  color: #ffffff !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

#section-id-1640803076785 .breadcrumb a:hover {
  text-decoration: underline !important;
}

/* Hide location pin icon in breadcrumbs */
#section-id-1640803076785 .mod-breadcrumbs__divider,
#section-id-1640803076785 span.divider,
#section-id-1640803076785 .icon-location,
#section-id-1640803076785 .breadcrumb li:first-child::before,
#section-id-1640803076785 .breadcrumb-item:first-child::before {
  display: none !important;
  content: "" !important;
}

#section-id-1640803076785 .breadcrumb-item + .breadcrumb-item::before {
  content: ">" !important;
  color: #ffffff !important;
  padding: 0 6px !important;
  opacity: 0.9 !important;
}

/* --- 6. TITLE & SUBTITLE IN GREEN CARD --- */
/* DEFAULT*/

/* --- 7. RESET SP-MAIN-BODY PADDING (Fix for legacy inline style conflict) --- */

#sp-component {
  margin-top: 0 !important;
}

/* --- 8. MOBILE & TABLET (< 992px) - SUBPAGE HERO & BREADCRUMBS --- */
@media (max-width: 991.98px) {

  /* 1. Mobile Find a Distributor Bar */
  #find-distributor-box {
    position: relative !important;
    width: 100% !important;
    right: 0 !important;
    top: 0 !important;
    height: 65px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Hide "Search now" link on mobile */
  #find-distributor-box a.search-now,
  #find-distributor-box .search-now {
    display: none !important;
  }

  #find-distributor-box p {
    margin: 0 !important;
    line-height: 1 !important;
  }

  #find-distributor-box p strong a {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  #dis-plus {
    position: static !important;
    line-height: 1 !important;
  }

  #dis-plus a {
    color: #ffffff !important;
    font-size: 70px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: block !important;
  }

  /* 2. Mobile Hero Photo Section */
  #section-id-1640868694713 {
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: 70% center !important; /* Centers craftsman in frame */
    background-repeat: no-repeat !important;
  }

  /* 3. Green Subpage Header Block */
  #section-id-1640868694662 {
    background-color: #00A94F !important;
    padding: 25px 20px 35px 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #section-id-1640868694662 .sppb-container-inner,
  #section-id-1640868694662 .sppb-row,
  #section-id-1640868694662 #column-wrap-id-1640868694661,
  #section-id-1640868694662 #column-id-1640868694661 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Breadcrumbs inside Green Box (Clean transparent layout) */
  #sppb-addon-wrapper-1681754879781 {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  .breadcrumb.breadcrumb-mobile,
  #section-id-1640868694662 .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Hide location pin icon */
  .breadcrumb.breadcrumb-mobile .mod-breadcrumbs__divider,
  .breadcrumb.breadcrumb-mobile .icon-location,
  .breadcrumb.breadcrumb-mobile .divider,
  #section-id-1640868694662 .icon-location {
    display: none !important;
  }

  /* Breadcrumb text & link styling */
  .breadcrumb.breadcrumb-mobile li,
  .breadcrumb.breadcrumb-mobile a,
  .breadcrumb.breadcrumb-mobile span {
    color: #ffffff !important;
    font-size: 14px !important;
    text-decoration: none !important;
  }

  .breadcrumb.breadcrumb-mobile a:hover {
    text-decoration: underline !important;
  }

  /* Breadcrumbs separator (>) */
  .breadcrumb.breadcrumb-mobile .breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    color: #ffffff !important;
    padding: 0 8px !important;
    opacity: 0.9 !important;
  }

  /* 5. Main Title & Subtitle in Green Box */
  #sppb-addon-wrapper-1640868694666 {
    margin: 0 !important;
    padding: 0 !important;
  }

  #sppb-addon-1640868694666 .sppb-addon-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px;
    line-height: 40px;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }

  #sppb-addon-1640868694666 .sppb-addon-content,
  #sppb-addon-1640868694666 .sppb-addon-content p {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #sppb-addon-1640868694666 {
    padding-left: 0px !important;
  }
}
/* ==========================================================================
   14.8. MOBILE CATEGORY HEADER REFINEMENT (< 992px)
   Strictly scoped with .category-header to prevent bleeding into .view-article
   ========================================================================== */
@media (max-width: 991.98px) {

  /* 1. Reset main section - remove desktop background and spacing */
  .category-header#section-id-1640803076785,
  #section-id-1640803076785.category-header {
    background: none !important;
    background-image: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .category-header#section-id-1640803076785::before {
    display: none !important;
  }

  .category-header#section-id-1640803076785 .sppb-container-inner,
  .category-header#section-id-1640803076785 .sppb-row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }

  /* 2. Top image container (sppb-order-xs-1) */
  .category-header #column-wrap-id-1640803076796 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  .category-header #column-wrap-id-1640803076796 #sppb-addon-wrapper-1657831420557,
  .category-header #column-wrap-id-1640803076796 .sppb-addon-single-image,
  .category-header #column-wrap-id-1640803076796 .sppb-addon-single-image-container {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .category-header #column-wrap-id-1640803076796 img.sppb-img-responsive {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 3. Solid green card column (sppb-order-xs-2) */
  .category-header #column-wrap-id-1640803076784 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    background-color: #00A94F !important;
    padding: 24px 20px 35px 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .category-header #column-id-1640803076784,
  .category-header #column-id-1640803076784 .sppb-column-addons {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    /*display: flex !important;*/
    flex-direction: column !important;
  }

  /* 4. Completely hide desktop "Back" button on mobile category view */
  .category-header #section-id-1640803076785 #sppb-addon-wrapper-1640806091141,
  .category-header #section-id-1640803076785 .back-button,
  .category-header #section-id-1640803076785 #btn-1640806091141 {
    display: none !important;
  }

  /* 5. Clean Breadcrumbs layout: "Home > Products > Category" */
  .category-header #sppb-addon-wrapper-1681758142496,
  .category-header .breadcrumb-pb {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .category-header .addon-root-image {
    margin-bottom: 0 !important;
}

  .category-header .mod-breadcrumbs,
  .category-header .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Hide Joomla 5 location pin icon and divider */
  .category-header .mod-breadcrumbs__divider,
  .category-header .icon-location,
  .category-header .divider {
    display: none !important;
  }

  .category-header .breadcrumb-item,
  .category-header .breadcrumb-item a,
  .category-header .breadcrumb-item span {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-decoration: none !important;
  }

  .category-header .breadcrumb-item a:hover {
    text-decoration: underline !important;
  }

  .category-header .breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    color: #ffffff !important;
    padding: 0 8px !important;
    opacity: 0.9 !important;
  }

  /* 6. Title and description inside green card */
  .category-header #sppb-addon-wrapper-1640805574729 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .category-header #sppb-addon-1640805574729 h1.sppb-addon-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    text-align: left !important;
    text-transform: none !important;
  }

  .category-header #sppb-addon-1640805574729 .sppb-addon-content {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400 ;
    margin: 0 !important;
    text-align: left !important;
  }
}


/* ==========================================================================
   15. GLOBAL SINGLE IMAGE HOVER ZOOM EFFECT (.sppb-addon-single-image-container)
   ========================================================================== */

/* Image container with hidden overflow */
.sppb-addon-single-image-container {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Base image styling & smooth transition */
.sppb-addon-single-image-container img {
  max-width: 100% !important;
  height: auto !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover Zoom Effect */
.sppb-addon-single-image-container:hover img,
.sppb-addon-wrapper:hover .sppb-addon-single-image-container img,
.sppb-addon-single-image:hover .sppb-addon-single-image-container img {
  transform: scale(1.08) !important;
}

/* ==========================================================================
   16. SINGLE PRODUCT PAGE (Karta Produktu - Locked Photo & Natural Expanding)
   ========================================================================== */

/* --- 1. UNIVERSAL MULTI-LANGUAGE FILTER --- */
html:not([lang*="fr" i]) .fr,
html:not([lang*="fr" i]) a.fr,
html:not([lang*="fr" i]) span.fr,
html:not([lang*="fr" i]) .product-recomennder.fr,
.en-gb .fr, .en-us .fr, .en .fr {
  display: none !important;
}

html[lang*="fr" i] .en,
html[lang*="fr" i] a.en,
html[lang*="fr" i] span.en,
html[lang*="fr" i] .product-recomennder.en,
.fr-fr .en, .fr-ca .en, .fr .en {
  display: none !important;
}

/* --- 2. HIDE RAW JOOMLA CUSTOM FIELDS & LEAKING SCRIPTS --- */
.view-article .article-details > .fields-container,
.view-article .article-details > ul.fields-container,
.view-article .article-details > dl.fields-container,
.view-article .entry-header.has-post-format,
.view-article .article-can-edit,
.view-article .article-ratings-social-share,
.view-article .sp-social-share,
#sppb-addon-wrapper-1691433693854,
#mod-custom250,
#mod-custom250 p {
  display: none !important;
}

/* --- 3. FULL-WIDTH ARTICLE WRAPPER & WHITE BODY BACKGROUND --- */
.view-article #sp-main-body {
  padding: 0 !important;
  background-color: #ffffff !important;
}

.view-article #sp-main-body > .container,
.view-article #sp-main-body .container-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- 4. PRODUCT HERO BANNER (Fixed 480px Photo Layer + Expanding Green Card) --- */
.view-article #section-id-1655040932040 {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero Section Container */
#section-id-1640803076785.product-header,
.view-article #section-id-1640803076785 {
  position: relative !important;
  min-height: 480px !important;
  background-size: 0 0 !important; /* Hide on parent to let ::before handle the locked photo */
  background-repeat: no-repeat !important;
  margin-bottom: 40px !important;
  overflow: visible !important;
  display: block !important;
}


.view-article #sppb-addon-1640805574729 .sppb-addon-text-block .sppb-addon-content h1
{
  font-weight: 700;
}

/* FIXED PHOTO LAYER: Always 480px, perfectly framed, never stretches */
#section-id-1640803076785.product-header::before,
.view-article #section-id-1640803076785::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 480px !important; /* Fixed photo height */
  background-image: inherit !important; /* Takes background image from SPPB */
  background-size: cover !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Container in natural document flow */
#section-id-1640803076785.product-header .sppb-container-inner,
.view-article #section-id-1640803076785 .sppb-container-inner {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 330px !important; /* Leaves top 220px of photo visible */
  z-index: 10 !important;
}

/* Outer Green Box Column (52% Desktop Width) */
@media (min-width: 992px) {
  .view-article #column-wrap-id-1640803076784,
  .view-article #section-id-1640803076785 .sppb-col-md-6:first-child {
    flex: 0 0 52% !important;
    max-width: 52% !important;
    width: 52% !important;
    background-color: #00A94F !important;
    position: relative !important;
    padding: 40px 40px 45px calc(max(40px, (100vw - 1140px) / 2 + 15px)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    margin: 0 !important;
    box-sizing: border-box !important;
    height: auto !important; /* Grows naturally on Read More */
  }

  .view-article #column-id-1640803076784,
  .view-article #column-id-1640803076784.greenbox-product {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Flex Column to keep Breadcrumbs on TOP of the title */
  .view-article #column-id-1640803076784 .sppb-column-addons {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 1. Breadcrumbs ON TOP */
  .view-article #sppb-addon-wrapper-1681651251334 {
    order: 1 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* 2. Text Block BELOW Breadcrumbs */
  .view-article #sppb-addon-wrapper-1640805574729 {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .view-article #sppb-addon-1640805574729 {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
  }
}

/* Black BACK Button */
.view-article #section-id-1640803076785 #sppb-addon-wrapper-1640806091141,
.view-article #section-id-1640803076785 #sppb-addon-1640806091141,
.view-article #section-id-1640803076785 .sppb-positioned-addon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 20 !important;
  width: auto !important;
}

.view-article #section-id-1640803076785 a.back-button,
.view-article #section-id-1640803076785 #btn-1640806091141 {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 15px 40px !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* Product Breadcrumbs inside Green Box */
.view-article #section-id-1640803076785 .breadcrumb,
.view-article #section-id-1640803076785 .mod-breadcrumbs,
.view-article #section-id-1640803076785 .mod-breadcrumbs__wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
}

.view-article #section-id-1640803076785 .breadcrumb li,
.view-article #section-id-1640803076785 .breadcrumb a,
.view-article #section-id-1640803076785 .mod-breadcrumbs a,
.view-article #section-id-1640803076785 .mod-breadcrumbs span,
.view-article #section-id-1640803076785 .breadcrumb-item,
.view-article #section-id-1640803076785 .mod-breadcrumbs__item {
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.view-article #section-id-1640803076785 .breadcrumb a:hover,
.view-article #section-id-1640803076785 .mod-breadcrumbs a:hover {
  text-decoration: underline !important;
}

/* Hide location pin icon */
.view-article #section-id-1640803076785 .mod-breadcrumbs__divider,
.view-article #section-id-1640803076785 span.divider,
.view-article #section-id-1640803076785 .icon-location,
.view-article #section-id-1640803076785 .breadcrumb-item:first-child::before,
.view-article #section-id-1640803076785 .mod-breadcrumbs__item:first-child::before,
.view-article #section-id-1640803076785 .breadcrumb li:first-child::before {
  display: none !important;
  content: "" !important;
}

.view-article #section-id-1640803076785 .breadcrumb-item + .breadcrumb-item::before,
.view-article #section-id-1640803076785 .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  content: ">" !important;
  color: #ffffff !important;
  padding: 0 6px !important;
  opacity: 0.9 !important;
}

/* Product Main Title */
.view-article #section-id-1640803076785 h3.sppb-addon-title,
.view-article #section-id-1640803076785 h3.sppb-addon-title .field-value {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  display: block !important;
}


/* White "Find distributor" button */
.view-article .greenbox-product .fd1 a {
  background-color: #ffffff !important;
  color: #000 !important;
  padding: 8px 24px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  margin-bottom: 15px !important;
  transition: all 0.2s ease !important;
  line-height: 50px;
}

.view-article .greenbox-product .fd1 a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* STRICT OVERRIDES: French/English button filters */
html:not([lang*="fr" i]) .view-article .greenbox-product .fd1 a.fr,
.view-article .greenbox-product .fd1 a.fr {
  display: none !important;
}

html[lang*="fr" i] .view-article .greenbox-product .fd1 a.en,
html[lang*="fr" i] .view-article .fd1 a.en {
  display: none !important;
}

/* --- CLAMPED DESCRIPTION & EXPANDING "READ MORE" --- */
.greenbox-product .field-label,
#spec-desc-more .field-label {
  display: none !important;
}

.greenbox-product #spec-desc-more.hideContent,
.greenbox-product .hideContent {
  overflow: hidden !important;
  line-height: 24px !important;
  max-height: 5.5em !important; /* 3 lines clamped */
  font-size: 15px !important;
  color: #ffffff !important;
  margin: 0 !important;
  transition: max-height 0.4s ease-in-out !important;
}

/* Expands naturally without stretching the background image */
.greenbox-product #spec-desc-more.showContent,
.greenbox-product .showContent {
  max-height: 1200px !important;
  overflow: visible !important;
  transition: max-height 0.5s ease-in-out !important;
}

.greenbox-product .hideContent p,
.greenbox-product .showContent p {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 28px !important;
  margin: 0 !important;
}

.greenbox-product .read-more {
  color: #ffffff !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 28px;
  font-weight: 400 !important;
  text-decoration: underline !important;
  display: inline-block !important;
  margin-top: 8px !important;
  user-select: none;
}

.greenbox-product .read-more u {
  text-decoration: underline !important;
}

/* --- 5. MIDDLE SECTION: PRODUCT CODES & ACCORDION --- */
#section-id-1640804197603 {
  max-width: 1140px !important;
  margin: 0 auto 50px auto !important;
  padding: 0 15px !important;
}

/* Product Code Box */
#sppb-addon-wrapper-1655062721886 {
  margin-bottom: 25px !important;
}

#sppb-addon-1655062721886 strong {
  font-size: 18px !important;
  color: #000000 !important;
  display: block;
  margin-bottom: 8px;
}

#sppb-addon-1655062721886 .field-label {
  display: none !important;
}

#sppb-addon-1655062721886 p {
  color: #333333 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  margin: 0 !important;
}

/* "Product information" Heading */
#sppb-addon-wrapper-1643569787589 p {
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
}

/* --- ACCORDION STYLING --- */
#sppb-addon-wrapper-1641325449368,
#sppb-addon-wrapper-IFmM5_Ng_ur1gMtE_ZXwp {
  margin-bottom: 30px !important;
}

/*#sppb-addon-1655062721886 br {
  display: none;
}*/

.view-article .sppb-panel.sppb-panel-custom {
  border-top: 1px solid #D5D5D5 !important;
  border-bottom: 1px solid #D5D5D5 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin-top: -1px !important;
  background: transparent !important;
}

.view-article .sppb-panel-heading {
  padding: 5px 0 !important;
  background: transparent !important;
  color: #000000 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: none !important;
  width: 100% !important;
}

.view-article .sppb-panel-title {
  color: #000000 !important;
  font-size: 18px !important;
  line-height: 24px;
  font-weight: 500 !important;
}

#column-wrap-id-1640804197602 #sppb-addon-1641326060229,
#column-wrap-id-1640804197602 #sppb-addon-1642107711726,
#column-wrap-id-1640804197602 #sppb-addon-1642107718801
 {
  padding: 0 !important;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400 !important;
  color: #333 !important;
}

.view-article #sppb-addon-1642107711726 .field-label {
  display: none;
}

#sppb-addon-1641326060229 {
  padding: 0 !important;
}

/* Green Accordion Plus Icon */
.view-article .sppb-accordion-icon-wrap {
  color: #00A94F !important;
  font-size: 16px !important;
  order: 2 !important;
}

.view-article .sppb-accordion-icon-wrap i.fas.fa-plus {
  transition: transform 0.3s ease-in-out !important;
  display: inline-block !important;
}

/* Rotates + into an X when open */
.view-article .sppb-panel-heading.active i.fas.fa-plus,
.view-article .active .sppb-accordion-icon-wrap i.fas.fa-plus {
  transform: rotate(45deg) !important;
}

/* Accordion Body & Key-Value Data Alignment (50% / 50%) */
.view-article .sppb-panel-body {
  padding: 0 0 25px 0 !important;
  background: #ffffff !important;
  border: none !important;
}

.view-article .sppb-panel-body .fields-container {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.view-article .sppb-panel-body .field-entry {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 16px !important;
  line-height: 24px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #f2f2f2;
}

.view-article .sppb-panel-body .field-label {
  min-width: 50% !important;
  max-width: 50% !important;
  font-weight: 500 !important;
  color: #333333 !important;
}

.view-article .sppb-panel-body .field-value {
  width: 50% !important;
  color: #333333 !important;
}

.view-article .sppb-panel-body .field-value p {
  color: #333333 !important;
  margin: 0 !important;
}

.view-article .sppb-panel-body #sppb-addon-1641326060229 .field-label,
.view-article .sppb-panel-body #sppb-addon-1642107718801 .field-label
{
 display: none !important;
}


/* Blue "Find distributor" button below accordion */
.view-article .fd2 a {
  background-color: #005596 !important;
  color: #ffffff !important;
  padding: 18px 32px !important;
  display: inline-block !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-top: 10px !important;
  margin-bottom: 30px !important;
  transition: background-color 0.2s ease !important;
}

.view-article .fd2 a:hover {
  background-color: #00457a !important;
}

/* --- 6. PIS PDF DOWNLOAD BOX (DESKTOP: OBOK SIEBIE) --- */
#sppb-addon-wrapper-1643569821980 p {
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
}

/* 1. Bezwzględny zakaz łamania do nowej linii (flex-wrap: nowrap) */
#section-id-1642113943357 .sppb-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;               /* KLUCZ: zakazuje zrzucania niebieskiego boksu pod spód */
  align-items: stretch !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 500px !important;
}

/* 2. Lewa kolumna: zabiera DOKŁADNIE tyle miejsca, ile zostaje obok 96px */
#column-wrap-id-1642113943358 {
  flex: 1 1 auto !important;
  width: calc(100% - 96px) !important;        /* KLUCZ: kasuje nadmiarowe 83.3% z sppb-col-md-10 */
  max-width: calc(100% - 96px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Prawa kolumna: sztywne 96px przyklejone do prawej krawędzi */
#column-wrap-id-1642113943441 {
  flex: 0 0 96px !important;
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. Kasowanie dolnych marginesów SPPB z wnętrza obu kolumn */
#sppb-addon-wrapper-1642116004432 {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#sppb-addon-wrapper-1642116149641 {
  margin: 0 !important;
  width: 96px !important;
  height: 96px !important;
}

/* Biały boks po lewej */
#sppb-addon-1642116004432 {
  height: 96px !important;
  min-height: 96px !important;
  width: 100% !important;
  padding: 0 25px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #d5d5d5 !important;
  border-right: none !important;              /* Brak prawej ramki – skleja się z niebieskim kwadratem */
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

#sppb-addon-1642116004432 .field-label {
  display: none !important;
}

#sppb-addon-1642116004432 .field-value a {
  color: #005596 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#sppb-addon-1642116004432 .field-value a:hover {
  text-decoration: underline !important;
}

/* Niebieski kwadrat po prawej */
#sppb-addon-1642116149641,
#sppb-addon-1642116149641 .sppb-icon {
  width: 96px !important;
  height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sppb-addon-1642116149641 .sppb-icon-inner {
  height: 96px !important;
  width: 96px !important;
  background-color: #005596 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

#sppb-addon-1642116149641 .sppb-icon-inner i {
  font-size: 32px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}
/* --- 7. RIGHT COLUMN: PRODUCT RECOMMENDER CARD --- */
.product-recomender-column {
  position: relative !important;
}

.product-recomender-column .sppb-addon-single-image {
  margin: 0 !important;
}

.product-recomender-column .sppb-addon-single-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Black Recommender Card */
.product-recomennder {
  background-color: #000000 !important;
  padding: 25px 20px !important;
  position: relative !important;
  margin-top: -60px !important;
  z-index: 5 !important;
}

.product-recomennder h3.sppb-image-layout-title p {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 28px;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}


.product-recomennder img {
  height: auto !important;
  display: block;
  min-width: 275px !important;
  position: absolute;
  bottom: -140px;
  left: -60px;
}

#sppb-addon-1642112541596 {
  padding-bottom: 0;
}
#sppb-addon-wrapper-1721311645037 {
  display: none;
}

/* Disclaimer text blocks */
#sppb-addon-wrapper-1643569669843 p,
#sppb-addon-wrapper-1643569879586 p {
  font-size: 12px !important;
  line-height: 20px !important;
  color: #333 !important;
}

.view-article .sp-page-builder .page-content #section-id-1643292017298 {
  margin-bottom: 29px !important;
}

/* --- 8. MOBILE RESPONSIVENESS FOR PRODUCT PAGE (< 992px) --- */

@media (max-width: 991.98px) {

  .view-article .sp-page-builder .page-content #section-id-1643292017298 {
    margin-bottom: 0 !important;
  }

  /* 1. Header Section: 100% width, ZERO zoom, no fridge-only cropping */
  #section-id-1640803076785.product-header,
  .view-article #section-id-1640803076785 {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    margin-top: 65px !important; /* Clears the 65px high "Find a distributor" bar */
    margin-bottom: 25px !important; /* Overrides inline margin-bottom: 416px */
    overflow: visible !important;
    display: block !important;
    background-size: 175% auto !important; /* CRITICAL: 100% width, zero zoom */
    background-position: center top !important; /* Starts at top showing the full kitchen */
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    padding: 0 !important;
  }


  #sppb-addon-1640805574729 .sppb-addon-content br{
    display: none;
  }

  /* Disable ::before layer */
  #section-id-1640803076785::before,
  .view-article #section-id-1640803076785::before {
    display: none !important;
  }

  /* 2. Controls visible photo height (190px reveals island, stools & counter) */
  #section-id-1640803076785 .sppb-container-inner,
  .view-article #section-id-1640803076785 .sppb-container-inner {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 135px 0 0 0 !important; /* Photo height preview */
    margin: 0 !important;
    z-index: 10 !important;
  }

  /* Reset inner row padding */
  #section-id-1640803076785 .sppb-row,
  .view-article #section-id-1640803076785 .sppb-row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 3. Full-bleed Green Card */
  .view-article #column-wrap-id-1640803076784 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .view-article .greenbox-product {
    width: 100% !important;
    background-color: #00A94F !important;
    padding: 22px 20px 35px 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Remove nested backgrounds from inner text blocks */
  .view-article #sppb-addon-wrapper-1640805574729,
  .view-article #sppb-addon-1640805574729,
  .view-article #sppb-addon-1640805574729 .sppb-addon-text-block {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Flex column to order: 1. Breadcrumbs -> 2. Title & Content */
  .view-article #column-id-1640803076784 .sppb-column-addons {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5. HIDE BACK button completely on mobile */
  .view-article #section-id-1640803076785 #sppb-addon-wrapper-1640806091141,
  .view-article #section-id-1640803076785 a.back-button,
  .view-article .back-button {
    display: none !important;
  }

  /* 6. Breadcrumbs at the VERY TOP of the green card */
  .view-article #section-id-1640803076785 #sppb-addon-wrapper-1681651251334 {
    order: 1 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  .view-article #section-id-1640803076785 .breadcrumb,
  .view-article #section-id-1640803076785 .mod-breadcrumbs {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .view-article #section-id-1640803076785 .icon-location,
  .view-article #section-id-1640803076785 .mod-breadcrumbs__divider {
    display: none !important;
  }

  .view-article #section-id-1640803076785 .breadcrumb li,
  .view-article #section-id-1640803076785 .breadcrumb a,
  .view-article #section-id-1640803076785 .breadcrumb span {
    color: #ffffff !important;
    font-size: 13px !important;
    text-decoration: none !important;
  }

  .view-article #section-id-1640803076785 .breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    color: #ffffff !important;
    padding: 0 6px !important;
  }

  /* 7. Product Title & Content directly BELOW breadcrumbs */
  .view-article #section-id-1640803076785 #sppb-addon-wrapper-1640805574729 {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Title */
  .view-article #section-id-1640803076785 h3.sppb-addon-title {
    font-size: 30px !important;
    line-height: 34px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* Product code */
  .view-article #section-id-1640803076785 .sppb-addon-content h1 {
    font-size: 17px !important;
    line-height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    opacity: 0.95;
  }

  /* Find distributor button */
  .view-article .greenbox-product .fd1 a {
    display: none !important;
  }

  /* Clean 3-line description without sliced letters */
  .greenbox-product #spec-desc-more.hideContent {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: none !important;
    line-height: 22px !important;
    font-size: 14px !important;
    color: #ffffff !important;
  }

  .greenbox-product .read-more {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 28px;
    font-weight: 400 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    display: inline-block !important;
  }

  /* --- POPRAWKA KARTY REKOMENDACJI (PUSZKA NA GÓRZE, TEKST NA DOLE) --- */

    /* 1. Reset karty: czarne tło i wyłączenie przesunięcia top: -40px z SPPB */
    #sppb-addon-wrapper-1642112541596,
    #sppb-addon-1642112541596 {
      position: static !important;
      top: auto !important;
      padding: 0 !important;
    }

    /*section#section-id-1640804197603, section#section-id-1640804197603 .sppb-row-container {
    padding: 0 !important;
    width: 100%;
}*/


#sppb-addon-wrapper-1642112670168 {
    margin-bottom: 0px !important;
}


    .product-recomennder {
      background-color: #000000 !important;
      padding: 30px 20px 35px 20px !important;
      position: relative !important;
      margin: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* 2. Układ pionowy wiersza */
    .product-recomennder .sppb-row {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      margin: 0 !important;
      width: 100% !important;
    }

    /* 3. Puszka z farbą NA GÓRZE (order: 1) i wyśrodkowana */
    .product-recomennder .sppb-row > div:first-child,
    .product-recomennder .sppb-col-sm-4 {
      order: 1 !important;
      width: 100% !important;
      max-width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      margin-bottom: 25px !important;
      padding: 0 !important;
    }

    .product-recomennder .sppb-addon-image-layout-image {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      text-align: center !important;
      margin: 0 !important;
    }

    /* Wyłączenie position: absolute z desktopu (puszka stoi naturalnie w boksie) */
    .product-recomennder img,
    .product-recomennder .sppb-addon-image-layout-image img {
      position: static !important;
      bottom: auto !important;
      left: auto !important;
      min-width: 0 !important;
      display: block !important;
      margin: 0 auto !important;
    }


    /* 4. Tekst pod puszką NA DOLE (order: 2) i wyrównany do lewej */
    .product-recomennder .sppb-row > div:last-child,
    .product-recomennder .sppb-col-sm-8 {
      order: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      text-align: left !important;
    }

    .product-recomennder .sppb-addon-image-layout-content {
      padding: 0 !important;
      margin: 0 !important;
      text-align: left !important;
      background: transparent !important;
    }

    .product-recomennder h3.sppb-image-layout-title p,
    .product-recomennder h3.sppb-image-layout-title {
      font-size: 22px !important;
      line-height: 28px !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      margin-bottom: 12px !important;
      text-align: left !important;
    }

    .product-recomennder .sppb-addon-image-layout-text {
      font-size: 15px !important;
      line-height: 24px !important;
      color: #ffffff !important;
      text-align: left !important;
    }

  /* --- POPRAWKA BOKSU POBIERANIA PIS PDF (IKONA NA ŚRODKU) --- */

    /* 1. Ułożenie kolumn w pionie na 100% szerokości */
    #section-id-1642113943357 .sppb-row {
      flex-direction: column !important;
      width: 100% !important;
    }

    #column-wrap-id-1642113943358,
    #column-wrap-id-1642113943441 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* 2. Górny biały boks z linkiem (wyśrodkowany tekst, pełna ramka oprócz dołu) */
    #sppb-addon-1642116004432 {
      width: 100% !important;
      height: auto !important;
      min-height: 90px !important;
      padding: 18px 20px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      border: 1px solid #d5d5d5 !important;
      border-bottom: none !important;
      border-right: 1px solid #d5d5d5 !important;
      box-sizing: border-box !important;
    }

    #sppb-addon-1642116004432 .field-value,
    #sppb-addon-1642116004432 .field-value a {
      width: 100% !important;
      text-align: center !important;
      display: block !important;
    }

    /* 3. Dolny niebieski boks – pełna szerokość i ikona IDEALNIE NA ŚRODKU */
    #sppb-addon-wrapper-1642116149641 {
      width: 100% !important;
      margin: 0 0 25px 0 !important;
      padding: 0 !important;
    }

    #sppb-addon-1642116149641,
    #sppb-addon-1642116149641 .sppb-icon {
      width: 100% !important;
      height: 75px !important;
      background-color: #005596 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #sppb-addon-1642116149641 .sppb-icon-inner {
      width: 100% !important;
      height: 75px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background-color: transparent !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    #sppb-addon-1642116149641 .sppb-icon-inner i {
      font-size: 34px !important;
      line-height: 1 !important;
      color: #ffffff !important;
      margin: 0 auto !important;
      display: inline-block !important;
    }

  /* --- PODCIĄGNIĘCIE TREŚCI DO SAMEJ GÓRY ZIELONEGO BOKSU --- */

    /* 1. Reset zewnętrznego wrappera (usuwa desktopowy padding-top: 40px) */
    #section-id-1640803076785 #column-wrap-id-1640803076784,
    #column-wrap-id-1640803076784 {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    /* 2. Wyłączenie wyrównywania do dołu w wierszu SPPB */
    #section-id-1640803076785 .sppb-row,
    #section-id-1640803076785 .sppb-align-bottom {
      align-items: flex-start !important;
      min-height: auto !important;
    }

    /* 3. Podciągnięcie zielonego boksu i wymuszenie tylko 15px odstępu od góry */
    #section-id-1640803076785 #column-id-1640803076784,
    #column-id-1640803076784,
    .view-article .greenbox-product,
    .greenbox-product,
    #column-id-1640803076784 .sppb-column-addons,
    .greenbox-product .sppb-column-addons {
      justify-content: flex-start !important;
      align-items: flex-start !important;
      padding-top: 15px !important; /* Cała zawartość podjeżdża pod samą górną krawędź */
      min-height: auto !important;
      height: auto !important;
    }

    /* 4. Wyzerowanie paddingów w okruszkach chleba (Home > Products...) */
    #section-id-1640803076785 #sppb-addon-wrapper-1681651251334,
    #column-id-1640803076784 #sppb-addon-wrapper-1681651251334,
    .greenbox-product #sppb-addon-wrapper-1681651251334,
    #sppb-addon-1681651251334,
    .greenbox-product .breadcrumb-pb,
    .greenbox-product .mod-breadcrumbs {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

}

/* ==========================================================================
   17. DISTRIBUTOR LOCATOR & MAP (#locationlocator & com_mymaplocations)
   ========================================================================== */

/* --- 1. BREADCRUMBS: UKRYCIE IKONY PINEZKI PRZY HOME --- */
#sppb-addon-wrapper-1681905892258 .mod-breadcrumbs__divider,
#sppb-addon-wrapper-1681905892258 span.divider,
#sppb-addon-wrapper-1681905892258 .icon-location,
.itemid-174 .breadcrumb .icon-location,
.itemid-174 .mod-breadcrumbs__divider {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

#sppb-addon-wrapper-1681905892258 .breadcrumb,
#sppb-addon-wrapper-1681905892258 .mod-breadcrumbs {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}

#sppb-addon-wrapper-1681905892258 .breadcrumb a,
#sppb-addon-wrapper-1681905892258 .breadcrumb span {
  color: #ffffff !important;
  font-size: 14px !important;
}

body.itemid-174 li.mod-breadcrumbs__item.breadcrumb-item a,
body.itemid-174 li.mod-breadcrumbs__item.breadcrumb-item.active {
    color:#fff;
}

.breadcrumb {
  background-color: transparent;
}


/* --- 2. TŁO STRONY I RESET KONTENERÓW --- */
.itemid-174 #sp-main-body,
body:has(#locationlocator),
body:has(#map-location) {
  background-color: #005596 !important;
}

#locationlocator,
#locationlocator .innerLeft,
#locationlocator .innerRight,
#locationlocator .row-fluid,
#locationsearch_div,
#maps {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ukrycie niepotrzebnych kontenerów systemowych */
.mymap-group.span2,
.span1,
.separatorLoc,
button.mymap.mymap-primary,
button.mymap-success,
#noresult,
span.mytool,
.NavBar_MapTypeButtonContainerWrapper,
.gm-style-iw.gm-style-iw-c,
a.infobox-close,
.infobox-body,
#locationresult .field-label,
.field-label60,
.field-label24,
.field-label23,
.mCSB_scrollTools,
.mCSB_draggerContainer,
.mCSB_draggerRail,
.mCSB_dragger,
.mCSB_buttonUp,
.mCSB_buttonDown {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* --- 3. INPUT WYSZUKIWARKI: CAŁKOWITE USUNIĘCIE IKONY TŁA / PINEZKI --- */
#locationsearch_div {
  padding: 0 !important;
  margin: 0 0 25px 0 !important;
  width: 100% !important;
}

#locationlocator #locationsearch_div h2,
form#map-location h2 {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

#locationlocator #autosuggest {
  margin: 0 !important;
  width: 100% !important;
}

/* Wymuszenie czystego, białego tła BEZ ikony w tle */
#locationlocator #searchinput,
#locationsearch_div #searchinput,
#autosuggest input,
input.pac-target-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;          /* Usuwa ikonę z tła inputa */
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0px 0px 0px 45px !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
  width: 100% !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
}

#autosuggest::before,
#locationsearch_div .input-append::before {
  display: none !important;
}


/* --- 4. GŁÓWNY UKŁAD: LISTA (LEWA 44%) & MAPA (PRAWA 53%) --- */
#maps {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* Nagłówek "The nearest distributors" */
#maps .result-count {
  width: 44% !important;
  margin-bottom: 10px !important;
  display: block !important;
}

#maps .result-count p {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding-bottom: 15px !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

/* Lewa kolumna: Lista dystrybutorów */
#locationresult,
#maps #locationresult,
.sidebar_locations {
  width: 44% !important;
  max-width: 44% !important;
  float: left !important;
  height: 750px !important;
  max-height: 750px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  scrollbar-width: thin !important;
  scrollbar-color: #00A94F rgba(255, 255, 255, 0.1) !important;
}

#resultpanel,
#resulttop,
.mCustomScrollBox,
.mCSB_container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  position: static !important;
  width: 100% !important;
}

/* Prawa kolumna: Sticky Google Map */
@media (min-width: 992px) {
  .mmlmap,
  #maps .mmlmap {
    width: 53% !important;
    max-width: 53% !important;
    float: right !important;
    margin-top: -330px !important;
    position: sticky !important;
    top: 30px !important;
    z-index: 10 !important;
  }

  .map_canvas,
  #maps .map_canvas {
    width: 100% !important;
    height: 750px !important;
    display: block !important;
    border: none !important;
  }
}


/* --- 5. KARTY DYSTRYBUTORA: IDEALNE WYMIARY, BEZ PODKREŚLENIA --- */
#resulttop .row0,
#resulttop .row1,
.resultbar .row0,
.resultbar .row1 {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0 !important;
  padding: 24px 0 28px 0 !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* ZWIĘKSZONA PINEZKA / ŁEZKA Z NUMERKIEM (44px x 44px) */
#resulttop .sidebar-icon,
.resultbar .sidebar-icon,
#locationresult .sidebar-icon,
#resulttop a > img.sidebar-icon,
#locationresult a > img.sidebar-icon {
  position: absolute !important;
  top: 20px !important;
  left: 0 !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  display: block !important;
}

/* Tytuł dystrybutora (BEZ PODKREŚLENIA + margines 60px na większą ikonę) */
.location-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-left: 60px !important;
  padding-right: 0 !important;
  width: calc(100% - 60px) !important;
}

.location-title a {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  text-decoration: none !important;            /* USUNIĘTO PODKREŚLENIE */
  display: inline-block !important;
  max-width: 70% !important;
  transition: color 0.2s ease !important;
}

.location-title a:hover {
  color: #a3e7be !important;
  text-decoration: none !important;            /* BRAK PODKREŚLENIA PRZY HOVERZE */
}

/* Dystans (Wyrównany do góry po prawej stronie) */
.resultbar .distance,
#resulttop .distance,
.sidebar_locations .distance,
#resulttop .label-important.distance {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  position: absolute !important;
  top: 20px !important;
  right: 0 !important;
  left: auto !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

/* Blok z adresem i kontaktem */
span.locationaddress,
#locationresult .resultbar .locationaddress {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  display: block !important;
  margin-top: 14px !important;
  margin-left: 60px !important;               /* Wyrównanie do lewej krawędzi tytułu */
}

/* Przycisk kopiowania adresu */
.plain-location-address {
  position: relative !important;
  padding-left: 26px !important;
  margin-bottom: 8px !important;
}

.copy-address {
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  cursor: pointer !important;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.copy-address:hover {
  opacity: 1;
}

.copy-address svg {
  width: 16px !important;
  height: 16px !important;
  fill: #ffffff !important;
  display: block;
}

.copy-address.clicked svg {
  fill: #00A94F !important;
}

/* Linki Telefon / Email / Strona WWW */
#locationresult a.location-clickable,
#locationresult span.locationaddress a {
  color: #ffffff !important;
  text-decoration: underline !important;
  transition: color 0.2s ease;
}

#locationresult a.location-clickable:hover,
#locationresult span.locationaddress a:hover {
  color: #a3e7be !important;
}

/* Zielony suwak scrollbara */
#locationresult::-webkit-scrollbar {
  width: 5px !important;
}
#locationresult::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08) !important;
}
#locationresult::-webkit-scrollbar-thumb {
  background: #00A94F !important;
  border-radius: 3px !important;
}

#resulttop .resultbar .locationsactive {
  box-shadow: none !important;
}


/* --- 6. RESPONSYWNOŚĆ NA MOBILE / TABLET (< 992px) --- */
@media (max-width: 991.98px) {
  .mmlmap,
  #maps .mmlmap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-top: 25px !important;
    position: relative !important;
    top: 0 !important;
  }

  #locationresult,
  #maps #locationresult {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    max-height: 500px !important;
    padding-right: 10px !important;
  }

  .map_canvas,
  #maps .map_canvas {
    height: 380px !important;
  }

  #maps .result-count,
  #maps .result-count p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 24px !important;
  }
}

/* ==========================================================================
   18. GLOSSARY & TROUBLESHOOTING (#com_glossary & .glossary-groups-wrapper)
   ========================================================================== */

/* --- 1. FULL-WIDTH UNBOXING & EXACT STICKY SCROLL PADDING --- */
html {
  scroll-padding-top: 60px !important;
}

.com_seoglossary,
.com-seoglossary,
.view-glossaries,
.view-glossary,
.itemid-245,
.itemid-106 {
  overflow: visible !important;
}

.com_seoglossary .body-wrapper,
.com_seoglossary .body-innerwrapper,
.com_seoglossary #sp-main-body,
.com-seoglossary #sp-main-body {
  overflow: visible !important;
  background-color: #ffffff !important;
  padding: 0 0 80px 0 !important;
}

.com_seoglossary #sp-main-body > .container,
.com-seoglossary #sp-main-body > .container,
.com_seoglossary #sp-main-body .container-inner,
.com-seoglossary #sp-main-body .container-inner,
.com_seoglossary #sp-component,
.com_seoglossary #sp-component .sp-column {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* --- 2. MODERN SEARCH BAR (#glossarysearch) --- */
div#glossarysearch {
  max-width: 650px !important;
  margin: 35px auto 35px auto !important;
  padding: 0 15px !important;
}

div#glossarysearchheading {
  display: none !important;
}

#com_glossary .input-append {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#com_glossary .input-append:focus-within {
  border-color: #00A94F !important;
  box-shadow: 0 4px 20px rgba(0, 169, 79, 0.15) !important;
}

#com_glossary .srch-btn-inpt {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
}

#com_glossary .srch-inpt {
  flex: 1 1 auto !important;
  display: flex !important;
}

#com_glossary input#filter_search {
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 20px !important;
  border: none !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #000000 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Green Search Button */
#com_glossary .srch-btn button,
#com_glossary button.button.btn.btn-primary {
  height: 50px !important;
  width: 55px !important;
  background-color: #00A94F !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: background-color 0.2s ease !important;
}

#com_glossary .srch-btn button:hover {
  background-color: #008f43 !important;
}

/* Clean Integrated Clear Button */
#com_glossary .input-append input.button.btn {
  height: 50px !important;
  background-color: #f7f7f7 !important;
  color: #666666 !important;
  border: none !important;
  border-left: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#com_glossary .input-append input.button.btn:hover {
  background-color: #eeeeee !important;
  color: #000000 !important;
}


/* --- 3. FULL-WIDTH STICKY ALPHABET BAR (.glossaryalphabet) --- */
.glossaryalphabet.seopagination {
  background-color: #000000 !important;
  width: 100% !important;
  margin: 0 0 40px 0 !important;
  padding: 0 !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}

ul.seopagination-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1140px !important;
  width: 100% !important;
}

ul.seopagination-list > li:first-child {
  display: none !important;
}

ul.seopagination-list > li {
  flex: 1 1 auto !important;
  text-align: center !important;
}

#com_glossary .seopagination ul > li > a,
#com_glossary .seopagination ul > li > span {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 16px 0 !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

#com_glossary .seopagination ul > li > a:hover {
  background-color: #1a1a1a !important;
  color: #00A94F !important;
}

/* Active / Selected Letter Badge */
#com_glossary .seopagination-list .glossletselect,
#com_glossary .seopagination ul > li.active > a {
  background-color: #00A94F !important;
  color: #ffffff !important;
}

/* Greyed-out Inactive Letters */
a.noactive,
#com_glossary .seopagination ul > li > a.noactive {
  color: #666666 !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: default !important;
}


/* --- 4. MODERN FLEXBOX GLOSSARY GROUPS (Zero Collisions) --- */
.glossary-groups-wrapper {
  max-width: 850px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.glossary-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 25px !important;
  margin-bottom: 25px !important;
  min-height: 140px !important;
  position: relative !important;
  scroll-margin-top: 60px !important;
}

/* Large Green First Letter Square (140px x 140px) */
.glossary-group .firstLetter {
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  background-color: #00A94F !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 72px !important;
  line-height: 140px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
  scroll-margin-top: 60px !important;
}

.glossary-group .firstLetter a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.glossary-group .terms-container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

.glossary-term-item {
  width: 100% !important;
  display: block !important;
}




/* --- 5. ACCORDION HEADER (td.entire-title) --- */
.entire-title {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  padding: 20px 28px !important;
  cursor: pointer !important;
  display: block !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #eeeeee !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

.entire-title:hover {
  background-color: #fcfcfc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.entire-title a {
  color: #000000 !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Green plus (+) sign on the right, rotating to (×) */
.entire-title::before {
  content: "+" !important;
  float: right !important;
  font-weight: 300 !important;
  font-size: 38px !important;
  line-height: 24px !important;
  height: 0 !important;
  position: relative !important;
  top: -4px !important;
  color: #00A94F !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.entire-title.active::before {
  transform: rotate(45deg) translateY(-2px) translateX(2px) !important;
}


/* --- 6. MODERN ACCORDION DRAWER (Problem & Solution 2-Columns) --- */
.entire-description {
  background-color: #ffffff !important;
  padding: 0 28px !important;
  max-height: 0;
  overflow: hidden !important;
  display: block !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  border-left: 1px solid #eeeeee !important;
  border-right: 1px solid #eeeeee !important;
  border-bottom: 1px solid #eeeeee !important;
  transition: max-height 0.35s ease-out, padding 0.3s ease-out !important;
}

.entire-description.show-desc {
  padding: 25px 28px !important;
}

/* Internal Tables Layout */
.entire-description table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 !important;
}

.entire-description table:first-of-type {
  margin-top: 0 !important;
}

.entire-description table:last-of-type {
  margin-bottom: 0 !important;
}

.entire-description table tr {
  display: flex !important;
  align-items: flex-start !important;
}

/* Left Label Column (Common Problem / Chemcraft Solution) */
.entire-description table td:first-child {
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  padding: 4px 18px 4px 0 !important;
  border-right: 2px solid #eef2f5 !important;
  margin-right: 20px !important;
  box-sizing: border-box !important;
}

.entire-description table td:first-child p {
  color: #005596 !important; /* Chemcraft Blue for Problem */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Green accent specifically for Chemcraft Solution */
.entire-description table:last-of-type td:first-child p {
  color: #00A94F !important;
}

/* Right Content Column (List of items with bullet points) */
.entire-description table td:nth-child(2) {
  flex: 1 1 auto !important;
  padding: 0 !important;
}

.entire-description table td:nth-child(2) p {
  color: #333333 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  margin: 0 0 8px 0 !important;
  position: relative !important;
  padding-left: 18px !important;
}

.entire-description table td:nth-child(2) p:last-child {
  margin-bottom: 0 !important;
}

/* Green Bullet Dots on list items */
.entire-description table td:nth-child(2) p::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #00A94F !important;
  font-size: 20px !important;
  line-height: 22px !important;
}

/* Subtle Modern Divider Line */
.entire-description hr {
  border: 0 !important;
  height: 1px !important;
  background: #eef2f5 !important;
  margin: 18px 0 !important;
  width: 100% !important;
}

/* 1. KOLOR NIEBIESKI (Problem / Problème) */
.entire-description table:first-of-type td:first-child p,
.entire-description table:first-of-type td:first-child strong,
.entire-description .label-problem,
.entire-description .label-problem strong,
.entire-description h5:first-of-type {
  color: #005596 !important; /* Chemcraft Blue */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

/* 2. KOLOR ZIELONY (Solution / Chemcraft Solution) */
.entire-description table:last-of-type td:first-child p,
.entire-description table:last-of-type td:first-child strong,
.entire-description .label-solution,
.entire-description .label-solution strong,
.entire-description hr + h5,
.entire-description h5:nth-of-type(2),
.entire-description h5:last-of-type {
  color: #00A94F !important; /* Chemcraft Green */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

/* --- 7. RESPONSIVE BREAKPOINTS (Tablets & Mobile) --- */

/* ==========================================================================
   18. GLOSSARY & TROUBLESHOOTING - FULL MOBILE & TABLET (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --- 1. WYSZUKIWARKA NA GÓRZE --- */
  div#glossarysearch {
    max-width: 100% !important;
    margin: 15px auto 20px auto !important;
    padding: 0 15px !important;
  }

  /* --- 2. PRZYKLEJONY ALFABET (STICKY): UKRYTE "ALL", 2 RÓWNE ZWARTE WIERSZE --- */
  .glossaryalphabet.seopagination {
    background-color: #000000 !important;
    width: 100% !important;
    margin: 0 0 25px 0 !important;
    padding: 6px 0 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;                      /* Przyklejenie do samej góry */
    z-index: 999 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  /* Ukrycie przycisku "All" (pierwszy element li) */
  ul.seopagination-list > li:first-child {
    display: none !important;
  }

  /* Litery A-Z: naturalna szerokość bez rozciągania */
  ul.seopagination-list > li {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kontener listy: 2 wyśrodkowane wiersze */
  ul.seopagination-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 6px !important;
    margin: 0 auto !important;
    gap: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
  }

  /* Zmniejszone litery (11.5px), aby w 1. wierszu zmieściło się 16 liter (A-P) */
  #com_glossary .seopagination ul > li > a,
  #com_glossary .seopagination ul > li > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    padding: 5px 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  /* Aktywna litera */
  #com_glossary .seopagination-list .glossletselect,
  #com_glossary .seopagination ul > li.active > a {
    background-color: #00A94F !important;
    color: #ffffff !important;
  }

  /* --- 3. KOMPAKTOWE ZIELONE KWADRATY Z LITERAMI (A, B...) --- */
  .glossary-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    min-height: 48px !important;
  }

  .glossary-group .firstLetter {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    background-color: #00A94F !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 48px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* --- 4. ZWARTA LISTA I BELKI AKORDEONU --- */
  .glossary-group .terms-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .entire-title {
    font-size: 15px !important;
    line-height: 22px !important;
    padding: 14px 18px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: 1px solid #eeeeee !important;
  }

  .entire-title::before {
    font-size: 28px !important;
    line-height: 20px !important;
    top: -2px !important;
  }

  /* --- 5. ROZWIJANY OPIS (COMMON PROBLEM & CHEMCRAFT SOLUTION) --- */
  .entire-description.show-desc {
    padding: 16px 18px !important;
    border: 1px solid #eeeeee !important;
    border-top: none !important;
  }

  .entire-description table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
  }

  .entire-description table tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .entire-description table td:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
  }

  .entire-description table td:first-child p,
  .entire-description table td:first-child strong {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 !important;
    letter-spacing: 0.04em !important;
  }

  .entire-description table td:nth-child(2) {
    width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .entire-description table td:nth-child(2) p {
    font-size: 14px !important;
    line-height: 22px !important;
    margin: 0 0 6px 0 !important;
    padding-left: 16px !important;
  }

  .entire-description hr {
    border: 0 !important;
    border-top: 1px solid #eef2f5 !important;
    height: 1px !important;
    margin: 12px 0 !important;
    width: 100% !important;
  }
}

/* Mobile (< 600px) */
@media (max-width: 599.98px) {}


/*19. SELVA IM PAGEBUILDER CUSTOM*/

/* ==========================================================================
   20. LOGIN & AUTHENTICATION (#section-id-1641233543940 & #login-form-121)
   ========================================================================== */

/* --- 1. MAIN BACKGROUND & CONTAINER WRAPPER --- */
.page-14 #sp-main-body,
#section-id-1641233543940 {
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 80px 0 !important;
  min-height: 70vh !important;
  display: flex !important;
  align-items: center !important;
}

#section-id-1641233543940 .sppb-row {
  align-items: center !important;
  width: 100% !important;
}


/* --- 2. LEFT COLUMN: HEADLINE & DESCRIPTION --- */
#sppb-addon-1641233561095 h3.sppb-addon-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 54px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
}

#sppb-addon-1641233561095 .sppb-addon-content {
  color: #cccccc !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  max-width: 440px !important;
}


/* --- 3. RIGHT COLUMN: JOOMLA 5 LOGIN FORM (#login-form-121) --- */
#login-form-121 {
  background-color: #0d0d0d !important;
  border: 1px solid #222222 !important;
  padding: 40px 35px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Form Field Labels */
#login-form-121 label,
#login-form-121 .form-label {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Text Inputs (Username & Password) */
#login-form-121 input.form-control,
#login-form-121 input#modlgn-username-121,
#login-form-121 input#modlgn-passwd-121 {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#login-form-121 input.form-control:focus {
  border-color: #00A94F !important;
  box-shadow: 0 0 10px rgba(0, 169, 79, 0.2) !important;
}

/* Password Visibility Eye Toggle Button */
#login-form-121 .input-password-toggle {
  background-color: #1a1a1a !important;
  border: 1px solid #333333 !important;
  border-left: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
}

#login-form-121 .input-password-toggle:hover {
  background-color: #2a2a2a !important;
  color: #00A94F !important;
}

/* Remember Me Checkbox */
#login-form-121 .mod-login__remember {
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

#login-form-121 .form-check-input {
  background-color: #1a1a1a !important;
  border: 1px solid #444444 !important;
  border-radius: 2px !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  cursor: pointer !important;
}

#login-form-121 .form-check-input:checked {
  background-color: #00A94F !important;
  border-color: #00A94F !important;
}

#login-form-121 .form-check-label {
  color: #cccccc !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding-left: 8px !important;
  cursor: pointer !important;
}


/* --- 4. ACTION BUTTONS (Log in & Passkey) --- */

/* Main Log In Button */
#btn-login-submit {
  background-color: #00A94F !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out !important;
}

#btn-login-submit:hover {
  background-color: #008f43 !important;
}

/* Passkey / WebAuthn Sign-in Button */
.plg_system_webauthn_login_button {
  background-color: transparent !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

.plg_system_webauthn_login_button svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

.plg_system_webauthn_login_button:hover {
  background-color: #1a1a1a !important;
  border-color: #555555 !important;
}


/* --- 5. RESET PASSWORD & REMIND USERNAME LINKS --- */
.mod-login__options.list-group {
  background: transparent !important;
  border: none !important;
  margin-top: 25px !important;
  padding-top: 20px !important;
  border-top: 1px solid #1f1f1f !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mod-login__options a.list-group-item {
  background: transparent !important;
  border: none !important;
  color: #888888 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  padding: 0 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.mod-login__options a.list-group-item:hover {
  color: #00A94F !important;
}


/* --- 6. RESPONSIVE BREAKPOINTS (Tablets & Mobile) --- */
@media (max-width: 991.98px) {
  #section-id-1641233543940 {
    padding: 50px 20px !important;
  }

  #sppb-addon-1641233561095 h3.sppb-addon-title {
    font-size: 36px !important;
    line-height: 42px !important;
    text-align: center !important;
  }

  #sppb-addon-1641233561095 .sppb-addon-content {
    text-align: center !important;
    max-width: 100% !important;
    margin-bottom: 35px !important;
  }

  #login-form-121 {
    width: 100% !important;
    padding: 30px 20px !important;
  }

  /* --- POPRAWKA: NIEBIESKI PASEK NIE ZASŁANIA ZIELONEGO NAGŁÓWKA NA MOBILE --- */

/* 1. Przywrócenie naturalnej wysokości dla kontenera paska dystrybutora */
#sp-section-3 {
  max-height: none !important;
  height: auto !important;
}

/* 2. Usunięcie sztucznego margin-top na karcie produktu (skoro pasek ma już swoją naturalną wysokość) */
#section-id-1640803076785.product-header,
.view-article #section-id-1640803076785 {
  margin-top: 0 !important;
}


}



/* ==========================================================================
   21. CATEGORY PRODUCTS & FILTER TABS (.category-header & .product-list-articles)
   ========================================================================== */

/* --- 1. SECTION WRAPPER & SPACING --- */
#section-id-1640861745838 {
  max-width: 1140px !important;
  margin: 40px auto 60px auto !important;
  padding: 0 15px !important;
}


/* --- 2. FILTER PILLS NAVIGATION (.clear-filters) --- */
.clear-filters .sppb-nav-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-bottom: 35px !important;
  padding: 0 !important;
  border-bottom: none !important;
  width: 100% !important;
  list-style: none !important;
  position: relative !important;
}

/* Float "Clear filters" to the far right */
.clear-filters .sppb-nav-pills > li:first-child {
  margin-left: auto !important;
  order: 99 !important;
}

/* Filter Buttons Base Styling */
.clear-filters .sppb-nav-pills > li > a {
  background-color: #ffffff !important;
  color: #555555 !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  display: block !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Join Category Filter Buttons (Collapse middle borders) */
.clear-filters .sppb-nav-pills > li:not(:first-child) + li:not(:first-child) > a {
  border-left: none !important;
}

/* Active & Hover Category Tab (Chemcraft Blue) */
.clear-filters .sppb-nav-pills > li:not(:first-child).active > a,
.clear-filters .sppb-nav-pills > li:not(:first-child) > a:hover {
  background-color: #005596 !important;
  color: #ffffff !important;
  border-color: #005596 !important;
}

/* "Clear filters" Button (Independent Box on the Right) */
.clear-filters .sppb-nav-pills > li:first-child > a {
  border: 1px solid #cccccc !important;
  background-color: #ffffff !important;
  color: #555555 !important;
}

.clear-filters .sppb-nav-pills > li:first-child > a:hover,
.clear-filters .sppb-nav-pills > li:first-child.active > a:hover {
  color: #d90429 !important;
  border-color: #d90429 !important;
  background-color: #ffffff !important;
}

.clear-filters .sppb-nav-pills > li:first-child.active > a {
  background-color: #ffffff !important;
  color: #555555 !important;
  border-color: #cccccc !important;
}


/* --- 3. PRODUCT ARTICLE LIST (.product-list-articles) --- */
.product-list-articles .sppb-row {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Full Width Row with 1px Bottom Border */
.product-list-articles .sppb-addon-article-layout {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  margin: 0 !important;
}

.product-list-articles .sppb-addon-article {
  padding: 18px 0 !important;
  margin: 0 !important;
}

.product-list-articles h3 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Product Link Title (Continuous inline block flow) */
.product-list-articles h3 a {
  color: #005596 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  padding-right: 35px !important; /* Space reserved so text never overlaps the arrow */
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.product-list-articles h3 a:hover {
  color: #00377a !important;
  padding-left: 6px !important;
}

/* Large Right Chevron Arrow (Pinned to the far right) */
.product-list-articles h3 a::after {
  content: ">" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #005596 !important;
  font-weight: 400 !important;
  transition: transform 0.2s ease !important;
}

.product-list-articles h3 a:hover::after {
  transform: translateY(-50%) translateX(4px) !important;
}

/* --- 4. HIDE UNWANTED TAG BADGES (Primer, Topcoat pills under title) --- */
.product-list-articles .sppb-article-meta,
.product-list-articles .tags,
.product-list-articles ul.tags,
.product-list-articles .label-info,
.product-list-articles .list-inline-item {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 5. RESPONSIVE BREAKPOINTS (FILTRY W 3 WIERSZACH JAK NA WZORCU) --- */
@media (max-width: 991.98px) {

  /* 1. Usunięcie poziomego scrolla i zielonego suwaka – zawijanie wierszy */
  .clear-filters .sppb-nav-pills,
  .sppb-nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;              /* Zawijanie do kolejnych wierszy */
    overflow-x: visible !important;          /* Likwidacja zielonego suwaka */
    overflow: visible !important;
    align-items: center !important;
    justify-content: flex-start !important;
    row-gap: 12px !important;                /* Równy odstęp między wierszami 1, 2 i 3 */
    column-gap: 0 !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }

  /* 2. Przyciski filtrów – kompaktowy padding */
  .clear-filters .sppb-nav-pills > li > a,
  .sppb-nav-pills > li > a {
    background-color: #ffffff !important;
    color: #555555 !important;
    border: 1px solid #cccccc !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    display: block !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Aktywny i hover */
  .clear-filters .sppb-nav-pills > li:not(:first-child).active > a,
  .clear-filters .sppb-nav-pills > li:not(:first-child) > a:hover {
    background-color: #005596 !important;
    color: #ffffff !important;
    border-color: #005596 !important;
  }

  /* 3. Wiersz 1 po lewej: Aquaprime i General (order: 1) */
  .clear-filters .sppb-nav-pills > li:nth-child(2),
  .clear-filters .sppb-nav-pills > li:nth-child(3) {
    order: 1 !important;
  }

  /* 4. Wiersz 1 po prawej: Clear filters (order: 2, odsunięte do prawej) */
  .clear-filters .sppb-nav-pills > li:first-child {
    order: 2 !important;
    margin-left: auto !important;
  }

  .clear-filters .sppb-nav-pills > li:first-child > a {
    border: 1px solid #cccccc !important;
    color: #555555 !important;
  }

  /* 5. Wiersze 2 i 3: Pre-Catalyzed, Tools, oraVerde, Promatch, Waterborne (order: 3) */
  .clear-filters .sppb-nav-pills > li:nth-child(n+4) {
    order: 3 !important;
  }

  /* 6. Sklejenie sąsiadujących ramek w blokach */
  .clear-filters .sppb-nav-pills > li:nth-child(3) > a,
  .clear-filters .sppb-nav-pills > li:nth-child(5) > a,
  .clear-filters .sppb-nav-pills > li:nth-child(6) > a,
  .clear-filters .sppb-nav-pills > li:nth-child(8) > a {
    border-left: none !important;
  }
}



/* ==========================================================================
   22. LIVE SMART SEARCH STYLING (#serch-products-field & .mod-finder)
   ========================================================================== */

/* --- 1. COMPLETELY HIDE NATIVE JOOMLA KEYWORD BUBBLE (Awesomplete) --- */
#serch-products-field .awesomplete > ul,
.mod-finder .awesomplete > ul,
div.awesomplete ul,
div.awesomplete mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* --- 2. SEARCH SECTION & FORM CONTAINER --- */
#serch-products-field {
  width: 100% !important;
  margin: 20px 0 35px 0 !important;
  position: relative !important;
  z-index: 50 !important;
}

/* Main Form: Flex row with crisp border */
#serch-products-field form.mod-finder,
#serch-products-field form.js-finder-searchform,
form.js-finder-searchform,
form.mod-finder {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid #707070 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Awesomplete Wrapper stretches across the form */
#serch-products-field div.awesomplete,
form.js-finder-searchform div.awesomplete,
form.mod-finder div.awesomplete {
  flex: 1 1 auto !important;
  display: flex !important;
  position: relative !important;
  width: calc(100% - 55px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text Input Field (Flat styling, no Bootstrap rounded corners) */
#serch-products-field input.form-control,
#serch-products-field input.js-finder-search-query,
#mod-finder-searchword283,
form.js-finder-searchform input.form-control,
form.mod-finder input.form-control {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 45px 0 18px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 'X' Clear Button inside Input */
.live-search-clear-btn {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #707070 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  transition: color 0.2s ease !important;
}

.live-search-clear-btn:hover {
  color: #000000 !important;
}

/* Green Magnifying Glass Button on the Right */
.chemcraft-search-btn,
#serch-products-field button[type="submit"],
form.js-finder-searchform button[type="submit"],
form.mod-finder button[type="submit"] {
  width: 55px !important;
  min-width: 55px !important;
  height: 48px !important;
  background-color: #00A94F !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
}

.chemcraft-search-btn:hover,
#serch-products-field button[type="submit"]:hover {
  background-color: #008f43 !important;
}

.chemcraft-search-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
}


/* --- 3. FLOATING RESULTS DROPDOWN (Direct Product Links) --- */
.live-search-results-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: -1px !important;
  right: -1px !important;
  width: calc(100% + 2px) !important;
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-top: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.live-search-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.live-search-item {
  border-bottom: 1px solid #eef2f5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.live-search-item:last-child {
  border-bottom: none !important;
}

/* Product Link Row */
.live-search-item a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 22px !important;
  color: #005596 !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  transition: all 0.2s ease-in-out !important;
}

.live-search-item a:hover {
  background-color: #f8fafc !important;
  color: #00377a !important;
  padding-left: 28px !important;
}

/* Right Chevron Arrow (">") */
.live-search-arrow {
  color: #005596 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 15px !important;
}

.live-search-no-results {
  padding: 20px 24px !important;
  color: #777777 !important;
  font-size: 15px !important;
  text-align: left !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* --- 4. DISABLE YELLOW SEARCH HIGHLIGHTING ON PRODUCT PAGES --- */
mark.highlight,
.highlight,
span.highlight {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-weight: inherit !important;
}


/* ==========================================================================
   23. MOBILE OFFCANVAS MENU & HAMBURGER TOGGLER (.offcanvas-menu)
   ========================================================================== */

/* --- 1. HEADER ALIGNMENT ON MOBILE (< 992px) --- */
@media (min-width: 992px) {
  #offcanvas-toggler,
  .offcanvas-toggler,
  .burger-icon {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  #sp-section-2 .row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  #sp-section-2 #sp-logo {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 70% !important;
  }

  #sp-section-2 #sp-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* Hamburger Toggler Button */
  #offcanvas-toggler,
  .offcanvas-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    z-index: 99 !important;
  }

  .burger-icon > span,
  .burger-icon span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease-in-out !important;
    margin: 4px 0;
  }

  #offcanvas-toggler:hover .burger-icon span {
    background-color: #00A94F !important;
  }
}


/* --- 2. OFFCANVAS DRAWER & TOP BAR ALIGNMENT --- */
.offcanvas-menu {
  position: fixed !important;
  top: 0 !important;
  right: -100vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  z-index: 999999 !important;
  box-shadow: none !important;
  transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  visibility: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Open Full-Screen State */
body.offcanvas-active .offcanvas-menu,
.offcanvas-menu.active {
  right: 0 !important;
  visibility: visible !important;
}

/* Remove default Bootstrap padding from the empty top wrapper */
.offcanvas-menu > div:first-child {
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Hide empty header modules container */
.offcanvas-menu .header-modules {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Main inner container - tight top padding */
.offcanvas-menu .offcanvas-inner {
  padding: 20px 20px 40px 20px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* Background Overlay */
.offcanvas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  z-index: 999998 !important;
  display: none;
}

body.offcanvas-active .offcanvas-overlay {
  display: block !important;
}

/* Close Button (X) - perfectly aligned on the right edge */
.close-offcanvas {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  color: #ffffff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  z-index: 100 !important;
  transition: color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.close-offcanvas:hover {
  color: #00A94F !important;
}


/* --- 3. LOGO (ALIGNED TOP-LEFT OPPOSITE CLOSE BUTTON) --- */
.offcanvas-menu .logo-module {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  padding-right: 50px !important; /* Space reserved so logo never touches the X */
}

.offcanvas-menu .logo-module .sp-module-content,
.offcanvas-menu .logo-module .mod-custom,
.offcanvas-menu .logo-module p {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.offcanvas-menu .logo-module img {
  max-height: 60px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
}


/* --- 4. OFFCANVAS NAVIGATION ITEMS (PULLED UP CLOSE TO LOGO) --- */
.offcanvas-menu ul.nav.menu,
.offcanvas-menu ul.mod-menu {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 0 0 !important; /* Tight margin directly below the logo */
  width: 100% !important;
}

.offcanvas-menu ul.nav.menu > li,
.offcanvas-menu ul.mod-menu > li {
  border-bottom: 1px solid #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Main Menu Links */
.offcanvas-menu ul.nav.menu li a,
.offcanvas-menu ul.mod-menu li a {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 36px !important;
  padding: 14px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
  opacity: 1 !important;
}

.offcanvas-menu ul.nav.menu li a:hover,
.offcanvas-menu ul.mod-menu li a:hover {
  color: #fff !important;
  padding-left: 6px !important;
}

/* Bold Category Headers in Mobile Menu */
.offcanvas-menu a.bold-menu {
  font-size: 15px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #00A94F !important;
  padding-top: 14px !important;
}

/* Submenus (Accordion Dropdowns) */
.offcanvas-menu ul.mod-menu__sub,
.offcanvas-menu .menu-child {
  list-style: none !important;
  padding-left: 20px !important;
  margin: 0 !important;
  background-color: #080808 !important;
  border-left: 2px solid #00A94F !important;
  display: none;
}

.offcanvas-menu ul.mod-menu__sub li a,
.offcanvas-menu .menu-child li a {
  font-size: 18px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: #fff !important;
  padding: 5px 0 !important;
}

.offcanvas-menu ul.mod-menu__sub li a.bold-menu,
.offcanvas-menu .menu-child li a.bold-menu
{
    font-weight: 700 !important;
}

.offcanvas-menu ul.mod-menu__sub li a:hover,
.offcanvas-menu .menu-child li a:hover {
  color: #ffffff !important;
}

/* Accordion Plus/Minus Icon */
.offcanvas-menu .menu-toggler {
  cursor: pointer !important;
  display: inline-block !important;
  padding: 4px 10px !important;
}

.offcanvas-menu .menu-toggler::after {
  content: "+" !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  color: #FFF !important;
}

.offcanvas-menu li.menu-parent.open > a .menu-toggler::after {
  content: "−" !important;
}

/* ==========================================================================
   25. CONTACT US FORM (.convertforms, #cf_1 & #cf_3)
   ========================================================================== */

/* Main Form Container */
.convertforms,
#cf_1,
#cf_3 {
  width: 100% !important;
  font-family: 'Montserrat', sans-serif !important;
}

#cf_1 .cf-form-wrap,
#cf_3 .cf-form-wrap {
  background: transparent !important;
  padding: 0 !important;
}

/* Form Field Labels */
#cf_1 label.cf-label,
#cf_3 label.cf-label {
  color: #333333 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

#cf_1 .cf-required-label,
#cf_3 .cf-required-label {
  color: #d90429 !important;
  margin-left: 3px !important;
}

/* Inputs, Selects & Textareas */
#cf_1 input.cf-input,
#cf_3 input.cf-input,
#cf_1 select.cf-input,
#cf_3 select.cf-input,
#cf_1 textarea.cf-input,
#cf_3 textarea.cf-input {
  width: 100% !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#cf_1 input.cf-input,
#cf_3 input.cf-input,
#cf_1 select.cf-input,
#cf_3 select.cf-input {
  height: 52px !important;
}

#cf_1 textarea.cf-input,
#cf_3 textarea.cf-input {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Focus State: Clean Blue Border */
#cf_1 input.cf-input:focus,
#cf_3 input.cf-input:focus,
#cf_1 select.cf-input:focus,
#cf_3 select.cf-input:focus,
#cf_1 textarea.cf-input:focus,
#cf_3 textarea.cf-input:focus {
  border-color: #005596 !important;
  box-shadow: 0 0 8px rgba(0, 85, 150, 0.15) !important;
}

/* Placeholder Styling */
#cf_1 input::placeholder,
#cf_3 input::placeholder,
#cf_1 textarea::placeholder,
#cf_3 textarea::placeholder {
  color: #999999 !important;
  font-size: 14px !important;
}

/* Custom Dropdown Arrow */
#cf_1 .cf-select,
#cf_3 .cf-select {
  position: relative !important;
}

#cf_1 select.cf-input,
#cf_3 select.cf-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* Checkbox (Privacy Policy / RODO) */
#cf_1 .cf-checkbox-group,
#cf_3 .cf-checkbox-group {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 15px 0 25px 0 !important;
}

#cf_1 .cf-checkbox-group input[type="checkbox"],
#cf_3 .cf-checkbox-group input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 3px !important;
  border-radius: 2px !important;
  border: 1px solid #999999 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#cf_1 .cf-checkbox-group input[type="checkbox"]:checked,
#cf_3 .cf-checkbox-group input[type="checkbox"]:checked {
  background-color: #005596 !important;
  border-color: #005596 !important;
}

#cf_1 .cf-checkbox-group label,
#cf_3 .cf-checkbox-group label {
  color: #444444 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Submit Button: Chemcraft Blue */
#cf_1 button.cf-btn,
#cf_3 button.cf-btn,
#cf_1 .cf-btn-text,
#cf_3 .cf-btn-text {
  background-color: #005596 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 38px !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

#cf_1 button.cf-btn:hover,
#cf_3 button.cf-btn:hover {
  background-color: #003e6e !important;
}

/* Mobile Responsiveness (< 768px) */
@media (max-width: 767.98px) {
  #cf_1 .cf-one-half,
  #cf_3 .cf-one-half {
    width: 100% !important;
    float: none !important;
  }

  #cf_1 button.cf-btn,
  #cf_3 button.cf-btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ==========================================================================
   26. ONLINE PRODUCT SUPPORT BANNER & UNIVERSAL MORE-INFO-IMG ENGINE
   ========================================================================== */

/* --- 1. SECTION & ROW LAYOUT (Universal for all instances) --- */
div.sppb-section:has(.more-info-img),
#section-id-1640866884556,
#section-id-1645799779917 {
  background-color: #000000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

div.sppb-section:has(.more-info-img) .sppb-row,
#section-id-1640866884556 .sppb-row,
#section-id-1645799779917 .sppb-row {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  width: 100% !important;
}

/* --- 2. LEFT COLUMN: TEXT CONTENT (Crisp Left Alignment) --- */
div.sppb-section:has(.more-info-img) .sppb-col-md-6:first-child,
#column-wrap-id-1640866884543,
#column-wrap-id-1645799779929 {
  background-color: #000000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 60px 40px 60px 0 !important;
}

/* Reset HTML text-center class to left alignment */
div.sppb-section:has(.more-info-img) .text-center,
div.sppb-section:has(.more-info-img) .view-our-ranges,
div.sppb-section:has(.more-info-img) .sppb-addon-cta,
#mod-custom284 {
  text-align: left !important;
  max-width: 540px !important;
  float: right !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

/* Hide empty paragraphs */
div.sppb-section:has(.more-info-img) p:empty,
div.sppb-section:has(.more-info-img) p.sppb-cta-subtitle:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Small Sub-title: Online Product Support */
div.sppb-section:has(.more-info-img) h3.sppb-cta-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Main Heading: Are you unsure about a term... */
div.sppb-section:has(.more-info-img) p.sppb-lead.sppb-cta-subtitle,
div.sppb-section:has(.more-info-img) .sppb-addon-cta p[style*="font-size: 26px"],
div.sppb-section:has(.more-info-img) .sppb-addon-cta p[style*="font-size:26px"] {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 26px;
  font-weight: 400 !important;
  line-height: 34px;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
}

/* Paragraph Description */
div.sppb-section:has(.more-info-img) p.sppb-cta-text {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  margin-bottom: 30px !important;
  text-align: left !important;
  opacity: 0.95;
}

/* Button: Black with 2px White Border -> Hover: White with Blue Text */
div.sppb-section:has(.more-info-img) a.sppb-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  padding: 14px 38px !important;
  display: inline-block !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-align: center !important;
  transition: all 0.2s ease-in-out !important;
}

div.sppb-section:has(.more-info-img) a.sppb-btn:hover {
  background-color: #ffffff !important;
  color: #005596 !important;
  border-color: #ffffff !important;
}


/* --- 3. RIGHT COLUMN: UNIVERSAL CORNER-EXPANDING MORE-INFO-IMG --- */
div.sppb-section:has(.more-info-img) .sppb-col-md-6:last-child,
#column-wrap-id-1640866884545,
#column-wrap-id-1645799779931 {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

.more-info-img {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.more-info-img .sppb-addon-content,
.more-info-img .sppb-addon-image-layout-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Base Photo */
.more-info-img .sppb-addon-image-layout-image,
.more-info-img img.sppb-img-responsive {
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Top-Right Yellow Speech Bubble Badge (Visible in idle state) */
.more-info-img .sppb-addon-image-layout-wrap::after,
.sppb-addon-image-layouts.more-info-img::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 65px !important;
  height: 65px !important;
  background-color: #FFDD00 !important;
  background-image: url(/images/dym.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 15 !important;
  pointer-events: none !important;
  transition: all 0.35s ease-in-out !important;
}

.more-info-img:hover .sppb-addon-image-layout-wrap::after,
.sppb-addon-image-layouts.more-info-img:hover::after {
  background-color: transparent !important;
}

/* Corner-to-Center Expanding Semi-Transparent Yellow Overlay */
.more-info-img .sppb-addon-image-layout-content {
  position: absolute !important;
  top: 20% !important;
  left: 80% !important;
  transform: translate(-50%, -50%) scale(0.5) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  background-color: rgba(255, 221, 0, 0.92) !important; /* Semi-transparent yellow */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 50px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; /* Smooth expanding slide from corner */
  z-index: 10 !important;
  margin: 0 !important;
}

/* Hover State: Expands to full 100% cover centered */
.more-info-img:hover .sppb-addon-image-layout-content,
.more-info-img .sppb-addon-image-layout-wrap:hover .sppb-addon-image-layout-content {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Quote Text Inside Yellow Card */
.more-info-img .sppb-addon-image-layout-text {
  max-width: 82% !important;
  margin: 0 auto !important;
  color: #000000 !important;
  text-align: left !important;
}

.more-info-img .sppb-addon-image-layout-text span {
  color: #000000 !important;
  font-family: 'Montserrat', sans-serif !important;
  display: block !important;
}

.more-info-img .sppb-addon-image-layout-text span:first-child {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
}

.more-info-img .sppb-addon-image-layout-text span:last-child {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: #222222 !important;
}


/* --- 4. RESPONSIVE BREAKPOINTS (Tablets & Mobile < 992px) --- */
@media (max-width: 991.98px) {
  div.sppb-section:has(.more-info-img) .sppb-row,
  #section-id-1640866884556 .sppb-row,
  #section-id-1645799779917 .sppb-row {
    flex-direction: column !important;
  }

  div.sppb-section:has(.more-info-img) .sppb-col-md-6:first-child,
  #column-wrap-id-1640866884543,
  #column-wrap-id-1645799779929 {
    padding: 50px 20px !important;
  }

  div.sppb-section:has(.more-info-img) .text-center,
  div.sppb-section:has(.more-info-img) .view-our-ranges,
  #mod-custom284 {
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
  }

  div.sppb-section:has(.more-info-img) h3.sppb-cta-title,
  div.sppb-section:has(.more-info-img) p.sppb-lead.sppb-cta-subtitle,
  div.sppb-section:has(.more-info-img) p.sppb-cta-text,
  div.sppb-section:has(.more-info-img) .sppb-addon-cta p[style*="font-size: 26px"] {
    /*ext-align: center !important;*/
  }

  .more-info-img img.sppb-img-responsive {
    min-height: 320px !important;
    max-height: 360px !important;
  }

  .more-info-img .sppb-addon-image-layout-content {
    padding: 25px 20px !important;
  }

  .more-info-img .sppb-addon-image-layout-text span:first-child {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}



/*Chwilowe*/
/* ==========================================================================
   SELVA PRO - EXCLUSIVE MOBILE OVERRIDES (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --------------------------------------------------------------------------
     1. GLOBAL MOBILE RESETS & SCROLL BUTTON
     -------------------------------------------------------------------------- */
  .sp-scroll-up {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    top: auto !important;
    left: auto !important;
    z-index: 99999 !important;
  }

/* --------------------------------------------------------------------------
     2. HERO SECTION - OVERLAPPING MOBILE COMPOSITION (MATCHING IMAGE 2)
     -------------------------------------------------------------------------- */
  #section-id-1716789066020 {
    position: relative !important;
    overflow: hidden !important;
    padding-top: 15px !important;
    padding-bottom: 40px !important;
  }

  /* Hide desktop absolute background */
  #section-id-1716789066020 #column-wrap-id-1716789066026 {
    display: none !important;
  }

  /* Main column wrapper in normal flow */
  #section-id-1716789066020 #column-wrap-id-1716789066019 {
    max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #section-id-1716789066020 #column-id-1716789066019 {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Layer 1: Selva Pro Logo overlapping the top of the photo */
  #sppb-addon-wrapper-1718039501046 {
    position: relative !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 0 0 15px !important;
  }

  .sppb-addon.sppb-addon-raw-html.seva-logo-svg {
    width: 85% !important;
    max-width: 320px !important;
    margin-bottom: -110px !important; /* Pulls photo up underneath the logo */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: block !important;
  }

  .sppb-addon.sppb-addon-raw-html.seva-logo-svg img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Layer 2: Masked wood photo shifted to the right */
  #sppb-addon-wrapper-1718166494852 {
    display: block !important;
    position: relative !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .mobile-image-mask1 {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .mobile-image-mask1 .sppb-addon-single-image-container {
    width: 78vw !important;
    max-width: 330px !important;
    margin-left: auto !important; /* Pushes photo to the right edge */
    margin-right: 0 !important;
  }

  .mobile-image-mask1 img.sppb-img-responsive {
    height: 340px !important;
    width: 100% !important;
    object-fit: cover !important;
    -webkit-mask-image: url(/media/mask/ramka1.svg) !important;
    mask-image: url(/media/mask/ramka1.svg) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: 0% center !important;
    mask-position: 0% center !important;
    -webkit-mask-size: auto 100% !important;
    mask-size: auto 100% !important;
    display: block !important;
  }

  /* Layer 3: Headline overlapping the bottom of the photo */
  #sppb-addon-wrapper-1716829452826 {
    position: relative !important;
    z-index: 10 !important;
    margin-top: -65px !important; /* Pulls text UP to overlap bottom of photo */
    margin-bottom: 20px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  div#sppb-addon-1716829452826 .sppb-addon-text-block {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  #sppb-addon-1716829452826 h3.sppb-addon-title {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 38px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
  }

  #sppb-addon-1716829452826 .sppb-addon-content strong {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Layer 4: Left-aligned buttons & badge */
  div#sppb-addon-wrapper-1716818150110,
  div#sppb-addon-wrapper-1736785861328,
  div#sppb-addon-wrapper-1716835761776 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  div#sppb-addon-wrapper-1716818150110 .sppb-button-wrapper,
  div#sppb-addon-wrapper-1736785861328 .sppb-button-wrapper {
    text-align: left !important;
  }

  #sppb-addon-1716835761776 {
    text-align: left !important;
  }

  #sppb-addon-1716835761776 img {
    margin: 0 !important;
    max-width: 250px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* --------------------------------------------------------------------------
     3. SPLIT SECTIONS (ITALIAN FORMULATIONS & THE RESULT) - LEFT-ALIGNED 1:1
     -------------------------------------------------------------------------- */
  div#column-id-1716835761800,
  div#column-id-1716874508177,
  div#column-id-1719488909390,
  div#column-id-1716979585070,
  div#column-id-1717571425007 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  #section-id-1716835761799 .sppb-row,
  #section-id-1716874508175 .sppb-row {
    flex-direction: column !important;
  }

  /* Full photo framing (worker pouring paint clearly visible) */
  div#column-id-1716835761805,
  #column-wrap-id-1716874508176,
  #column-id-1716874508176 {
    min-height: 350px !important;
    height: 350px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center 30% !important;
    margin-bottom: 25px !important;
  }

  /* Left-aligned text content wrapper */
  #column-wrap-id-1716835761800,
  #column-wrap-id-1716874508177 {
    width: 100% !important;
    padding: 10px 20px 40px 20px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Headline: 38px/34px, 900 italic, forced 4-line wrap as in Image 1 */
  #sppb-addon-1716835761802 h3.sppb-addon-title,
  #sppb-addon-1716874508178 h3.sppb-addon-title {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 38px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    max-width: 330px !important; /* Forces clean 4-line break */
  }

  /* First paragraph: bold italic intro */
  #sppb-addon-1716835761802 .sppb-addon-content p:first-child,
  #sppb-addon-1716835761802 .sppb-addon-content p:first-child strong,
  #sppb-addon-1716874508178 .sppb-addon-content p:first-child,
  #sppb-addon-1716874508178 .sppb-addon-content p:first-child strong {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    display: block !important;
    margin-bottom: 20px !important;
  }

  /* Second paragraph: regular description */
  #sppb-addon-1716835761802 .sppb-addon-content p:last-child,
  #sppb-addon-1716874508178 .sppb-addon-content p:last-child {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 15px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #ffffff !important;
    text-align: left !important;
    margin-bottom: 30px !important;
  }

  /* Left-aligned button */
  #sppb-addon-wrapper-1716835761803,
  #sppb-addon-wrapper-1716874508179,
  #sppb-addon-wrapper-1716835761803 .sppb-button-wrapper,
  #sppb-addon-wrapper-1716874508179 .sppb-button-wrapper {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #btn-1716835761803,
  #btn-1716874508179 {
    margin-left: 0 !important;
  }
  /* --------------------------------------------------------------------------
     4. SECTION 5: "DON'T SETTLE FOR LESS" (HIDE BUILDING PHOTO ON MOBILE)
     -------------------------------------------------------------------------- */
  #column-wrap-id-1719488909393,
  #column-id-1719488909393 {
    display: none !important;
  }

  #column-wrap-id-1719488909390 {
    width: 100% !important;
    padding: 40px 15px 40px 15px !important;
    text-align: center !important;
  }

  #sppb-addon-1719488909391 h3.sppb-addon-title {
    font-size: 30px !important;
    line-height: 28px !important;
    text-align: center !important;
  }

  #sppb-addon-1719488909391 .sppb-addon-content {
    font-size: 15px !important;
    line-height: 22px !important;
    text-align: center !important;
  }

  /* --------------------------------------------------------------------------
     5. SLIDER 1: "DESIGNED WITH PASSION" (CENTERED & ENLARGED BADGE + TITLE)
     -------------------------------------------------------------------------- */
  #section-id-1716874508208 {
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Flex column on carousel container keeps natural flow */
  #sppb-carousel1.slider-landing,
  .slider-landing {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
  }

  /* 1. Slides stage comes FIRST */
  .slider-landing .sppb-carousel-inner {
    order: 1 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Hide inactive slides */
  .slider-landing .sppb-item:not(.active) {
    display: none !important;
  }

  .slider-landing .sppb-item.active {
    display: block !important;
    position: relative !important;
  }

  /* Photo fixed at top */
  .slider-landing img.sppb-carousel-pro-bg-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: right center !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

 /* Zero-padding container matching exact photo dimensions */
  .slider-landing .sppb-container.sppb-carousel-pro-arrow-bottom-center {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important; /* Exactly matches photo height */
    margin: 0 !important;
    padding: 0 !important; /* Eliminates the right gap completely */
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .slider-landing .sppb-container.sppb-carousel-pro-arrow-bottom-center .sppb-row,
  .slider-landing .sppb-container.sppb-carousel-pro-arrow-bottom-center .sppb-col-12 {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Base arrow button: crisp edges without border-radius */
  .slider-landing a.sppb-carousel-arrow {
    pointer-events: auto !important;
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    width: 75px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important; /* Removes rounded corners */
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Left arrow: white polygon flush against bottom-left corner */
  .slider-landing a.sppb-carousel-arrow.left {
    left: 0 !important;
    right: auto !important;
    background-color: #ffffff !important;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 22px) 100%, 0% 100%) !important;
  }

  .slider-landing a.sppb-carousel-arrow.left i,
  .slider-landing a.sppb-carousel-arrow.left .fa {
    color: #0B8938 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    margin-right: 8px !important;
  }

  /* Right arrow: green polygon flush against bottom-right corner (matching Target Image 2) */
  .slider-landing a.sppb-carousel-arrow.right {
    right: 0 !important; /* Glued 100% flush to the right edge */
    left: auto !important;
    background-color: #0B8938 !important;
    clip-path: polygon(22px 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  }

  .slider-landing a.sppb-carousel-arrow.right i,
  .slider-landing a.sppb-carousel-arrow.right .fa {
    color: #ffffff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    margin-left: 8px !important;
  }
  /* White content area */
  .slider-landing .sppb-item.sppb-item-has-bg .sppb-carousel-item-inner {
    position: relative !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .slider-landing .sppb-carousel-pro-inner-content {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 25px 15px 10px 15px !important;
    background: #ffffff !important;
  }

  /* Enlarged heart badge (85px) centered with the title */
  .slider-landing .sppb-carousel-pro-inner-content .sppb-col-sm-6:last-child {
    position: absolute !important;
    top: 25px !important;
    left: calc(50% - 145px) !important; /* Horizontally balances the icon on the left */
    width: 85px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    background-image: none !important;
  }

  .slider-landing .sppb-text-right {
    text-align: left !important;
    margin: 0 !important;
  }

  .slider-landing .sppb-text-right img {
    width: 85px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  .slider-landing .sppb-carousel-pro-inner-content .sppb-col-sm-6:first-child {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .slider-landing .sppb-carousel-pro-text h2:first-child {
    display: none !important;
  }

  /* Enlarged Subtitle (22px) placed next to the heart badge */
  .slider-landing .sppb-carousel-pro-content h3 {
    font-size: 22px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    margin: 2px 0 2px calc(50% - 48px) !important; /* Directly flows to the right of the 85px icon */
    text-align: left !important;
    color: #000000 !important;
  }

  /* Enlarged Title (54px) placed next to the heart badge */
  .slider-landing .sppb-carousel-pro-content h2 {
    font-size: 54px !important;
    line-height: 48px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    margin: 0 0 20px calc(50% - 48px) !important;
    text-align: left !important;
    color: #000000 !important;
    padding-bottom: 0 !important;
  }

  /* Bullet points clear the badge and span nicely across the width */
  .slider-landing ul {
    clear: both !important;
    padding-left: 25px !important;
    padding-right: 15px !important;
    text-align: left !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
  }

  .slider-landing ul li {
    font-size: 15px !important;
    line-height: 22px !important;
    padding: 4px 0 !important;
  }

  /* 2. Dots centered at the bottom */
  .slider-landing ol.sppb-carousel-indicators {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    justify-content: center !important; /* Centered dots */
    padding: 0 !important;
    margin: 10px auto 25px auto !important;
    z-index: 10 !important;
    width: 100% !important;
    list-style: none !important;
    background: #ffffff !important;
  }

  .slider-landing ol.sppb-carousel-indicators li {
    width: 18px !important;
    height: 12px !important;
    background-color: #0B8938 !important;
    opacity: 0.3 !important;
    border-radius: 2px !important;
    transform: skewX(-20deg) !important;
    margin: 0 5px !important;
    border: none !important;
    float: none !important;
  }

  .slider-landing ol.sppb-carousel-indicators li.active {
    opacity: 1 !important;
    background-color: #0B8938 !important;
  }


  /* --------------------------------------------------------------------------
     6. "CREATED TO PERFORM" (PERMANENTLY KILL DUPLICATE TEXT BLOCKS)
     -------------------------------------------------------------------------- */
  .hide-content-mobile .sppb-addon-content {
    display: none !important;
  }

  #section-id-1716874508220 h3.sppb-addon-title {
    font-size: 32px !important;
    line-height: 30px !important;
    text-align: center !important;
  }


  /* --------------------------------------------------------------------------
     7. SLIDER 2: "AREAS OF USE" (EXACT MATCH FOR TARGET IMAGE 1)
     -------------------------------------------------------------------------- */
  #section-id-1716902312536 {
    background-color: #000000 !important;
    padding: 0 !important;
  }

  /* Flex column: slide stage FIRST, 5 dashes SECOND */
  #sppb-carousel2.carosuel-left-image,
  .carosuel-left-image {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background-color: #000000 !important;
  }

  .carosuel-left-image .sppb-carousel-inner {
    order: 1 !important;
    position: relative !important;
    background-color: #000000 !important;
    overflow: hidden !important;
  }

  /* Strictly hide inactive slides */
  .carosuel-left-image .sppb-item:not(.active) {
    display: none !important;
  }

  .carosuel-left-image .sppb-item.active {
    display: block !important;
    position: relative !important;
    background-color: #000000 !important;
  }

  /* 1. Photo fixed at top */
  .carosuel-left-image img.sppb-carousel-pro-bg-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  /* 2. Arrows container flush across the photo */
  .carosuel-left-image .sppb-container.sppb-carousel-pro-arrow-bottom-center {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important; /* Exactly matches photo height */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .carosuel-left-image .sppb-container.sppb-carousel-pro-arrow-bottom-center .sppb-row,
  .carosuel-left-image .sppb-container.sppb-carousel-pro-arrow-bottom-center .sppb-col-12 {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Base arrow button: crisp edges without border-radius */
  .carosuel-left-image a.sppb-carousel-arrow {
    pointer-events: auto !important;
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    width: 70px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Left arrow: black slanted button with green chevron at bottom-left */
  .carosuel-left-image a.sppb-carousel-arrow.left {
    left: 0 !important;
    right: auto !important;
    background-color: #000000 !important;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%) !important;
  }

  .carosuel-left-image a.sppb-carousel-arrow.left i,
  .carosuel-left-image a.sppb-carousel-arrow.left .fa {
    color: #0B8938 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin-right: 8px !important;
  }

  .carosuel-left-image a.sppb-carousel-arrow.left i:before,
  .carosuel-left-image a.sppb-carousel-arrow.left .fa:before {
    content: "\f053" !important;
  }

  /* Right arrow: green slanted button with black chevron at bottom-right */
  .carosuel-left-image a.sppb-carousel-arrow.right {
    right: 0 !important;
    left: auto !important;
    background-color: #0B8938 !important;
    clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  }

  .carosuel-left-image a.sppb-carousel-arrow.right i,
  .carosuel-left-image a.sppb-carousel-arrow.right .fa {
    color: #000000 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin-left: 8px !important;
  }

  .carosuel-left-image a.sppb-carousel-arrow.right i:before,
  .carosuel-left-image a.sppb-carousel-arrow.right .fa:before {
    content: "\f054" !important;
  }

  /* 3. Black content area below the photo */
  .carosuel-left-image .sppb-carousel-item-inner {
    position: relative !important;
    background-color: #000000 !important;
    z-index: 2 !important;
    padding: 25px 20px 15px 20px !important;
    margin: 0 !important;
  }

  .carosuel-left-image .sppb-row {
    flex-flow: column !important;
  }

  .carosuel-left-image .sppb-row .sppb-col-sm-6:first-child {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .carosuel-left-image .sppb-carousel-pro-text {
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    float: none !important;
  }

  .carosuel-left-image .sppb-carousel-pro-text h2 {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 36px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }

  .carosuel-left-image .sppb-carousel-pro-content strong {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #ffffff !important;
    display: block !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }

  .carosuel-left-image .sppb-carousel-pro-content {
    color: #cccccc !important;
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 15px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: left !important;
  }

  /* 4. The 5 green dashes placed at the bottom of the black card on the left */
  .carosuel-left-image ol.sppb-carousel-indicators {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 20px !important;
    margin: 5px 0 35px 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    list-style: none !important;
    background-color: #000000 !important;
  }

  .carosuel-left-image ol.sppb-carousel-indicators li {
    width: 18px !important;
    height: 10px !important;
    background-color: #0B8938 !important;
    opacity: 0.25 !important;
    border: none !important;
    border-radius: 2px !important;
    transform: skewX(-20deg) !important;
    margin-right: 8px !important;
    float: none !important;
  }

  .carosuel-left-image ol.sppb-carousel-indicators li.active {
    opacity: 1 !important;
    background-color: #0B8938 !important;
  }

  /* --------------------------------------------------------------------------
     8. CANS CAROUSEL (CANCEL DESKTOP -90px MARGIN & REPAIR OVERFLOW)
     -------------------------------------------------------------------------- */
  .landing-product-carosuel .sppb-carousel-extended {
    position: relative !important;
    padding: 0 45px !important;
    box-sizing: border-box !important;
  }

  .product-carosuel-3-3 .sppb-carousel-extended-item {
    max-width: 270px !important;
    width: 270px !important;
    margin: 0 auto !important;
    min-height: 410px !important;
    background-size: 100% 270px !important;
    background-position: center bottom !important;
    padding: 15px 10px 20px 10px !important;
    box-sizing: border-box !important;
  }

  /* CRITICAL: Cancel desktop margin: 0 -90px 0 0 !important */
  .landing-product-carosuel .sppb-carousel-extended-item img {
    max-width: 165px !important;
    height: 185px !important;
    object-fit: contain !important;
    margin: 0 auto !important; /* Resets the -90px desktop offset */
    display: block !important;
  }

  .landing-product-carosuel .sppb-carousel-extended-team-content,
  .landing-product-carosuel .sppb-carousel-extended-team-content-wrap,
  .landing-product-carosuel .sppb-carousel-layout1 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 0 0 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 15px font so title fits on ONE line like Target Image 1 */
  .product-carosuel-3-3 .sppb-carousel-extended-team-name,
  .product-carosuel-3-3 .sppb-carousel-extended-team-name a,
  .landing-product-carosuel .sppb-carousel-extended-team-name,
  .landing-product-carosuel .sppb-carousel-extended-team-name a {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
  }

  .product-carosuel-3-3 .sppb-carousel-extended-team-designation,
  .landing-product-carosuel .sppb-carousel-extended-team-designation {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    opacity: 0.95 !important;
    text-align: center !important;
  }

  /* Override desktop -60px arrow margins on mobile */
  .landing-product-carosuel .sppb-carousel-extended-nav-control {
    position: absolute !important;
    top: 58% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 25 !important;
  }

  .landing-product-carosuel .sppb-carousel-extended-nav-control .nav-control {
    pointer-events: auto !important;
    position: absolute !important;
    top: -24px !important;
    width: 36px !important;
    height: 48px !important;
    border: none !important;
    background-color: transparent !important;
  }

  .landing-product-carosuel .sppb-carousel-extended-nav-control span.prev-control {
    left: 4px !important;
    right: auto !important;
    background: url(/media/mask/left-arrow-green.png) no-repeat center center / contain !important;
  }

  .landing-product-carosuel .sppb-carousel-extended-nav-control span.next-control {
    right: 4px !important;
    left: auto !important;
    background: url(/media/mask/right-arrow-green.png) no-repeat center center / contain !important;
  }

  /* --- 9. "LEARN MORE" SECTION --- */
  #learn-more-section {
    background-color: #005596 !important;
    padding: 40px 20px !important;
    text-align: left !important;
  }

  #learn-more-section h2.sppb-addon-title {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 38px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    max-width: 260px !important;
  }

  #learn-more-section .sppb-col-md-4 {
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* --------------------------------------------------------------------------
     "EXPLORE THE RANGE" HEADER (RESET DESKTOP NEGATIVE OFFSET)
     -------------------------------------------------------------------------- */
  #section-id-1716979585078 {
    background-color: #000000 !important;
    padding: 35px 20px 30px 20px !important;
    margin: 0 !important;
  }

  #section-id-1716979585078 .sppb-container-inner,
  #section-id-1716979585078 .sppb-row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Reset column width and float */
  #column-wrap-id-1716979585076,
  #column-id-1716979585076 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-align: left !important;
  }

  /* CRITICAL: Cancel desktop float: inline-end and left: calc(20px - 8vh) */
  div#sppb-addon-wrapper-1716979585081 {
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Title: acumin-pro-condensed - 900 italic (52px / 48px) */
  #sppb-addon-1716979585081 h3.sppb-addon-title {
    font-family: "acumin-pro-condensed", sans-serif !important;
    font-size: 52px !important;
    line-height: 48px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase !important;
  }

  /* Subtitle text */
  #sppb-addon-1716979585081 .sppb-addon-content p,
  #sppb-addon-1716979585081 .sppb-addon-content strong {
    font-family: "acumin-pro-semi-condensed", sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 320px !important;
    display: block !important;
  }
}

/* ==========================================================================
   26. GLOBAL CTA & ONLINE PRODUCT SUPPORT (STYLED AS "VIEW OUR RANGES")
   ========================================================================== */

/* --- 1. CONTAINER & ALIGNMENT (OVERRIDE .text-center) --- */
.sppb-addon-cta,
.view-our-ranges,
div:has(> .sppb-cta-title),
.text-center:has(.sppb-cta-title) {
  text-align: left !important;
  max-width: 540px !important;
  box-sizing: border-box !important;
}

/* Hide empty ghost paragraphs generated by SP Page Builder */
.sppb-addon-cta p:empty,
.text-center:has(.sppb-cta-title) p:empty,
p.sppb-cta-subtitle:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 2. SMALL SECTION TITLE ("Online Product Support") --- */
.sppb-cta-title,
.text-center:has(.sppb-cta-title) h3.sppb-cta-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* --- 3. MAIN HIGHLIGHT QUESTION ("Are you unsure about a term...") --- */
.text-center:has(.sppb-cta-title) p[style*="font-size: 26px"],
.text-center:has(.sppb-cta-title) p[style*="font-size:26px"],
.sppb-addon-cta p[style*="font-size: 26px"],
.sppb-addon-cta p[style*="font-size:26px"] {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  /*font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 36px !important;*/
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
}

/* --- 4. BODY DESCRIPTION TEXT --- */
.sppb-cta-text,
.text-center:has(.sppb-cta-title) .sppb-cta-text,
.text-center:has(.sppb-cta-title) .sppb-cta-text span {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px;
  line-height: 24px !important;
  font-weight: 400 !important;
  margin-bottom: 30px !important;
  text-align: left !important;
  opacity: 0.95 !important;
  display: block !important;
}

/* --- 5. OUTLINED BUTTON (MATCHING "VIEW OUR RANGES") --- */
.text-center:has(.sppb-cta-title) a.sppb-btn,
.sppb-addon-cta a.sppb-btn {
  display: inline-block !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  line-height: 20px !important;
  padding: 14px 38px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 50%;
  text-align: center !important;
  text-transform: initial !important;
  transition: all 0.25s ease-in-out !important;
}



/* Hover state: solid white background with Chemcraft Blue text */
.text-center:has(.sppb-cta-title) a.sppb-btn:hover,
.sppb-addon-cta a.sppb-btn:hover {
  background-color: #ffffff !important;
  color: #005596 !important;
  border-color: #ffffff !important;
}


/* --- 6. MOBILE RESPONSIVENESS (< 992px) --- */
@media (max-width: 991.98px) {
  .sppb-addon-cta,
  .view-our-ranges,
  div:has(> .sppb-cta-title),
  .text-center:has(.sppb-cta-title) {
    max-width: 100% !important;
    text-align: left !important;
    /*padding: 0 10px !important;*/
  }

  .sppb-cta-title,
  .text-center:has(.sppb-cta-title) h3.sppb-cta-title {
    font-size: 20px;
    line-height: 26px;
    text-align: left !important;
  }

  .text-center:has(.sppb-cta-title) p[style*="font-size: 26px"],
  .text-center:has(.sppb-cta-title) p[style*="font-size:26px"],
  .sppb-addon-cta p[style*="font-size: 26px"],
  .sppb-addon-cta p[style*="font-size:26px"] {
    font-size: 22px;
    line-height: 30px;
    text-align: left !important;
  }

  .sppb-cta-text,
  .text-center:has(.sppb-cta-title) .sppb-cta-text {
    font-size: 15px !important;
    line-height: 24px !important;
    text-align: left !important;
  }

  /* Full-width button on mobile screens */
  .text-center:has(.sppb-cta-title) a.sppb-btn,
  .sppb-addon-cta a.sppb-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
  }
}

#mod-custom174, #mod-custom183 {
    padding: 0 35px;
    margin-top: 15px;
}
#mod-custom174 a, #mod-custom183 a{
color: #888 !important;
font-size: 14px;
}


/*prduct search dystrybutor*/
/* Tło i kontener sekcji */
.finder-products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #000; /* czarne tło jak na zrzucie */
    box-sizing: border-box;
}

/* Pasek wyszukiwania */
.finder-search-bar {
    display: flex;
    width: 100%;
    margin-bottom: 50px;
}

.finder-input {
    flex: 1;
    height: 48px;
    padding: 0 15px;
    font-size: 18px;
    border: 1px solid #fff;
    background: #fff;
    color: #000;
    outline: none;
    box-sizing: border-box;
}

.finder-btn-submit {
    height: 48px;
    padding: 0 35px;
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    border-left: none;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
}

.finder-btn-submit:hover {
    background: #222;
}

/* Siatka kafelków */
.finder-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Pojedynczy kafelek */
.product-tile {
    background: #fff;
    padding: 30px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    box-sizing: border-box;
}

.product-title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 30px 0;
}

/* Przyciski w kafelku */
.product-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-product {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 10px;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.btn-download {
    background-color: #00873d; /* kolor zielony */
    color: #fff !important;
    border: 1px solid #00873d;
    font-weight: 600;
}

.btn-download:hover {
    background-color: #006b30;
    border-color: #006b30;
}

.btn-details {
    background-color: transparent;
    color: #000 !important;
    border: 1px solid #000;
    font-weight: 400;
}

.btn-details:hover {
    background-color: #000;
    color: #fff !important;
}

.itemid-189 #sp-main-body {
  padding: 0;
}

.itemid-189 #sp-section-9
{
  background: #000 !important;
}

#section-id-1657023052397 a{
  min-height: 80px;
  display: flex;
  align-items: center;
}

.itemid-246 .sppb-panel.sppb-panel-custom {
  border-top: 1px #fff solid;
}


.itemid-246 .fas.fa-plus {
  transition: .3s;
}

.itemid-246 .active .fas.fa-plus {
  transform: rotate(45deg);
  transition: .3s;
}
/* ==========================================================================
   VIDEO TUTORIAL CARDS & DOWNLOAD AS PDF BAR (RESTORED 16:9 RATIO)
   ========================================================================== */

/* --- 1. EQUAL HEIGHT GRID CARDS --- */
.sppb-row:has(.video-column) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.sppb-col-md-6:has(.video-column) {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 30px !important;
}

.video-column {
  background-color: #ffffff !important;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.25) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.video-column .sppb-column-addons {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
}

/* --- 2. RESTORE 16:9 VIDEO RATIO (FIX ZERO HEIGHT BUG) --- */
.video-column div[id*="sppb-addon-wrapper-"]:has(.sppb-addon-video) {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.video-column .sppb-addon-video {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.video-column .sppb-video-block.sppb-embed-responsive,
.video-column .sppb-video-block.sppb-embed-responsive-16by9 {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  padding-bottom: 56.25% !important; /* Critical: 16:9 aspect ratio */
  overflow: hidden !important;
  margin: 0 !important;
}

.video-column .sppb-embed-responsive-item,
.video-column .sppb-video-block iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* --- 3. TITLE & CONTENT CONTAINER --- */
.video-column div[id*="sppb-addon-wrapper-"]:has(.video-content) {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important; /* Pushes download bar to bottom */
  display: flex !important;
  flex-direction: column !important;
}

.video-column .video-content {
  padding: 25px 5px 30px 5px !important;
  margin: 0 !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
}

.video-column .video-content h3.sppb-addon-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* --- 4. "DOWNLOAD AS PDF" BOTTOM BAR & SOLID BLUE SQUARE ICON --- */
.video-column div[id*="sppb-addon-wrapper-"]:has(.video-link),
.video-column .sppb-text-left:has(.video-link) {
  margin: auto 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.video-column a.sppb-btn.video-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 73px !important;
  max-height: 73px !important;
  background-color: #ffffff !important;
  color: #005596 !important;
  border: none !important;
  border-top: 1px solid #d5d5d5 !important;
  border-radius: 0 !important;
  padding: 0 70px 0 25px !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.video-column a.sppb-btn.video-link:hover {
  background-color: #f8fafc !important;
  color: #003e6e !important;
}

/* Solid Chemcraft Blue Square on the right edge */
.video-column a.sppb-btn.video-link i.fa-download,
.video-column a.sppb-btn.video-link i.fas.fa-download {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 73px !important;
  height: 73px !important;
  background-color: #005596 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 43px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease-in-out !important;
}

.video-column a.sppb-btn.video-link:hover i.fa-download,
.video-column a.sppb-btn.video-link:hover i.fas.fa-download {
  background-color: #003e6e !important;
}

#rebuilt-video-grid .sppb-addon-content {
  color: #005596 !important;
}


/* ==========================================================================
   27. USER PROFILE & MY ACCOUNT EDIT FORM (.profile-edit & #member-profile)
   Fixed: Removed unwanted white password toggle boxes to match Target Image 1
   ========================================================================== */

/* 1. Page and form container background */
body:has(.profile-edit),
body:has(#member-profile),
.view-profile,
.com-users-profile__edit,
.profile-edit,
.profile-edit .well,
#member-profile {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

.profile-edit {
  max-width: 900px !important;
  margin: 40px auto 80px auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

/* 2. Top Legend Title ("Edit Your Profile") with white divider line */
.profile-edit legend {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding-bottom: 15px !important;
  margin-bottom: 35px !important;
  width: 100% !important;
  display: block !important;
}

/* 3. Hide Joomla 5 helper texts, password rules, meter, AND the eye toggle button (removes the white boxes) */
.profile-edit .form-text,
.profile-edit [id*="-desc"],
.profile-edit [id*="-rules"],
.profile-edit meter,
.profile-edit [id*="password-"],
.profile-edit .input-password-toggle {
  display: none !important;
}

/* 4. Horizontal 2-Column Row Layout (.control-group) */
.profile-edit .control-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}

/* Left Column: Labels aligned to the right */
.profile-edit .control-label {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  text-align: right !important;
  padding-right: 25px !important;
  box-sizing: border-box !important;
}

.profile-edit .control-label label,
.profile-edit .control-label .form-label {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  margin: 0 !important;
  line-height: 24px;
}

.profile-edit .control-label .star {
  color: #ffffff !important;
  margin-left: 3px !important;
}

/* Right Column: Inputs container */
.profile-edit .controls {
  flex: 1 1 auto !important;
  max-width: 550px !important;
  width: 100% !important;
  margin-left: 0;
}

/* 5. Sharp Black Inputs with White Border */
.profile-edit input.form-control,
.profile-edit input[type="text"],
.profile-edit input[type="password"],
.profile-edit input[type="email"] {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 0 !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 550px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.profile-edit input.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25) !important;
}

/* Readonly username styling */
.profile-edit input[readonly] {
  background-color: #080808 !important;
  opacity: 0.9 !important;
}

/* Reset password wrappers so inputs stretch cleanly without extra flex containers */
.profile-edit .password-group,
.profile-edit .input-group {
  width: 100% !important;
  max-width: 550px !important;
  display: block !important;
}

/* 6. Action Buttons: Strictly scoped to the submit container at the bottom */
.profile-edit .com-users-profile__edit-submit {
  display: flex !important;
}

/* Align buttons with the right inputs column (indent by 240px) */
.profile-edit .com-users-profile__edit-submit > div {
  margin-left: 240px !important;
  display: flex !important;
  gap: 15px !important;
}

/* Hide Joomla 5 check & cancel icons */
.profile-edit .com-users-profile__edit-submit .btn [class*="icon-"] {
  display: none !important;
}

/* White square submit buttons */
.profile-edit .com-users-profile__edit-submit .btn {
  border-radius: 0 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  padding: 10px 30px !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease-in-out !important;
}

.profile-edit .com-users-profile__edit-submit .btn:hover {
  background-color: #5e5e5e !important;
  color: #ffffff !important;
  border-color: #5e5e5e !important;
}

/* 7. Mobile Responsiveness (< 768px) */
@media (max-width: 767.98px) {
  .profile-edit .control-group {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .profile-edit .control-label {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .profile-edit .controls {
    width: 100% !important;
    max-width: 100% !important;
  }

  .profile-edit .com-users-profile__edit-submit > div {
    margin-left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .profile-edit .com-users-profile__edit-submit .btn {
    width: 100% !important;
    text-align: center !important;
  }
}

div#login-info {
  font-family:'Montserrat', sans-serif !important;
}

/* ==========================================================================
   28. DISTRIBUTOR VIDEO FILTERS ON DARK BACKGROUND (.clear-filters-dis)
   Matches Target Image 1: [ Tint Room | MaestroHue ] with Clear filters on right
   ========================================================================== */

/* 1. Main Navigation Row */
.clear-filters-dis .sppb-nav-pills,
.clear-filters-dis ul.sppb-nav-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  list-style: none !important;
  width: 100% !important;
}

/* 2. Left Segmented Buttons: Tint Room, MaestroHue */
.clear-filters-dis .sppb-nav-pills > li:not(:first-child) {
  order: 1 !important;
  margin: 0 !important;
  display: flex !important;
}

.clear-filters-dis .sppb-nav-pills > li:not(:first-child) > a {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Join category buttons together by removing left border from consecutive items */
.clear-filters-dis .sppb-nav-pills > li:not(:first-child) + li:not(:first-child) > a {
  border-left: none !important;
}

/* Hover state for category tabs */
.clear-filters-dis .sppb-nav-pills > li:not(:first-child) > a:hover {
  background-color: #5e5e5e !important;
  color: #ffffff !important;
}

/* Active state for category tabs (Chemcraft Blue) */
.clear-filters-dis .sppb-nav-pills > li:not(:first-child).active > a {
	background-color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
    color: #333 !important;
}

/* 3. "Clear filters" Button - Anchored to the far right */
.clear-filters-dis .sppb-nav-pills > li:first-child {
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  display: flex !important;
}

.clear-filters-dis .sppb-nav-pills > li:first-child > a,
.clear-filters-dis .sppb-nav-pills > li:first-child.active > a {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover effect for Clear filters (turns red on hover) */
.clear-filters-dis .sppb-nav-pills > li:first-child > a:hover,
.clear-filters-dis .sppb-nav-pills > li:first-child.active > a:hover {
  background-color: #d90429 !important;
  border-color: #d90429 !important;
  color: #ffffff !important;
}

/* 4. Mobile Responsiveness (< 768px) */
@media (max-width: 767.98px) {
  .clear-filters-dis .sppb-nav-pills {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .clear-filters-dis .sppb-nav-pills > li > a {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

.itemid-250 .sppb-btn-custom {
    background-color: #00A94F;
    color: #000;
    padding: 10px 30px 10px 30px;
    font-size: 16px;
}

/*Contact FORM*/

.convertforms .cf-select::after {
  display: none;
}


/* ==========================================================================
   PODSTRONA WYBORU LOKALIZACJI / JĘZYKA (body.itemid-117)
   ========================================================================== */

/* 1. Ukrycie paska "Find a distributor" na tej podstronie */
body.itemid-117 #sp-section-3,
body.itemid-117 #find-distributor-box {
  display: none !important;
}

/* 2. Czarne tło całej sekcji */
body.itemid-117 #sp-main-body,
body.itemid-117 #section-id-1641233543940 {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* 3. Tytuł: usunięcie nakładania się linijek (line-height) i waga fontu 400 */
body.itemid-117 #sppb-addon-1641233561095 h1.sppb-addon-title,
body.itemid-117 #sppb-addon-1641233561095 h1.sppb-addon-title div {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 80px !important;
  line-height: 88px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin: 40px 0 0 0 !important;
  text-align: left !important;
}

body.itemid-117 div#sppb-addon-1641233561095 .sppb-addon-content {
    display: none !important;
}

body.itemid-117 #sppb-addon-wrapper-1641233628676 {
  margin-top: 0px;
}

/* 4. Pogrubione białe nagłówki regionów (North America, Canada) */
body.itemid-117 #sppb-addon-wrapper-1641233628676 .sppb-addon-content,
body.itemid-117 #sppb-addon-wrapper-1641233544061 .sppb-addon-content {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}

/* Odstęp przed sekcją Canada */
body.itemid-117 #sppb-addon-wrapper-1641233544061 {
  margin-top: 30px !important;
}

/* 5. Linki językowe (US English, Canadian English, Français) – BIAŁE zamiast niebieskich */
body.itemid-117 #column-id-1641235077617 a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
  color: #ffffff !important;            /* Wymuszenie bieli */
  text-decoration: none !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
}

body.itemid-117 #column-id-1641235077617 a:hover {
  color: #00A94F !important;
  text-decoration: underline !important;
}

/* Drobne odstępy pod każdym linkiem */
body.itemid-117 #sppb-addon-wrapper-1641233544036,
body.itemid-117 #sppb-addon-wrapper-1641233544081,
body.itemid-117 #sppb-addon-wrapper-1641233544078 {
  margin-bottom: 8px !important;
}

/* 6. Wyrównanie i marginesy na mobile (< 992px) */
@media (max-width: 991.98px) {
  body.itemid-117 #section-id-1641233543940 {
    padding: 35px 20px 60px 20px !important;
    min-height: auto !important;
  }

  body.itemid-117 #section-id-1641233543940 .sppb-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Usunięcie bocznych pustych kolumn z siatki */
  body.itemid-117 #column-wrap-id-1641233543938,
  body.itemid-117 #column-wrap-id-1641235077618 {
    display: none !important;
  }

  /* Kolumna z tytułem i kolumna z linkami na 100% szerokości */
  body.itemid-117 #column-wrap-id-1641233543939,
  body.itemid-117 #column-wrap-id-1641235077617 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}


.sp-megamenu-parent > li > a.aqualink
{
  color: #7AD9E4 !important;
}