/* Final layer for the Autopolan-style B2B manufacturer template. */

/* Layout shell tokens. Both the page containers and the header shell read
   these, so the logo/nav column lines up with the body column on every page.
     --cp-shell-max  caps the shell on very large screens
     --cp-shell-pad  fluid side gutter, keeps a real margin on mid-size screens
   Result: content column = 1440 - 2*56 = 1328px at >=1440 viewport.
   Reference: autopolan.com runs full-bleed sections with a 72px gutter
   (content ~1296px at 1440) - 1328px is set deliberately a touch above it. */
html body {
    --cp-shell-max: 1440px;
    --cp-shell-pad: clamp(20px, 3.5vw, 56px);
    background: #f6f6f6;
    color: #202833;
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

html body *,
html body *::before,
html body *::after {
    box-sizing: border-box !important;
}

html body.home .cp-auto-container {
    box-sizing: border-box !important;
}

html body .site-header > .topbar,
html body .site-header .topbar {
    background: #07539c !important;
    background-color: #07539c !important;
    background-image: none !important;
    border-bottom: 0 !important;
    color: #ffffff !important;
}

html body .site-header .topbar a,
html body .site-header .topbar span {
    color: #ffffff !important;
}

/* Pin the topbar contact links to the right edge.
   992px and up: the shell is a row with `justify-content: space-between`, so
   they already sit flush right - `margin-left: auto` just makes that explicit
   and keeps them right when the notice text grows long.
   768-991px: the shell switches to `flex-column` (`flex-lg-row` only kicks in at
   992px), and theme.css ships a media-query-free
   `.cleanpro-header-shell { align-items: center }`. In a column flex container
   the cross axis is horizontal, so that `center` shrank the links to their
   content width and centred them - measured at 900px wide: links at x=211 with
   222px of dead space on the right. Stretching the row back to full width and
   pushing the links with `justify-content: flex-end` restores the alignment.
   Below 768px the whole topbar is hidden, so there is nothing to align. */
html body .site-header .topbar .topbar-links {
    margin-left: auto !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html body .site-header .topbar .cleanpro-header-shell {
        align-items: stretch !important;
    }

    html body .site-header .topbar .topbar-links {
        justify-content: flex-end !important;
    }
}

html body .site-header .main-nav,
html body .site-header .cleanpro-dark-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e4e8ee !important;
    box-shadow: 0 3px 18px rgba(18, 29, 42, 0.08) !important;
    color: #151515 !important;
}

html body .site-header .main-nav .navbar-brand,
html body .site-header .main-nav .nav-link,
html body .site-header .main-nav .dropdown-toggle,
html body .site-header .main-nav .brand-subtitle {
    color: #151515 !important;
}

html body .site-header .main-nav .brand-mark {
    background: transparent !important;
    border: 0 !important;
    color: #111111 !important;
    font-size: 25px !important;
    font-style: italic !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
}

html body .site-header .main-nav .brand-subtitle {
    color: #56616d !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}

/* Header content is aligned to the same shell as the page content (see the
   layout shell block at the end of this file). Previously this shell was
   full-bleed with an 18px padding, so on a 1920 screen the logo sat 18px from
   the screen edge while the body column started at 370px - a 372px misalignment
   that made the content look like a narrow island under a very wide header.
   NOTE: theme.css:7991 has `body.home .site-header .main-nav .cleanpro-header-shell`
   at specificity (0,4,1) setting max-width:100% / padding:18px. The `.home`
   variants below are required to outrank it - a plain `html body ...` selector
   sits at (0,3,2) and loses no matter where it is placed in the cascade. */
html body .site-header .main-nav .cleanpro-header-shell,
html body.home .site-header .main-nav .cleanpro-header-shell {
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--cp-shell-max) !important;
    overflow: visible !important;
    padding-left: var(--cp-shell-pad) !important;
    padding-right: var(--cp-shell-pad) !important;
}

html body .site-header,
html body .site-header .topbar,
html body .site-header .main-nav {
    max-width: 100vw !important;
    overflow-x: clip !important;
}

html body .site-header .topbar .cleanpro-header-shell,
html body.home .site-header .topbar .cleanpro-header-shell,
html body .site-header .main-nav .cleanpro-header-shell,
html body.home .site-header .main-nav .cleanpro-header-shell {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--cp-shell-max) !important;
    padding-left: var(--cp-shell-pad) !important;
    padding-right: var(--cp-shell-pad) !important;
    width: 100% !important;
}

/* BUGFIX: the topbar shell was missing `margin: auto`, so above 1440px it kept
   `width: 100%` capped by `max-width: 1440px` but hugged the LEFT edge instead of
   centring - while the main-nav shell right below it (which already had the auto
   margins) stayed centred. On a 2560 screen that put the topbar links at
   x=906..1384 with 1176px of dead blue to their right, so "pin the links right"
   appeared to have done nothing. Adding the auto margins puts the topbar on the
   same centred column as the nav and the page body.
   Note on verification: comparing the links against the shell's own right edge
   passes even when the shell is mis-placed (it is 1384 either way). Always
   compare against the content column / viewport edge instead. */

/* BUGFIX: legacy theme.css sets `.home .site-header { position: absolute }`
   because the old homepage header was a transparent blurred bar overlaying a
   full-bleed hero. The Autopolan restyle made this header OPAQUE, so keeping it
   out of flow made it cover the top 129px of the hero - which hid the kicker
   line completely and clipped the H1. Put the header back into normal flow so
   the hero starts *below* it, matching autopolan.com. */
html body.home .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 3000 !important;
}

/* The legacy theme paints the floating chat button in the old gold accent
   (#ffd84d -> #f2a900). Restore WhatsApp's own green so buyers recognise it,
   matching autopolan.com. */
html body .whatsapp-float {
    background: #25d366 !important;
    background-image: none !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}

html body .whatsapp-float:hover,
html body .whatsapp-float:focus {
    background: #1ebe5b !important;
    color: #ffffff !important;
}

/* Nav typography. Was 12px/800 with zero tracking, which read as a cramped
   "label strip" next to the 25px wordmark and the 44px-tall controls. Bumped to
   15px/700 with a little tracking so it reads as navigation. Horizontal padding
   stays at 11px so the extra width comes from the font, not the gutters.

   Selector specificity matters here. `html body .site-header .main-nav .nav-link`
   is (0,3,2) and LOSES to two earlier rules that pin the old 12px:
     theme.css                  body.home .site-header .main-nav .nav-link (0,4,1)
     autopolan-template.css     html body.home .site-header .main-nav .nav-link (0,4,2)
   Both are `!important`, and class count is compared before tag count, so a
   later position in the file does not help. `... .navbar-nav > .nav-item > .nav-link`
   is (0,5,2) - one class above both - and, unlike the `.home`-scoped rules,
   still applies on every page rather than only the front page. */
html body .site-header .main-nav .navbar-nav > .nav-item > .nav-link {
    color: #151515 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    padding: 22px 11px !important;
}

html body .site-header .main-nav .nav-link:hover,
html body .site-header .main-nav .nav-link:focus,
html body .site-header .main-nav .cleanpro-nav-group:hover > .nav-link {
    color: #07539c !important;
}

html body .site-header .main-nav .cleanpro-grouped-nav {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-width: 0 !important;
}

html body .site-header .main-nav .cleanpro-nav-group {
    min-width: 0 !important;
    overflow: visible !important;
}

html body .site-header .main-nav .cleanpro-nav-menu {
    border-radius: 3px !important;
    max-width: 220px !important;
    min-width: 190px !important;
}

html body .site-header .main-nav .header-search-form .form-control::placeholder {
    color: #7c8794 !important;
}

html body .site-header .main-nav .navbar-collapse > .btn {
    background: #101010 !important;
    border-color: #101010 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    padding: 11px 15px !important;
}

html body .cp-auto-btn-primary {
    background: #07539c !important;
    border-color: #07539c !important;
    color: #ffffff !important;
}

html body .cp-auto-btn-dark {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

html body .cp-auto-form-card button[type="submit"],
html body .cp-auto-form-card .btn-primary {
    background: #07539c !important;
    border-color: #07539c !important;
    color: #ffffff !important;
}

html body .cp-auto-product-grid {
    align-items: start !important;
}

html body .cp-auto-product-card {
    height: auto !important;
}

html body .cp-auto-product-thumb {
    aspect-ratio: 4 / 3 !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

html body .cp-auto-product-thumb img,
html body .cp-auto-product-placeholder {
    aspect-ratio: auto !important;
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    width: 100% !important;
}

html body .cp-auto-product-placeholder {
    align-items: center !important;
    justify-content: center !important;
}

html body .cp-auto-product-card > div {
    min-height: 142px !important;
}

html body .listing-hero,
html body .product-detail-hero {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36)),
        url('../images/cleanpro-hero-factory.jpg') center / cover no-repeat !important;
    color: #ffffff !important;
    min-height: 360px !important;
    overflow: hidden !important;
    padding: 88px 0 !important;
    position: relative !important;
}

html body .listing-hero-image {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.38)),
        var(--listing-hero-image) center / cover no-repeat !important;
}

html body .listing-hero-bg-image {
    display: none !important;
}

html body .listing-hero .container,
html body .product-detail-hero .container {
    /* Was a flat 1180px. That predates the shell tokens and quietly pinned every
       inner page back to the old narrow column: the header shell is 1440px from
       240px on a 1920 screen, while the page content below it stayed at
       370..1550, so the logo and the page heading sat 130px apart. Read the same
       token as the header/body shell so the columns line up. */
    max-width: var(--cp-shell-max) !important;
    position: relative !important;
}

html body .listing-hero .eyebrow,
html body .product-detail-hero .eyebrow,
html body .section-heading .eyebrow {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

html body .section-heading .eyebrow,
html body .section-block .eyebrow,
html body .product-detail-tabs .eyebrow {
    color: #07539c !important;
}

html body .listing-hero h1,
html body .product-detail-hero h1 {
    color: #ffffff !important;
    font-size: clamp(38px, 5.2vw, 72px) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.02 !important;
    margin: 0 0 18px !important;
    max-width: 860px !important;
}

html body .listing-hero p:not(.eyebrow),
html body .product-detail-hero p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    max-width: 760px !important;
}

html body .section-block {
    background: #f6f6f6 !important;
    padding: 66px 0 !important;
}

html body .section-block > .container,
html body .content-page .container,
html body .product-detail-page .container {
    /* Was a flat 1180px, same as the hero containers above. Note the specificity
       accounting: `html body .section-block > .container` is (0,2,2) - two
       classes, two tags - which is why theme.css's `.rfq-page .listing-hero
       .container` at (0,3,0) still beat it even though both are !important.
       Adding the page-class variants below lifts ours to (0,3,2) and settles it. */
    max-width: var(--cp-shell-max) !important;
}

/* Per-page container pins in theme.css: these pages were deliberately built
   narrower than the rest (10632-10960 "Product preview polish: compact hero
   image and RFQ form"), at 1160px. That predates the shell tokens, so on a
   1920 screen the header shell ran 240..1680 while these pages sat at
   380..1540 - the logo and the page heading 140px apart, and the page visibly
   narrower than the homepage it was reached from. All four rules are (0,3,0);
   each selector below is (0,3,2), so the tag count decides it. */
html body .rfq-page .listing-hero .container,
html body .rfq-page .rfq-page-section .container,
html body .product-detail-page .product-detail-hero .container,
html body .product-detail-page .muted-section .container {
    max-width: var(--cp-shell-max) !important;
}

html body .breadcrumb-wrap,
html body .breadcrumbs {
    color: #6a7480 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 22px !important;
    text-transform: uppercase !important;
}

html body .product-filter-wrap {
    background: #ffffff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 34px rgba(18, 29, 42, 0.06) !important;
    margin: 0 0 34px !important;
    padding: 22px !important;
}

html body .term-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-bottom: 20px !important;
}

html body .term-filter a {
    background: #f2f5f8 !important;
    border: 1px solid #dfe6ee !important;
    color: #1a2430 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    padding: 10px 13px !important;
    text-transform: uppercase !important;
}

html body .product-filter-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .product-filter-grid label span {
    color: #1d2732 !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}

html body .product-filter-grid input,
html body .product-filter-grid select,
html body .rfq-form input,
html body .rfq-form textarea,
html body .rfq-form select,
html body .form-control,
html body .form-select {
    background: #ffffff !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 0 !important;
    color: #17202a !important;
    min-height: 44px !important;
}

html body .product-filter-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

html body .btn,
html body .button,
html body button[type="submit"] {
    border-radius: 0 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body .btn-primary,
html body button[type="submit"],
html body .rfq-form .btn-primary,
html body .sticky-rfq .btn-primary {
    background: #07539c !important;
    border-color: #07539c !important;
    color: #ffffff !important;
}

html body .btn-outline-primary {
    border-color: #07539c !important;
    color: #07539c !important;
}

html body .btn-outline-primary:hover,
html body .btn-outline-primary:focus {
    background: #07539c !important;
    color: #ffffff !important;
}

html body .cleanpro-product-archive-list,
html body .listing-page .row.g-4,
html body .muted-section .row.g-4 {
    row-gap: 28px !important;
}

html body .product-card.cleanpro-buy-card,
html body .product-card {
    background: #ffffff !important;
    border: 1px solid #dfe6ee !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 34px rgba(18, 29, 42, 0.08) !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body .product-card .product-thumb,
html body .product-card .product-icon {
    align-items: center !important;
    aspect-ratio: 1 / 1 !important;
    background: #eef3f7 !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

html body .product-card .product-thumb img {
    display: block !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    width: 100% !important;
}

html body .product-card .product-icon i,
html body .product-card .cleanpro-product-placeholder i {
    color: #07539c !important;
    font-size: 54px !important;
}

html body .cleanpro-card-body {
    padding: 22px !important;
}

html body .cleanpro-card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

html body .cleanpro-card-tags span {
    background: #eef4fb !important;
    color: #07539c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 5px 7px !important;
    text-transform: uppercase !important;
}

html body .product-card h3,
html body .product-card h3 a {
    color: #111a24 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
}

html body .product-card p {
    color: #5f6975 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

html body .cleanpro-product-specs {
    background: #f6f8fa !important;
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    margin: 16px 0 !important;
    padding: 12px !important;
}

html body .cleanpro-product-specs div {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 92px 1fr !important;
}

html body .cleanpro-product-specs dt {
    color: #07539c !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

html body .cleanpro-product-specs dd {
    color: #1c2733 !important;
    font-size: 12px !important;
    margin: 0 !important;
}

html body .cleanpro-card-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

html body .cleanpro-detail-link,
html body .text-link {
    color: #07539c !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

html body .product-main-image,
html body .product-image-carousel {
    background: #ffffff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 42px rgba(18, 29, 42, 0.12) !important;
    overflow: hidden !important;
}

html body .product-main-image img,
html body .cleanpro-product-gallery-slide-image {
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    height: auto !important;
    object-fit: cover !important;
    width: 100% !important;
}

html body .product-main-image.is-empty {
    align-items: center !important;
    aspect-ratio: 1 / 1 !important;
    color: #07539c !important;
    display: flex !important;
    font-size: 80px !important;
    justify-content: center !important;
}

html body .product-gallery-strip {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    margin-top: 14px !important;
}

html body .product-gallery-thumb {
    background: #ffffff !important;
    border: 1px solid #dfe6ee !important;
    border-radius: 4px !important;
    padding: 4px !important;
}

html body .product-detail-tabs,
html body .sticky-rfq,
html body .entry-content-wrap,
html body .contact-info-panel,
html body .rfq-page-info-panel,
html body .contact-form-column,
html body .rfq-page-form-column {
    background: #ffffff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 34px rgba(18, 29, 42, 0.08) !important;
    padding: 28px !important;
}

html body .product-detail-tabs .nav-tabs {
    border-bottom: 1px solid #dfe6ee !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
}

html body .product-detail-tabs .nav-link {
    background: #f2f5f8 !important;
    border: 1px solid #dfe6ee !important;
    border-radius: 0 !important;
    color: #111a24 !important;
    font-weight: 900 !important;
}

html body .product-detail-tabs .nav-link.active {
    background: #07539c !important;
    color: #ffffff !important;
}

html body .product-table {
    background: #ffffff !important;
    border: 1px solid #dfe6ee !important;
    width: 100% !important;
}

html body .product-table th,
html body .product-table td {
    border-bottom: 1px solid #e8edf2 !important;
    padding: 13px !important;
}

html body .product-table th {
    color: #07539c !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    width: 34% !important;
}

html body .sticky-rfq {
    position: sticky !important;
    top: 24px !important;
}

html body .entry-content h2,
html body .entry-content h3,
html body .section-heading h2,
html body .sticky-rfq h2 {
    color: #111a24 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body .entry-content p,
html body .entry-content li,
html body .archive-page-content,
html body .contact-list li,
html body .rfq-points li {
    color: #56616d !important;
    line-height: 1.75 !important;
}

html body .contact-layout,
html body .rfq-page-layout {
    align-items: stretch !important;
}

html body .contact-list {
    list-style: none !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

html body .contact-list li,
html body .rfq-points li {
    align-items: flex-start !important;
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

html body .contact-list i,
html body .rfq-points i {
    color: #07539c !important;
    font-size: 18px !important;
    margin-top: 3px !important;
}

html body .contact-list strong {
    color: #111a24 !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

html body .contact-social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 22px !important;
}

html body .contact-social a {
    background: #f2f5f8 !important;
    border: 1px solid #dfe6ee !important;
    color: #111a24 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    padding: 10px 12px !important;
    text-transform: uppercase !important;
}

html body .site-footer {
    background: #050807 !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

html body .site-footer h2,
html body .site-footer h3,
html body .site-footer a {
    color: #ffffff !important;
}

html body .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

@media (min-width: 768px) {
    html body .listing-page .cleanpro-product-archive-list > .col-md-6,
    html body .listing-page .row.g-4 > .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    html body .listing-page .cleanpro-product-archive-list > .col-xl-4,
    html body .listing-page .row.g-4 > .col-xl-4,
    html body .product-detail-page .muted-section .row.g-4 > .col-xl-4 {
        flex: 0 0 auto !important;
        width: 33.333333% !important;
    }
}

html body .contact-page .contact-info-panel,
html body .contact-page .contact-form-column,
html body .rfq-page .rfq-page-info-panel,
html body .rfq-page .rfq-page-form-column,
html body .content-page .cleanpro-editorial-card {
    background: #ffffff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 34px rgba(18, 29, 42, 0.08) !important;
}

@media (max-width: 991px) {
    html body .product-filter-grid,
    html body .product-gallery-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .sticky-rfq {
        position: static !important;
    }

    html body .listing-hero,
    html body .product-detail-hero {
        min-height: 300px !important;
        padding: 66px 0 !important;
    }

    html body .site-header .main-nav .cleanpro-header-shell {
        flex-wrap: wrap !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body .site-header .main-nav .navbar-toggler {
        background: #101010 !important;
        border-color: #101010 !important;
        color: #ffffff !important;
        top: 22px !important;
    }

    html body .site-header .main-nav .navbar-toggler-icon {
        background:
            linear-gradient(#ffffff, #ffffff) 50% 25% / 20px 2px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50% / 20px 2px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 75% / 20px 2px no-repeat !important;
        filter: none !important;
    }

    html body .site-header .main-nav .navbar-collapse {
        background: #ffffff !important;
        border: 1px solid #e4e8ee !important;
        box-shadow: 0 14px 28px rgba(18, 29, 42, 0.12) !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu {
        max-width: 100% !important;
        min-width: 0 !important;
    }

}

@media (max-width: 767px) {
    html,
    html body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    html body .content-page,
    html body .site-main,
    html body .listing-hero,
    html body .product-detail-hero,
    html body .section-block {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    html body .content-page .container,
    html body .section-block > .container,
    html body .listing-hero .container,
    html body .product-detail-hero .container {
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }

    html body .site-header > .topbar,
    html body .site-header .topbar {
        display: none !important;
    }

    html body .site-header .main-nav .cleanpro-header-shell {
        align-items: center !important;
        display: flex !important;
        min-height: 74px !important;
        padding-left: 16px !important;
        padding-right: 72px !important;
        position: relative !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .navbar-brand {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .site-header .main-nav .navbar-toggler {
        align-items: center !important;
        display: inline-flex !important;
        height: 44px !important;
        justify-content: center !important;
        margin: 0 !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        z-index: 3 !important;
    }

    html body .listing-hero h1,
    html body .product-detail-hero h1 {
        font-size: 34px !important;
        line-height: 1.12 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    html body .listing-hero,
    html body .product-detail-hero {
        min-height: 280px !important;
        padding: 54px 0 !important;
    }

    html body .listing-hero p:not(.eyebrow),
    html body .product-detail-hero p:not(.eyebrow) {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    html body .product-filter-grid,
    html body .product-gallery-strip {
        grid-template-columns: 1fr !important;
    }

    html body .product-filter-actions,
    html body .cleanpro-card-actions,
    html body .hero-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .product-filter-actions .btn,
    html body .cleanpro-card-actions .btn,
    html body .hero-actions .btn {
        width: 100% !important;
    }

    html body .product-detail-tabs,
    html body .sticky-rfq,
    html body .entry-content-wrap,
    html body .contact-info-panel,
    html body .rfq-page-info-panel,
    html body .contact-form-column,
    html body .rfq-page-form-column,
    html body .product-filter-wrap {
        padding: 20px !important;
    }

}

/* Final mobile navigation pass: a full-width, readable accordion instead of
   narrow stacked cards beside the logo. Submenus are opened by the existing
   theme.js click handler, so the closed state stays compact. */
@media (max-width: 767.98px) {
    html body .site-header .main-nav,
    html body.home .site-header .main-nav {
        overflow: visible !important;
        position: relative !important;
        z-index: 5000 !important;
    }

    html body .site-header .main-nav .cleanpro-header-shell,
    html body.home .site-header .main-nav .cleanpro-header-shell {
        align-items: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        max-width: none !important;
        padding: 12px 14px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .navbar-brand,
    html body.home .site-header .main-nav .navbar-brand {
        flex: 1 1 auto !important;
        max-width: calc(100% - 58px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 8px 0 0 !important;
        position: static !important;
    }

    html body .site-header .main-nav .navbar-toggler,
    html body.home .site-header .main-nav .navbar-toggler {
        align-items: center !important;
        background: #07539c !important;
        border: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        flex: 0 0 44px !important;
        height: 44px !important;
        justify-content: center !important;
        margin: 0 0 0 auto !important;
        min-width: 44px !important;
        padding: 0 !important;
        position: static !important;
        width: 44px !important;
    }

    html body .site-header .main-nav .navbar-toggler-icon,
    html body.home .site-header .main-nav .navbar-toggler-icon {
        background:
            linear-gradient(#ffffff, #ffffff) 50% 25% / 20px 2px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50% / 20px 2px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 75% / 20px 2px no-repeat !important;
        height: 24px !important;
        width: 24px !important;
    }

    html body .site-header .main-nav .navbar-collapse,
    html body.home .site-header .main-nav .navbar-collapse {
        background: #ffffff !important;
        border: 1px solid #dbe3ec !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        margin: 12px 0 0 !important;
        max-height: calc(100vh - 92px) !important;
        max-width: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 8px !important;
        position: static !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .navbar-collapse:not(.show),
    html body.home .site-header .main-nav .navbar-collapse:not(.show) {
        display: none !important;
    }

    html body .site-header .main-nav .navbar-collapse.show,
    html body.home .site-header .main-nav .navbar-collapse.show {
        display: block !important;
    }

    html body .site-header .main-nav .cleanpro-grouped-nav,
    html body.home .site-header .main-nav .cleanpro-grouped-nav {
        align-items: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .cleanpro-grouped-nav > .nav-item,
    html body.home .site-header .main-nav .cleanpro-grouped-nav > .nav-item {
        width: 100% !important;
    }

    html body .site-header .main-nav .cleanpro-grouped-nav > .nav-item > .nav-link,
    html body.home .site-header .main-nav .cleanpro-grouped-nav > .nav-item > .nav-link {
        align-items: center !important;
        background: #f8fafc !important;
        border: 1px solid #e8edf3 !important;
        border-radius: 10px !important;
        color: #0f172a !important;
        display: flex !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        justify-content: space-between !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu,
    html body.home .site-header .main-nav .cleanpro-nav-menu {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-left: 3px solid #f6c400 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        display: none !important;
        margin: 4px 0 8px !important;
        min-width: 0 !important;
        padding: 6px !important;
        position: static !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu.show,
    html body.home .site-header .main-nav .cleanpro-nav-menu.show {
        display: block !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu .dropdown-item,
    html body.home .site-header .main-nav .cleanpro-nav-menu .dropdown-item {
        border-radius: 8px !important;
        color: #1e293b !important;
        display: flex !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        min-height: 42px !important;
        overflow-wrap: anywhere !important;
        padding: 10px 12px !important;
        white-space: normal !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu .dropdown-item::before,
    html body.home .site-header .main-nav .cleanpro-nav-menu .dropdown-item::before {
        color: #f6c400 !important;
        content: '•' !important;
        flex: 0 0 auto !important;
        margin-right: 10px !important;
    }

    html body .site-header .main-nav .cleanpro-nav-menu .dropdown-item:hover,
    html body .site-header .main-nav .cleanpro-nav-menu .dropdown-item:focus,
    html body.home .site-header .main-nav .cleanpro-nav-menu .dropdown-item:hover,
    html body.home .site-header .main-nav .cleanpro-nav-menu .dropdown-item:focus {
        background: #f8fafc !important;
        color: #07539c !important;
    }

    html body .site-header .main-nav .header-search-form,
    html body.home .site-header .main-nav .header-search-form,
    html body .site-header .main-nav .navbar-collapse > .btn,
    html body.home .site-header .main-nav .navbar-collapse > .btn {
        margin: 10px 0 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* Final content polish: readable RFQ forms, centered pagination, and a
   consistent breadcrumb treatment across archives, pages, and detail views. */
html body .rfq-form {
    overflow: visible !important;
}

html body .rfq-form .row.g-3 {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body .rfq-form .row.g-3 > [class*="col-"] {
    display: grid !important;
    gap: 7px !important;
    grid-column: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

html body .rfq-form .row.g-3 > .col-12 {
    grid-column: 1 / -1 !important;
}

html body .rfq-form .form-label {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

html body .rfq-form .form-control,
html body .rfq-form .form-select {
    box-sizing: border-box !important;
    min-height: 44px !important;
    width: 100% !important;
}

html body .rfq-form textarea.form-control {
    min-height: 118px !important;
    resize: vertical !important;
}

html body .cp-auto-form-card .rfq-form {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1) !important;
    padding: 26px !important;
}

html body .cp-auto-form-card .rfq-form .form-label {
    color: #334155 !important;
}

html body .cleanpro-file-picker {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-height: 44px;
    overflow: hidden;
    padding: 0 12px 0 0;
    position: relative;
    width: 100%;
}

html body .cleanpro-file-picker input[type="file"] {
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
}

html body .cleanpro-file-picker-button {
    align-items: center;
    align-self: stretch;
    background: #07539c;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    justify-content: center;
    letter-spacing: 0.02em;
    padding: 0 16px;
}

html body .cleanpro-file-picker:hover .cleanpro-file-picker-button,
html body .cleanpro-file-picker:focus-within .cleanpro-file-picker-button {
    background: #0a67bd;
}

html body .cleanpro-file-picker-name {
    color: #64748b;
    flex: 1 1 auto;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .cleanpro-file-picker-name.has-file {
    color: #1e293b;
    font-weight: 700;
}

html body .rfq-form .form-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

html body .pagination-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 42px auto 10px !important;
    width: 100% !important;
}

html body .pagination-wrap .pagination {
    margin: 0 !important;
}

html body .pagination-wrap .nav-links {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    padding: 6px;
}

html body .pagination-wrap .page-numbers {
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    padding: 0 12px;
    text-decoration: none;
}

html body .pagination-wrap .page-numbers:hover,
html body .pagination-wrap .page-numbers:focus {
    background: #eaf2fb;
    color: #07539c;
}

html body .pagination-wrap .page-numbers.current {
    background: #07539c;
    color: #ffffff;
}

html body .cleanpro-breadcrumbs {
    align-items: center;
    background: linear-gradient(135deg, #f8fafc, #eef4f9);
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    color: #64748b;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px !important;
    max-width: 100%;
    padding: 8px 14px;
}

html body .cleanpro-breadcrumbs a,
html body .cleanpro-breadcrumb-current,
html body .cleanpro-breadcrumb-separator {
    font-size: 0.82rem;
    line-height: 1.2;
}

html body .cleanpro-breadcrumbs a {
    color: #07539c !important;
    font-weight: 800;
    text-decoration: none;
}

html body .cleanpro-breadcrumbs a:hover,
html body .cleanpro-breadcrumbs a:focus {
    color: #0a67bd !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .cleanpro-breadcrumb-current {
    color: #1e293b !important;
    font-weight: 800;
}

html body .cleanpro-breadcrumb-separator {
    color: #94a3b8 !important;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    html body .rfq-form .row.g-3 {
        grid-template-columns: 1fr !important;
    }

    html body .rfq-form .row.g-3 > [class*="col-"] {
        grid-column: 1 / -1 !important;
    }

    html body .cp-auto-form-card .rfq-form {
        padding: 18px !important;
    }

    html body .pagination-wrap .nav-links {
        max-width: calc(100vw - 32px);
        overflow-x: auto;
    }

    html body .cleanpro-breadcrumbs {
        border-radius: 14px;
        display: flex;
    }
}

/* Final header control alignment. Keep search and RFQ on one baseline. */
@media (min-width: 992px) {
    html body .site-header .main-nav {
        overflow-x: clip !important;
    }

    html body .site-header .main-nav .cleanpro-header-shell {
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
    }

    html body .site-header .main-nav .navbar-brand {
        flex: 0 0 auto !important;
        margin: 0 !important;
        max-width: 190px !important;
        min-width: 0 !important;
    }

    html body .site-header .main-nav .navbar-collapse {
        align-items: center !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }

    html body .site-header .main-nav .cleanpro-grouped-nav {
        align-items: center !important;
        display: flex !important;
        flex: 0 1 auto !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    html body .site-header .main-nav .header-search-form {
        display: block !important;
        flex: 0 0 260px !important;
        margin: 0 !important;
        max-width: 260px !important;
        min-width: 220px !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 260px !important;
    }

    html body .site-header .main-nav .header-search-form .input-group {
        align-items: stretch !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .header-search-form .form-control {
        background: #ffffff !important;
        border: 1px solid #d9dee7 !important;
        border-right: 0 !important;
        color: #151515 !important;
        height: 44px !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .header-search-form .btn {
        align-items: center !important;
        background: #07539c !important;
        border: 1px solid #07539c !important;
        color: #ffffff !important;
        display: inline-flex !important;
        height: 44px !important;
        justify-content: center !important;
        margin: 0 !important;
        min-height: 44px !important;
        min-width: 42px !important;
        padding: 0 !important;
        width: 42px !important;
    }

    html body .site-header .main-nav .navbar-collapse > .btn {
        align-items: center !important;
        align-self: center !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        height: 44px !important;
        justify-content: center !important;
        margin: 0 !important;
        min-height: 44px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 991px) {
    html body .site-header .main-nav .header-search-form {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html body .site-header .main-nav .header-search-form .input-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .header-search-form .form-control {
        background: #ffffff !important;
        border: 1px solid #d9dee7 !important;
        border-right: 0 !important;
        color: #151515 !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .header-search-form .btn {
        align-items: center !important;
        background: #07539c !important;
        border: 1px solid #07539c !important;
        color: #ffffff !important;
        display: inline-flex !important;
        justify-content: center !important;
        margin: 0 !important;
        min-width: 44px !important;
        padding: 0 !important;
        width: 44px !important;
    }
}

/* Final mobile overflow guard. */
@media (max-width: 767px) {
    html,
    body,
    html body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    html body .site-header,
    html body .site-header *,
    html body .site-main,
    html body .site-main *,
    html body .site-footer,
    html body .site-footer * {
        min-width: 0 !important;
    }

    html body .container,
    html body .cleanpro-header-shell,
    html body .cp-auto-container,
    html body .listing-hero .container,
    html body .product-detail-hero .container,
    html body .section-block > .container,
    html body .content-page .container {
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }

    html body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    html body .row > [class*="col-"] {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .site-header .main-nav .cleanpro-header-shell {
        padding-right: 72px !important;
    }

    html body .site-header .main-nav .navbar-toggler {
        background: #101010 !important;
        border: 1px solid #101010 !important;
        display: inline-flex !important;
        left: auto !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        visibility: visible !important;
        width: 44px !important;
    }

    html body .site-header .main-nav .navbar-toggler .cleanpro-menu-label {
        display: none !important;
    }

    html body .site-header .main-nav .navbar-toggler-icon {
        display: block !important;
        flex: 0 0 auto !important;
    }

    html body .listing-hero h1,
    html body .product-detail-hero h1 {
        font-size: 32px !important;
        line-height: 1.14 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        width: calc(100vw - 32px) !important;
        word-break: normal !important;
    }

    html body .listing-hero p,
    html body .listing-hero p:not(.eyebrow),
    html body .product-detail-hero p,
    html body .product-detail-hero p:not(.eyebrow),
    html body .entry-content p,
    html body .archive-page-content,
    html body .product-filter-wrap,
    html body .cleanpro-cookie-banner {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        width: auto !important;
        word-break: normal !important;
    }

    html body .listing-hero p:not(.eyebrow),
    html body .product-detail-hero p:not(.eyebrow) {
        width: calc(100vw - 32px) !important;
    }

    html body .cleanpro-cookie-banner {
        box-sizing: border-box !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }
}

/* Homepage information architecture: five-slide hero and six buyer-focused sections. */
html body.home .cp-auto-home {
    background: #f6f6f6 !important;
    overflow: hidden !important;
}

/* Hero banner geometry.
   Before: `min-height: 620px` was a fixed pixel height, so the banner ratio
   drifted with the viewport - 2.06:1 at 1280px wide, 3.10:1 at 1920px. The
   official hero photo (cleanpro-hero-factory.jpg) is 1600x1067 = 3:2, so at
   1920 the `background-size: cover` crop threw away 52% of the image height.
   Now the height is derived from a declared ratio - a plain 21:9 constant, the
   same as autopolan.com's measured 1440x600 (2.40:1). Guards:
     width 100%       REQUIRED - see note below
     min-height 480px keeps the headline + 2 buttons readable on small desktops
     max-height 88vh  stops the banner eating the whole fold on short screens
   Below 768px the mobile block further down resets this to a fixed 560px.

   Why `width: 100%` is mandatory here: with `aspect-ratio` set, if the width
   stays `auto` then the height becomes the constraining dimension whenever a
   min-height/max-height guard kicks in - and the width gets recomputed from it.
   Measured at a 1024px viewport with a 21/9 ratio: min-height resolved to
   480px, so width became 480 x (21/9) = 1120px, 96px wider than the screen and
   silently clipped by this rule's own `overflow: hidden`. Pinning the width to
   100% makes width definite, so the ratio only ever drives the height. */
html body.home .cp-auto-hero {
    aspect-ratio: 21 / 9 !important;
    background: #09131d !important;
    max-height: min(88vh, 900px) !important;
    min-height: 480px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
}

html body.home .cp-auto-carousel-track,
html body.home .cp-auto-carousel-slide {
    height: 100% !important;
    min-height: 0 !important;
}

html body.home .cp-auto-carousel-slide {
    display: none !important;
    position: relative !important;
}

html body.home .cp-auto-carousel-slide.active {
    display: block !important;
}

html body.home .cp-auto-carousel-slide .cp-auto-hero-media {
    background:
        linear-gradient(180deg, rgba(3, 11, 19, 0.76) 0%, rgba(3, 11, 19, 0.62) 44%, rgba(3, 11, 19, 0.88) 100%),
        var(--cp-auto-slide-image) center / cover no-repeat !important;
    height: 100% !important;
    inset: 0 !important;
    min-height: 0 !important;
    position: absolute !important;
}

html body.home .cp-auto-hero-inner {
    align-items: center !important;
    display: flex !important;
    min-height: 100% !important;
    padding-bottom: 104px !important;
    padding-top: 80px !important;
    position: relative !important;
    z-index: 1 !important;
}

html body.home .cp-auto-hero-copy {
    margin: 0 auto !important;
    max-width: 880px !important;
    text-align: center !important;
}

/* Kicker was rendering but invisible: it sat under the opaque header, and at
   13px on a bright photo it had no presence anyway. Match autopolan.com's
   centred, generously spaced kicker line. */
html body.home .cp-auto-hero-copy .cp-auto-kicker {
    color: #d8dee6 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.4 !important;
    margin: 0 0 20px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
    text-transform: uppercase !important;
}

html body.home .cp-auto-hero-copy h1 {
    font-size: clamp(38px, 4.8vw, 68px) !important;
    line-height: 1.06 !important;
    margin: 0 auto 22px !important;
    max-width: 880px !important;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5) !important;
}

html body.home .cp-auto-hero-copy > p:not(.cp-auto-kicker) {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 720px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Buttons: the hero had two 13px ALL-CAPS buttons that read as UI chips rather
   than a brand call to action. autopolan.com uses one large sentence-case
   button. Enlarge and de-shout them; keep a secondary action but make it clearly
   subordinate instead of the legacy gold ghost colour. */
html body.home .cp-auto-hero-copy .cp-auto-actions {
    justify-content: center !important;
    margin-top: 34px !important;
}

html body.home .cp-auto-hero-copy .cp-auto-btn {
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    min-height: 56px !important;
    padding: 16px 34px !important;
    text-transform: none !important;
}

html body.home .cp-auto-hero-copy .cp-auto-btn-primary {
    background: #0f52ba !important;
    border-color: #0f52ba !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
}

html body.home .cp-auto-hero-copy .cp-auto-btn-primary:hover,
html body.home .cp-auto-hero-copy .cp-auto-btn-primary:focus {
    background: #0b3f8f !important;
    border-color: #0b3f8f !important;
}

html body.home .cp-auto-hero-copy .cp-auto-btn-ghost {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-weight: 400 !important;
}

html body.home .cp-auto-hero-copy .cp-auto-btn-ghost:hover,
html body.home .cp-auto-hero-copy .cp-auto-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #ffffff !important;
}

/* Slider arrows and dash indicators sat permanently in the hero and pulled
   attention from the headline. autopolan.com shows none - fade ours to a hint
   and reveal on hover or keyboard focus. */
html body.home .cp-auto-carousel-controls {
    opacity: 0.35 !important;
    transition: opacity 0.25s ease !important;
}

html body.home .cp-auto-hero:hover .cp-auto-carousel-controls,
html body.home .cp-auto-carousel-controls:focus-within {
    opacity: 1 !important;
}

html body.home .cp-auto-carousel-controls {
    align-items: center !important;
    bottom: 32px !important;
    display: flex !important;
    gap: 14px !important;
    left: 50% !important;
    max-width: var(--cp-shell-max) !important;
    padding: 0 20px !important;
    position: absolute !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    z-index: 2 !important;
}

html body.home .cp-auto-carousel-controls .carousel-control-prev,
html body.home .cp-auto-carousel-controls .carousel-control-next {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    display: inline-flex !important;
    height: 42px !important;
    justify-content: center !important;
    opacity: 1 !important;
    position: static !important;
    width: 42px !important;
}

html body.home .cp-auto-carousel-controls .carousel-control-prev:hover,
html body.home .cp-auto-carousel-controls .carousel-control-next:hover,
html body.home .cp-auto-carousel-controls .carousel-control-prev:focus,
html body.home .cp-auto-carousel-controls .carousel-control-next:focus {
    background: #07539c !important;
}

html body.home .cp-auto-carousel-controls .carousel-indicators {
    align-items: center !important;
    bottom: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    position: static !important;
}

html body.home .cp-auto-carousel-controls .carousel-indicators button {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0 !important;
    height: 3px !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    width: 38px !important;
}

html body.home .cp-auto-carousel-controls .carousel-indicators button.active {
    background: #ffffff !important;
    width: 74px !important;
}

html body.home .cp-auto-section {
    padding: 84px 0 !important;
}

html body.home .cp-auto-about {
    background: #ffffff !important;
}

html body.home .cp-auto-brand {
    background: #eef3f7 !important;
}

html body.home .cp-auto-brand .cp-auto-image-panel {
    min-height: 420px !important;
}

html body.home .cp-auto-brand .cp-auto-image-panel img {
    min-height: 420px !important;
}

html body.home .cp-auto-brand .cp-auto-image-panel-overlay {
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(3, 12, 24, 0.12), rgba(3, 12, 24, 0.84));
    bottom: 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-end;
    left: 0;
    padding: 26px;
    position: absolute;
    right: 0;
    top: 0;
}

html body.home .cp-auto-brand .cp-auto-image-panel-overlay span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

html body.home .cp-auto-brand .cp-auto-image-panel-overlay strong {
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.1;
}

html body.home .cp-auto-process-heading {
    margin-top: 78px !important;
}

html body.home .cp-auto-section-title {
    margin-bottom: 38px !important;
}

html body.home .cp-auto-section-title h2 {
    max-width: 820px !important;
}

html body.home .cp-auto-section-title > p:last-child {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 720px !important;
}

html body.home .cp-auto-video-card {
    min-height: 420px !important;
}

html body.home .cp-auto-video-card img {
    min-height: 420px !important;
}

html body.home .cp-auto-video-bar a {
    align-items: center !important;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 24px !important;
    margin-left: auto !important;
}

html body.home .cp-auto-buyer {
    background: #eef3f7 !important;
}

html body.home .cp-auto-buyer-grid {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.home .cp-auto-buyer-card {
    background: #ffffff !important;
    border: 1px solid #dfe6ee !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 34px rgba(18, 29, 42, 0.07) !important;
    min-height: 260px !important;
    padding: 26px 22px !important;
    position: relative !important;
}

html body.home .cp-auto-buyer-icon {
    align-items: center !important;
    background: #eaf2fb !important;
    color: #07539c !important;
    display: flex !important;
    font-size: 24px !important;
    height: 48px !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
    width: 48px !important;
}

html body.home .cp-auto-card-number {
    color: #a3afbb !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
}

html body.home .cp-auto-buyer-card h3 {
    color: #17202a !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
}

html body.home .cp-auto-buyer-card p {
    color: #5d6874 !important;
    font-size: 13px !important;
    line-height: 1.68 !important;
    margin: 0 !important;
}

html body.home .cp-auto-services {
    background: #f6f6f6 !important;
}

/* ============================================================
   Card footers - keep "Discuss this service" / "Find a supply route"
   on one shared baseline across every card in the row
   ------------------------------------------------------------
   Two separate defects made these links look ragged:

   1. theme.css:599 styles `.cp-auto-service-card i` with
      `display: block; font-size: 36px; margin-bottom: 18px` to size the
      card's TOP icon. That selector is not scoped to the direct child, so it
      also hit the `bi-arrow-up-right` inside the trailing link - blowing the
      arrow up to 36px on its own line and making the link 98.8px tall instead
      of 21.4px. (The markets card does not suffer from this because
      autopolan-template.css already scopes its icon with `> i`.)
      Fix: scope the top icon to `> i`, and explicitly reset the in-link icon.

   2. Neither card is a flex container, so the link simply follows the body
      copy. Because the copy runs 2-3 lines and the headings wrap 1-2 lines,
      the link landed at a different y in every card - measured at 2560px:
      services link.y = 3346 / 3405 / 3405 / 3428, markets = 5631 / 5631 /
      5653 / 5653.
      Fix: make the card a column flex box and give the link `margin-top: auto`
      so it is pinned to the bottom edge. Cards in a grid row already stretch
      to a shared height, so the links then line up exactly.

   `padding-top` (not `margin-top`) carries the visual gap, so the gap survives
   the auto margin collapsing to zero on a tall card.
   ============================================================ */
html body.home .cp-auto-service-card,
html body.home .cp-auto-market-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Top icon: direct child only, so the trailing arrow keeps its own sizing. */
html body.home .cp-auto-service-card > i {
    display: block !important;
    font-size: 36px !important;
    margin: 0 0 18px !important;
}

/* The trailing link is the last child; push it to the bottom of the card. */
html body.home .cp-auto-service-card > a,
html body.home .cp-auto-market-card > .cp-auto-mini-link {
    margin-top: auto !important;
    padding-top: 18px !important;
}

/* Arrow sits inline with the link text instead of on its own 36px line. */
html body.home .cp-auto-service-card > a i,
html body.home .cp-auto-market-card > .cp-auto-mini-link i {
    display: inline-block !important;
    font-size: 14px !important;
    margin: 0 0 0 6px !important;
    vertical-align: -0.08em !important;
}

html body.home .cp-auto-market-card {
    position: relative !important;
}

html body.home .cp-auto-market-card > i {
    color: #07539c !important;
    display: block !important;
    font-size: 30px !important;
    margin: 10px 0 18px !important;
}

html body.home .cp-auto-market-card .cp-auto-card-number {
    margin-bottom: 0 !important;
}

html body.home .cp-auto-market-card p {
    min-height: 66px !important;
}

html body.home .cp-auto-empty-state {
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #dfe6ee !important;
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    min-height: 260px !important;
    padding: 30px !important;
    text-align: center !important;
}

html body.home .cp-auto-empty-state > i {
    color: #07539c !important;
    font-size: 42px !important;
    margin-bottom: 14px !important;
}

html body.home .cp-auto-empty-state p {
    color: #5d6874 !important;
    margin: 0 0 20px !important;
}

@media (max-width: 1199px) {
    html body.home .cp-auto-buyer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html body.home .cp-auto-hero,
    html body.home .cp-auto-carousel-track,
    html body.home .cp-auto-carousel-slide,
    html body.home .cp-auto-carousel-slide .cp-auto-hero-media,
    html body.home .cp-auto-hero-inner {
        min-height: 560px !important;
    }

    html body.home .cp-auto-hero-inner {
        padding-bottom: 104px !important;
        padding-top: 54px !important;
    }

    html body.home .cp-auto-hero-copy h1 {
        font-size: 40px !important;
        line-height: 1.08 !important;
    }

    html body.home .cp-auto-carousel-controls {
        bottom: 22px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body.home .cp-auto-carousel-controls .carousel-indicators button {
        width: 22px !important;
    }

    html body.home .cp-auto-carousel-controls .carousel-indicators button.active {
        width: 42px !important;
    }

    html body.home .cp-auto-section {
        padding: 58px 0 !important;
    }

    html body.home .cp-auto-process-heading {
        margin-top: 56px !important;
    }

    html body.home .cp-auto-video-card,
    html body.home .cp-auto-video-card img {
        min-height: 280px !important;
    }

    html body.home .cp-auto-buyer-grid {
        grid-template-columns: 1fr !important;
    }

    html body.home .cp-auto-buyer-card {
        min-height: 0 !important;
    }

    html body.home .cp-auto-market-card p {
        min-height: 0 !important;
    }

    html body.home .cp-auto-empty-state .cp-auto-btn {
        width: auto !important;
    }
}

/* Factory video lightbox */
html body .cp-auto-video-card.has-video {
    cursor: pointer;
}

html body .cp-video-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 48px 24px 24px;
    position: fixed;
    z-index: 99999;
}

html body .cp-video-modal[hidden] {
    display: none;
}

html body .cp-video-modal-backdrop {
    background: rgba(8, 12, 18, 0.88);
    inset: 0;
    position: absolute;
}

html body .cp-video-modal-dialog {
    position: relative;
    width: min(960px, 100%);
}

html body .cp-video-modal-close {
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 34px;
    line-height: 1;
    padding: 4px 10px;
    position: absolute;
    right: 0;
    top: -44px;
}

html body .cp-video-modal-close:hover,
html body .cp-video-modal-close:focus {
    color: #f7c948;
    outline: none;
}

html body .cp-video-modal-body {
    background: #000000;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}

html body .cp-video-modal-body iframe,
html body .cp-video-modal-body video {
    border: 0;
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

html body.cp-video-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    html body .cp-video-modal {
        padding: 44px 12px 12px;
    }

    html body .cp-video-modal-close {
        font-size: 28px;
        top: -38px;
    }
}

/* ============================================================
   Layout shell - widen the content column
   ------------------------------------------------------------
   .cp-auto-container and Bootstrap .container were a flat 1180px wide with a
   flat 20px side padding. On a 1920 screen that left 370px of dead space on
   each side of every content section, so the page read as cramped. They now
   share the --cp-shell-max / --cp-shell-pad tokens with the header shell
   (defined at the top of this file), giving a 1328px content column.

   Breakpoint: the <=767px guard earlier in this file keeps its own full-width
   16px layout, so this override starts at 768px.
   ============================================================ */
@media (min-width: 768px) {
    html body .container,
    html body .cp-auto-container {
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--cp-shell-max) !important;
        padding-left: var(--cp-shell-pad) !important;
        padding-right: var(--cp-shell-pad) !important;
        width: 100% !important;
    }
}

/* Keep the hero copy and section headings in proportion with the wider shell. */
html body.home .cp-auto-hero-copy {
    max-width: 920px !important;
}

html body.home .cp-auto-hero-copy h1 {
    max-width: 920px !important;
}

html body.home .cp-auto-section-title {
    max-width: 860px !important;
}

/* Tablet navigation: navbar-expand-lg must collapse the 768-991px range too.
   The legacy theme keeps `.main-nav .navbar-collapse` flex at all widths,
   which previously stretched the RFQ button into a full-width black bar. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html body .site-header .main-nav .cleanpro-header-shell {
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    html body .site-header .main-nav .navbar-toggler {
        display: inline-flex !important;
        margin-left: auto !important;
        order: 2 !important;
    }

    html body .site-header .main-nav .navbar-collapse {
        align-items: stretch !important;
        flex-basis: 100% !important;
        flex-direction: column !important;
        margin-top: 12px !important;
        order: 3 !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .navbar-collapse:not(.show) {
        display: none !important;
    }

    html body .site-header .main-nav .navbar-collapse.show {
        display: flex !important;
    }

    html body .site-header .main-nav .navbar-nav {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    html body .site-header .main-nav .navbar-nav > .nav-item > .nav-link {
        padding: 12px 16px !important;
    }

    html body .site-header .main-nav .navbar-collapse > .btn {
        align-self: flex-start !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Phones keep the pre-existing fixed-height behaviour: an aspect-ratio driven
   banner would be only ~167px tall at 390px wide, far too short for the kicker,
   headline, subtitle and two buttons. */
@media (max-width: 767px) {
    html body.home .cp-auto-hero {
        aspect-ratio: auto !important;
        max-height: none !important;
        min-height: 560px !important;
    }

    html body.home .cp-auto-carousel-track,
    html body.home .cp-auto-carousel-slide,
    html body.home .cp-auto-hero-inner {
        height: auto !important;
        min-height: 560px !important;
    }

    html body.home .cp-auto-carousel-slide .cp-auto-hero-media {
        height: auto !important;
        min-height: 560px !important;
    }
}