/**
 * Chemnovatic Theme Styles
 *
 * @package Chemnovatic
 */

/* ===========================
   HEADER
   =========================== */

div.chem-secondary-header {
    display: none;
}

div.chem-header {
    padding-top: var(--chem-header-padding-v) !important;
    padding-bottom: var(--chem-header-padding-v) !important;
}

@media (min-width: 800px) {
    .chem-header-content-3-wrapper {
        width: 55%;
    }
}

.chem-header-content-3-wrapper .chem-header-tagline a {
    display: inline-block !important;
    padding-top: 5px;
}

.chem-header-content-3-wrapper h3 {
    justify-content: space-between;
    display: flex;
    width: 100%;
}

.chem-header-content-3-wrapper .chem-header-tagline a {
    margin-left: 10px;
}

.chem-secondary-main-menu {
    border-bottom: 3px solid #ea5b0c !important;
}

/* ===========================
   FOOTER
   =========================== */

.chem-footer {
    font-size: 16px;
    background-color: #666666;
    border-top: 3px solid #ea5b0c;
}

.chem-footer-columns-area {
    background-color: #666666;
}
/* Footer 3-column layout matching production (48% / 26% / 26%) */
.chem-footer-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
    padding: 40px 0 !important;
}
.chem-footer-col--wide {
    flex: 0 0 48% !important;
    max-width: 48% !important;
}
.chem-footer-col {
    flex: 1 !important;
}

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

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

.chem-footer p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.chem-menu-element-wrapper.footer-menu-right .chem-menu-element-list a {
    justify-content: flex-end !important;
}

.chem-footer-widget-area {
    background-color: #666666;
    background-image: url(/wp-content/uploads/logo_znak_wodny_3.png);
    background-repeat: no-repeat;
    border-width: 3px 0 0 0;
    border-color: #ea5b0c;
    border-style: solid;
    background-position: right 20px top -280px !important;
    background-size: initial !important;
}

/* ===========================
   BUTTONS
   =========================== */

.chem-button.large-font {
    font-size: 1.5em;
}

/* ===========================
   PRODUCT (SINGLE)
   =========================== */

.single-product #main .product h1.product_title {
    font-weight: bold !important;
    color: #ea5b0c;
}

.single-product #main .product-border {
    display: none;
}

.single-product #main ul.tabs.wc-tabs {
    display: none;
}

.single-product #main .woocommerce-Tabs-panel {
    border: none;
}

.single-product #main .chem-woocommerce-tab-title {
    display: none;
}

#main h4.widget-title {
    color: #ffffff;
    background-color: #1d1d1b;
    text-align: center;
    padding: 0.33em;
    margin-top: 0px;
    margin-bottom: 1em;
}

.single-product #main h4.widget-title {
    margin-top: 0px;
}

.tax-product_cat #content > div.catalog-ordering.chem-clearfix {
    display: none !important;
}

.tax-product_cat #content {
    padding-top: 20px;
}

.chem-image-wrapper .chem-rollover {
    background-image: linear-gradient(to top, #ea5b0c 0, rgba(234, 91, 12, 0.9) 100%) !important;
}

li.current-cat {
    font-weight: 600 !important;
}

/* Remove shadow from img lift animation */
.chem-image-hovers .imageframe-liftup:before {
    box-shadow: none !important;
}

.bg-size-auto {
    background-size: auto !important;
}

#accordian-1 div.panel-heading > h4 > a > p,
#accordian-1 div.panel-heading > h4 > p,
#accordian-1 > div.chem-panel > p,
body.home div.chem-slider-container + p {
    display: none;
}

/* ===========================
   B2B AGE/QUESTION OVERLAY
   =========================== */

#zaslepka {
    color: #8f8f8f;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 300;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url("/wp-content/themes/chemnovatic/assets/images/chemnovatic_warning-tlo-prawy-gorny.jpg") no-repeat;
    z-index: 299;
    display: block;
    background-size: 100% auto;
}

#infotext {
    font-weight: 300;
    line-height: 1.5em;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

@media (min-width: 1180px) {
    #infotext {
        font-size: 2vw;
    }
    #zaslepka img {
        max-width: 100%;
    }
}

@media (max-width: 1179px) {
    #infotext {
        font-size: 3vw;
    }
    #zaslepka img {
        max-width: 85%;
    }
}

@media (max-width: 900px) {
    #infotext {
        font-size: 4vw;
    }
    #zaslepka img {
        max-width: 75%;
    }
}

#question {
    padding-top: 30px;
    padding-bottom: 40px;
}

.buttoninfoyes {
    width: 180px;
    background-color: #e75105;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #fff;
    margin: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.buttoninfoyes:hover,
.buttoninfono:hover {
    color: #000000 !important;
}

.buttoninfono {
    width: 180px;
    background-color: #ececec;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #e75105;
    margin: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

div#wow-modal-close-1 {
    display: none !important;
}

.moove-gdpr-info-bar-content button.mgbutton {
    border-radius: 0px !important;
}

.stand-out > a:not(:hover) > span {
    color: #ea5b0c !important;
}

/* ===========================
   RESPONSIVE - MOBILE
   =========================== */

@media (max-width: 800px) {
    .chem-header-content-3-wrapper {
        display: none !important;
    }

    .chem-posts-container .chem-date-and-formats {
        display: none !important;
    }
}

.chem-header-has-flyout-menu-content {
    flex-direction: row-reverse;
}

.chem-header-has-flyout-menu-content > .chem-logo {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media only screen and (max-width: 800px) {
    .chem-header-v4.chem-mobile-menu-design-flyout .chem-logo .chem-logo-link {
        max-width: 100% !important;
    }
}

@media (max-width: 1024px) {
    .mob-box-right-bottom > div {
        border-width: 0px 1px 1px 0px !important;
    }

    .mob-box-bottom > div {
        border-width: 0px 0px 1px 0px !important;
    }

    .mob-box-right > div {
        border-width: 0px 1px 0px 0px !important;
    }
}

.chem-main-menu-icon:hover:before {
    color: #ea5b0c !important;
    background-color: transparent !important;
}

ul.bundle .bundle-sku {
    font-style: italic;
}

/* ===========================
   MOBILE MENU (MODERN)
   =========================== */

@media (max-width: 800px) {
    .modern-mobile-menu-adj {
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .chem-mobile-menu-icons {
        position: relative !important;
        display: flex !important;
    }

    .chem-mobile-menu-icons .chem-icon.fas.fa-times {
        width: 25px;
        padding: 0px 4px;
    }

    .b2b-mobile-basket {
        font-size: 20px;
        color: #000000;
        margin-right: 10px;
    }

    .chem-mobile-menu-design-modern .chem-mobile-menu-icons a {
        font-size: 25px;
        text-decoration: none !important;
    }

    .chem-mobile-menu-design-modern .chem-mobile-menu-icons a:hover:before {
        color: var(--link_color);
        text-decoration: none !important;
    }

    .vapy-mobile-search {
        background-color: #000000;
    }

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

    .vapy-mobile-search .popular-searches-title {
        color: #999999;
        font-size: 14px;
        font-weight: bolder;
        margin-top: 25px;
        margin-bottom: 18px;
        padding-left: 15px;
    }

    .vapy-mobile-search .popular-searches a {
        color: #ffffff;
        font-size: 16px;
        font-weight: normal;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
    }

    .chem-icon.awb-icon-bars,
    .chem-icon.fas.fa-times {
        z-index: 999;
    }

    .chem-icon.awb-icon-search {
        margin-right: 10px;
    }

    .vapy-mobile-icons-overlay {
        visibility: collapse;
        position: absolute;
        width: 0%;
        height: 0%;
        background-color: rgba(255, 255, 255, 0.93);
        opacity: 0;
        transition: opacity .4s ease 0s, visibility 0.4s ease 0s;
        z-index: 998;
        top: 0;
        left: 0;
    }

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

    .chem-mobile-menu-design-modern:has(.chem-secondary-main-menu nav.chem-mobile-nav-holder[style*="display: block"]) .chem-icon.fas.fa-times {
        display: 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;
    }

    .chem-mobile-menu-text-align-center li.chem-mobile-nav-item li a:before {
        content: "";
    }

    body:not(.mobile-menu-design-flyout) .chem-mobile-nav-item a {
        height: auto;
        border: none;
        background: none;
    }

    body:not(.mobile-menu-design-flyout) .chem-mobile-nav-item a:hover {
        background: none;
    }

    body:not(.mobile-menu-design-flyout) .chem-mobile-current-nav-item > a {
        background: none;
    }

    .chem-mobile-nav-holder ul.sub-menu {
        background-color: #f3f3f3;
    }

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

    .chem-search-form-content {
        position: unset !important;
    }

    .searchform .chem-search-form-content .chem-search-field input {
        border-radius: 25px;
    }

    .chem-body .chem-header-wrapper .chem-secondary-main-menu {
        background-color: #ffffff !important;
    }

}

@media (min-width: 801px) {
    .vapy-mobile-search,
    .vapy-mobile-icons-overlay {
        display: none;
    }
}

/* ===========================
   MISC
   =========================== */

a.link-disabled {
    pointer-events: none;
    text-decoration: none;
    background-color: #999999;
    border-color: #999999;
}

.chem-menu-cart-checkout.chem-menu-cart-subtotal {
    color: #fff;
    cursor: default;
}

/* ===========================
   STICKY HEADER
   =========================== */

/* Only the dark menu bar sticks (like production), not the whole header */
.chem-sticky-header-wrapper.chem-is-sticky .chem-secondary-main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

body.admin-bar .chem-sticky-header-wrapper.chem-is-sticky {
    top: 32px;
}

/* Placeholder height when sticky */
.chem-header-v4.chem-has-sticky .chem-header-sticky-height {
    display: block;
}

/* ===========================
   MOBILE SUBMENU ACCORDION
   =========================== */

.chem-mobile-nav-holder .menu-item-has-children > a::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    transition: transform 0.2s;
}

.chem-mobile-nav-holder .menu-item-has-children.chem-submenu-open > a::after {
    transform: rotate(180deg);
}

.chem-mobile-nav-holder .sub-menu {
    display: none;
}

/* ===========================
   BLOG GRID
   =========================== */

.chem-blog-wrapper {
    display: flex;
    gap: 30px;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 30px 20px;
}

.chem-blog-content {
    flex: 1;
    min-width: 0;
}

.chem-blog-header {
    margin-bottom: 30px;
}

.chem-blog-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
}

.chem-blog-description {
    color: #666;
    font-size: 14px;
}

.chem-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.chem-blog-card {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-blog-card__image-link {
    display: block;
    text-decoration: none;
}

.chem-blog-card__image {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.chem-blog-card__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.chem-blog-card__placeholder {
    width: 100%;
    padding-bottom: 66%;
    background-color: #ddd;
}

.chem-blog-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #ea5b0c 0%, rgba(234, 91, 12, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
}

.chem-blog-card__image-link:hover .chem-blog-card__overlay {
    opacity: 1;
}

.chem-blog-card__image-link:hover .chem-blog-card__image img {
    transform: scale(1.05);
}

.chem-blog-card__overlay-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.chem-blog-card__overlay-category {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.chem-blog-card__title {
    margin: 12px 0 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

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

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

/* Blog Sidebar */

.chem-blog-sidebar {
    width: 280px;
    flex-shrink: 0;
    order: -1; /* Sidebar on left like production */
}

.chem-blog-sidebar .widget {
    margin-bottom: 25px;
}

.chem-blog-sidebar .widget-title {
    color: #ffffff;
    background-color: #1d1d1b;
    text-align: center;
    padding: 0.33em;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 14px;
}

.chem-blog-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-blog-sidebar li {
    padding: 4px 0;
    font-size: 14px;
}

.chem-blog-sidebar a {
    color: #333;
    text-decoration: none;
}

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

.chem-blog-sidebar .tagcloud a {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    background: #f0f0f0;
    font-size: 13px !important;
    color: #333;
    text-decoration: none;
}

.chem-blog-sidebar .tagcloud a:hover {
    background: #ea5b0c;
    color: #fff;
}

/* Blog Pagination */

.chem-blog-pagination {
    margin-top: 40px;
    text-align: center;
}

.chem-blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.chem-blog-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.chem-blog-pagination .page-numbers.current,
.chem-blog-pagination .page-numbers:hover {
    background-color: #ea5b0c;
    border-color: #ea5b0c;
    color: #fff;
}

/* Single Post */

.chem-single-post__header {
    margin-bottom: 25px;
}

.chem-single-post__title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.chem-single-post__content {
    line-height: 1.7;
    color: #444;
}

.chem-single-post__content img {
    max-width: 100%;
    height: auto;
}

/* Blog Responsive */

@media (max-width: 768px) {
    .chem-blog-wrapper {
        flex-direction: column;
    }

    .chem-blog-grid {
        grid-template-columns: 1fr;
    }

    .chem-blog-sidebar {
        width: 100%;
    }
}

/* ===========================
   SHOP LAYOUT (sidebar + content)
   =========================== */

.chem-shop-layout {
    display: flex;
    gap: 30px;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 20px;
}

.chem-shop-sidebar {
    flex: 0 0 200px;
    width: 200px;
}

/* Mobile/tablet: stack sidebar under content so it doesn't squeeze main area. */
@media (max-width: 991px) {
    .chem-shop-layout {
        flex-direction: column;
        gap: 20px !important;
    }
    .chem-shop-sidebar,
    .chem-shop-content {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Collapse child categories by default, show on hover/active */
.chem-shop-sidebar .widget_product_categories ul.children,
.widget_product_categories .cat-item ul.children {
    display: none !important;
    padding-left: 15px;
    margin-top: 3px;
}
.chem-shop-sidebar .widget_product_categories .cat-item:hover > ul.children,
.chem-shop-sidebar .widget_product_categories .cat-item.current-cat > ul.children,
.chem-shop-sidebar .widget_product_categories .cat-item.current-cat-parent > ul.children,
.widget_product_categories .cat-item:hover > ul.children,
.widget_product_categories .cat-item.current-cat > ul.children,
.widget_product_categories .cat-item.current-cat-parent > ul.children {
    display: block !important;
}

/* Expand arrow indicator for categories with children */
.chem-shop-sidebar .widget_product_categories .cat-item.cat-parent > a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 11px;
    margin-left: 6px;
    transition: transform 0.2s;
    display: inline-block;
}
.chem-shop-sidebar .widget_product_categories .cat-item.cat-parent:hover > a::after {
    transform: rotate(90deg);
}

.chem-shop-sidebar .widget {
    margin-bottom: 20px;
}

.chem-shop-sidebar .widget-title {
    color: #ffffff;
    background-color: #1d1d1b;
    text-align: center;
    padding: 0.33em;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 14px;
}

.chem-shop-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-shop-sidebar li {
    padding: 3px 0;
    font-size: 14px;
}

.chem-shop-sidebar li.current-cat {
    font-weight: 600;
}

.chem-shop-sidebar a {
    color: #ea5b0c;
    text-decoration: none;
}

.chem-shop-sidebar a:hover {
    color: var(--chem-primary-dark);
}

.chem-shop-sidebar .children {
    padding-left: 15px;
    margin-top: 3px;
}

.chem-shop-content {
    flex: 1;
    min-width: 0;
}

/* Product grid: 3 columns – force override WooCommerce defaults */
.chem-shop-content ul.products,
.woocommerce ul.products[class*="columns-"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-shop-content ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    float: none !important;
}

/* Hide reviews section entirely on single product */
.single-product #reviews.woocommerce-Reviews {
    display: none;
}

/* Shop layout responsive */
@media (max-width: 768px) {
    .chem-shop-layout {
        flex-direction: column;
    }

    .chem-shop-sidebar {
        width: 100%;
        order: 2;
    }

    .chem-shop-content {
        order: 1;
    }

    .chem-shop-content ul.products,
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .chem-shop-content ul.products,
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================
   PRODUCT CARD ROLLOVER
   =========================== */

.woocommerce ul.products li.product {
    position: relative;
    overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    position: relative;
    display: block;
}

.woocommerce ul.products li.product img {
    transition: opacity 0.3s;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* Product tile: PROD shows a simple white tile with title + "Dowiedz się więcej"
   button, no orange overlay on hover. Removed the linear-gradient overlay and
   custom excerpt block (inc/woocommerce.php also unhooked) per audit PDF
   2026-04-24 ("po najechaniu kompletnie co innego się wyświetla"). */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
    margin-top: 10px;
    padding: 10px 0;
    text-align: center;
}

/* ===========================
   ISSUE 1: Homepage Service Cards (3-column)
   Production-like styling: shadow, equal height
   =========================== */

.chem-cards-section .chem-card__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ea5b0c;
    text-align: center;
    line-height: 1.25;
}

.chem-cards-section .chem-card__title a {
    color: #ea5b0c;
    text-decoration: none;
    transition: color 0.2s;
}

.chem-cards-section .chem-card__title a:hover {
    color: #c44a09;
}

/* Card padding + visual lift to match PROD */
.chem-cards-section .chem-card {
    padding: 28px 26px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chem-cards-section .chem-card__content {
    flex: 1;
}

.chem-cards-section .chem-card__content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.chem-cards-section .chem-card__content ul li {
    padding: 4px 0 4px 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
}

.chem-cards-section .chem-card__content ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: #ea5b0c; /* Green checkmarks like production */
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 12px;
}

/* ============================================================
   360° E-Liquid Industry Solutions hex labels (EN/ES/PT homes)
   PL home keeps labels baked into image, so this section is hidden
   there via lang check in full_image.php template.
   ============================================================ */
.chem-hex-section .chem-hex-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 18px 24px;
    text-align: center;
}
.chem-hex-section .chem-hex-label {
    font-size: 14px;
    font-weight: 700;
    color: #ea5b0c;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}
.chem-hex-section__title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .chem-hex-section .chem-hex-labels {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px;
    }
    .chem-hex-section .chem-hex-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* ===========================
   ISSUE 2: Mega Menu nested sub-menus
   Hide nested sub-menus inside megamenu items
   =========================== */

.chem-megamenu .chem-megamenu__item > ul.sub-menu {
    display: none;
    padding-left: 15px;
    list-style: none;
    margin: 0;
}

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

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

.chem-megamenu .chem-megamenu__item ul.sub-menu li a {
    display: block;
    padding: 4px 0;
    color: #555;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    border-bottom: none;
    white-space: normal;
}

.chem-megamenu .chem-megamenu__item ul.sub-menu li a:hover {
    color: #ea5b0c;
    background: transparent;
}

/* Extra megamenu columns (All Products, Distribution) - inline */
.chem-megamenu > .chem-megamenu__column:nth-child(n+4) {
    grid-column: auto;
}

/* ===========================
   ISSUE 4: Blog Grid (page-builder blog grid)
   Classes: chem-blog-grid, chem-blog-grid__item, etc.
   =========================== */

.chem-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.chem-blog-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.chem-blog-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.chem-blog-grid__item {
    display: block;
}

.chem-blog-grid__item > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.chem-blog-grid__thumb {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.chem-blog-grid__image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.chem-blog-grid__item > a:hover .chem-blog-grid__image {
    transform: scale(1.05);
}

.chem-blog-grid__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    margin: 12px 0 0;
    padding: 0;
}

.chem-blog-grid__item > a:hover .chem-blog-grid__title {
    color: #ea5b0c;
}

@media (max-width: 768px) {
    .chem-blog-grid,
    .chem-blog-grid--2,
    .chem-blog-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   ISSUE 5: Single Product Page
   Gallery left, summary right, breadcrumbs, tabs, related products
   =========================== */

/* Breadcrumbs */
.woocommerce-breadcrumb {
    font-size: 13px;
    color: #999;
    padding: 15px 20px;
    max-width: var(--chem-site-width);
    margin: 0 auto;
}

.woocommerce-breadcrumb a {
    color: #333;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: #ea5b0c;
}

/* Product layout: gallery (left) + summary (right). Uses CSS grid so the
 * single-product .product { display: grid } rule further down (line ~3492)
 * drives the actual layout. These rules are overrides for children and
 * must NOT set max-width:48% or flex widths (that gives 48% of 50% cell
 * = 190px – the bug fixed in Set #5). Production layout is ~350px gallery
 * / ~460px summary inside ~822px content column. */
.single-product .woocommerce-product-gallery {
    opacity: 1 !important;
    max-width: none;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child {
    flex: 0 0 100%;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) {
    flex: 0 0 calc(25% - 6px);
    max-width: calc(25% - 6px);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
    cursor: pointer;
    border: 1px solid #e0e0e0;
}

.single-product .summary.entry-summary {
    max-width: none;
    min-width: 0;
}

/* Product title */
.single-product .product_title {
    font-size: 28px;
    font-weight: 700;
    color: #ea5b0c;
    margin: 0 0 15px;
}

/* Product meta (categories + tags): prod uses black labels, orange links.
   Each meta span on its own line (PROD renders posted_in/tagged_as as blocks). */
.single-product .product_meta {
    font-size: 13px;
    color: #000;
    margin-bottom: 15px;
}
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as,
.single-product .product_meta .sku_wrapper {
    display: block;
}

.single-product .product_meta a {
    color: #ea5b0c;
}

.single-product .product_meta a:hover {
    color: #ea5b0c;
}

/* Price */
/* Product price – PROD renders the amount in brand orange; a plugin
   stylesheet was tinting it olive (#b3af54) on TEST (#60). */
/* PDF 7 p9-10: PROD renders the B2B price markedly larger than TEST. */
.single-product .summary .price {
    font-size: 32px;
    color: #ea5b0c !important;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .woocommerce-Price-amount bdi,
.single-product .summary .price .woocommerce-Price-currencySymbol {
    color: #ea5b0c !important;
}
/* "(net price)" suffix – small, muted */
.single-product .summary .price .woocommerce-price-suffix {
    color: #777 !important;
    font-size: 13px;
    font-weight: 400;
}
/* "(… /kg)" per-unit price – own line, muted (PROD layout) */
.single-product .summary .price .vapy-price,
.single-product .summary .price .price-per-liter {
    display: block;
    color: #777 !important;
    font-size: 14px;
    font-weight: 400;
}

/* Short description */
.single-product .summary .woocommerce-product-details__short-description {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #555;
}

/* Variations form */
.single-product .summary .variations {
    width: 100%;
    margin-bottom: 15px;
}

.single-product .summary .variations td {
    padding: 8px 5px;
    vertical-align: middle;
}

.single-product .summary .variations select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #ddd;
    font-size: 15px;
}

.single-product .summary .single_add_to_cart_button {
    background-color: #ea5b0c;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
}

.single-product .summary .single_add_to_cart_button:hover {
    background-color: #333;
}

/* Quantity input */
/* Quantity selector with -/+ buttons added by main.js (PROD #60) */
.single-product .summary .quantity {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}
.single-product .summary .quantity input[type="number"] {
    width: 64px;
    padding: 13px 8px;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-size: 16px;
    -moz-appearance: textfield;
}
.single-product .summary .quantity input[type="number"]::-webkit-outer-spin-button,
.single-product .summary .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.single-product .summary .quantity .chem-qty-btn {
    width: 44px;
    padding: 0;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.single-product .summary .quantity .chem-qty-btn:hover {
    background: #ea5b0c;
    border-color: #ea5b0c;
    color: #fff;
}

/* Tabs (Description, Additional Info) */
.single-product .woocommerce-tabs {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 30px;
    clear: both;
}

.single-product .woocommerce-tabs ul.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    border-bottom: 2px solid #e0e0e0;
}

.single-product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #ea5b0c;
    border-bottom-color: #ea5b0c;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #ea5b0c;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 25px 0;
    line-height: 1.8;
    color: #000;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-size: 26px;
    line-height: 31px;
    margin-top: 40px;
    margin-bottom: 15px;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3 {
    font-size: 24px;
    line-height: 1.2;
    color: #ea5b0c;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2:first-child,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3:first-child {
    margin-top: 0;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel blockquote {
    margin: 32px 40px;
}

/* Injected headings (via the_content filter in inc/woocommerce.php) –
   match PROD fusion-title heading sizes + orange color. */
.single-product .chem-faq-heading {
    font-size: 26px;
    line-height: 1.2;
    color: #ea5b0c;
    font-weight: 700;
    margin: 40px 0 20px;
}
.single-product .chem-doc-heading {
    font-size: 24px;
    line-height: 1.2;
    color: #ea5b0c;
    font-weight: 700;
    margin: 40px 0 15px;
}

/* Team contact buttons. PROD-parity: style existing mailto/tel/chem-button
   links inside the product description tab as pomarańczowe pill buttons.
   PROD renders these as inline-block `fusion-button button-flat button-large`
   at 47px height with 12px border-radius and font-weight 400 (not 700).
   Earlier override used 30px radius / 700 weight / display:block – audit
   PDF 2026-04-24 flagged "buttony mają inny kształt + większe zaokrąglenia". */
/* R42/Z9: zdjety ryczalt `a[href^="mailto:"]`. Robil pomaranczowy przycisk
   z KAZDEGO adresu e-mail w zakladce opisu, takze z tego stojacego w srodku
   zdania — stad uwaga klienta „tekst sales@chemnovatic.com zostal zastapiony
   buttonem i dziwnie to wyglada wewnatrz bloku tekstowego". Produkcja ma tam
   zwykly link (sprawdzone na `/es/product/pmta-submission-services-4/`),
   a przyciskiem sa tylko samodzielne wezwania do dzialania — te maja w tresci
   klase `chem-button` i nadal je lapiemy. */
.single-product .woocommerce-Tabs-panel a.chem-button,
.single-product .woocommerce-Tabs-panel a[href^="tel:"] {
    display: inline-block;
    margin: 5px 0;
    padding: 13px 29px;
    background-color: #ea5b0c !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    text-transform: none !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 12px;
    width: auto;
    transition: background-color 0.2s;
}
.single-product .woocommerce-Tabs-panel a.chem-button:hover,
.single-product .woocommerce-Tabs-panel a[href^="tel:"]:hover {
    background-color: #333 !important;
}
/* Zwykly link mailto w toku tekstu: pomaranczowy, podkreslony na najechanie —
   tak jak na produkcji. */
.single-product .woocommerce-Tabs-panel a[href^="mailto:"]:not(.chem-button) {
    color: #ea5b0c;
    text-decoration: none;
}
.single-product .woocommerce-Tabs-panel a[href^="mailto:"]:not(.chem-button):hover {
    text-decoration: underline;
}
/* Exception: mailto inside blockquote (e.g. "skontaktuj się: sales@...")
   should stay as plain orange link. */
.single-product .woocommerce-Tabs-panel blockquote a[href^="mailto:"] {
    display: inline;
    padding: 0;
    background: transparent;
    color: #ea5b0c !important;
    text-decoration: underline !important;
    font-weight: inherit;
    font-size: inherit;
    min-width: 0;
}

/* Related Products */
.single-product .related.products {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.single-product .related.products > h2,
.single-product .related.products > h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

.single-product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-product .related.products ul.products li.product {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

/* Single product responsive */
@media (max-width: 768px) {
    .single-product div.product {
        flex-direction: column;
    }

    .single-product .woocommerce-product-gallery {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .single-product .summary.entry-summary {
        flex: 0 0 100%;
    }

    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .single-product .related.products ul.products {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   HOMEPAGE-SPECIFIC STYLES
   =========================== */

/* Logo size fix - match production */
.chem-logo-1x {
    max-height: 65px !important;
    width: auto;
    height: auto;
}

@media (max-width: 800px) {
    .chem-logo-1x {
        max-height: 45px !important;
    }
}

/* Homepage H1 band - no orange background, centered orange text.
   Scoped to homepage only; other pages' first h1 might have inline
   `title-heading-left` and must stay left-aligned (audit PDF 2026-04-24). */
.chem-section.chem-h1-band,
body.home .chem-page-builder .chem-html-section h1:first-child,
body.home .chem-section--fullwidth h1 {
    text-align: center;
    color: #ea5b0c;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.16;
    background: transparent !important;
    padding: 0;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
}

/* Homepage service cards - match production styles.
 * Production shows cards stacked vertically (1 per row), not in a 3-col grid.
 * Each card has: orange heading + bullet list with green checkmarks. */
/* Generic cards: white bg with subtle border (matches prod Baza Wiedzy etc.) */
.chem-section .chem-col--1-3 .chem-card,
.chem-cards-section .chem-card {
    background: #ffffff;
    padding: 25px 30px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid var(--chem-border);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* Homepage cards: grey tint with stronger shadow (prod homepage style) */
body.home .chem-cards-section .chem-col.chem-card {
    background: rgba(198, 198, 198, 0.3);
    box-shadow: 2px 2px 4px 1px rgb(198, 198, 198);
    border: 0;
}

/* Homepage cards: 3-column row matching production */
body.home .chem-cards-section > .chem-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
body.home .chem-cards-section > .chem-row > .chem-col {
    padding: 0 15px;
}

/* Homepage cards section: span the full 1200px container like PROD. Layers of
   cumulative padding (page-content + entry-content + row) had squeezed it to
   ~1040px, so the three cards rendered noticeably narrower than production
   (≈309px vs ≈368px). Widen the section to the container, drop the row's side
   padding. The negative margin (-50px) escapes entry-content + page-content
   padding so the section is exactly the centred 1200px box. Desktop only –
   below 1260px there is no surplus padding to absorb, so the negative margin
   would overflow the viewport. */
@media (min-width: 1260px) {
    body.home .entry-content > .chem-section.chem-cards-section {
        width: calc(100% + 100px);
        max-width: none;
        margin-left: -50px;
        margin-right: -50px;
    }
    body.home .chem-cards-section > .chem-row {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.chem-cards-section .chem-card h2,
.chem-section .chem-col--1-3 h2,
body.home .chem-cards-section .chem-card h2 {
    font-size: 19px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.3;
}

.chem-cards-section .chem-card h2 a,
body.home .chem-cards-section .chem-card h2 a {
    color: #000000;
    text-decoration: none;
}

body.home .chem-cards-section .chem-card h2 a:hover {
    color: #333;
}

body.home .chem-cards-section .chem-card__content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

body.home .chem-cards-section .chem-card__content ul li {
    padding: 4px 0 4px 24px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
}

body.home .chem-cards-section .chem-card__content ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: #ea5b0c;
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 14px;
}

/* Homepage service cards – breathing room to match PROD. The list rows were
   packed ~35px apart vs ~50px on production, so the cards felt cramped.
   margin-bottom (not extra padding) keeps the absolutely-positioned check
   icon aligned with its text. */
body.home .chem-cards-section .chem-card__content {
    line-height: 1.8;
}
body.home .chem-cards-section .chem-card__content ul {
    margin-top: 20px !important;
}
body.home .chem-cards-section .chem-card__content ul li {
    margin-bottom: 15px !important;
}
body.home .chem-cards-section .chem-card__content ul li:last-child {
    margin-bottom: 0 !important;
}
body.home .chem-cards-section .chem-card h2 {
    margin-bottom: 16px;
}

/* Card inner padding: 20px on every side to match PROD (was 20/15 – text sat
   closer to the box edge horizontally). The card is box-sizing:border-box, so
   this does not change the card's outer width. */
body.home .chem-cards-section .chem-card {
    padding: 20px !important;
}

/* Homepage "I want to develop" section - H3 links */
body.home .chem-col h3 a {
    color: #ea5b0c;
    text-decoration: none;
}

body.home .chem-col h3 a:hover {
    color: #333;
}

/* Homepage counters - responsive */
@media (max-width: 800px) {
    body.home .chem-section[style*="background-color:#ea5b0c"] .chem-col[class*="chem-col--1-4"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Homepage CTA button - white bg with orange hover */
.chem-button--xlarge {
    padding: 15px 40px;
    font-size: 16px;
}

.chem-button--large {
    padding: 13px 28px;
    font-size: 14px;
    margin: 5px;
}

/* Contact section buttons stacking */
.lnum .chem-button {
    display: inline-block;
    margin-bottom: 8px;
}

/* ===========================
   PARAGRAPH MARGINS
   =========================== */

p {
    margin: 0 0 20px;
}

/* ===========================
   INTRO TEXT
   =========================== */

.chem-intro-text,
.chem-html-section > .chem-section:nth-child(2) {
    text-align: left;
}

/* ===========================
   REGISTER CTA SECTION
   =========================== */

.chem-cta-register,
.chem-section[style*="background-color:#000000"],
.chem-section[style*="background-color: #000000"],
.chem-section[style*="background-color:black"] {
    text-align: center;
    color: #ffffff;
}

.chem-cta-register h1,
.chem-section[style*="background-color:#000000"] h1 {
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
}

/* ===========================
   CONTACT SECTION ("Let's shape")
   =========================== */

.chem-contact-section {
    display: flex;
}

/* ===========================
   HOMEPAGE BELOW-FOLD FIXES
   Production parity – 2026-03-23
   =========================== */

/* Testimonials: blockquote italic to match production */
.chem-testimonials .chem-testimonial {
    font-style: italic;
}

/* Testimonials: author (cite) styling */
.chem-testimonials .chem-testimonial cite {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: #4a4e57;
    display: block;
    margin-top: 10px;
}

/* Footer headings: test uses h3, prod uses h5 – match visually */
.chem-footer h3,
.chem-footer-widget-area h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
}


/* WooCommerce product titles - orange like production */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce-loop-product__title,
.product_title,
h1.product_title {
    color: #ea5b0c !important;
}

/* Blog post titles - orange */
.chem-blog-card h3,
.chem-blog-grid__title,
article h2 a,
.entry-title a {
    color: #ea5b0c !important;
}

/* Sidebar widget links - orange */
.chem-shop-sidebar a,
.widget_product_categories a,
.widget_categories a,
.widget a {
    color: #ea5b0c !important;
}
.chem-shop-sidebar a:hover,
.widget a:hover {
    color: #c94a09 !important;
}

/* Fix product gallery visibility - force opacity */
.woocommerce-product-gallery {
    opacity: 1 !important;
}
.woocommerce-product-gallery .flex-viewport {
    overflow: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}
/* Ensure gallery wrapper shows images, not just magnifier */
.woocommerce-product-gallery__trigger {
    z-index: 9 !important;
}

/* Force 3 column product grid (archive/shop only – sidebar width is
   consolidated below; do not override here). */
.chem-shop-content ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.chem-shop-content ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* FAQ page title styling */
.chem-page-title {
    color: #ea5b0c !important;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.chem-page-subtitle {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Fix 1: Video hero full-width breakout */









/* Fix 4: Service cards H2 - BLACK like production (not orange) */
.chem-cards-section .chem-card h2,
.chem-section .chem-col--1-3 h2,
.chem-section .chem-col--1-3 h2 a {
    color: #000000 !important;
}

/* Fix 5: Center menu items like production */
nav.chem-main-menu {
    justify-content: center !important;
}
ul.chem-menu {
    justify-content: center !important;
    flex-wrap: nowrap !important;
}

/* ES/PT have longer translations of menu items ("Productos de Nicotina",
   "Minha conta") that overflow the container at 1280-1500px. Tighten font
   on long translations until we hit hamburger breakpoint. */
/* R42/Z1: pozycja konta MUSI byc wylaczona z tej reguly. Jest bardziej
   szczegolowa (0,2,4) niz ukrycie etykiety w base.css `ul.chem-menu >
   li.menu-my-account > a` (0,2,3), wiec przywracala `font-size: 13px` i na
   ES/PT obok ikony ludzika stalo "Mi cuenta" / "Minha conta" — dokladnie
   w przedziale 992-1500 px, czyli na typowym laptopie. Na EN/PL problemu nie
   bylo, bo tam etykiete ukrywa dodatkowo `a[href*="my-account"]`, a hiszpanski
   i portugalski adres to /mi-cuenta/ i /minha-conta/. */
@media (min-width: 992px) and (max-width: 1500px) {
    html[lang="es-ES"] ul.chem-menu > li:not(.menu-my-account) > a,
    html[lang="pt-PT"] ul.chem-menu > li:not(.menu-my-account) > a,
    body.lang-es ul.chem-menu > li:not(.menu-my-account) > a,
    body.lang-pt ul.chem-menu > li:not(.menu-my-account) > a {
        font-size: 13px !important;
        padding: 0 10px !important;
        letter-spacing: 0 !important;
    }
}
/* Clamp main menu width to viewport regardless of lang.
   IMPORTANT: never use overflow: hidden here – it would clip dropdown
   sub-menus (they're position:absolute and hang below the nav bar). */
ul.chem-menu, nav.chem-main-menu {
    max-width: 100%;
}

/* Search input: visible when inside our open dropdown wrapper.
   The wrapper (.chem-search-contents) handles show/hide via :hover/:focus-within/.is-open
   on the parent <li>. Input itself stays inline-flex inside the form. */
.chem-search-contents .chem-search-form input[type='search'],
.chem-search-contents .chem-search-form input[type='text'] {
    display: block;
}

/* ===== Pixel-comparison fixes (2026-03-23) ===== */

/* Fix 4: Register button uppercase */
.chem-section[style*='background-color:#000'] a.chem-button,
.chem-section[style*='background-color: #000'] a.chem-button,
.chem-section[style*='background:black'] a.chem-button {
    text-transform: uppercase !important;
}

/* Fix 5: Checkmark icons in service cards - orange circle checkmarks (PROD) */
.chem-card ul li::before,
.chem-cards-section li::before,
.chem-section .chem-col--1-3 li::before {
    content: "\f058" !important;  /* fa-check-circle (solid filled circle) */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #ea5b0c !important;
}
.chem-card ul li,
.chem-cards-section li,
.chem-section .chem-col--1-3 li {
    font-size: 16px;
    line-height: 1.8;
    padding-left: 5px;
}

/* Fix 6: Hide scroll-to-top button (not on production) */
.fusion-top-top-link,
#toTop,
.back-to-top,
a[href='#top'],
.scroll-to-top {
    display: none !important;
}

/* Fix 7: Service cards - match production spacing */
.chem-cards-section .chem-card,
.chem-section .chem-col--1-3 {
    padding: 20px 15px !important;
}
.chem-cards-section .chem-row,
.chem-section .chem-row {
    gap: 20px 0;
}

/* Force service cards 3 columns - never wrap */
.chem-section .chem-row {
    display: flex;
    flex-wrap: wrap;
}
.chem-section .chem-col--1-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    box-sizing: border-box !important;
}

/* Checkmark style - filled circle, orange like production */
.chem-card ul li::before,
.chem-section .chem-col--1-3 ul li::before {
    content: '\f058' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #ea5b0c !important;
    margin-right: 8px !important;
}

/* Counters - force 4 columns per row */
.chem-section[style*="background-color"] > .chem-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}
.chem-section[style*="background-color"] .chem-col--1-4 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    text-align: center !important;
}

/* I want to develop - 2 column layout */
.chem-section .chem-col--1-2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
}

/* Images inside columns must not overflow */
.chem-col img {
    max-width: 100% !important;
    height: auto !important;
}

/* Ensure chem-row is always flex */
.chem-row {
    display: flex !important;
    flex-wrap: wrap;
}

/* Also prevent .chem-html-section from breaking flex */
.chem-html-section .chem-section .chem-row {
    display: flex !important;
    flex-wrap: wrap;
}

/* Counter sections: no gap, full width */
.chem-section[style*="background-color"] > .chem-row {
    gap: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

/* 2-column layout fix: account for gap */
.chem-section .chem-col--1-2 {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}

/* Also fix 3-column layout for gap */
.chem-section .chem-col--1-3 {
    flex: 0 0 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
}

/* Menu: My Account - show icon instead of text */
nav[aria-label="Main Menu"] > ul > li > a[href*="my-account"] {
    font-size: 0 !important;
    line-height: 1;
}
nav[aria-label="Main Menu"] > ul > li > a[href*="my-account"]::before {
    content: '\f007';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: #ffffff;
}

/* NOTE: an older header-search implementation lived here – it forced
   form[role="search"] to display:none !important and re-revealed it as a
   separate 250px white box on .chem-search-open. It conflicted with the
   current .chem-search-contents dropdown in base.css (the form stayed
   hidden on hover, so an empty dark box appeared). Removed – the search
   is driven solely by base.css + the click toggle in main.js. */

/* ===========================
   FULL-WIDTH SECTIONS FIX
   Force sections with backgrounds to break out of .chem-row max-width
   =========================== */

/* Sections that need full width must break out of their parent .chem-row */
.chem-html-section__content > .chem-section,
.chem-html-section__content > .chem-cards-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
}

/* Orange counter sections: ensure full-width background */
/* Full-bleed only for COLORED bands (counters etc.). White sections gain
   nothing from full-bleed and the side padding squeezed their content to
   ~840px (client PDF 15-07 p.7: ESG page bottom row word-wrapped). */
.chem-html-section__content > .chem-section[style*="background-color"]:not([style*="#fff"]):not([style*="#FFF"]):not([style*="rgb(255"]) {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
}

/* STC Nicotine full-width image */
.chem-html-section__content > a[href*="sustainable"],
.chem-html-section__content > .chem-full-image {
    display: block;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.chem-html-section__content > a[href*="sustainable"] img {
    width: 100% !important;
    height: auto !important;
}

/* Register section full width */
.chem-html-section__content > .chem-section[style*="background-color:#000"],
.chem-html-section__content > .chem-section[style*="background-image"] {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Let's shape section */
.chem-html-section__content > .chem-section:last-of-type {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}







/* H1 title after hero: full width with orange bg if needed */
.chem-html-section__content > h1 {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
}

/* ===========================
   HOMEPAGE FULL-WIDTH FIX v2
   Remove max-width constraint from homepage page builder
   =========================== */

/* Homepage: the .chem-row inside .chem-html-section should not constrain sections */
.chem-html-section > .chem-row {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Content sections that need max-width get it from their own .chem-row */
.chem-html-section__content > .chem-section > .chem-row {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0;
}

/* Override the previous calc() breakout - no longer needed */
.chem-html-section__content > .chem-section,
.chem-html-section__content > .chem-cards-section,
.chem-html-section__content > a[href*="sustainable"],
.chem-html-section__content > .chem-full-image,
.chem-html-section__content > h1,
.chem-html-section__content > .chem-section:last-of-type {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
}







/* H1 after hero */
.chem-html-section__content > h1 {
    padding-left: 30px !important;
    padding-right: 30px !important;
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
}

/* Text sections (intro text, cards) need centered max-width */
.chem-html-section__content > .chem-section:not([style*="background"]) > .chem-row,
.chem-html-section__content > .chem-cards-section > .chem-row {
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Counter/background sections: full width, content centered */
.chem-html-section__content > .chem-section[style*="background-color"] > .chem-row {
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
}

/* Video hero (EN/ES/PT homepages, legacy Avada-imported markup): full-bleed.
   Parent is .entry-content (max-width ~1100), so we need 100vw + center trick
   to escape the content container and span the viewport edge-to-edge. */
.chem-video-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
}

/* EN/ES/PT homepage: legacy .chem-section with inline background-color or
   background-image (counters orange + Register/CTA black with tlo3a.jpg) sit
   inside .entry-content (max-width ~1100). Force them full-bleed to match the
   PL custom-block design. Scoped to body.home so only homepages are affected.*/
body.home .entry-content > .chem-section[style*="background-color"],
body.home .entry-content > .chem-section[style*="background-image"],
body.home .entry-content > .chem-section:has(.chem-testimonials) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

/* "Let's shape" sekcja: tytuł ma <span style="font-size:70px;line-height:40px">
   który by się obciął u góry bez padding-top. Dodaj 60px gap od poprzedniej
   sekcji (czarny Register CTA), żeby napis miał miejsce. */
body.home .entry-content > .chem-section:has(span[style*="font-size: 70px"]) {
    padding-top: 60px !important;
}

/* "I want to develop my business" sekcja na EN/ES/PT: lewa kolumna z obrazkiem
   360 hex (chemnovatic-chemical-industry-solutions) ma być sticky podczas
   scrollowania długiej listy usług po prawej. PL używa custom block z klasą
   .chem-twi__image (już sticky); EN/ES/PT używają legacy .chem-col--1-2. */
body.home .chem-section .chem-row > .chem-col--1-2:has(img[src*="industry-solutions"]),
body.home .chem-section .chem-row > .chem-col--1-2:has(img[src*="industry_solutions"]) {
    position: sticky !important;
    top: 200px !important;
    align-self: flex-start !important;
}

@media (max-width: 800px) {
    /* Na mobile kolumny stackują się – sticky nie ma sensu. */
    body.home .chem-section .chem-row > .chem-col--1-2:has(img[src*="industry-solutions"]),
    body.home .chem-section .chem-row > .chem-col--1-2:has(img[src*="industry_solutions"]) {
        position: static !important;
        top: auto !important;
    }
}

/* ===========================
   FINAL HOMEPAGE FIXES - match production 1:1
   =========================== */

/* H1 title: Open Sans 42px, centered, orange – scoped to homepage only.
   Migrated pages (informacje-dodatkowe etc.) use `title-heading-left` on the
   Fusion title wrapper and must respect left alignment (audit PDF 2026-04-24). */
body.home .chem-html-section__content > .chem-section h1,
body.home .chem-html-section__content > h1,
body.home .chem-page-builder h1 {
    font-family: "Open Sans", Verdana, Geneva, sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #ea5b0c !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.16 !important;
}
/* H1 inside dark/image sections: respect inline white color */
.chem-html-section__content .chem-section[style*="background-image"] h1,
.chem-html-section__content .chem-section[style*="background-color: #000"] h1,
.chem-html-section__content .chem-section[style*="background-color:#000"] h1,
.chem-html-section__content .chem-section[style*="tlo3a"] h1 {
    color: #ffffff !important;
    font-size: 32px !important;
}
/* CTA phone icon image: force visible dimensions */
.chem-html-section__content .chem-section[style*="tlo3a"] img.chem-image,
.chem-html-section__content .chem-section[style*="background-image"] img.chem-image {
    display: block !important;
    width: 350px !important;
    height: auto !important;
    min-height: 200px !important;
    margin: 20px auto !important;
    max-width: 100% !important;
}
/* Force link container to be block too */
.chem-html-section__content .chem-section[style*="tlo3a"] p a:has(img),
.chem-html-section__content .chem-section[style*="background-image"] p a:has(img) {
    display: block !important;
    text-align: center !important;
}
/* CTA button: match production (white bg, dark text) */
.chem-html-section__content .chem-section[style*="tlo3a"] .chem-button {
    background-color: #ea5b0c !important;
    color: #ffffff !important;
    border: 2px solid #ea5b0c !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    padding: 14px 40px !important;
}

/* Intro paragraphs: black text, not white */
.chem-html-section__content > .chem-section:not([style*="background-color"]) p,
.chem-html-section__content > div > p {
    color: #000000;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}








/* Card H2 links: black like production */
.chem-cards-section .chem-card h2 a,
.chem-card h2 a {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Slider hero text: force white via CSS in case inline style fails */
.chem-video-hero div[style*="z-index"] {
    color: #ffffff !important;
}

.chem-video-hero div[style*="z-index"] div {
    color: #ffffff !important;
}

.chem-video-hero div[style*="z-index"] a {
    color: #ffffff !important;
}

/* Hero caption: align to the centred 1200px content container.
   The Avada migration hard-coded `left:50px` as an inline style, so on
   screens wider than ~1280px the caption drifted far left of the page
   content (≈310px off at 1920px). Override to a centred max-width box so
   the text lines up with .chem-row on every viewport. Applies to all 4
   language homepages (same inline style in each). */
.chem-video-hero div[style*="z-index"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: var(--chem-site-width, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: translateY(-50%) !important;
}
@media (max-width: 1260px) {
    .chem-video-hero div[style*="z-index"] {
        padding: 0 40px !important;
    }
}


/* ===========================
   FIXES v041 - sticky menu, STC fullwidth, card fonts, H1 inline override
   =========================== */

/* Sticky menu bar */
.chem-secondary-main-menu,
header .chem-header-wrapper > div:last-child {
    background: #1d1d1b !important;
}

/* STC Nicotine banner: full viewport width */
.chem-html-section__content > a[href*="sustainable"] {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.chem-html-section__content > a[href*="sustainable"] img {
    width: 100% !important;
    height: auto !important;
}

/* Card content: match production font size */
.chem-card__content {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.chem-card__content ul li {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* H1 inline style override - remove font-size:28px effect */
.chem-html-section__content h1[style*="font-size"] {
    font-size: 42px !important;
}

/* Intro text: ensure proper sizing like production */
.chem-html-section__content > .chem-section:not([style*="background-color"]) > .chem-row > .chem-col > p,
.chem-html-section__content > div > p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #000 !important;
    font-family: "Open Sans", Verdana, Geneva, sans-serif !important;
    text-align: left !important;
}


/* STC banner fix: the section containing the STC image needs full-width .chem-row */
.chem-section--fullwidth > .chem-row {
    max-width: none !important;
    padding: 0 !important;
}

/* Sticky menu: target the actual nav wrapper div */
.chem-sticky-header-wrapper > .chem-secondary-main-menu,
.chem-header-wrapper > div:nth-child(2) {
}

/* Also need to check: the entire header might need sticky behavior.
   On production, the dark menu bar sticks while the logo bar scrolls away. 
   We need JS for that, or we target the menu bar wrapper specifically. */

/* STC banner: remove ALL padding from parent chain */
.chem-section--fullwidth .chem-col {
    padding: 0 !important;
}

/* STC image must be 100% of viewport */
.chem-section--fullwidth .chem-col a img.chem-image,
.chem-section--fullwidth img[alt*='Sustainability'] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Proper sticky menu: only the dark nav bar, not the whole header */
.chem-header-v4 > div:last-child,
.chem-secondary-main-menu {
    background: #1d1d1b !important;
    width: 100% !important;
}


/* v044: Card links - BLACK with underline like production */
.chem-card__content ul li a,
.chem-cards-section .chem-card__content a,
body.home .chem-card__content a {
    color: #000000 !important;
    text-decoration: underline !important;
}

.chem-card__content ul li a:hover {
    color: #ea5b0c !important;
}

/* Card H2 link: stay black, no underline */
.chem-card h2 a,
.chem-cards-section .chem-card h2 a {
    text-decoration: none !important;
}

/* ===========================
   PRODUCT GALLERY FIX – FlexSlider compatibility
   =========================== */

/* Don't override FlexSlider wrapper display */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: block !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* FlexSlider viewport must constrain height */
.single-product .woocommerce-product-gallery .flex-viewport {
    max-height: 600px !important;
    overflow: hidden !important;
}

/* Main gallery image sizing */
.single-product .woocommerce-product-gallery .flex-viewport img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 600px !important;
}

/* Thumbnails below main image */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    list-style: none !important;
    padding: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 calc(25% - 6px) !important;
    max-width: calc(25% - 6px) !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    cursor: pointer !important;
    border: 1px solid #e0e0e0 !important;
    width: 100% !important;
    height: auto !important;
}

/* ===========================
   SUSTAINABLE DEV PAGE – styled section cards
   =========================== */

/* Section headers (STC Nicotine, ESG Strategy, etc.) */
.chem-html-section__content > .chem-section > .chem-row > .chem-col > p:first-child {
    font-size: 24px;
    font-weight: 700;
    color: #ea5b0c;
}

/* "Explore more" buttons */
.chem-html-section__content .chem-button[style*="background-color:#ea5b0c"],
.chem-html-section__content a.chem-button {
    display: inline-block;
    margin: 5px 5px 5px 0;
}

/* ===========================
   CATEGORY PAGE FIXES
   =========================== */

/* Hide duplicate H1 on category pages – keep only WooCommerce page title */
.tax-product_cat .chem-page-title {
    display: none !important;
}

/* Category description text */
.tax-product_cat .term-description {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 800px;
}

/* Subcategory grid */
.woocommerce ul.products li.product-category {
    text-align: center;
}

.woocommerce ul.products li.product-category a img {
    max-width: 200px;
    margin: 0 auto 10px;
    display: block;
}

.woocommerce ul.products li.product-category h2 {
    font-size: 16px !important;
    color: #ea5b0c !important;
}

/* ===========================
   DOCUMENTATION PAGE FIXES
   =========================== */

/* Documentation download buttons - compact inline style */
.chem-html-section__content a[href*=".pdf"],
.chem-html-section__content a[download],
.chem-html-section__content a.chem-button[style*="background"] {
    font-size: 13px;
    padding: 6px 14px;
    margin: 3px 4px 3px 0;
    display: inline-block;
    vertical-align: middle;
}

/* Documentation tables */
.chem-html-section__content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

.chem-html-section__content table td,
.chem-html-section__content table th {
    padding: 6px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.chem-html-section__content table th {
    font-weight: 700;
    text-align: left;
    background: #f5f5f5;
}

/* ===========================
   PRODUCT PAGE REFINEMENTS
   =========================== */

/* Product tabs styling */
.woocommerce-tabs .wc-tabs {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    border-bottom: 2px solid #ea5b0c !important;
}

.woocommerce-tabs .wc-tabs li {
    margin: 0 !important;
}

.woocommerce-tabs .wc-tabs li a {
    display: block !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    border: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    background: #f5f5f5 !important;
    margin-right: -1px !important;
}

.woocommerce-tabs .wc-tabs li.active a {
    background: #fff !important;
    border-bottom: 2px solid #fff !important;
    margin-bottom: -2px !important;
    color: #ea5b0c !important;
}

/* Related products heading */
.related.products > h2,
.related.products > h3 {
    font-size: 24px;
    color: #ea5b0c;
    margin-bottom: 20px;
}

/* Product quantity discount table */
.single-product table.shop_table,
.single-product .quantity-discount-table {
    font-size: 14px;
}

.single-product table.shop_table td,
.single-product table.shop_table th {
    padding: 8px 12px;
}

/* Fix duplicate H1 on category pages */
.tax-product_cat .woocommerce-products-header__title.page-title,
.tax-product_tag .woocommerce-products-header__title.page-title {
    display: none !important;
}

/* Still deciding section on category pages */
.chem-still-deciding {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}
.chem-still-deciding h2 {
    text-align: center;
    color: #ea5b0c;
    font-size: 28px;
    margin-bottom: 25px;
}
.chem-still-deciding__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.chem-still-deciding__item {
    text-align: center;
}
.chem-still-deciding__item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}
.chem-still-deciding__item p {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.chem-still-deciding__item a {
    text-decoration: none;
    color: #333;
}
.chem-still-deciding__item a:hover p {
    color: #ea5b0c;
}
@media (max-width: 768px) {
    .chem-still-deciding__grid {
        grid-template-columns: 1fr;
    }
}

/* Retail category: show subcategories display mode */
/* WooCommerce handles this via category settings */

/* Sustainable Development page – styled section cards */
/* Target sections between separators that contain headings */
.chem-html-section__content > .chem-section > .chem-row > .chem-col {
    /* Sections with "Explore more" links get card styling */
}

/* Card-like styling for sustainable dev sections */
.chem-html-section__content .chem-button[href*="explore"],
.chem-html-section__content .chem-button[href*="sustainable"],
.chem-html-section__content .chem-button[href*="esg"],
.chem-html-section__content .chem-button[href*="certified"],
.chem-html-section__content .chem-button[href*="corporate"],
.chem-html-section__content .chem-button[href*="guide"],
.chem-html-section__content a.chem-button[href*="chemnovatic.com"] {
    margin: 5px 8px 5px 0;
}

/* FAQ page – add intro banner styling */
.chem-html-section__content iframe[src*="youtube"] {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border: none;
    margin: 20px 0;
}

/* Documentation page – compact download buttons */
.chem-html-section__content .chem-button--small,
.chem-html-section__content a[href$=".pdf"].chem-button {
    font-size: 12px !important;
    padding: 5px 12px !important;
}

/* ===========================
   CATEGORY PAGE – match production layout (A+C method)
   =========================== */

/* Breadcrumb: inside content area, not above it */
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_cat nav[aria-label="Breadcrumb"] {
    font-size: 14px !important;
    color: #575756 !important;
    margin-bottom: 40px !important;
    padding: 0 10px 0 0 !important;
}

.tax-product_cat nav[aria-label="Breadcrumb"] a {
    color: #575756 !important;
    font-size: 14px !important;
}

/* Show H1 on category pages – it was hidden, but prod shows it */
.tax-product_cat .woocommerce-products-header__title.page-title {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #ea5b0c !important;
    line-height: 1.16 !important;
    margin: 28px 0 20px !important;
}

/* Hide the duplicate H1 inside category description instead */
.tax-product_cat .term-description h1,
.tax-product_cat .woocommerce-products-header .term-description h1:first-child {
    display: none !important;
}

/* Sidebar heading: match production */
.chem-shop-sidebar h4 {
    font-size: 18px !important;
    padding: 6px !important;
    margin-bottom: 18px !important;
}

/* Sidebar links: orange like production */
.chem-shop-sidebar a {
    color: #ea5b0c !important;
    font-size: 14px !important;
}

.chem-shop-sidebar a:hover {
    color: var(--chem-primary-dark) !important;
}

/* Layout padding: match production */
.chem-shop-layout {
    padding: 40px 30px !important;
}

/* Category description font */
.tax-product_cat .term-description p,
.tax-product_cat .woocommerce-products-header p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 840px !important;
}

/* Move breadcrumb inside content area via order */
.tax-product_cat main > main {
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 40px 30px;
}

/* ===========================
   CATEGORY PAGE – sidebar RIGHT, 3-col subcategories
   =========================== */

/* Sidebar on RIGHT side like production */
.chem-shop-layout {
    flex-direction: row !important;
}

/* Subcategories: 3 columns */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}

/* Subcategory item center text */
.woocommerce ul.products li.product-category {
    text-align: center !important;
    list-style: none !important;
}

.woocommerce ul.products li.product-category h2 {
    font-size: 15px !important;
    margin-top: 8px !important;
}

/* Product grid also 3 columns when showing products */
.woocommerce ul.products li.product {
    list-style: none !important;
}

/* H1 match production size (prod = 42px) */
.tax-product_cat .woocommerce-products-header__title.page-title {
    font-size: 42px !important;
}

/* Center main menu items */
.chem-secondary-main-menu nav ul {
    justify-content: center \!important;
}
.chem-secondary-main-menu > .chem-row {
    justify-content: center \!important;
}

/* Cart icon pushed to right edge */
.chem-secondary-main-menu .chem-cart-link,
.chem-secondary-main-menu > .chem-row > li:last-child {
    margin-left: auto !important;
}

/* Menu centering – nav should not stretch, row should center */
.chem-secondary-main-menu > .chem-row {
    justify-content: center !important;
}
nav.chem-main-menu {
    flex: 0 1 auto !important;
}
ul.chem-menu {
    justify-content: center !important;
}

/* Header top row: logo left, phone/email center, login right */
.chem-sticky-header-wrapper > .chem-header > .chem-row {
    justify-content: space-between \!important;
}
.chem-header-content-3-wrapper {
    justify-content: center \!important;
    flex: 1 \!important;
}
.chem-header-tagline {
    justify-content: flex-end \!important;
}
.chem-header-tagline > div:first-child {
    flex: 1 \!important;
    justify-content: center \!important;
}
.chem-header-tagline .chem-login-link {
    margin-left: auto \!important;
}

/* Header top row fix: space-between with centered phone/email */
.chem-header-content-3-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 1 !important;
}
.chem-header-tagline {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
}
.chem-header-tagline > div:first-child {
    display: flex !important;
    justify-content: center !important;
    flex: 1 !important;
    gap: 15px !important;
}
/* Login pushed to right */
.chem-header-tagline .chem-login-link,
.chem-header-tagline > a:last-child {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Menu items with dropdown arrows */
ul.chem-menu > li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* Menu font weight – match production (400, Raleway Regular) */
ul.chem-menu > li > a {
    font-weight: 400 !important;
    font-size: 16px !important;
    text-transform: none !important;
    font-family: "Raleway", "Open Sans", Arial, sans-serif !important;
}

/* Menu item order is now defined once in base.css (flag → EUR → search → cart → My Account). */

/* Dropdown arrows: outline style like production (chevron instead of filled triangle) */
ul.chem-menu > li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border: none !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-left: 6px !important;
    margin-bottom: 3px !important;
    vertical-align: middle !important;
}

/* Menu order rules moved to base.css (single source of truth). */

/* Hide CSS arrow on EUR - it already has its own caret */
ul.chem-menu > li.chem-dropdown-menu > a::after,
ul.chem-menu > li:has(.chem-caret) > a::after {
    display: none !important;
}

/* Add arrows to Nicotine Academy and Company even without submenu */
ul.chem-menu > li.menu-item-115294 > a::after,
ul.chem-menu > li.menu-item-115295 > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border: none !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-left: 6px !important;
    margin-bottom: 3px !important;
    vertical-align: middle !important;
}

/* ===========================
   DROPDOWN MENU – match production: dark background, white text
   Copied computed styles from chemnovatic.com
   =========================== */

/* Regular dropdown submenu */
ul.chem-menu > li > ul.sub-menu,
ul.chem-menu > li > ul {
    background: rgb(29, 29, 27) !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 1px 1px 30px rgba(0,0,0,0.06) !important;
    z-index: 100 !important;
    display: none !important;
    border: none !important;
}

/* Show on hover */
ul.chem-menu > li:hover > ul.sub-menu,
ul.chem-menu > li:hover > ul {
    display: block !important;
}

/* Dropdown links */
ul.chem-menu > li > ul a,
ul.chem-menu > li > ul.sub-menu a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 14px 20px !important;
    display: block !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

ul.chem-menu > li > ul a:hover,
ul.chem-menu > li > ul.sub-menu a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #ea5b0c !important;
}

/* Dropdown li */
ul.chem-menu > li > ul li,
ul.chem-menu > li > ul.sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Mega menu (Our offer) – full width dark background */
ul.chem-menu > li.chem-has-megamenu > ul.sub-menu,
ul.chem-menu > li.chem-has-megamenu > ul {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: none !important;
    flex-wrap: wrap !important;
    padding: 20px 30px !important;
}

ul.chem-menu > li.chem-has-megamenu:hover > ul.sub-menu,
ul.chem-menu > li.chem-has-megamenu:hover > ul {
    display: flex !important;
}

/* Mega menu columns */
ul.chem-menu > li.chem-has-megamenu > ul > li {
    flex: 0 0 250px !important;
    padding: 10px !important;
}

ul.chem-menu > li.chem-has-megamenu > ul > li > a {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #ea5b0c !important;
    border-bottom: none !important;
    padding: 8px 10px !important;
}

/* Mega menu sub-sub items */
ul.chem-menu > li.chem-has-megamenu > ul > li > ul {
    position: static !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: auto !important;
    padding: 0 !important;
}

ul.chem-menu > li.chem-has-megamenu > ul > li > ul a {
    font-size: 13px !important;
    padding: 6px 10px !important;
    color: #ccc !important;
    border-bottom: none !important;
}

ul.chem-menu > li.chem-has-megamenu > ul > li > ul a:hover {
    color: #ea5b0c !important;
}

/* Currency dropdown */
ul.chem-menu > li.chem-dropdown-menu .chem-dropdown-list {
    background: rgb(29, 29, 27) !important;
}
ul.chem-menu > li.chem-dropdown-menu .chem-dropdown-list a {
    color: #ffffff !important;
}

/* ===========================
   DROPDOWN MENU – 1:1 z produkcji (Avada style)
   Analyzed from chemnovatic.com computed styles
   =========================== */

/* Hide all submenus by default */
ul.chem-menu > li > ul.sub-menu,
ul.chem-menu > li > ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    background: rgb(29, 29, 27) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 1px 1px 30px rgba(0,0,0,0.06) !important;
    z-index: 1000 !important;
    border: none !important;
}

/* Show dropdown on hover (production behavior) */
ul.chem-menu > li:hover > ul.sub-menu,
ul.chem-menu > li:hover > ul {
    display: block !important;
}

/* Also support JS-added class for mobile */
ul.chem-menu > li.chem-dropdown-open > ul.sub-menu,
ul.chem-menu > li.chem-dropdown-open > ul {
    display: block !important;
}

/* Active parent gets orange background */
ul.chem-menu > li.chem-dropdown-open > a {
    background: rgb(234, 91, 12) !important;
}

/* Dropdown links – white on dark */
ul.chem-menu > li > ul a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 14px 20px !important;
    display: block !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

ul.chem-menu > li > ul a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ea5b0c !important;
}

ul.chem-menu > li > ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* EUR dropdown also dark */
ul.chem-menu > li.chem-dropdown-menu .chem-dropdown-list {
    background: rgb(29, 29, 27) !important;
}
ul.chem-menu > li.chem-dropdown-menu .chem-dropdown-list a {
    color: #ffffff !important;
    padding: 10px 20px !important;
}

/* Our offer mega menu – dark background, 3-column grid like production */
.chem-megamenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    /* Content constrained to 1200 like PROD; dark bg extends to the full
       viewport via ::before below (PROD .fusion-megamenu-fullwidth = 1440). */
    width: 100% !important;
    margin: 0 auto !important;
    max-width: var(--chem-site-width, 1200px) !important;
    background: rgb(29, 29, 27) !important;
    color: #fff !important;
    z-index: 10000 !important;
    padding: 15px 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
}
/* Full-viewport dark backdrop behind the megamenu (PROD parity: the band
   spans the whole viewport, only the links stay in the 1200px container). */
.chem-megamenu::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    margin-left: -50vw !important;
    background: rgb(29, 29, 27) !important;
    z-index: -1 !important;
}

/* Explicit grid positions for PROD-parity layout:
   Col 1: Nicotine Products (row 1) + Raw Materials for NGPs (row 2)
   Col 2: Retail Vape Products (rows 1-2)
   Col 3: Private Label & Services (row 1) + orange row (row 2) */
.chem-megamenu > .chem-megamenu__column.chem-mega-pos-1-1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.chem-megamenu > .chem-megamenu__column.chem-mega-pos-1-2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
.chem-megamenu > .chem-megamenu__column.chem-mega-pos-2 {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
}
.chem-megamenu > .chem-megamenu__column.chem-mega-pos-3 {
    grid-column: 3 !important;
    grid-row: 1 !important;
}
.chem-megamenu > .chem-megamenu__orange-row {
    grid-column: 3 !important;
    grid-row: 2 !important;
}
.chem-megamenu > .chem-megamenu__footer-link {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}
li.chem-has-megamenu {
    position: static !important; /* Allow megamenu to extend full width */
}
li.chem-has-megamenu:hover > .chem-megamenu {
    display: grid !important;
}
li.chem-has-megamenu.chem-dropdown-open > .chem-megamenu {
    display: grid !important;
}
.chem-megamenu__column {
    /* PROD columns are 400px with ~34px inner gutters */
    padding: 0 34px !important;
}
/* Column headers – PROD parity (#63): Title Case, no orange underline.
   On hover the text turns white (rule below). */
.chem-megamenu__title {
    display: block !important;
    color: #ea5b0c !important;
    font-size: 19px !important; /* R35: PROD renders 19px/700 (measured live) */
    font-weight: 700 !important;
    text-transform: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
}
.chem-megamenu__title:hover {
    color: #fff !important;
}
.chem-megamenu__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.chem-megamenu__item {
    padding: 0 !important;
}
.chem-megamenu__item a {
    color: #fff !important;
    font-size: 15px !important; /* R9: match PROD megamenu item (was 13px) */
    padding: 4px 0 !important; /* R35: PROD row height 35px (was 39px) */
    display: block !important;
    text-decoration: none !important;
    border-bottom: none !important;
    white-space: normal !important;
}
.chem-megamenu__item a:hover {
    color: #ea5b0c !important;
}
.chem-megamenu__item a i {
    color: #fff !important;
    margin-right: 5px !important;
    font-size: 11px !important;
}
.chem-megamenu__item a:hover i {
    color: #ea5b0c !important;
}

/* Megamenu orange row – highlighted links stacked vertically INSIDE the 3rd
   column, below its regular items (class `pomaranczowyfontwmenu2`).
   Mirrors PROD `.pomaranczowyfontwmenu2 a` appearance. */
.chem-megamenu__orange-row {
    grid-column: 3 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 0 0 !important;
    margin-top: 4px !important;
    border: 0 !important;
}
.chem-megamenu__orange-item {
    display: flex !important;
    align-items: center !important;
    color: #ea5b0c !important;
    font-size: 19px !important; /* R35: PROD renders all megamenu headings 19px */
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}
.chem-megamenu__orange-item:hover,
.chem-megamenu__orange-item:link,
.chem-megamenu__orange-item:visited {
    color: #ea5b0c !important;
    background-color: transparent !important;
}
.chem-megamenu__orange-item:hover {
    text-decoration: underline !important;
}
.chem-megamenu__orange-item i {
    color: #ea5b0c !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
}

/* Column title icons (leaf/flask/file-signature) – positioned left of label */
.chem-megamenu__title i {
    color: #ea5b0c !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

/* Megamenu footer link – full-width bottom row (e.g. "Pokaż Wszystkie
   Produkty"). Left-aligned with book icon, orange color. */
.chem-megamenu__footer-link {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    color: #ea5b0c !important;
    font-size: 19px !important; /* R35: PROD renders all megamenu headings 19px */
    margin-left: 34px !important; /* align with column gutters */
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    padding: 16px 0 4px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.chem-megamenu__footer-link i {
    color: #ea5b0c !important;
    margin-right: 10px !important;
    font-size: 15px !important;
}
.chem-megamenu__footer-link:hover {
    color: #fff !important;
}
.chem-megamenu__footer-link:hover i {
    color: #fff !important;
}

/* === MENU FIX from production computed styles === */
/* Header row: 80px min-height set in base.css, padding from --chem-header-padding-v */

/* Menu links: match production exactly. Font-family is plain `Raleway`
   (no sans-serif fallback) to match PROD rendered weight – fallback makes
   the text look slightly thinner before Raleway finishes loading. */
ul.chem-menu > li > a {
    position: relative !important;
    font-family: "Raleway" !important;
    font-size: 16px !important;
    font-weight: 400 !important; /* R35: PROD measured 400 (was 500) */
    color: #ffffff !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 60px !important; /* R35: PROD bar 63px total = 60px + 3px border */
    padding: 0 20px !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
/* Active-page items keep orange text. Hover is handled separately – PDF 7
   gives the hovered/open item an orange fill with white text. */
ul.chem-menu > li.current-menu-item > a,
ul.chem-menu > li.current-menu-ancestor > a {
    color: #ea5b0c !important;
}
/* Animated orange underline bar – mirrors PROD Avada `fusion-bottombar-highlight`
   that scales on hover / active menu item. Scoped OUT of icon items (cart,
   search, account, language switcher) to avoid overriding their Font Awesome
   ::before glyphs. */
ul.chem-menu > li:not(.chem-main-menu-search):not(.chem-menu-cart):not(.menu-my-account):not(.pll-parent-menu-item):not(.chem-custom-menu-item) > a::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 18px !important;
    height: 2px !important;
    background: #ea5b0c !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.25s ease !important;
    pointer-events: none !important;
    /* Reset inherited caret-triangle border + colors from other rules */
    border: 0 !important;
    width: auto !important;
    display: block !important;
}
ul.chem-menu > li:not(.chem-main-menu-search):not(.chem-menu-cart):not(.menu-my-account):not(.pll-parent-menu-item):not(.chem-custom-menu-item) > a:hover::before,
ul.chem-menu > li.current-menu-item:not(.chem-main-menu-search):not(.chem-menu-cart):not(.menu-my-account) > a::before,
ul.chem-menu > li.current-menu-ancestor:not(.chem-main-menu-search):not(.chem-menu-cart):not(.menu-my-account) > a::before {
    transform: scaleX(1) !important;
}
/* PDF 7: on the orange hover/open fill the highlight bar turns white so it
   stays visible against the orange background (PROD parity). */
ul.chem-menu > li:not(.chem-main-menu-search):not(.chem-menu-cart):not(.menu-my-account):not(.pll-parent-menu-item):not(.chem-custom-menu-item) > a:hover::before,
ul.chem-menu > li.chem-dropdown-open:not(.chem-main-menu-search):not(.chem-menu-cart) > a::before,
ul.chem-menu > li.chem-has-megamenu:hover > a::before {
    background: #ffffff !important;
    transform: scaleX(1) !important;
}

/* Menu bar: match production height and padding */
.chem-secondary-main-menu {
    background: #1d1d1b !important;
    padding: 0 30px !important;
}
.chem-secondary-main-menu > .chem-row {
    padding: 0 !important;
}

/* Logo: match production size */
.chem-logo-1x {
    max-height: 80px !important;
    width: auto !important;
}

/* Menu order defined once in base.css – legacy :has() rules removed. */

/* Header logo row: match production layout exactly */
/* Production: .fusion-logo is full width with space-between */
.chem-logo {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex: 1 !important;
}


/* Product breadcrumb: match production – inline with sidebar, above gallery */
.single-product nav.woocommerce-breadcrumb,
.single-product nav[aria-label="Breadcrumb"] {
    font-size: 14px !important;
    color: #575756 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}
.single-product nav.woocommerce-breadcrumb a,
.single-product nav[aria-label="Breadcrumb"] a {
    color: #575756 !important;
}

/* ===========================
   v095 – Batch 1+2: Production match from automated extraction + plan
   =========================== */

/* --- Body: gray bg like production --- */
body { background-color: #cdcdcd !important; }
#wrapper, .wrapper, main, .site-main, article { background-color: #ffffff !important; }

/* --- Counter items: match TEMPLATE classes (chem-counter-item, not chem-counter-box) --- */
/* Use grid 4-cols to match PROD layout (2 rows of 4 when 8 counters present)
   and prevent horizontal overflow when counter labels are long. */
.chem-counters-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
}
@media (max-width: 800px) {
    .chem-counters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 500px) {
    .chem-counters-grid {
        grid-template-columns: 1fr !important;
    }
}
.chem-counter-item {
    text-align: center !important;
    color: #ffffff !important;
    padding: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.chem-counter-item__value {
    font-family: "Open Sans", Verdana, Geneva, sans-serif !important;
    font-size: 43px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block !important;
    line-height: normal !important;
}
.chem-counter-item__unit {
    font-size: 24px !important;
    font-weight: 400 !important;
}
.chem-counter-item__label-top,
.chem-counter-item__label-bottom {
    display: block !important;
    font-size: 14px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* --- H2 card headings: 19px, line-height 32px --- */
.chem-card h2,
.chem-cards-section .chem-card h2 {
    font-size: 19px !important;
    line-height: 32px !important;
    margin-bottom: 0 !important;
}

/* --- Footer headings: no uppercase, no letter-spacing --- */
.chem-footer h3, .chem-footer h5,
.chem-footer-widget-area h3, .chem-footer-widget-area h5 {
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
    line-height: 28px !important;
    font-size: 20px !important;
}
.chem-footer-col-copyright,
.chem-footer p.chem-footer-col-copyright {
    color: #ffffff !important;
    margin-top: 6px !important;
}

/* --- CTA Register section --- */
.chem-cta-section[style*="background-color: #000"] h2,
.chem-cta-section[style*="background-color: #000000"] h2 {
    color: #ffffff !important;
    font-size: 36px !important;
    line-height: 41.76px !important;
}
.chem-cta-section[style*="background-color: #000"] .chem-cta-section__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 0 !important;
}
.chem-cta-section[style*="background-color: #000"] .chem-cta-section__text {
    color: #ffffff !important;
}
.chem-cta-section[style*="background-color: #000"] .chem-cta-section__text p {
    color: #ffffff !important;
}
/* CTA image (phone/laptop icon) */
.chem-cta-section__image {
    margin: 30px 0 !important;
    text-align: center !important;
}
.chem-cta-section__image img {
    max-width: 400px !important;
    height: auto !important;
}
/* CTA button: orange bg, white text, rounded */
.chem-cta-section[style*="background-color: #000"] .chem-button {
    background-color: #ea5b0c !important;
    color: #ffffff !important;
    font-size: 18px !important;
    padding: 14px 40px !important;
    border-radius: 8px !important;
    border: 2px solid #ea5b0c !important;
    text-transform: none !important;
    font-weight: 400 !important;
}

/* --- Testimonials carousel (matches JS in main.js).
 * Production: centered heading + subtitle + rotating single quote +
 * pagination dots centered below. */
.chem-testimonials {
    margin-bottom: 0 !important;
    text-align: center !important;
    position: relative !important;
}
.chem-testimonial,
blockquote.chem-testimonial {
    background-color: #f0f0f0 !important;
    padding: 25px 40px !important;
    margin: 0 !important;
    text-align: center !important;
    display: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.chem-testimonial.active,
blockquote.chem-testimonial.active {
    display: block !important;
}
/* Hide all non-active by default even before JS runs */
.chem-testimonials blockquote.chem-testimonial:not(.active) {
    display: none !important;
}
/* Show first if no active set (fallback when JS hasn't initialized) */
.chem-testimonials:not(:has(.chem-testimonial.active)) blockquote.chem-testimonial:first-of-type {
    display: block !important;
}
.chem-testimonial p {
    font-style: italic !important;
    color: #4a4e57 !important;
}
.chem-testimonials cite {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 20px !important;
    display: block !important;
    line-height: 1.5 !important;
    font-style: normal !important;
    color: #000 !important;
    text-align: center !important;
}
.chem-testimonial-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 22px !important;
    padding: 0 !important;
}
.chem-testimonial-pagination a,
.chem-testimonial-pagination span {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.chem-testimonial-pagination a.activeSlide,
.chem-testimonial-pagination a.active,
.chem-testimonial-pagination span.active {
    background: #ea5b0c !important;
}

/* (Dead block removed: earlier iteration hid the single-product sidebar;
   the active rules below restore it at 288px with gap 72 matching prod.) */

/* --- H1 intro section: CENTERED like production --- */
/* H1 section */
.chem-html-section__content > .chem-section--fullwidth + .chem-section--fullwidth {
    padding: 25px 30px 10px !important;
    text-align: center !important;
}
.chem-html-section__content > .chem-section--fullwidth + .chem-section--fullwidth .chem-col--3-4 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}
/* Intro text under H1: centered like production */
.chem-html-section__content > .chem-section--fullwidth + .chem-section--fullwidth + .chem-section {
    padding: 0 30px 22px !important;
    text-align: center !important;
}

/* --- Cards section: separated with margin like production --- */
.chem-cards-section .chem-col--1-3 {
    margin: 0 12px !important;
    flex: 0 0 calc(33.333% - 38px) !important;
    max-width: calc(33.333% - 38px) !important;
}
.chem-cards-section .chem-row {
    justify-content: center !important;
}

/* --- Static hero: full viewport width, breaks out of .chem-row constraint --- */
.chem-static-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative !important;
}
.chem-static-hero img {
    object-fit: cover !important;
}
/* Override .chem-page-builder color for hero text */
.chem-static-hero div {
    color: #ffffff !important;
}

/* --- STC banner + full-width images: break out of chem-row 1200px constraint --- */
.chem-section--fullwidth a[href*="sustainable"] {
    display: block !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.chem-section--fullwidth a[href*="sustainable"] img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* Generic full-image block */
.chem-full-image {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.chem-full-image__img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ===========================
   v108 – Global section width fix + all remaining diffs
   Production sections are 1280px with padding 30px and margin -30px.
   Local sections are 1200px in .chem-row. Fix by expanding .chem-row on homepage.
   =========================== */

/* --- Global: keep chem-row 1200px, add padding only to sections that need it --- */
/* Don't add global padding - it breaks counter/CTA layouts */

/* --- H1 section: orange bg on production is GONE, it's white/transparent --- */
body.home .chem-html-section__content > .chem-section--fullwidth + .chem-section--fullwidth {
    background-color: transparent !important;
    padding: 25px 30px 0 !important;
}

/* --- Card section: add horizontal padding --- */
body.home .chem-cards-section > .chem-row,
body.home .chem-html-section__content > .chem-section.chem-cards-section > .chem-row {
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 30px !important;
}

/* --- Counter section: keep original padding, don't override --- */

/* --- Testimonials section: add padding --- */
.chem-testimonials-section > .chem-row {
    padding: 30px 30px 13px !important;
}

/* --- Contact section: fix layout to match production 2-col with sales team image --- */
body.home .chem-html-section__content > .chem-section:last-of-type {
    padding: 0 !important;
}
body.home .chem-html-section__content > .chem-section:last-of-type > .chem-row {
    padding: 0 30px !important;
}

/* --- Footer: production has transparent bg with content on gray page bg --- */
/* Keep local gray footer as it matches the visual appearance */

/* --- CTA Register: keep existing layout --- */

/* --- About page: hide duplicate page title (content has its own H1) --- */
.page-id-4200 .chem-page-title,
.page-template-default[class*="about"] .chem-page-title {
    display: none !important;
}

/* About page: section headings – kept empty on purpose. Previous rule forced
   28px/center/margin 30/20 but PROD actually renders 36px/left/margin 0 (verified
   2026-04-21 via computed-style-diff.spec.js). Global h2 + .chem-legacy-title h2
   rules already match PROD. */

/* R37/D1: USUNIĘTE reguły "hide non-English categories" – pochodziły z czasów,
   gdy widget kategorii mieszał języki. Odkąd Polylang filtruje widget per język,
   ukrywały PRAWIDŁOWE podkategorie blogowe na PL/ES/PT (chemiczne-regulacje,
   zakazy-i-prawo, oplaty-i-podatki, ...) – zgłoszenie klienta: "na pl es pt
   nie widać podkategorii w menu bocznym, na en jest ok". */

/* --- Blog page: hide "Blog" H1 heading (production doesn't show it) --- */
.chem-blog-wrapper .chem-blog-page-title,
.chem-blog-content > article > h1 {
    display: none !important;
}

/* --- Shop page: product grid 3 columns matching production --- */
.woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* --- Product page: gallery (fixed ~350px) + summary (fills rest) matching
 * production: 822px content column -> 350px gallery + 30px gap + 442px
 * summary. Override any flex/float widths coming from WC core defaults. */
.single-product .product {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 30px !important;
    align-items: start;
}
.single-product .product .woocommerce-product-gallery {
    grid-column: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}
.single-product .product .summary.entry-summary {
    grid-column: 2 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}
.single-product .product .woocommerce-tabs { grid-column: 1 / -1 !important; }
.single-product .product .related.products { grid-column: 1 / -1 !important; }
.single-product .product .up-sells { grid-column: 1 / -1 !important; }

/* ===========================
   v114 – Subpage fixes: global padding, font sizes, sidebar widths
   All pages on prod have main content padding: 60px 30px
   =========================== */

/* --- Global: main content padding + max-width matching production (1200px) --- */
.site-main > .page-content,
.site-main > article,
.site-main > .chem-blog-wrapper,
.site-main > .chem-shop-layout {
    padding: 60px 30px !important;
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
}
/* Homepage is special – don't add extra padding to its sections */
body.home .site-main > article {
    padding: 0 !important;
    max-width: none !important;
}

/* --- Shop sidebar: match production 288px width --- */
.chem-shop-sidebar {
    flex: 0 0 288px !important;
    width: 288px !important;
}

/* --- About page: H1 "About Chemnovatic" should be 42px --- */
.page-id-4200 .chem-html-section__content h1 {
    font-size: 42px !important;
    color: #ea5b0c !important;
    text-align: left !important;
    line-height: 1.16 !important;
}

/* --- Product page: H1 product title 32px like production --- */
.single-product .product h1.product_title {
    font-size: 32px !important;
    line-height: 34px !important;
    color: #ea5b0c !important;
}
/* Product short description: match production sizing */
.single-product .product .woocommerce-product-details__short-description {
    font-size: 16px !important;
    line-height: 1.8 !important;
}
/* Product tagline H2 "Flavourless, colourless and smooth" */
.single-product .product .summary h2 {
    font-size: 26px !important;
    line-height: 31px !important;
}
.single-product .product .summary h2 strong {
    font-size: 26px !important;
    font-weight: 900 !important;
}

/* --- Blog page: sidebar width closer to production --- */
.chem-blog-sidebar {
    flex: 0 0 293px !important;
    width: 293px !important;
}

/* --- All subpages: breadcrumb styling match production --- */
.chem-breadcrumbs {
    font-size: 14px !important;
    color: #575756 !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}
.chem-breadcrumbs a {
    color: #575756 !important;
}

/* --- Product page: show sidebar like production (revert hiding) --- */
.single-product .chem-shop-sidebar {
    display: block !important;
    flex: 0 0 288px !important;
    width: 288px !important;
}
.single-product .chem-shop-layout {
    display: flex !important;
    gap: 72px !important;
}
.single-product .chem-shop-content {
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
}

/* ===========================
   v116 – Final pixel-level fixes for 95% match
   =========================== */

/* --- Home menu item: visibility hidden (takes space but invisible, like production) --- */
ul.chem-menu > li.home-special-icon {
    visibility: hidden !important;
}

/* --- Shop page: H1 width constrained by sidebar like production --- */
.woocommerce-page .chem-shop-content h1 {
    max-width: 840px !important;
}

/* --- Cookie banner: dismiss style matching production --- */
.cookie-notice-container {
    font-size: 13px !important;
}

/* --- About page: content max-width to match production column proportions --- */
.page-id-4200 .chem-html-section__content .chem-col--3-5 {
    flex: 0 0 58% !important;
    max-width: 58% !important;
}
.page-id-4200 .chem-html-section__content .chem-col--2-5 {
    flex: 0 0 42% !important;
    max-width: 42% !important;
}

/* --- About page: hide breadcrumbs (production doesn't have them) --- */
.page-id-4200 .chem-breadcrumbs {
    display: none !important;
}

/* --- Blog page: match production Avada masonry card (verified live 2026-07-16)
   PROD card = .fusion-post-wrapper: white bg, border 1px solid #f2f3f5 with
   3px bottom, image full-width natural ratio, content padded 30px 25px 25px,
   title 20px/26px 700 orange, NO excerpt, NO read-more. Hover on image =
   orange gradient rollover with white title + category (base rules ~596). --- */
.chem-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
}
.chem-blog-card {
    background: #fff !important;
    overflow: hidden !important;
    border: 1px solid #f2f3f5 !important;
    border-bottom: 3px solid #f2f3f5 !important;
}
.chem-blog-card__image {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
}
.chem-blog-card__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
}
/* Rollover overlay – same gradient as PROD (#ea5b0c → rgba(234,91,12,.9)) */
.chem-blog-card__overlay {
    display: flex !important;
}
.chem-blog-card__overlay-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}
.chem-blog-card__overlay-category {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
}
.chem-blog-card__title {
    /* R39: pionowy padding 30/25 dawal 55 px na kafel ponad sam tekst tytulu.
       Produkcja trzyma tytul na marginesach 10 (gora) / 3 (dol) – przy trzech
       liniach tekstu jej blok tytulu ma ok. 103 px, nasz mial 136. Poziome
       25 px zostaje: odpowiada wcieciu tytulu w kaflu produkcji (338 px tekstu
       w kaflu 440 px). */
    padding: 10px 25px 12px !important;
    font-size: 20px !important;
    line-height: 26px !important;
    margin: 0 !important;
}
.chem-blog-card__title a {
    color: #ea5b0c !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.chem-blog-card__title a:hover {
    text-decoration: underline !important;
}
/* PROD shows no excerpt on blog cards */
.chem-blog-card__excerpt {
    display: none !important;
}
/* PROD hides the empty default category ("No category"/"Bez kategorii") */
.chem-blog-sidebar li.cat-item:has(> a[href*="/no-category"]),
.chem-blog-sidebar li.cat-item:has(> a[href*="/bez-kategorii"]),
.chem-blog-sidebar li.cat-item:has(> a[href*="/sin-categoria"]),
.chem-blog-sidebar li.cat-item:has(> a[href*="/sem-categoria"]) {
    display: none !important;
}

/* --- All pages: active menu item highlighting like production --- */
ul.chem-menu > li.current-menu-item > a,
ul.chem-menu > li.current-menu-ancestor > a,
ul.chem-menu > li.current_page_item > a,
ul.chem-menu > li.current_page_ancestor > a {
    background-color: #ea5b0c !important;
    color: #ffffff !important;
}

/* ===========================
   v125 – Fix all remaining pages
   =========================== */

/* Cart page: hide title + breadcrumbs, add whitespace before footer */
.woocommerce-cart .chem-page-title,
.woocommerce-cart .chem-breadcrumbs { display: none !important; }


/* Checkout page: hide breadcrumbs */
.woocommerce-checkout .chem-breadcrumbs { display: none !important; }

/* Breadcrumbs: keep visible on all pages – hiding causes Y-offset regressions */
/* Only hide on specific pages confirmed to not have breadcrumbs on production */
.woocommerce-cart .chem-breadcrumbs { display: none !important; }

/* FAQ page: H1 42px matching production + hide breadcrumbs */
.page-id-4553 h1,
.page-id-11 h1 { font-size: 42px !important; }
.page-id-4553 .chem-breadcrumbs,
.page-id-11 .chem-breadcrumbs { display: none !important; }
/* FAQ subtitle styling */
.page-id-11 .chem-page-title + .entry-content h2:first-child,
.page-id-11 h1 + h2 {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin-top: 5px !important;
}

/* Sustainable pages: H1 54px like production + hide breadcrumbs */
.page-id-110489 .chem-page-title,
.page-id-113543 .chem-page-title {
    font-size: 54px !important;
    line-height: 1.2 !important;
}

/* Title bar component – matches Avada fusion-page-title-bar */
.chem-title-bar {
    background: #ffffff !important;
    width: 100% !important;
    height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 30px !important;
}
.chem-title-bar__inner {
    max-width: var(--chem-site-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
}
.chem-title-bar__heading {
    font-size: 54px !important;
    font-weight: 700 !important;
    color: #ea5b0c !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
}
/* Pages with title bar: match production 20px gap */
.chem-title-bar + .page-content {
    padding-top: 20px !important;
}

/* Our offer page: hide duplicate elements, match production */
.page-id-80986 .entry-content > ol:first-child,
.page-id-80986 .entry-content > ul:first-child {
    display: none !important;
}
.page-id-80986 .entry-content > h1:first-of-type {
    display: none !important;
}

/* Sustainable page title styling */
body[class*="sustainable"] .chem-page-title {
    font-size: 54px !important;
}

/* Sustainable: full-width content matching production (1200px, no side padding) */
.chem-title-bar + .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: var(--chem-site-width) !important;
}
.chem-title-bar + .page-content .chem-col {
    padding: 0 !important;
}
.chem-title-bar + .page-content img {
    max-width: 100% !important;
}

/* Our offer page: match production layout */
/* Production "Our offer" has Avada layout, local has custom content */

/* Language variant homepages: same hero as EN */
body.home:lang(pl) .chem-static-hero,
body.home:lang(es) .chem-static-hero,
body.home:lang(pt) .chem-static-hero {
    height: 650px !important;
}

/* ===========================
   v130 – Cart, FAQ, sustainable fine-tuning
   =========================== */

/* Cart: page content layout (REMOVED max-height: 298px which was wrong -
   it clipped the cart visually so cart-collaterals + footer overlapped). */
.woocommerce-cart .site-main {
    min-height: 0;
}
.woocommerce-cart .page-content {
    padding: 60px 30px 30px !important;
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
}
/* Login notice: transparent bg, no padding (production style) */
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    background: transparent !important;
    padding: 0 !important;
    margin: 16px 0 30px !important;
    border: none !important;
    color: #000 !important;
}
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-info::before {
    display: none !important;
}
/* Empty basket notice: orange bg, white text, narrower */
.woocommerce-cart .cart-empty.woocommerce-info {
    background: #ea5b0c !important;
    color: #fff !important;
    padding: 0 15px 0 35px !important;
    font-size: 18px !important;
    max-width: 600px !important;
    line-height: 55px !important;
    margin: 0 0 30px !important;
}
/* Return to shop: inline with empty notice */
.woocommerce-cart .return-to-shop {
    margin: -85px 0 20px !important;
    text-align: right !important;
    max-width: var(--chem-site-width) !important;
}
.woocommerce-cart .return-to-shop .button {
    background: transparent !important;
    color: #ea5b0c !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    text-transform: none !important;
}

/* FAQ video thumbnail with play button overlay */
.chem-video-thumb {
    position: relative !important;
    display: block !important;
    max-width: 1000px !important;
    margin: 20px auto !important;
}
.chem-video-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
}
.chem-video-thumb .chem-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 68px !important;
    height: 48px !important;
    background: rgba(234, 91, 12, 0.9) !important;
    border-radius: 12px !important;
}
.chem-video-thumb .chem-play-btn::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 55% !important;
    transform: translate(-50%, -50%) !important;
    border-style: solid !important;
    border-width: 10px 0 10px 18px !important;
    border-color: transparent transparent transparent #fff !important;
}

/* FAQ: match production spacing (40px gap, H1 fits in 1 line) */
.page-id-11 .page-content {
    padding-top: 40px !important;
}
.page-id-11 .chem-page-title {
    white-space: nowrap !important;
}

/* Shipping/info pages: H1 size matching production */
.page .chem-page-title {
    font-size: 42px !important;
    color: #ea5b0c !important;
}

/* Hide breadcrumbs on pages where production confirmed NO breadcrumbs */
.page-id-11 .chem-breadcrumbs,
.page-id-5450 .chem-breadcrumbs,
.page-id-5459 .chem-breadcrumbs,
.page-id-5565 .chem-breadcrumbs {
    display: none !important;
}

/* Documentation page (pl 63722, en 5435, es 71965, pt 71963):
 * R40 (uwaga testera 10.08: "rozwalona cala strona"): usuniety uklad
 * dwukolumnowy (column-count: 2) - produkcja renderuje te sekcje w JEDNEJ
 * kolumnie z tabelami na pelna szerokosc; wczesniejszy komentarz o dwoch
 * kolumnach na produkcji byl bledny. */
.page-id-63722 .chem-html-section__content h2,
.page-id-5435 .chem-html-section__content h2,
.page-id-71965 .chem-html-section__content h2,
.page-id-71963 .chem-html-section__content h2,
.page-id-63722 .chem-html-section__content table,
.page-id-5435 .chem-html-section__content table,
.page-id-71965 .chem-html-section__content table,
.page-id-71963 .chem-html-section__content table {
    break-inside: avoid;
    page-break-inside: avoid;
}
.page-id-63722 .chem-html-section__content h2,
.page-id-5435 .chem-html-section__content h2,
.page-id-71965 .chem-html-section__content h2,
.page-id-71963 .chem-html-section__content h2 {
    /* R14: margin-left:0 !important removed – it killed the migrated inline
       `margin-left: 8.3em` that PROD renders (client: "H2 o wiele bardziej do
       lewej"). The inline indent must win. */
    text-align: left !important;
}
/* Documentation: tables should be width:100% of column */
.page-id-63722 .chem-html-section__content table,
.page-id-5435 .chem-html-section__content table,
.page-id-71965 .chem-html-section__content table,
.page-id-71963 .chem-html-section__content table {
    width: 100% !important;
    margin: 0 0 16px;
}

/* Dostawa / Shipping pages: PROD caps courier logos at 400px and offices map
 * at 1000px via `fusion-imageframe imageframe-2`. TEST renders them full row
 * width (~1094px). Audit PDF 2026-04-24: "loga kurierów na test są o wiele większe". */
/* TPD pricing table on /pl/product/uslugi-regulacyjne/ (and EN/ES/PT equivalents):
 * PROD styles <thead> as orange band with white text and hides vertical cell
 * borders, keeping only horizontal row separators. Audit PDF 2026-04-24:
 * "ta tabela na test wygląda kompletnie inaczej – nie jest pomarańczowa +
 * pomiędzy komórkami ma separator". */
.single-product .woocommerce-Tabs-panel table thead tr,
.single-product .woocommerce-Tabs-panel table thead th {
    background-color: #ea5b0c !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px 20px !important;
    font-weight: 700 !important;
}
.single-product .woocommerce-Tabs-panel table tbody td,
.single-product .woocommerce-Tabs-panel table tbody th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    padding: 18px 20px !important;
    background-color: transparent !important;
}
.single-product .woocommerce-Tabs-panel table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

.page-id-67296 .chem-image,
.page-id-67296 img.chem-image {
    display: block;
    margin: 20px auto;
}
.page-id-67296 img.chem-image[src*="transportation-services-logos"] {
    max-width: 400px !important;
}
.page-id-67296 img.chem-image[src*="Chemnovatic-offices-map"] {
    max-width: 1000px !important;
}

/* Media Pack (EN=5565, PL=63762, ES=71967, PT=71969): icons are used as
 * bullet markers, production renders them ~30px. Without this fix they
 * fill the entire column (~280px) and break the layout ("kosmos" issue
 * reported in audit PDF 2026-04-09). */
.page-id-5565 .chem-image,
.page-id-63762 .chem-image,
.page-id-71967 .chem-image,
.page-id-71969 .chem-image {
    max-height: 32px !important;
    width: auto !important;
    display: inline-block !important;
}
/* R17: the 32px cap above is for the leading bullet ICONS (in the 1/4 columns).
   It was also catching the photo gallery collage (miniatures-mediapack.jpg) in
   the 3/4 text column, squashing it to 32px tall = ~101px wide instead of the
   full column width PROD shows. Restore any image inside a 3/4 column. */
.page-id-5565 .chem-col--3-4 .chem-image,
.page-id-63762 .chem-col--3-4 .chem-image,
.page-id-71967 .chem-col--3-4 .chem-image,
.page-id-71969 .chem-col--3-4 .chem-image {
    max-height: none !important;
    width: 100% !important;
    display: block !important;
}
/* Media Pack: narrow icon column (1/4) should actually render as a small
 * leading column aligned with the text. Make row align-items: center. */
.page-id-5565 .chem-html-section__content .chem-row,
.page-id-63762 .chem-html-section__content .chem-row,
.page-id-71967 .chem-html-section__content .chem-row,
.page-id-71969 .chem-html-section__content .chem-row {
    align-items: center;
}

/* Sustainable: don't change padding – it regresses the match */

/* Documentation: H1 single line + correct line-height */
.page-id-5435 .chem-page-title {
    white-space: nowrap !important;
    line-height: 1.16 !important;
}

/* Blog single post: match production layout */
.chem-single-post__meta {
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 10px !important;
}
.chem-single-post__title {
    font-size: 36px !important;
    line-height: 1.2 !important;
    color: #ea5b0c !important;
    margin-bottom: 20px !important;
}
.chem-single-post__featured-image {
    margin-bottom: 20px !important;
    max-height: 300px !important;
    overflow: hidden !important;
}
.chem-single-post__featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-height: 300px !important;
}
/* Date should be above breadcrumbs like production – move via order */
.chem-single-post__meta {
    order: -1 !important;
}
.chem-single-post__featured-image img {
    width: 100% !important;
    height: auto !important;
}
/* Hide duplicate H1 from content (the_content already has one) */
.chem-single-post__content > h1:first-child,
.chem-single-post__content > h2:first-child {
    display: none !important;
}

/* ============================================================
   360° E-LIQUID INDUSTRY SOLUTIONS slider
   ============================================================ */
.chem-360-slider {
    background: #f5f5f5 !important;
    padding: 20px 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.chem-360-slider__container {
    position: relative !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-height: 280px !important;
    overflow: hidden !important;
}
.chem-360-slider__track {
    position: relative !important;
    width: 100% !important;
    min-height: 280px !important;
}
.chem-360-slider__slide {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
}
.chem-360-slider__slide.active {
    display: block !important;
}
.chem-360-slider__content {
    max-width: 55% !important;
}
.chem-360-slider__content h3 {
    font-size: 42px !important;
    font-weight: 900 !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #000 !important;
    line-height: 1.15 !important;
    margin: 0 0 15px 0 !important;
    text-transform: uppercase !important;
}
.chem-360-slider__content p {
    font-size: 16px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.chem-360-slider__prev,
.chem-360-slider__next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0,0,0,0.3) !important;
    color: #fff !important;
    border: none !important;
    font-size: 24px !important;
    padding: 15px 12px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    line-height: 1 !important;
}
.chem-360-slider__prev:hover,
.chem-360-slider__next:hover {
    background: rgba(0,0,0,0.5) !important;
}
.chem-360-slider__prev {
    left: 0 !important;
}
.chem-360-slider__next {
    right: 0 !important;
}

/* ============================================================
   R42/U7: USUNIETE — „Sustainability page section headings – orange BAR style".

   Regula malowala PIERWSZY akapit kazdej kolumny 2/3 na pomaranczowo bialym
   tekstem. Byla obejsciem z czasow, gdy naglowki sekcji na stronach
   zrownowazonego rozwoju siedzialy w tresci jako zwykly tekst (konwerter
   `[fusion_title]` gubil `<hN>`). W R42 odtworzylismy prawdziwe naglowki H2,
   wiec pierwszym akapitem stal sie normalny tekst — i to on dostawal
   pomaranczowe tlo. Stad uwaga klienta z 17.08 „wysypaly sie formatowania
   (tylko es)": produkcja ma tam zwykly, czarny tekst na bialym (sprawdzone
   zrzutem 17.08), a naglowki sa pomaranczowe same z siebie.
   ============================================================ */
/* Also style bare text first-child in 2-3 columns (STC Nicotine heading) */
.chem-title-bar + .page-content .chem-section .chem-row .chem-col--2-3 {
    font-size: 14px !important;
}

/* GET IN TOUCH and SUPPLIER sections on About – scope to page-id-4200 only,
   previously global rule forced ALL h2 in html_section to black/centered,
   breaking o-nas, kariera, ngp-regulation-news and other content pages. */
.page-id-4200 .entry-content h2:last-of-type {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--chem-primary) !important;
    text-align: right !important;
    margin: 40px 0 20px !important;
}

/* Explore more / Guide links as orange buttons */
.chem-title-bar + .page-content .chem-button--large,
.chem-title-bar + .page-content a.chem-button {
    display: inline-block !important;
    padding: 12px 24px !important;
    margin: 5px 5px 5px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}

/* ============================================================
   Mobile responsive – stack columns, fix counters, footer
   ============================================================ */
@media (max-width: 800px) {
    /* Stack all column layouts */
    .chem-row {
        flex-direction: column !important;
    }
    .chem-col--1-2,
    .chem-col--1-3,
    .chem-col--2-3,
    .chem-col--1-4,
    .chem-section .chem-col--1-2,
    .chem-section .chem-col--1-3,
    .chem-section .chem-col--1-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Counter grid: 2 columns on mobile */
    .chem-section[style*="background-color:#ea5b0c"] > .chem-row,
    .chem-section[style*="background-color: #ea5b0c"] > .chem-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .chem-section[style*="background-color:#ea5b0c"] .chem-col--1-4,
    .chem-section[style*="background-color: #ea5b0c"] .chem-col--1-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Second counter row (white bg) */
    .chem-section[style*="background-color:#ffffff"] > .chem-row,
    .chem-section[style*="background-color: #ffffff"] > .chem-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .chem-section[style*="background-color:#ffffff"] .chem-col--1-4,
    .chem-section[style*="background-color: #ffffff"] .chem-col--1-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Footer: stack columns */
    .chem-footer-columns {
        flex-direction: column !important;
    }
    .chem-footer-col--wide,
    .chem-footer-col--narrow {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 360 slider: smaller text */
    .chem-360-slider__content h3 {
        font-size: 28px !important;
    }
    .chem-360-slider__content {
        max-width: 70% !important;
    }
    .chem-360-slider__container {
        min-height: 200px !important;
    }
    .chem-360-slider__track {
        min-height: 200px !important;
    }

    /* Hero static image */
    .chem-static-hero,
    .chem-video-hero {
        height: 400px !important;
    }

    /* Cards section text */
    .chem-cards-section .chem-card {
        margin-bottom: 20px !important;
    }

    /* Contact section: buttons stack */
    .chem-button--large {
        display: block !important;
        text-align: center !important;
        margin: 8px 0 !important;
    }

    /* Product page: stack gallery + summary */
    .single-product .chem-shop-content {
        flex-direction: column !important;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .summary {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Product tables: prevent overflow */
    .woocommerce-product-attributes,
    .single-product table {
        width: 100% !important;
        font-size: 12px !important;
        word-break: break-word !important;
        table-layout: fixed !important;
    }
    .single-product table td,
    .single-product table th {
        padding: 4px 6px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Prevent any child from overflowing viewport */
    .single-product .site-main,
    .single-product article,
    .single-product .woocommerce-tabs,
    .single-product .entry-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Everything inside main must not overflow */
    main, .site-main, article, .entry-content,
    .chem-html-section__content, .chem-section, .chem-row,
    .woocommerce-Tabs-panel, .woocommerce-tabs,
    div.product, .summary, .woocommerce-product-gallery {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Tables: horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Inline styles with fixed widths - override */
    [style*="width:"] {
        max-width: 100% !important;
    }
    pre, code {
        white-space: pre-wrap !important;
        word-break: break-all !important;
    }

    /* Shop: product grid 2 columns at tablet/mid-mobile (480-800px) */
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* WooCommerce sidebar full width */
    .chem-shop-sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Title bar smaller on mobile */
    .chem-title-bar {
        height: auto !important;
        padding: 30px 15px !important;
    }
    .chem-title-bar__heading {
        font-size: 28px !important;
    }

    /* Page content padding */
    .page-content,
    .chem-html-section__content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
   v20260329 – Fixes for production parity
   ============================================================ */

/* Cart: orange border on "logged in to check out" notice */
.woocommerce-info {
    border-top: 3px solid #ea5b0c !important;
    background: #f7f6f5 !important;
    padding: 12px 15px !important;
    margin-bottom: 20px !important;
}
.woocommerce-info::before {
    color: #ea5b0c !important;
}

/* My Account: hide duplicate page title H1 above login form */
.woocommerce-account .page-content > article > h1.chem-page-title,
.woocommerce-account .chem-page-title {
    display: none !important;
}

/* Title-bar heading on standard pages: match PROD 54px/700 (was overriding
   to 42px/400 which made the font thin and smaller than PROD). */
.page-template-default .chem-title-bar__heading,
.page-content > article > h1.chem-page-title {
    text-align: center !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    color: #ea5b0c !important;
    margin-bottom: 10px !important;
}

/* Our Offer: category grid cards with image placeholders */
.woocommerce ul.products li.product-category a img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
.woocommerce ul.products li.product-category {
    text-align: center !important;
}
.woocommerce ul.products li.product-category a h2 {
    font-size: 18px !important;
    color: #ea5b0c !important;
    margin-top: 10px !important;
}

/* Category page: subcategory grid like production */
.woocommerce .term-description {
    margin-bottom: 30px !important;
}

/* WooCommerce notices: consistent styling */
.woocommerce-message,
.woocommerce-error {
    border-top: 3px solid #ea5b0c !important;
    background: #f7f6f5 !important;
    padding: 12px 15px !important;
}

/* Blog single: breadcrumbs + title matching production */
.chem-single-post .chem-breadcrumbs {
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

/* "Still deciding?" section on category pages */
.chem-still-deciding {
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid #e0e0e0 !important;
}
.chem-still-deciding h2 {
    color: #ea5b0c !important;
    font-size: 32px !important;
    font-style: italic !important;
    text-align: center !important;
}

/* ===== RWD: mobile/tablet shop layout – MUST be last so it wins against
   the stacked desktop-width rules above (.chem-shop-sidebar 0 0 288 !important
   and .single-product .chem-shop-content width: auto !important). */
@media (max-width: 991px) {
    .chem-shop-layout,
    .single-product .chem-shop-layout {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .chem-shop-sidebar,
    .single-product .chem-shop-sidebar,
    .chem-shop-content,
    .single-product .chem-shop-content {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ===== RWD mobile: page titles + content padding parity with prod
   Must be LAST so it beats (a) the non-media .page-template-default rule
   that forces 42px/400 and (b) earlier media-query overrides. */
@media (max-width: 767px) {
    /* Title bar: padding on OUTER wrapper only – inner stays flush
       so the H1 isn't indented twice (30 + 30 = 60px). */
    .chem-title-bar {
        padding: 40px 30px 10px !important;
    }
    .chem-title-bar__inner {
        padding: 0 !important;
    }
    /* H1 – prod: 25px / 30px / 700 */
    .chem-title-bar__heading,
    .page-template-default .chem-title-bar__heading,
    .page-content > article > h1.chem-page-title,
    .entry-title,
    h1.chem-page-title {
        font-size: 25px !important;
        line-height: 30px !important;
        font-weight: 700 !important;
    }

    /* H2 in Fusion legacy title blocks – prod: 22px / 26px / 700 */
    .chem-legacy-title-heading,
    h2.chem-legacy-title-heading,
    .chem-legacy-title-size-one .chem-legacy-title-heading,
    .chem-legacy-title-size-two .chem-legacy-title-heading,
    .chem-legacy-title-size-three .chem-legacy-title-heading {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    /* Content horizontal padding – prod uses 30px on EXACTLY ONE wrapper
       (.chem-html-section__content). Flatten the outer .chem-section to
       prevent 30+30 cumulative inset. */
    .chem-html-section__content {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .chem-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Legacy Fusion builder row uses negative margins (gutter compensation)
       that leak outside the padded section on mobile. Zero them out. */
    .chem-legacy-builder-row,
    .chem-legacy-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile currency / language switcher: reveal the dropdown when the tap
   handler in main.js adds .chem-switcher-open (the myvapy-shop-customize
   plugin only opens .vmcs-content / .vmls-content on :hover) (#65). */
.vmcs-main.chem-switcher-open .vmcs-content,
.vmls-main.chem-switcher-open .vmls-content {
    visibility: visible !important;
    opacity: 1 !important;
}

/* PDF 7 p2-3: on mobile the plugin's :hover reveal let the currency AND
   language dropdowns stay open at once. Drive visibility purely from the
   tap-toggle class (main.js already closes the other one), and give the
   dropdown panel a light background like PROD. */
@media (max-width: 800px) {
    .chem-header .vmcs-main .vmcs-content,
    .chem-header .vmls-main .vmls-content {
        visibility: hidden !important;
        opacity: 0 !important;
        background: #f4f4f4 !important;
        padding: 6px 4px !important;
    }
    .chem-header .vmcs-main.chem-switcher-open .vmcs-content,
    .chem-header .vmls-main.chem-switcher-open .vmls-content {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* The header row must not clip: main.css forces overflow-x:hidden on every
   .chem-row to kill horizontal scroll, but that also cuts off the absolutely
   positioned switcher dropdowns. body{overflow-x:hidden} stays as the
   page-level scroll backstop, so excluding header rows is safe (#65). */
.chem-header .chem-row {
    overflow: visible !important;
}

/* ===== RWD mobile: header parity with production.
   Hide desktop tagline (phone/email/ZALOGUJ), shrink the logo, and keep
   only the mobile-icons row visible (search + hamburger + cart + lang). */
@media (max-width: 767px) {
    /* Desktop tagline row inside the logo wrapper – ALL OFF on mobile.
       Specificity raised so it beats the non-media `display: flex !important`
       rule at line ~2809 of this file. */
    .chem-header .chem-header-content-3-wrapper,
    .chem-sticky-header-wrapper .chem-header-content-3-wrapper,
    .chem-logo .chem-header-content-3-wrapper,
    .chem-header-tagline,
    #header-login-link {
        display: none !important;
    }

    /* Logo: shrink so all 5 icons fit to its right without overflow.
       414vp − (logo 40% ≈ 165) − (icons ≈ 200) − padding 20 ≈ 29 px gap. */
    .chem-logo,
    .chem-logo-link {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 40% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .chem-logo img,
    .chem-logo-1x {
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Top header row: single line – logo on left, mobile icons on right. */
    .chem-sticky-header-wrapper > .chem-header > .chem-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        min-height: 56px !important;
    }
    /* Even spacing across the whole header row: logo takes its natural
       width on the left, the icons cluster flexes to fill the remainder
       with space-between so each icon sits at an equal distance. */
    .modern-mobile-menu-adj {
        order: 2 !important;
        flex: 1 1 auto !important;
        margin-left: 0 !important;
        justify-content: space-around !important;
        gap: 0 !important;
    }
    .chem-logo {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    /* Compact the mobile icon cluster so search+hamburger fit inside vp. */
    .chem-mobile-menu-icons {
        gap: 4px !important;
    }
    /* PDF 7 p3: PROD mobile header icons are noticeably larger than TEST. */
    .chem-mobile-menu-icons .chem-icon {
        font-size: 21px !important;
        padding: 4px !important;
        color: #000 !important; /* beats base white-on-white */
    }
    .chem-mobile-menu-icons .chem-icon:hover {
        color: #ea5b0c !important;
    }
    /* AWB icon classes have no glyph via FontAwesome; inject via ::before */
    .chem-icon.awb-icon-search::before {
        content: "\f002";
        font-family: "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
    }
    .chem-icon.awb-icon-bars::before {
        content: "\f0c9";
        font-family: "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
    }
    .vmcs-main,
    .vmls-main,
    .b2b-mobile-basket {
        font-size: 19px !important;
    }
    .b2b-mobile-basket {
        color: #000 !important;
    }
    /* Language flag in the mobile header – match PROD's larger flag. */
    .vmls-btn img {
        width: 30px !important;
        height: auto !important;
    }

    /* Keep .chem-secondary-main-menu visible on mobile: it hosts the 3px
       orange separator (border-top) AND the hidden .chem-mobile-nav-holder
       which the hamburger toggles into view. */

    /* Swap logo to a compact icon on mobile (matches prod logo_mobile_*).
       `content: url()` on an <img> replaces its rendered source without
       touching markup. */
    .chem-logo img.chem-logo-1x {
        content: url('/wp-content/uploads/logo_mobile_20240726.png') !important;
        max-height: 36px !important;
    }

    /* Shrink the space above the page title – prod has ~20px, not 40px. */
    .chem-title-bar {
        padding: 20px 30px 10px !important;
    }

    /* Mobile nav drawer: when hamburger toggles it visible (inline
       style="display:none" removed by JS), make it a proper full-width
       drop-down with background + separation. */
    .chem-mobile-nav-holder {
        background: #ffffff !important;
        border-top: 1px solid #e0e0e0 !important;
        padding: 10px 0 !important;
    }
    .chem-mobile-nav-holder ul.chem-mobile-menu,
    .chem-mobile-nav-holder ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .chem-mobile-nav-holder ul > li {
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .chem-mobile-nav-holder ul > li > a {
        display: block !important;
        padding: 12px 20px !important;
        color: #000 !important;
        text-decoration: none !important;
        font-size: 15px !important;
    }
    .chem-mobile-nav-holder ul > li > a:hover {
        color: #ea5b0c !important;
    }
}

/* ===== RWD mobile: single-product layout must stack.
   The desktop rule `.single-product .product { grid-template-columns: 350px 1fr }`
   squeezes the summary column to ~34px on a 414 vw. Force single column. */
@media (max-width: 767px) {
    .single-product .product {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    .single-product .product .woocommerce-product-gallery,
    .single-product .product .summary.entry-summary {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Horizontal gutter – matches prod (~15px). Breadcrumbs, H1, gallery
       and tabs were sitting flush against the left edge. */
    .single-product .chem-shop-content,
    .single-product .chem-shop-layout {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    /* WC thumbnail strip can overflow horizontally; clip it. */
    .single-product .woocommerce-product-gallery,
    .single-product .flex-control-nav,
    .single-product .flex-control-thumbs {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* ===== RWD mobile: footer bottom bar + EU bar stack gracefully.
   Desktop uses a 4-column grid (auto 1fr auto auto); on 414 vp the 1fr
   chem-logo cell collapses to 0 since the other 3 columns already consume
   the full row. Switch to flex wrap/center on mobile. */
@media (max-width: 767px) {
    .chem-footer-bottom-content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px 20px !important;
        grid-template-columns: none !important;
    }
    .chem-footer-bottom-content > .chem-footer-social,
    .chem-footer-bottom-content > .chem-footer-bottom-logo,
    .chem-footer-bottom-content > .chem-footer-bottom-rzetelna,
    .chem-footer-bottom-content > .chem-footer-bottom-certs {
        justify-self: center !important;
        flex: 0 0 auto !important;
    }

    /* EU bar: stack the two logos vertically so both fit on 414 vp. */
    .chem-footer-eu-content {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 10px 15px !important;
    }
    .chem-footer-eu-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ==========================================================================
   Producer block – pre-footer CTA section included via page.php on content
   pages. Mirrors PROD "Chemnovatic is a world-leading manufacturer..." +
   newsletter join CTA.
   ========================================================================== */
.chem-producer-block {
    background: #1d1d1b;
    color: #ffffff;
    padding: 60px 30px;
    margin-top: 40px;
}
.chem-producer-block__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.chem-producer-block__body p {
    color: #d5d5d3;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.chem-producer-block__body strong {
    color: #ffffff;
    font-weight: 700;
}
.chem-producer-block__disclaimer {
    font-size: 13px !important;
    color: #9a9a98 !important;
    margin-top: 18px !important;
}
.chem-producer-block__cta {
    text-align: left;
    padding: 30px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.12), rgba(234, 91, 12, 0.04));
    border-left: 3px solid #ea5b0c;
    border-radius: 4px;
}
.chem-producer-block__chapeau {
    color: #ea5b0c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
}
.chem-producer-block__heading {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px !important;
}
.chem-producer-block__heading span {
    display: block;
    color: #d5d5d3;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 8px;
}
.chem-producer-block__button {
    display: inline-block;
    background: #ea5b0c !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    transition: background 0.2s ease !important;
}
.chem-producer-block__button:hover {
    background: #c44c09 !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .chem-producer-block {
        padding: 40px 20px;
    }
    .chem-producer-block__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* WooCommerce legacy clearfix ::before / ::after on ul.products consumes the
   first grid cell because it was designed for float layouts. In CSS Grid
   mode it leaves the first slot visually empty (reported 2026-04-24: "pusty
   pierwszy kafelek" on product-tag/wszystkie-produkty). Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   Product loop tiles – equal height, taller, hover overlay with short
   description (mirrors PROD Avada `.fusion-rollover`).
   ========================================================================== */
.woocommerce ul.products {
    gap: 30px !important;
}

/* Each tile: flex column so the bottom "Dowiedz się więcej" button aligns to
   the bottom regardless of title length. */
.woocommerce ul.products li.product {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 480px;  /* mirror PROD tile height */
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    border-color: #ea5b0c;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 20px 12px !important;
    text-decoration: none !important;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img {
    margin: 0 auto 16px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #ea5b0c !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 3em;  /* reserve space so short/long titles align */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover overlay – slides in from LEFT (PROD Avada behavior). Pomarańczowe tło
   zajmujące obszar obrazka, z krótkim opisem produktu + button Szczegóły. */
.chem-product-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 230px;
    background: #ea5b0c;
    color: #ffffff;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    overflow: hidden;
}
.woocommerce ul.products li.product:hover .chem-product-overlay,
.woocommerce ul.products li.product:focus-within .chem-product-overlay {
    transform: translateX(0);
    pointer-events: auto;
}
.chem-product-overlay__inner {
    width: 100%;
    text-align: center;
}
.chem-product-overlay__text {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    max-height: 220px;
    overflow: hidden;
}
.chem-product-overlay__text h1,
.chem-product-overlay__text h2,
.chem-product-overlay__text h3,
.chem-product-overlay__text h4,
.chem-product-overlay__text h5,
.chem-product-overlay__text h6 {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: 0 !important;
}
.chem-product-overlay__text p {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
}
.chem-product-overlay__text strong,
.chem-product-overlay__text b {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.chem-product-overlay__text ul,
.chem-product-overlay__text ol {
    color: #ffffff !important;
    margin: 0 0 6px !important;
    padding-left: 18px !important;
    text-align: left !important;
}
.chem-product-overlay__text li {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.chem-product-overlay__text li::marker {
    color: #ffffff !important;
}
.chem-product-overlay__button {
    display: inline-block;
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 8px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.chem-product-overlay__button:hover {
    background: #ffffff !important;
    color: #ea5b0c !important;
}

/* Bottom "Dowiedz się więcej" button row pinned to bottom of tile */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .wcb2b_login_message,
.woocommerce ul.products li.product > p {
    margin: 0 20px 10px !important;
    text-align: center;
}
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product .button.product_type_simple {
    margin-top: auto !important;
    background: #ea5b0c !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 2px !important;
    display: block !important;
}

/* ==========================================================================
   WooCommerce pagination – match PROD: right-aligned square tiles, orange
   active, orange text on white with gray border for others, "Kolejny >" link.
   ========================================================================== */
.woocommerce nav.woocommerce-pagination {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 20px 0 40px !important;
    border: 0 !important;
    text-align: right !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination > li {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ea5b0c !important;
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers:hover {
    background: #f5f5f5 !important;
    border-color: #ea5b0c !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination span[aria-current="page"] {
    color: #ffffff !important;
    background: #ea5b0c !important;
    border-color: #ea5b0c !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers.dots {
    background: transparent !important;
    border-color: transparent !important;
    color: #999999 !important;
    min-width: 24px !important;
    padding: 0 4px !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers.next,
.woocommerce nav.woocommerce-pagination .page-numbers.prev {
    padding: 0 14px !important;
    gap: 4px;
}
.woocommerce nav.woocommerce-pagination .page-numbers.next::after {
    content: "›";
    font-size: 16px;
    margin-left: 4px;
}
.woocommerce nav.woocommerce-pagination .page-numbers.prev::before {
    content: "‹";
    font-size: 16px;
    margin-right: 4px;
}

/* ============================================================
   v20260424 – Mobile RWD parity fixes (PROD vs TEST audit)
   ============================================================ */

/* Shop archive: single column below 480 (overrides 800px block above
   which forces 2fr – PROD uses 1 column on narrow mobile). Placed
   after that block so it wins by source order. */
@media (max-width: 480px) {
    .woocommerce ul.products[class*="columns-"],
    .chem-shop-content ul.products {
        grid-template-columns: 1fr !important;
    }
    /* Tiles don't need fixed min-height on narrow mobile – one column
       gives plenty of room; fixed 480px wastes vertical space. */
    .woocommerce ul.products li.product {
        min-height: 0 !important;
    }
}

/* Touch devices: no hover → slide-in overlay is never visible, so hide
   the entire overlay (including trapped pointer-events area) to avoid
   a dead tap zone over product images. */
@media (hover: none), (pointer: coarse) {
    .chem-product-overlay {
        display: none !important;
    }
}

/* Mobile (<=800): stack legacy Avada 2-column rows (chem-col--1-2, etc.)
   so image + text don't compress into unreadable narrow columns on
   career / o-nas / strategia-esg pages.

   Also covers the chem-legacy-fullwidth/flex-container/layout-column
   trio that comes from convert-fusion.php on home page – those use
   fusion_builder_column_* classes (1_2, 1_3, 1_4, 1_6) instead of
   chem-col--*, and were left as flex-row at width 80-188px. */
@media (max-width: 800px) {
    .chem-row,
    .chem-legacy-row,
    .chem-legacy-flex-container,
    .chem-legacy-builder-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .chem-row > [class*="chem-col--"],
    .chem-legacy-row > [class*="chem-col--"],
    .chem-col--1-2, .chem-col--2-5, .chem-col--3-5,
    .chem-col--1-3, .chem-col--2-3,
    .chem-col--1-4, .chem-col--3-4,
    .chem-col--1-6, .chem-col--5-6,
    /* Fusion grid columns (any fraction) used by chem-legacy-* layouts */
    .chem-legacy-layout-column[class*="fusion_builder_column_"],
    .chem-legacy-flex-container > [class*="chem-legacy-builder-column"],
    .chem-legacy-flex-container > .chem-legacy-layout-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* R44 (2026-09-01): podkreslenie on-hover na naglowkach kolumn (uwaga klienta) */
.chem-cards-section .chem-card__title a:hover { text-decoration: underline; }