/**
 * Chemnovatic Base Layout
 * Replaces Avada CSS framework — class names use chem-* prefix
 * Visual appearance matches production chemnovatic.com
 *
 * @package Chemnovatic
 */

/* ===========================
   DESIGN TOKENS
   Sourced 1:1 from production chemnovatic.com Avada theme options.
   Faza 1 (2026-04-09): zamrożenie geometrii i typografii.
   =========================== */

:root {
    /* Colors */
    --chem-primary: #ea5b0c;
    --chem-primary-dark: #d04e08;
    --chem-body-text: #000000;
    --chem-body-bg: #cdcdcd;         /* prod body bg (sections paint over) */
    --chem-content-bg: #ffffff;      /* content area bg */
    --chem-heading-color: #ea5b0c;   /* prod H1-H6 = primary */
    --chem-link-color: #ea5b0c;
    --chem-link-hover: #ea5b0c;
    --chem-footer-bg: #666666;
    --chem-footer-text: #ffffff;
    --chem-footer-link: rgba(255,255,255,0.8);
    --chem-copyright-text: rgba(255,255,255,0.4);
    --chem-menu-bg: #1d1d1b;
    --chem-menu-text: #ffffff;
    --chem-menu-hover-bg: #ea5b0c;
    --chem-submenu-bg: #1d1d1b;
    --chem-submenu-text: #ffffff;
    --chem-submenu-sep: rgba(255,255,255,0.08);
    --chem-border: #e2e2e2;

    /* Typography families */
    --chem-font-body: "Open Sans", Verdana, Geneva, sans-serif;
    --chem-font-heading: "Open Sans", Verdana, Geneva, sans-serif;
    --chem-font-nav: "Raleway", "Open Sans", Arial, sans-serif;

    /* Typography sizes (prod Avada) */
    --chem-body-size: 16px;
    --chem-body-line-height: 1.8;
    --chem-body-weight: 400;
    --chem-h1-size: 42px;
    --chem-h2-size: 36px;
    --chem-h3-size: 24px;
    --chem-h4-size: 22px;
    --chem-h5-size: 20px;
    --chem-h6-size: 18px;
    --chem-heading-weight: 700;
    --chem-h1-line-height: 1.16;
    --chem-h2-line-height: 1.2;
    --chem-h3-line-height: 1.3;

    /* Nav/menu sizes (prod Avada) */
    --chem-nav-font-size: 16px;
    --chem-nav-font-weight: 400;
    --chem-nav-height: 60px;
    --chem-nav-padding: 20px;
    --chem-submenu-font-size: 14px;
    --chem-submenu-padding: 12px 20px;
    --chem-submenu-min-width: 260px;
    --chem-dropdown-top-border: 3px;

    /* Geometry */
    --chem-site-width: 1200px;        /* prod --site_width */
    --chem-container-padding: 30px;   /* prod --hundredp_padding */
    --chem-column-gap: 4%;            /* prod fusion-columns: 2% per side = 4% total */
    --chem-column-half-gap: 2%;       /* prod column padding */
    --chem-main-padding-bottom: 60px; /* prod --main_padding-bottom */
    --chem-header-padding-v: 5px;     /* prod --header_padding-top/bottom */
    --chem-section-padding-v: 0;      /* per-section padding via ACF inline styles */

    /* Breakpoints */
    --chem-bp-mobile: 800px;
    --chem-bp-tablet: 1000px;

    /* Buttons */
    --chem-btn-bg: #ea5b0c;
    --chem-btn-text: #ffffff;
    --chem-btn-padding: 13px 29px;
    --chem-btn-font-size: 14px;
    --chem-btn-font-family: "Open Sans", Verdana, Geneva, sans-serif;
    --chem-btn-text-transform: uppercase;

    /* Avada Global Options typography vars — migrated content references these
       via inline style (e.g. <span style="color: var(--h2_typography-color)">).
       Without them the spans collapsed to 16px black (CHEMNOVATIC Poland on
       about-us, plus any legacy content using var(--hN_typography-*)). */
    --h1_typography-color: var(--chem-heading-color);
    --h1_typography-font-family: var(--chem-font-heading);
    --h1_typography-font-size: var(--chem-h1-size);
    --h1_typography-font-weight: var(--chem-heading-weight);
    --h1_typography-font-style: normal;
    --h1_typography-letter-spacing: 0;
    --h1_typography-line-height: var(--chem-h1-line-height);
    --h1_typography-text-transform: none;
    --h2_typography-color: var(--chem-heading-color);
    --h2_typography-font-family: var(--chem-font-heading);
    --h2_typography-font-size: var(--chem-h2-size);
    --h2_typography-font-weight: var(--chem-heading-weight);
    --h2_typography-font-style: normal;
    --h2_typography-letter-spacing: 0;
    --h2_typography-line-height: var(--chem-h2-line-height);
    --h2_typography-text-transform: none;
    --h3_typography-color: var(--chem-heading-color);
    --h3_typography-font-family: var(--chem-font-heading);
    --h3_typography-font-size: var(--chem-h3-size);
    --h3_typography-font-weight: var(--chem-heading-weight);
    --h3_typography-font-style: normal;
    --h3_typography-letter-spacing: 0;
    --h3_typography-line-height: var(--chem-h3-line-height);
    --h3_typography-text-transform: none;
    --h4_typography-color: var(--chem-heading-color);
    --h4_typography-font-family: var(--chem-font-heading);
    --h4_typography-font-size: var(--chem-h4-size);
    --h4_typography-font-weight: var(--chem-heading-weight);
    --h4_typography-font-style: normal;
    --h4_typography-letter-spacing: 0;
    --h4_typography-line-height: 1.4;
    --h4_typography-text-transform: none;
    --h5_typography-color: var(--chem-heading-color);
    --h5_typography-font-family: var(--chem-font-heading);
    --h5_typography-font-size: var(--chem-h5-size);
    --h5_typography-font-weight: var(--chem-heading-weight);
    --h6_typography-color: var(--chem-heading-color);
    --h6_typography-font-family: var(--chem-font-heading);
    --h6_typography-font-size: var(--chem-h6-size);
    --h6_typography-font-weight: var(--chem-heading-weight);

    /* === Back-compat aliases (keep old names working) === */
    --color-primary: var(--chem-primary);
    --color-primary-dark: var(--chem-primary-dark);
    --color-dark: #333333;
    --color-text: var(--chem-body-text);
    --color-light: #f5f5f5;
    --color-white: #ffffff;
    --color-border: var(--chem-border);
    --font-body: var(--chem-font-body);
    --font-heading: var(--chem-font-heading);
    --max-width: var(--chem-site-width);
    --site-gutter: var(--chem-column-half-gap);
    --section-padding: 40px;
}
@media (min-width: 1024px) {
    :root {
        --site-gutter: var(--chem-container-padding);
        --section-padding: var(--chem-main-padding-bottom);
    }
}

/* ===========================
   RESET & BASE
   =========================== */

*, *::before, *::after {
    box-sizing: border-box;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--chem-font-body);
    font-size: var(--chem-body-size);
    line-height: var(--chem-body-line-height);
    font-weight: var(--chem-body-weight);
    color: var(--chem-body-text);
    background: var(--chem-body-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--chem-font-heading);
    color: var(--chem-heading-color);
    font-weight: var(--chem-heading-weight);
    line-height: var(--chem-h3-line-height);
    margin-top: 0;
}

h1 { font-size: var(--chem-h1-size); line-height: var(--chem-h1-line-height); margin-top: 0.67em; margin-bottom: 0.47em; }
h2 { font-size: var(--chem-h2-size); line-height: var(--chem-h2-line-height); margin-top: 0.75em; margin-bottom: 0.1em; }
h3 { font-size: var(--chem-h3-size); }
h4 { font-size: var(--chem-h4-size); }
h5 { font-size: var(--chem-h5-size); }
h6 { font-size: var(--chem-h6-size); }

a {
    color: var(--chem-link-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--chem-link-hover);
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    padding-left: 20px;
}

.clearfix::after,
.chem-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ===========================
   LAYOUT GRID
   =========================== */

.chem-row {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0 30px;
}

.chem-column {
    flex: 1;
    padding: 0 2%;
    min-width: 0;
}

#wrapper {
    overflow: visible;
    position: relative;
}

/* ===========================
   HEADER — matches production V4 layout
   =========================== */

.chem-header {
    position: relative;
    z-index: 10000;
    background: #ffffff;
}

.chem-header-wrapper {
    width: 100%;
}

.chem-header-v4 {
    position: relative;
}

.chem-header-sticky-height {
    display: none;
}

.chem-sticky-header-wrapper {
    background: #ffffff;
}

/* Top header row: mobile icons + logo + phone/email */
.chem-sticky-header-wrapper > .chem-header {
    border-bottom: none;
}

.chem-sticky-header-wrapper > .chem-header > .chem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: var(--chem-header-padding-v);
    padding-bottom: var(--chem-header-padding-v);
    min-height: 80px;
}

/* ===========================
   LOGO — production: left side, max-height 80px
   =========================== */

.chem-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 5px 0;
}

.chem-logo-link {
    display: inline-block;
    line-height: 0;
}

.chem-logo-1x {
    max-height: 80px;
    width: auto;
    height: auto;
}

/* ===========================
   HEADER CONTENT 3 — phone / email / login
   Production: right side of logo row, flexbox, space-between
   =========================== */

.chem-header-content-3-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.chem-header-tagline {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
}

.chem-header-tagline > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chem-header-tagline a {
    color: #ea5b0c;
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 700;
}

.chem-header-tagline a:hover {
    color: #ea5b0c;
}

.chem-header-tagline .glyphicon,
.chem-header-tagline .fas {
    color: #ea5b0c;
    font-size: 14px;
}

#header-login-link {
    white-space: nowrap;
}

#header-login-link a {
    color: #ea5b0c;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Logged-in state — replaces "LOG IN", matches production right-corner style.
   PDF 7 p3: PROD renders "Logged as {user}" in orange, not black. */
#header-login-link.is-logged-in a {
    color: #ea5b0c;
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
}

#header-login-link.is-logged-in a:hover {
    color: #d24f0a;
}

#header-login-link.is-logged-in a .fas {
    color: #ea5b0c;
}

#header-login-link.is-logged-in strong {
    font-weight: 700;
}

/* ===========================
   SECONDARY MAIN MENU BAR
   Production: below header, white bg, orange bottom border
   =========================== */

.chem-secondary-main-menu {
    background: #1d1d1b;
    border-bottom: 3px solid #ea5b0c;
}

.chem-secondary-main-menu > .chem-row {
    /* centered menu */
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

/* ===========================
   MAIN NAVIGATION
   Production: horizontal, uppercase, 14px, font-weight 600
   =========================== */

nav.chem-main-menu {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

ul.chem-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

ul.chem-menu > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Force visual order to match production (Avada):
   Firma → EUR → flag → search → cart → My Account.
   `!important` is required because some other stylesheet assigns
   custom `order` values to these specific menu items.
   R19 (tester PDF 09-07 item 1): PROD puts the CURRENCY before the language
   switcher — the previous values here had them swapped. */
ul.chem-menu > li { order: 0 !important; }
ul.chem-menu > li.menu-item-vapycurrency { order: 1 !important; }
ul.chem-menu > li.pll-parent-menu-item { order: 2 !important; }
ul.chem-menu > li.chem-main-menu-search { order: 3 !important; }
ul.chem-menu > li.chem-menu-cart { order: 4 !important; }
ul.chem-menu > li.menu-my-account { order: 10 !important; }

/* My Account — show FA user icon only, hide text (matches production).
   The link's direct text node is hidden via font-size: 0; the pseudo-element
   restores its own font-size for the icon glyph. */
ul.chem-menu > li.menu-my-account > a {
    font-size: 0 !important;
    color: transparent;
}
ul.chem-menu > li.menu-my-account > a::before {
    content: "\f007"; /* fa-user */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 14px !important; /* match PROD account icon (#54) */
    color: var(--chem-menu-text, #ffffff);
    display: inline-block;
}
/* Top-nav account / currency / language: orange cell background on hover
   to match PROD (#64). The account icon then flips to white so it stays
   visible on the orange fill. */
ul.chem-menu > li.menu-my-account:hover > a,
ul.chem-menu > li.menu-item-vapycurrency:hover > a,
ul.chem-menu > li.pll-parent-menu-item:hover > a {
    background: var(--chem-primary, #ea5b0c);
}
ul.chem-menu > li.menu-my-account:hover > a::before {
    color: #ffffff;
}

ul.chem-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0 var(--chem-nav-padding);
    min-height: var(--chem-nav-height);
    color: var(--chem-menu-text);
    font-family: var(--chem-font-nav);
    font-size: var(--chem-nav-font-size);
    font-weight: var(--chem-nav-font-weight);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

/* Active page indicator — orange text (the underline bar is drawn by the
   ::before rule in main.css). */
ul.chem-menu > li.current-menu-item > a,
ul.chem-menu > li.current-menu-ancestor > a,
ul.chem-menu > li.current_page_item > a {
    color: var(--chem-primary);
}

/* PDF 7: hovering a top-level item — or opening its dropdown/megamenu —
   fills the whole cell orange with white text, matching PROD. Cart and
   search icons keep their own treatment. !important beats the active-item
   colour rule in main.css. */
ul.chem-menu > li:not(.chem-menu-cart):not(.chem-main-menu-search):hover > a,
ul.chem-menu > li.chem-dropdown-open > a,
ul.chem-menu > li.chem-has-megamenu:hover > a {
    color: #ffffff !important;
    background-color: var(--chem-primary) !important;
}

/* Dropdown sub-menus (match prod: dark bg, white text) */
ul.chem-menu li > ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: var(--chem-submenu-min-width);
    background: var(--chem-submenu-bg);
    box-shadow: 1px 1px 30px rgba(0,0,0,0.06);
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--chem-dropdown-top-border) solid var(--chem-primary);
}

ul.chem-menu li:hover > ul.sub-menu {
    display: block;
}

ul.chem-menu ul.sub-menu li {
    display: block;
}

ul.chem-menu ul.sub-menu li a {
    display: block;
    padding: var(--chem-submenu-padding);
    color: var(--chem-submenu-text);
    font-family: var(--chem-font-nav);
    font-size: var(--chem-submenu-font-size);
    font-weight: var(--chem-nav-font-weight);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--chem-submenu-sep);
    transition: color 0.2s, background 0.2s;
}

ul.chem-menu ul.sub-menu li a:hover {
    color: var(--chem-primary);
    background: rgba(255,255,255,0.08);
}

ul.chem-menu ul.sub-menu li:last-child a {
    border-bottom: none;
}

/* 3rd level sub-menus */
ul.chem-menu li ul.sub-menu li > ul.sub-menu {
    top: 0;
    left: 100%;
}

/* Currency/dropdown classes used by myvapy-shop-customize plugin */
.chem-dropdown-menu {
    position: relative;
}

.chem-highlight {
    text-decoration: none;
    color: inherit;
}

.chem-highlight:hover {
    color: #ea5b0c;
}

.chem-caret {
    margin-left: 4px;
    display: inline-block;
}

.chem-dropdown-indicator::before {
    content: "\f107"; /* FontAwesome angle-down */
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    font-size: 11px;
}

.chem-dropdown-submenu {
    display: block;
}

/* Language flags — active flag in top bar + sub-menu. Mirrors PROD natural
   25x17 flag size from /wp-content/polylang/*.png. */
ul.chem-menu > li.pll-parent-menu-item > a img,
ul.chem-menu > li.pll-parent-menu-item > a .menu-text img,
ul.chem-menu .lang-item img {
    vertical-align: middle;
    width: 25px;
    height: auto;
}

/* Search icon in main menu (matches prod Avada fusion-main-menu-search) */
ul.chem-menu > li.chem-main-menu-search {
    position: relative;
    display: flex;
    align-items: stretch;
}
ul.chem-menu > li.chem-main-menu-search > a.chem-main-menu-icon {
    display: flex;
    align-items: center;
    padding: 0 15px;
    min-height: var(--chem-nav-height);
    color: var(--chem-menu-text);
    text-decoration: none;
    font-size: 18px;
}
ul.chem-menu > li.chem-main-menu-search > a.chem-main-menu-icon:hover {
    color: var(--chem-primary);
}
/* Search dropdown matches PROD `.fusion-search-form-clean`: wide centered
   white input with magnifying-glass inside (50px left padding), no submit
   button. Dropdown background is dark; positioned under nav, centered. */
ul.chem-menu > li.chem-main-menu-search .chem-search-contents {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    /* Wide form centered horizontally relative to nav area */
    width: 650px;
    max-width: 90vw;
    z-index: 10001;
    background: var(--chem-submenu-bg);
    padding: 20px 30px;
    box-shadow: 1px 1px 30px rgba(0,0,0,0.15);
}
/* Click-only (PROD parity): the dropdown opens on the search-icon click
   toggle (.is-open), not on hover. Keyboard users open it with Enter on the
   focused icon, which fires the same click handler. */
ul.chem-menu > li.chem-main-menu-search.is-open .chem-search-contents {
    display: block;
}

/* Search icon turns orange when search is open (PROD parity) */
ul.chem-menu > li.chem-main-menu-search.is-open > a.chem-main-menu-icon,
ul.chem-menu > li.chem-main-menu-search.chem-search-open > a.chem-main-menu-icon {
    color: var(--chem-primary);
}

.chem-search-form {
    margin: 0;
    width: 100%;
    display: block;
}
.chem-search-form-content,
.chem-search-form .search-field {
    position: relative;
    width: 100%;
    display: block;
}
.chem-search-form label {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}
.chem-search-form label::before {
    content: "\f002"; /* fa-search */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}
.chem-search-form input[type="search"] {
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px 0 50px !important;
    border: 1px solid rgb(158, 160, 164) !important;
    background: #ffffff !important;
    color: #333 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    max-width: none !important;
    min-width: 0 !important;
}
.chem-search-form input[type="search"]:focus {
    border-color: var(--chem-primary);
}
.chem-search-form input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Menu icons (Font Awesome in menu items) */
ul.chem-menu .fusion-megamenu-icon,
ul.chem-menu .glyphicon {
    margin-right: 6px;
    color: #ea5b0c;
}

/* ===========================
   CART WIDGET IN NAV
   Production: cart icon with counter, dropdown on hover
   =========================== */

li.chem-custom-menu-item.chem-menu-cart {
    position: relative;
    display: flex;
    align-items: stretch;
    list-style: none;
    margin-left: auto;
}

a.chem-main-menu-icon {
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    min-height: 44px;
}

/* Menu icons — scope per item so Cart and Search don't collide.
   Previously a single `a.chem-main-menu-icon::before { content: cart-glyph }`
   was applied to every menu-icon link (including Search), causing the
   shopping-cart glyph to render twice in the header. */
li.chem-menu-cart > a.chem-main-menu-icon::before {
    content: "\f07a"; /* shopping-cart */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 17px !important; /* match PROD cart icon (#54) */
}

li.chem-main-menu-search > a.chem-main-menu-icon::before {
    content: "\f002"; /* magnifying-glass */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 16px !important; /* match PROD search icon (#54) */
}

a.chem-main-menu-icon .menu-text {
    font-size: 0;
    line-height: 0;
}
/* Reset font-size on the actual icon element inside .menu-text so the
   search glyph renders (the `font-size: 0` above hides the sr-only label
   but was collapsing the <i> icon too). */
a.chem-main-menu-icon .menu-text i,
a.chem-main-menu-icon .menu-text i::before {
    font-size: 18px !important;
    line-height: 1 !important;
}
a.chem-main-menu-icon::before {
    font-size: 18px !important;
    line-height: 1 !important;
}

a.chem-main-menu-icon:hover {
    color: #ea5b0c;
}

/* Cart counter badge — white circle next to the icon, matching PROD
   (PDF 7 p3: TEST had an orange corner badge, PROD is a white inline pill). */
.chem-widget-cart-number {
    display: inline-block;
    margin-left: 7px;
    background: #fff;
    color: #1d1d1b;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

/* Cart dropdown — dark panel matching PROD Avada secondary-header cart
   (PDF 7 p1: TEST had a white panel with big buttons; PROD is a compact
   dark dropdown with plain text links). */
.chem-custom-menu-item-contents {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    width: 280px;
    background: #333333;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    padding: 0;
    z-index: 300;
    border-top: 3px solid #ea5b0c;
}

li.chem-custom-menu-item:hover .chem-custom-menu-item-contents {
    display: block;
}

.chem-menu-cart-item {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.chem-menu-cart-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
}

.chem-menu-cart-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
}

.chem-menu-cart-item-details {
    flex: 1;
    min-width: 0;
}

.chem-menu-cart-item-title {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    margin-bottom: 2px;
    line-height: 1.35;
}

.chem-menu-cart-item-quantity {
    font-size: 12px;
    color: #b0b0b0;
}

/* "Cart total" row — inline on the dark panel (no full-bleed bar). */
.chem-menu-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    color: #fff;
    margin: 0;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 13px;
    border-top: none;
}

.chem-menu-cart-subtotal span {
    color: #fff;
}

/* View cart / Go to checkout — plain text links side by side (PROD). */
.chem-menu-cart-checkout {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.chem-menu-cart-checkout .chem-menu-cart-link,
.chem-menu-cart-checkout .chem-menu-cart-checkout-link {
    flex: 1 1 0;
}

.chem-menu-cart-checkout .chem-menu-cart-checkout-link {
    border-left: 1px solid rgba(255,255,255,0.08);
}

.chem-menu-cart-checkout a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background: transparent;
}

.chem-menu-cart-link a:hover,
.chem-menu-cart-checkout-link a:hover {
    background: transparent;
    color: #ea5b0c;
}

.chem-menu-cart-link a::before {
    content: "\f07a"; /* fa-shopping-cart */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
}

.chem-menu-cart-checkout-link a::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
}

/* ===========================
   MOBILE MENU
   =========================== */

/* Desktop: hide mobile-only elements */
@media (min-width: 801px) {
    .chem-mobile-menu-icons,
    .chem-mobile-nav-holder,
    .modern-mobile-menu-adj,
    .b2b-mobile-basket.mobile-hidden,
    .vapy-mobile-search,
    .vapy-mobile-icons-overlay {
        display: none !important;
    }
}

/* Mobile styles */
@media (max-width: 800px) {
    .chem-row {
        padding: 0 15px;
    }

    /* Top header row on mobile: logo centered, mobile icons row-reverse */
    .chem-sticky-header-wrapper > .chem-header > .chem-row {
        min-height: auto;
        padding-top: 5px;
        padding-bottom: 5px;
        flex-wrap: wrap;
    }

    .modern-mobile-menu-adj {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        z-index: 99999;
        width: 100%;
        order: -1;
    }

    .chem-mobile-menu-icons {
        display: flex !important;
        align-items: center;
        gap: 8px;
        position: relative;
    }

    .chem-icon {
        font-size: 22px;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        padding: 5px;
        display: inline-block;
    }

    .chem-icon:hover {
        color: #ea5b0c;
    }

    .b2b-mobile-basket {
        font-size: 20px;
        color: #000;
        margin-right: 8px;
        text-decoration: none;
    }

    /* Hide desktop menu on mobile */
    nav.chem-main-menu {
        display: none !important;
    }

    .chem-header-content-3-wrapper {
        display: none !important;
    }

    .chem-logo {
        margin: 0 auto;
    }

    .chem-logo-1x {
        max-height: 50px;
    }

    /* Mobile nav holder */
    .chem-mobile-nav-holder {
        width: 100%;
        background: #fff;
    }

    .chem-mobile-nav-holder ul.chem-mobile-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .chem-mobile-nav-holder li {
        display: block;
    }

    .chem-mobile-nav-holder li a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        border-bottom: 1px solid #dadada;
        text-align: center;
    }

    .chem-mobile-nav-holder li a:hover {
        color: #ea5b0c;
    }

    .chem-mobile-nav-holder ul.sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #f3f3f3;
    }

    .chem-mobile-nav-holder ul.sub-menu a {
        font-size: 13px;
        padding: 10px 20px;
    }

    /* Overlay when mobile menu open */
    .vapy-mobile-icons-overlay {
        visibility: collapse;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.93);
        opacity: 0;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        z-index: 998;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .chem-mobile-menu-design-modern:has(.chem-secondary-main-menu nav.chem-mobile-nav-holder[style*="display: block"]) .vapy-mobile-icons-overlay {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .chem-mobile-menu-design-modern:has(.chem-secondary-main-menu nav.chem-mobile-nav-holder[style*="display: block"]) .chem-icon.fas.fa-times {
        display: inline-block !important;
    }

    .chem-mobile-menu-design-modern:has(.chem-secondary-main-menu nav.chem-mobile-nav-holder[style*="display: block"]) .chem-icon.awb-icon-bars {
        display: none !important;
    }

    /* Mobile search area */
    .vapy-mobile-search {
        background-color: #000000;
        display: none;
    }

    .chem-mobile-menu-search {
        padding: 0 30px 20px 30px;
        margin-top: 20px;
    }

    .chem-mobile-menu-search .popular-searches-title {
        color: #999;
        font-size: 14px;
        font-weight: 700;
        margin-top: 25px;
        margin-bottom: 18px;
        padding-left: 15px;
    }

    .chem-mobile-menu-search .popular-searches a {
        color: #fff;
        font-size: 16px;
        padding: 5px 15px;
        display: block;
    }

    /* Mobile search form */
    .chem-mobile-menu-search .searchform input[type="search"] {
        width: 100%;
        padding: 10px 15px;
        border: none;
        border-radius: 25px;
        font-size: 14px;
    }

    .chem-secondary-main-menu {
        background-color: #fff !important;
    }
}

/* ===========================
   FOOTER — production: dark gray bg, white text, orange top border
   3-column layout (1/2 + 1/4 + 1/4)
   =========================== */

.chem-footer {
    background: #666666;
    font-size: 16px;
    color: #ffffff;
    margin-top: 0;
}

/* Footer columns area — match production: white text, 16px. */
.chem-footer-columns-area {
    padding: 45px 0 40px;
    color: #ffffff;
    font-size: 16px;
}

.chem-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* Individual footer column */
.chem-footer-col {
    padding: 0 15px;
    min-width: 0;
}

.chem-footer-col--wide {
    flex: 0 0 50%;
    max-width: 50%;
}

.chem-footer-col--narrow {
    flex: 0 0 25%;
    max-width: 25%;
}

/* Footer headings */
.chem-footer-heading {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 0;
}

.chem-footer-heading a {
    color: #ffffff;
    text-decoration: none;
}

.chem-footer-heading a:hover {
    color: #ea5b0c;
}

.chem-footer-heading--secondary,
.chem-footer-heading--newsletter {
    margin-top: 30px;
}

/* Footer about text — match production: 16px white, line-height 1.8. */
.chem-footer-about {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
}

.chem-footer-about p {
    margin: 0 0 10px;
}

/* Footer newsletter */
.chem-footer-newsletter-text {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 10px;
}

.chem-footer-newsletter {
    margin-bottom: 20px;
}

.chem-footer-newsletter form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chem-footer-newsletter input[type="email"],
.chem-footer-newsletter input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 10px 15px;
    border: 1px solid #555;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    border-radius: 0;
}

.chem-footer-newsletter input[type="email"]::placeholder,
.chem-footer-newsletter input[type="text"]::placeholder {
    color: #999;
}

.chem-footer-newsletter input[type="submit"],
.chem-footer-newsletter button {
    padding: 10px 20px;
    background: #ea5b0c;
    color: #fff;
    border: none;
    font-size: 14px;
    height: 50px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 0;
}

.chem-footer-newsletter input[type="submit"]:hover,
.chem-footer-newsletter button:hover {
    background: #333;
}

/* Copyright line inside column 1 */
.chem-footer-col-copyright {
    color: #8c8989;
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Footer navigation menus */
.chem-footer-nav {
    margin-bottom: 10px;
}

ul.chem-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.chem-footer-menu li {
    margin-bottom: 8px;
}

ul.chem-footer-menu li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s;
}

ul.chem-footer-menu li a:hover {
    color: #ea5b0c;
}

/* Footer contact section */
.chem-footer-contact p {
    margin: 0 0 8px;
    font-size: 16px;
}

.chem-footer-contact a {
    color: #ffffff;
    text-decoration: none;
}

.chem-footer-contact a:hover {
    color: #ea5b0c;
}

.chem-footer-contact i {
    margin-right: 6px;
    color: #ea5b0c;
    width: 16px;
    text-align: center;
}

/* Footer bottom bar — match production: same gray bg as columns,
   orange 3px separator on top (between columns area and logos). */
.chem-footer-bottom-bar {
    background: #666666;
    padding: 30px 0;
    border-top: 3px solid #ea5b0c;
}

.chem-footer-bottom-content {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.chem-footer-bottom-content > .chem-footer-social { justify-self: start; }
.chem-footer-bottom-content > .chem-footer-bottom-logo { justify-self: center; }
.chem-footer-bottom-content > .chem-footer-bottom-rzetelna { justify-self: end; }
.chem-footer-bottom-content > .chem-footer-bottom-certs { justify-self: end; }

.chem-footer-social {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chem-footer-social a {
    display: inline-block;
    transition: opacity 0.2s;
}

.chem-footer-social a:hover {
    opacity: 0.7;
}

.chem-footer-social img {
    display: block;
}

.chem-footer-bottom-logo img {
    max-height: 60px;
    width: auto;
}

/* Rzetelna Firma badge (prod matching) */
.chem-footer-bottom-rzetelna {
    display: flex;
    align-items: center;
}

.chem-footer-bottom-rzetelna img {
    max-height: 60px;
    width: auto;
    display: block;
}

.chem-footer-bottom-certs img {
    max-height: 70px;
    width: auto;
}

/* EU funds bar — match production: separate WHITE band below the gray logos row. */
.chem-footer-eu-bar {
    background: #ffffff;
    padding: 25px 0;
}

.chem-footer-eu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: var(--chem-site-width);
    margin: 0 auto;
}

.chem-footer-eu-content img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
}

.chem-footer-copyright-area {
    background: #666666;
    padding: 18px 0;
    color: #ffffff;
    font-size: 13px;
    border-top: 3px solid #ea5b0c;
}

.chem-footer-copyright-area .chem-copyright-content p,
.chem-footer-copyright-area .chem-copyright-menu a {
    color: #ffffff;
}

.chem-footer-copyright-area .chem-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.chem-copyright-content p {
    margin: 0;
    color: #8c8989;
    font-size: 13px;
}

.chem-copyright-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.chem-copyright-menu a {
    color: #8c8989;
    font-size: 13px;
}

.chem-copyright-menu a:hover {
    color: #ea5b0c;
}

@media (max-width: 800px) {
    .chem-footer-columns {
        flex-direction: column;
    }

    .chem-footer-col--wide,
    .chem-footer-col--narrow {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 25px;
    }

    .chem-footer-copyright-area .chem-row {
        flex-direction: column;
        text-align: center;
    }

    .chem-footer-newsletter form {
        flex-direction: column;
    }

    .chem-footer-newsletter input[type="email"],
    .chem-footer-newsletter input[type="text"] {
        min-width: 100%;
    }

    .chem-footer-bottom-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .chem-footer-bottom-eu {
        align-items: center;
    }
}

/* ===========================
   BUTTONS — production: orange bg, white text, no radius
   =========================== */

.chem-button {
    display: inline-block;
    padding: 13px 29px;
    background-color: #ea5b0c;
    color: #ffffff !important;
    border: 2px solid #ffffff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    letter-spacing: 1px;
    transition: background-color 0.2s;
}

.chem-button:hover {
    background-color: #333333;
    color: #ffffff !important;
}

.chem-button-default {
    background-color: #ea5b0c;
}

.chem-button-default-size {
    padding: 11px 23px;
    font-size: 13px;
}

/* WooCommerce button overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: #ea5b0c;
    color: #fff;
    font-weight: 600;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 11px 23px;
    border: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: #fff;
    color: #fff;
}

/* ===========================
   WOOCOMMERCE COMPONENTS
   =========================== */

.woocommerce-content-box {
    padding: 20px;
    margin-bottom: 20px;
}

.chem-myaccount-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f6f6f6;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.chem-myaccount-user-column {
    flex: 1;
    min-width: 150px;
}

.chem-product-name-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chem-product-name-wrapper .product-thumbnail {
    flex-shrink: 0;
}

.chem-product-name-wrapper .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.chem-price-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===========================
   SITE MAIN (prod: --main_padding-bottom 60px)
   =========================== */

.site-main,
#main,
main.site-main {
    min-height: 50vh;
    padding: 0 0 var(--chem-main-padding-bottom);
}

/* ===========================
   FONT AWESOME ICONS
   =========================== */

.glyphicon,
.fas {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

.fa-phone-alt::before { content: "\f879"; }
.fa-envelope-open::before { content: "\f2b6"; }
.fa-user-alt::before { content: "\f406"; }
.fa-shopping-basket::before { content: "\f291"; }
.awb-icon-search::before { content: "\f002"; }
.awb-icon-bars::before { content: "\f0c9"; }
.fa-times::before { content: "\f00d"; }
.fa-euro-sign::before { content: "\f153"; }
.fa-angle-right::before { content: "\f105"; }
.fa-leaf::before { content: "\f06c"; }
.fa-flask::before { content: "\f0c3"; }

/* ===========================
   FULL WIDTH
   =========================== */

.full-width {
    width: 100%;
}

/* ===========================
   SECTION / COLUMN GRID (Fusion Builder replacement)
   =========================== */

.chem-section {
    width: 100%;
    padding: 0;
    position: relative;
}

.chem-section--fullwidth {
    padding-left: 0;
    padding-right: 0;
}

.chem-section--fullwidth > .chem-row {
    max-width: none;
    padding: 0;
}

.chem-section > .chem-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
}

.chem-row--inner {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    padding: 0;
    width: 100%;
}

.chem-col {
    padding: 0 2%;
    min-width: 0;
}

/* Safety: images inside a chem-col never overflow the column width,
 * even if a migrated broken class (e.g. chem-col--70.10 from fusion
 * conversion artifacts) lacks an explicit flex-basis. Fix for Media
 * Pack "kosmos" layout reported in audit PDF 2026-04-09. */
.chem-col img,
.chem-col .chem-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.chem-col--1-1 { flex: 0 0 100%; max-width: 100%; }
.chem-col--1-2 { flex: 0 0 50%; max-width: 50%; }
.chem-col--1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
.chem-col--1-4 { flex: 0 0 25%; max-width: 25%; }
.chem-col--1-5 { flex: 0 0 20%; max-width: 20%; }
.chem-col--1-6 { flex: 0 0 16.666%; max-width: 16.666%; }
.chem-col--2-3 { flex: 0 0 66.666%; max-width: 66.666%; }
.chem-col--2-5 { flex: 0 0 40%; max-width: 40%; }
.chem-col--3-4 { flex: 0 0 75%; max-width: 75%; }
.chem-col--3-5 { flex: 0 0 60%; max-width: 60%; }
.chem-col--4-5 { flex: 0 0 80%; max-width: 80%; }
.chem-col--5-12 { flex: 0 0 41.666%; max-width: 41.666%; }
.chem-col--7-12 { flex: 0 0 58.333%; max-width: 58.333%; }
.chem-col--5-6 { flex: 0 0 83.333%; max-width: 83.333%; }

/* Percentage-based column classes emitted by fusion→chem converter when
   fusion column had explicit --awb-width-large:NN% (e.g. 60/35 split).
   Without these rules, chem-col--60 fell back to no flex-basis causing
   one column to take 100% and siblings to collapse. */
.chem-col--10  { flex: 0 0 10%;     max-width: 10%;     }
.chem-col--15  { flex: 0 0 15%;     max-width: 15%;     }
.chem-col--20  { flex: 0 0 20%;     max-width: 20%;     }
.chem-col--25  { flex: 0 0 25%;     max-width: 25%;     }
.chem-col--30  { flex: 0 0 30%;     max-width: 30%;     }
.chem-col--33  { flex: 0 0 33.333%; max-width: 33.333%; }
.chem-col--35  { flex: 0 0 35%;     max-width: 35%;     }
.chem-col--40  { flex: 0 0 40%;     max-width: 40%;     }
.chem-col--45  { flex: 0 0 45%;     max-width: 45%;     }
.chem-col--50  { flex: 0 0 50%;     max-width: 50%;     }
.chem-col--55  { flex: 0 0 55%;     max-width: 55%;     }
.chem-col--60  { flex: 0 0 60%;     max-width: 60%;     }
.chem-col--65  { flex: 0 0 65%;     max-width: 65%;     }
.chem-col--66  { flex: 0 0 66.666%; max-width: 66.666%; }
.chem-col--70  { flex: 0 0 70%;     max-width: 70%;     }
.chem-col--75  { flex: 0 0 75%;     max-width: 75%;     }
.chem-col--80  { flex: 0 0 80%;     max-width: 80%;     }
.chem-col--85  { flex: 0 0 85%;     max-width: 85%;     }
.chem-col--90  { flex: 0 0 90%;     max-width: 90%;     }
.chem-col--100 { flex: 0 0 100%;    max-width: 100%;    }
/* Documentation/team section edge-case percentages from fusion conversion
   artifacts (e.g. chem-col--12.00 with a literal dot — not a valid single
   CSS class selector, so target via attribute contains). */
.chem-col--12  { flex: 0 0 12%;     max-width: 12%;     }
.chem-col--22  { flex: 0 0 22%;     max-width: 22%;     }
[class*="chem-col--12.00"] { flex: 0 0 12%; max-width: 12%; }
[class*="chem-col--22.71"] { flex: 0 0 23%; max-width: 23%; }
/* R40 (uwaga testera 10.08: rozsypane ikony na produktach) - komplet klas
   procentowych faktycznie wystepujacych w opublikowanej tresci
   (tools/r40-batch/kolumny.php policzyl wystapienia; np. chem-col--13
   wystepuje w 232 tresciach - kolumny ikon sekcji "Dokumentacja"). */
.chem-col--4   { flex: 0 0 4%;      max-width: 4%;      }
.chem-col--13  { flex: 0 0 13%;     max-width: 13%;     }
.chem-col--19  { flex: 0 0 19%;     max-width: 19%;     }
.chem-col--54  { flex: 0 0 54%;     max-width: 54%;     }
[class*="chem-col--5.44"]  { flex: 0 0 5.44%;  max-width: 5.44%;  }
[class*="chem-col--8.50"]  { flex: 0 0 8.5%;   max-width: 8.5%;   }
[class*="chem-col--19.48"] { flex: 0 0 19.48%; max-width: 19.48%; }
[class*="chem-col--26.96"] { flex: 0 0 26.96%; max-width: 26.96%; }
[class*="chem-col--50.97"] { flex: 0 0 50.97%; max-width: 50.97%; }
[class*="chem-col--54.58"] { flex: 0 0 54.58%; max-width: 54.58%; }
[class*="chem-col--60.00"] { flex: 0 0 60%;    max-width: 60%;    }
[class*="chem-col--70.10"] { flex: 0 0 70.1%;  max-width: 70.1%;  }

@media (max-width: 800px) {
    .chem-col[class*="chem-col--"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Content blocks */
.chem-text { margin-bottom: 15px; }
/* Separator: 3px orange horizontal line matching PROD Fusion sep-solid style.
   PROD converter flattened spacer + visible separators to the same HR, so hide
   the ones that would otherwise stack inside accordions or around blockquotes
   (those were spacers on PROD, not visible dividers). */
.chem-separator { border: none; border-top: 3px solid #ea5b0c; margin: 30px 0; }
.chem-accordion .chem-separator,
.chem-toggle .chem-separator,
hr.chem-separator + hr.chem-separator,
hr.chem-separator + blockquote,
blockquote + hr.chem-separator,
hr.chem-separator:has(+ blockquote) {
    display: none;
}
.chem-anchor { display: block; position: relative; top: -100px; visibility: hidden; }

/* Video embeds */
.chem-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 20px; }
.chem-video iframe, .chem-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Images */
.chem-image { max-width: 100%; height: auto; display: block; }

/* Accordion / Toggle */
/* Accordion / FAQ toggle — matches prod Avada fusion-toggle-boxed style:
 * numbered pill on the left (orange), question on white, +/− toggle on right. */
.chem-accordion {
    margin-bottom: 20px;
    counter-reset: chem-faq;
}
/* FAQ page + content wrappers also reset counter so <details> items
 * directly inside page content get numbered. */
body.page-id-11 .chem-html-section__content,
body.page-id-11 .page-content article,
.chem-html-section__content:has(.chem-toggle) {
    counter-reset: chem-faq;
}
.chem-accordion {
    display: block;
    margin: 15px 0;
}
.chem-toggle {
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    counter-increment: chem-faq;
}
/* Each chem-accordion wraps exactly one <details> (converter artifact), so
   hiding border on the LAST chem-accordion sibling in its parent — not the
   last chem-toggle of any single chem-accordion. */
.chem-accordion:last-of-type > .chem-toggle {
    border-bottom: none !important;
}
.chem-toggle summary {
    list-style: none;
    padding: 10px 0 10px 44px !important;
    margin: 0 !important;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--chem-primary);
    position: relative;
    font-size: 16px;
    line-height: 1.3;
    border: none !important;
}
.chem-toggle summary::-webkit-details-marker { display: none; }
.chem-toggle summary::marker { content: ''; }
/* Boxed + / − indicator on the left. PROD has black square with white glyph. */
.chem-toggle summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}
.chem-toggle[open] summary::before {
    content: '–';
}
/* Right-side indicator removed (prod uses only left icon) */
.chem-toggle summary::after {
    display: none;
}
.chem-toggle summary:hover {
    background: transparent;
}
.chem-toggle-content,
.chem-toggle > *:not(summary) {
    padding: 6px 0 10px 44px;
    background: transparent;
    border: none;
}
.chem-toggle-content p:first-child { margin-top: 0; }
.chem-toggle-content p:last-child { margin-bottom: 0; }

/* Table wrapper */
.chem-table-wrapper { overflow-x: auto; margin-bottom: 20px; }
.chem-table-wrapper table { width: 100%; border-collapse: collapse; }
.chem-table-wrapper th, .chem-table-wrapper td { padding: 10px; border: 1px solid #ddd; text-align: left; }
.chem-table-wrapper th { background: #f5f5f5; font-weight: 600; }

/* Gallery */
.chem-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.chem-gallery-image { width: 100%; height: auto; object-fit: cover; }

/* Testimonials — carousel (one visible at a time, auto-rotate with dots) */
.chem-testimonials { margin-bottom: 20px; position: relative; overflow: hidden; }
.chem-testimonial { padding: 30px 40px; border-left: none; margin-bottom: 0; background: #f0f0f0; border-radius: 0; display: none; text-align: center; }
.chem-testimonial.active { display: block; }
.chem-testimonial p { font-size: 15px; line-height: 1.7; color: #4a4e57; font-style: italic; }
.chem-testimonial cite { display: block; margin-top: 10px; font-weight: 600; font-style: normal; color: #ea5b0c; }

/* Testimonial pagination dots */
.chem-testimonial-pagination { text-align: center; padding: 15px 0 5px; }
.chem-testimonial-pagination a {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 4px;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
    vertical-align: middle;
}
.chem-testimonial-pagination a.activeSlide { background: #ea5b0c; }

/* Counters */
.chem-counters { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; background: #ea5b0c; padding: 40px 30px; }
.chem-counter { text-align: center; flex: 1; min-width: 120px; }
.chem-counter-value { display: block; font-size: 43px; font-weight: 700; color: #ffffff; }
.chem-counter-title { display: block; font-size: 38px; font-weight: 400; color: #ffffff; margin-top: 5px; }
.chem-counter p { font-size: 22px; color: #ffffff; }

/* Slider (inline content slider) */
.chem-slider { position: relative; overflow: hidden; }

/* Visibility helpers */
.chem-hide-mobile { }
.chem-hide-desktop { }
@media (max-width: 800px) { .chem-hide-mobile { display: none !important; } }
@media (min-width: 801px) { .chem-hide-desktop { display: none !important; } }
.chem-show-tablet-only { }
@media (max-width: 640px), (min-width: 1025px) { .chem-show-tablet-only { display: none !important; } }

/* ===========================
   MEGA MENU
   =========================== */

/* Parent item that triggers megamenu */
ul.chem-menu > li.chem-has-megamenu {
    position: static;
}

/* Megamenu dropdown container */
.chem-megamenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    max-width: var(--chem-site-width);
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-top: 3px solid #ea5b0c;
    z-index: 250;
    padding: 25px 30px;

    /* 3-column grid layout */
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
}

/* Show megamenu on hover */
ul.chem-menu > li.chem-has-megamenu:hover > .chem-megamenu {
    display: grid;
}

/* Override standard sub-menu display for megamenu parents */
ul.chem-menu > li.chem-has-megamenu:hover > ul.sub-menu {
    display: none;
}

/* Column */
.chem-megamenu__column {
    min-width: 0;
}

/* Column header */
.chem-megamenu__title {
    display: block;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1d1d1b;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 2px solid #ea5b0c;
    text-decoration: none;
    letter-spacing: 0.5px;
}

a.chem-megamenu__title:hover {
    color: #ea5b0c;
}

.chem-megamenu__title i {
    color: #ea5b0c;
    margin-right: 6px;
    font-size: 14px;
}

/* Item list inside a column */
.chem-megamenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-megamenu__item {
    display: block;
}

.chem-megamenu__item a {
    display: block;
    padding: 6px 0;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}

.chem-megamenu__item a:hover {
    color: #ea5b0c;
}

.chem-megamenu__item a i.fa-angle-right {
    color: #ea5b0c;
    margin-right: 5px;
    font-size: 11px;
}

/* Mobile: hide megamenu, fall back to standard dropdown */
@media (max-width: 800px) {
    .chem-megamenu {
        display: none !important;
    }

    ul.chem-menu > li.chem-has-megamenu {
        position: relative;
    }

    ul.chem-menu > li.chem-has-megamenu:hover > ul.sub-menu {
        display: block;
    }
}

/* ===========================
   BREADCRUMBS
   =========================== */

.chem-breadcrumbs {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 15px 20px 0;
    font-size: 13px;
    color: #65bc7b;
    line-height: 1.5;
}

.chem-breadcrumbs a {
    color: #65bc7b;
    text-decoration: none;
}

.chem-breadcrumbs a:hover {
    text-decoration: underline;
}

.chem-breadcrumbs-current {
    color: #999999;
}

/* ===========================
   PAGE TITLE (for non-ACF pages)
   =========================== */

.chem-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 25px;
    padding: 30px 0 0;
    line-height: 1.3;
}

.entry-content {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0 20px 40px;
}

@media (max-width: 800px) {
    .chem-page-title {
        font-size: 24px;
        padding: 20px 0 0;
    }
}

/* ===========================
   PAGE BUILDER BLOCKS
   =========================== */

/* --- Text Section --- */
.chem-text-section__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 2%;
}

.chem-text-section--3-4 .chem-text-section__inner { max-width: 75%; }
.chem-text-section--2-3 .chem-text-section__inner { max-width: 66.666%; }
.chem-text-section--1-2 .chem-text-section__inner { max-width: 50%; }

.chem-text-section__title {
    margin-bottom: 15px;
    text-align: center;
}

.chem-text-section__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .chem-text-section--3-4 .chem-text-section__inner,
    .chem-text-section--2-3 .chem-text-section__inner,
    .chem-text-section--1-2 .chem-text-section__inner {
        max-width: 100%;
    }
}

/* --- Cards Grid --- */
.chem-cards-grid {
    display: grid;
    /* R37/A10: procentowy row-gap zawyżał realną wysokość grida ponad
       zadeklarowaną (gap liczony cyrkularnie od wysokości kontenera) —
       na mobile sekcja clipowała ~100px ostatniej karty i banner STC
       "nachodził" na treść o glikolu (PL). Procent zostaje tylko dla kolumn. */
    column-gap: 4%;
    row-gap: 30px;
    width: 100%;
}

.chem-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
.chem-cards-grid--3col { grid-template-columns: repeat(3, 1fr); }
.chem-cards-grid--4col { grid-template-columns: repeat(4, 1fr); }

.chem-card {
    padding: 25px;
    background: #f9f9f9;
    transition: box-shadow 0.2s;
}

.chem-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chem-card__title {
    font-size: 18px;
    margin-bottom: 10px;
}

.chem-card__title a {
    color: #fff;
    text-decoration: none;
}

.chem-card__title a:hover {
    color: #ea5b0c;
}

.chem-card__content {
    font-size: 14px;
    line-height: 1.7;
}

.chem-card__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .chem-cards-grid--2col,
    .chem-cards-grid--3col,
    .chem-cards-grid--4col {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 501px) and (max-width: 800px) {
    .chem-cards-grid--3col,
    .chem-cards-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Full Width Image --- */
.chem-full-image {
    padding: 0;
}

.chem-full-image__img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Counters Section --- */
/* Full-viewport-width orange band (PROD parity).
   !important needed because .chem-section[style*="background-color"] (line ~2805)
   sets margin:0 / padding-top:0 / padding-bottom:0 with higher specificity. */
.chem-counters-section {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 60px 30px !important;
    color: #ffffff;
    overflow: hidden;
}

.chem-counters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.chem-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.chem-counter-item__label-top {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.chem-counter-item__value {
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
}

.chem-counter-item__unit {
    font-size: 28px;
    font-weight: 600;
}

.chem-counter-item__label-bottom {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

@media (max-width: 800px) {
    .chem-counters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .chem-counter-item__value {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .chem-counters-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Text with Image --- */
/* Match PROD .fusion-fullwidth padding (46px top) for "Chcę rozwijać" section. */
.chem-text-with-image {
    padding-top: 46px;
}
.chem-text-with-image > .chem-row {
    display: flex;
    align-items: flex-start;
}

.chem-text-with-image--valign-center > .chem-row {
    align-items: center;
}

.chem-twi--image-right > .chem-row {
    flex-direction: row-reverse;
}

.chem-twi__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Sticky 360 hex image — stays visible while scrolling the long service list. */
.chem-twi__image {
    position: sticky;
    top: 200px; /* clears sticky header */
    align-self: flex-start;
}

.chem-twi__title {
    margin-bottom: 15px;
}

@media (max-width: 800px) {
    .chem-text-with-image > .chem-row,
    .chem-twi--image-right > .chem-row {
        flex-direction: column;
    }

    .chem-twi__image,
    .chem-twi__text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
}

/* --- Testimonials Section --- */
/* Full-viewport-width grey band (PROD parity). */
.chem-testimonials-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 50px 30px;
    background: #f5f5f5;
}

.chem-testimonials-section__header {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.chem-testimonials-section__title {
    margin-bottom: 10px;
}

.chem-testimonials-section__subtitle {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.chem-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
}

.chem-testimonial-card {
    background: #ffffff;
    padding: 30px;
    margin: 0;
    border-left: 4px solid #ea5b0c;
    position: relative;
}

.chem-testimonial-card__quote {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    margin: 0 0 15px;
}

.chem-testimonial-card__quote::before {
    content: "\201C";
    font-size: 36px;
    color: #ea5b0c;
    line-height: 0;
    vertical-align: -12px;
    margin-right: 4px;
}

.chem-testimonial-card__author {
    display: block;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: #ea5b0c;
}

@media (max-width: 640px) {
    .chem-testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* --- CTA Section --- */
/* Full-viewport-width black band (PROD parity).
   !important needed because .chem-section[style*="background-color"] sets
   margin:0 / padding:0 with higher specificity (attribute selector). */
.chem-cta-section {
    position: relative;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 47px 30px 53px !important;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chem-cta-section__inner {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

.chem-cta-section__title {
    font-size: 28px;
    margin-bottom: 15px;
}

.chem-cta-section__text {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.7;
}

.chem-cta-section__text p:last-child {
    margin-bottom: 0;
}

.chem-cta-section__button {
    font-size: 14px;
    padding: 14px 35px;
    margin-top: 10px;
}

/* --- Contact CTA --- (PROD parity: big orange H2 + subtitle with underline + stacked buttons) */
/* PROD section h≈371px on desktop. Reduce top padding from 60→25 to match. */
.chem-contact-cta {
    padding: 25px 0 0;
    overflow: hidden; /* team photo hangs off bottom on PROD */
}

.chem-contact-cta > .chem-row {
    display: flex;
    align-items: flex-end;
}

.chem-contact-cta__title {
    color: #ea5b0c;
    font-size: 90px;
    line-height: 1;
    font-weight: 700;
    margin: 0 0 20px;
    text-transform: none;
}

.chem-contact-cta__subtitle {
    color: #000;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 4px solid #ea5b0c;
    width: max-content;
    max-width: 100%;
}

.chem-contact-cta__text {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 30px;
}

.chem-contact-cta__buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.chem-contact-cta__email,
.chem-contact-cta__phone {
    display: inline-block;
    background: #ea5b0c;
    color: #fff;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s;
}

.chem-contact-cta__email:hover,
.chem-contact-cta__phone:hover {
    background: #d24f08;
    color: #fff;
}

.chem-contact-cta__email strong,
.chem-contact-cta__phone strong {
    font-weight: 700;
    margin-right: 4px;
}

.chem-contact-cta__image {
    align-self: flex-end;
}

.chem-contact-cta__image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .chem-contact-cta__title {
        font-size: 60px;
    }

    .chem-contact-cta__subtitle {
        font-size: 22px;
    }
}

@media (max-width: 800px) {
    .chem-contact-cta > .chem-row {
        flex-direction: column;
    }

    .chem-contact-cta__content,
    .chem-contact-cta__image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }

    .chem-contact-cta__title {
        font-size: 48px;
    }
}

/* --- Multi Column Section --- */
.chem-multi-column-section > .chem-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.chem-multi-col__content img {
    max-width: 100%;
    height: auto;
}

/* --- Avada Compat: layout grid, separators, buttons, icons --- */

/* Avada Flex Container → row */
.chem-legacy-flex-container,
.chem-legacy-fullwidth {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    flex: 0 0 100%; /* don't shrink in flex parent */
}

/* Avada Row → flex row */
.chem-legacy-row,
.chem-legacy-builder-row {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--chem-site-width);
    margin-left: calc(-4% / 2);
    margin-right: calc(-4% / 2);
}

/* Outer wrapper row (direct child of post-content): vertical stack by default
   (stacks section blocks top-to-bottom). Exception: when the row actually
   contains a sidebar (nasza-oferta / products / single-product layouts), it
   must be a horizontal flex so sidebar and section sit side-by-side.
   PROD's .fusion-row behaves this way automatically because its children are
   real floats; our non-floated TEST render needs the :has() escape hatch. */
.post-content > .chem-legacy-row,
.chem-html-section__content > .chem-legacy-row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}
.post-content > .chem-legacy-row:has(> aside.sidebar),
.chem-html-section__content > .chem-legacy-row:has(> aside.sidebar),
.post-content > .chem-legacy-row:has(> .chem-legacy-widget-area),
.chem-html-section__content > .chem-legacy-row:has(> .chem-legacy-widget-area) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 30px;
}

/* Avada Column → flex column with CSS custom property width */
.chem-legacy-flex-column,
.chem-legacy-layout-column {
    flex: 0 0 var(--chem-awb-width-large, 100%);
    max-width: var(--chem-awb-width-large, 100%);
    padding-left: var(--chem-awb-spacing-left-large, 1.92%);
    padding-right: var(--chem-awb-spacing-right-large, 1.92%);
    margin-top: var(--chem-awb-margin-top-large, 0);
    margin-bottom: var(--chem-awb-margin-bottom-large, 0);
    min-width: 0;
}

.chem-legacy-column-wrapper {
    width: 100%;
}

/* Avada fullwidth container → section with background support */
.chem-legacy-fullwidth {
    background-color: var(--chem-awb-background-color, transparent);
    color: var(--chem-awb-text-color, inherit);
    padding-top: var(--chem-awb-padding-top, 0);
    padding-bottom: var(--chem-awb-padding-bottom, 0);
}

/* Avada title element */
.chem-legacy-title {
    margin-bottom: var(--chem-awb-margin-bottom, 15px);
}
.chem-legacy-title-heading {
    margin: 0;
}

/* Avada separator element */
.chem-legacy-sep-none .chem-legacy-sep-line {
    display: none;
}

/* YouTube lite embed (Avada uses custom element) */
lite-youtube {
    display: block;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
}
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}
lite-youtube::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Avada image frame */
.chem-legacy-imageframe {
    display: inline-block;
    max-width: 100%;
}
.chem-legacy-imageframe img {
    max-width: 100%;
    height: auto;
}

/* Avada button element */
.chem-legacy-button {
    display: inline-block;
    margin: var(--chem-awb-margin-top, 0) var(--chem-awb-margin-right, 0) var(--chem-awb-margin-bottom, 5px) var(--chem-awb-margin-left, 0);
}

/* Avada text block – consume both margin-top and margin-bottom from CSS vars
   (PROD uses inline margin-top:-25px on some text blocks to visually overlap with preceding element). */
.chem-legacy-text {
    margin-top: var(--chem-awb-margin-top, 0);
    margin-bottom: var(--chem-awb-margin-bottom, 0);
}

/* Avada column on mobile → full width */
@media (max-width: 800px) {
    .chem-legacy-flex-column,
    .chem-legacy-layout-column {
        flex: 0 0 var(--chem-awb-width-small, 100%) !important;
        max-width: var(--chem-awb-width-small, 100%) !important;
        padding-left: var(--chem-awb-spacing-left-small, 1.92%);
        padding-right: var(--chem-awb-spacing-right-small, 1.92%);
    }
}

/* Avada visibility helpers.
   R28: the unconditional `display:none` on .chem-legacy-no-large-visibility
   hid the MOBILE copies of legacy sections at every width (documentation
   intro, GET IN TOUCH blocks, certification logos, ...). Avada semantics:
   no-large = hidden ONLY on desktop (>=1025px). The proper per-breakpoint
   rules live in fusion-compat.css (and are duplicated here for safety). */
@media (min-width: 1025px) {
    .chem-legacy-no-large-visibility { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .chem-legacy-no-medium-visibility { display: none !important; }
}
@media (max-width: 640px) {
    .chem-legacy-no-small-visibility { display: none !important; }
}
@media (min-width: 641px) {
    .sm-text-align-center { text-align: inherit; }
}

/* Avada separator full width */
.chem-legacy-full-width-sep,
.chem-legacy-separator {
    width: 100%;
}

/* Avada sidebar: left column in flex row */
aside.sidebar,
.chem-legacy-widget-area {
    order: -1;
    flex: 0 0 240px;
    max-width: 240px;
    float: none !important;
    padding: 0 15px;
}
/* Content section next to sidebar (section comes BEFORE aside in DOM) */
.chem-legacy-row > section:first-child:has(~ aside.sidebar),
.chem-legacy-row > section:first-child:has(~ .chem-legacy-widget-area) {
    flex: 1;
    min-width: 0;
}

/* Separator lines (orange hr-like dividers) */
.sep-single {
    border: none;
    height: 0;
}
.sep-solid {
    border-top: 3px solid #ea5b0c;
    margin: 0;
}
.sep-single:not(.sep-solid) {
    border-top: 3px solid transparent;
}

/* Icon wrapper between separators */
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border: 3px solid #ea5b0c;
    border-radius: 50%;
    font-size: 28px;
    vertical-align: middle;
    margin: -1.5px 8px 0;
    background: #ffffff;
    color: #ea5b0c;
}
.icon-wrapper i {
    font-size: inherit;
    color: #ea5b0c;
}

/* Separator + icon row container */
.chem-html-section__content > div:has(.sep-solid) {
    display: flex;
    align-items: center;
    margin: 25px 0;
}
.chem-html-section__content > div:has(.sep-single:not(.sep-solid)) {
    margin: 10px 0;
}

/* Avada buttons in html content — font-weight 400 matches PROD .fusion-button
   (was 600 which rendered buttons visibly bolder than PROD). */
.button-flat,
a.button-flat {
    display: inline-block;
    padding: 13px 29px;
    background: #ea5b0c;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    margin: 5px 0;
}
.button-flat:hover,
a.button-flat:hover {
    background: #d04e08;
}
.button-flat i,
a.button-flat i {
    margin-right: 6px;
}

/* Custom colored buttons (Avada style vars → solid fallback) */
.button-custom {
    background: #ea5b0c;
}

/* chem-button class (used by clean_avada_html converter) */
a.chem-button {
    display: inline-block;
    padding: 13px 29px;
    background: #ea5b0c;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background 0.2s;
    margin: 5px 0;
}
a.chem-button:hover {
    background: #d04e08;
}

/* Masked images (Avada image wrapper) */
.has-mask {
    display: block;
    max-width: 300px;
    float: left;
    margin: 0 25px 15px 0;
}
/* Inside flex columns, don't float – column handles sizing */
.chem-legacy-flex-column .has-mask,
.chem-legacy-layout-column .has-mask {
    float: none;
    max-width: 100%;
    margin: 0 0 15px 0;
}
.has-mask img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Clear float after masked image sections */
.chem-html-section__content > .has-mask + p,
.chem-html-section__content > .has-mask ~ a.button-flat:first-of-type {
    clear: none;
}
.chem-html-section__content::after {
    content: '';
    display: table;
    clear: both;
}

/* --- HTML Section --- */
.chem-html-section__content {
    width: 100%;
}

/* --- Hero Slider --- */
/* Full-viewport-width video, glued to the bottom of the menu (no gap).
   20px gap below to breathe before the next text section. */
.chem-hero-slider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
    overflow: hidden;
}

/* 24px gap between intro text section and the 3-card row beneath it. */
.chem-text-section {
    margin-bottom: 24px;
}

.chem-hero-slider video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Page builder: zero top spacing on the very first section so hero kisses the menu. */
.chem-page-builder > .chem-section:first-child,
main > .chem-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Homepage: kill page-content top padding (60px gap between menu & hero). */
body.home .page-content,
body.page-id-30 .page-content,
body.page-id-61577 .page-content,
body.page-id-62989 .page-content,
body.page-id-62987 .page-content {
    padding-top: 0 !important;
}

/* Body + html: prevent horizontal scrollbar caused by 100vw on full-bleed sections. */
html, body {
    overflow-x: clip;
}

/* ============== HOMEPAGE RWD ============== */

/* Tablet landscape & below */
@media (max-width: 1080px) {
    .chem-banner-slider__overlay {
        max-width: 50%;
    }
    .chem-banner-slider__title {
        font-size: clamp(22px, 3.5vw, 42px);
    }
}

/* Tablet portrait & below */
@media (max-width: 800px) {
    /* Counters: 2 cols instead of 4 on mobile */
    .chem-counters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
    }
    .chem-counters-section {
        padding: 30px 20px !important;
    }
    /* CTA: lighter padding, smaller text, no fixed min-height */
    .chem-cta-section {
        min-height: 0 !important;
        padding: 30px 20px !important;
    }
    .chem-cta-section__title {
        font-size: 22px;
    }
    .chem-cta-section__text {
        font-size: 14px;
    }
    /* Hero: kill bottom margin (text-section already adds padding) */
    .chem-hero-slider {
        margin-bottom: 12px;
    }
    /* Text-with-image: undo sticky on mobile (column stacks) */
    .chem-twi__image {
        position: static;
        top: auto;
    }
    /* text_with_image: lighter top padding on mobile */
    .chem-text-with-image {
        padding-top: 24px;
    }
    /* Testimonials: lighter padding */
    .chem-testimonials-section {
        padding: 30px 20px;
    }
    /* Contact CTA stack vertically (image below) */
    .chem-contact-cta > .chem-row {
        flex-direction: column;
    }
    .chem-contact-cta__content,
    .chem-contact-cta__image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .chem-contact-cta__title {
        font-size: 48px !important;
    }
    .chem-contact-cta__subtitle {
        font-size: 20px !important;
    }
}

/* Small mobile */
@media (max-width: 500px) {
    .chem-counters-grid {
        grid-template-columns: 1fr !important;
    }
    .chem-contact-cta__title {
        font-size: 36px !important;
    }
}

/* --- Service Cards (homepage 3 columns) --- */
.chem-cards-section .chem-card {
    background: rgba(198, 198, 198, 0.3);
    padding: 20px;
    box-shadow: 2px 2px 4px 1px rgb(198, 198, 198);
    border: 0;
}

.chem-cards-section .chem-card h2 {
    font-size: 19px;
    font-weight: 700;
    color: #000000;
}

.chem-cards-section .chem-card h2 a {
    color: #000000;
}

/* --- Page Builder wrapper --- */
.chem-page-builder {
    width: 100%;
}

/* Centered orange H1 — homepage only. Scoped to body.home so migrated pages
   with title-heading-left class (informacje-dodatkowe etc.) keep left align. */
body.home .chem-page-builder h1 {
    text-align: center;
    color: #ea5b0c;
    font-size: 42px;
    padding: 25px 0 0;
}
/* Non-homepage: orange + size, preserve alignment from class (title-heading-*) */
.chem-page-builder h1 {
    color: #ea5b0c;
    font-size: 42px;
}

/* ===========================
   COUNTER SECTIONS FIX — 4 columns in a row
   =========================== */

/* ===========================
   COUNTER SECTIONS FIX — 4 columns in a row
   =========================== */

/* Orange counter sections: full width, no wrapping */
.chem-section[style*="background-color"] > .chem-row {
    max-width: none;
    padding: 0 15px;
    flex-wrap: nowrap !important;
}


/* ===========================
   COUNTER SECTIONS — match production layout
   =========================== */

/* Remove gap between counter row 1 and row 2 */
.chem-section[style*="background-color"] {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* First counter row: top padding, no bottom */
.chem-section[style*="background-color"]:first-of-type,
.chem-section[style*="background-color"] + .chem-section:not([style*="background-color"]) {
    /* handled by inline styles */
}

/* Counter columns: separators between them */
.chem-section[style*="background-color"] .chem-col--1-4 {
    text-align: center;
    position: relative;
    padding: 20px 15px;
}

/* Vertical separator lines between counter columns */
.chem-section[style*="background-color"] .chem-col--1-4 + .chem-col--1-4 {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Counter labels (top text) — match production font size */
.chem-section[style*="background-color"] .chem-col--1-4 > p:first-child {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Counter values — large font for ALL values including plain p tags */
.chem-section[style*="background-color"] .chem-col--1-4 > p[style*="font-size:48px"],
.chem-section[style*="background-color"] .chem-col--1-4 > .chem-counter-number {
    font-size: 55px !important;
    font-weight: 700;
    line-height: 1.2;
    margin: 10px 0;
}

/* Bottom label */
.chem-section[style*="background-color"] .chem-col--1-4 > p:last-child {
    font-size: 16px;
    margin-top: 5px;
}

/* Adjacent orange sections — eliminate gap between them */
.chem-section[style*="background-color:#ea5b0c"] + .chem-section[style*="background-color:#ea5b0c"] {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Fix "2" and "5" counter values — these are p tags with inline font-size that gets overridden */
/* Target middle p in counter column (not first-child label, not last-child unit) */
.chem-section[style*="background-color"] .chem-col--1-4 > p:nth-child(2) {
    font-size: 55px !important;
    font-weight: 700 !important;
    font-family: Raleway, sans-serif !important;
    line-height: 1.2 !important;
    margin: 10px 0 !important;
    text-align: center;
}

/* Also fix .chem-counter-number to match */
.chem-section[style*="background-color"] .chem-counter-number {
    font-size: 55px !important;
    line-height: 1.2;
    margin: 10px 0;
}

/* Eliminate gap between the two orange counter sections */
.chem-section[style*="background-color"] + .chem-section[style*="background-color"] {
    margin-top: -20px;
    padding-top: 0;
}

/* Fix text alignment in counter columns — center everything */
.chem-section[style*="background-color"] .chem-col--1-4 > p {
    text-align: center !important;
}

/* First child label — bigger font like production */
.chem-section[style*="background-color"] .chem-col--1-4 > p:first-child {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

/* Last child unit label */
.chem-section[style*="background-color"] .chem-col--1-4 > p:last-child {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-top: 5px !important;
}

/* ===========================
   360° SLIDER CAROUSEL
   =========================== */
.chem-360-slider {
    background: #f5f5f5;
}

.chem-360-slider__container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    height: 350px;
}

.chem-360-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.chem-360-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
}

.chem-360-slider__slide.active {
    opacity: 1;
    z-index: 1;
}

.chem-360-slider__content {
    padding: 40px 60px;
    max-width: 55%;
}

.chem-360-slider__content h3 {
    font-size: 36px;
    font-weight: 900;
    color: #000;
    margin: 0 0 15px;
    line-height: 1.2;
    font-family: "Open Sans", sans-serif;
}

.chem-360-slider__content p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.chem-360-slider__prev,
.chem-360-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: none;
    padding: 15px 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.chem-360-slider__prev:hover,
.chem-360-slider__next:hover {
    background: rgba(0, 0, 0, 0.6);
}

.chem-360-slider__prev { left: 10px; }
.chem-360-slider__next { right: 10px; }

@media (max-width: 800px) {
    .chem-360-slider__container { height: 250px; }
    .chem-360-slider__content { max-width: 100%; padding: 20px; }
    .chem-360-slider__content h3 { font-size: 24px; }
    .chem-360-slider__slide { background-size: cover; background-position: center; }
    .chem-360-slider__content { background: rgba(255,255,255,0.85); }
}

/* ===========================
   BANNER SLIDER (homepage promo)
   Mimics PROD Avada flexslider: full-viewport-width container, fixed
   515px height, image scaled to natural ratio (2100x515) and vertically
   centered. Hidden on mobile/tablet (<800px).
   =========================== */
.chem-banner-slider {
    position: relative;
    overflow: hidden;
    width: 100vw;
    /* Break out of parent container to span full viewport (PROD parity). */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
}

.chem-banner-slider__slides {
    position: relative;
    width: 100%;
    height: 515px;
    overflow: hidden;
}

.chem-banner-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.chem-banner-slider__slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.chem-banner-slider__link {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.chem-banner-slider__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.chem-banner-slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px 0 8px;
    background: #fff;
}

.chem-banner-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #c8c8c8;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.chem-banner-slider__dot:hover,
.chem-banner-slider__dot:focus-visible {
    background: #999;
    outline: none;
}

.chem-banner-slider__dot.active {
    background: #ea5b0c;
    transform: scale(1.1);
}

/* Text overlay (PROD parity for EN slides — pure-image slides need this) */
.chem-banner-slider__overlay {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 45%;
    z-index: 2;
    pointer-events: none;
}
.chem-banner-slider__overlay > * { pointer-events: auto; }
.chem-banner-slider__title {
    font-size: clamp(28px, 4vw, 60px);
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.05;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
    text-transform: none;
}
.chem-banner-slider__subtitle {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #555;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 90%;
}
.chem-banner-slider__button {
    display: inline-block;
    background: #ea5b0c;
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s;
}
.chem-banner-slider__button:hover { background: #d24f08; color: #fff; }

/* Arrow nav (prev / next) — half-transparent chevrons over the slider */
.chem-banner-slider__nav {
    position: absolute;
    top: calc(50% - 50px); /* offset for dot bar */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    background: transparent;
    color: #1a1a1a;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.chem-banner-slider__nav:hover,
.chem-banner-slider__nav:focus-visible { opacity: 1; outline: none; }
.chem-banner-slider__nav--prev { left: 16px; }
.chem-banner-slider__nav--next { right: 16px; }

/* R37/A11: slider NIE jest juz chowany na mobile — slajdy dostaly pionowe
   grafiki *_mobile (pole mobile_image + <source media="max-width:800px">
   w banner_slider.php). Wczesniej desktopowe 2100x515 byly nieczytelne. */
@media (max-width: 800px) {
    .chem-banner-slider__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .chem-banner-slider__slide { transition: none; }
}

/* Fix hero gap — remove padding only on first html_section (hero follows) */
.chem-page-builder > .chem-html-section:first-child {
    padding-top: 0 !important;
}

.chem-html-section .chem-row {
    padding-top: 0;
}

/* Hero should have no gap above it */
.chem-video-hero {
    margin-top: 0 !important;
}

/* Front page: no padding on page-builder wrapper */
.chem-page-builder {
    padding-top: 0;
    margin-top: 0;
}


/* Sticky menu — JS handles fixed positioning on scroll */
.chem-sticky-header-wrapper {
    position: relative !important;
}
.chem-header-v4 {
    position: relative !important;
}

/* Avada Counter Box (scraped homepage) */
.chem-legacy-counter-box {
    text-align: center;
}
.chem-legacy-counter-box .counter-box-number,
.chem-legacy-counter-box .display-counter {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    display: block;
}
.chem-legacy-counter-box .counter-box-title {
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 10px;
}
.chem-legacy-counter-box .body-shortcode {
    font-size: 16px;
    color: #ffffff;
}

/* ===========================
   AVADA COUNTER BOX (scraped homepage)
   =========================== */
.chem-legacy-counter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 15px;
}
.chem-legacy-counter-box .display-counter,
.chem-legacy-counter-box .counter-box-number {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    display: inline;
    white-space: nowrap;
}
.chem-legacy-counter-box .body-shortcode {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    display: inline;
    white-space: nowrap;
}
.chem-legacy-counter-box .counter-box-title {
    font-size: 16px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* ===========================
   AVADA TESTIMONIALS (scraped homepage)
   =========================== */
.reviews {
    overflow: hidden;
    position: relative;
    min-height: 200px;
}
.reviews .review {
    text-align: center;
    padding: 30px 60px;
}
.reviews .review .testimonial-quote {
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 15px;
}
.reviews .review .author {
    font-weight: 700;
    font-size: 14px;
}

/* Avada counter container: 4-column grid */
.chem-legacy-counters-box,
.counters-box {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}
.chem-legacy-counter-box {
    flex: 0 0 25% !important;
    max-width: 25%;
}
/* Orange background sections need proper row layout */
.chem-legacy-fullwidth[style*="background-color: rgb(234, 91, 12)"] .chem-legacy-row,
.chem-legacy-fullwidth[style*="background-color:#ea5b0c"] .chem-legacy-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

/* Avada Register CTA: white title on black bg */
.chem-legacy-fullwidth[style*="background-color: rgb(0, 0, 0)"] h2,
.chem-legacy-fullwidth[style*="background-color:#000"] h2 {
    color: #ffffff !important;
}
.chem-legacy-fullwidth[style*="background-color: rgb(0, 0, 0)"] h2 a,
.chem-legacy-fullwidth[style*="background-color:#000"] h2 a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Homepage section height note:
   overflow:hidden on sections cuts content and creates white space
   which pixelmatch marks as diff. Better to leave natural heights. */