@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans/index.min.css');

/* --- CENTRALIZED DESIGN TOKENS & STUDIO OVERRIDES --- */

body {
    font-family: 'Inter', sans-serif !important;
}

html.dark body,
body.dark,
.dark body {
    background-color: #000000 !important;
}

:root {
    /* Main Theme Colors */
    --main-color: #e5f628;
    --main-color-hover: #cce01b;
    --main-color-light: #f8fde0;

    /* Global Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Gray Scale (Neutral / Zinc shades) */
    --gray-50: #FAFFA;
    --gray-100: #F5F5F5;
    --gray-150: #E5E5E5;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #A3A3A3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-750: #E5E5E5;
    --gray-800: #171717;
    --gray-900: #0A0A0A;

    /* Component Semantic Colors */
    --bg-page: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --border-main: #E5E5E5;
    --border-light: #F5F5F5;
    --text-primary: #171717;
    --text-secondary: #404040;
    --text-muted: #737373;
    --text-light: #A3A3A3;

    /* Buttons (Circular Pill) */
    --btn-primary-bg: #171717;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover-bg: #262626;
    --btn-primary-hover-text: #FFFFFF;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #E5E5E5;
    --btn-secondary-text: #171717;
    --btn-secondary-hover-bg: #F5F5F5;
    --btn-secondary-hover-text: #171717;
    --btn-secondary-hover-border: #171717;

    /* Inputs & Forms */
    --input-bg: #FFFFFF;
    --input-border: #E5E5E5;
    --input-text: #171717;
    --input-focus-border: #171717;
    --input-focus-shadow: rgba(23, 23, 23, 0.05);

    /* Errors */
    --color-error: #EF4444;

    /* Sliders & range */
    --slider-inactive: #E5E5E5;
    --slider-active: #e5f628;
    --slider-pointer: #e5f628;
    --slider-pointer-hover: #cce01b;
    --slider-bubble-bg: #171717;
    --slider-bubble-text: #FFFFFF;
    --slider-tick-inactive: #D4D4D4;
    --slider-tick-active: #e5f628;
    --slider-thumb-bg: #FFFFFF;
    --slider-thumb-border: #171717;
    --slider-label-text: #737373;
    --slider-pointer-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --slider-pointer-focus-shadow: 0 0 0 4px rgba(229, 246, 40, 0.2);
    --slider-bubble-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Cart Modal */
    --cart-icon-bg: transparent;
    --cart-icon-border: transparent;
    --cart-icon-text: #FFFFFF;
    --cart-modal-bg: #171717f2;
    --cart-modal-border: rgba(255, 255, 255, 0.08);
    --cart-modal-header-bg: rgba(255, 255, 255, 0.03);
    --cart-item-border: rgba(255, 255, 255, 0.05);
    --cart-item-img-bg: rgba(255, 255, 255, 0.03);
    --cart-item-text: #FFFFFF;
    --cart-item-qty-price: rgba(255, 255, 255, 0.7);

    /* Navigation */
    --nav-bg-glass: rgba(255, 255, 255, 0.85);
    --nav-bg-opaque: #FFFFFF;
    --nav-mobile-bg: #FFFFFF;
    --nav-border: #E5E5E5;

    /* Phone Widget */
    --phone-widget-bg: rgba(23, 23, 23, 0.95);
    --phone-widget-border: #262626;
}

.dark {
    /* Dark Theme Colors */
    --main-color: #e5f628;
    --main-color-hover: #cce01b;
    --main-color-light: rgba(229, 246, 40, 0.1);

    /* Gray Scale (Zinc) in Dark Mode */
    --gray-50: #0A0A0A;
    --gray-100: #171717;
    --gray-150: #262626;
    --gray-200: #262626;
    --gray-300: #404040;
    --gray-400: #737373;
    --gray-500: #A3A3A3;
    --gray-600: #D4D4D4;
    --gray-750: #262626;
    --gray-800: #FAFAFA;
    --gray-900: #FFFFFF;

    /* Component Semantic Colors (Dark Mode) */
    --bg-page: #0A0A0A;
    --bg-card: #171717;
    --bg-sidebar: #171717;
    --border-main: #262626;
    --border-light: #171717;
    --text-primary: #FAFFA;
    --text-secondary: #D4D4D4;
    --text-muted: #A3A3A3;
    --text-light: #737373;

    /* Buttons in Dark Mode */
    --btn-primary-bg: #FFFFFF;
    --btn-primary-text: #0A0A0A;
    --btn-primary-hover-bg: #E5E5E5;
    --btn-primary-hover-text: #0A0A0A;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #262626;
    --btn-secondary-text: #FAFFA;
    --btn-secondary-hover-bg: #171717;
    --btn-secondary-hover-text: #FFFFFF;
    --btn-secondary-hover-border: #404040;

    /* Inputs in Dark Mode */
    --input-bg: #171717;
    --input-border: #262626;
    --input-text: #FAFFA;
    --input-focus-border: #FFFFFF;
    --input-focus-shadow: rgba(255, 255, 255, 0.05);

    /* Sliders in Dark Mode */
    --slider-inactive: #262626;
    --slider-active: #e5f628;
    --slider-pointer: #e5f628;
    --slider-pointer-hover: #cce01b;
    --slider-bubble-bg: #171717;
    --slider-bubble-text: #FFFFFF;
    --slider-tick-inactive: #404040;
    --slider-tick-active: #e5f628;
    --slider-thumb-bg: #0A0A0A;
    --slider-thumb-border: #e5f628;
    --slider-label-text: #A3A3A3;
    --slider-pointer-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --slider-pointer-focus-shadow: 0 0 0 4px rgba(229, 246, 40, 0.25);
    --slider-bubble-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    /* Cart Modal in Dark Mode */
    --cart-icon-bg: transparent;
    --cart-icon-border: transparent;
    --cart-icon-text: #FFFFFF;
    --cart-modal-bg: #0A0A0Ad9;
    --cart-modal-border: rgba(255, 255, 255, 0.08);
    --cart-modal-header-bg: rgba(255, 255, 255, 0.03);
    --cart-item-border: rgba(255, 255, 255, 0.05);
    --cart-item-img-bg: rgba(255, 255, 255, 0.03);
    --cart-item-text: #FFFFFF;
    --cart-item-qty-price: rgba(255, 255, 255, 0.7);

    /* Navigation in Dark Mode */
    --nav-bg-glass: rgba(10, 10, 10, 0.85);
    --nav-bg-opaque: #0A0A0A;
    --nav-mobile-bg: #0A0A0A;
    --nav-border: #262626;

    /* Phone Widget in Dark Mode */
    --phone-widget-bg: rgba(10, 10, 10, 0.95);
    --phone-widget-border: #262626;
}

/* Brand Yellow Text Highlight (Erwin Hettich / Studio style) */
h1 .text-brand-yellow,
h2 .text-brand-yellow,
h3 .text-brand-yellow,
h4 .text-brand-yellow,
h5 .text-brand-yellow,
h6 .text-brand-yellow,
.sqsrte-text-highlight,
.brand-highlight {
    position: relative;
    z-index: 1;
    color: #09090b !important;
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
    display: inline-block !important;
}

h1 .text-brand-yellow::before,
h2 .text-brand-yellow::before,
h3 .text-brand-yellow::before,
h4 .text-brand-yellow::before,
h5 .text-brand-yellow::before,
h6 .text-brand-yellow::before,
.sqsrte-text-highlight::before,
.brand-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #e5f628 !important;
    z-index: -1;
    pointer-events: none;
}

/* --- CONSOLIDATED COMPONENT OVERRIDES & TEMPLATE STYLES --- */

[ng-cloak],
.ng-cloak {
    display: none !important;
}

/* visual-filter compatibility styles */
.product-intro .product-info {
    padding: 0 !important;
}

.product-intro h2 {
    font-size: 28px;
}

.filter-product-info {
    font-size: 12px;
}

.product-intro {
    padding: 2px 5px;
}

/* menu styles */
@media (min-width: 768px) {
    .mega-menu-dropdown {
        background-color: transparent !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }


    .mega-menu-dropdown::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: #ffffffc8 !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .dark .mega-menu-dropdown::before {
        background-color: var(--nav-bg-glass) !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    }
}

/* mainmenu styles */
html,
body {
    overflow-x: hidden !important;
    position: relative;
}

.navbar-container {
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
}

.navbar-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

#mobile-nav {
    top: 0 !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#mobile-nav ul {
    border-color: #e4e4e7 !important;
}

#mobile-nav .plus {
    color: #4b5563 !important;
}

#mobile-nav .border-t {
    border-color: #e4e4e7 !important;
}


/* Dark mode overrides for mobile-nav */


.dark #mobile-nav ul {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #mobile-nav .plus {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark #mobile-nav .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* Ensure sub-dropdowns in navigation inherit the dark translucent background */
.navbar-container ul.absolute,
#mobile-nav ul.absolute {
    background-color: #3c464bde !important;
}

.navbar-container.navbar-opaque::before,
.navbar-container:has(.menu-active)::before {
    background-color: transparent !important;
}

.mega-img-place img,
.img-responsive {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: none !important;
    transition: all 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

@keyframes megaMenuImageFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mega-img-fade-in {
    animation: megaMenuImageFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* cart styles */
.biz-cart-qty-widget {
    position: relative;
    display: inline-block;
}

.biz-cart-qty-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cart-icon-bg);
    border: 1px solid var(--cart-icon-border);
    border-radius: 0;
    color: var(--cart-icon-text);
    box-shadow: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.biz-cart-qty-icon:hover {
    background: transparent;
    color: var(--btn-primary-bg) !important;
    border-color: transparent;
}

.biz-cart-qty-icon h3 {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: 2px solid var(--nav-bg-opaque) !important;
    border-radius: 0;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 !important;
    padding: 0 2px !important;
}

.dark .biz-cart-qty-icon h3 {
    border-color: var(--nav-bg-opaque) !important;
}

.biz-cart-modal {
    position: absolute;
    top: 55px;
    right: 0;
    width: 380px;
    background: var(--cart-modal-bg);
    border-radius: 0;
    border: 1px solid var(--cart-modal-border) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 10000;
    pointer-events: none;
}

.biz-cart-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

@media (max-width: 480px) {
    .biz-cart-modal {
        width: calc(100vw - 45px) !important;
        right: -10px !important;
    }
}

.biz-cart-modal-header {
    padding: 16px 20px;
    background: var(--cart-modal-header-bg);
    border-bottom: 1px solid var(--cart-modal-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    border-radius: 0;
    color: var(--cart-item-text);
}

.dark .biz-cart-modal-header strong {
    color: #ffffff !important;
}

.biz-cart-items {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
    width: 100%;
}

.biz-cart-item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cart-item-border);
    width: 100% !important;
    box-sizing: border-box;
}

.biz-cart-item:last-child {
    border-bottom: none;
}

.biz-cart-item img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 0;
    background: var(--cart-item-img-bg);
    flex-shrink: 0;
}

.biz-cart-item-info {
    flex: 1;
    min-width: 0;
    color: var(--cart-item-text);
}

.biz-cart-item-name {
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--cart-item-text);
    font-size: 14px;
}

.dark .biz-cart-item-name {
    color: #ffffff !important;
}

.biz-cart-item-qty-price {
    font-size: 13px;
    color: var(--cart-item-qty-price);
}

.biz-cart-item-total {
    font-weight: 700;
    color: var(--btn-primary-bg);
    white-space: nowrap;
    margin-top: 2px;
    font-size: 14px;
}

.biz-cart-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--cart-modal-border);
    background: var(--cart-modal-header-bg);
    border-radius: 0;
}

.biz-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--cart-icon-text);
}

.dark .biz-total-row strong {
    color: #ffffff !important;
}

.biz-btn-to-cart {
    display: block;
    text-align: center;
    padding: 13px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text) !important;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.biz-btn-to-cart:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text) !important;
    transform: translateY(-1px);
}

/* product-page styles */
.state-indicator {
    display: none;
}

@media (min-width: 1200px) {
    .state-indicator:before {
        content: "desktop";
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .state-indicator:before {
        content: "tablet";
    }
}

@media (max-width: 767px) {
    .state-indicator:before {
        content: "mobile";
    }
}

.collapse:not(.in) {
    display: none !important;
}

.collapse.in {
    display: block !important;
    visibility: visible !important;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    visibility: visible !important;
}

.product-page .attribute-icon,
.product-page .product-attribute-icon,
.product-page .product-tab-icon,
.product-page dt img,
.product-page .attribute dt img,
.product-page .dl-leaders .product-attribute-icon,
.product-page .product-attributes .product-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* products-filter styles */
.filter-container {
    position: relative !important;
    z-index: 40 !important;
}

.product-filters-popup {
    z-index: 50 !important;
}

.attribute-icon,
.product-attribute-icon,
.filter-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* products-list styles */
.attribute-icon,
.product-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.attribute {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
}

.attribute dt,
.attribute dd {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

.attribute dt {
    /* color: var(--text-light) !important;*/
    flex-shrink: 0 !important;
}

.attribute dt::after {
    content: ":" !important;
    margin-left: 1px !important;
}

.attribute dd {
    color: var(--text-primary) !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

.view-table .attribute {
    width: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
}

/* tail-products-list & tail-products-list-fix styles */
.tail-attribute {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    width: auto !important;
}

.tail-attribute dt,
.tail-attribute dd {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.tail-attribute dt {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.3s ease;
    flex-shrink: 0 !important;
}

.tail-attribute dt::after {
    content: none !important;
    display: none !important;
}

.tail-attribute dd {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.3s ease;
    flex-shrink: 0 !important;
}

.tail-attribute .attribute-icon,
.tail-attribute .product-attribute-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transition: filter 0.3s ease;
}

.dark .tail-attribute .attribute-icon,
.dark .tail-attribute .product-attribute-icon {
    filter: brightness(0) invert(1) !important;
}

.tail-list-item:hover h3,
.tail-list-item.group:hover h3,
.tail-list-item:hover .tail-attribute dt,
.tail-list-item:hover .tail-attribute dd,
.tail-list-item:hover .tail-attribute dd *,
.tail-list-item:hover .attribute.has-value dt,
.tail-list-item:hover .attribute.has-value dd,
.tail-list-item:hover .attribute.has-value dd * {
    color: #ffffff !important;
}

.group:hover .tail-attribute .attribute-icon,
.group:hover .tail-attribute .product-attribute-icon {
    filter: brightness(0) invert(1) !important;
}

.tail-list-item {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-bottom: 1px solid var(--border-main) !important;
    box-sizing: border-box !important;
}

/* menu-widget styles */
@media (max-width: 767px) {
    body {
        padding-bottom: 60px !important;
    }

    nav .phone-widget {
        display: none !important;
    }

    .phone-widget {
        background-color: var(--phone-widget-bg) !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    }
}

@media (min-width: 767px) {
    footer .phone-widget {
        display: none !important;
    }
}

/* Theme Helper Classes for easy integration */
.btn-theme-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-theme-primary:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    color: var(--btn-primary-hover-text) !important;
    opacity: 0.95;
}

.btn-theme-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-theme-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
    color: var(--btn-secondary-hover-text) !important;
    border-color: var(--btn-secondary-hover-border) !important;
}

.text-theme-main {
    color: var(--main-color) !important;
}

.text-theme-hover:hover {
    color: var(--main-color-hover) !important;
}

.text-theme-muted {
    color: var(--text-muted) !important;
}

.border-theme-main {
    border-color: var(--border-main) !important;
}

/* Footer Social Icons - Dark Theme Style */
.dark .footer-social-link {
    background-color: #3c464b !important;
    color: #FFFFFF !important;
}

.dark .footer-social-link svg {
    color: #FFFFFF !important;
}

.dark .footer-social-link:hover {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.dark .footer-social-link:hover svg {
    color: var(--btn-primary-text) !important;
}

/* Sticky Sidebar Scrollbar Custom Styling */
.lg\:sticky::-webkit-scrollbar {
    width: 6px;
}

.lg\:sticky::-webkit-scrollbar-track {
    background: transparent;
}

.lg\:sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}

.lg\:sticky::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
}

.lg\:sticky {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* Ensure position: sticky works inside layout wrappers by using clip or visible */
html,
body,
main,
.page-wrapper,
[role="main"] {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Custom dark mode invert utility for placeholder images */
.dark .placeholder-invert-custom {
    filter: invert(88%) !important;
}

/* --- CMS Typography System --- */
.prose,
.cms-content,
.rich-html,
article {
    color: #374151;
    /* gray-700 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
}

.prose h1,
.cms-content h1,
.rich-html h1,
article h1 {
    font-family: 'Mona Sans', 'Mona Sans Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 900;
    color: #111827;
    /* gray-900 */
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.prose h2,
.cms-content h2,
.rich-html h2,
article h2 {
    font-family: 'Mona Sans', 'Mona Sans Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    color: #111827;
    font-size: 1.625rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    border-left: 4px solid #e5f628;
    padding-left: 0.75rem;
}

.prose h3,
.cms-content h3,
.rich-html h3,
article h3 {
    font-family: 'Mona Sans', 'Mona Sans Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    color: #111827;
    font-size: 1.375rem;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.prose h4,
.cms-content h4,
.rich-html h4,
article h4 {
    font-family: 'Mona Sans', 'Mona Sans Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    color: #111827;
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose p,
.cms-content p,
.rich-html p,
article p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: #4B5563;
    /* gray-600 */
}

.prose ul,
.cms-content ul,
.rich-html ul,
article ul {
    list-style-type: disc;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.625rem;
}

.prose ol,
.cms-content ol,
.rich-html ol,
article ol {
    list-style-type: decimal;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.625rem;
}

.prose li,
.cms-content li,
.rich-html li,
article li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0.125rem;
}

/* --- Dark Mode Overrides for CMS Typography --- */
.dark .prose,
.dark .cms-content,
.dark .rich-html,
.dark article {
    color: #D1D5DB;
    /* gray-300 */
}

.dark .prose h1,
.dark .cms-content h1,
.dark .rich-html h1,
.dark article h1,
.dark .prose h2,
.dark .cms-content h2,
.dark .rich-html h2,
.dark article h2,
.dark .prose h3,
.dark .cms-content h3,
.dark .rich-html h3,
.dark article h3,
.dark .prose h4,
.dark .cms-content h4,
.dark .rich-html h4,
.dark article h4 {
    color: #F9FAFB;
    /* gray-50 */
}

.dark .prose h2,
.dark .cms-content h2,
.dark .rich-html h2,
.dark article h2 {
    border-left-color: #e5f628;
}

.dark .prose p,
.dark .cms-content p,
.dark .rich-html p,
.dark article p {
    color: #9CA3AF;
    /* gray-400 */
}

/* --- Accordion FAQ Section --- */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.accordion-content.is-active {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* --- Stylization of standard typography & lists inside wysiwyg-editor --- */
.wysiwyg-editor h1 {
    font-family: 'Mona Sans', 'Mona Sans Variable', sans-serif;
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: none;
    color: #09090b;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .wysiwyg-editor h1 {
        font-size: 3.5rem;
    }
}

.wysiwyg-editor h2 {
    font-family: 'Mona Sans', 'Mona Sans Variable', sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-transform: none;
    color: #09090b;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .wysiwyg-editor h2 {
        font-size: 2.5rem;
    }
}

.wysiwyg-editor h3 {
    font-family: 'Mona Sans', 'Mona Sans Variable', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #1A1A1A;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.wysiwyg-editor h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #1A1A1A;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.wysiwyg-editor h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.45;
    color: #1A1A1A;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.wysiwyg-editor h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: #1A1A1A;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Lists styling inside wysiwyg-editor */
.wysiwyg-editor ul {
    list-style-type: none;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    padding-left: 0;
}

.wysiwyg-editor ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

/* Custom premium list bullet matching Jungheinrich design (yellow square indicator) */
.wysiwyg-editor ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 6px;
    height: 6px;
    background-color: #e5f628;
    border-radius: 0;
}

/* Strong bold element inside wysiwyg-editor */
.wysiwyg-editor strong {
    font-weight: 700;
    color: #111827;
}

/* Dark Mode overrides for wysiwyg-editor */
.dark .wysiwyg-editor h1,
.dark .wysiwyg-editor h2,
.dark .wysiwyg-editor h3,
.dark .wysiwyg-editor h4,
.dark .wysiwyg-editor h5,
.dark .wysiwyg-editor h6 {
    color: #FFFFFF;
}

.dark .wysiwyg-editor strong {
    color: #FFFFFF;
}

/* CTA Banner Form Specific Styling */
form-widget.cta-banner-form .form-section {
    gap: 0.75rem !important;
}

form-widget.cta-banner-form .formPage {
    gap: 0.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

form-widget.cta-banner-form .formPage li.form-element,
form-widget.cta-banner-form .form-element {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

form-widget.cta-banner-form label,
form-widget.cta-banner-form .form-label,
form-widget.cta-banner-form .itf-label__label,
form-widget.cta-banner-form .form-element label,
form-widget.cta-banner-form .form-element label.form-label,
form-widget.cta-banner-form .form-element .itf-label__label,
.dark form-widget.cta-banner-form label,
.dark form-widget.cta-banner-form .form-label,
.dark form-widget.cta-banner-form .itf-label__label,
.dark form-widget.cta-banner-form .form-element label,
.dark form-widget.cta-banner-form .form-element label.form-label,
.dark form-widget.cta-banner-form .form-element .itf-label__label,
html body form-widget.cta-banner-form label,
html body form-widget.cta-banner-form .form-label,
html body form-widget.cta-banner-form .itf-label__label,
html body .dark form-widget.cta-banner-form label,
html body .dark form-widget.cta-banner-form .form-label,
html body .dark form-widget.cta-banner-form .itf-label__label {
    margin-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #e5f628 !important;
    /* Brand yellow/orange for both light and dark modes */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

form-widget.cta-banner-form .star {
    color: #ef4444 !important;
}

form-widget.cta-banner-form .form_input,
form-widget.cta-banner-form .form_input input.form_input,
form-widget.cta-banner-form .form_input input[type="text"],
form-widget.cta-banner-form .form_input input[type="email"],
form-widget.cta-banner-form .form_input input[type="tel"],
form-widget.cta-banner-form .form_input select {
    padding: 0.25rem 0 !important;
    /* transparent theme: no left/right padding */
    font-size: 1.125rem !important;
    /* increased to 18px */
    height: auto !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

form-widget.cta-banner-form .form_input:focus,
form-widget.cta-banner-form .form_input input.form_input:focus,
form-widget.cta-banner-form .form_input input[type="text"]:focus,
form-widget.cta-banner-form .form_input input[type="email"]:focus,
form-widget.cta-banner-form .form_input input[type="tel"]:focus,
form-widget.cta-banner-form .form_input select:focus {
    box-shadow: none !important;
}

form-widget.cta-banner-form .form-actions {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

form-widget.cta-banner-form .submitButton {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 9999px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

form-widget.cta-banner-form .submitButton:hover {
    background-color: #262626 !important;
}

.dark form-widget.cta-banner-form .submitButton {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

.dark form-widget.cta-banner-form .submitButton:hover {
    background-color: #f5f5f5 !important;
}

/* Back / Secondary Buttons in CTA Banner Form */
form-widget.cta-banner-form .backButton,
form-widget.cta-banner-form .order-product-clear-cart-button,
form-widget.cta-banner-form .order-product-remove-button,
html body form-widget.cta-banner-form .backButton,
html body form-widget.cta-banner-form .order-product-clear-cart-button,
html body form-widget.cta-banner-form .order-product-remove-button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: transparent !important;
}

form-widget.cta-banner-form .backButton:hover,
form-widget.cta-banner-form .order-product-clear-cart-button:hover,
form-widget.cta-banner-form .order-product-remove-button:hover,
html body form-widget.cta-banner-form .backButton:hover,
html body form-widget.cta-banner-form .order-product-clear-cart-button:hover,
html body form-widget.cta-banner-form .order-product-remove-button:hover {
    color: #0c0a09 !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Dark theme divide-gray-800 border-color override */
.dark\:divide-gray-800:is(.dark *)> :not([hidden])~ :not([hidden]) {
    border-color: #21272a !important;
}

/* Dark theme border-gray-800 border-color override */
.dark\:border-gray-800:is(.dark *) {
    border-color: #21272a !important;
}

/* Dark theme bg-slate-900 override to black */
.dark\:bg-slate-900:is(.dark *) {
    background-color: #000000 !important;
}

/* Level 3 links hover color in mega menu (orange/yellow) */
.mega-menu-dropdown ul ul a:hover {
    color: #e5f628 !important;
}

/* --- Section wysiwyg-editor H1 headings --- */
.right-left-100-section .wysiwyg-editor h1,
.text-left-100-section .wysiwyg-editor h1,
.left-text-section .wysiwyg-editor h1,
.left-right-section .wysiwyg-editor h1,
.left-text-70-30-section .wysiwyg-editor h1,
.right-text-30-70-section .wysiwyg-editor h1,
.text-center-section .wysiwyg-editor h1,
.hero-text1-section .wysiwyg-editor h1,
.hero-text2-section .wysiwyg-editor h1 {
    font-family: var(--font-display, inherit);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-size: 2.25rem;
    color: #111827;
    margin-bottom: 1.5rem;
}
.dark .right-left-100-section .wysiwyg-editor h1,
.dark .text-left-100-section .wysiwyg-editor h1,
.dark .left-text-section .wysiwyg-editor h1,
.dark .left-right-section .wysiwyg-editor h1,
.dark .left-text-70-30-section .wysiwyg-editor h1,
.dark .right-text-30-70-section .wysiwyg-editor h1,
.dark .text-center-section .wysiwyg-editor h1,
.dark .hero-text1-section .wysiwyg-editor h1,
.dark .hero-text2-section .wysiwyg-editor h1 {
    color: #ffffff;
}
.text-center-section .wysiwyg-editor h1 {
    text-align: center;
}
@media (min-width: 640px) {
    .right-left-100-section .wysiwyg-editor h1,
    .text-left-100-section .wysiwyg-editor h1,
    .left-text-section .wysiwyg-editor h1,
    .left-right-section .wysiwyg-editor h1,
    .left-text-70-30-section .wysiwyg-editor h1,
    .right-text-30-70-section .wysiwyg-editor h1,
    .text-center-section .wysiwyg-editor h1,
    .hero-text1-section .wysiwyg-editor h1,
    .hero-text2-section .wysiwyg-editor h1 {
        font-size: 3rem;
    }
}
@media (min-width: 1024px) {
    .right-left-100-section .wysiwyg-editor h1,
    .text-left-100-section .wysiwyg-editor h1,
    .left-text-section .wysiwyg-editor h1,
    .left-right-section .wysiwyg-editor h1,
    .left-text-70-30-section .wysiwyg-editor h1,
    .right-text-30-70-section .wysiwyg-editor h1,
    .text-center-section .wysiwyg-editor h1,
    .hero-text1-section .wysiwyg-editor h1,
    .hero-text2-section .wysiwyg-editor h1 {
        font-size: 4.5rem;
    }
}

/* Center alignments & overrides for wysiwyg-editor inside text-center-section */
.text-center-section .wysiwyg-editor h2 {
    border-left: none !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.text-center-section .wysiwyg-editor ul li {
    padding-left: 0 !important;
    text-align: center !important;
}
.text-center-section .wysiwyg-editor ul li::before {
    display: inline-block !important;
    position: static !important;
    vertical-align: middle !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   STUDIO DESIGN SYSTEM OVERRIDES
   Enforces typography, buttons, grids, borders and separators
   ========================================================================== */

/* 1. Typography Overrides */
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
[class*="-section"] h1, [class*="-section"] h2, [class*="-section"] h3, [class*="-section"] h4, [class*="-section"] h5, [class*="-section"] h6,
[class*="-widget"] h1, [class*="-widget"] h2, [class*="-widget"] h3,
.scroll-text h3 {
    font-family: 'Mona Sans', 'Mona Sans Variable', sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.03em !important;
    color: var(--text-primary) !important;
    line-height: 1.15 !important;
}

.section:not([class*="hero"]) h1,
.section:not([class*="hero"]) h2,
[class*="-section"]:not([class*="hero"]) h1,
[class*="-section"]:not([class*="hero"]) h2,
[class*="-widget"]:not([class*="hero"]) h1,
[class*="-widget"]:not([class*="hero"]) h2 {
    font-size: 2.25rem !important;
}

@media (min-width: 768px) {
    .section:not([class*="hero"]) h1,
    .section:not([class*="hero"]) h2,
    [class*="-section"]:not([class*="hero"]) h1,
    [class*="-section"]:not([class*="hero"]) h2,
    [class*="-widget"]:not([class*="hero"]) h1,
    [class*="-widget"]:not([class*="hero"]) h2 {
        font-size: 3.75rem !important;
    }
}

/* 2. Pills and Buttons */
a.inline-block.bg-brand-yellow,
.section a.inline-block[class*="bg-brand-yellow"],
button[class*="bg-brand-yellow"],
.biz-btn-to-cart,
.form-switch label,
.footer-social-link,
.active-filter,
.carousel-prev,
.carousel-next {
    border-radius: 9999px !important;
}

/* --- Styling all primary buttons to match the Menu button design --- */
a.inline-block.bg-brand-yellow,
.section a.inline-block[class*="bg-brand-yellow"],
button[class*="bg-brand-yellow"],
.biz-btn-to-cart,
.add-to-cart-btn,
.image-banner-section span.inline-block.bg-brand-yellow,
.image-banner-widget span.inline-block.bg-brand-yellow,
.video-banner-section span.inline-block.bg-brand-yellow,
.video-banner-widget span.inline-block.bg-brand-yellow,
.section a.inline-block.bg-brand-yellow {
    background-color: #09090b !important;
    color: #ffffff !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Enlarge arrows inside these buttons */
a.inline-block.bg-brand-yellow svg,
.section a.inline-block[class*="bg-brand-yellow"] svg,
button[class*="bg-brand-yellow"] svg,
.biz-btn-to-cart svg,
.add-to-cart-btn svg,
.image-banner-section span.inline-block.bg-brand-yellow svg,
.image-banner-widget span.inline-block.bg-brand-yellow svg,
.video-banner-section span.inline-block.bg-brand-yellow svg,
.video-banner-widget span.inline-block.bg-brand-yellow svg,
.section a.inline-block.bg-brand-yellow svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Dark theme button rules */
.dark a.inline-block.bg-brand-yellow,
.dark .section a.inline-block[class*="bg-brand-yellow"],
.dark button[class*="bg-brand-yellow"],
.dark .biz-btn-to-cart,
.dark .add-to-cart-btn,
.dark .image-banner-section span.inline-block.bg-brand-yellow,
.dark .image-banner-widget span.inline-block.bg-brand-yellow,
.dark .video-banner-section span.inline-block.bg-brand-yellow,
.dark .video-banner-widget span.inline-block.bg-brand-yellow,
.dark .section a.inline-block.bg-brand-yellow {
    background-color: #ffffff !important;
    color: #09090b !important;
}

/* Hover effects */
a.inline-block.bg-brand-yellow:hover,
.section a.inline-block[class*="bg-brand-yellow"]:hover,
button[class*="bg-brand-yellow"]:hover,
.biz-btn-to-cart:hover,
.add-to-cart-btn:hover,
.image-banner-section span.inline-block.bg-brand-yellow:hover,
.image-banner-widget span.inline-block.bg-brand-yellow:hover,
.video-banner-section span.inline-block.bg-brand-yellow:hover,
.video-banner-widget span.inline-block.bg-brand-yellow:hover,
.section a.inline-block.bg-brand-yellow:hover {
    background-color: #262626 !important; /* hover:bg-neutral-800 equivalent */
    color: #ffffff !important;
}

.dark a.inline-block.bg-brand-yellow:hover,
.dark .section a.inline-block[class*="bg-brand-yellow"]:hover,
.dark button[class*="bg-brand-yellow"]:hover,
.dark .biz-btn-to-cart:hover,
.dark .add-to-cart-btn:hover,
.dark .image-banner-section span.inline-block.bg-brand-yellow:hover,
.dark .image-banner-widget span.inline-block.bg-brand-yellow:hover,
.dark .video-banner-section span.inline-block.bg-brand-yellow:hover,
.dark .video-banner-widget span.inline-block.bg-brand-yellow:hover,
.dark .section a.inline-block.bg-brand-yellow:hover {
    background-color: #f5f5f5 !important; /* dark:hover:bg-neutral-100 equivalent */
    color: #09090b !important;
}

/* 3. Cards Rounded Radii & Border styling */
.cards-33-33-33-section a.relative.block,
.cards-33-33-33-section div.relative.block,
.cards-70-30-section a.relative.block,
.cards-50-50-section a.relative.block,
.accordion-item,
.testimonial-card,
.stat-card,
.info-card,
[data-aos-id-stats] > div,
.testimonials-section [class*="bg-white"],
.stat-section [class*="bg-white"],
.horizontal-panel,
.mobile-item,
.wysiwyg-editor article,
.sidebar-wrap,
.sidebar-wrap.side-bar {
    border-radius: 24px !important; /* rounded-3xl equivalent */
    border: 1px solid var(--border-main) !important;
    border-bottom-width: 1px !important; /* remove the thick yellow bottom border */
    box-shadow: none !important;
    background-color: var(--bg-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cards-33-33-33-section a.relative.block:hover,
.accordion-item:hover,
[data-aos-id-stats] > div:hover,
.horizontal-panel:hover {
    border-color: var(--text-primary) !important;
    transform: translateY(-2px) !important;
}

/* 4. Timeline Grid Separators (signature Studio style) */
.studio-divider {
    position: relative;
    padding-top: 4rem;
}
.studio-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 1px;
    background-color: var(--text-primary);
}
.studio-divider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 0;
    height: 1px;
    background-color: var(--border-main);
}

/* 5. Mobile Nav Menu Hover Highlights */
#mobile-nav a {
    transition: all 0.2s ease-in-out;
}

#mobile-nav a span {
    transition: all 0.2s ease-in-out;
    display: inline-block;
    padding: 0.05em 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

#mobile-nav a:hover span {
    background-color: #e5f628 !important;
    color: #000000 !important;
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
    padding-top: 0.05em !important;
    padding-bottom: 0.05em !important;
}

/* Arrow SVGs fill color inside buttons in light theme */
html:not(.dark) svg.text-brand-near-black,
html:not(.dark) svg.fill-current.text-brand-near-black {
    color: #ffffff !important;
    fill: #ffffff !important;
}