/**
 * Fusion / Avada compatibility layer
 *
 * Scraped/imported page content uses Avada's `.fusion-*` classes.
 * We reproduce only the visual rules the migrated content relies on,
 * mapped to chem-* design tokens from base.css.
 */

/* Rich-snippet schema spans must never render on screen. */
.rich-snippet-hidden,
.entry-title.rich-snippet-hidden,
.updated.rich-snippet-hidden {
    display: none !important;
}

/* Scrape pollution from PixieBrix / Wappalyzer / other dev extensions that
   leaked into migrated HTML. Hide server-side before CSS even loads. */
#pixiebrix-quickbar-container,
div[id^="pixiebrix"],
div[style*="2147483647"],
div[style*="z-index: 2147483647"] {
    display: none !important;
}

/* ---------- Fusion rows / columns / layout ---------- */

.fusion-fullwidth {
    width: 100%;
}

.fusion-builder-row,
.fusion-row {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0 var(--chem-container-padding);
    box-sizing: border-box;
}

.fusion-fullwidth > .fusion-builder-row {
    max-width: var(--chem-site-width);
}

.fusion-layout-column,
.fusion-column {
    padding: 0 var(--chem-column-half-gap);
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}

.fusion_builder_column_1_1 { flex: 0 0 100%; max-width: 100%; }
.fusion_builder_column_1_2 { flex: 0 0 50%; max-width: 50%; }
.fusion_builder_column_1_3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.fusion_builder_column_2_3 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.fusion_builder_column_1_4 { flex: 0 0 25%; max-width: 25%; }
.fusion_builder_column_3_4 { flex: 0 0 75%; max-width: 75%; }
.fusion_builder_column_1_5 { flex: 0 0 20%; max-width: 20%; }
.fusion_builder_column_1_6 { flex: 0 0 16.6667%; max-width: 16.6667%; }

@media (max-width: 800px) {
    .fusion-layout-column,
    .fusion-column,
    [class*="fusion_builder_column_"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Flex helpers */
.fusion-flex-container { display: flex; }
.fusion-flex-column { flex-direction: column; }
.fusion-flex-align-items-flex-start { align-items: flex-start; }
.fusion-flex-align-self-center { align-self: center; }
.fusion-flex-align-self-flex-end { align-self: flex-end; }
.fusion-flex-align-self-flex-start { align-self: flex-start; }
.fusion-flex-align-self-stretch { align-self: stretch; }
.fusion-flex-justify-content-center { justify-content: center; }
.fusion-flex-justify-content-flex-end { justify-content: flex-end; }
.fusion-flex-justify-content-flex-start { justify-content: flex-start; }
.fusion-flex-justify-content-space-between { justify-content: space-between; }

/* Visibility helpers from Avada */
@media (min-width: 1025px) {
    .fusion-no-large-visibility { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .fusion-no-medium-visibility { display: none !important; }
}
@media (max-width: 640px) {
    .fusion-no-small-visibility { display: none !important; }
}

/* ---------- Titles ---------- */

.fusion-title,
.fusion-title-sc-wrapper {
    clear: both;
    margin: 0 0 0.5em;
}

.fusion-title h1,
.fusion-title h2,
.fusion-title h3,
.fusion-title h4,
.fusion-title h5,
.fusion-title h6,
.fusion-title-heading {
    color: var(--chem-heading-color);
    font-family: var(--chem-font-heading);
    font-weight: var(--chem-heading-weight);
    margin: 0;
    text-align: left;
}

/* Size variants from Avada markup */
.fusion-title-size-one h1,
.fusion-title-size-one .fusion-title-heading { font-size: var(--chem-h1-size); line-height: var(--chem-h1-line-height); }
.fusion-title-size-two h2,
.fusion-title-size-two .fusion-title-heading { font-size: var(--chem-h2-size); line-height: var(--chem-h2-line-height); }
.fusion-title-size-three h3,
.fusion-title-size-three .fusion-title-heading { font-size: var(--chem-h3-size); line-height: var(--chem-h3-line-height); }
.fusion-title-size-four h4,
.fusion-title-size-four .fusion-title-heading { font-size: var(--chem-h4-size); }

/* Title alignment modifiers */
.title-heading-left,
.fusion-title.title-heading-left .fusion-title-heading,
.fusion-title.title-heading-left h1,
.fusion-title.title-heading-left h2,
.fusion-title.title-heading-left h3,
.fusion-title.title-heading-left h4,
.fusion-title.title-heading-left h5,
.fusion-title.title-heading-left h6 { text-align: left; }

.title-heading-center,
.fusion-title-center .fusion-title-heading,
.fusion-title-center h1,
.fusion-title-center h2,
.fusion-title-center h3,
.fusion-title-center h4 { text-align: center; }

.title-heading-right,
.fusion-title.title-heading-right .fusion-title-heading,
.fusion-title.title-heading-right h2,
.fusion-title.title-heading-right h3 { text-align: right; }

.fusion-sep-none .fusion-title-sep-container { display: none; }

/* ---------- Body text wrappers ---------- */

[class^="fusion-text-"],
[class*=" fusion-text-"],
.fusion-text {
    color: var(--chem-body-text);
    font-family: var(--chem-font-body);
    font-size: var(--chem-body-size);
    line-height: var(--chem-body-line-height);
}

[class^="fusion-text-"] p,
[class*=" fusion-text-"] p,
.fusion-text p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 20px;
}

.fusion-text-no-margin p:last-child { margin-bottom: 0; }

[class^="fusion-text-"] ul,
[class*=" fusion-text-"] ul,
.fusion-text ul {
    padding-left: 20px;
    margin: 0 0 20px;
}

[class^="fusion-text-"] ul li,
[class*=" fusion-text-"] ul li,
.fusion-text ul li { margin-bottom: 6px; }

[class^="fusion-text-"] h1, [class*=" fusion-text-"] h1, .fusion-text h1,
[class^="fusion-text-"] h2, [class*=" fusion-text-"] h2, .fusion-text h2,
[class^="fusion-text-"] h3, [class*=" fusion-text-"] h3, .fusion-text h3,
[class^="fusion-text-"] h4, [class*=" fusion-text-"] h4, .fusion-text h4,
[class^="fusion-text-"] h5, [class*=" fusion-text-"] h5, .fusion-text h5,
[class^="fusion-text-"] h6, [class*=" fusion-text-"] h6, .fusion-text h6 {
    color: var(--chem-heading-color);
    font-weight: var(--chem-heading-weight);
    text-align: left;
}

/* ---------- Separators ---------- */

.fusion-separator {
    width: 100%;
    margin: 20px 0;
    clear: both;
}

.fusion-separator .fusion-separator-border,
.fusion-separator-border {
    border-top: 1px dashed var(--chem-primary);
    width: 100%;
}

.fusion-separator.sep-single .fusion-separator-border,
.fusion-separator .fusion-separator-border.sep-single,
.sep-single { border-top-style: dashed; }

.fusion-separator.sep-solid .fusion-separator-border,
.fusion-separator .fusion-separator-border.sep-solid,
.sep-solid { border-top-style: solid; }

.fusion-separator.sep-dashed .fusion-separator-border,
.sep-dashed { border-top-style: dashed; }

.fusion-separator.sep-dotted .fusion-separator-border,
.sep-dotted { border-top-style: dotted; }

.fusion-full-width-sep { margin-left: 0; margin-right: 0; }

.fusion-separator.fusion-has-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fusion-separator.fusion-has-icon .fusion-separator-border { flex: 1; }

/* ---------- Buttons ---------- */

.fusion-button {
    display: inline-block;
    background: var(--chem-primary);
    color: #fff;
    padding: var(--chem-btn-padding);
    font-family: var(--chem-btn-font-family);
    font-size: var(--chem-btn-font-size);
    font-weight: 700;
    text-transform: var(--chem-btn-text-transform);
    text-decoration: none;
    border: 2px solid var(--chem-primary);
    border-radius: 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.fusion-button:hover,
.fusion-button:focus {
    background: var(--chem-primary-dark);
    border-color: var(--chem-primary-dark);
    color: #fff;
}

.fusion-button-text,
.fusion-button .fusion-button-text { color: inherit; }

.fusion-button.button-large { padding: 17px 36px; font-size: 16px; }
.fusion-button.button-small { padding: 9px 22px; font-size: 12px; }

.fusion-button.button-flat { box-shadow: none; }

/* ---------- Images ---------- */

.fusion-image-element,
.fusion-imageframe { display: inline-block; max-width: 100%; }

.fusion-image-align-center { text-align: center; }
.fusion-image-align-left { text-align: left; }

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

/* ---------- Column inner bg ---------- */

.fusion-column-inner-bg-wrapper,
.fusion-column-inner-bg,
.fusion-column-inner-bg-image {
    width: 100%;
    height: 100%;
}

.fusion-column-wrapper {
    position: relative;
    padding: 0;
}

/* ---------- Lists inside content ---------- */

.fusion-text ol,
[class^="fusion-text-"] ol {
    padding-left: 22px;
    margin: 0 0 20px;
}

/* List markers: prod uses default black bullets, not orange.
   Override only where explicitly needed (e.g. NGP regulation list). */
.fusion-text ul > li::marker,
[class^="fusion-text-"] ul > li::marker,
[class*=" fusion-text-"] ul > li::marker {
    color: var(--chem-body-text);
}

/* Country flag + heading row for NGP Regulation News country sections.
   Prod: small flag, heading inline, separator below each block.

   R16: the wrapper rule that used to live here —
       .fusion-imageframe.imageframe-1, .awb-image-frame.awb-image-frame-1 { max-width: 80px }
   — was removed. `imageframe-1` / `awb-image-frame-1` are Avada's *sequence*
   classes: the FIRST imageframe on any page gets them, not just the flags. It
   capped the Nicotine Academy hero banner (and every other page's first framed
   image) at 80px. The NGP pages carry no .imageframe-1 element at all, so the
   rule only ever did damage. The flag images themselves are capped below. */

img[src*="/flag"],
img[alt$="flag"] {
    max-width: 80px;
    height: auto;
    vertical-align: middle;
}

/* Media Pack icons (page-id-5565): production renders them inline-small, not
   as column-width images. ACF block is text-with-image but original markup
   treated these as bullet-list icons. */
.page-id-5565 .chem-twi__image,
.page-id-5565 .chem-text-with-image .chem-twi__image {
    flex: 0 0 40px;
    max-width: 40px;
    min-width: 40px;
    padding-right: 12px;
}

.page-id-5565 .chem-twi__image img {
    width: 28px;
    height: auto;
    display: block;
}

.page-id-5565 .chem-text-with-image {
    margin-bottom: 8px;
}

.page-id-5565 .chem-text-with-image .chem-row {
    align-items: center;
}

/* Hide YITH quantity discount wrapper (heading "Zniżka ilościowa" + table)
   for non-logged-in users. Previous rule only hid the inner table, so the
   "Zniżka ilościowa" label kept showing on test. */
/* R40d (uwaga testera 11.08: brak "ZAPYTAJ O CENE" na saszetkach): usunieta
   kwietniowa reguła chowajaca gosciom KAZDY maxbutton w podsumowaniu.
   Produkcja ukrywa tylko 79 wyliczonych slugow (dokladna lista w
   r38-fixes.css) - produkty uslugowe (saszetki, receptury) pokazuja przycisk
   takze gosciom. Kwietniowy problem duplikatu dotyczyl produktow z listy 79,
   wiec lista pokrywa tamten przypadek. */

/* Hide default WooCommerce "Description/Opis" heading rendered by
   templates/single-product/tabs/description.php — PROD styles it with
   `fusion-woocommerce-tab-title` (hidden); our TEST shows plain <h2>Opis</h2>
   above the description body. Audit PDF 2026-04-24: "na test pod buttonami
   jest nagłówek Opis". */
.single-product .woocommerce-Tabs-panel--description > h2:first-child,
.single-product #tab-description > h2:first-child {
    display: none;
}

/* PROD has no YITH "Quantity discount" table on product pages — hide it
   for everyone, logged in or not (#60). */
.ywdpd-table-discounts-wrapper,
.ywdpd-table-discounts-label,
#ywdpd-quantity-table,
.ywdpd-quantity-table,
.ywdpd-wrapper {
    display: none !important;
}

/* (removed legacy "force square corners" override — the base .chem-legacy-button
   rule now consumes all 4 border-radius inline CSS vars correctly, matching
   PROD behaviour on both square (career) and rounded (VAPY contact, ESG CTA) buttons.) */

/* Single product page: constrain main content to site width */
.single-product .site-main,
.single-product #main {
    max-width: var(--chem-site-width) !important;
    margin: 0 auto !important;
    padding: 0 var(--chem-container-padding) !important;
}

/* Avada accordion toggle icon: the imported content uses awb-icons font
   which isn't loaded. Replace with simple +/- via CSS. */
.fusion-accordian .panel-title a .fa-fusion-box::before,
.chem-legacy-accordian .panel-title a .fa-fusion-box::before,
[class*="fusion-accordian"] .fa-fusion-box::before,
[class*="chem-legacy-accordian"] .fa-fusion-box::before {
    content: "+" !important;
    font-family: inherit !important;
    font-weight: 700;
    font-size: 16px;
}

.fusion-accordian .panel-title a.active .fa-fusion-box::before,
.chem-legacy-accordian .panel-title a.active .fa-fusion-box::before,
[class*="fusion-accordian"] a.active .fa-fusion-box::before,
[class*="chem-legacy-accordian"] a.active .fa-fusion-box::before {
    content: "–" !important;
}

/* Currency picker dropdown: prod is narrow (~80px), not the generic 260px submenu */
li.menu-item-vapycurrency > ul.sub-menu,
li.menu-item-vapycurrency > .chem-dropdown-list,
li[class*="currency"] > ul.sub-menu {
    min-width: 80px !important;
    width: auto !important;
}

li.menu-item-vapycurrency > ul.sub-menu a,
li[class*="currency"] > ul.sub-menu a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* IOD (Data Protection Officer) → footer: remove excessive empty space.
   Caused by trailing <div style="all: initial"> injected by PixieBrix
   and empty .chem-legacy-fullwidth rows with large padding. */
.chem-legacy-fullwidth:empty,
.chem-legacy-builder-row:empty,
.chem-legacy-column-wrapper:empty {
    display: none !important;
}

.page-content > article > .chem-page-builder > .chem-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Mega-menu footer link rules live in main.css (single source of truth). */

/* Hide any leftover empty mega-menu columns (defensive). */
.chem-megamenu__column:empty,
.chem-megamenu__column:has(> .chem-megamenu__title:only-child):has(.chem-megamenu__list:empty) {
    display: none !important;
}

/* ==========================================================================
   WooCommerce: my-account (login + register), shop archive, single product
   ========================================================================== */

/* ---- My Account: login + register columns ---- */

.woocommerce-account .u-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 40px var(--chem-container-padding);
}

/* WooCommerce's `.col2-set` carries a legacy `content:""; display:table`
   clearfix on ::before / ::after. In a flex parent that pseudo becomes a
   phantom flex item occupying the first row — pushing login to col 2 and
   register to col 1 of row 2, i.e. stacked vertically. Neutralise here so
   login + register render side-by-side (audit PDF 2026-04-24). */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
    display: none !important;
}

.woocommerce-account .u-columns > .u-column1,
.woocommerce-account .u-columns > .u-column2,
.woocommerce-account .u-columns > .col-1,
.woocommerce-account .u-columns > .col-2 {
    flex: 1 1 calc(50% - 20px);
    min-width: 0;
    max-width: calc(50% - 20px);
}

.woocommerce-account h2 {
    color: var(--chem-primary);
    font-size: var(--chem-h2-size);
    text-align: center;
    margin: 0 0 24px;
}

.woocommerce form.login,
.woocommerce form.register {
    background: #fff;
    border: 1px solid var(--chem-border);
    padding: 28px 30px;
    border-radius: 0;
}

.woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
}

.woocommerce form .form-row label {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--chem-body-text);
}

.woocommerce form .form-row .required { color: var(--chem-primary); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--chem-border);
    border-radius: 0;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
    box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: var(--chem-primary);
}

/* Buttons — fix "disappear on hover" */
.woocommerce button.button,
.woocommerce input[type="submit"].button,
.woocommerce a.button {
    display: inline-block;
    background: var(--chem-primary);
    color: #fff !important;
    border: 2px solid var(--chem-primary);
    padding: 12px 28px;
    font-family: var(--chem-btn-font-family);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input[type="submit"].button:hover,
.woocommerce input[type="submit"].button:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus {
    background: var(--chem-primary-dark);
    border-color: var(--chem-primary-dark);
    color: #fff !important;
}

/* Remember-me + lost-password spacing */
.woocommerce form.login .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.woocommerce-LostPassword { margin-top: 12px; }

/* ---- Shop archive: sidebar layout + product cards ---- */

.woocommerce .woocommerce-products-header .woocommerce-products-header__title,
.woocommerce .page-title,
.woocommerce-page .entry-title {
    color: var(--chem-primary);
    font-size: var(--chem-h1-size);
    line-height: var(--chem-h1-line-height);
    font-weight: 700;
    text-align: left;
    margin: 0 0 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--chem-primary);
    text-align: center;
    padding: 12px 10px;
    margin: 0;
    line-height: 1.3;
}

.woocommerce ul.products li.product {
    text-align: center;
    background: #fff;
    border: 1px solid var(--chem-border);
    transition: box-shadow 0.2s;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* Make whole card clickable via overlay on the title link */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
    color: var(--chem-primary-dark);
}

/* "Dowiedz się więcej" / Read more — no border, centered, primary bg */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin: 0 auto 14px;
    width: calc(100% - 40px);
    text-align: center;
    background: var(--chem-primary);
    border: none;
    color: #fff !important;
    padding: 12px 20px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--chem-primary-dark);
}

/* "Zaloguj się, aby zobaczyć ceny" link below button */
.woocommerce ul.products li.product .chem-login-for-price,
.woocommerce ul.products li.product .login-for-price {
    display: block;
    text-align: center;
    font-size: 13px;
    padding: 0 14px 16px;
    color: var(--chem-primary);
    font-weight: 600;
}

/* ---- Single product ---- */

.single-product div.product .product_title {
    color: var(--chem-primary);
    font-size: var(--chem-h1-size);
    line-height: var(--chem-h1-line-height);
    font-weight: 700;
    text-align: left;
    margin: 0 0 18px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.single-product div.product .woocommerce-product-details__short-description {
    font-size: var(--chem-body-size);
    line-height: var(--chem-body-line-height);
    color: var(--chem-body-text);
}

.single-product div.product .woocommerce-product-details__short-description h2,
.single-product div.product .woocommerce-product-details__short-description h3 {
    color: var(--chem-primary);
    font-weight: 700;
    text-align: left;
}

/* ==========================================================================
   chem-legacy-* prefix — convert-fusion.php renames fusion-* → chem-legacy-*
   when importing Avada page content. Mirror the key visual rules.
   ========================================================================== */

.chem-legacy-fullwidth { width: 100%; }

/* .chem-legacy-builder-row padding was 0 var(--chem-container-padding) (30px each side)
   but PROD renders 0 – it must be overridden by Avada core CSS. Removing padding here
   matches PROD and prevents content from being squeezed, which was causing tables to
   wrap more lines and news-item blocks to grow +80-150px each (verified on regulacje-ngp,
   2026-04-21). */
.chem-legacy-builder-row,
.chem-legacy-row {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Same reasoning as above: PROD renders 0 padding on layout columns. */
.chem-legacy-layout-column,
.chem-legacy-column,
[class*="chem_legacy_builder_column"] {
    padding: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}

.chem_legacy_builder_column_1_1 { flex: 0 0 100%; max-width: 100%; }
.chem_legacy_builder_column_1_2 { flex: 0 0 50%; max-width: 50%; }
.chem_legacy_builder_column_1_3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.chem_legacy_builder_column_2_3 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.chem_legacy_builder_column_1_4 { flex: 0 0 25%; max-width: 25%; }
.chem_legacy_builder_column_3_4 { flex: 0 0 75%; max-width: 75%; }

@media (max-width: 800px) {
    [class*="chem_legacy_builder_column"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.chem-legacy-flex-container { display: flex; }
.chem-legacy-flex-column { flex-direction: column; }
.chem-legacy-flex-align-items-flex-start { align-items: flex-start; }
.chem-legacy-flex-align-self-center { align-self: center; }
.chem-legacy-flex-justify-content-center { justify-content: center; }
.chem-legacy-flex-justify-content-flex-end { justify-content: flex-end; }
.chem-legacy-flex-justify-content-flex-start { justify-content: flex-start; }
.chem-legacy-flex-justify-content-space-between { justify-content: space-between; }
.chem-legacy-flex-content-wrap { flex-wrap: wrap; }

@media (min-width: 1025px) {
    .chem-legacy-no-large-visibility { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .chem-legacy-no-medium-visibility { display: none !important; }
}
@media (max-width: 640px) {
    .chem-legacy-no-small-visibility { display: none !important; }
}

/* Titles */
.chem-legacy-title,
.chem-legacy-title-sc-wrapper {
    clear: both;
    margin: 0 0 0.5em;
}

.chem-legacy-title h1,
.chem-legacy-title h2,
.chem-legacy-title h3,
.chem-legacy-title h4,
.chem-legacy-title-heading {
    color: var(--chem-heading-color);
    font-family: var(--chem-font-heading);
    font-weight: var(--chem-heading-weight);
    margin: 0;
    text-align: left;
}

.chem-legacy-title-size-one h1,
.chem-legacy-title-size-one .chem-legacy-title-heading { font-size: var(--chem-h1-size); line-height: var(--chem-h1-line-height); }
.chem-legacy-title-size-two h2,
.chem-legacy-title-size-two .chem-legacy-title-heading { font-size: var(--chem-h2-size); line-height: var(--chem-h2-line-height); }
.chem-legacy-title-size-three h3,
.chem-legacy-title-size-three .chem-legacy-title-heading { font-size: var(--chem-h3-size); line-height: var(--chem-h3-line-height); }
.chem-legacy-title-size-four h4,
.chem-legacy-title-size-four .chem-legacy-title-heading { font-size: var(--chem-h4-size); }

/* R17: some converted titles keep Avada's inline `font-size:1em` on the heading
   itself (e.g. strategia-esg, zrownowazony-rozwoj PL). Inline wins over the
   size-N rules above, so the heading collapsed to 1em = 16px. On PROD the size
   lives on the .fusion-title WRAPPER and the 1em heading inherits it — mirror
   that by putting the size on the wrapper here too, so the inline 1em resolves
   to the right value. The per-page --chem-awb-font-size rules below stay more
   specific (body.page-id + [style]) and still win where a custom size was set. */
.chem-legacy-title.chem-legacy-title-size-one  { font-size: var(--chem-h1-size); }
.chem-legacy-title.chem-legacy-title-size-two  { font-size: var(--chem-h2-size); }
.chem-legacy-title.chem-legacy-title-size-three{ font-size: var(--chem-h3-size); }
.chem-legacy-title.chem-legacy-title-size-four { font-size: var(--chem-h4-size); }

/* When Avada inline style sets explicit --chem-awb-font-size on a title wrapper,
   apply it (matches PROD's .fusion-title { font-size: var(--awb-font-size) } pattern).
   The inline style="font-size:1em" on h1/h2 then inherits this size from the wrapper.
   Scoped per page: applying globally regresses standardy-jakosc-pl +127 and
   homepage +27 (PL text longer = more lines = more height). Per-page whitelist:
   standards-quality EN (5), sustainable-nicotine-manufacturing EN (113543),
   zrownowazona-produkcja-nikotyny PL (114569) – all verified to improve by
   30-140 px (2026-04-22). */
body.page-id-5 .chem-legacy-title[style*="--chem-awb-font-size"],
body.page-id-113543 .chem-legacy-title[style*="--chem-awb-font-size"],
body.page-id-114569 .chem-legacy-title[style*="--chem-awb-font-size"] {
    font-size: var(--chem-awb-font-size);
    line-height: 1.2;
}

.chem-legacy-title.title-heading-left h2,
.chem-legacy-title.title-heading-left h3,
.chem-legacy-title.title-heading-left .chem-legacy-title-heading { text-align: left; }

.chem-legacy-title-center h2,
.chem-legacy-title-center h3,
.chem-legacy-title-center .chem-legacy-title-heading { text-align: center; }

.chem-legacy-sep-none .chem-legacy-title-sep-container { display: none; }

/* Body text */
[class^="chem-legacy-text-"],
[class*=" chem-legacy-text-"],
.chem-legacy-text {
    color: var(--chem-awb-text-color, var(--chem-body-text));
    font-family: var(--chem-font-body);
    font-size: var(--chem-body-size);
    line-height: var(--chem-body-line-height);
}

[class^="chem-legacy-text-"] p,
[class*=" chem-legacy-text-"] p,
.chem-legacy-text p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 20px;
}

[class^="chem-legacy-text-"] h1, [class*=" chem-legacy-text-"] h1, .chem-legacy-text h1,
[class^="chem-legacy-text-"] h2, [class*=" chem-legacy-text-"] h2, .chem-legacy-text h2,
[class^="chem-legacy-text-"] h3, [class*=" chem-legacy-text-"] h3, .chem-legacy-text h3,
[class^="chem-legacy-text-"] h4, [class*=" chem-legacy-text-"] h4, .chem-legacy-text h4 {
    color: var(--chem-heading-color);
    font-weight: var(--chem-heading-weight);
}

/* List markers: prod uses default black, but inherits `--chem-awb-text-color`
   when parent .chem-legacy-text block carries that inline var (e.g. on
   /pl/ngp-regulation-news/ Latvia/Lithuania bullets are orange #ea5b0c). */
.chem-legacy-text ul > li::marker,
[class^="chem-legacy-text-"] ul > li::marker,
[class*=" chem-legacy-text-"] ul > li::marker {
    color: var(--chem-awb-text-color, var(--chem-body-text));
}

/* Match PROD Fusion default: content UL/OL indented 40px (TEST browser default
   was 20px → bullets sat under the preceding heading with no visual hierarchy,
   reported on /pl/ngp-regulation-news/, /pl/certyfikowany-*, VAPY product etc.). */
.chem-legacy-text ul,
.chem-legacy-text ol,
[class^="chem-legacy-text-"] ul,
[class*=" chem-legacy-text-"] ul,
[class^="chem-legacy-text-"] ol,
[class*=" chem-legacy-text-"] ol {
    padding-left: 40px;
}

/* When we inject chem-subcategory-fallback-thumb before subcategory title
   (WC subcategory has thumbnail_id=0), hide the default WC placeholder that
   would otherwise render afterwards at priority 10. */
.woocommerce ul.products li.product-category:has(.chem-subcategory-fallback-thumb) > a > img.woocommerce-placeholder,
.woocommerce ul.products li.product-category:has(.chem-subcategory-fallback-thumb) > a > img[src*="woocommerce-placeholder"] {
    display: none;
}
.chem-subcategory-fallback-thumb img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 10px;
}

/* Yoast/Avada breadcrumb widget (nav.chem-legacy-breadcrumbs > ol > li): render
   inline with "/" separators, no numbered-list markers (was showing "1. Strona
   główna / 2. Polski / 3. Nasza oferta" on /pl/nasza-oferta/ per audit PDF 2026-04-24). */
.chem-legacy-breadcrumbs ol,
.chem-awb-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}
.chem-legacy-breadcrumbs li,
.chem-awb-breadcrumb-list > li {
    display: inline;
    margin: 0;
    padding: 0;
    color: #747474;
    font-size: 14px;
}
.chem-legacy-breadcrumbs a.chem-legacy-breadcrumb-link,
.chem-legacy-breadcrumbs li > a {
    color: inherit;
    text-decoration: none;
}
.chem-legacy-breadcrumbs a:hover { text-decoration: underline; }
.chem-awb-breadcrumb-sep::after {
    content: var(--chem-awb-breadcrumb-sep, '/');
    padding: 0 .5em;
    color: #747474;
}

/* Underline links inside editorial content (PROD default Fusion behaviour).
   Global `a { text-decoration: none }` in base.css is needed for menus/buttons,
   but content links (certyfikaty, oferty-pracy, FAQ etc.) should underline. */
.chem-legacy-text a,
[class^="chem-legacy-text-"] a,
[class*=" chem-legacy-text-"] a,
.chem-html-section__content a:not(.chem-button):not(.chem-legacy-button):not(.maxbutton):not([class*="button-flat"]),
.post-content a:not(.chem-button):not(.chem-legacy-button):not(.maxbutton):not([class*="button-flat"]) {
    text-decoration: underline;
}
.chem-legacy-text a:hover,
[class^="chem-legacy-text-"] a:hover,
[class*=" chem-legacy-text-"] a:hover {
    text-decoration: underline;
}

/* Separators */
.chem-legacy-separator {
    width: 100%;
    margin: 20px 0;
    clear: both;
}

.chem-legacy-separator-border {
    border-top: 1px dashed var(--chem-primary);
    width: 100%;
}

.chem-legacy-separator-border.sep-single { border-top-style: dashed; }
.chem-legacy-separator-border.sep-solid { border-top-style: solid; }
.chem-legacy-separator-border.sep-dashed { border-top-style: dashed; }
.chem-legacy-separator-border.sep-dotted { border-top-style: dotted; }

.chem-legacy-full-width-sep { margin-left: 0; margin-right: 0; }

/* Separator with centered icon (PROD: `.fusion-separator.fusion-has-icon`): two
   gray borders flank a circular icon-wrapper. Needs flex on the parent so the
   borders grow to fill the space on each side of the icon. Missing rules were
   visible as squished ~70px separators on /pl/career-kariera/ (audit PDF 2026-04-24). */
.chem-legacy-separator.chem-legacy-has-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chem-legacy-separator.chem-legacy-has-icon .chem-legacy-separator-border { flex: 1; }

/* Avada icon fonts:
   – `awb-icons` (all `.awb-icon-*` classes, dropdown carets, hamburger etc.)
     shipped with our theme at assets/fonts/icomoon/.
   – `chemnovatic-icons` (custom brand icons, incl. `.chm-heksagon-logo` used in
     dashed separator icons) lives in wp-content/uploads/fusion-icons — the
     folder existed empty on TEST so PROD icon rendered as browser-default circle.
   Both fonts mirror PROD Avada behaviour. */
@font-face {
    font-family: 'awb-icons';
    src: url('../fonts/icomoon/awb-icons.woff') format('woff'),
         url('../fonts/icomoon/awb-icons.ttf') format('truetype'),
         url('../fonts/icomoon/awb-icons.svg#awb-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'chemnovatic-icons';
    src: url('/wp-content/uploads/fusion-icons/chemnovatic-icons-v1.0/fonts/chemnovatic-icons.woff') format('woff'),
         url('/wp-content/uploads/fusion-icons/chemnovatic-icons-v1.0/fonts/chemnovatic-icons.ttf') format('truetype'),
         url('/wp-content/uploads/fusion-icons/chemnovatic-icons-v1.0/fonts/chemnovatic-icons.svg#chemnovatic-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="awb-icon-"],
[class*=" awb-icon-"] {
    font-family: 'awb-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="chm-"],
[class*=" chm-"] {
    font-family: 'chemnovatic-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.chm-heksagon-logo:before { content: "\e901"; }

/* Mirror PROD's `.fusion-builder-row { flex: 1 1 0%; }`: in PROD Avada a row
   always fills its flex-container parent. On TEST the row defaulted to
   `flex: 0 1 auto`, shrinking to intrinsic content when the row holds only
   a separator / has-icon separator (content = 3px border → row width = 0).
   Result: invisible separators on about-us, career-kariera, zrch, certy, esg…
   An earlier per-page override (page-id 45582/63732) did the same for
   regulacje NGP – generalise that here. */
.chem-legacy-flex-container > .chem-legacy-builder-row,
.chem-legacy-flex-container > .chem-legacy-row {
    flex: 1 1 0%;
    width: 100%;
}

/* Buttons — inherit colors from inline CSS vars (--button_gradient_top_color etc.).
   font-weight 400 matches PROD (was 700 → buttons visibly heavier than PROD).
   border-radius uses all 4 corner vars so rounded buttons on VAPY product (12px
   inline) and contact CTAs on ESG pages render correctly. */
.chem-legacy-button {
    display: inline-block;
    background: var(--button_gradient_top_color, var(--chem-primary));
    color: var(--button_accent_color, #fff);
    border: 2px solid var(--button_border_color, var(--chem-primary));
    padding: var(--chem-btn-padding);
    font-family: var(--button_typography-font-family, var(--chem-btn-font-family));
    font-size: var(--chem-btn-font-size);
    font-weight: 400;
    text-transform: var(--button_text_transform, var(--chem-btn-text-transform));
    text-decoration: none;
    border-radius: var(--button-border-radius-top-left, 0)
                   var(--button-border-radius-top-right, 0)
                   var(--button-border-radius-bottom-right, 0)
                   var(--button-border-radius-bottom-left, 0);
    line-height: 1.2;
    margin-top: var(--button_margin-top, 0);
    margin-right: var(--button_margin-right, 0);
    margin-bottom: var(--button_margin-bottom, 0);
    margin-left: var(--button_margin-left, 0);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.chem-legacy-button:hover,
.chem-legacy-button:focus {
    background: var(--button_gradient_top_color_hover, var(--chem-primary-dark));
    color: var(--button_accent_hover_color, #fff);
    border-color: var(--button_border_hover_color, var(--chem-primary-dark));
}

.chem-legacy-button.button-large { padding: 17px 36px; font-size: 16px; }
.chem-legacy-button-text { color: inherit; }

/* Images */
.chem-legacy-image-element,
.chem-legacy-imageframe { display: inline-block; max-width: 100%; }

.chem-legacy-imageframe img { max-width: 100%; height: auto; }

/* Products / offer pages (EN=7, PL produkty=67349, PL nasza-oferta=80995): scraped
   HTML contains `<section id="content" style="float: right">` which on PROD coexists
   with a left sidebar (25%) giving content ~840px. TEST has no sidebar so the floating
   section gets full width (~1186px), making rows 312px wider and sections render shorter.
   Force PROD-equivalent width to match layout (2026-04-21 verified via products-probe). */
.page-id-7 .chem-html-section__content > .chem-legacy-row > section#content,
.page-id-67349 .chem-html-section__content > .chem-legacy-row > section#content,
.page-id-80995 .chem-html-section__content > .chem-legacy-row > section#content {
    max-width: 840px;
    width: 840px;
}

/* Sustainability-certified + certyfikowany-zrownowazony-rozwoj: logo image columns
   (imageframe-6/8/10/12 = CDP, Intertek, SQP, WCA) render at 400px natural height on TEST
   vs 250-290px on PROD. Cap at 300px to match PROD visual (verified via image-height-probe
   2026-04-21). Scoped by page ID so other pages unaffected. */
/* R41p: ryczaltowe max-height:220px usuniete - splaszczalo HACCP (prod
   308x308) i zmniejszalo CDP/Intertek/SQP/WCA. Rozmiary i centrowanie
   per logo w r40-fixes.css (pomiar produkcji 12.08). */

/* Standards & Quality (EN=5, PL=67354): restore baseline per-page strategy.
   IO JS port attempted 2026-04-22 caused same +308px regression on EN (TEST has
   ~1232px extra non-animated content vs PROD – unrelated to animated elements).
   Needs deeper investigation. Reverting to display:none on EN and
   visibility:hidden on PL which match baseline best. */
.page-id-5 .chem-legacy-layout-column.chem-legacy-animated:not(.bg-special) {
    display: none !important;
}
.page-id-67354 .chem-legacy-layout-column.chem-legacy-animated:not(.bg-special) {
    visibility: hidden !important;
}

/* PROD puts <span class="icon-wrapper"> directly inside <div class="fusion-separator">.
   ACF-imported content on TEST wraps icon-wrapper in <p>, which adds ~48px per occurrence
   (line-height + default margins). Collapse these <p> wrappers so the layout matches PROD.
   Verified 2026-04-22 on sustainable-development (7 sections × 48 ≈ 336px). */
.chem-legacy-separator > p:has(> span.icon-wrapper) {
    display: contents;
}

/* Regulacje NGP news items (EN=45582, PL=63732): country flag images render at natural
   height (95-209px) on TEST but PROD caps them at ~100px via Avada CSS. Each news item
   has 1 flag – 20-40 items × 50-100px = 1000-4000px extra.
   Verified via image-height-probe 2026-04-21.
   On EN flags are in imageframe-N (N ≥ 72), hero in imageframe-1/2/3.
   On PL flags are in narrower columns (chem_legacy_builder_column_1_6).
   Two selectors to cover both. */
.page-id-45582 .chem-legacy-imageframe:not(.imageframe-1):not(.imageframe-2):not(.imageframe-3) img,
.page-id-63732 [class*="chem_legacy_builder_column_1_6"] img {
    max-height: 96px;  /* PROD caps every country flag at 96px uniformly (verified 2026-04-22) */
    width: auto;
    object-fit: contain;
}

/* PROD ngp-regulation-news/regulacje-ngp renders content at full 1200px width because
   PROD has no <article> wrapper and no .site-main > .page-content padding. On TEST the
   global rule .site-main > .page-content { padding: 60px 30px; max-width: 1200px }
   squeezes content to 1140px (1200 - 60), which causes every news-item <li> text to wrap
   onto extra lines (+29-74 px per block × 40 blocks).
   Neutralise padding/max-width for these pages so inline [max-width:1200px] on the
   row + 5_6 column can render at full PROD proportions. (verified 2026-04-22) */
body.page-id-45582 .site-main > .page-content,
body.page-id-63732 .site-main > .page-content {
    padding: 0 !important;
    max-width: none !important;
}

/* Row is a flex child of fullwidth-box (which itself is a flex container). With default
   flex-basis:auto, row shrinks to content width (~906px), making 5_6 column narrow and
   forcing list items to wrap onto 2-3 lines. Force 100% width to match PROD 1248px row. */
body.page-id-45582 .chem-legacy-fullwidth > .chem-legacy-builder-row,
body.page-id-63732 .chem-legacy-fullwidth > .chem-legacy-builder-row {
    width: 100% !important;
    flex-basis: 100% !important;
}

/* Table tightening: PROD tables render td padding 1px, margin 0, border-spacing 0.
   ACF-imported tables default to padding 6px 10px + margin 16px + border-spacing 2px,
   which adds ~170 px per table (× 20-40 tables per page = 1000-4000 px).
   Scoped by page ID to avoid breaking other table-rendering contexts.
   IDs: Documentation (5435 EN, 63722 PL, 71965 ES, 71963 PT),
        Regulacje NGP (45582 EN, 63732 PL),
        Standardy jakości (5 EN, 67354 PL, 73083 ES, 73085 PT).
   Verified via doc-table-probe + ngp probe 2026-04-21. */
.page-id-5435 .chem-html-section__content table,
.page-id-63722 .chem-html-section__content table,
.page-id-71965 .chem-html-section__content table,
.page-id-71963 .chem-html-section__content table,
.page-id-45582 .chem-html-section__content table,
.page-id-63732 .chem-html-section__content table,
.page-id-5 .chem-html-section__content table,
.page-id-67354 .chem-html-section__content table {
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}
.page-id-5435 .chem-html-section__content table td,
.page-id-5435 .chem-html-section__content table th,
.page-id-63722 .chem-html-section__content table td,
.page-id-63722 .chem-html-section__content table th,
.page-id-71965 .chem-html-section__content table td,
.page-id-71965 .chem-html-section__content table th,
.page-id-71963 .chem-html-section__content table td,
.page-id-71963 .chem-html-section__content table th,
.page-id-45582 .chem-html-section__content table td,
.page-id-45582 .chem-html-section__content table th,
.page-id-63732 .chem-html-section__content table td,
.page-id-63732 .chem-html-section__content table th,
.page-id-5 .chem-html-section__content table td,
.page-id-5 .chem-html-section__content table th,
.page-id-67354 .chem-html-section__content table td,
.page-id-67354 .chem-html-section__content table th {
    padding: 1px;
}

/* Column wrappers (PROD renders padding: 0; 20px was an erroneous default from
   Avada shadow variant – verified via computed-style-diff 2026-04-21) */
.chem-legacy-column-wrapper { position: relative; padding: 0; }

/* WooCommerce category description + body text: enforce 16px/1.8 (prod values).
   Plugin CSS (woocommerce-products-filter) overrides to 15px.
   Exclude paragraphs with inline font-size (e.g. asterisk notes 12px on prod). */
.woocommerce .term-description,
.woocommerce .term-description p,
.woocommerce-page .term-description,
.woocommerce-page .term-description p,
.woocommerce div.product .woocommerce-product-details__short-description p:not([style*="font-size"]),
.woocommerce .product_meta,
.tax-product_cat .term-description p {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* Responsive: stack my-account columns below tablet */
@media (max-width: 800px) {
    .woocommerce-account .u-columns {
        flex-direction: column;
        gap: 24px;
    }
    .woocommerce ul.products li.product .button {
        width: calc(100% - 20px);
    }
}

/* Shop/product sidebar Kategorie: match PROD iksm-widget visual style.
   PROD uses a custom category plugin with no counts, orange-bold-underlined
   active item, and sticky behavior (fusion-sticky-sidebar). TEST uses the
   default widget_product_categories, which shows counts and plain active
   state. These rules normalize the visuals; widget order differs because
   IKSM plugin ordering can't be replicated via CSS. */
.chem-shop-sidebar .cat-item .count,
.chem-shop-sidebar .product-categories .count,
.chem-shop-sidebar .widget_product_categories .count {
    display: none !important;
}
.chem-shop-sidebar .cat-item.current-cat > a,
.chem-shop-sidebar .cat-item.current-cat-parent > a,
.chem-shop-sidebar li.current-cat > a {
    color: #ea5b0c !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* IKSM widget (iks-menu-pro) active state + auto-expand path to current.
   PROD uses Pro license which renders iksm-term--expanded classes server-side
   and inline display:block on ancestor trees. TEST runs the same plugin
   without a Pro license (data-is-pro="0"), so auto-expand is disabled.
   Replicate via CSS :has() — every ancestor tree of the current item is
   forced open.
   PROD active state: BLACK bold underlined (contrast with orange inactive).
   PROD font-size: 15px (default IKSM renders 14px). */
.chem-shop-sidebar .iksm-term__text,
.chem-shop-sidebar .iksm-term__link {
    font-size: 15px;
}
.chem-shop-sidebar .iksm-term--current > .iksm-term__inner .iksm-term__link,
.chem-shop-sidebar .iksm-term--current > .iksm-term__inner .iksm-term__text {
    color: #000 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chem-shop-sidebar .iksm-terms-tree--children:has(.iksm-term--current) {
    display: block !important;
}
/* Sticky sidebar on desktop — matches PROD fusion-sticky-sidebar behavior.
   Requires flex parent (chem-shop-layout is display:flex). Limit max-height
   so long menus can scroll inside the sticky container.
   top: 90px accounts for .chem-secondary-main-menu fixed header (~66px) plus
   ~24px breathing room. Without this the header overlaps the sidebar title. */
@media (min-width: 992px) {
    .single-product .chem-shop-sidebar,
    .tax-product_cat .chem-shop-sidebar,
    .post-type-archive-product .chem-shop-sidebar,
    .chem-offer-layout .chem-shop-sidebar,
    .chem-blog-sidebar {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   Single product page: PROD parity fixes (2026-04-22)
   Reference URLs:
     PROD: https://chemnovatic.com/pl/product/purenic-99-czysta-nikotyna/
     TEST: https://chemnovatic.marcetino.com/pl/product/purenic-99-czysta-nikotyna/
   PROD layout math: main 1200 content area, sidebar 288 + gap 72 + content 840.
   TEST was: sidebar 288 + gap 30 + content 762, due to compounded horizontal
   padding (main 30 + chem-shop-layout 30) + narrower flex gap.
   ========================================================================== */

/* Widen product layout to match PROD. Remove compounded horizontal padding
   and use 72px flex gap. Only for single-product (not shop/archive). */
.single-product main#main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.single-product .chem-shop-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 72px !important;
}

/* Hide tab header UL. PROD has single "Opis" tab with ul.wc-tabs display:none. */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs ul.wc-tabs {
    display: none !important;
}

/* Variation dropdown ("Pojemność" select): match PROD font-size + gray color.
   TEST had 14px/#000, PROD has 16px/#75757a. */
.single-product .summary .variations select {
    font-size: 16px !important;
    color: #75757a !important;
}

/* Variation label ("Pojemność"): normal weight + relaxed line-height like PROD.
   TEST was 700/32px, PROD is 400/28.8px. Need !important to beat default
   WooCommerce/browser label-in-table bold. */
.single-product .summary .variations th.label,
.single-product .summary .variations label {
    font-weight: 400 !important;
    line-height: 1.8 !important;
}

/* Product description blockquote: match PROD Fusion styling.
   Orange left border, light bg, italic. TEST had no styling at all. */
.single-product blockquote,
.single-product .woocommerce-Tabs-panel blockquote,
.single-product .chem-col blockquote {
    border-left: 4px solid #ea5b0c;
    background-color: #f9f9fb;
    padding: 15px;
    font-style: italic;
    color: #000;
    margin: 15px 0;
}

/* ============================================================
   CLIENT FEEDBACK 2026-05-04 — TEST vs PROD parity round 2
   PDFs: Chemnovatic (2).pdf (24pp desktop) + Chemnovatic mobile.pdf (36pp)
   ============================================================ */

/* (A) Product category tile: PROD shows BOTH the under-image "Learn more"
       button AND the wcb2b "Log in to see prices" message under each guest
       tile (tester re-verify 2026-06-16: "brakuje napisu 'Log in to see
       prices'"). Earlier rounds hid this message; restore it so guest tiles
       match PROD and the dead space under the name is filled. */
.tax-product_cat.woocommerce ul.products li.product > .wcb2b_login_message,
.tax-product_tag.woocommerce ul.products li.product > .wcb2b_login_message {
    display: block !important;
}

/* (B) Bullet point indent: PROD indents <ul>/<ol> bullets so dots align with
       paragraph start (NOT with heading). On test the entry-content scope
       reset padding to 0, putting bullets flush left. Cited on about-us,
       gliceryna-roslinna, pmta, vapy-2-go. */
.entry-content ul:not(.products):not(.menu):not(.children):not(.chem-menu):not(.chem-megamenu__list):not(.chem-megamenu__items):not(.chem-footer-menu):not(.chem-footer-list),
.entry-content ol:not(.products):not(.menu):not(.children),
.chem-html-section__content ul:not(.products):not(.menu):not(.children):not(.chem-menu):not(.chem-megamenu__list):not(.chem-megamenu__items),
.chem-html-section__content ol:not(.products):not(.menu):not(.children) {
    padding-left: 40px;
    margin-left: 0;
    list-style-position: outside;
}

/* (C) PixieBrix browser-extension overlay junk leaks into ACF content rendered
       on test (Marcetino's logged-in user has the extension installed). The
       injected divs are invisible (pointer-events: none) but their reflow
       cost shows up in Lighthouse and they render as empty boxes in some
       PDF print views. Belt-and-braces hide. */
.chem-col > div[style*="all: initial"],
.chem-col > #pixiebrix-quickbar-container,
.entry-content > div[style*="all: initial"] {
    display: none !important;
}

/* (D) /pl/prawo-do-anulowania/ (page-id 63768): hide redundant first paragraph
       "Prawo do anulowania" inside content — duplicates the H1 above it.
       TEST renders the page-title H1 + this paragraph; PROD renders only one. */
body.page-id-63768 .chem-html-section__content > .chem-section .chem-col--1-1 > p:first-child {
    display: none;
}

/* (E) Mobile container width: many pages on test render narrower than PROD
       on small viewports because .site-main > .page-content has 30px
       horizontal padding. PROD uses 16px (matches Avada small-breakpoint
       container padding). Cited on about-us, career-kariera, strategia-esg,
       odpowiedzialnosc-spoleczna, prawo-do-anulowania, vapy-2-go, surowce-*. */
@media (max-width: 800px) {
    .site-main > .page-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .chem-html-section__content,
    .chem-page-builder {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Ensure all chem-col percentages stack on mobile (PROD does this via
       --awb-width-small:100% inline var; we don't have those on test). */
    .chem-section > .chem-row > .chem-col--1-2,
    .chem-section > .chem-row > .chem-col--1-3,
    .chem-section > .chem-row > .chem-col--2-3,
    .chem-section > .chem-row > .chem-col--3-4,
    .chem-section > .chem-row > .chem-col--1-4,
    .chem-section > .chem-row > .chem-col--2-5,
    .chem-section > .chem-row > .chem-col--3-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* (F) Mobile contact CTA buttons (Email + Telefon): PROD shows them
       inline-block with envelope/phone icon, auto width, centered. On test
       they stretched full-width and lost icons. Cap width and re-add icons
       via Font Awesome ::before. The chem-button class wraps both. */
@media (max-width: 800px) {
    .chem-cta-section .chem-button,
    .chem-section .chem-button,
    .chem-html-section__content .chem-button {
        width: auto;
        max-width: calc(100% - 32px);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
}
/* Re-add envelope/phone icon prefix on contact buttons that have lost
   the inline FA <i> in migration. Buttons whose href starts with mailto:
   or tel: get an auto-icon. */
.chem-button[href^="mailto:"]::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0e0"; /* fa-envelope */
    margin-right: 6px;
}
.chem-button[href^="tel:"]::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f879"; /* fa-phone-alt */
    margin-right: 6px;
}

/* (G) /pl/strategia-esg/ (page-id 63760) defensive layout: force chem-row
       flex on the CSR section to prevent the "every word vertical" wrap
       observed on desktop screenshot (Chemnovatic (2).pdf p.10). Root cause
       likely flex stripped by 3rd-party browser-extension content (PixieBrix
       overlays) injected mid-row. */
body.page-id-63760 .chem-section > .chem-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}
body.page-id-63760 .chem-section > .chem-row > .chem-col {
    box-sizing: border-box;
}

/* (H1) Hide image references that 404 on BOTH PROD and TEST (broken
        references migrated from old DB content). Removing them visually
        matches PROD which also doesn't render them.
        R29: STC_PureNic99-1 removed from this list — PROD now serves it
        (webp via content negotiation; plain PNG request 404s, which is what
        fooled the original check) and shows the SUPPLY STC banner. The file
        was uploaded to staging uploads. */
img[src*="foto-mg-2-6b9e"] {
    display: none !important;
}

/* (H2) /pl/moje-konto/ (woocommerce account login) mobile fix: the u-columns
       col2-set wrapper renders as a 2-column grid that becomes a single-word-
       per-line vertical strip on mobile if no max-width is set. Force stack +
       full width. */
@media (max-width: 800px) {
    .woocommerce-account #customer_login.u-columns,
    .woocommerce-account #customer_login.col2-set {
        display: block !important;
    }
    .woocommerce-account #customer_login .u-column1,
    .woocommerce-account #customer_login .u-column2,
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-bottom: 30px;
    }
    .woocommerce-account #customer_login .woocommerce-form input,
    .woocommerce-account #customer_login .woocommerce-form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   CLIENT FEEDBACK 2026-05-08 - "Chemnovatic konto.pdf"
   My Account dashboard / navigation / addresses / account-details + Cart
   ========================================================================== */

/* (1) Hello bar (rendered by header.php) above the site-main on My Account /
       Cart / Checkout pages for logged-in users.
       PDF 7 p3-4: PROD renders this as a content-width bordered box split
       into two cells (Hello | View cart) by a vertical divider, NOT a
       full-bleed grey strip. */
.chem-account-topbar {
    background: transparent;
    border: none;
    padding: 0 var(--chem-container-padding);
    margin: 24px auto 28px;
    max-width: var(--chem-site-width);
    width: 100%;
    box-sizing: border-box;
}
.chem-account-topbar__inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--chem-border);
    box-sizing: border-box;
}
.chem-account-topbar__hello {
    flex: 1 1 50%;
    display: block;
    align-self: center;
    padding: 16px 22px;
    font-size: 15px;
    color: var(--chem-body-text);
}
.chem-account-topbar__hello::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f058"; /* fa-check-circle */
    color: var(--chem-primary);
    margin-right: 8px;
    font-size: 14px;
}
.chem-account-topbar__hello strong {
    font-weight: 700;
    color: var(--chem-body-text);
}
.chem-account-topbar__cart {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 16px 22px;
    border-left: 1px solid var(--chem-border);
    color: var(--chem-primary);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}
.chem-account-topbar__cart::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f07a"; /* fa-shopping-cart */
    margin-right: 8px;
}
.chem-account-topbar__cart:hover {
    color: var(--chem-primary-dark);
    text-decoration: underline;
}

/* (2) Logged-in My Account body layout: sidebar nav + content side-by-side.
       Default WC wraps everything in `.woocommerce` inside the page content,
       NOT the .u-columns used on the login screen. */
.woocommerce-account.logged-in .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: var(--chem-site-width);
    margin: 0 auto;
    padding: 0 var(--chem-container-padding) 60px;
    box-sizing: border-box;
}
.woocommerce-MyAccount-navigation {
    flex: 0 0 200px;
    max-width: 200px;
    min-width: 0;
}
.woocommerce-MyAccount-content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}
/* PDF 7 p4: PROD frames the dashboard content in a bordered box. Scoped to
   the dashboard endpoint only (body.chem-account-dashboard). */
body.chem-account-dashboard .woocommerce-MyAccount-content {
    border: 1px solid var(--chem-border);
    padding: 30px 35px;
    box-sizing: border-box;
}

/* (3) Sidebar - plain underlined orange links, NO bullets (PROD style).
       Default WC outputs <ul><li>...</ul> which inherits theme bullets. */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li {
    list-style: none !important;
    margin: 0 0 12px;
    /* PROD: thin separator line under each sidebar item (#55) */
    padding: 0 0 12px;
    border-bottom: 1px solid #ededed;
    display: block;
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li::before,
.woocommerce-MyAccount-navigation ul li::marker {
    content: none !important;
    display: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
    color: var(--chem-primary);
    text-decoration: underline;
    font-size: 15px;
    line-height: 1.6;
    display: inline-block;
}
/* PROD marks the active item with a chevron, not bold weight (#55).
   The ::after sits on the <li> so it is not caught by the link underline. */
.woocommerce-MyAccount-navigation ul li.is-active > a {
    font-weight: 400;
}
.woocommerce-MyAccount-navigation ul li.is-active::after {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 14px;
    color: var(--chem-primary);
    margin-left: 7px;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--chem-primary-dark);
}

/* (4) Section heading on Dashboard / Orders / Addresses / Account details.
       Used by chem-myaccount-heading wrapper class injected via templates. */
.chem-myaccount-heading,
.woocommerce-MyAccount-content > h2.chem-myaccount-heading,
.woocommerce-MyAccount-content > .woocommerce-Address > header.woocommerce-Address-title h3 {
    color: var(--chem-primary);
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 18px;
    /* PROD: thin separator line under the section heading (#55) */
    padding-bottom: 14px;
    border-bottom: 1px solid #ededed;
    line-height: 1.2;
}
.woocommerce-MyAccount-content > h3 {
    color: var(--chem-primary);
    font-size: 22px;
    font-weight: 700;
    margin: 24px 0 14px;
}

/* (5) Dashboard intro paragraphs + status lines */
.woocommerce-MyAccount-content > p {
    margin: 0 0 12px;
    line-height: 1.6;
    font-size: 15px;
}
.woocommerce-MyAccount-content > p a {
    color: var(--chem-primary);
    text-decoration: underline;
}
.woocommerce-MyAccount-content > p a:hover {
    color: var(--chem-primary-dark);
}
.chem-account-status-line {
    margin: 6px 0 !important;
    font-size: 15px;
}

/* (6) Notices (woocommerce-message / woocommerce-info) - orange bg, full width.
   !important needed to override main.css:4586 which sets #f7f6f5 bg with !important. */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
    background: var(--chem-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    padding: 14px 18px !important;
    margin: 0 0 24px !important;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
    content: "\f058" !important; /* fa-check-circle */
    color: #fff !important;
    background: transparent !important;
    position: static !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    font-size: 18px;
    line-height: 1;
}
.woocommerce-MyAccount-content .woocommerce-message a,
.woocommerce-MyAccount-content .woocommerce-info a,
.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-info a {
    color: #fff !important;
    text-decoration: underline;
}
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
    background: #fff !important;
    color: var(--chem-primary) !important;
    border: 2px solid #fff !important;
    padding: 8px 18px;
    margin-left: auto;
    font-size: 13px;
    line-height: 1.2;
}
.woocommerce-MyAccount-content .woocommerce-message .button:hover,
.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-info .button:hover {
    background: transparent !important;
    color: #fff !important;
}

/* (7) "+ Add new billing/shipping address" - small text links not big buttons */
.woocommerce-MyAccount-content .my_account_my_address_description,
.woocommerce-MyAccount-content .woocommerce-Addresses-actions {
    margin-bottom: 14px;
}
.woocommerce-MyAccount-content .add-new-address,
.woocommerce-MyAccount-content a.add-new-address,
.woocommerce-MyAccount-content .woocommerce-Address > header.woocommerce-Address-title a {
    color: var(--chem-primary) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* WC default doesn't render an "Add new" link before addresses are added.
   Theme provides custom button-class wrappers via plugin/template - reset. */
.woocommerce-MyAccount-content a.button.add-new-address,
.woocommerce-MyAccount-content .woocommerce-Addresses + p a.button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--chem-primary) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    letter-spacing: 0 !important;
}

/* (8) Edit-address / edit-account form - wider, rounded inputs, taller dropdown */
.woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
    max-width: 100%;
    width: 100%;
}

/* Stack First/Last name vertically (PROD layout, not 50/50) */
.woocommerce-MyAccount-content form .form-row.form-row-first,
.woocommerce-MyAccount-content form .form-row.form-row-last,
.woocommerce-MyAccount-content form .form-row--first,
.woocommerce-MyAccount-content form .form-row--last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    clear: both;
}

/* Labels - normal weight (PROD), not bold */
.woocommerce-MyAccount-content form .form-row label {
    font-weight: 400 !important;
    font-size: 14px;
    color: var(--chem-body-text);
}

/* Slightly rounded inputs/selects + 42px height to match PROD */
.woocommerce-MyAccount-content form .form-row input.input-text,
.woocommerce-MyAccount-content form .form-row select,
.woocommerce-MyAccount-content form .form-row textarea,
.woocommerce-MyAccount-content form .form-row .input-text,
.woocommerce-MyAccount-content form .select2-container--default .select2-selection--single {
    border-radius: 4px !important;
    height: 42px;
    line-height: 1.4;
    box-sizing: border-box;
}
.woocommerce-MyAccount-content form .form-row textarea {
    height: auto;
    min-height: 100px;
}
.woocommerce-MyAccount-content form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px;
}
.woocommerce-MyAccount-content form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* No red dots / underline on required asterisks */
.woocommerce-MyAccount-content form .required,
.woocommerce-MyAccount-content form abbr.required,
.woocommerce-MyAccount-content form abbr[title="required"] {
    text-decoration: none !important;
    border-bottom: 0 !important;
    color: var(--chem-primary);
}
.woocommerce-MyAccount-content form .required::after,
.woocommerce-MyAccount-content form abbr.required::after,
.woocommerce-MyAccount-content form abbr[title="required"]::after {
    content: none !important;
    display: none !important;
}

/* Form helper text (italic em) */
.woocommerce-MyAccount-content form .form-row em {
    color: #777;
    font-size: 13px;
}

/* (9) Account details - no fieldset border around Password change.
       Defensive even though our template doesn't use <fieldset>. */
form.woocommerce-EditAccountForm fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 18px;
}
form.woocommerce-EditAccountForm fieldset legend {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 8px;
    color: var(--chem-body-text);
    padding: 0;
}

/* SAVE CHANGES button - right aligned, save-address button as well */
form.woocommerce-EditAccountForm > p.form-row-button,
form.woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-MyAccount-content form .woocommerce-address-fields > p:last-child {
    text-align: right;
}

/* (10) Addresses list - 2-column grid, even after adding (defensive layout) */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 30px;
}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    max-width: calc(50% - 10px);
    background: #fff;
    border: 1px solid var(--chem-border);
    padding: 18px;
    box-sizing: border-box;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
    margin: 0 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-size: 18px !important;
    margin: 0 !important;
    color: var(--chem-primary);
}
.woocommerce-MyAccount-content .woocommerce-Address address {
    font-style: normal;
    margin: 0;
    line-height: 1.7;
    font-size: 14px;
    color: var(--chem-body-text);
}

/* (10b) WooCommerce Multiple Customer Addresses plugin (wcmca_*) styling.
   The plugin renders its OWN address list below the WC default my-address.php
   output. Hide the default (always empty here, plugin uses its own table)
   and theme the plugin output to match PROD. */

/* Hide WC default top section ("Latest Used Addresses" + 2 empty cards) when
   the WCMCA plugin's container is present below. */
.woocommerce-MyAccount-content #wcmca_custom_addresses ~ * { /* (no-op: just to assert sibling selector availability) */ }
.woocommerce-MyAccount-content .woocommerce-MyAccount-content { /* defensive */ }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-child:not(.chem-account-status-line),
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > .u-columns.woocommerce-Addresses {
    /* Hide WC default empty address tiles when wcmca plugin is rendering its own */
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content:has(#wcmca_custom_addresses) > p:first-of-type,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content:has(#wcmca_custom_addresses) > .u-columns.woocommerce-Addresses {
    display: none !important;
}

/* WCMCA section headings: "Billing Addresses" / "Shipping Addresses" */
.wcmca_additional_addresses_list_title,
h2.wcmca_additional_addresses_list_title {
    color: var(--chem-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin: 24px 0 14px !important;
    line-height: 1.2 !important;
}

/* Add-new-address buttons in the 2-column grid above the address list */
.woocommerce-MyAccount-content #wcmca_custom_addresses > .u-columns.woocommerce-Addresses {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 24px;
}
.woocommerce-MyAccount-content #wcmca_custom_addresses > .u-columns.woocommerce-Addresses > .woocommerce-Address {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    background: transparent;
    border: 0;
    padding: 0;
    text-align: center;
}
/* PROD shows these as small underlined orange text links, not buttons.
   High specificity needed to beat .woocommerce a.button rule from this same
   file (line ~531) and main.css. */
.woocommerce-MyAccount-content #wcmca_custom_addresses a.button.wcmca_add_new_address_button,
.woocommerce-account .woocommerce-MyAccount-content a.button.wcmca_add_new_address_button,
.woocommerce a.button.wcmca_add_new_address_button {
    background: transparent !important;
    color: var(--chem-primary) !important;
    border: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}
.woocommerce-MyAccount-content #wcmca_custom_addresses a.button.wcmca_add_new_address_button:hover,
.woocommerce a.button.wcmca_add_new_address_button:hover {
    background: transparent !important;
    color: var(--chem-primary-dark) !important;
    text-decoration: underline !important;
    border: 0 !important;
}
.wcmca_add_new_address_button i,
.wcmca_add_new_address_button .fas {
    margin-right: 4px;
}

/* Bulk delete button - smaller, right aligned */
/* PROD has no bulk-select on addresses (#57): hide the "Delete selected"
   button and the per-card select checkboxes that drive it. */
.wcmca_action_button_container,
.wcmca_bulk_delete_button,
button.wcmca_bulk_delete_button,
.wcmca_address_title_checkbox {
    display: none !important;
}

/* Address card: title row + action links + default badge */
#wcmca_custom_addresses .col2-set.addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 30px;
}
/* PROD: each address card spans the full content width (#57), not 50%.
   PDF 7 p5-6: PROD cards are larger (more padding) and sit on a light-grey
   fill. */
#wcmca_custom_addresses .col-1.address,
#wcmca_custom_addresses .col-2.address {
    flex: 1 1 100%;
    max-width: 100%;
    background: #f7f7f7;
    border: 1px solid var(--chem-border);
    padding: 26px 28px;
    box-sizing: border-box;
}
.wcmcam_address_block_title {
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--chem-border);
}
/* PDF 7 p5: PROD renders the address summary title in black, not orange. */
h3.wcmca_address_title {
    color: var(--chem-body-text) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.wcmca_address_title_text_content {
    color: var(--chem-body-text);
    font-weight: 700;
}

/* Action links: Duplicate | Copy to shipping | Edit | Delete */
.wcmcam_address_block_title a,
a.wcmca_duplicate_address_button,
a.wcmca_duplicate_to_ship_address_button,
a.wcmca_edit_address_button,
a.wcmca_delete_address_button {
    color: var(--chem-primary) !important;
    text-decoration: underline !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin: 0 4px;
}
.class_action_sparator {
    color: #999;
    margin: 0 2px;
}

/* Default address badge (already inline-styled with color, just ensure spacing) */
.wcmca_default_address_badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    border-radius: 0;
}

/* Fix h5 field labels inside addresses - small, dark, NOT bold (PROD #57) */
h5.wcmca_personal_data_title,
.wcmca_address_container h5 {
    color: #777 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    margin: 14px 0 2px !important;
    line-height: 1.3 !important;
}
h5.wcmca_personal_data_title:first-of-type,
.wcmca_address_container h5:first-of-type {
    margin-top: 0 !important;
}
.wcmca_address_container .wcmca_clear_right {
    display: block;
    color: var(--chem-body-text);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 6px;
}
.wcmca_address_container .required {
    color: var(--chem-primary);
}

/* (10c) WCMCA "Add new address" modal inputs.
   PDF 7 p7: PROD uses a light-grey field border, not the black one TEST
   inherited from a base input rule. */
#wcmca_address_form_container_billing input[type="text"],
#wcmca_address_form_container_billing input[type="tel"],
#wcmca_address_form_container_billing input[type="email"],
#wcmca_address_form_container_billing input[type="number"],
#wcmca_address_form_container_billing select,
#wcmca_address_form_container_shipping input[type="text"],
#wcmca_address_form_container_shipping input[type="tel"],
#wcmca_address_form_container_shipping input[type="email"],
#wcmca_address_form_container_shipping input[type="number"],
#wcmca_address_form_container_shipping select {
    border-radius: 3px;
    border: 1px solid #ccc;
}

/* (11) Attachments - frame around "no attachments" message */
.woocommerce-MyAccount-content .chem-attachments-empty,
.woocommerce-MyAccount-content .attachments-empty,
.woocommerce-MyAccount-content > p.no-attachments,
.woocommerce-MyAccount-content .myvapy-attachments-empty {
    border: 1px solid var(--chem-border);
    background: #fff;
    padding: 14px 18px;
    border-radius: 0;
    margin: 0 0 20px;
}

/* (12) Cart page — heading, two-column bottom (#59), totals box */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .woocommerce-notices-wrapper {
    max-width: var(--chem-site-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--chem-container-padding);
    padding-right: var(--chem-container-padding);
    box-sizing: border-box;
}

.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 30px;
}

/* "You Have N Items" heading injected via inc/woocommerce.php
   woocommerce_before_cart_table hook (h2 inside .woocommerce-content-box). */
.woocommerce-cart .woocommerce-cart-form .woocommerce-content-box {
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
    border: 0;
    width: 100%;
}
.woocommerce-cart .woocommerce-cart-form .woocommerce-content-box h2 {
    color: var(--chem-primary);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
    text-align: left;
    line-height: 1.2;
}

/* Cart-row quantity with -/+ stepper buttons (#59) */
.woocommerce-cart td.product-quantity .quantity {
    display: inline-flex;
    align-items: center;
}
.woocommerce-cart td.product-quantity .quantity input.qty {
    width: 46px;
    height: 32px;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--chem-border);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -moz-appearance: textfield;
}
.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce-cart td.product-quantity .quantity .chem-qty-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--chem-border);
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.woocommerce-cart td.product-quantity .quantity .chem-qty-btn:hover {
    background: var(--chem-primary);
    border-color: var(--chem-primary);
    color: #fff;
}

/* Cart bottom — two columns: promo-code box (left) + totals box (right) */
.woocommerce-cart .chem-cart-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    margin: 26px 0 60px;
}

/* Promo-code box (left) */
.woocommerce-cart .chem-cart-coupon {
    flex: 1 1 300px;
}
.woocommerce-cart .chem-cart-coupon__title {
    color: var(--chem-primary);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
}
.woocommerce-cart .chem-cart-coupon .coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    max-width: 430px;
}
.woocommerce-cart .chem-cart-coupon .coupon input.input-text {
    flex: 1 1 auto;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--chem-border);
    border-radius: 0;
    box-sizing: border-box;
}
.woocommerce-cart .chem-cart-coupon .coupon button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Totals box (right) */
.woocommerce-cart .chem-cart-totals-wrap {
    flex: 0 0 360px;
    margin-left: auto;
}
.woocommerce-cart .cart_totals {
    background: #fff;
    border: 1px solid var(--chem-border);
    padding: 22px;
    box-sizing: border-box;
}
.woocommerce-cart .cart_totals h2 {
    color: var(--chem-primary);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
    text-align: left;
}
.woocommerce-cart .cart_totals table {
    width: 100%;
    margin: 0 0 16px;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--chem-border);
    background: transparent;
}
/* "Update basket" — gray button above the orange checkout button */
.woocommerce-cart .cart_totals .chem-cart-update {
    display: block;
    width: 100%;
    text-align: center;
    background: #e2e2e2;
    color: #333 !important;
    padding: 13px 20px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.woocommerce-cart .cart_totals .chem-cart-update:hover:not([disabled]) {
    background: #d2d2d2;
}
.woocommerce-cart .cart_totals .chem-cart-update[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
    margin: 0;
    padding: 0;
}
.woocommerce-cart .cart_totals .checkout-button.button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--chem-primary);
    color: #fff !important;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce-cart .cart_totals .checkout-button.button:hover {
    background: var(--chem-primary-dark);
}

/* "To proceed with orders please fill in your data" notice (rendered by
   inc/woocommerce.php on cart for users without billing data). */
.chem-cart-fillin-notice {
    background: #ffe7d4;
    color: var(--chem-body-text);
    padding: 12px 16px;
    margin: 0 0 18px;
    border-left: 3px solid var(--chem-primary);
    font-size: 14px;
    line-height: 1.5;
}
.chem-cart-fillin-notice a {
    color: var(--chem-primary);
    text-decoration: underline;
    font-weight: 600;
}
.chem-cart-fillin-notice a:hover {
    color: var(--chem-primary-dark);
}

/* (12b) Cart page parity — PDF 7 p1-2. */
/* Table header row: PROD has no grey fill (TEST inherited #f5f5f5). */
.woocommerce-cart table.cart thead,
.woocommerce-cart table.cart thead tr,
.woocommerce-cart table.cart thead th,
.woocommerce-cart table.shop_table thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--chem-body-text);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    border-bottom: 1px solid var(--chem-border);
}
/* Remove-item "×" must not be underlined (PDF 7 p1). */
.woocommerce-cart table.cart td.product-remove a,
.woocommerce-cart table.cart td.product-remove a.remove {
    text-decoration: none !important;
}
/* Coupon box + totals box: equal halves — PROD totals box is 1/2, not 1/3. */
.woocommerce-cart .chem-cart-coupon {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
}
.woocommerce-cart .chem-cart-totals-wrap {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    margin-left: 0;
}
/* Totals table — breathing room so rows don't touch the box frame. */
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    padding: 11px 4px;
}
/* PROD shows the final Total amount in orange. */
.woocommerce-cart .cart_totals tr.order-total td .amount {
    color: var(--chem-primary);
    font-weight: 700;
}
/* Account-verification notice — PROD renders it as a peachy, centred box.
   wcb2b prints it as a <ul class="woocommerce-error"> inside the cart.
   !important + extra specificity needed to beat main.css:4175 which forces
   every .woocommerce-cart .woocommerce-error to a transparent plain block. */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-error {
    background: #ffe7d4 !important;
    color: var(--chem-body-text) !important;
    border: 0 !important;
    border-left: 3px solid var(--chem-primary) !important;
    padding: 14px 18px !important;
    margin: 0 0 18px !important;
    text-align: center;
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
}
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-error li::before {
    display: none !important;
    content: none !important;
}
.woocommerce-cart .woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-cart .woocommerce-info a,
.woocommerce-cart .woocommerce-error a {
    color: var(--chem-primary);
    text-decoration: underline;
}

/* (13) Mobile responsive */
@media (max-width: 800px) {
    .woocommerce-account.logged-in .woocommerce {
        flex-direction: column;
        gap: 16px;
    }
    .woocommerce-MyAccount-navigation {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .woocommerce-cart .chem-cart-bottom {
        gap: 20px;
    }
    .woocommerce-cart .chem-cart-coupon,
    .woocommerce-cart .chem-cart-totals-wrap {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .woocommerce-cart .chem-cart-coupon .coupon {
        max-width: 100%;
    }
    .chem-account-topbar__inner {
        flex-direction: row;
        justify-content: space-between;
    }
    .chem-account-topbar__hello,
    .chem-account-topbar__cart {
        font-size: 13px;
    }
}


/* ==========================================================================
   Search results page (search.php) - matches PROD Avada layout
   2026-05-19
   ========================================================================== */

.chem-search-page {
    padding: 40px 0 60px;
}
.chem-search-container {
    max-width: var(--chem-site-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--chem-container-padding, 30px);
    box-sizing: border-box;
}
.chem-search-page__header {
    margin-bottom: 30px;
    text-align: center;
    padding: 10px 0 20px;
    border-bottom: 1px solid var(--chem-border, #e0e0e0);
}
.chem-search-page__title {
    color: var(--chem-primary);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}
.chem-search-page__title span {
    font-weight: 400;
}
.chem-search-page__body {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 40px;
    align-items: flex-start;
}
.chem-search-page__main {
    min-width: 0;
}

/* Each result card */
/* PROD: each result is separated by a thin rule, and "Read more" sits
   between two lines (one above it, one closing the result block) (#61). */
.chem-search-result {
    margin: 0 0 22px;
    padding: 0 0 22px;
    border: 0;
    border-bottom: 1px solid var(--chem-border);
    background: transparent;
}
.chem-search-result:last-child {
    border-bottom: 0;
}
.chem-search-result__title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}
.chem-search-result__title a {
    color: var(--chem-primary);
    text-decoration: none;
}
.chem-search-result__title a:hover {
    color: var(--chem-primary-dark);
    text-decoration: underline;
}
.chem-search-result__excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--chem-body-text);
    margin: 0 0 10px;
}
.chem-search-result__excerpt p {
    margin: 0;
}
.chem-search-result__readmore {
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--chem-border);
    text-align: right;
}
.chem-search-result__readmore a {
    color: var(--chem-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}
.chem-search-result__readmore a:hover {
    text-decoration: underline;
    color: var(--chem-primary-dark);
}

/* Pagination */
.chem-search-page__pagination {
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--chem-border, #e0e0e0);
}
.chem-search-page__pagination .nav-links,
.chem-search-page__pagination .page-numbers {
    display: inline-block;
    margin: 0;
}
.chem-search-page__pagination .nav-links {
    text-align: center;
    display: block;
}
.chem-search-page__pagination a.page-numbers,
.chem-search-page__pagination span.page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    color: var(--chem-primary);
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 14px;
}
.chem-search-page__pagination a.page-numbers:hover,
.chem-search-page__pagination span.page-numbers.current {
    background: var(--chem-primary);
    color: #fff;
    border-color: var(--chem-primary);
}

/* Sidebar widgets */
.chem-search-page__sidebar {
    min-width: 0;
}
.chem-search-widget {
    margin: 0 0 30px;
    padding: 15px 18px;
    background: #f5f5f5;
    border: 1px solid var(--chem-border, #e0e0e0);
    box-sizing: border-box;
}
.chem-search-widget__title {
    color: var(--chem-primary);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--chem-border, #e0e0e0);
    text-transform: none;
}
.chem-search-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.chem-search-widget__list li {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}
.chem-search-widget__list li a {
    color: var(--chem-primary);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
}
.chem-search-widget__list li a:hover {
    text-decoration: underline;
}
.chem-search-widget__tagcloud {
    line-height: 1.8;
}
.chem-search-widget__tagcloud a {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 6px;
    color: var(--chem-primary) !important;
    text-decoration: none;
    font-size: 11px !important;
    line-height: 1.4;
}
.chem-search-widget__tagcloud a:hover {
    text-decoration: underline;
}

.chem-search-page__noresults {
    font-size: 15px;
    color: var(--chem-body-text);
    margin: 20px 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .chem-search-page__body {
        grid-template-columns: 1fr;
    }
    .chem-search-page__title {
        font-size: 22px;
    }
    .chem-search-result__title {
        font-size: 20px;
    }
}

/* ==========================================================================
   Account dropdown — show "Log In" only when logged out and "Log Out" only
   when logged in (PDF Chemnovatic 6: account menu showed "Log In" while
   already logged in). Relies on the menu items' menu-login-link /
   menu-logout-link classes and the WordPress body.logged-in class.
   ========================================================================== */
body.logged-in .menu-login-link {
    display: none !important;
}
body:not(.logged-in) .menu-logout-link {
    display: none !important;
}