@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

/* --- ANTIGRAVITY CENTRALIZED THEME VARIABLES & OVERRIDES --- */

:root {
    /* Main Theme Colors */
    --main-color: #1B3A6B;
    /* ProfiShop Blue */
    --main-color-hover: #12285A;
    /* Deep Blue */
    --main-color-light: #EBF0F8;
    /* Light Blue Tint */

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

    /* Gray/Zinc scale */
    --gray-50: #F4F6F9;
    /* Base Background */
    --gray-100: #EBF0F8;
    --gray-150: #DEE2E6;
    /* Border Color as per guidelines */
    --gray-200: #D7DADB;
    /* Light grey as per guidelines */
    --gray-300: #C2C6C8;
    --gray-400: #6C757D;
    /* Medium grey / meta text */
    --gray-500: #4B5563;
    --gray-600: #3C464B;
    /* Dark grey */
    --gray-750: #DEE2E6;
    --gray-800: #1A1A1A;
    /* Near Black */
    --gray-900: #000000;

    /* Component Semantic Colors */
    --bg-page: #F4F6F9;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --border-main: #DEE2E6;
    --border-light: #EBF0F8;
    --text-primary: #1A1A1A;
    /* Near Black */
    --text-secondary: #333333;
    /* Body text */
    --text-muted: #6C757D;
    /* Meta text */
    --text-light: #888888;

    /* Buttons */
    --btn-primary-bg: #FFD000;
    /* Action Yellow */
    --btn-primary-text: #1A1A1A;
    /* Near Black */
    --btn-primary-hover-bg: #FFB900;
    --btn-primary-hover-text: #1A1A1A;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #DEE2E6;
    --btn-secondary-text: #1B3A6B;
    --btn-secondary-hover-bg: #EBF0F8;
    --btn-secondary-hover-text: #12285A;
    --btn-secondary-hover-border: #1B3A6B;

    /* Inputs & Forms */
    --input-bg: #FFFFFF;
    --input-border: #DEE2E6;
    --input-text: #1A1A1A;
    --input-focus-border: #1B3A6B;
    --input-focus-shadow: rgba(27, 58, 107, 0.15);

    /* Errors */
    --color-error: #DC3545;
    /* Red as per guidelines */

    /* Sliders & range */
    --slider-inactive: #DEE2E6;
    --slider-active: #1B3A6B;
    --slider-pointer: #FFD000;
    /* Thumb Yellow */
    --slider-pointer-hover: #FFB900;
    --slider-bubble-bg: #1B3A6B;
    --slider-bubble-text: #FFFFFF;
    --slider-tick-inactive: #D7DADB;
    --slider-tick-active: #1B3A6B;
    --slider-thumb-bg: #FFFFFF;
    --slider-thumb-border: #1A1A1A;
    /* Border 2px solid #1A1A1A as per guidelines */
    --slider-label-text: #6C757D;
    --slider-pointer-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0px rgba(27, 58, 107, 0.2);
    --slider-pointer-focus-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(27, 58, 107, 0.25);
    --slider-bubble-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

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

    /* Navigation */
    --nav-bg-glass: #3c464bde;
    /* Dark charcoal/grey translucent */
    --nav-bg-opaque: #3c464bde;
    --nav-mobile-bg: #3c464bde;
    --nav-border: #2C3539;

    /* Phone Widget */
    --phone-widget-bg: rgba(27, 58, 107, 0.9);
    --phone-widget-border: #12285A;
}

.dark {
    /* Dark Theme Colors */
    --main-color: #38BDF8;
    /* Sky-400 highlights in dark mode */
    --main-color-hover: #7DD3FC;
    --main-color-light: rgba(56, 189, 248, 0.1);

    /* Gray/Zinc scale in Dark Mode */
    --gray-50: #0F172A;
    /* Slate-900 */
    --gray-100: #1E293B;
    /* Slate-800 */
    --gray-150: #334155;
    /* Slate-700 */
    --gray-200: #475569;
    --gray-300: #64748B;
    --gray-400: #94A3B8;
    /* Medium text */
    --gray-500: #CBD5E1;
    --gray-600: #E2E8F0;
    --gray-750: #334155;
    --gray-800: #F8FAFC;
    /* Near white text */
    --gray-900: #FFFFFF;

    /* Component overrides in Dark Mode */
    --bg-page: #0F172A;
    --bg-card: #1E293B;
    --bg-sidebar: #1E293B;
    --border-main: #384145;
    --border-light: #1E293B;
    --text-primary: #F8FAFC;
    --text-secondary: #E2E8F0;
    --text-muted: #94A3B8;
    --text-light: #64748B;

    /* Buttons in Dark Mode */
    --btn-primary-bg: #FFB900;
    /* Action Yellow (Dark) */
    --btn-primary-text: #1A1A1A;
    --btn-primary-hover-bg: #FFD000;
    --btn-primary-hover-text: #1A1A1A;

    --btn-secondary-bg: transparent;
    --btn-secondary-border: #334155;
    --btn-secondary-text: #E2E8F0;
    --btn-secondary-hover-bg: #1E293B;
    --btn-secondary-hover-text: #FFFFFF;
    --btn-secondary-hover-border: #475569;

    /* Inputs in Dark Mode */
    --input-bg: #1E293B;
    --input-border: #334155;
    --input-text: #F8FAFC;
    --input-focus-border: #38BDF8;
    --input-focus-shadow: rgba(56, 189, 248, 0.15);

    /* Sliders in Dark Mode */
    --slider-inactive: #334155;
    --slider-active: #FFB900;
    --slider-pointer: #FFB900;
    --slider-pointer-hover: #FFD000;
    --slider-bubble-bg: #1E293B;
    --slider-bubble-text: #FFFFFF;
    --slider-tick-inactive: #475569;
    --slider-tick-active: #FFB900;
    --slider-thumb-bg: #0F172A;
    --slider-thumb-border: #FFB900;
    --slider-label-text: #94A3B8;
    --slider-pointer-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --slider-pointer-focus-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 185, 0, 0.25);
    --slider-bubble-shadow: 0 2px 4px 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: #3c464bde;
    --cart-modal-border: rgba(255, 255, 255, 0.1);
    --cart-modal-header-bg: rgba(255, 255, 255, 0.05);
    --cart-item-border: rgba(255, 255, 255, 0.08);
    --cart-item-img-bg: rgba(255, 255, 255, 0.05);
    --cart-item-text: #FFFFFF;
    --cart-item-qty-price: rgba(255, 255, 255, 0.7);

    /* Navigation in Dark Mode */
    --nav-bg-glass: #3c464bde;
    --nav-bg-opaque: #3c464bde;
    --nav-mobile-bg: #3c464bde;
    --nav-border: #2C3539;

    /* Phone Widget in Dark Mode */
    --phone-widget-bg: rgba(15, 23, 42, 0.95);
    --phone-widget-border: #334155;
}


/* --- 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: var(--nav-bg-glass) !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);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

#mobile-nav {
    top: 80px !important;
    background-color: #ffffffc8 !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom-color: #e4e4e7 !important;
}

#mobile-nav a {
    color: #1a1a1a !important;
}

#mobile-nav a:hover {
    color: #ffd000 !important;
}

#mobile-nav ul ul a {
    color: #6b7280 !important;
}

#mobile-nav ul ul a:hover {
    color: #ffd000 !important;
}

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

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

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

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

/* Dark mode overrides for mobile-nav */
.dark #mobile-nav {
    background-color: var(--nav-mobile-bg) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #mobile-nav a {
    color: #ffffff !important;
}

.dark #mobile-nav a:hover {
    color: #ffd000 !important;
}

.dark #mobile-nav .level-li-2>div>a {
    color: #ffd000 !important;
}

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

.dark #mobile-nav ul ul a:hover {
    color: #ffd000 !important;
}

.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;
}

.dark #mobile-nav span {
    color: rgba(255, 255, 255, 0.6) !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: var(--nav-bg-opaque) !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 .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 *,
.group:hover .tail-attribute dt,
.group:hover .tail-attribute dd,
.group:hover .tail-attribute dd *,
.group:hover .attribute.has-value dt,
.group:hover .attribute.has-value dd,
.group: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: 'Outfit', -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: 'Outfit', -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 #FFD000;
    padding-left: 0.75rem;
}

.prose h3,
.cms-content h3,
.rich-html h3,
article h3 {
    font-family: 'Outfit', -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: 'Outfit', -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: #FFD000;
}

.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: 'Red Hat Display', 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #1A1A1A;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.wysiwyg-editor h2 {
    font-family: 'Red Hat Display', 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #1A1A1A;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-left: 4px solid #FFD000;
    padding-left: 0.75rem;
}

.wysiwyg-editor h3 {
    font-family: 'Red Hat Display', 'Outfit', 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: #FFD000;
    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: #FFD000 !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;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* bottom line only */
    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 {
    border-bottom-color: #FFD000 !important;
    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.5rem 1.5rem !important;
    font-size: 0.875rem !important;
    background-color: #FFD000 !important;
    color: #0c0a09 !important;
    border-radius: 0.25rem !important;
    width: 100% !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.2s ease-in-out !important;
}

form-widget.cta-banner-form .submitButton:hover {
    background-color: #e6bc00 !important;
    transform: translateY(-1px) !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;
}

/* Level 3 links hover color in mega menu (orange/yellow) */
.mega-menu-dropdown ul ul a:hover {
    color: #ffd000 !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;
}

/* --- MOBILE MENU, CAROUSEL & UTILITY OVERRIDES --- */

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #1D1D20;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
    background-color: #1D1D20;
    color: #E4E4E7;
}

/* Mobile menu transitions */
[x-cloak] {
    display: none !important;
}

/* Header Hamburger Active State */
.hamburger-btn.active svg>*:nth-child(1) {
    opacity: 0;
    transform: rotate(45deg);
    y: 11px;
}

.hamburger-btn.active svg>*:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: center;
}

.hamburger-btn.active svg>*:nth-child(3) {
    y: 11px;
    transform: rotate(-45deg);
}

.hamburger-btn svg>* {
    transform-origin: center;
    transition: all 0.2s ease;
}

/* Switch toggle custom styling */
.form-switch input[type="checkbox"]:checked+label span:first-child {
    transform: translateX(20px);
}

/* Swiper carousel custom opacity & transitions */
.carousel.swiper-container {
    overflow: visible;
}

.carousel .swiper-slide img {
    opacity: 0.32;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.3);
}

.carousel .swiper-slide>div>div {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.carousel .swiper-slide-active img,
.carousel .swiper-slide-duplicate-active img {
    opacity: 1;
    transform: scale(1);
}

.carousel .swiper-slide-active>div>div,
.carousel .swiper-slide-duplicate-active>div>div {
    opacity: 1;
}

/* Glowing BG blur effects */
.glow-overlay {
    pointer-events: none;
    mix-blend-mode: screen;
}