/* ============================================================================
   ROUND 8 — Global client-feedback fixes (loaded LAST, wins the cascade)
   Each block maps to a "global" item from the client list (G1..G6).
   Keep round-specific overrides here so they are easy to review and revert.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   A4 (tester) — article bottom "Let's grow your business together!" newsletter
   CTA (the un-migrated shortcode). Boxed, centred, with the reused newsletter
   form. Sits between the article content and the comments.
   ---------------------------------------------------------------------------- */
.chem-article-cta {
    /* R11 (tester): PROD's CTA is NOT a boxed card — no frame, no shadow,
       transparent background. Just a centred full-width section. */
    margin: 40px 0;
    padding: 24px 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}
.chem-article-cta__title {
    color: #ea5b0c !important;
    font-size: 36px !important; /* R11: PROD is 36px (was 26px) */
    font-weight: 700 !important;
    margin: 0 0 14px !important;
}
/* R11: lead line is bold; the red sub-phrase carries its own inline colour. */
.chem-article-cta__text--lead {
    font-size: 16px;
}
.chem-article-cta__text strong {
    font-weight: 700;
}
.chem-article-cta__text {
    margin: 0 auto 10px !important;
    max-width: 620px;
}
.chem-article-cta__form {
    margin-top: 18px;
}
.chem-article-cta__form form,
.chem-article-cta__form .chem-footer-newsletter {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 560px;
    margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   A3 (tester) — Knowledge Base cards: PROD shows the IMAGE on top, then the
   whole text (title + description) below as one coherent block, with an
   animated zoom on hover. The template (columns_cards.php) now pulls the
   leading image out into .chem-card__image before the title; style it on top
   and add the hover zoom (PROD uses a transform transition on the image).
   ---------------------------------------------------------------------------- */
.chem-card--image-top {
    display: flex;
    flex-direction: column;
}
.chem-card__image {
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 2px;
}
.chem-card__image p {
    margin: 0 !important;
}
.chem-card__image a {
    display: block;
}
.chem-card__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}
.chem-card--image-top:hover .chem-card__image img {
    transform: scale(1.06);
}
/* keep the title directly under the image, then the description */
.chem-card--image-top .chem-card__title {
    margin-top: 0;
    order: 0;
}

/* ----------------------------------------------------------------------------
   m3 — Homepage "achievements" counters (e.g. "5,500+") use a 55px font. On
   mobile the 1/4 columns sit 2-up (~164px) and the number (~171px) is clipped.
   Shrink the counter font on small screens so values fit. base.css sets the
   55px with !important, so match it here (loaded last).
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .chem-section[style*="background-color"] .chem-counter-number,
    .chem-section[style*="background-color"] .chem-col--1-4 > .chem-counter-number,
    .chem-section[style*="background-color"] .chem-col--1-4 > p[style*="font-size:48px"],
    .chem-section[style*="background-color"] .chem-col--1-4 > p:nth-child(2) {
        font-size: 38px !important;
    }
    /* R9 (tester): the 2x2 achievements grid fits now but had no separator
       lines (PROD divides the cells). Add subtle dividers between the four
       counter cells on the coloured band. */
    .chem-section[style*="background-color"] .chem-col--1-4:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.35);
    }
    .chem-section[style*="background-color"] .chem-col--1-4:nth-child(1),
    .chem-section[style*="background-color"] .chem-col--1-4:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }
}

/* ----------------------------------------------------------------------------
   m8 — Pricing tables in migrated content (e.g. Regulatory Services TPD price
   list) use table-layout:fixed, so on mobile the EUR price columns get squeezed
   to ~56px and "699,00 EUR" wraps onto several lines (td also had overflow
   hidden). On small screens let the table size to content: labels (first col)
   keep wrapping, price columns never wrap, and the existing .chem-table-wrapper
   scrolls horizontally if the table is wider than the viewport.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .chem-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* R10 (tester re-verify, screenshot): R9 tried to fit the price table into
       the viewport (min-width:0) but that crushed the FIRST (label) column to
       ~50px, so the description text broke one-character-per-line. PROD keeps
       this section HORIZONTALLY SCROLLABLE with readable columns. Restore that:
       give the table a readable floor and a sensible min-width on the label
       column; the wrapper scrolls if wider than the viewport. */
    .chem-table-wrapper table {
        table-layout: auto !important;
        width: auto !important;
        min-width: 100%;
    }
    /* 3+ value-column tables (e.g. TPD price list): readable scrollable layout. */
    .chem-table-wrapper table:has(tr > td:nth-child(3)) {
        min-width: 560px;
    }
    .chem-table-wrapper td,
    .chem-table-wrapper th {
        overflow: visible !important;
        padding: 8px 10px !important;
    }
    .chem-table-wrapper td:first-child,
    .chem-table-wrapper th:first-child {
        white-space: normal !important;
        min-width: 240px;
        font-size: 12px !important;
    }
    .chem-table-wrapper td:not(:first-child),
    .chem-table-wrapper th:not(:first-child) {
        white-space: nowrap !important;
        font-size: 12px !important;
        text-align: center;
    }
}

/* ----------------------------------------------------------------------------
   G1 — WooCommerce notices: the pseudo-icon (green check / red exclamation)
   sits ON the text because the theme shrinks notice padding while WC keeps the
   icon absolutely positioned. Client wants the overlapping icons gone on ALL
   pages: product (added-to-cart), cart, checkout (coupon), my-account (NIP),
   registration. We hide the pseudo-icon globally and normalise padding.
   List: b) NIP error · d) added-to-cart · f) registration · g) coupon
   ---------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
ul.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    padding-left: 1.25em !important;
    list-style: none !important;
    background-position: 1em center;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message li::before,
.woocommerce-info li::before,
.woocommerce-error li::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
    content: none !important;
    display: none !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ----------------------------------------------------------------------------
   G2 — Button hover unified to PROD: white background, orange outline, orange
   text. Fixes three broken hovers:
     · base.css:1537  white bg + WHITE text  -> invisible "Add to basket"
     · fusion-compat:553  orange -> darker orange "Log in to see prices"
     · main.css:1373  add-to-cart -> grey #333
     · #place_order  white-on-white "Kupuję i płacę"
   Outline drawn with inset box-shadow so there is NO layout shift on hover.
   List: d) Log in to see prices · d) Add to basket · g) Kupuję i płacę
   ---------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"].button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single-product .summary .single_add_to_cart_button,
.single_add_to_cart_button,
.myvapy-order-view-button,
a.chem-button.myvapy-order-view-button,
.woocommerce #place_order,
#place_order {
    box-shadow: inset 0 0 0 2px #ea5b0c;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* "Log in to see prices" guest button (.myvapy-order-view-button) is an
   a.chem-button — its own :hover turns it darker orange (#d04e08). Override. */
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce input[type="submit"].button:hover,
.woocommerce input[type="submit"].button:focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single-product .summary .single_add_to_cart_button:hover,
.single-product .summary .single_add_to_cart_button:focus,
.single_add_to_cart_button:hover,
.myvapy-order-view-button:hover,
.myvapy-order-view-button:focus,
a.chem-button.myvapy-order-view-button:hover,
.woocommerce #place_order:hover,
#place_order:hover,
#place_order:focus {
    background: #fff !important;
    background-color: #fff !important;
    color: #ea5b0c !important;
    box-shadow: inset 0 0 0 2px #ea5b0c !important;
    border-color: #ea5b0c !important;
    /* tester re-verify: PROD underlines the label on hover, dev didn't */
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------
   G4 — Top-menu dropdowns (currency / language / login): trim the wide black
   gutters by fitting the panel width to its content instead of the forced
   260px min-width. Login dropdown = li.menu-my-account > ul.sub-menu
   (verified live: holds "Shop My Account" etc).
   List: a) currency dropdown · a) language dropdown · a) login dropdown
   ---------------------------------------------------------------------------- */
ul.chem-menu > li.menu-item-vapycurrency > ul.sub-menu,
ul.chem-menu > li.pll-parent-menu-item > ul.sub-menu,
ul.chem-menu > li.menu-my-account > ul.sub-menu {
    min-width: 0 !important;
    width: -moz-max-content !important;
    width: max-content !important;
    white-space: nowrap !important;
}
ul.chem-menu > li.menu-item-vapycurrency > ul.sub-menu li,
ul.chem-menu > li.pll-parent-menu-item > ul.sub-menu li,
ul.chem-menu > li.menu-my-account > ul.sub-menu li,
ul.chem-menu > li.menu-item-vapycurrency > ul.sub-menu li a,
ul.chem-menu > li.pll-parent-menu-item > ul.sub-menu li a,
ul.chem-menu > li.menu-my-account > ul.sub-menu li a {
    white-space: nowrap !important;
}

/* ----------------------------------------------------------------------------
   G6 — Hide the "Hello {user} / View cart" grey bar on Cart and Checkout pages.
   The View-cart link is pointless there and production does not show it.
   List: e) cart bar · g/m) checkout bar
   ---------------------------------------------------------------------------- */
.woocommerce-cart .chem-myaccount-user,
.woocommerce-checkout .chem-myaccount-user,
/* R12 (re-audit 28-06): the visible logged-in bar on cart/checkout is actually
   .chem-account-topbar (header.php), not .chem-myaccount-user — the old selector
   never matched, so the "Hello {user} / View cart" bar stayed. Hide it too. */
.woocommerce-cart .chem-account-topbar,
.woocommerce-checkout .chem-account-topbar {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   G3 — Shop tablet/iPad layout (category archive + single product).
   PROD keeps a 2-column layout (narrow sidebar + content) down to 800px, then
   stacks with CONTENT FIRST and the category menu BELOW it. Dev wrongly stacked
   at 991px with the category menu on TOP, pushing content far down — the
   "treść pod menu kategorii / menu na całą szerokość" bug. We:
     · 801–991px  -> restore the 2-column layout (sidebar 200px, like PROD ~182).
     · ≤800px     -> stack, content first, category menu below.
   List: c) category iPad RWD · d) product iPad RWD
   ---------------------------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 991px) {
    .chem-shop-layout,
    .single-product .chem-shop-layout {
        flex-direction: row !important;
        gap: 30px !important;
        align-items: flex-start !important;
    }
    .chem-shop-sidebar,
    .single-product .chem-shop-sidebar {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        /* R25: sidebar moved after content in the DOM (heading hierarchy) —
           order -1 keeps it as the LEFT column, like PROD. */
        order: -1 !important;
    }
    .chem-shop-content,
    .single-product .chem-shop-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        order: 0 !important;
    }
}
@media (max-width: 800px) {
    .chem-shop-layout,
    .single-product .chem-shop-layout {
        flex-direction: column !important;
    }
    .chem-shop-content,
    .single-product .chem-shop-content {
        order: 1 !important;
        width: 100% !important;
    }
    .chem-shop-sidebar,
    .single-product .chem-shop-sidebar {
        order: 2 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }
}

/* ============================================================================
   ROUND 8b — confirmed per-cluster fixes (triaged as REPRODUKUJE on K47)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   l2 — Footer contact icons (mail + phone): white instead of orange.
   Scoped to .chem-footer-contact so the orange megamenu/footer link icons
   (fa-book-open etc.) are not affected.
   ---------------------------------------------------------------------------- */
.chem-footer-contact i,
.chem-footer-contact p i.fas {
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   b1 — My Account → Addresses: remove italics across the section (PROD parity).
   OSS "I declare that" block: normal weight + black + no italic.
   ---------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content *,
.woocommerce-edit-address .woocommerce-MyAccount-content,
.woocommerce-edit-address .woocommerce-MyAccount-content * {
    font-style: normal !important;
}

/* ----------------------------------------------------------------------------
   i4 — Blog: move the tag/category sidebar to the RIGHT (it had order:-1 = left).
   Content first (order 1) keeps it content-first when stacked on mobile too.
   ---------------------------------------------------------------------------- */
.chem-blog-wrapper .chem-blog-content { order: 1 !important; }
.chem-blog-wrapper .chem-blog-sidebar { order: 2 !important; }

/* ----------------------------------------------------------------------------
   j2 — Documentation pages: data tables should be narrow (PROD = 600px), not
   full content width (1140px). Scoped to the documentation pages, all langs
   (page IDs are consistent: local DB was refreshed from marcetino).
   ---------------------------------------------------------------------------- */
.page-id-5435 .chem-legacy-text table,
.page-id-63722 .chem-legacy-text table,
.page-id-71963 .chem-legacy-text table,
.page-id-71965 .chem-legacy-text table {
    max-width: 600px !important;
    width: 100% !important;
    /* tester re-verify: PROD centers these tables (dev was left-aligned) */
    margin-left: auto !important;
    margin-right: auto !important;
}
/* R9 tester re-verify: PROD center-aligns ALL doc-table cells incl. the header
   row (which is <td>, not <th>); dev left-aligned them. */
.page-id-5435 .chem-legacy-text table th,
.page-id-5435 .chem-legacy-text table td,
.page-id-63722 .chem-legacy-text table th,
.page-id-63722 .chem-legacy-text table td,
.page-id-71963 .chem-legacy-text table th,
.page-id-71963 .chem-legacy-text table td,
.page-id-71965 .chem-legacy-text table th,
.page-id-71965 .chem-legacy-text table td {
    text-align: center !important;
}

/* ----------------------------------------------------------------------------
   j4 (part 1) — Polityki page: the regulations icon sits in a text-with-image
   block which is globally sticky (intended for long service lists). On this
   page PROD shows it as a normal, non-following image. Un-stick it here only.
   (part 2 — duplicate paragraph — is a content/ACF edit, tracked separately.)
   Page IDs: 111470 PL, 111455 EN, 111476 + 111479 PT/ES.
   ---------------------------------------------------------------------------- */
.page-id-111470 .chem-twi__image,
.page-id-111455 .chem-twi__image,
.page-id-111476 .chem-twi__image,
.page-id-111479 .chem-twi__image {
    position: static !important;
    top: auto !important;
}

/* ----------------------------------------------------------------------------
   g3 / m14 — Checkout payment box: WooCommerce default background is #ebe9eb
   (purple-grey = the "fioletowe tło" the client reports). Make it white.
   ---------------------------------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce #payment,
.woocommerce-page #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment .payment_box {
    background: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   e3 / m11 — Cart: product thumbnail is small and left-aligned; center it
   (matches production). Size left as-is.
   ---------------------------------------------------------------------------- */
.woocommerce-cart table.cart td.product-thumbnail {
    text-align: center !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: inline-block !important;
}

/* ----------------------------------------------------------------------------
   m16 — Footer newsletter on mobile. First pass stacked input over button;
   R19 re-measured PROD at 390px: input (197px) and Submit sit on ONE line
   (input flexes, button keeps its width). Match that instead — the original
   overflow came from the input's fixed width, not from the row layout.
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .chem-footer-newsletter .spec-subscribe-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .chem-footer-newsletter .spec-subscribe-form input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
    .chem-footer-newsletter .spec-subscribe-form button {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-top: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   d14 — Remove the spinning loader overlay (WooCommerce blockUI) shown on the
   single-product variations form during a variation change. Client: unnecessary.
   ---------------------------------------------------------------------------- */
.single-product div.product form.cart .blockUI.blockOverlay,
.single-product .variations_form .blockUI.blockOverlay,
.woocommerce div.product form.cart .blockUI.blockOverlay {
    display: none !important;
    opacity: 0 !important;
}

/* ----------------------------------------------------------------------------
   i9 — Blog tags (sidebar tag cloud): drop the grey #f0f0f0 background and fix
   the orange-on-orange hover (text became invisible). Transparent bg, orange
   text, darker-orange + underline on hover (text stays readable).
   ---------------------------------------------------------------------------- */
.chem-blog-sidebar .tagcloud a,
.chem-blog-sidebar .widget_tag_cloud a {
    background: transparent !important;
    color: #ea5b0c !important;
    padding: 2px 4px !important;
    border: none !important;
}
/* i8 (tester re-verify): the post-count "(59)" sits in the <li> (black) next to
   the orange category link; PROD shows it orange. Colour the li orange. */
.chem-blog-sidebar .widget_categories li.cat-item {
    color: #ea5b0c !important;
}
/* A2 (tester): blog category tree had counts + parent/child structure but the
   sub-categories were not indented, so the hierarchy was invisible. Indent each
   nested level so the tree reads correctly. */
.chem-blog-sidebar .widget_categories ul.children {
    margin: 4px 0 0 !important;
    padding-left: 18px !important;
    list-style: none !important;
}
.chem-blog-sidebar .widget_categories ul.children li.cat-item {
    position: relative;
}

/* ----------------------------------------------------------------------------
   m11 (logged-in B2B, mobile): the cart was broken below the product table —
   the product image was hidden, the "Apply coupon" button overflowed off the
   right edge, and "Proceed to checkout" was cut. WooCommerce's small-screen
   stylesheet hides td.product-thumbnail; override it and stack the coupon row +
   full-width the proceed button.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .woocommerce-cart-form td.product-thumbnail,
    table.cart td.product-thumbnail {
        display: block !important;
        text-align: center !important;
    }
    .woocommerce-cart-form td.product-thumbnail img,
    table.cart td.product-thumbnail img {
        width: 80px !important;
        max-width: 80px !important;
        margin: 0 auto !important;
    }
    .woocommerce .coupon {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .woocommerce .coupon #coupon_code,
    .woocommerce .coupon input.input-text {
        flex: 1 1 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .woocommerce .coupon .button {
        flex: 1 1 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* stack the cart bottom (coupon + totals) so each gets full width instead
       of being squeezed into a cramped flex row */
    .chem-cart-bottom {
        flex-direction: column !important;
    }
    .chem-cart-bottom > *,
    .chem-cart-totals-wrap,
    .chem-cart-bottom .cart_totals {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .cart_totals .wc-proceed-to-checkout,
    .woocommerce .wc-proceed-to-checkout {
        width: 100% !important;
    }
    .wc-proceed-to-checkout .checkout-button,
    .wc-proceed-to-checkout a.checkout-button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* ----------------------------------------------------------------------------
   a2 (logged-in B2B): mini-cart dropdown — the "View cart / Go to checkout"
   row was left-packed and the line-item price sat too far left. PROD keeps
   left items left and right items right. Space-between the action row and
   right-align the item price (the "Cart total" row is already space-between).
   ---------------------------------------------------------------------------- */
.chem-menu-cart-checkout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.chem-menu-cart-item-quantity {
    display: block !important;
    text-align: right !important;
}
/* R11→R12 (tester re-verify PDF 28-06): the subtotal row shares
   .chem-menu-cart-checkout, whose two children are flex:1 (50% each) with a mid
   divider, so after R11's right-align the "Cart total" label hugged the far left
   and the amount the far right ("cart total za bardzo do lewej a cena za bardzo
   do prawej"). Group the label + amount together, centred, and drop the mid
   divider so it reads as one clean total line. */
.chem-menu-cart-checkout.chem-menu-cart-subtotal {
    /* R20 (client, PDF 08-07 caret): back to label-left / amount-right — the
       R12 "za bardzo do lewej/prawej" complaint targeted the old full-width
       row with a mid divider; the dropdown is ~275px now, so space-between
       reads as the "mniejszy odstęp" they asked for. */
    justify-content: space-between !important;
    gap: 8px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.chem-menu-cart-subtotal .chem-menu-cart-link,
.chem-menu-cart-subtotal .chem-menu-cart-checkout-link {
    flex: 0 0 auto !important;
}
.chem-menu-cart-subtotal .chem-menu-cart-checkout-link {
    border-left: none !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* ----------------------------------------------------------------------------
   g1 (logged-in B2B): checkout billing & shipping sections had no frame; PROD
   wraps each in its own bordered box. Add the frame.
   ---------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 22px 24px !important;
    margin-bottom: 24px !important;
    background: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   e2 (logged-in B2B): the cart "Update basket" button stayed grey when active;
   PROD turns it orange once a quantity changes. Colour the enabled state orange.
   ---------------------------------------------------------------------------- */
.woocommerce-cart .cart_totals .chem-cart-update:not([disabled]):not(:disabled),
.woocommerce-cart .cart_totals button[name="update_cart"]:not([disabled]):not(:disabled),
.woocommerce button[name="update_cart"]:not([disabled]):not(:disabled) {
    background: #ea5b0c !important;
    background-color: #ea5b0c !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* ----------------------------------------------------------------------------
   e3 (logged-in B2B): cart line-item thumbnail rendered tiny (32px). PROD shows
   a larger, centred image. Enlarge + keep centred.
   ---------------------------------------------------------------------------- */
.woocommerce-cart-form td.product-thumbnail img,
.cart_item td.product-thumbnail img,
table.cart td.product-thumbnail img {
    width: 64px !important;
    height: auto !important;
    max-width: 64px !important;
    margin: 0 auto !important;
    display: inline-block !important;
}

/* ----------------------------------------------------------------------------
   d5 (tester re-verify, logged-in B2B): the orange net price (20px) was only a
   little bigger than the grey per-litre price (14px); PROD's size difference is
   much larger. Enlarge the net price. Scoped to the direct net-price amount so
   the grey .vapy-price/.price-per-liter and the teal qty-price-info are
   untouched.
   ---------------------------------------------------------------------------- */
.single-product .woocommerce-variation-price > .price > .woocommerce-Price-amount,
.single-product .summary > .price > .woocommerce-Price-amount,
.single-product .summary > .price > ins > .woocommerce-Price-amount {
    font-size: 36px !important; /* R9: tester re-verify — PROD is 36px (was 28px) */
    font-weight: 700 !important;
}

/* ----------------------------------------------------------------------------
   i13 (tester re-verify): the article comment form looked "completely
   different" — the "Post Comment" submit rendered grey (unstyled) vs PROD's
   orange, and the heading was larger. Style the submit like the rest of the
   site's buttons and match the PROD heading size.
   ---------------------------------------------------------------------------- */
#commentform input[type="submit"],
.comment-form input[type="submit"],
#respond input[type="submit"],
.comment-respond .form-submit input {
    background: #ea5b0c !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px #ea5b0c !important;
    padding: 10px 24px !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease;
}
#commentform input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
#respond input[type="submit"]:hover,
.comment-respond .form-submit input:hover {
    background: #ffffff !important;
    color: #ea5b0c !important;
    text-decoration: underline !important;
}
.comment-respond .comment-reply-title,
#comments .comments-title {
    font-size: 18px !important;
}
/* R15 (proactive, sweep finding): PROD's comment list shows just the author
   name + date — no gravatar, no "says:". Hide both so the list matches PROD
   side-by-side. */
.chem-comments__list .comment-author .avatar,
.chem-comments__list .comment-author .says {
    display: none !important;
}
/* R9 (tester): rebuild the comment form to match PROD/Avada layout — orange
   heading, bordered rounded inputs, Name + Email side-by-side, comment first. */
.comment-respond .comment-reply-title {
    color: #ea5b0c !important;
    font-weight: 700 !important;
    text-transform: none !important;
}
#commentform p {
    margin-bottom: 16px;
}
/* R10: logged-in-as line above textarea — keep the Log out hyperlink visible. */
.comment-form .logged-in-as,
#commentform .logged-in-as {
    margin-bottom: 16px;
}
.comment-form .logged-in-as a,
#commentform .logged-in-as a {
    color: #ea5b0c !important;
    text-decoration: underline !important;
}
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
    width: 100%;
    border: 1px solid #9ea0a4 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    background: #ffffff !important;
    box-sizing: border-box;
}
#commentform .comment-form-author,
#commentform .comment-form-email {
    float: left;
    width: 48%;
}
#commentform .comment-form-author {
    margin-right: 4%;
}
#commentform .comment-form-url,
#commentform .form-submit {
    clear: both;
}
@media (max-width: 600px) {
    #commentform .comment-form-author,
    #commentform .comment-form-email {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

/* ----------------------------------------------------------------------------
   d12 (tester re-verify): the restored "Related products" (up-sells) heading
   rendered at 36px orange; PROD is 16px bold black, left-aligned. Match PROD.
   ---------------------------------------------------------------------------- */
.single-product .up-sells > h2,
.single-product .up-sells > h3,
.single-product .upsells > h2,
.single-product .upsells > h3,
.single-product .related.products > h2,
.single-product .related.products > h3 {
    font-size: 16px !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-align: left !important;
}
/* R14: real-mouse hover on PROD shows a FULL inversion (orange bg, white text,
   orange border) WITH underline — earlier stylesheet-scan measurements were
   wrong. Match PROD. */
.chem-blog-sidebar .tagcloud a:hover,
.chem-blog-sidebar .widget_tag_cloud a:hover {
    background: #ea5b0c !important;
    color: #ffffff !important;
    border-color: #ea5b0c !important;
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------
   l3 — Footer: large faded watermark logo in the grey footer columns area.
   PROD renders logo_znak_wodny_3.png on .fusion-footer-widget-area at
   calc(100% - 20px) / -280px, no-repeat. Reproduce on .chem-footer-columns-area
   (background-image only, so the existing grey bg-color is preserved).
   ---------------------------------------------------------------------------- */
.chem-footer-columns-area {
    background-image: url("/wp-content/uploads/logo_znak_wodny_3.png") !important;
    background-position: calc(100% - 20px) -280px !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
}

/* ----------------------------------------------------------------------------
   a3 — "Our offer" megamenu hover (match production):
   · orange titles (.chem-megamenu__title): NO colour change on hover (stay
     orange; dev turned them white).
   · white item links: orange RECTANGLE background on hover with white text
     (dev only changed the text colour to orange).
   ---------------------------------------------------------------------------- */
.chem-megamenu__title:hover {
    color: #ea5b0c !important;
    text-decoration: underline !important; /* tester: PROD underlines on hover */
}
.chem-megamenu__item a:hover {
    background: #ea5b0c !important;
    color: #ffffff !important;
    text-decoration: underline !important; /* tester: PROD underlines on hover */
}
.chem-megamenu__item a:hover i {
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   d4 — Product quantity +/- box: shrink to the Add to basket button height
   (was 57px vs 38px). Match height on the qty buttons and input.
   ---------------------------------------------------------------------------- */
.single-product .summary .quantity .chem-qty-btn,
.single-product .summary .quantity input.qty {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.single-product .summary .quantity .chem-qty-btn {
    line-height: 36px !important;
}

/* ----------------------------------------------------------------------------
   d9 — Product description: "Learn more" buttons in the 3-proposal 1/3 columns
   were left-aligned; center them (e.g. PureNic).
   ---------------------------------------------------------------------------- */
.single-product .woocommerce-Tabs-panel--description .chem-col .chem-button {
    display: block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------------------------------------------------------------------------
   i10 — Article featured image was cropped to 300px (max-height + overflow:hidden
   + object-fit:cover). Show the whole image at its natural aspect ratio.
   ---------------------------------------------------------------------------- */
.chem-single-post__featured-image {
    max-height: none !important;
    overflow: visible !important;
}
.chem-single-post__featured-image img {
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ----------------------------------------------------------------------------
   c3 — Category product tiles had ~168px of dead space under the title.
   main.css forces min-height:480px ("mirror PROD") but on the B2B GUEST view
   the price + add-to-cart + "log in to see prices" elements are display:none,
   so guest content (image + title) ends at ~312px and the 480px floor leaves
   a big empty gap. PROD guest tiles fill the card because PROD shows a visible
   price/CTA region; we don't. Client asked to shrink the box. Lower the floor
   so tiles are compact for guests; the CSS-grid row still equalises tile
   heights, and logged-in tiles (price+button) grow naturally above the floor.
   Loaded after main.css → same-specificity selector wins by source order.
   ---------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
    min-height: 360px;
}

/* ----------------------------------------------------------------------------
   Our offer — directory page ([chem_offer_directory]): grouped sections, each a
   linked category heading + that category's curated tiles.
   ---------------------------------------------------------------------------- */
.chem-offer-directory .chem-offer-group {
    margin: 0 0 44px;
}
.chem-offer-group__title {
    font-size: 24px;
    font-weight: 700;
    color: #ea5b0c;
    margin: 0 0 18px;
}
.chem-offer-group__title a {
    color: inherit !important;
    text-decoration: none !important;
}
.chem-offer-group__title a:hover {
    text-decoration: underline !important;
}
.chem-offer-intro {
    margin-bottom: 32px;
}

/* ----------------------------------------------------------------------------
   c7 — Curated category landing tiles (rendered by inc/category-tiles.php on
   landing categories: raw-materials-for-vape, chemical-raw-materials,
   retail-vape-products, services). Mirrors PROD: 3-col bordered cards, square
   image, orange centred title, image dims on hover.
   ---------------------------------------------------------------------------- */
.chem-cat-tiles {
    list-style: none !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.chem-cat-tiles .chem-cat-tile {
    margin: 0 !important;
    list-style: none !important;
}
.chem-cat-tile__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 20px;
    border: 1px solid #c6c6c6;
    border-radius: 2px;
    text-decoration: none !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.chem-cat-tile__link:hover {
    border-color: #ea5b0c;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
.chem-cat-tile__img {
    display: block;
    width: 100%;
}
.chem-cat-tile__img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.chem-cat-tile__link:hover .chem-cat-tile__img img {
    opacity: 0.6;
}
.chem-cat-tile__title {
    display: block;
    margin-top: 14px;
    color: #ea5b0c;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
}
@media (max-width: 991px) {
    .chem-cat-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .chem-cat-tiles { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   R9-9 — Mobile menu: separate caret toggle so the parent link navigates to its
   category (tester: tapping a category only expanded it). JS injects
   .chem-mobile-submenu-toggle after each parent <a>; this styles it as a
   right-aligned caret and keeps the centred link text clear of it.
   ---------------------------------------------------------------------------- */
.chem-mobile-nav-holder .menu-item-has-children {
    position: relative;
}
.chem-mobile-nav-holder .menu-item-has-children > a {
    padding-left: 46px !important;
    padding-right: 46px !important;
}
.chem-mobile-nav-holder .chem-mobile-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dadada;
    /* PDF mobile 27.07: bylo #fff na bialym tle = "strzalki niewidoczne" */
    color: #1d1d1b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.chem-mobile-nav-holder .chem-mobile-submenu-toggle::before {
    content: "\f107"; /* fa angle-down */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.chem-mobile-nav-holder .menu-item-has-children.chem-submenu-open > .chem-mobile-submenu-toggle::before {
    transform: rotate(180deg);
}
/* nested sub-menu parents have shorter rows (~38px) */
.chem-mobile-nav-holder ul.sub-menu .chem-mobile-submenu-toggle {
    height: 38px;
    color: #1d1d1b;
}

/* ----------------------------------------------------------------------------
   j1 — about-us: the Cristiano Batista hexagon photo (in the PT | photo | UK
   contact row) migrated at its natural 285px and rendered larger than the
   ~130px text columns beside it, so it protruded below them ("rozjechany").
   PROD constrains it to 200px. Match that. Scoped to the image by filename
   (stable across local/marcetino/prod), so it can't affect other imageframes.
   ---------------------------------------------------------------------------- */
.chem-legacy-imageframe img[src*="Cristiano-Batista"] {
    width: 200px !important;
    height: auto !important;
}

/* ----------------------------------------------------------------------------
   d10 — Migrated rich-content comparison tables (e.g. PureNic "Nicotine
   specification") live inside the product Description tab and carry per-cell
   inline styles (orange #eb6014 row-label column, grey #f3f3f3 header cells,
   1px gridlines via border="1"). The generic WC tab-table reset in main.css
   ( .woocommerce-Tabs-panel table tbody td/th { background:transparent;
   border:none none solid; padding:18px 20px } !important ) stripped all of
   that, leaving a flat borderless table. Restore the production look by
   re-enabling gridlines + the inline backgrounds, scoped to migrated content
   tables only (they carry the border="1" attribute; WC's own .shop_attributes
   tables do not, so they keep the reset).
   ---------------------------------------------------------------------------- */
.single-product .woocommerce-Tabs-panel table[border] tbody td,
.single-product .woocommerce-Tabs-panel table[border] tbody th {
    border: 1px solid #e2e2e2 !important;
    padding: 5px !important;
}
.single-product .woocommerce-Tabs-panel table[border] tbody td[style*="#f3f3f3"] {
    background-color: #f3f3f3 !important;
}
.single-product .woocommerce-Tabs-panel table[border] tbody td[style*="#eb6014"] {
    background-color: #eb6014 !important;
}

/* ----------------------------------------------------------------------------
   i12 — On single posts, make the sidebar (tags + categories) sticky so it
   stays beside the article while scrolling. Desktop only (mobile stacks).
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
    body.single .chem-blog-sidebar {
        position: sticky !important;
        top: 120px !important;
        align-self: flex-start !important;
    }
}

/* ============================================================================
   ROUND 11 — tester re-verify (PDF 23-06). Only the genuinely-remaining deltas
   (carets that survived the 18-06 deploy). Items #2/#3/#6/#9/#10 were verified
   already-correct on marcetino and are NOT re-touched here.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   #4 — Knowledge Base cards: PROD centres the card copy under the title and ends
   each card with an orange "Read more" link. The image-top template now emits a
   .chem-card__readmore anchor; centre the whole card text and style the link.
   (Image-on-top + hover zoom already shipped in A3.)
   ---------------------------------------------------------------------------- */
.chem-card--image-top {
    text-align: center;
}
.chem-card--image-top .chem-card__content {
    text-align: center;
}
.chem-card__readmore {
    display: inline-block;
    margin-top: 14px;
    color: #ea5b0c !important;
    font-weight: 700; /* R12 (PDF 28-06): PROD is 700 (was 600) */
    text-decoration: underline !important; /* R12: PROD underlines "Read more" */
}
.chem-card__readmore:hover {
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------
   #5 — Blog category tree: PROD shows a small orange arrow bullet before every
   category link (Avada awb-icons glyph). Dev had none ("brakuje strzałek").
   Reproduce with a Font Awesome chevron. Also hide the default "No category"
   (Uncategorized, term ID 1) item — PROD does not list it.
   ---------------------------------------------------------------------------- */
.chem-blog-sidebar .widget_categories li.cat-item > a::before {
    content: "\f105"; /* fa angle-right */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: #ea5b0c;
    font-size: 12px;
    margin-right: 7px;
    display: inline-block;
}
.chem-blog-sidebar .widget_categories li.cat-item-1 {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   #11 — Mobile (≤600px) homepage "achievements" band: the four 1/4 columns
   wrapped 2×2 but each cell sized to its own label length (1–3 lines), so the
   cells had unequal heights ("rozjechane"). PROD shows four EQUAL cells. Give
   every cell the same min-height (≥ the tallest natural cell, verified live at
   300px on marcetino) and centre the content vertically, so all four match. The
   white cross-separators from m3 still apply (nth-child). Keep the existing flex
   wrap widths — switching the row to grid collapsed them.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .chem-section[style*="background-color"] .chem-col--1-4 {
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================================================
   ROUND 12 — tester re-verify (PDF 28-06, after the 26-06 R11 deploy). Only the
   genuinely-remaining carets. Carets #4/#6/#9/#11/#12 were re-verified live on
   marcetino as already-correct (or "leave as-is") and are NOT touched here.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   #2 — Top-nav hover: PROD not only fills the cell orange on hover, it also
   UNDERLINES the link text ("na prod po najechaniu tekst się podkreśla, a na
   devce nie"). Add the underline to the existing hover/open state so "Our offer"
   & co. match PROD. Utility items (cart/search) keep their own treatment.
   ---------------------------------------------------------------------------- */
ul.chem-menu > li:not(.chem-menu-cart):not(.chem-main-menu-search):hover > a,
ul.chem-menu > li.chem-dropdown-open > a,
ul.chem-menu > li.chem-has-megamenu:hover > a {
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------
   #5a — Knowledge Base cards: PROD's cards have NO frame — no border, no shadow,
   transparent background (image on top, text below). Our .chem-card--image-top
   inherited the boxed .chem-card look (grey bg + hover shadow) plus a border.
   Strip the frame so the KB grid matches PROD.
   ---------------------------------------------------------------------------- */
.chem-card--image-top,
.chem-card--image-top:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   #8 — Blog TAG archive heading: main.css hides .chem-blog-page-title for the
   whole blog wrapper (blog index doesn't show it on PROD), but PROD *does* show
   the heading on tag archives ("Blog tag: …"). Re-show it on tag pages only.
   body.tag adds specificity over the plain hide rule.
   ---------------------------------------------------------------------------- */
body.tag .chem-blog-wrapper .chem-blog-page-title,
body.tax-post_tag .chem-blog-wrapper .chem-blog-page-title {
    display: block !important;
    text-align: center;
}
/* R13 (tester PDF 02-07): tag heading had wrong size/colour vs PROD — PROD is
   42px orange (#ea5b0c), dev was 28px grey. Match PROD. (Prefix "Blog tag:" is
   added in archive.php.) */
body.tag .chem-blog-wrapper .chem-blog-page-title,
body.tax-post_tag .chem-blog-wrapper .chem-blog-page-title {
    font-size: 42px !important;
    color: #ea5b0c !important;
    line-height: 1.15 !important;
}

/* ----------------------------------------------------------------------------
   R13 (tester PDF 02-07): homepage service cards H3 rendered 24px on mobile;
   PROD is 19px. Shrink on small screens.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .chem-service-item h3,
    .chem-service-item .chem-service-item__title {
        font-size: 19px !important;
    }
}

/* ----------------------------------------------------------------------------
   #7 — Article "Let's grow…" newsletter: the shortcode in single.php is now
   wrapped in .chem-footer-newsletter (see single.php) so it inherits the footer
   form styling (rectangular button, constrained input) instead of the plugin's
   default rounded/full-width form. Cap + centre the block so the input isn't the
   full article width, matching PROD.
   ---------------------------------------------------------------------------- */
.chem-article-cta__form .chem-footer-newsletter {
    max-width: 520px;
    margin: 0 auto;
}
.chem-article-cta__form .chem-footer-newsletter input[type="email"],
.chem-article-cta__form .chem-footer-newsletter input[type="text"],
.chem-article-cta__form .chem-footer-newsletter input[type="submit"],
.chem-article-cta__form .chem-footer-newsletter button {
    border-radius: 0 !important; /* PROD button is rectangular, not rounded */
}

/* ----------------------------------------------------------------------------
   R12 re-audit — Nicotine Academy (/pl/nicotine-academy-pl/): the 6 blog-article
   cards were plain <a><img> blocks stacking full-width (page ~2x taller than
   PROD). They are now wrapped in .chem-na-cards (page content); lay them out in
   the PROD 3-up grid.
   ---------------------------------------------------------------------------- */
.chem-na-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0;
}
.chem-na-cards a { display: block; }
.chem-na-cards img { width: 100%; height: auto; display: block; }
@media (max-width: 782px) {
    .chem-na-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .chem-na-cards { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   R12 re-audit — Knowledge Base card heading "inne rozmiary": DEV rendered a
   prominent 19px H2 title (larger than the 15px body), while PROD uses a subtle
   bold lead-in (~14px) with 16px body — i.e. the title is NOT larger than the
   copy. Bring the size relationship in line with PROD (title smaller, body up).
   (Structural inline-lead-in kept as-is to avoid regressing the shipped cards.)
   ---------------------------------------------------------------------------- */
/* Specificity: main.css sets `.chem-cards-section .chem-card h2 { font-size:19px
   !important; line-height:32px !important }` (0,2,1) — beat it with 0,3,0 and
   !important on every prop it forces. */
/* R13 (tester "1:1 z prod"): KB cards now render the title as a bold inline
   lead-in INSIDE the copy paragraph (no separate heading), matching PROD.
   PROD sizing: lead-in 14px bold, body 16px; the linked lead-in reads as bold
   text, not a coloured link. */
.chem-card--image-top .chem-card__content,
.chem-card--image-top .chem-card__content p {
    font-size: 16px;
}
.chem-card--image-top .chem-card__leadin {
    font-weight: 700;
    font-size: 14px;
}
.chem-card--image-top .chem-card__leadin a {
    color: inherit;
    text-decoration: none !important; /* PROD lead-in is not underlined; beat the content-link underline */
}
.chem-card--image-top .chem-card__leadin a:hover {
    text-decoration: underline !important;
}
/* R13: match PROD read-more size (14px, was 16px). */
.chem-card--image-top .chem-card__readmore {
    font-size: 14px;
}

/* ----------------------------------------------------------------------------
   R14 (tester PDF 03-07): mobile homepage counters band stuck to the LEFT with
   a ~32px white stripe on the right — the base.css full-bleed (width:100vw +
   negative margins) gets its width clamped back to the parent's width by a
   max-width guard. Re-force the full bleed with max-width included, loaded last.
   ---------------------------------------------------------------------------- */
@media (max-width: 800px) {
    .chem-counters-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* ----------------------------------------------------------------------------
   R14b–R14e — Polityki (all 4 langs: PL 111470, EN 111455, PT 111476,
   ES 111479). Match PROD: H1 42px orange; uniform 16px policy links; icon
   capped at 350px; no PDF "chip" styling. The list header says every item
   applies to all 4 languages.
   ---------------------------------------------------------------------------- */
.page-id-111470 .chem-html-section__content h1,
.page-id-111455 .chem-html-section__content h1,
.page-id-111476 .chem-html-section__content h1,
.page-id-111479 .chem-html-section__content h1 {
    font-size: 42px !important;
    color: #ea5b0c !important;
    margin: 0 0 24px !important;
}
.page-id-111470 .chem-html-section__content a,
.page-id-111455 .chem-html-section__content a,
.page-id-111476 .chem-html-section__content a,
.page-id-111479 .chem-html-section__content a {
    font-size: 16px !important;
}
.page-id-111470 .chem-html-section__content img.chem-image,
.page-id-111455 .chem-html-section__content img.chem-image,
.page-id-111476 .chem-html-section__content img.chem-image,
.page-id-111479 .chem-html-section__content img.chem-image {
    max-width: 350px !important;
    height: auto !important;
}
/* Uniform list pitch: wpautop wraps some policy links in <p> (margin => 46px
   pitch) while others sit on <br> lines (29px). PROD is uniform ~29px. */
.page-id-111470 .chem-html-section__content .chem-row > .chem-col p,
.page-id-111455 .chem-html-section__content .chem-row > .chem-col p,
.page-id-111476 .chem-html-section__content .chem-row > .chem-col p,
.page-id-111479 .chem-html-section__content .chem-row > .chem-col p {
    margin: 0 !important;
}
/* R14d: the REAL pitch culprit — main.css styles PDF links as chips
   (a[href*=".pdf"]: inline-block + 6/14px padding + 3px margins => 41px-tall
   blocks; non-PDF links stay 22px inline). PROD renders the policy list as
   plain links — neutralise the chip styling on the policy pages. */
.page-id-111470 .chem-html-section__content a[href*=".pdf"],
.page-id-111470 .chem-html-section__content a[download],
.page-id-111455 .chem-html-section__content a[href*=".pdf"],
.page-id-111455 .chem-html-section__content a[download],
.page-id-111476 .chem-html-section__content a[href*=".pdf"],
.page-id-111476 .chem-html-section__content a[download],
.page-id-111479 .chem-html-section__content a[href*=".pdf"],
.page-id-111479 .chem-html-section__content a[download] {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    background: transparent !important;
    border: none !important;
}
/* R15 (tester PDF 6-07): the whistleblowing paragraph rendered BOLD on dev
   (PROD is regular). main.css has a "section header" rule written for the
   Sustainable Development page but matching globally:
   `.chem-html-section__content > .chem-section > .chem-row > .chem-col >
   p:first-child { font-weight:700; font-size:24px; color:#ea5b0c }` — on the
   policy pages the size/colour get overridden but the 700 weight survives.
   Counter it on the policy pages (all 4 langs) instead of touching the
   original rule that Sustainable Dev relies on. */
.page-id-111470 .chem-html-section__content > .chem-section > .chem-row > .chem-col > p:first-child,
.page-id-111455 .chem-html-section__content > .chem-section > .chem-row > .chem-col > p:first-child,
.page-id-111476 .chem-html-section__content > .chem-section > .chem-row > .chem-col > p:first-child,
.page-id-111479 .chem-html-section__content > .chem-section > .chem-row > .chem-col > p:first-child {
    font-weight: 400 !important;
    font-size: 16px !important;
    color: inherit !important;
}

/* ----------------------------------------------------------------------------
   R13 (tester PDF 02-07): homepage "Twój sukces to nasz wspólny cel!"
   testimonials section was more spread out than PROD, and the author name sat
   INSIDE the grey quote box (PROD shows it BELOW). Move the grey background +
   padding from the whole blockquote onto its <p> only, so the <cite> author
   lands outside/under the box; and tighten the vertical spacing.
   ---------------------------------------------------------------------------- */
.chem-testimonials-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
.chem-testimonials-section__title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}
blockquote.chem-testimonial {
    background: transparent !important;
    padding: 0 !important;
}
blockquote.chem-testimonial > p {
    background: rgb(240, 240, 240) !important;
    padding: 25px 40px !important;
    margin: 0 !important;
}
blockquote.chem-testimonial > cite {
    margin-top: 15px !important;
}

/* ============================================================================
   R15c (tester PDF 08-07). Every value below was measured against PROD with a
   real browser, not read off a stylesheet.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   a3 — "Our offer" megamenu title: PROD renders 19px, dev 18px. (Hover
   underline already matches PROD since R14 — verified with a real mouse hover.)
   ---------------------------------------------------------------------------- */
.chem-megamenu__title {
    font-size: 19px !important;
}

/* ----------------------------------------------------------------------------
   c/j — "Our offer" landing (all 4 langs). PROD puts this page in the shop
   layout: 288px category sidebar + content column, H1 42px orange, section
   headings 36px. Dev rendered it full-width with no H1 (page.php mistook the
   stale Avada <h1> in the unused post_content for a real one), so the tiles
   ballooned to 325px and the page read as "kompletnie rozjechana".
   page.php now emits .chem-offer-layout + the sidebar; size it here.
   ---------------------------------------------------------------------------- */
.chem-offer-layout .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}
/* Specificity note: main.css already forces 54px through
   `.page-content > article > h1.chem-page-title { ... !important }`, which
   outranks a plain `.chem-offer-layout .chem-page-title`. Mirror its shape. */
.chem-offer-layout .page-content > article > h1.chem-page-title {
    font-size: 42px !important;
    color: #ea5b0c !important;
    text-align: left !important;
    padding-top: 0 !important;
    margin: 0 0 18px !important;
    line-height: 1.15 !important;
}
/* PROD section headings are 36px (dev shipped 24px). */
.chem-offer-directory .chem-offer-group__title {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin: 0 0 24px !important;
}
@media (max-width: 800px) {
    .chem-offer-layout.chem-shop-layout {
        flex-direction: column !important;
    }
    .chem-offer-directory .chem-offer-group__title {
        font-size: 28px !important;
    }
}

/* ----------------------------------------------------------------------------
   i — Knowledge Base cards. Measured on PROD: the whole card sentence is 14px /
   25.2px, with only a short bold lead-in; R13 wrongly assumed "lead-in 14px,
   body 16px", so the text after the bold part rendered 16px — exactly the
   tester's "nagłówek / tekst pod mają inne rozmiary".
   "Read more" on PROD is an INLINE run 5px under the copy. Dev declared
   display:inline-block, but .chem-card is a flex container, which blockifies
   flex items — hence the full-width 320px block. align-self restores the
   shrink-to-fit box without leaving the flex flow.
   ---------------------------------------------------------------------------- */
.chem-card--image-top .chem-card__content,
.chem-card--image-top .chem-card__content p {
    font-size: 14px !important;
    line-height: 25.2px !important;
}
.chem-card--image-top .chem-card__leadin {
    line-height: 25.2px !important;
}
.chem-card--image-top .chem-card__image {
    margin-bottom: 0 !important;
}
.chem-card--image-top .chem-card__readmore {
    align-self: center !important;
    margin-top: 5px !important;
}

/* ----------------------------------------------------------------------------
   m — Mobile homepage counters, PL. R14 forced the band to 100vw, but an
   ancestor still clipped it: the mobile anti-scroll guard sets
   overflow-x:hidden !important on `article`, whose box is inset 16px by
   .page-content's padding. The band was full-width and painted 16..374.
   Keep the guard on main/.site-main (full-bleed, so no horizontal scroll can
   escape) and release only the inner article + builder.
   ---------------------------------------------------------------------------- */
@media (max-width: 800px) {
    main .page-content > article,
    main .page-content > article > .chem-page-builder,
    /* R21: the EN homepage renders through .entry-content (not the ACF
       builder) — its overflow guard clipped the full-bleed video strip and
       the STC banner to the 358px article box (tester: "przycięty"). */
    main .page-content > article > .entry-content {
        overflow-x: visible !important;
    }
}

/* ----------------------------------------------------------------------------
   m — Mobile homepage H3s: PROD 19px, dev 24px. R13 added this fix but aimed at
   ".chem-service-item h3" (descendant); the class sits ON the h3 itself, so the
   rule never matched a single element.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
    h3.chem-service-item {
        font-size: 19px !important;
    }
}

/* ----------------------------------------------------------------------------
   m — Mobile testimonials: PROD's heading is 22px/26.4px (2 lines); dev shipped
   the 36px desktop size, wrapping to 3 lines (tester's screenshot).
   The slider also swaps one quote at a time and each quote has its own height
   (desktop 118–143px, tablet 143–169px, mobile 245–298px), so the content below
   jumps on every rotation. Pin the track to the tallest measured slide.
   ---------------------------------------------------------------------------- */
.chem-testimonials {
    min-height: 150px;
}
@media (max-width: 800px) {
    .chem-testimonials {
        min-height: 175px;
    }
}
@media (max-width: 600px) {
    .chem-testimonials-section__title {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }
    .chem-testimonials {
        min-height: 300px;
    }
}

/* ============================================================================
   R16a (tester PDF 09-07). Mobilny koszyk.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   e/m — Mobile cart. WooCommerce's woocommerce-smallscreen.css converts the cart
   table into "label: value" rows (`td::before { content: attr(data-title) ": " }`,
   right-aligned, one border per row). PROD instead renders one CARD per line
   item: image on top, orange linked title, attributes, price, centred stepper,
   orange subtotal, and the remove "x" pinned top-right.
   The thumbnail and remove cells carry no data-title, so smallscreen printed a
   bare ":" for them — visible in the tester's screenshot.
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* Kill the label/value scaffolding wholesale. */
    .woocommerce-cart-form table.shop_table_responsive tr td::before,
    .woocommerce-cart-form table.shop_table_responsive tr td[data-title]::before {
        content: none !important;
    }

    .woocommerce-cart-form table.shop_table_responsive,
    .woocommerce-cart-form table.shop_table_responsive tbody {
        display: block !important;
        border: 0 !important;
        width: 100% !important;
    }
    .woocommerce-cart-form table.shop_table_responsive thead {
        display: none !important;
    }

    /* One bordered card per cart line. */
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item {
        display: block !important;
        position: relative !important;
        border: 1px solid #e0e0e0 !important;
        margin: 0 0 24px !important;
        padding: 22px 16px 24px !important;
    }
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        padding: 4px 0 !important;
        text-align: center !important;
    }

    /* Image on top, centred, capped like PROD. */
    .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
        display: inline-block !important;
        width: 90px !important;
        height: auto !important;
        margin: 0 auto 10px !important;
    }

    /* Orange, underlined product link (PROD). */
    .woocommerce-cart-form tr.cart_item td.product-name > a {
        color: #ea5b0c !important;
        text-decoration: underline !important;
        font-weight: 400 !important;
    }

    /* Attributes: "Capacity: 1 kg" on one centred line, value in bold. */
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation {
        margin: 10px 0 0 !important;
        text-align: center !important;
    }
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dt,
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd,
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd p {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dt {
        font-weight: 400 !important;
    }
    /* The value lives in dd > p, so bold the paragraph too (PROD bolds it). */
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd,
    .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd p {
        font-weight: 700 !important;
    }

    .woocommerce-cart-form tr.cart_item td.product-price {
        margin-top: 12px !important;
    }
    /* PROD's line subtotal is orange. */
    .woocommerce-cart-form tr.cart_item td.product-subtotal,
    .woocommerce-cart-form tr.cart_item td.product-subtotal .amount {
        color: #ea5b0c !important;
    }

    /* Centre the +/- stepper. */
    .woocommerce-cart-form tr.cart_item td.product-quantity .quantity {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 10px auto !important;
        float: none !important;
    }

    /* Remove "x" pinned top-right instead of a trailing row.
       Specificity note: the generic
       `.woocommerce-cart-form table.shop_table_responsive tr.cart_item td`
       rule above scores (0,3,3) and would otherwise keep width:100% and
       text-align:center here — match its shape so this wins. */
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove {
        position: absolute !important;
        top: 6px !important;
        right: 10px !important;
        left: auto !important;
        width: auto !important;
        padding: 0 !important;
        text-align: right !important;
    }
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove a.remove {
        color: #ea5b0c !important;
        font-size: 22px !important;
        line-height: 1 !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
    }

    /* Basket totals: smallscreen leaves th/td as a broken 2-cell grid
       ("Subtotal:170,00" with no gap). Make each row a clean label/value line. */
    .cart_totals table.shop_table_responsive tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding: 10px 0 !important;
    }
    .cart_totals table.shop_table_responsive th,
    .cart_totals table.shop_table_responsive td {
        display: block !important;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }
    .cart_totals table.shop_table_responsive th {
        text-align: left !important;
    }
    .cart_totals table.shop_table_responsive td::before {
        content: none !important;
    }
}

/* ----------------------------------------------------------------------------
   R17 — CSR pages (all 4 langs): the section separators render as PROD's
   subtle 1px shadow line, not the theme's default 3px orange bar. During the
   Fusion→HTML conversion every separator collapsed to a bare
   <hr class="chem-separator">, losing Avada's sep-shadow/sep-solid type, so
   base.css paints them all orange. On CSR every separator is a sep-shadow on
   PROD (verified: 4 shadow, 0 orange), and the tester flagged the doubled
   orange line under the awards gallery. Scope the subtle style to the CSR
   page-ids only — other pages legitimately keep orange separators.
   EN 61713, PL 63771, ES 71938, PT 71936.
   ---------------------------------------------------------------------------- */
body.page-id-61713 hr.chem-separator,
body.page-id-63771 hr.chem-separator,
body.page-id-71938 hr.chem-separator,
body.page-id-71936 hr.chem-separator {
    /* R35 (PDF 15-07 p.9 "linia separująca NADAL inna"): PROD sep-shadow is
       a 20px radial-gradient fade, not a solid 1px line (measured live). */
    border: none !important;
    border-top: 0 !important;
    height: 20px !important;
    margin: 25px 0 !important;
    background: radial-gradient(ellipse at 50% -50%, #e2e2e2 0px, rgba(255, 255, 255, 0) 20px) !important;
}

/* ----------------------------------------------------------------------------
   R18 — PL homepage counters, mobile. PROD renders the band as a 2-column grid
   at phone width (measured at 390px: items at x=16 and x=188, 3 rows). The
   theme dropped to a single column under 500px (main.css !important), which is
   the tall single-column stack the tester flagged as "kompletnie rozjechana".
   Match PROD: keep 2 columns all the way down. (Content side: the PL repeater
   carried 8 counters vs PROD's 6 — trimmed to 6 on marcetino, backup in
   /tmp/chemnovatic-bak-r16/homepage-pl-counters.json.)
   ---------------------------------------------------------------------------- */
@media (max-width: 500px) {
    .chem-counters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
    }
    .chem-counter-item__value {
        font-size: 30px !important;
    }
    /* R21 (tester PDF 13-07 item 3): PROD PL mobile shows 2x4 with thin
       separator lines between cells. */
    .chem-counters-grid .chem-counter-item {
        padding: 18px 10px !important;
    }
    .chem-counters-grid .chem-counter-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.45) !important;
    }
    .chem-counters-grid .chem-counter-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
    }
}
/* R21: PROD carries 8 counters on the PL homepage but shows the last two
   ("Potwierdzona jakość", "Obsługa klienta") on MOBILE only — desktop shows 6
   (2 rows: 4 + 2). The repeater holds all 8 again (R18's trim reverted);
   desktop hides the tail pair like PROD. */
@media (min-width: 501px) {
    .chem-counters-grid .chem-counter-item:nth-child(n+7) {
        display: none !important;
    }
}

/* ============================================================================
   R18b — PureNic / NicSalt product-page sections (tester PDF 09-07 items 14/15/17)
   ============================================================================ */

/* --- PureNic "bottle" section -------------------------------------------------
   PROD composition: grey splash backdrop (section bg, MicrosoftTeams-image-37),
   H2 "PureNic 99+ (USP/EP)" with a short orange underline, icon list occupying
   the LEFT ~55%, and the bottle image (purenic-splash) on the RIGHT, vertically
   centred. The conversion flattened it: bare-text heading (rewrapped in <h2>
   on marcetino for EN/PT; ES carries its own inline 34px <b>), full-width icon
   rows, and the bottle pushed below as a 780px block.
   Scope via the section's own inline background url — page-agnostic, works for
   every translation that shares the graphic. -------------------------------- */
.chem-section[style*="MicrosoftTeams-image-37"] > .chem-row > .chem-col--1-1 {
    position: relative;
}
.chem-section[style*="MicrosoftTeams-image-37"] h2.chem-purenic-head {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 6px !important;
}
/* PROD's orange underline is short (heading-width), not full-column. */
.chem-section[style*="MicrosoftTeams-image-37"] hr.chem-separator {
    max-width: 350px;
    margin: 0 0 28px;
}
/* Icon rows: keep to the left so the bottle has the right half.
   R21: the theme centres .chem-row--inner with an auto margin, which pushed
   the capped rows to the middle (icons started 26% in; PROD 5%). Pin left. */
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner {
    max-width: 55%;
    margin-left: 0 !important;
    margin-right: auto !important;
}
/* Each icon row is [12% icon | 1/3 text | 1/3 EMPTY]: the trailing empty
   column starved the text into one-word-per-line wraps. Drop it (in the 4th
   row the last child is the bottle 1-1 column, so :last-child skips it) and
   let the text column take the freed space. */
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner > .chem-col--1-3:last-child {
    display: none;
}
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner > .chem-col--1-3 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}
/* The bottle COLUMN — not its row: it shares the row with the 4th icon item,
   so the row must stay in flow. Absolute right, vertically centred; the
   containing block is the outer position:relative column. */
/* R21 tune vs PROD geometry: bottle centre at ~72% of the card (dev was 78%),
   image 425px — nudge left and widen. */
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner > .chem-col:has(img[src*="purenic-splash"]) {
    position: absolute;
    width: 52%;
    max-width: 52%;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    height: auto !important;
}
.chem-section[style*="MicrosoftTeams-image-37"] img[src*="purenic-splash"] {
    max-width: 425px !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}
@media (max-width: 800px) {
    /* Mobile: stack like the tester's PROD mobile shots — list, then bottle. */
    .chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner {
        max-width: 100%;
    }
    .chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner > .chem-col:has(img[src*="purenic-splash"]) {
        position: static;
        width: 100%;
        max-width: 100%;
        transform: none;
    }
}

/* --- "We deliver what we promise" graphic ------------------------------------
   On PROD it's a single image squeezed to ~316px by Avada's inline
   --awb-margin-right:400px, which the conversion dropped — dev rendered it at
   full column width (779px), 2.5x PROD. Cap it at PROD's rendered size. */
@media (min-width: 801px) {
    img[src*="MicrosoftTeams-image-39"] {
        max-width: 316px !important;
        height: auto !important;
    }
}

/* --- NicSalt: image wrapped in a link painted as a button --------------------
   The tabs-panel CTA rule styles bare links as orange buttons; a link whose
   content is an IMAGE (custom-label collage on NicSalt) got the orange slab
   behind the transparent PNG. An image-link is not a CTA — strip the button
   skin and centre it in its column like PROD. */
/* Must out-rank the CTA rule's `a[href^="mailto:"]:not(blockquote a)` shape
   ((0,3,3)) — mirror it and add :has. */
.single-product .woocommerce-Tabs-panel a.chem-button:has(img),
.single-product .woocommerce-Tabs-panel a[href^="mailto:"]:not(blockquote a):has(img),
.single-product .woocommerce-Tabs-panel a[href^="tel:"]:not(blockquote a):has(img),
.single-product .woocommerce-Tabs-panel a:has(> img),
.single-product .woocommerce-Tabs-panel a:has(> picture) {
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* ----------------------------------------------------------------------------
   R18 — Blog sidebar categories: PROD underlines the category link on hover
   and renders it at 16px; dev had 14px and no underline (measured with a real
   hover on /blog/ — this is the caret I mis-attributed to the tagcloud in R15).
   ---------------------------------------------------------------------------- */
.chem-blog-sidebar .widget_categories a {
    font-size: 16px !important;
}
.chem-blog-sidebar .widget_categories a:hover {
    text-decoration: underline !important;
}

/* ============================================================================
   R19 — header (tester PDF 09-07 items 1/2/13)
   ============================================================================ */

/* --- Sticky-bar hexagon (item 13) ---------------------------------------------
   PROD's first menu item (li.home-special-icon) renders Avada's custom icon
   font glyph \e901 ("chemnovatic-icons", shipped in shared uploads) — hidden
   at rest (visibility, so the 73px slot is kept) and revealed when the header
   turns sticky. Dev had the li but an empty <a>, i.e. a blank gap always. */
@font-face {
    font-family: 'chemnovatic-icons';
    src: url('/wp-content/uploads/fusion-icons/chemnovatic-icons-v1.0/fonts/chemnovatic-icons.woff?l2ijih') format('woff'),
         url('/wp-content/uploads/fusion-icons/chemnovatic-icons-v1.0/fonts/chemnovatic-icons.ttf?l2ijih') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/* NOT on a::before — the theme uses the anchors' ::before as the 2px hover
   underline bar (scaleX(0), height 2px), which crushes any glyph put there.
   The LI's own ::before is free; it joins the li's flex row and centres. */
ul.chem-menu > li.home-special-icon::before {
    content: "\e901";
    font-family: 'chemnovatic-icons' !important;
    font-size: 36px;
    line-height: 1;
    color: #ffffff;
    align-self: center;
    visibility: hidden;
}
/* main.css force-hides the whole li with `visibility:hidden !important`
   (the at-rest state) — the sticky reveal must out-!important it. */
.chem-is-sticky ul.chem-menu > li.home-special-icon::before {
    visibility: visible !important;
}

/* --- Mobile logo (item 2): hexagon at PROD's 32x28, not the 17px wordmark. --- */
.chem-logo .chem-logo-mobile {
    display: none;
}
@media (max-width: 800px) {
    /* a.chem-logo-link carries max-width:40%, which crushed the 32px logo to
       13px inside the 32px flex slot — free it on mobile. */
    .chem-logo .chem-logo-link {
        max-width: none !important;
        width: auto !important;
    }
    .chem-logo .chem-logo-1x,
    .chem-logo picture:has(> .chem-logo-1x) {
        display: none !important;
    }
    .chem-logo .chem-logo-mobile,
    .chem-logo picture:has(> .chem-logo-mobile) {
        display: inline-block !important;
        width: 32px !important;
        height: auto !important;
    }
    .chem-logo picture:has(> .chem-logo-mobile) .chem-logo-mobile {
        width: 32px !important;
    }
}

/* ----------------------------------------------------------------------------
   R19 — Blog list (tester PDF 09-07 item 19). Measured vs PROD:
   · PROD shows no excerpt under the title — hide .chem-blog-card__excerpt
   · title: PROD 20px/700 (dev 18px/600 via a later override of main.css 16px)
   · cards: PROD ~433-473px vs dev 382px — dev's 30px gap + narrower content
     column; tighten the gap to 20px so the cards grow.
   ---------------------------------------------------------------------------- */
.chem-blog-card__excerpt {
    display: none !important;
}
.chem-blog-card__title,
.chem-blog-card__title a {
    font-size: 20px !important;
    font-weight: 700 !important;
}
.chem-blog-grid {
    gap: 24px 20px !important;
}
/* PROD's blog canvas is wider: content 966px + sidebar 331px (dev had
   817/293 under the 1200px site cap). Widen the wrapper so images/cards
   reach PROD size (~470px vs 382px). Desktop only. */
@media (min-width: 1200px) {
    /* R35: PROD blog spans the FULL viewport (main: no max-width,
       padding 60px 30px; cards area starts x=40, sidebar 331px at the
       right edge — measured live 2026-07-16). */
    .site-main > .chem-blog-wrapper,
    .chem-blog-wrapper {
        max-width: none !important;
    }
    .chem-blog-wrapper > .chem-blog-content {
        margin-left: 10px;
    }
    .chem-blog-sidebar {
        flex: 0 0 331px !important;
        width: 331px !important;
    }
}

/* R35: Tags widget — PROD renders bordered chips (1px #e2e2e2, inline). */
.chem-blog-sidebar .widget_tag_cloud a {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e2e2e2 !important;
    padding: 0 10px !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 14.4px !important;
    line-height: 2 !important;
    color: #ea5b0c !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}
.chem-blog-sidebar .widget_tag_cloud a:hover {
    color: #fff !important;
    background: #ea5b0c !important;
    border-color: #ea5b0c !important;
}

/* R35 (PDF 15-07 p.6): Media Pack icon rows — PROD shrinks the icon column
   to its content (~48px) so the text column starts right after the icon.
   Scoped to the hexagon icon images used only on Media Pack pages. */
.chem-row > .chem-col--1-4:has(img[src*="mediapack_ico"]) {
    flex: 0 0 48px !important;
    max-width: 48px !important;
    /* padding-left = standardowy gutter kolumn (2% wiersza): ikona zaczyna sie
       w osi tekstu/naglowka jak na PROD, a nie 23px w lewo od contentu;
       ikona 30px z max-width:none miesci sie, lekko wchodzac w 18px przerwe */
    padding: 0 0 0 2% !important;
}
/* PROD: ikona w osi PIERWSZEJ linii tekstu (rzad center rozjezdzal pion,
   ikona aparatu ladowala na srodku wysokosci galerii) */
.chem-row:has(> .chem-col--1-4 > picture img[src*="mediapack_ico"]),
.chem-row:has(> .chem-col--1-4 img[src*="mediapack_ico"]) {
    align-items: flex-start !important;
}
/* PROD renders the hexagon icons at 30x34 (48x54 natural, scaled) */
.chem-col--1-4 img[src*="mediapack_ico"] {
    width: 30px !important;
    height: auto !important;
    max-width: none !important;
}
.chem-row > .chem-col--1-4:has(img[src*="mediapack_ico"]) + .chem-col--3-4 {
    flex: 1 1 auto !important;
    max-width: none !important;
}

/* R35 (PDF 15-07 p.8 "obrazki za blisko"): PROD Avada masked imageframes
   (corner-bracket mask) render with 24px horizontal insets inside their
   column, and the text column next to an image column starts 44px in —
   total 68px image→text gap (measured live on zrownowazony-rozwoj PL).
   Desktop only; columns stack at ≤800px. */
@media (min-width: 801px) {
    .chem-legacy-image-element:has(> .has-mask) {
        padding: 0 24px;
        box-sizing: border-box;
    }
    .chem-legacy-layout-column:has(.chem-legacy-image-element) + .chem-legacy-layout-column > .chem-legacy-column-wrapper {
        padding-left: 44px;
        box-sizing: border-box;
    }
}

/* R35: mobile menu panel — PROD is full-viewport-width with 42px rows and
   no separators between items (measured live 390px). */
@media (max-width: 800px) {
    .chem-mobile-nav-holder {
        width: 100vw !important;
        margin: 0 calc(50% - 50vw) !important;
    }
    body .chem-mobile-nav-holder ul li a,
    body.chem-mobile-menu-design-modern .chem-mobile-nav-holder li a {
        font-size: 14px !important;
        padding: 11px 20px !important;
        line-height: 20px !important;
        border-bottom: none !important;
    }
}

/* ============================================================================
   R19 — homepage mobile (tester PDF 09-07 items 3/4/5/9)
   ============================================================================ */

/* Item 3: PROD mobile hides the 600px PureNic video hero and shows a thin
   full-width Chemnovatic-Mainpage.mp4 strip (measured 406x127 at y=70). The
   strip markup now precedes the hero in the EN homepage content; exactly one
   of the two renders per breakpoint. */
.chem-video-strip {
    display: none;
}
@media (max-width: 800px) {
    .chem-video-hero {
        display: none !important;
    }
    .chem-video-strip {
        display: block;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .chem-video-strip video {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* Item 4: homepage H1 — PROD mobile renders 25px; dev kept the 42px desktop
   size, overflowing with longer titles (EN "Pure Liquid Nicotine
   Manufacturer" grew a horizontal scrollbar in the tester's shot). */
@media (max-width: 600px) {
    body.home h1,
    body.home .chem-page-builder h1,
    body.home .entry-content h1 {
        font-size: 25px !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word;
    }
}

/* Item 5: PROD mobile shows the 360° spokes as a plain overflow row — no
   carousel chrome. Hide the dev slider's arrows (the track keeps native
   touch scroll). */
@media (max-width: 800px) {
    .chem-360-slider__container [class*="arrow"],
    .chem-360-slider__container [class*="prev"],
    .chem-360-slider__container [class*="next"],
    .chem-360-slider__container button {
        display: none !important;
    }
}

/* Item 9: STC banner — the flat STC_supply.jpg must render whole (PROD shows
   the entire graphic full-width). Dev's full-bleed pull left the element at
   x=36 with the left edge clipped. Force a clean full-bleed contain. */
@media (max-width: 800px) {
    /* R21: full-bleed belongs on the SECTION (one level, one pull) — the
       previous vw pull on the <a> stacked with the section's own offset and
       shifted the banner 16px off-screen. */
    .chem-section:has(img[src*="STC_supply"]) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .chem-section a:has(img[src*="STC_supply"]),
    .chem-section a:has(picture img[src*="STC_supply"]) {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .chem-section picture:has(img[src*="STC_supply"]),
    .chem-section img[src*="STC_supply"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   R19 — registration consents, mobile (tester PDF 09-07 item 12). PROD puts
   the checkbox INLINE at the left of the consent text (text wraps beside it);
   dev rendered the box centred on its own line above the text
   ("rozjechane/słabo czytelne boksy zgód"). Flex the label row.
   ---------------------------------------------------------------------------- */
/* R21: the R19 flex approach broke down — the label's content is a MIX of
   text nodes and inline anchors, and a flex container turns EACH of them into
   a separate flex item, crushing the copy into one-word columns (tester:
   "Teraz jest jeszcze gorzej ;p"). Classic block + absolutely-positioned box
   instead; PROD reference: box at the left, small left-aligned copy wrapping
   beside it. */
.woocommerce form .policies-reg-checkbox label.checkbox {
    display: block !important;
    position: relative !important;
    padding-left: 28px !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
/* `#customer_login ... input { width:100% !important }` carries an ID, so the
   override must too — a 216px-wide checkbox paints its glyph mid-text. */
.woocommerce form .policies-reg-checkbox label.checkbox input[type="checkbox"],
.woocommerce-account #customer_login .policies-reg-checkbox label.checkbox input[type="checkbox"] {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
}

/* ----------------------------------------------------------------------------
   R20 — ESG strategy (client: "obrazki nie powinny się dotykać"). The five
   coloured strategy bands are IMAGES (ESG_baner1-5_*.png); PROD separates
   them with a 10px gap, dev stacked them flush. Covers every language variant
   via the shared filename stem.
   ---------------------------------------------------------------------------- */
img[src*="ESG_baner"] {
    display: block;
    margin-bottom: 10px !important;
}

/* ----------------------------------------------------------------------------
   R20 — duplicate/empty H1s (pre-existing, found in the R15 site sweep; PROD
   comparison per page):
   · about-us / o-nas: the conversion left an EMPTY
     <h1 class="chem-legacy-title-heading" style="margin:0;"></h1> before the
     real heading — PROD has one H1. Hide empty legacy headings globally.
   · glikol-i-gliceryna (115520): content carries its own fusion H1 AND a bare
     duplicate <h1> right after it (same text, different case). Keep the
     styled one.
   (home + sustainable-development pages have 2 H1s on PROD too — parity,
   left alone.)
   ---------------------------------------------------------------------------- */
h1.chem-legacy-title-heading:empty {
    display: none !important;
}
/* The bare duplicate sits inside the .fusion-text block that follows the
   styled title (not an adjacent sibling). */
body.page-id-115520 .fusion-text > h1:not([class]) {
    display: none !important;
}

/* ============================================================================
   R21 — mobile cart, second pass (tester PDF 13-07 item 6, PROD screenshots)
   ============================================================================ */
@media screen and (max-width: 768px) {
    /* c) ONE table with separators — not a frame per product. */
    .woocommerce-cart-form table.shop_table_responsive {
        border: 1px solid #e0e0e0 !important;
        padding: 0 16px !important;
        display: block !important;
    }
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item {
        border: 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        margin: 0 !important;
        padding: 22px 0 24px !important;
    }
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item:last-child {
        border-bottom: 0 !important;
    }
    /* b) kill WooCommerce's even-row striping (grey card on the 2nd product) */
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td,
    .woocommerce-cart-form table.shop_table_responsive tr:nth-child(even) td,
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item:nth-child(even) {
        background: transparent !important;
    }
    /* a) photos to the right (PROD). Must match the R16 rule's shape —
       `...table.shop_table_responsive tr.cart_item td` centres at (0,3,3). */
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail {
        text-align: right !important;
    }
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail img {
        margin: 0 24px 10px auto !important;
        display: inline-block !important;
    }

    /* d) coupon box: framed, heading with a hairline, APPLY COUPON compact and
       right-aligned, normal weight (PROD). The theme renders the coupon block
       outside the items table. */
    .woocommerce-cart .chem-cart-coupon,
    .woocommerce-cart .coupon {
        border: 1px solid #e0e0e0 !important;
        padding: 16px !important;
        margin: 24px 0 !important;
        display: block !important;
    }
    .woocommerce-cart .coupon h2,
    .woocommerce-cart .chem-cart-coupon h2,
    .woocommerce-cart .coupon .chem-coupon-heading {
        border-bottom: 1px solid #eee !important;
        padding-bottom: 10px !important;
        margin-bottom: 14px !important;
    }
    .woocommerce-cart .coupon button[name="apply_coupon"],
    .woocommerce-cart .coupon input[name="apply_coupon"],
    .woocommerce-cart .coupon .button {
        width: auto !important;
        display: inline-block !important;
        float: right !important;
        margin-top: 12px !important;
        font-weight: 400 !important;
        text-transform: uppercase;
        font-size: 12px !important;
        padding: 10px 18px !important;
    }
    /* d) UPDATE BASKET: PROD = solid grey, white text, full width, normal
       weight; dev had a pale outline button with grey text. */
    .woocommerce-cart button[name="update_cart"],
    .woocommerce-cart .chem-cart-update,
    .woocommerce-cart .cart_totals button.chem-cart-update {
        background: #9b9b9b !important;
        color: #ffffff !important;
        border: 0 !important;
        border-color: transparent !important;
        outline: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        padding: 13px 20px !important;
        opacity: 1 !important;
    }
    .woocommerce-cart button[name="update_cart"]:disabled {
        background: #b5b5b5 !important;
        color: #ffffff !important;
    }
    /* d) PROCEED TO CHECKOUT: normal weight, no underline (PROD). */
    .woocommerce-cart .checkout-button {
        font-weight: 400 !important;
        text-decoration: none !important;
        padding: 13px 20px !important;
    }
    /* d) basket totals: PROD gives rows more air. */
    .cart_totals table.shop_table_responsive tr {
        padding: 16px 0 !important;
    }
    .cart_totals h2 {
        border-bottom: 1px solid #eee !important;
        padding-bottom: 10px !important;
        margin-bottom: 6px !important;
    }
    .cart_totals .wc-proceed-to-checkout {
        margin-top: 14px !important;
    }
}

/* ----------------------------------------------------------------------------
   R21 — "We deliver what we promise" (PureNic, item 10). The section is a grey
   backdrop (MicrosoftTeams-image-48*) with the heading graphic and icon+text
   pairs in [12% | 30%] inner rows. PROD separates every point with a clear
   vertical gap; the converted rows had none, so the copy read as one merged
   block ("wszystko się zlało").
   ---------------------------------------------------------------------------- */
.chem-section[style*="MicrosoftTeams-image-48"] .chem-row--inner {
    margin-bottom: 16px !important;
    align-items: flex-start !important;
}
.chem-section[style*="MicrosoftTeams-image-48"] .chem-row--inner .chem-col--12 img {
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
   R21 — Knowledge Base header (item 12). PROD: H1 42px (dev inherited the
   54px content-page rule), subtitle is a bold (900) centred line. And the
   tester's "read more na czarno + pomarańczowe podkreślenie" is the VISITED
   state in their browser — a fresh profile shows orange on BOTH sites; mirror
   the visited look anyway so the two match for a returning visitor.
   KB page-ids: EN 61580, PL 85205, ES 85352, PT 85350.
   ---------------------------------------------------------------------------- */
body.page-id-61580 .page-content > article > h1.chem-page-title,
body.page-id-85205 .page-content > article > h1.chem-page-title,
body.page-id-85352 .page-content > article > h1.chem-page-title,
body.page-id-85350 .page-content > article > h1.chem-page-title {
    font-size: 42px !important;
}
body.page-id-61580 .chem-text-section__content > p:first-child,
body.page-id-85205 .chem-text-section__content > p:first-child,
body.page-id-85352 .chem-text-section__content > p:first-child,
body.page-id-85350 .chem-text-section__content > p:first-child {
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: center !important;
}
.chem-card--image-top .chem-card__readmore:visited {
    color: #333333 !important;
    text-decoration-color: #ea5b0c !important;
}

/* ----------------------------------------------------------------------------
   R21 — Blog list (item 13): PROD shows breadcrumbs (Home / English / Blog)
   above the grid — page.php now renders them.
   R35: client 16-07 — PROD blog spans the FULL viewport (#main has no
   max-width, padding 60px 30px; measured live), so no cap here at all.
   ---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .site-main > .chem-blog-wrapper,
    .chem-blog-wrapper {
        max-width: none !important;
    }
}

/* ----------------------------------------------------------------------------
   R21 — Nicotine Academy (item 14; page-ids EN 115528, PL 115529, PT 115530,
   ES 115531 — the sections are raw fusion markup from the R16 rebuild):
   · sections sat flush (podcast button -> next heading gap 5px vs PROD 60px)
   · the KB-teaser card titles were underlined (PROD: none at rest); they are
     distinguishable by their title attribute carrying the raw /blog/ path.
   ---------------------------------------------------------------------------- */
body.page-id-115528 .chem-html-section__content > .fusion-fullwidth,
body.page-id-115529 .chem-html-section__content > .fusion-fullwidth,
body.page-id-115530 .chem-html-section__content > .fusion-fullwidth,
body.page-id-115531 .chem-html-section__content > .fusion-fullwidth {
    margin-bottom: 52px !important;
}
body.page-id-115528 a[title*="/blog/"],
body.page-id-115529 a[title*="/blog/"],
body.page-id-115530 a[title*="/blog/"],
body.page-id-115531 a[title*="/blog/"],
body.page-id-115528 a[aria-label^="Link"],
body.page-id-115529 a[aria-label^="Link"],
body.page-id-115530 a[aria-label^="Link"],
body.page-id-115531 a[aria-label^="Link"] {
    text-decoration: none !important;
}
body.page-id-115528 a[title*="/blog/"]:hover,
body.page-id-115529 a[title*="/blog/"]:hover,
body.page-id-115530 a[title*="/blog/"]:hover,
body.page-id-115531 a[title*="/blog/"]:hover {
    text-decoration: underline !important;
}
/* Second teaser flavour on the same pages: fusion-title h5 > p.entry-title > a
   (bare href to /blog/) — also plain on PROD. */
body.page-id-115528 .fusion-title .fusion-title-heading a,
body.page-id-115529 .fusion-title .fusion-title-heading a,
body.page-id-115530 .fusion-title .fusion-title-heading a,
body.page-id-115531 .fusion-title .fusion-title-heading a {
    text-decoration: none !important;
}
body.page-id-115528 .fusion-title .fusion-title-heading a:hover,
body.page-id-115529 .fusion-title .fusion-title-heading a:hover,
body.page-id-115530 .fusion-title .fusion-title-heading a:hover,
body.page-id-115531 .fusion-title .fusion-title-heading a:hover {
    text-decoration: underline !important;
}
/* The video row collapsed to 60px: .fusion-fullwidth is a flex container and
   the row, as its flex item, sized to content (columns were % of that).
   Let the row fill the section; column widths then come from the standard
   fusion_builder_column_1_2 (50%) rules. */
body.page-id-115528 .fusion-fullwidth > .fusion-builder-row,
body.page-id-115529 .fusion-fullwidth > .fusion-builder-row,
body.page-id-115530 .fusion-fullwidth > .fusion-builder-row,
body.page-id-115531 .fusion-fullwidth > .fusion-builder-row {
    flex: 1 1 100%;
    width: 100%;
}

/* R21 — lite-youtube facades (item 14, "na dole nie ma filmów"): the migrated
   markup ships Avada's <lite-youtube> custom elements, but the library that
   upgrades them was never enqueued — they rendered 0x0. Minimal facade: poster
   + play button via CSS, click-to-embed via main.js. */
lite-youtube {
    display: block;
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16 / 9;
    background-color: #000;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    margin: 0 auto;
}
lite-youtube::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
}
lite-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================================================
   R22 (tester PDF 14-07)
   ============================================================================ */

/* Item 4: the black "Zarejestruj się na naszym sklepie" CTA sat at x=0 w=358
   (left-pulled but not widened) — 32px white gap on the right. Full bleed. */
@media (max-width: 800px) {
    .chem-page-builder .chem-cta-section,
    .entry-content .chem-cta-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* Items 1+2: EN legacy counters. Mobile: the unit ran into the value
   ("000+tons") — space it; the value gets nbsp via main.js so "10 000+" never
   splits. Desktop: PROD centres the grid (~860px) inside the full-width band
   and separates columns with hairlines. */
.chem-counter-unit {
    margin-left: 0.35em;
}
@media (min-width: 801px) {
    /* the counters sit in generic rows whose direct children are the
       .chem-col--1-4 cells — centre whatever row holds them */
    :is(.chem-row, .chem-legacy-row, .chem-legacy-builder-row):has(> .chem-col--1-4 .chem-counter-number) {
        max-width: 880px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    :is(.chem-row, .chem-legacy-row, .chem-legacy-builder-row):has(> .chem-col--1-4 .chem-counter-number) > .chem-col--1-4:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, 0.45);
    }
}

/* Item 6a: PL "WYKORZYSTAJ KUPON" (longer than EN) floated up over the input.
   Block flow instead of float. */
@media screen and (max-width: 768px) {
    .woocommerce-cart .coupon button[name="apply_coupon"],
    .woocommerce-cart .coupon input[name="apply_coupon"],
    .woocommerce-cart .coupon .button {
        float: none !important;
        display: block !important;
        margin-left: auto !important;
        clear: both !important;
    }
    /* Item 6: PROD PL underlines the two action buttons' text. */
    .woocommerce-cart button[name="update_cart"],
    .woocommerce-cart .chem-cart-update,
    .woocommerce-cart .cart_totals button.chem-cart-update,
    .woocommerce-cart .checkout-button {
        text-decoration: underline !important;
    }
    /* Item 6: "Kwota + Łącznie w osobnej ramce, na prod nie" — drop the inner
       box around the totals rows (keep the outer .cart_totals frame). */
    .cart_totals table.shop_table_responsive,
    .cart_totals table.shop_table_responsive tbody {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* Item 7: login box — PROD order is button first, then "Zapamiętaj mnie",
   then the lost-password link; dev rendered remember-me above the button. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.woocommerce-form-login .woocommerce-form-login__rememberme {
    order: 2 !important;
    margin: 0 !important;
}
.woocommerce-form-login .woocommerce-form-login__submit {
    order: 1 !important;
}

/* Item 8: ZAREJESTRUJ SIĘ — PROD: left-aligned, compact, normal weight. */
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce form.register button[name="register"] {
    display: inline-block !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    font-weight: 400 !important;
    text-align: center !important;
}
.woocommerce-form-register p.form-row:last-child,
.woocommerce form.register p.form-row:has(button[name="register"]) {
    text-align: left !important;
}

/* Item 9: bottle section polish — every point sits ON the icon line (PROD),
   and the bottle pokes above the grey card edge like PROD. */
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner {
    align-items: center !important;
}
.chem-section[style*="MicrosoftTeams-image-37"] {
    overflow: visible !important;
}
.chem-section[style*="MicrosoftTeams-image-37"] .chem-row--inner > .chem-col:has(img[src*="purenic-splash"]) {
    top: 35%;
}

/* Item 11: KB read-more — the client sees PROD black-with-orange-underline
   (their browser's :visited everywhere); make it the resting state so fresh
   and returning visitors match what they expect. */
.chem-card--image-top .chem-card__readmore,
.chem-card--image-top .chem-card__readmore:visited {
    color: #333333 !important;
    text-decoration-color: #ea5b0c !important;
}

/* Item 3: PL testimonials mobile — PROD fits the heading on one line, the
   quote is larger with letter-spacing, the byline is letter-spaced, dots are
   black when active. */
@media (max-width: 600px) {
    .chem-testimonials-section__title {
        font-size: 18px !important;
    }
    blockquote.chem-testimonial > p {
        font-size: 15px !important;
        letter-spacing: 0.4px !important;
        line-height: 1.75 !important;
    }
    blockquote.chem-testimonial > cite {
        letter-spacing: 1.5px !important;
    }
    .chem-testimonials-nav button.active,
    .chem-testimonials-dots .active {
        background: #333 !important;
        border-color: #333 !important;
    }
}

/* ============================================================
   R23 — tester PDF 15-07
   ============================================================ */

@media (max-width: 800px) {
    /* Item 11: the mobile guard in main.css:4691 sets overflow-x:hidden on
       every content container. Per CSS spec, hidden on one axis forces the
       other axis from `visible` to `auto`, so any .chem-row whose content
       pokes past its box grew an INNER vertical scrollbar (PL homepage cards
       row: client 1465 / scroll 1530). `clip` clips identically but creates
       no scroll container, and legally pairs with overflow-y:visible. */
    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 {
        overflow-x: clip !important;
    }

    /* Item 10: PL homepage hero video. base.css already gives
       .chem-hero-slider the 100vw pull, but the same mobile guard caps it
       with max-width:100% — inside the padded .page-content that is 358px,
       not 390 (PROD renders the video edge-to-edge). Release the cap for
       this one full-bleed section; article/.page-content keep the guard,
       and html/body overflow-x:clip absorbs the 100vw rounding. */
    .chem-page-builder .chem-section.chem-hero-slider {
        max-width: 100vw !important;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* ============================================================
   R24 — tester PDF 15-07 wieczorny (karta produktu PureNic)
   ============================================================ */

/* Item 1: benefit icons in the product description render at their natural
   file sizes (82/205/305px — the PNGs differ), while PROD constrains them
   all to 60px and centers them. Target the four icon files directly; they
   are shared by every language variant of the product. */
.single-product img[src*="distilled-in-Poland"],
.single-product img[src*="1_kropelka-1.png"],
.single-product img[src*="Obraz3.png"],
.single-product img[src*="Obraz4.png"] {
    width: 60px !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   R25 — tester PDF "chemno 2 15 lipca" (karta nicotine-polacrilex-20
   + globalne: sticky menu mobile, hierarchia nagłówków)
   ============================================================ */

/* Item 2: Characteristic table. The TPD restyle in main.css
   (.single-product .woocommerce-Tabs-panel table tbody td { background
   transparent / borders / padding !important }) bleached the migrated
   Avada table that carries its own inline styles (orange #ea5b0c label
   cells). Tables that explicitly declare border="1" keep their own look —
   PROD renders them with 1px #e2e2e2 cell borders and 1px padding. */
.single-product .woocommerce-Tabs-panel table[border="1"] tbody td {
    border: 1px solid #e2e2e2 !important;
    padding: 1px !important;
}
.single-product .woocommerce-Tabs-panel table[border="1"] tbody td[style*="ea5b0c"] {
    background-color: #ea5b0c !important;
}
/* R26: the NicBase Specification table uses a slightly different orange. */
.single-product .woocommerce-Tabs-panel table[border="1"] tbody td[style*="eb6014"] {
    background-color: #eb6014 !important;
}

/* Item 6: mobile sticky header. PROD (Avada) fixes the whole compact mobile
   header bar (logo, flag, currency, basket, search — .fusion-sticky-header-
   wrapper, 69px) once the page scrolls past the header. Dev only stuck the
   desktop dark menu bar, which is empty/hidden on mobile, so nothing stuck.
   main.js already toggles .chem-is-sticky on the wrapper — only CSS missing. */
@media (max-width: 800px) {
    /* base.css pins the wrapper with position:relative !important ("JS handles
       fixed positioning") — out-!important it once the sticky class lands. */
    .chem-sticky-header-wrapper.chem-is-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    /* Keep page height stable when the bar leaves the flow. */
    .chem-header-v4:has(.chem-is-sticky) .chem-header-sticky-height {
        display: block;
        height: 69px;
    }
}

/* Item 4: Documentation icon — PROD caps it at 60px (--awb-max-width). The
   inline max-width on the img loses the cascade (same mechanism as the R24
   benefit icons), so pin it by file name. */
.single-product img[src*="certyfikat_MM_02.03.22"] {
    max-width: 60px !important;
    width: auto !important;
    height: auto !important;
}

/* Item 1 parity: PROD renders empty availability_html for in-stock variations —
   no "In stock" badge under the Capacity select. Out-of-stock stays visible. */
.single-product .woocommerce-variation-availability .stock.in-stock {
    display: none;
}

/* Heading hierarchy (global, products): sidebar now renders AFTER the shop
   content in the DOM (H4 "Categories" no longer precedes the product H1) —
   keep it visually FIRST (left column) on desktop. ≤800px rules above
   already order it below the content (order: 2 !important). */
.chem-shop-sidebar {
    order: -1;
}

/* Heading hierarchy: the "Description" tab title is an H3 on PROD and is
   display:none at every breakpoint (content starts straight at "Product
   description:"). Match it. */
.single-product .woocommerce-Tabs-panel .chem-woocommerce-tab-title {
    display: none;
}

/* ============================================================
   R26 — tester PDF "chemno 3 15 lipca" (karta nicotine-base-nicbase)
   ============================================================ */

/* Item "linkowania wewnetrznego brakuje": links inside the product
   description render with text-decoration:none, so anchors wrapping black
   bold text are invisible as links. PROD underlines them. Exclude the CTA
   chip shapes (chem-button / bare mailto / tel) and image-wrapping anchors. */
.single-product .woocommerce-Tabs-panel .chem-col a:not(.chem-button):not([href^="mailto:"]):not([href^="tel:"]):not(:has(img)) {
    text-decoration: underline;
}
.single-product .woocommerce-Tabs-panel .chem-col blockquote a[href^="mailto:"] {
    text-decoration: underline;
}

/* Item "kropki za selectem": native <select> rendering on iOS draws its own
   chrome (double chevron + artifacts around the box). PROD (Avada) uses
   appearance:none with a custom arrow. Normalize to the prod look. */
.single-product form.variations_form .variations select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23747474' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid #dfdfdf;
    border-radius: 0;
    padding: 10px 40px 10px 14px;
    color: #747474;
    line-height: 1.4;
}

/* R26 — heading hierarchy (global): tile labels and accordion questions are
   real headings on PROD. The tags changed (span->h3, summary text->h3) —
   these rules keep the rendering byte-identical to the previous look. */
.chem-cat-tile__title {
    margin: 14px 0 0;
}
.chem-toggle summary h3.chem-toggle-heading {
    display: inline;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
}

/* ============================================================
   R27 — tester PDF "chemno 4 15 lipiec" (kategoria NicSalt Bases
   + tabela Specification na benzoate)
   ============================================================ */

/* Item 2: migrated spec tables carry inline height:160px. On mobile the
   responsive-table treatment turns them into display:block, where that
   height becomes a HARD cap — rows 4+ (Shelf life, Suggested storage)
   render outside the box and the following separator overlaps them
   ("brakuje wierszy"). Applies to every migrated border="1" table
   (benzoate, nicbase, polacrilex, ...). */
.single-product .woocommerce-Tabs-panel table[border="1"] {
    height: auto !important;
}

/* Item 1: tile overlay on touch — PROD (Avada rollover) reveals the orange
   info overlay on the FIRST tap and navigates on the second. Dev only had
   :hover/:focus-within, so a tap navigated instantly. main.js adds
   .chem-overlay-open on first touch. */
.woocommerce ul.products li.product.chem-overlay-open .chem-product-overlay {
    transform: translateX(0);
    pointer-events: auto;
}

/* ============================================================
   R28 — tester PDF "chemno 5 15 lipiec"
   ============================================================ */

/* Item 1: "kreski poza strzałką" in the mobile menu — the injected submenu
   caret <button> (R9) inherited a bottom border, drawing a short dash next
   to the arrow. PROD shows a bare caret. */
.chem-mobile-nav-holder .chem-mobile-submenu-toggle {
    border: 0 !important;
    background: transparent;
}

/* Item "nagłówek ma niepoprawne odstępy pod fotką": legacy titles carrying an
   explicit --chem-awb-font-size rendered with the base heading line-height
   (26px under a 40px font — overlapping lines). Also mirror Avada's mobile
   typography scaling: PROD renders the 40px title at 25px on small screens. */
.chem-legacy-title[style*="--chem-awb-font-size"] .chem-legacy-title-heading {
    line-height: 1.2;
}
@media (max-width: 640px) {
    /* !important needed: main.css's mobile parity block pins legacy headings
       to 22px/26px !important while a non-media rule forces 42px !important —
       together they produced the 42px/26px overlap. PROD: 25px/30px. */
    .chem-legacy-title[style*="--chem-awb-font-size"],
    .chem-legacy-title[style*="--chem-awb-font-size"] .chem-legacy-title-heading {
        font-size: calc(var(--chem-awb-font-size, 33px) * 0.625) !important;
        line-height: 1.2 !important;
    }
}

/* ============================================================
   R29 — tester PDF "chemno 6 lipiec 16"
   ============================================================ */

/* Item "przyciski nie mają odstępów od fotek" (#guides,
   sustainable-development): PROD gives every fusion button on this page
   margin-left 20px (stacked GUIDE buttons additionally 10px bottom). */
body.page-id-110489 .chem-legacy-button {
    margin: 0 0 10px 20px;
}

/* ============================================================
   R31 — megamenu: highlight aktywnej pozycji (pytanie klienta,
   PDF chemno 6 pkt 1)
   ============================================================ */

/* PROD marks the currently-viewed product/category inside the megamenu with
   a FULL orange bar (#ea5b0c bg, white text, white caret; padding 4px + the
   34px indent). Dev only tinted the link text orange. */
/* The custom megamenu walker emits no current-menu-item classes — main.js
   tags the matching link with .chem-current instead. */
.chem-megamenu__list a.chem-current {
    background: #ea5b0c;
    color: #ffffff;
    padding: 4px 10px;
    margin-left: -10px;
}
.chem-megamenu__list a.chem-current:hover {
    color: #ffffff;
}
.chem-megamenu__list a.chem-current i.fa-angle-right {
    color: #ffffff;
}

/* ============================================================
   R32 — tester PDF "chemno 7 16 lipca"
   ============================================================ */

/* Item 4: the service-cards checkmark rule in main.css includes the global
   selector `.chem-section .chem-col--1-3 li::before`, which decorated the
   equipment list on laboratory-tests-analysis with orange check circles.
   PROD renders plain bullets inside product descriptions. */
.single-product .woocommerce-Tabs-panel .chem-col--1-3 li::before {
    content: none !important;
}

/* Item 6: FAQ H1 — main.css pins .page-id-11 (and 5435) titles to one line
   for desktop PROD parity, but on mobile the title must wrap (PROD wraps
   to two lines; on TEST it ran off-screen). */
@media (max-width: 767px) {
    .page-id-11 .chem-page-title,
    .page-id-5435 .chem-page-title {
        white-space: normal !important;
    }
}

/* ============================================================
   R34 — tester PDF "chemno 8 16 lipca": "kropki obok droplisty"
   ============================================================ */

/* iOS/WebKit painted "two dots" right of every variation select: the mobile
   table treatment in main.css (~4668) gives every product-page td
   overflow:hidden + text-overflow:ellipsis, and WooCommerce core adds
   margin-right:1em to .variations select — the margin overflows the cell,
   so WebKit renders a clipped ellipsis. Chromium never paints an ellipsis
   here, which is why desktop QA couldn't see it. */
@media (max-width: 767px) {
    .single-product form.variations_form .variations td.value {
        text-overflow: clip !important;
        overflow: visible !important;
    }
    .single-product form.variations_form .variations select {
        margin-right: 0 !important;
    }
}

/* R36/fix-04: FAQ archive /blog/faq-items/ — layout per PROD
   (shots/blog-faq-items-1440-prod.png): orange date tile on the left,
   big orange question title, small grey date, answer text, hairline. */
.chem-faq-archive {
    max-width: 1170px;
    margin: 0 auto;
    padding: 40px 30px 80px;
}
.chem-faq-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 44px 0;
    border-bottom: 1px solid #e2e2e2;
}
.chem-faq-item__date-tile {
    flex: 0 0 72px;
    background: #ea5b0c;
    color: #fff;
    text-align: center;
    padding: 10px 4px 8px;
}
.chem-faq-item__day {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}
.chem-faq-item__monthyear {
    display: block;
    font-size: 12px;
    margin-top: 2px;
}
.chem-faq-item__body { flex: 1; }
.chem-faq-item__title {
    margin: 0 0 4px;
    font-size: 34px;
    line-height: 1.25;
}
.chem-faq-item__title a {
    color: #ea5b0c;
    text-decoration: none;
}
.chem-faq-item__title a:hover { text-decoration: underline; }
.chem-faq-item__meta {
    color: #999;
    font-size: 13px;
    margin: 0 0 18px;
}
.chem-faq-item__content p { margin: 0 0 16px; }
.chem-faq-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 28px 0 0;
}
.chem-faq-pagination .page-numbers {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    margin-left: 6px;
    text-align: center;
    border: 1px solid #e2e2e2;
    color: #ea5b0c;
    text-decoration: none;
    font-size: 14px;
}
.chem-faq-pagination .page-numbers.current {
    background: #ea5b0c;
    border-color: #ea5b0c;
    color: #fff;
}
@media (max-width: 767px) {
    .chem-faq-item { gap: 16px; padding: 28px 0; }
    .chem-faq-item__title { font-size: 24px; }
    .chem-faq-item__date-tile { flex-basis: 56px; }
}

/* ============================================================
   R37 — poprawki z maila klienta po testach (2026-07-27)
   ============================================================ */

/* R37/A1: hover przycisków w treści legacy (strona produktu: sekcja 3 produktów
   "Learn more", przyciski Email/Phone przy "Let's shape our future").
   PROD (Avada .fusion-button, pomiar Playwright na PureNic): normal bg #ea5b0c
   biały tekst; hover -> przezroczyste tło, tekst i ramka pomarańczowe.
   base.css dawał hover #333 (ciemny), main.css w Tabs-panel #333 !important. */
.chem-section a.chem-button:hover,
.chem-section a.chem-button:focus,
.single-product .woocommerce-Tabs-panel a.chem-button:hover,
.single-product .woocommerce-Tabs-panel a[href^="mailto:"]:not(blockquote a):hover,
.single-product .woocommerce-Tabs-panel a[href^="tel:"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #ea5b0c !important;
    border-color: #ea5b0c !important;
}

/* R37/B3: dashboard klienta – ekran zamówień. "View order"/"View Proforma"
   mają być zwykłymi linkami tekstowymi jak na PROD
   (chemnovatic.com/shop-my-account/orders/), nie przyciskami. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button,
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.button {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline !important;
    padding: 0 !important;
    margin: 0 14px 0 0 !important;
    color: #ea5b0c !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button:hover,
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.button:hover {
    text-decoration: underline !important;
    color: #ea5b0c !important;
}

/* R37/A7 (mobile): zdjęcia produktów w koszyku wyśrodkowane (były do prawej). */
@media (max-width: 767px) {
    .woocommerce-cart table.cart td.product-thumbnail {
        text-align: center !important;
    }
    .woocommerce-cart table.cart td.product-thumbnail img {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        display: inline-block !important;
    }
}

/* R37/A4 (mobile): przycisk "Email: sales@chemnovatic.com" na PL/ES/PT
   (.chem-contact-cta__email) — treść 335px w przycisku 296px (pomiar 360px
   viewport): e-mail wystawał poza przycisk. Mniejszy padding + font na wąskich
   ekranach mieści całość. */
@media (max-width: 480px) {
    .chem-contact-cta__email,
    .chem-contact-cta__phone {
        max-width: 100%;
        padding: 13px 10px !important;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
    }
}

/* R37/A4b: na EN przycisk Phone (chem-button--large, tel:) był szary #333 —
   klient prosi o pomarańczowy jak Email. */
a.chem-button--large[href^="tel:"] {
    background-color: #ea5b0c !important;
}

/* R37/A6 (mobile EN): licznik "10 000+ tons" szerszy niż komórka siatki 2x2 —
   wystawał za lewą krawędź ekranu (pomiar: box [-25..204] przy viewport 360).
   PL/ES/PT mieściły się. Jednostka schodzi pod liczbę + lekko mniejszy font. */
@media (max-width: 480px) {
    .chem-section[style*="background-color"] .chem-counter-number {
        max-width: 100%;
        font-size: 34px !important;
    }
    .chem-section[style*="background-color"] .chem-counter-number .chem-counter-unit {
        display: block;
        font-size: 18px;
        line-height: 1.1;
    }
}

/* R37/C3: media pack PL/ES/PT — obrazek galerii (miniatures-mediapack.jpg,
   1301px natural, bez atrybutów width/height w konwertowanym markupie)
   rozpychał flexową kolumnę tekstu .chem-col--3-4: min-width:auto nie
   pozwalał jej się zwęzić, więc spadała POD ikonę ("Potrzebujesz zdjęć"
   na całą szerokość, ikona osierocona). PROD wyświetla galerię ~650px
   (retina 2x). EN ma inny markup (bez chem-col) — selektor go nie dotyka. */
.chem-row > .chem-col--1-4:has(img[src*="mediapack_ico"]) + .chem-col--3-4 {
    min-width: 0;
    /* basis auto = preferowana szerokość długiego akapitu > dostępne miejsce
       → kolumna spadała pod ikonę; basis 0 wypełnia pozostałą przestrzeń */
    flex: 1 1 0% !important;
}
img[src*="miniatures-mediapack"] {
    /* PDF 27.07: "wielkosc obrazkow w tej sekcji powinna byc taka sama w kazdej
       wersji jezykowej" — globalny cap, obejmuje takze EN (inny markup). */
    max-width: min(650px, 100%) !important;
    height: auto !important;
}

/* R37/A8 (mobile): popup o akcyzie (plugin Modal Window, checkout przy
   zamówieniu do PL) nie mieścił się na ekranie i nie dało się go przewinąć.
   Ograniczamy wysokość modala do viewportu i włączamy przewijanie treści. */
@media (max-width: 767px) {
    /* pomiar na stagingu (zalogowany, checkout, viewport 360x780): plugin
       renderuje #wow-modal-window-N o szer. 50% (180px) i wys. 1281px bez
       przewijania. Pełna szerokość + ograniczenie do viewportu + scroll. */
    /* Plugin wstrzykuje inline <style> "#wow-modal-window-N { width:50%
       !important }" (selektor ID) — lista ID daje wyzsza specyficznosc. */
    html body #wow-modal-window-1, html body #wow-modal-window-2,
    html body #wow-modal-window-3, html body #wow-modal-window-4,
    html body #wow-modal-window-5, html body #wow-modal-window-6,
    html body #wow-modal-window-7, html body #wow-modal-window-8,
    html body #wow-modal-window-9, html body #wow-modal-window-10,
    html body .wow-modal-window {
        width: 92vw !important;
        max-width: 92vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        top: 4vh !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 24px !important;
    }
}

/* R37/D1: PROD pokazuje H1 na archiwach KATEGORII blogowych (np. "Najważniejsze
   regulacje prawne i chemiczne w UE") — main.css chowa tytuł dla całego bloga
   (index go nie ma), re-show analogicznie do tagów (#8 wyżej). Wygląd jak PROD:
   42px pomarańcz, wyrównanie do lewej. */
body.category .chem-blog-wrapper .chem-blog-page-title {
    display: block !important;
    font-size: 42px !important;
    color: #ea5b0c !important;
    text-align: left;
    margin: 10px 0 18px;
}
/* R37/D1: blok intro kategorii (opis termu przeniesiony z layoutu Avady). */
.chem-blog-description {
    margin: 0 0 28px;
}
.chem-blog-description h3 {
    color: #ea5b0c;
    font-size: 24px;
    text-align: center;
    margin: 0 0 16px;
}
.chem-blog-description p {
    text-align: left;
    font-weight: 400;
}
.chem-blog-description > p:last-of-type {
    text-align: center;
}
.chem-blog-description p {
    margin: 0 0 14px;
}

/* R37/A3: kariera PL — ikony benefitów odtworzone z PROD (nie przeszły
   wcześniejszej konwersji do ACF). Wyśrodkowane nad podpisami, stała szerokość
   jak na PROD; podpisy do środka. */
img.chem-benefit-icon {
    display: block;
    width: 80px;
    height: 80px;           /* PDF 27.07: rozne proporcje ikon rozjezdzaly rzedy */
    object-fit: contain;
    max-width: 100%;
    margin: 0 auto 10px;
}
img.chem-benefit-icon + p,
p:has(> img.chem-benefit-icon) {
    text-align: center;
}
.chem-page-builder img.chem-benefit-icon ~ p strong {
    display: block;
    text-align: center;
}
/* R37h: kariera EN/PT/ES — podpisy pod ikonami byly do lewej mimo inline
   text-align:center: bije je regula main.css:2472 (…>.chem-col>p, left
   !important, specyficznosc 0,5,1). Wyjatek musi ja przebic — powtarzamy
   pelny selektor + :has (0,6,2). Klasa tylko na stronach kariery. */
.chem-col:has(img.chem-benefit-icon),
.chem-col:has(img.chem-benefit-icon) p,
.chem-html-section__content > .chem-section:not([style*="background-color"]) > .chem-row > .chem-col:has(img.chem-benefit-icon) > p {
    text-align: center !important;
}
/* R37i: wariant bez :has() (starsze Firefox ESR go nie wspieraja) — akapit,
   ktory sam deklaruje inline text-align:center, ma zostac wycentrowany;
   selektor atrybutowy (0,6,1) przebija sekcyjne left !important (0,5,1)
   i przywraca intencje autora tresci w calym page builderze. */
.chem-html-section__content > .chem-section:not([style*="background-color"]) > .chem-row > .chem-col > p[style*="text-align: center"] {
    text-align: center !important;
}


/* R37c (PDF mobile 27.07): kropki paginacji opinii na home byly dosuniete do
   lewej (kontener flex kurczyl sie do zawartosci). Pelna szerokosc + srodek. */
.chem-testimonial-pagination {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* R37e: media pack EN — parytet z PROD (pomiar: PROD ikony 30x34, kolumna
   ikony 48px, tekst od razu za nia; staging EN mial ikony 44x50 w kolumnie
   max-width:4% i tekst wciety o ~40px glebiej). EN markup to chem-legacy-*
   (inna struktura niz PL), stad osobne selektory. */
img[src*="mediapack_ico"] {
    width: 30px !important;
    height: auto !important;
    max-width: 30px !important;
}
.chem-legacy-layout-column:has(img[src*="mediapack_ico"]) {
    flex: 0 0 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
}
.chem-legacy-layout-column:has(img[src*="mediapack_ico"]) + .chem-legacy-layout-column {
    padding-left: 0 !important;
}
/* R37g: wycofane wciecie -23px galerii — po wyrownaniu kolumny ikon (padding
   2%) galeria i tekst leza w jednej osi (221px) jak na PROD, ujemny margines
   wypychal galerie w lewo wzgledem tekstu (uwaga klienta 27.07 wieczor). */
/* ...i wewnetrzny wrapper kolumny tekstu (padding-left 44px z varow awb). */
.chem-legacy-layout-column:has(img[src*="mediapack_ico"]) + .chem-legacy-layout-column > * {
    padding-left: 0 !important;
}

/* R37g: media pack EN — kazda ikona ma w markupie DWA <picture> (oryginal +
   kopia lazyload z srcset 400w+; naturalne pliki to 1440x1631 px!). Chrome
   sklada duplikat do 0x0, ale inne przegladarki/stany renderuja go w pelnym
   rozmiarze ("za duze ikony" — uwaga klienta 27.07 wieczor). Chowamy kopie.

   R42/Z17 (pomiar 16.08): to NIE JEST duplikat, tylko WARIANT MOBILNY. Kopia
   siedzi w `.chem-legacy-image-element chem-legacy-no-medium-visibility
   chem-legacy-no-large-visibility`, czyli ma sie pokazywac wylacznie ponizej
   641 px, a wariant desktopowy ma `no-small-visibility` i znika na mobile.
   Ryczaltowe `display:none` chowalo kopie na KAZDEJ szerokosci, wiec na
   telefonie nie bylo widac zadnej ikony (produkcja pokazuje trzy, 30x34 px,
   i przy 1440, i przy 390). Zawezamy ukrycie do szerokosci, na ktorych
   widoczny jest wariant desktopowy — ponizej progu robi to juz sama klasa
   widocznosci. */
@media (min-width: 641px) {
    picture:has(> img.lazyload[src*="mediapack_ico"]),
    img.lazyload[src*="mediapack_ico"] {
        display: none !important;
    }
}
/* R37g: media pack EN — akapit "Ps." wystawal 22px w lewo poza os tresci:
   jego wiersz (legacy) ma ujemny margines, a kolumna 1/1 nie ma paddingu,
   ktory by go kompensowal (PROD: "Ps." w osi naglowka). Scope po ID strony
   + instancyjnej klasie bloku tekstu, zeby nie ruszac wierszy z ikonami. */
body.page-id-5565 .chem-legacy-builder-row:has(.chem-legacy-text-5) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* R37f: hexagon w sticky pasku NIE byl klikalny — glyph zyje na LI::before
   (poza <a>), a caly LI jest ukryty poza sticky. W sticky odslaniamy LI,
   chowamy tekst linku i rozciagamy <a> na caly slot jako click-target
   prowadzacy do home biezacego jezyka (href z menu). */
.chem-is-sticky ul.chem-menu > li.home-special-icon {
    visibility: visible !important;
    position: relative;
    /* slot jak w spoczynku (szerokosc ukrytego tekstu) — bez skoku menu */
    width: 73px;
    justify-content: center;
}
.chem-is-sticky ul.chem-menu > li.home-special-icon > a {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden;
}

/* R45 (2026-09-02): podczas zmiany wariantu wyszarzenie + blokada klikniecia
   (klient: zamiast krecacego sie kolka, ktore d14 schowalo). */
.single_variation_wrap.chem-variation-loading{
    opacity:.5 !important;
    pointer-events:none !important;
    transition:opacity .12s ease;
}