.parallax-img {
    background-image: url('/theme/defaultlaravel/assets/images/HEADER-BACKGROUND.png');
    /* Parallax effect properties */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Add some minimum height to make the effect visible */
    min-height: 500px;
}

.image-container-zoom {
    overflow: hidden; /* This clips the zoomed image to stay within bounds */
}

.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    filter: grayscale(0.3);
}

.zoom-image:hover {
    transform: scale(1.25);
    filter: grayscale(0);
}

/* Force primary button text to white - only for primary buttons */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    color: #ffffff !important;
}

.hideOnDesktop {
    display: none;
}

@media (max-width: 767px) {
    .hideOnDesktop {
        display: block;
    }
}

.hideOnMobile {
    display: block;
}

@media (max-width: 767px) {
    .hideOnMobile {
        display: none;
    }
}

/* Wishlist heart icon styles - ONLY controls color and fill */
.heart_filled {
    color: #ff0000 !important;
    fill: #ff0000 !important;
}

/* Make sure heart_filled works with any FontAwesome heart class */
i.heart_filled::before {
    color: #ff0000 !important;
    font-weight: 900 !important; /* Make it solid/filled */
}

/* When heart is filled (in wishlist), make it solid red */
.facl.facl-heart-o.heart_filled,
.facl-heart-o.heart_filled {
    color: #ff0000 !important;
}

.facl.facl-heart-o.heart_filled::before,
.facl-heart-o.heart_filled::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* solid/filled */
    content: "\f004" !important; /* heart */
    color: #ff0000 !important;
}

/* Ensure heart icons are visible and properly styled */
.far.fa-heart,
.facl.facl-heart-o,
.facl-heart-o {
    display: inline-block !important;
    font-size: 16px !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

/* Heart icon hover effect */
.far.fa-heart:hover,
.facl.facl-heart-o:hover,
.facl-heart-o:hover {
    color: #ff0000 !important;
}

/* Make sure heart icons work in wishlist buttons */
.wishlist-btn i {
    display: inline-block !important;
    font-size: 16px !important;
}

/* Custom CSS for consistent badge styling */

/* Ensure cart and wishlist count badges have identical styling */
.navbar-custom .topbar-toolbar a .cart-count,
.navbar-custom .topbar-toolbar a .wishlist-count {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    width: 15px;
    height: 15px;
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    box-shadow: 1px 1px 3px 0 rgba(var(--bs-dark-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-custom .topbar-toolbar a .cart-count,
    .navbar-custom .topbar-toolbar a .wishlist-count {
        width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 18px;
        top: -8px;
        right: -8px;
    }
}

/* Ensure consistent positioning for all badge containers */
.navbar-custom .topbar-toolbar a {
    position: relative;
}

/* Cart table styling */
.quantity-btn {
    transition: all 0.2s ease;
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

.quantity-btn:hover {
    transform: scale(1.1);
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-input {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    padding: 8px 12px;
    min-width: 60px;
    background-color: #f8f9fa;
}

.cart-service-item {
    background-color: #f8f9fa;
}

.cart-service-item td {
    border-color: #dee2e6;
}

/* Ensure prices are right-aligned */
.table td.text-end {
    text-align: right !important;
}

/* Responsive cart table */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .quantity-btn {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Hide badges when count is 0 */
.navbar-custom .topbar-toolbar a .cart-count:empty,
.navbar-custom .topbar-toolbar a .wishlist-count:empty,
.navbar-custom .topbar-toolbar a .cart-count[data-count="0"],
.navbar-custom .topbar-toolbar a .wishlist-count[data-count="0"] {
    display: none;
}

/* Logo consistency - ensure logos maintain same dimensions when scrolling */
.navbar-custom .navbar-brand img {
    max-height: 45px !important;
    max-width: 300px !important;
    width: auto !important;
    height: auto !important;
    transition: all 0.3s ease;
}

/* Ensure logo dimensions are consistent across all layouts */
.navbar-custom .navbar-brand img,
.navbar-custom.navbar-scroll .navbar-brand img {
    max-height: 45px !important;
    max-width: 300px !important;
    width: auto !important;
    height: auto !important;
}

/* Mobile logo consistency */
@media (max-width: 991.98px) {
    .navbar-custom .navbar-brand img {
        max-height: 40px !important;
        max-width: 150px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .navbar-custom.navbar-scroll .navbar-brand img {
        max-height: 40px !important;
        max-width: 150px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
    .navbar-custom .navbar-brand img,
    .navbar-logo img {
        max-height: 35px !important;
        max-width: 120px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .navbar-logo span {
        font-size: 18px !important;
    }
}

/* Very small mobile devices */
@media (max-width: 400px) {
    .navbar-custom .navbar-brand img,
    .navbar-logo img {
        max-height: 30px !important;
        max-width: 100px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .navbar-logo span {
        font-size: 16px !important;
    }
}

/* Reduce logo container spacing on mobile */
@media (max-width: 991.98px) {
    .d-lg-none .row[class*="mb-"],
    .d-lg-none .row[style*="padding"] {
        margin-bottom: 0.5rem !important;
    }
    
    .d-lg-none .navbar-logo {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .d-lg-none .col-12.d-flex.justify-content-center.align-items-center {
        padding: 0 !important;
    }
    
    /* Reduce container padding on mobile for logo area */
    .navbar-custom .container-fluid {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    
    /* Ensure navbar has minimal padding on mobile */
    .navbar-custom.py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* Fix navigation underline gap between logo and nav links */
.navbar-custom .navbar-brand {
    position: relative;
    display: inline-block;
}

.navbar-custom .navbar-brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bs-body-color);
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.navbar-custom .navbar-brand:hover::after {
    opacity: 1;
}

/* Ensure navigation links align with logo underline */
.navbar-custom .navbar-nav .nav-item .nav-link {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 8px;
}

.navbar-custom .navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bs-body-color);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.navbar-custom .navbar-nav .nav-item .nav-link:hover::before,
.navbar-custom .navbar-nav .nav-item .nav-link.active::before {
    opacity: 1;
}

/* Ensure proper alignment between logo and nav links */
.navbar-custom .d-none.d-lg-block {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.navbar-custom .navbar-brand {
    margin-right: 2rem;
}

.navbar-custom .navbar-nav {
    margin-left: 0;
    padding-left: 0;
}

.navbar-custom .navbar-nav .nav-item {
    margin-right: 1rem;
}

.navbar-custom .navbar-nav .nav-item:last-child {
    margin-right: 0;
}

/* Fix dropdown menu spacing - add 10px gap between menu and dropdown */
.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu {
    margin-top: 10px !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Ensure dropdown menu appears with proper spacing on hover */
.navbar-custom .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Add padding to dropdown menu to prevent accidental closure */
.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* Ensure smooth transition for dropdown menus */
.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
    display: block;
}

/* Fix for mega menu dropdowns */
.navbar-custom .navbar-nav .nav-item.dropdown-mega .dropdown-menu {
    margin-top: 10px !important;
    border-top: none !important;
}

/* Ensure dropdown menu stays open when hovering over it */
.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for FIXED navigation bar dropdown gap issue */
.navbar-custom.fixed-top .navbar-nav .nav-item.dropdown .dropdown-menu {
    margin-top: 10px !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
}

/* Ensure fixed navbar dropdowns have no gap */
.navbar-custom.fixed-top .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Add invisible bridge for fixed navbar dropdowns */
.navbar-custom.fixed-top .navbar-nav .nav-item.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 1049;
}

/* Fix for sticky navbar as well */
.navbar-custom.sticky-top .navbar-nav .nav-item.dropdown .dropdown-menu {
    margin-top: 10px !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
}

.navbar-custom.sticky-top .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: all 0.2s ease-in-out !important;
}

.navbar-custom.sticky-top .navbar-nav .nav-item.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 1049;
}

/* Ensure fixed navbar has proper positioning */
.navbar-custom.fixed-top,
.navbar-custom.sticky-top {
    position: relative;
}

.navbar-custom.fixed-top .navbar-nav .nav-item.dropdown,
.navbar-custom.sticky-top .navbar-nav .nav-item.dropdown {
    position: relative;
}

/* Fix for any navbar with position fixed */
.navbar-custom[style*="position: fixed"] .navbar-nav .nav-item.dropdown .dropdown-menu {
    margin-top: 10px !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
}

.navbar-custom[style*="position: fixed"] .navbar-nav .nav-item.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 1049;
}

/* Fix for dropdown parent links - ensure they remain clickable */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure dropdown parent links can be clicked to navigate */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link[href]:not([href="#"]):not([href=""]):not([href="javascript:void(0)"]):not([href="javascript:;"]) {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Add visual indicator for clickable parent links */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link[href]:not([href="#"]):not([href=""]):not([href="javascript:void(0)"]):not([href="javascript:;"]) {
    position: relative;
}

/* Ensure dropdown toggle doesn't prevent parent link clicks */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
    pointer-events: auto !important;
}

/* Fix for Bootstrap dropdown behavior - allow parent link clicks */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle[data-bs-toggle="dropdown"] {
    pointer-events: auto !important;
}

/* Ensure parent links work on both hover and click */
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link:hover,
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link:focus {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ========================================
   HEADER POSITIONING FIXES
   ======================================== */

/* Remove any top spacing from header and body */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure header has no top margin/padding */
#kalles-section-header_top {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* Header container positioning - starts in normal flow */
.header-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
}

/* Main content area - remove top spacing */
.main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure content starts immediately after header */
.main-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any content that might have top margins */
.main-content .container,
.main-content .container-fluid,
.main-content .row,
.main-content .col,
.main-content .col-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specific fix for category pages and product listings */
.category-page .main-content,
.product-listing .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any banner or hero sections that might have top margins */
.main-content .banner,
.main-content .hero-section,
.main-content .page-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure navbar doesn't overlap content */
.navbar-custom {
    position: relative !important;
}

/* Fixed header state - when scrolled */
/* Header z-index must be below Tier 2 modals (1055) so modals appear on top */
/* Using lower z-index to ensure modals are always on top */
.headerFixed,
.header-container.headerFixed,
header.headerFixed,
.header.headerFixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    z-index: 100 !important; /* Much lower than Tier 2 modals (1055) to ensure modals are on top */
    transition: all 0.3s ease-in-out !important;
}

/* Ensure all header elements are below Tier 2 modals */
/* These rules must come AFTER modal rules to ensure proper stacking */
header,
.header,
.header-container,
.header-container.headerFixed,
#kalles-section-header_top,
.navbar-custom,
.header-wrapper,
.header-section,
.headerFixed,
.headerFixed.header-container {
    z-index: 100 !important; /* Much lower than Tier 2 modals (1055) */
    position: relative; /* Ensure z-index applies */
}

/* Force header below when any modal is open */
body:has(.modal.show) .headerFixed,
body:has(.modal.show) .header-container,
body:has(.modal.show) header,
body:has(.modal.show) .header,
body:has(.modal.show) #kalles-section-header_top,
body:has(.modal.show) .navbar-custom {
    z-index: 100 !important;
}

/* When header is fixed, add top padding to body to prevent content jump */
body.has-fixed-header {
    padding-top: 0 !important; /* Will be set dynamically by JavaScript */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .headerFixed {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
    }
}

/* Ensure no conflicts with Bootstrap or other frameworks */
.container,
.container-fluid,
.row,
.col,
.col-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any page builder content */
.pagebuilder-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any dynamic content */
.dynamic-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   ADDITIONAL HEADER POSITIONING FIXES
   ======================================== */

/* Force remove any margins from the very top of the page */
body > *:first-child,
html > body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure the header section has no top spacing */
#kalles-section-header_top,
.kalles-section-header_top,
.header-section,
.header-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* Fix for any top banner or announcement bars */
.t_header,
.top-banner,
.announcement-bar,
.promo-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure main content wrapper has no top spacing */
.main-content,
.content-wrapper,
.page-content,
.site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* Fix for any page-specific content */
.category-page,
.product-page,
.home-page,
.shop-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any grid systems that might add top margins */
.row:first-child,
.container:first-child,
.container-fluid:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure no Bootstrap or other framework conflicts for main content */
.main-content *[class*="mt-"],
.main-content *[class*="pt-"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specific fix for the first element in main content */
.main-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any hero sections or banners */
.hero-section,
.banner-section,
.page-banner,
.content-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


.main-content {
    position: relative !important;
}

/* Ensure header elements don't have any top spacing */
header,
.header,
.navbar,
.navbar-custom {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   DRAG & DROP BLOCK SYSTEM SUPPORT
   ======================================== */

/* Handle any drag-and-drop block system menus */
.pagebuilder-menu,
.block-menu,
.drag-drop-menu,
.pagebuilder-header,
.block-header,
.dynamic-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

/* Ensure content starts immediately after any header type */
.pagebuilder-menu + .main-content,
.block-menu + .main-content,
.drag-drop-menu + .main-content,
.pagebuilder-header + .main-content,
.block-header + .main-content,
.dynamic-header + .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle any wrapper containers that might add spacing */
.pagebuilder-wrapper,
.block-wrapper,
.drag-drop-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure first element in any content area has no top spacing */
.pagebuilder-content > *:first-child,
.block-content > *:first-child,
.drag-drop-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle any page builder specific classes */
.pb-container,
.pb-row,
.pb-column,
.pb-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure page builder content starts immediately after header */
.pb-container:first-child,
.pb-row:first-child,
.pb-column:first-child,
.pb-block:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle any potential gaps between header and content */
.header-container + *,
#kalles-section-header_top + *,
header + *,
.header + *,
.navbar + *,
.navbar-custom + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure no gaps regardless of header height */
body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle any wrapper divs that might add spacing */
body > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure main content wrapper has no top spacing */
.main-content,
.content-wrapper,
.page-content,
.page-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Handle any section elements that might add spacing */
section:first-child,
.section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   DEBUGGING & VISUALIZATION
   ======================================== */



.headerFixed {
    border-color: #dc3545 !important; /* Red border when fixed */
}

/* Visual indicator for body padding */
body.has-fixed-header::before {
    content: "Header is FIXED - Body padding: " attr(style);
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    display: none; /* Set to 'block' to see debugging info */
}

/* Visual indicator for normal flow */
body:not(.has-fixed-header)::before {
    content: "Header is in NORMAL FLOW";
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    display: none; /* Set to 'block' to see debugging info */
}

/* ========================================
   CENTRALIZED MODAL Z-INDEX SYSTEM
   ========================================
   Simple 3-tier z-index system for consistent layering:
   
   TIER 1: PageBuilder Access Bar (fixed bar)
   - z-index: 10000 (defined in pagebuilder styles)
   - Content starts below this, so no z-index needed
   
   TIER 2: Standard Modals (Bootstrap default)
   - Modal: 1055
   - Backdrop: 1050
   - Used for: Edit product/brand, settings modal, orders modal, etc.
   
   TIER 3: Modals on Top of Modals
   - Modal: 1065
   - Backdrop: 1060
   - Used for: Advanced slide editor, etc.
   
   TIER 4: Selector Modals (on top of settings modals)
   - Modal: 1000000100
   - Backdrop: 1000000095
   - Used for: Category selector, brand selector, option selector, colour-group selector, collection selector, season selector
   
   ======================================== */

/* TIER 2: Standard Bootstrap Modals */
/* Used for: Edit product/brand, settings, orders, quickview, etc. */
.modal {
    z-index: 1055 !important;
}

.modal.show {
    z-index: 1055 !important;
}

.modal-dialog {
    z-index: 1056 !important;
    position: relative;
}

.modal-content {
    z-index: 1056 !important;
    position: relative;
}

/* Standard Modal Backdrop */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal-backdrop.show {
    z-index: 1050 !important;
}

.modal-backdrop.fade {
    z-index: 1050 !important;
}

.modal-backdrop.fade.show {
    z-index: 1050 !important;
}

/* Product Video Modal - same z-index logic as quickview */
#productVideoModal,
#productVideoModal.modal,
#productVideoModal.modal.show,
#productVideoModal.show {
    z-index: 1000000200 !important;
    position: fixed !important;
}

#productVideoModal .modal-dialog {
    z-index: 1000000201 !important;
    position: relative;
}

#productVideoModal .modal-content {
    z-index: 1000000201 !important;
    position: relative;
}

/* Product Video Modal backdrop - remove backdrop completely */
#productVideoModal ~ .modal-backdrop,
#productVideoModal + .modal-backdrop,
#productVideoModal.show ~ .modal-backdrop,
#productVideoModal.show + .modal-backdrop,
body.modal-open:has(#productVideoModal.show) .modal-backdrop,
body.modal-open:has(#productVideoModal.show) .modal-backdrop:last-child,
body:has(#productVideoModal.show) .modal-backdrop,
body:has(#productVideoModal.show) .modal-backdrop.show,
body:has(#productVideoModal.show) .modal-backdrop.fade,
body:has(#productVideoModal.show) .modal-backdrop.fade.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Support for dynamic modal IDs (productDetailsWithImageGrid) - same z-index logic as quickview */
[id^="productVideoModal-"],
[id^="productVideoModal-"].modal,
[id^="productVideoModal-"].modal.show,
[id^="productVideoModal-"].show {
    z-index: 1000000200 !important;
    position: fixed !important;
}

[id^="productVideoModal-"] .modal-dialog {
    z-index: 1000000201 !important;
    position: relative;
}

[id^="productVideoModal-"] .modal-content {
    z-index: 1000000201 !important;
    position: relative;
}

[id^="productVideoModal-"] ~ .modal-backdrop,
[id^="productVideoModal-"] + .modal-backdrop,
[id^="productVideoModal-"].show ~ .modal-backdrop,
[id^="productVideoModal-"].show + .modal-backdrop,
body.modal-open:has([id^="productVideoModal-"].show) .modal-backdrop,
body.modal-open:has([id^="productVideoModal-"].show) .modal-backdrop:last-child,
body:has([id^="productVideoModal-"].show) .modal-backdrop,
body:has([id^="productVideoModal-"].show) .modal-backdrop.show,
body:has([id^="productVideoModal-"].show) .modal-backdrop.fade,
body:has([id^="productVideoModal-"].show) .modal-backdrop.fade.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Quick View Modal - elevated above PageBuilder bar */
#quickViewModel,
body.pagebuilder-mode #quickViewModel,
#quickViewModel.modal,
#quickViewModel.modal.show,
#quickViewModel.show {
    z-index: 1000000200 !important;
    position: fixed !important;
}

#quickViewModel .modal-dialog {
    z-index: 1000000201 !important;
    position: relative;
}

#quickViewModel .modal-content {
    z-index: 1000000201 !important;
    position: relative;
}

/* Quickview backdrop - keep paired just below modal */
#quickViewModel ~ .modal-backdrop,
#quickViewModel + .modal-backdrop,
#quickViewModel.show ~ .modal-backdrop,
#quickViewModel.show + .modal-backdrop,
body:has(#quickViewModel) .modal-backdrop,
body:has(#quickViewModel.show) .modal-backdrop,
body:has(#quickViewModel.show) .modal-backdrop.show,
body:has(#quickViewModel.show) .modal-backdrop.fade.show {
    z-index: 1000000195 !important;
    position: fixed !important;
}

/* Terms & Conditions Modal - Same z-index as myorders modal */
/* Must be above fixed header - Maximum specificity */
#termsModal,
#termsModal.pagebuilder-modal,
#termsModal.modal,
#termsModal.modal.pagebuilder-modal,
#termsModal.modal.fade,
#termsModal.modal.fade.pagebuilder-modal,
body #termsModal,
body #termsModal.pagebuilder-modal,
body #termsModal.modal,
html body #termsModal,
html body #termsModal.modal {
    z-index: 9999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#termsModal.show,
#termsModal.pagebuilder-modal.show,
#termsModal.modal.show,
#termsModal.modal.pagebuilder-modal.show,
#termsModal.modal.fade.show,
#termsModal.modal.fade.pagebuilder-modal.show,
body #termsModal.show,
body #termsModal.modal.show,
html body #termsModal.show,
html body #termsModal.modal.show {
    z-index: 9999999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#termsModal .modal-dialog,
#termsModal.show .modal-dialog,
#termsModal.pagebuilder-modal .modal-dialog {
    z-index: 10000000 !important;
    position: relative !important;
    margin: 1.75rem auto !important;
    pointer-events: none !important;
}

#termsModal .modal-content,
#termsModal.show .modal-content,
#termsModal.pagebuilder-modal .modal-content {
    z-index: 10000000 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Terms & Conditions backdrop - same z-index as myorders modal */
#termsModal ~ .modal-backdrop,
#termsModal + .modal-backdrop,
#termsModal.show ~ .modal-backdrop,
#termsModal.show + .modal-backdrop,
#termsModal.pagebuilder-modal ~ .modal-backdrop,
#termsModal.pagebuilder-modal + .modal-backdrop,
body:has(#termsModal) .modal-backdrop,
body:has(#termsModal.show) .modal-backdrop,
body:has(#termsModal.show) .modal-backdrop.show,
body:has(#termsModal.show) .modal-backdrop.fade.show {
    z-index: 9999998 !important;
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure header is below Terms & Conditions modal when modal is open */
/* Use maximum specificity to override any other CSS */
body:has(#termsModal.show) .headerFixed,
body:has(#termsModal.show) .header-container.headerFixed,
body:has(#termsModal.show) header,
body:has(#termsModal.show) .header,
body:has(#termsModal.show) #kalles-section-header_top,
body:has(#termsModal.show) .navbar-custom,
html body:has(#termsModal.show) .headerFixed,
html body:has(#termsModal.show) .header-container,
html body:has(#termsModal.show) header,
#termsModal.show ~ .headerFixed,
#termsModal.show ~ .header-container,
#termsModal.show ~ header,
#termsModal.show ~ .header,
body #termsModal.show ~ .headerFixed,
html body #termsModal.show ~ .headerFixed,
#termsModal.terms-modal-active ~ .headerFixed,
#termsModal.terms-modal-active ~ .header-container,
#termsModal.terms-modal-active ~ header,
#termsModal.terms-modal-active ~ .header,
body:has(#termsModal.terms-modal-active) .headerFixed,
body:has(#termsModal.terms-modal-active) .header-container,
body:has(#termsModal.terms-modal-active) header,
body:has(#termsModal.terms-modal-active) .header,
body:has(#termsModal.terms-modal-active) #kalles-section-header_top {
    z-index: 100 !important; /* Much lower than modal (9999999) and backdrop (9999998) */
}

/* TIER 3: Modals on Top of Modals */
/* Used for: Advanced slide editor, etc. */
#advancedSlideEditorModal {
    z-index: 1065 !important;
}

#advancedSlideEditorModal.show {
    z-index: 1065 !important;
}

#advancedSlideEditorModal .modal-dialog {
    z-index: 1066 !important;
    position: relative;
}

#advancedSlideEditorModal .modal-content {
    z-index: 1066 !important;
    position: relative;
}

/* Backdrop for tier 3 modals - below modal but above tier 2 */
#advancedSlideEditorModal ~ .modal-backdrop,
#advancedSlideEditorModal + .modal-backdrop,
body:has(#advancedSlideEditorModal.show) .modal-backdrop {
    z-index: 1060 !important;
}

/* Override: when marked topmost, take the highest tier */
#advancedSlideEditorModal.modal-topmost,
#advancedSlideEditorModal.modal-topmost.show {
    z-index: 1000000300 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
#advancedSlideEditorModal.modal-topmost .modal-dialog,
#advancedSlideEditorModal.modal-topmost.show .modal-dialog,
#advancedSlideEditorModal.modal-topmost .modal-content,
#advancedSlideEditorModal.modal-topmost.show .modal-content {
    z-index: 1000000301 !important;
    position: relative !important;
}
body:has(#advancedSlideEditorModal.modal-topmost.show) .modal-backdrop,
#advancedSlideEditorModal.modal-topmost ~ .modal-backdrop,
#advancedSlideEditorModal.modal-topmost + .modal-backdrop {
    z-index: 1000000299 !important;
}

/* TIER 4: Selector Modals (on top of settings modals) */
/* Used for: Category selector, brand selector, option selector, colour-group selector, collection selector, season selector */
/* Must be HIGHER than pagebuilder-modal (1000000100) to appear above settings modals */
#categorySelectorModal,
#brandSelectorModal,
#parentCategorySelectorModal,
#colourSelectorModal,
#optionSelectorModal,
#colourGroupSelectorModal,
#collectionSelectorModal,
#seasonSelectorModal,
.modal-tier-4 {
    z-index: 1000000200 !important;
}

#categorySelectorModal.show,
#brandSelectorModal.show,
#parentCategorySelectorModal.show,
#colourSelectorModal.show,
#optionSelectorModal.show,
#colourGroupSelectorModal.show,
#collectionSelectorModal.show,
#seasonSelectorModal.show,
.modal-tier-4.show {
    z-index: 1000000200 !important;
}

#categorySelectorModal .modal-dialog,
#brandSelectorModal .modal-dialog,
#parentCategorySelectorModal .modal-dialog,
#colourSelectorModal .modal-dialog,
#optionSelectorModal .modal-dialog,
#colourGroupSelectorModal .modal-dialog,
#collectionSelectorModal .modal-dialog,
#seasonSelectorModal .modal-dialog,
.modal-tier-4 .modal-dialog {
    z-index: 1000000201 !important;
    position: relative;
}

#categorySelectorModal .modal-content,
#brandSelectorModal .modal-content,
#parentCategorySelectorModal .modal-content,
#colourSelectorModal .modal-content,
#optionSelectorModal .modal-content,
#colourGroupSelectorModal .modal-content,
#collectionSelectorModal .modal-content,
#seasonSelectorModal .modal-content,
.modal-tier-4 .modal-content {
    z-index: 1000000201 !important;
    position: relative;
}

/* Topmost modal helper (use for advanced editors that must float above all) */
.modal-topmost {
    z-index: 1000000300 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.modal-topmost .modal-dialog,
.modal-topmost .modal-content {
    z-index: 1000000301 !important;
    position: relative;
}
.modal-topmost + .modal-backdrop,
.modal-topmost ~ .modal-backdrop,
body:has(.modal-topmost.show) .modal-backdrop {
    z-index: 1000000299 !important;
}

#categorySelectorModal,
#brandSelectorModal,
#parentCategorySelectorModal,
#colourSelectorModal,
#optionSelectorModal,
#colourGroupSelectorModal,
#collectionSelectorModal,
#seasonSelectorModal {
    z-index: 1000000200 !important;
}

#categorySelectorModal.show,
#brandSelectorModal.show,
#parentCategorySelectorModal.show,
#colourSelectorModal.show,
#optionSelectorModal.show,
#colourGroupSelectorModal.show,
#collectionSelectorModal.show,
#seasonSelectorModal.show {
    z-index: 1000000200 !important;
}

#categorySelectorModal .modal-dialog,
#brandSelectorModal .modal-dialog,
#parentCategorySelectorModal .modal-dialog,
#colourSelectorModal .modal-dialog,
#optionSelectorModal .modal-dialog,
#colourGroupSelectorModal .modal-dialog,
#collectionSelectorModal .modal-dialog,
#seasonSelectorModal .modal-dialog,
.modal-tier-4 .modal-dialog {
    z-index: 1000000201 !important;
    position: relative;
}

#categorySelectorModal .modal-content,
#brandSelectorModal .modal-content,
#parentCategorySelectorModal .modal-content,
#colourSelectorModal .modal-content,
#optionSelectorModal .modal-content,
#colourGroupSelectorModal .modal-content,
#collectionSelectorModal .modal-content,
#seasonSelectorModal .modal-content,
.modal-tier-4 .modal-content {
    z-index: 1000000201 !important;
    position: relative;
}

/* Backdrop for tier 4 selector modals - below modal but above pagebuilder-modal */
#categorySelectorModal ~ .modal-backdrop,
#categorySelectorModal + .modal-backdrop,
#brandSelectorModal ~ .modal-backdrop,
#brandSelectorModal + .modal-backdrop,
#parentCategorySelectorModal ~ .modal-backdrop,
#parentCategorySelectorModal + .modal-backdrop,
#colourSelectorModal ~ .modal-backdrop,
#colourSelectorModal + .modal-backdrop,
#optionSelectorModal ~ .modal-backdrop,
#optionSelectorModal + .modal-backdrop,
#colourGroupSelectorModal ~ .modal-backdrop,
#colourGroupSelectorModal + .modal-backdrop,
#collectionSelectorModal ~ .modal-backdrop,
#collectionSelectorModal + .modal-backdrop,
#seasonSelectorModal ~ .modal-backdrop,
#seasonSelectorModal + .modal-backdrop,
body:has(#categorySelectorModal.show) .modal-backdrop,
body:has(#brandSelectorModal.show) .modal-backdrop,
body:has(#parentCategorySelectorModal.show) .modal-backdrop,
body:has(#colourSelectorModal.show) .modal-backdrop,
body:has(#optionSelectorModal.show) .modal-backdrop,
body:has(#colourGroupSelectorModal.show) .modal-backdrop,
body:has(#collectionSelectorModal.show) .modal-backdrop,
body:has(#seasonSelectorModal.show) .modal-backdrop {
    z-index: 1000000195 !important;
}

/* CRITICAL: Override .pagebuilder-modal z-index for selector modals */
/* These must appear ABOVE pagebuilder-modal (1000000100) */
body #categorySelectorModal,
body #brandSelectorModal,
body #parentCategorySelectorModal,
body #colourSelectorModal,
body #optionSelectorModal,
body #colourGroupSelectorModal,
body #collectionSelectorModal,
body #seasonSelectorModal {
    z-index: 1000000200 !important;
    position: fixed !important;
}

body #categorySelectorModal.show,
body #brandSelectorModal.show,
body #parentCategorySelectorModal.show,
body #colourSelectorModal.show,
body #optionSelectorModal.show,
body #colourGroupSelectorModal.show,
body #collectionSelectorModal.show,
body #seasonSelectorModal.show {
    z-index: 1000000200 !important;
}

body #categorySelectorModal .modal-dialog,
body #brandSelectorModal .modal-dialog,
body #parentCategorySelectorModal .modal-dialog,
body #colourSelectorModal .modal-dialog,
body #optionSelectorModal .modal-dialog,
body #colourGroupSelectorModal .modal-dialog,
body #collectionSelectorModal .modal-dialog,
body #seasonSelectorModal .modal-dialog {
    z-index: 1000000201 !important;
}

body #categorySelectorModal .modal-content,
body #brandSelectorModal .modal-content,
body #parentCategorySelectorModal .modal-content,
body #colourSelectorModal .modal-content,
body #optionSelectorModal .modal-content,
body #colourGroupSelectorModal .modal-content,
body #collectionSelectorModal .modal-content,
body #seasonSelectorModal .modal-content {
    z-index: 1000000201 !important;
}

/* Order Modal - Uses standard modal z-index (Tier 2) */
#orderModal {
    z-index: 1055 !important;
    position: fixed !important;
}

#orderModal.show {
    z-index: 1055 !important;
}

#orderModal > div {
    z-index: 1056 !important;
    position: relative !important;
}

/* Hidden Filters Modal - Uses standard modal z-index (Tier 2) */
#hiddenFiltersModal {
    z-index: 1055 !important;
    position: fixed !important;
}

#hiddenFiltersModal.show {
    z-index: 1055 !important;
}

#hiddenFiltersModal .modal-dialog {
    z-index: 1056 !important;
    position: relative !important;
}

#hiddenFiltersModal .modal-content {
    z-index: 1056 !important;
    position: relative !important;
}

/* File Upload Modal - Must be above settings modals (TIER 4) */
/* Used for: Image browser/selector when browsing images in maps, slides, etc. */
#fileUploadModal {
    z-index: 1000000200 !important;
    position: fixed !important;
}

#fileUploadModal.show {
    z-index: 1000000200 !important;
    display: block !important;
}

#fileUploadModal .modal-dialog {
    z-index: 1000000201 !important;
    position: relative !important;
}

#fileUploadModal .modal-content {
    z-index: 1000000201 !important;
    position: relative !important;
}

/* File Upload Modal backdrop - below modal but above settings modal */
#fileUploadModal ~ .modal-backdrop,
#fileUploadModal + .modal-backdrop,
body:has(#fileUploadModal.show) .modal-backdrop {
    z-index: 1000000195 !important;
}

/* Map Settings Modal - Uses pagebuilder modal z-index (TIER 4) */
#mapSettingsModal {
    z-index: 1000000100 !important;
    position: fixed !important;
}

#mapSettingsModal.show {
    z-index: 1000000100 !important;
}

#mapSettingsModal .modal-dialog {
    z-index: 1000000101 !important;
    position: relative !important;
}

#mapSettingsModal .modal-content {
    z-index: 1000000101 !important;
    position: relative !important;
}

/* Map Settings Modal backdrop */
#mapSettingsModal ~ .modal-backdrop,
#mapSettingsModal + .modal-backdrop,
body:has(#mapSettingsModal.show) .modal-backdrop {
    z-index: 1000000095 !important;
}

/* Coordinate Picker Modal - Must be above map settings modal */
/* Used for: Picking coordinates from map when editing locations */
#coordinatePickerModal {
    z-index: 1000000110 !important;
    position: fixed !important;
}

#coordinatePickerModal.show {
    z-index: 1000000110 !important;
    display: block !important;
}

#coordinatePickerModal .modal-dialog {
    z-index: 1000000111 !important;
    position: relative !important;
}

#coordinatePickerModal .modal-content {
    z-index: 1000000111 !important;
    position: relative !important;
}

/* Coordinate Picker Modal backdrop - below modal but above map settings modal */
#coordinatePickerModal ~ .modal-backdrop,
#coordinatePickerModal + .modal-backdrop,
body:has(#coordinatePickerModal.show) .modal-backdrop {
    z-index: 1000000105 !important;
}

/* Ensure coordinate picker is above map settings when both are open */
body:has(#coordinatePickerModal.show) #mapSettingsModal,
body:has(#coordinatePickerModal.show) #mapSettingsModal.show {
    z-index: 1000000100 !important;
}

/* Map Container Sizing - Ensure maps fill their containers properly */
#coordinatePickerMap,
#mapSettingsMap {
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure Leaflet map container fills the parent and is contained */
#coordinatePickerMap .leaflet-container,
#mapSettingsMap .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure Leaflet's internal elements are contained */
#coordinatePickerMap .leaflet-pane,
#mapSettingsMap .leaflet-pane {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Fix for maps inside modals - ensure they're visible and sized */
.modal.show #coordinatePickerMap,
.modal.show #mapSettingsMap {
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    visibility: visible !important;
    display: block !important;
    overflow: hidden !important;
}

/* Ensure modal body doesn't interfere with map sizing */
.modal-body #coordinatePickerMap,
.modal-body #mapSettingsMap {
    width: 100% !important;
    height: 400px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ========================================
   DEFAULT BLOCK MARGINS
   ========================================
   Most blocks get default top/bottom margins for spacing.
   These can be overridden via Quick Formatting modal (margin_top/margin_bottom)
   which applies inline styles with higher specificity than CSS rules.
   
   To remove default margins, set margin_top and margin_bottom to 0 in Quick Formatting.
   ======================================== */

/* Default margins for all blocks - NO !important so inline styles can override */
section[data-block-type],
div[data-block-type],
[data-block-type] {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Blocks that should have zero margin by default */
/* These are typically layout/navigation blocks that should be flush */
section[data-block-type="footer"],
div[data-block-type="footer"],
[data-block-type="footer"],
section[data-block-type="headersecondarybar"],
div[data-block-type="headersecondarybar"],
[data-block-type="headersecondarybar"],
section[data-block-type="menucenteredicon"],
div[data-block-type="menucenteredicon"],
[data-block-type="menucenteredicon"],
section[data-block-type="menu"],
div[data-block-type="menu"],
[data-block-type="menu"],
section[data-block-type="slideshow"],
div[data-block-type="slideshow"],
[data-block-type="slideshow"],
section[data-block-type="header"],
div[data-block-type="header"],
[data-block-type="header"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Also handle case variations and block slug variations */
section[data-block-slug="Footer"],
div[data-block-slug="Footer"],
[data-block-slug="Footer"],
section[data-block-slug="HeaderSecondaryBar"],
div[data-block-slug="HeaderSecondaryBar"],
[data-block-slug="HeaderSecondaryBar"],
section[data-block-slug="MenuCenteredIcon"],
div[data-block-slug="MenuCenteredIcon"],
[data-block-slug="MenuCenteredIcon"],
section[data-block-slug="Menu"],
div[data-block-slug="Menu"],
[data-block-slug="Menu"],
section[data-block-slug="Slideshow"],
div[data-block-slug="Slideshow"],
[data-block-slug="Slideshow"],
section[data-block-slug="Header"],
div[data-block-slug="Header"],
[data-block-slug="Header"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* First block on page should not have top margin */
section[data-block-type]:first-child,
div[data-block-type]:first-child,
[data-block-type]:first-child {
    margin-top: 0;
}

/* Note: Inline styles from Quick Formatting modal will automatically override 
   these defaults due to higher specificity. Setting margin_top/margin_bottom 
   to 0px in Quick Formatting will remove the default margins. */

/* When Quick Formatting sets margin to 0, also zero the inner block content
   (block views often output section/div with data-block-type which gets the
   default 40px margin; the wrapper has inline style but inner element needs this) */
.block-admin-wrapper[data-qf-margin-top="0px"] [data-block-type],
.block-admin-wrapper[data-qf-margin-top="0"] [data-block-type] {
    margin-top: 0 !important;
}
.block-admin-wrapper[data-qf-margin-bottom="0px"] [data-block-type],
.block-admin-wrapper[data-qf-margin-bottom="0"] [data-block-type] {
    margin-bottom: 0 !important;
}

/* Quick Formatting Modal Styles */
#quick-formatting-modal {
    z-index: 100000 !important;
}

#quick-formatting-modal.show {
    z-index: 100000 !important;
}

#quick-formatting-modal .modal-dialog {
    max-width: 500px;
    z-index: 100001 !important;
}

#quick-formatting-modal .modal-content {
    z-index: 100002 !important;
}

#quick-formatting-modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Ensure backdrop is behind Quick Formatting modal */
#quick-formatting-modal.show ~ .modal-backdrop,
#quick-formatting-modal.show + .modal-backdrop {
    z-index: 99999 !important;
}

/* When Quick Formatting modal is shown, ensure its backdrop is lower */
body:has(#quick-formatting-modal.show) .modal-backdrop {
    z-index: 99999 !important;
}

#quick-formatting-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#quick-formatting-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#quick-formatting-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#quick-formatting-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

#quick-formatting-modal .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

#quick-formatting-modal .form-control,
#quick-formatting-modal .form-select {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

#quick-formatting-modal .form-control:focus,
#quick-formatting-modal .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#quick-formatting-modal h6 {
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* Quick View Size Buttons Styling */
#product-sizes .size-options .square-rg,
.product-sizes-quickview .size-options .square-rg {
    display: inline-block;
    min-width: 45px;
    height: 45px;
    padding: 8px 12px;
    margin: 4px;
    text-align: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

#product-sizes .size-options .square-rg:hover,
.product-sizes-quickview .size-options .square-rg:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

#product-sizes .size-options .square-rg.active-size,
.product-sizes-quickview .size-options .square-rg.active-size {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

#product-sizes .size-options .square-rg.active-size:hover,
.product-sizes-quickview .size-options .square-rg.active-size:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

/* Disabled state for out of stock sizes */
#product-sizes .size-options .square-rg.disabled,
.product-sizes-quickview .size-options .square-rg.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #999;
}

#product-sizes .size-options .square-rg.disabled:hover,
.product-sizes-quickview .size-options .square-rg.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #ccc;
    background-color: #f5f5f5;
    color: #999;
}

/* Quick View Carousel Arrow Controls - Fixed Position and Light Grey Background */
#quickViewModel .carousel-control-prev,
#quickViewModel .carousel-control-next,
.modal .carousel-control-prev,
.modal .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    background-color: #e9ecef !important; /* Light grey background */
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: background-color 0.2s ease !important; /* Only allow background color transitions */
    margin: 0 !important;
    padding: 0 !important;
    will-change: auto !important; /* Prevent browser optimization that might cause movement */
}

/* Prevent any transforms during carousel slide transitions */
#quickViewModel .carousel.slide .carousel-control-prev,
#quickViewModel .carousel.slide .carousel-control-next,
#quickViewModel .carousel.sliding .carousel-control-prev,
#quickViewModel .carousel.sliding .carousel-control-next,
.modal .carousel.slide .carousel-control-prev,
.modal .carousel.slide .carousel-control-next,
.modal .carousel.sliding .carousel-control-prev,
.modal .carousel.sliding .carousel-control-next {
    transform: translateY(-50%) !important;
    transition: background-color 0.2s ease !important;
}

/* Ensure arrows stay fixed even when carousel is transitioning */
#quickViewModel .carousel[data-bs-ride] .carousel-control-prev,
#quickViewModel .carousel[data-bs-ride] .carousel-control-next,
.modal .carousel[data-bs-ride] .carousel-control-prev,
.modal .carousel[data-bs-ride] .carousel-control-next {
    transform: translateY(-50%) !important;
}

/* Override any Bootstrap carousel transitions that might affect controls */
#quickViewModel .carousel .carousel-control-prev,
#quickViewModel .carousel .carousel-control-next,
#quickViewModel .carousel-item .carousel-control-prev,
#quickViewModel .carousel-item .carousel-control-next,
.modal .carousel .carousel-control-prev,
.modal .carousel .carousel-control-next,
.modal .carousel-item .carousel-control-prev,
.modal .carousel-item .carousel-control-next {
    transform: translateY(-50%) !important;
    transition: background-color 0.2s ease !important;
}

/* Prevent any movement during carousel animation states */
#quickViewModel .carousel.carousel-slide .carousel-control-prev,
#quickViewModel .carousel.carousel-slide .carousel-control-next,
#quickViewModel .carousel.carousel-fade .carousel-control-prev,
#quickViewModel .carousel.carousel-fade .carousel-control-next,
.modal .carousel.carousel-slide .carousel-control-prev,
.modal .carousel.carousel-slide .carousel-control-next,
.modal .carousel.carousel-fade .carousel-control-prev,
.modal .carousel.carousel-fade .carousel-control-next {
    transform: translateY(-50%) !important;
}

#quickViewModel .carousel-control-prev,
.modal .carousel-control-prev {
    left: 10px !important;
}

#quickViewModel .carousel-control-next,
.modal .carousel-control-next {
    right: 10px !important;
}

#quickViewModel .carousel-control-prev:hover,
#quickViewModel .carousel-control-next:hover,
.modal .carousel-control-prev:hover,
.modal .carousel-control-next:hover {
    background-color: #d0d4d8 !important; /* Slightly darker grey on hover */
    transform: translateY(-50%) !important; /* Keep position fixed on hover */
}

#quickViewModel .carousel-control-prev:active,
#quickViewModel .carousel-control-next:active,
.modal .carousel-control-prev:active,
.modal .carousel-control-next:active {
    transform: translateY(-50%) !important; /* Keep position fixed on click */
    background-color: #c6cbd0 !important; /* Slightly darker on click */
}

#quickViewModel .carousel-control-prev-icon,
#quickViewModel .carousel-control-next-icon,
.modal .carousel-control-prev-icon,
.modal .carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 100% 100% !important;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important; /* Black icon */
}

#quickViewModel .carousel-control-prev:hover .carousel-control-prev-icon,
#quickViewModel .carousel-control-next:hover .carousel-control-next-icon,
.modal .carousel-control-prev:hover .carousel-control-prev-icon,
.modal .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important; /* Keep black on hover */
}