/* Global page width — one source of truth for all storefront layouts */
:root {
    --site-max: 1360px;
    --site-gutter: 40px;
    --site-gutter-sm: 16px;
    --site-shell-max: calc(var(--site-max) + (var(--site-gutter) * 2)); /* 1440px */
    --site-scrollbar: 6px;
    --site-scrollbar-thumb: #0b5d57;
    --site-scrollbar-track: #eef4f3;
}

/*
 * Same scrollbar gutter on every page so home ↔ category does not jerk width.
 * Always reserve space even when content is short.
 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track);
}

html::-webkit-scrollbar {
    width: var(--site-scrollbar);
    height: var(--site-scrollbar);
}

html::-webkit-scrollbar-track {
    background: var(--site-scrollbar-track);
}

html::-webkit-scrollbar-thumb {
    background: var(--site-scrollbar-thumb);
    border-radius: 999px;
}

html::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

/* Site footer — same type as the page: Inter body, Space Grotesk headings */
.site-footer {
    margin-top: 0 !important;
    margin-bottom: 0;
    color: #B4C1BC;
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}
.site-footer .footer-cta h3,
.site-footer .footer-heading {
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    text-transform: none;
}
.site-footer .footer-cta h3 {
    font-size: 26px;
    line-height: 1.15;
}
.site-footer .footer-heading {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.site-footer .footer-cta p,
.site-footer .footer-about,
.site-footer .footer-contact li,
.site-footer .footer-links a,
.site-footer .footer-copy,
.site-footer a {
    color: #B4C1BC;
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
}
.site-footer .footer-social a {
    color: #fff;
    font-size: 16px;
}
.site-footer a:hover {
    color: #8FD9BE;
}
.site-footer .footer-contact .ui-icon {
    color: #8FD9BE;
}
.site-footer .btn-footer-primary,
.site-footer .btn-footer-whatsapp {
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    color: #fff;
}

/* Full-bleed band + centred content (header, quote strip, browse, bulk bar) */
.site-shell {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}

.site-inner,
.sh-inner,
.qq-strip-inner,
.pg-browse-inner,
.pg-bulk-inner {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
}

/*
 * Bootstrap / legacy .container pages
 * Outer box = max + gutters so usable content width equals --site-max
 */
.container {
    width: 100% !important;
    max-width: var(--site-shell-max) !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Catalog legacy wrap (if still used) */
.catalog-wrap {
    max-width: var(--site-max);
    padding-left: 0;
    padding-right: 0;
}

/* Product detail / type templates — same usable width as header (--site-max) */
.pdp,
.pdp-sheet-overlay,
.pdp-mobile-bar,
.pdp-toast,
.pd-machine,
.pd-wire,
.pd-spare,
.pd-powder {
    --max: var(--site-max) !important;
    --pad: var(--site-gutter) !important;
}

.pdp-wrap,
.pdm-wrap,
.pdw-wrap,
.pds-wrap,
.pdpw-wrap,
.pd-machine .wrap {
    width: min(100% - (var(--site-gutter) * 2), var(--site-max)) !important;
    max-width: var(--site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    :root {
        --site-gutter: var(--site-gutter-sm);
    }
}

/* Shared page breadcrumb bar — same height and vertical centering everywhere */
.inner-page {
    min-height: 0;
}

.page-crumb {
    display: flex;
    align-items: center;
    min-height: 48px;
    background: #fff;
    border-bottom: 1px solid #eef2f5;
}

.page-crumb-inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
}

.page-crumb .breadcrumb,
.inner-page .breadcrumb,
.product-single-page .breadcrumb,
.contact-hero .breadcrumb,
.blog-hero .breadcrumb,
.cat-hero .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    min-height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.3;
    list-style: none;
}

.page-crumb .breadcrumb-item,
.inner-page .breadcrumb-item,
.product-single-page .breadcrumb-item,
.contact-hero .breadcrumb-item,
.blog-hero .breadcrumb-item,
.cat-hero .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    float: none;
}

.page-crumb .breadcrumb-item + .breadcrumb-item,
.inner-page .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}

.page-crumb .breadcrumb-item + .breadcrumb-item::before,
.inner-page .breadcrumb-item + .breadcrumb-item::before {
    display: inline-flex;
    align-items: center;
    padding-right: 0.5rem;
    color: #9aa3a7;
}

.page-crumb .breadcrumb a,
.inner-page .breadcrumb a {
    color: #0f766e;
    text-decoration: none;
}

.page-crumb .breadcrumb a:hover,
.inner-page .breadcrumb a:hover {
    color: #0b5d57;
    text-decoration: underline;
}

.page-crumb .breadcrumb-item.active,
.inner-page .breadcrumb-item.active {
    color: #4b5563;
}