/**
 * NOVA Custom Child Theme Styles
 * 
 * This file contains custom CSS for the child theme.
 * You can override styles from the parent NOVA theme here.
 */

/* Override primary color variable to blue */
:root {
    --primary: #0d93d6 !important;
}

/* ============================================
   COMPREHENSIVE YELLOW TO BLUE COLOR OVERRIDES
   Replace all yellow colors from parent theme with blue
   ============================================ */

/* Primary color overrides - Replace all yellow (#F8BF00, #EFC03D, #ffc107) with blue */
.bg-primary,
[class*="bg-primary"] {
    background-color: #0d93d6 !important;
}

.bg-primary:hover,
.bg-primary:focus,
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: #0a7bb8 !important;
}

/* Border primary color */
.border-primary,
[class*="border-primary"] {
    border-color: #0d93d6 !important;
}

/* Text primary color */
.text-primary,
[class*="text-primary"] {
    color: #0d93d6 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #0a7bb8 !important;
}

/* Button primary styles */
.btn-primary,
[class*="btn-primary"],
#cart-checkout-btn,
#cart-checkout-btn.btn-primary {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Ensure "Zur Kasse" button text is white */
#cart-checkout-btn,
#cart-checkout-btn.btn-primary,
#cart-checkout-btn.btn-primary *,
#cart-checkout-btn a,
#cart-checkout-btn span {
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
[class*="btn-primary"]:hover,
[class*="btn-primary"]:focus {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    color: #ffffff !important;
}

/* Button outline primary */
.btn-outline-primary,
[class*="btn-outline-primary"] {
    color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
[class*="btn-outline-primary"]:hover,
[class*="btn-outline-primary"]:focus {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Replace all yellow color codes with blue */
[style*="#F8BF00"],
[style*="#EFC03D"],
[style*="#ffc107"],
[style*="#F8BF00"],
[style*="#c59800"],
[style*="#ac8400"],
[style*="#ffda5f"] {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Progress bar yellow to blue */
.progress-bar {
    background-color: #0d93d6 !important;
}

/* Stepper/Checkout progress yellow underline to blue */
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after {
    background: #0d93d6 !important;
}

@media (max-width: 991.98px) {
    .stepper .step-current .step-content::after {
        background: #0d93d6 !important;
    }
}

/* Tab navigation yellow underline to blue */
.tab-navigation .nav-link.active::after,
.tab-navigation .nav-link:hover::after {
    border-color: #0d93d6 !important;
}

/* Alert primary (if any yellow alerts exist) */
.alert-primary {
    background-color: rgba(13, 147, 214, 0.1) !important;
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Badge primary */
.badge-primary,
.badge[class*="primary"] {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Link primary color */
a[class*="primary"],
a.text-primary {
    color: #0d93d6 !important;
}

a[class*="primary"]:hover,
a[class*="primary"]:focus,
a.text-primary:hover,
a.text-primary:focus {
    color: #0a7bb8 !important;
}

/* Any element with yellow background or border */
*[style*="background-color: #F8BF00"],
*[style*="background-color: #EFC03D"],
*[style*="background-color: #ffc107"],
*[style*="border-color: #F8BF00"],
*[style*="border-color: #EFC03D"],
*[style*="border-color: #ffc107"],
*[style*="color: #F8BF00"],
*[style*="color: #EFC03D"],
*[style*="color: #ffc107"] {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Focus outline yellow to blue */
*:focus {
    outline-color: #0d93d6 !important;
}

*:focus-visible {
    outline-color: #0d93d6 !important;
}

/* Selection/highlight yellow to blue */
::selection {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

::-moz-selection {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* ============================================
   RADIO BUTTONS AND CHECKBOXES - YELLOW TO BLUE
   ============================================ */

/* Custom Radio Buttons - Change yellow to blue */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
    background-color: #0d93d6 !important;
}

.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(13, 147, 214, 0.25) !important;
}

.custom-radio .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
}

.custom-radio .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(13, 147, 214, 0.5) !important;
}

/* Custom Checkboxes - Change yellow to blue */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
    background-color: #0d93d6 !important;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
    background-color: #0d93d6 !important;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(13, 147, 214, 0.25) !important;
}

.custom-checkbox .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
}

.custom-checkbox .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(13, 147, 214, 0.5) !important;
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(13, 147, 214, 0.5) !important;
}

/* Custom Switch - Change yellow to blue */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
    background-color: #0d93d6 !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(13, 147, 214, 0.25) !important;
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #0d93d6 !important;
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(13, 147, 214, 0.5) !important;
}

/* Bootstrap 5 Form Check Input (Radio & Checkbox) */
.form-check-input:checked {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
}

.form-check-input:focus {
    border-color: #0d93d6 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 147, 214, 0.25) !important;
}

.form-check-input[type="radio"]:checked {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
}

.form-check-input[type="checkbox"]:checked {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
}

/* Standard HTML Radio and Checkbox inputs */
input[type="radio"]:checked {
    accent-color: #0d93d6 !important;
}

input[type="checkbox"]:checked {
    accent-color: #0d93d6 !important;
}

input[type="radio"]:focus {
    outline-color: #0d93d6 !important;
}

input[type="checkbox"]:focus {
    outline-color: #0d93d6 !important;
}

/* Remove unwanted borders/outlines on button click/focus */
button:focus,
button:active,
.btn:focus,
.btn:active,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:focus,
input[type="button"]:active {
    outline: none !important;
    box-shadow: none !important;
}

button:focus:not(:disabled),
.btn:focus:not(:disabled),
input[type="submit"]:focus:not(:disabled),
input[type="button"]:focus:not(:disabled) {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure cart buttons work properly - prevent wrapper from blocking clicks */
.productbox[role="button"] .productbox-add-to-cart,
.productbox[role="button"] .productbox-buy-button,
.productbox[role="button"] button[type="submit"],
.productbox[role="button"] .btn[type="submit"] {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

.productbox[role="button"] .productbox-buy-button,
.productbox[role="button"] .productbox-add-to-cart {
    pointer-events: auto !important;
}

/* Prevent productbox wrapper from interfering with form submission */
.productbox[role="button"] form,
.productbox[role="button"] .form,
.productbox form.form-basket,
.productbox-slider form.form-basket {
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
}

.productbox[role="button"] button[type="submit"],
.productbox[role="button"] .btn[type="submit"],
.productbox[role="button"] .productbox-add-to-cart,
.productbox form button[type="submit"],
.productbox-slider form button[type="submit"] {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    cursor: pointer !important;
}

/* Ensure form inputs are clickable */
.productbox form input,
.productbox-slider form input,
.productbox form button,
.productbox-slider form button {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

/* Standardize font sizes across the website */
body {
    font-size: 0.875rem !important;
    line-height: 1.5;
}

h1, .h1 { font-size: 1.5rem !important; }
h2, .h2 { font-size: 1.25rem !important; }
h3, .h3 { font-size: 1.125rem !important; }
h4, .h4 { font-size: 1rem !important; }
h5, .h5 { font-size: 0.9375rem !important; }
h6, .h6 { font-size: 0.875rem !important; }

/* Make productlist-filter-headline same style as h3 */
.productlist-filter-headline {
    font-size: 1.125rem !important;
    margin-bottom: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
}

/* ============================================
   COMPREHENSIVE YELLOW TO BLUE COLOR OVERRIDES
   Replace all yellow colors from parent theme with blue
   ============================================ */

/* Primary color overrides - Replace all yellow (#F8BF00, #EFC03D, #ffc107) with blue */
.bg-primary,
[class*="bg-primary"] {
    background-color: #0d93d6 !important;
}

.bg-primary:hover,
.bg-primary:focus,
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: #0a7bb8 !important;
}

/* Border primary color */
.border-primary,
[class*="border-primary"] {
    border-color: #0d93d6 !important;
}

/* Text primary color */
.text-primary,
[class*="text-primary"] {
    color: #0d93d6 !important;
}

a.text-primary:hover,
a.text-primary:focus,
.text-primary:hover,
.text-primary:focus {
    color: #0a7bb8 !important; /* Darker blue on hover */
}

/* Progress bar yellow to blue */
.progress-bar {
    background-color: #0d93d6 !important;
}

/* Replace all yellow color codes with blue in inline styles */
[style*="#F8BF00"],
[style*="#EFC03D"],
[style*="#ffc107"],
[style*="#F8BF00"],
[style*="#c59800"],
[style*="#ac8400"],
[style*="#ffda5f"] {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Any element with yellow background or border in inline styles */
*[style*="background-color: #F8BF00"],
*[style*="background-color: #EFC03D"],
*[style*="background-color: #ffc107"],
*[style*="border-color: #F8BF00"],
*[style*="border-color: #EFC03D"],
*[style*="border-color: #ffc107"],
*[style*="color: #F8BF00"],
*[style*="color: #EFC03D"],
*[style*="color: #ffc107"] {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Focus outline yellow to blue */
*:focus {
    outline-color: #0d93d6 !important;
}

*:focus-visible {
    outline-color: #0d93d6 !important;
}

/* Selection/highlight yellow to blue */
::selection {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

::-moz-selection {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #0d93d6 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: transparent !important;
    color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #0d93d6 !important;
}

/* View toggle buttons (Liste/Galerie) - same style for both */
.btn-option.ed,
.btn-option.ed.list,
.btn-option.ed.gallery,
.btn-option.ed.active,
.btn-option.ed.list.active,
.btn-option.ed.gallery.active,
.btn-group .btn-option.ed,
.btn-group .btn-option.ed.list,
.btn-group .btn-option.ed.gallery,
.btn-group .btn-option.ed.active,
.btn-group .btn-option.ed.list.active,
.btn-group .btn-option.ed.gallery.active,
.btn-outline-secondary.btn-option,
.btn-outline-secondary.btn-option.ed,
.btn-outline-secondary.btn-option.ed.list,
.btn-outline-secondary.btn-option.ed.gallery,
.btn-outline-secondary.btn-option.ed.active,
.btn-outline-secondary.btn-option.ed.list.active,
.btn-outline-secondary.btn-option.ed.gallery.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-option.ed:hover,
.btn-option.ed:focus,
.btn-option.ed.active:hover,
.btn-option.ed.active:focus,
.btn-group .btn-option.ed:hover,
.btn-group .btn-option.ed:focus,
.btn-group .btn-option.ed.active:hover,
.btn-group .btn-option.ed.active:focus,
.btn-outline-secondary.btn-option:hover,
.btn-outline-secondary.btn-option:focus,
.btn-outline-secondary.btn-option.active:hover,
.btn-outline-secondary.btn-option.active:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.btn-option.ed.active,
.btn-option.ed.list.active,
.btn-option.ed.gallery.active,
.btn-group .btn-option.ed.active,
.btn-group .btn-option.ed.list.active,
.btn-group .btn-option.ed.gallery.active,
.btn-outline-secondary.btn-option.active,
.btn-outline-secondary.btn-option.ed.active,
.btn-outline-secondary.btn-option.ed.list.active,
.btn-outline-secondary.btn-option.ed.gallery.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-weight: 600 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(13, 147, 214, 0.1) !important;
    color: #0d93d6 !important;
    border-color: #0d93d6 !important;
}

/* Remove all yellow button colors */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
[class*="btn"][style*="yellow"],
[class*="btn"][style*="#ffc107"],
[class*="btn"][style*="#F8BF00"] {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Remove all yellow badge colors - Change badge-primary to blue */
.badge-primary,
.badge-primary:hover,
.badge-primary:focus,
.badge-primary:active,
a.badge-primary,
a.badge-primary:hover,
a.badge-primary:focus {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
    border-color: #0d93d6 !important;
}

.badge-outline-primary,
.badge-outline-primary:hover,
.badge-outline-primary:focus,
a.badge-outline-primary,
a.badge-outline-primary:hover,
a.badge-outline-primary:focus {
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
    background-color: transparent !important;
}

a.badge-outline-primary:hover,
a.badge-outline-primary:focus {
    background-color: rgba(13, 147, 214, 0.1) !important;
    color: #0d93d6 !important;
}

/* Remove yellow from any ribbon or badge on product boxes */
.productbox .badge-primary,
.productbox .ribbon,
.productbox-ribbon,
.productbox .badge[class*="primary"] {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
    border-color: #0d93d6 !important;
}

/* Remove yellow from listing page elements */
.product-list .badge-primary,
.product-list .badge[class*="primary"],
.product-list .ribbon,
.product-list .badge-warning,
.product-list .btn-warning,
.product-list .text-primary,
.product-list .text-warning {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
    border-color: #0d93d6 !important;
}

/* Remove yellow from pagination and sorting */
.pagination .page-link.active,
.pagination .page-item.active .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus,
.product-list .page-link.active,
.product-list .page-item.active .page-link {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Remove yellow from dropdowns and selects on listing page */
.product-list .dropdown-menu .dropdown-item.active,
.product-list .dropdown-menu .dropdown-item:hover,
.product-list .custom-select:focus,
.product-list .form-control:focus {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
    border-color: #0d93d6 !important;
}

.product-list .dropdown-menu .dropdown-item.active {
    background-color: #0d93d6 !important;
    color: #ffffff !important;
}

/* Mega Menu Dropdown - Remove all yellow colors */
.dropdown-menu .nav-link,
.dropdown-menu .categories-recursive-link,
.dropdown-menu .submenu-headline,
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.dropdown-body .nav-link,
.dropdown-body .categories-recursive-link,
.dropdown-body .submenu-headline,
.dropdown-body a,
.dropdown-body .dropdown-item,
.category-dropdown .nav-link,
.category-dropdown .categories-recursive-link,
.category-dropdown .submenu-headline,
.category-dropdown a,
.category-dropdown .dropdown-item,
.categories-recursive-dropdown .nav-link,
.categories-recursive-dropdown .categories-recursive-link,
.categories-recursive-dropdown .submenu-headline,
.categories-recursive-dropdown a,
.categories-recursive-dropdown .dropdown-item {
    color: #333 !important;
}

.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link:focus,
.dropdown-menu .nav-link.active,
.dropdown-menu .categories-recursive-link:hover,
.dropdown-menu .categories-recursive-link:focus,
.dropdown-menu .categories-recursive-link.active,
.dropdown-menu .submenu-headline:hover,
.dropdown-menu .submenu-headline:focus,
.dropdown-menu .submenu-headline.active,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a.active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-body .nav-link:hover,
.dropdown-body .nav-link:focus,
.dropdown-body .nav-link.active,
.dropdown-body .categories-recursive-link:hover,
.dropdown-body .categories-recursive-link:focus,
.dropdown-body .categories-recursive-link.active,
.dropdown-body .submenu-headline:hover,
.dropdown-body .submenu-headline:focus,
.dropdown-body .submenu-headline.active,
.dropdown-body a:hover,
.dropdown-body a:focus,
.dropdown-body a.active,
.dropdown-body .dropdown-item:hover,
.dropdown-body .dropdown-item:focus,
.dropdown-body .dropdown-item.active,
.category-dropdown .nav-link:hover,
.category-dropdown .nav-link:focus,
.category-dropdown .nav-link.active,
.category-dropdown .categories-recursive-link:hover,
.category-dropdown .categories-recursive-link:focus,
.category-dropdown .categories-recursive-link.active,
.category-dropdown .submenu-headline:hover,
.category-dropdown .submenu-headline:focus,
.category-dropdown .submenu-headline.active,
.category-dropdown a:hover,
.category-dropdown a:focus,
.category-dropdown a.active,
.category-dropdown .dropdown-item:hover,
.category-dropdown .dropdown-item:focus,
.category-dropdown .dropdown-item.active,
.categories-recursive-dropdown .nav-link:hover,
.categories-recursive-dropdown .nav-link:focus,
.categories-recursive-dropdown .nav-link.active,
.categories-recursive-dropdown .categories-recursive-link:hover,
.categories-recursive-dropdown .categories-recursive-link:focus,
.categories-recursive-dropdown .categories-recursive-link.active,
.categories-recursive-dropdown .submenu-headline:hover,
.categories-recursive-dropdown .submenu-headline:focus,
.categories-recursive-dropdown .submenu-headline.active,
.categories-recursive-dropdown a:hover,
.categories-recursive-dropdown a:focus,
.categories-recursive-dropdown a.active,
.categories-recursive-dropdown .dropdown-item:hover,
.categories-recursive-dropdown .dropdown-item:focus,
.categories-recursive-dropdown .dropdown-item.active {
    color: #0d93d6 !important;
    background-color: rgba(13, 147, 214, 0.1) !important;
}

/* Remove yellow from text-primary in mega menu dropdown */
.dropdown-menu .text-primary,
.dropdown-body .text-primary,
.category-dropdown .text-primary,
.categories-recursive-dropdown .text-primary {
    color: #0d93d6 !important;
}

.dropdown-menu .text-primary:hover,
.dropdown-menu .text-primary:focus,
.dropdown-body .text-primary:hover,
.dropdown-body .text-primary:focus,
.category-dropdown .text-primary:hover,
.category-dropdown .text-primary:focus,
.categories-recursive-dropdown .text-primary:hover,
.categories-recursive-dropdown .text-primary:focus {
    color: #0a7bb8 !important;
}

/* Remove yellow from nav-link dropdown-toggle in mega menu */
.nav-link.dropdown-toggle:hover,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle.active {
    color: #0d93d6 !important;
}

.nav-link.dropdown-toggle::before,
.nav-link.dropdown-toggle::after {
    border-color: #0d93d6 !important;
    background-color: rgba(13, 147, 214, 0) !important;
}

/* Button secondary - blue background */
button.btn.btn-secondary,
.btn.btn-secondary,
.btn-secondary {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #0a7bb8 !important;
}

/* Round all input fields - Fully pill-shaped */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select,
.form-control,
.ac_input,
input.form-control,
.search-wrapper input,
.search-wrapper .form-control {
    border-radius: 50px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

/* Search input field - right side straight (for input group) */
.search-wrapper .input-group .form-control,
.search-wrapper .input-group .ac_input,
.search-wrapper .input-group input[type="text"],
.search-wrapper .input-group input[type="search"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

/* Input focus states */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.ac_input:focus {
    border-color: #0d93d6 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 147, 214, 0.25) !important;
    outline: none;
}

/* Round search bar specifically - but right side straight for input group */
#search-header,
.search-wrapper input,
.search-wrapper .ac_input,
.search-wrapper .form-control {
    border-radius: 50px !important;
}

/* Search input in input group - right side straight */
.search-wrapper .input-group .form-control,
.search-wrapper .input-group .ac_input,
.search-wrapper .input-group input[type="text"],
.search-wrapper .input-group input[type="search"],
#search-header {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

/* Round newsletter input fields */
.newsletter-footer input[type="email"],
.newsletter-footer .form-control,
.newsletter-footer input {
    border-radius: 50px !important;
}

/* Round input group addons to match */
.input-group > .form-control:first-child,
.input-group > .custom-select:first-child,
.input-group > .custom-file:first-child .custom-file-input {
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

.input-group > .form-control:last-child,
.input-group > .custom-select:last-child,
.input-group > .custom-file:last-child .custom-file-input {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}

.input-group-append .btn,
.input-group-prepend .btn {
    border-radius: 0 50px 50px 0 !important;
}

.input-group-prepend .btn {
    border-radius: 50px 0 0 50px !important;
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Content padding */
#content {
    padding-bottom: 0px !important;
}

/* Top Bar Styling */
#header-top-bar {
    background-color: #0d93d6 !important;
    color: white !important;
}

/* Hide top bar on mobile devices */
@media (max-width: 991.98px) {
    #header-top-bar {
        display: none !important;
    }
}

#header-top-bar .topbar-main,
#header-top-bar .topbar-note,
#header-top-bar .topbar-main *,
#header-top-bar .topbar-note * {
    color: white !important;
}

#header-top-bar .topbar-main a,
#header-top-bar .topbar-note a,
#header-top-bar .nav-link,
#header-top-bar a,
#header-top-bar .dropdown-toggle {
    color: white !important;
}

#header-top-bar .nav-link:hover,
#header-top-bar a:hover,
#header-top-bar .dropdown-toggle:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Top Bar Container - Center alignment for announcements */
#header-top-bar > .container,
#header-top-bar > .container-fluid,
#header-top-bar > .container-fluid-xl {
    position: relative;
}

/* Announcement Bar - Centered in middle */
.announcement-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: auto;
}

.announcement-bar__feature-item {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Increase top bar font size for better readability */
#header-top-bar,
#header-top-bar *,
#header-top-bar .topbar-main,
#header-top-bar .topbar-note,
#header-top-bar a,
#header-top-bar .nav-link {
    font-size: 0.875rem !important;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .announcement-bar {
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .announcement-bar__feature-item {
        font-size: 0.75rem;
    }
}

/* Example custom styles - customize as needed */
body {
    /* Add your custom body styles here */
}

/* Custom header styles */
.header {
    /* Add your custom header styles here */
}

/* Custom footer styles */
.footer {
    /* Add your custom footer styles here */
}

/* Banner Overlay Styling */
.banner-with-overlay {
    position: relative;
}

.banner-overlay {
    position: absolute;
    padding: 2rem;
    border-radius: 8px;
    z-index: 10;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Overlay Position Classes */
.banner-overlay-top-left {
    top: 2rem;
    left: 2rem;
}

.banner-overlay-top-center {
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.banner-overlay-top-right {
    top: 2rem;
    right: 2rem;
}

.banner-overlay-center-left {
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
}

.banner-overlay-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-overlay-center-right {
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}

.banner-overlay-bottom-left {
    bottom: 2rem;
    left: 2rem;
}

.banner-overlay-bottom-center {
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.banner-overlay-bottom-right {
    bottom: 2rem;
    right: 2rem;
}

.banner-overlay__heading {
    margin: 0 0 0.75rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.banner-overlay__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive adjustments for banner overlay */
@media (max-width: 768px) {
    .banner-overlay {
        padding: 1.5rem;
        max-width: 90%;
    }
    
    .banner-overlay__heading {
        font-size: 1.5rem;
    }
    
    .banner-overlay__text {
        font-size: 0.9rem;
    }
    
    .banner-overlay-top-left,
    .banner-overlay-top-center,
    .banner-overlay-top-right,
    .banner-overlay-bottom-left,
    .banner-overlay-bottom-center,
    .banner-overlay-bottom-right {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        transform: none;
    }
}

/* Category Grid Styling */
.category-grid {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.category-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.category-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.category-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.category-grid__item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
}

.category-grid__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.category-grid__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.category-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-grid__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 3rem;
    color: #ccc;
}

.category-grid__link:hover .category-grid__image {
    transform: scale(1.05);
}

.category-grid__overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
    border-radius: 0 0 8px 8px;
}

.category-grid__overlay-top {
    top: 0;
    border-radius: 8px 8px 0 0;
}

.category-grid__overlay-center {
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px;
}

.category-grid__overlay-bottom {
    bottom: 0;
}

.category-grid__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Responsive adjustments for category grid */
@media (max-width: 991.98px) {
    .category-grid-cols-3,
    .category-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .category-grid__overlay {
        padding: 1rem;
    }
    
    .category-grid__title {
        font-size: 1.1rem;
    }
}

/* Category Grid Portlet - Container Width Settings */
.category-grid-wrapper {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* When in boxed container (non-fluid) - use 103.125rem width and adjust elements */
.container:not(.container-fluid) > .category-grid-wrapper,
.container:not(.container-fluid) .category-grid-wrapper,
.opc-Container:not(.container-fluid) .category-grid-wrapper {
    max-width: 103.125rem !important;
    width: 100%;
}

/* Adjust grid items for 103.125rem container */
.container:not(.container-fluid) .category-grid,
.opc-Container:not(.container-fluid) .category-grid {
    max-width: 103.125rem;
    margin-left: auto;
    margin-right: auto;
}

/* Adjust slider for 103.125rem container */
.container:not(.container-fluid) .category-grid-slider,
.opc-Container:not(.container-fluid) .category-grid-slider {
    max-width: 103.125rem;
    margin-left: auto;
    margin-right: auto;
}

/* Match NOVA container max-widths (default responsive widths) */
@media (min-width: 576px) {
    .category-grid-wrapper {
        max-width: 97vw;
    }
    
    /* Override for boxed containers */
    .container:not(.container-fluid) > .category-grid-wrapper,
    .container:not(.container-fluid) .category-grid-wrapper,
    .opc-Container:not(.container-fluid) .category-grid-wrapper {
        max-width: 103.125rem !important;
    }
}

@media (min-width: 768px) {
    .category-grid-wrapper {
        max-width: 720px;
    }
    
    /* Override for boxed containers */
    .container:not(.container-fluid) > .category-grid-wrapper,
    .container:not(.container-fluid) .category-grid-wrapper,
    .opc-Container:not(.container-fluid) .category-grid-wrapper {
        max-width: 103.125rem !important;
    }
}

@media (min-width: 992px) {
    .category-grid-wrapper {
        max-width: 960px;
    }
    
    /* Override for boxed containers */
    .container:not(.container-fluid) > .category-grid-wrapper,
    .container:not(.container-fluid) .category-grid-wrapper,
    .opc-Container:not(.container-fluid) .category-grid-wrapper {
        max-width: 103.125rem !important;
    }
}

@media (min-width: 1300px) {
    .container {
        max-width: 103.125rem;
    }
    
    .category-grid-wrapper {
        max-width: 103.125rem;
    }
    
    /* Override for boxed containers */
    .container:not(.container-fluid) > .category-grid-wrapper,
    .container:not(.container-fluid) .category-grid-wrapper,
    .opc-Container:not(.container-fluid) .category-grid-wrapper {
        max-width: 103.125rem !important;
    }
}

/* Custom container background - whole row */
.customcontainer {
    background-color: #f5f5f5 !important;
}

/* Ensure full width background for customcontainer - extend to full viewport width */
.customcontainer.container,
.customcontainer.opc-Container {
    position: relative;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Add padding to content inside customcontainer */
.customcontainer > * {
    position: relative;
    z-index: 1;
}

/* Custom container background for Category Grid (if needed for specific styling) */
.customcontainer .category-grid-wrapper,
.customcontainer .category-grid,
.customcontainer .category-grid-slider {
    background-color: transparent;
}

/* Product Box Styling - Match Image Design */
.productbox.productbox-column {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dee2e6 !important;
    box-sizing: border-box;
}

/* Ensure all product boxes have borders, including first and last child */
.productbox.productbox-column:first-child,
.productbox.productbox-column:first-of-type,
.productbox.productbox-column:last-child,
.productbox.productbox-column:last-of-type,
.product-wrapper:first-child .productbox.productbox-column,
.product-wrapper:first-of-type .productbox.productbox-column,
.product-wrapper:last-child .productbox.productbox-column,
.product-wrapper:last-of-type .productbox.productbox-column,
.product-list .productbox.productbox-column:first-child,
.product-list .productbox.productbox-column:first-of-type,
.product-list .productbox.productbox-column:last-child,
.product-list .productbox.productbox-column:last-of-type,
.row .productbox.productbox-column:first-child,
.row .productbox.productbox-column:first-of-type,
.row .productbox.productbox-column:last-child,
.row .productbox.productbox-column:last-of-type,
[class*="col"]:first-child .productbox.productbox-column,
[class*="col"]:first-of-type .productbox.productbox-column,
[class*="col"] .productbox.productbox-column:first-child,
[class*="col"] .productbox.productbox-column:first-of-type,
[class*="col"]:last-child .productbox.productbox-column,
[class*="col"]:last-of-type .productbox.productbox-column,
[class*="col"] .productbox.productbox-column:last-child,
[class*="col"] .productbox.productbox-column:last-of-type {
    border: 1px solid #dee2e6 !important;
}

/* Ensure container doesn't cut off borders */
.product-list,
.product-list .row,
.row.product-list {
    overflow: visible !important;
}

/* Ensure columns don't cut off borders */
.product-list [class*="col"],
.row [class*="col"],
[class*="col"] {
    overflow: visible !important;
}

.productbox.productbox-column:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Remove yellow outline from productbox on focus/click - COMPREHENSIVE FIX */
.productbox.productbox-hover:focus-visible .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before,
.productbox.productbox-hover:focus .productbox-inner::before,
.productbox.productbox-hover:active .productbox-inner::before,
.productbox.productbox-column:focus-visible .productbox-inner::before,
.productbox.productbox-column:focus-within .productbox-inner::before,
.productbox.productbox-column:focus .productbox-inner::before,
.productbox.productbox-column:active .productbox-inner::before,
.productbox.productbox-hover.productbox-column:focus-visible .productbox-inner::before,
.productbox.productbox-hover.productbox-column:focus-within .productbox-inner::before,
.productbox.productbox-hover.productbox-column:focus .productbox-inner::before,
.productbox.productbox-hover.productbox-column:active .productbox-inner::before {
    outline: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.productbox.productbox-hover:focus,
.productbox.productbox-hover:active,
.productbox.productbox-column:focus,
.productbox.productbox-column:active,
.productbox.productbox-hover.productbox-column:focus,
.productbox.productbox-hover.productbox-column:active,
.productbox[role="button"]:focus,
.productbox[role="button"]:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Override any yellow outline colors in productbox */
@media (min-width: 768px) {
    .productbox.productbox-hover:focus-visible .productbox-inner::before,
    .productbox.productbox-hover:focus-within .productbox-inner::before {
        outline: none !important;
        border: none !important;
    }
}

.productbox-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    flex: 1;
}

/* Make parent row use flexbox for equal height columns */
.product-list .row,
.row.product-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Make parent columns stretch to full height for equal height boxes */
.product-list .row > [class*="col"],
.product-list > [class*="col"],
.row.product-list > [class*="col"],
.product-list [class*="col"],
.product-wrapper {
    display: flex;
    flex-direction: column;
}

/* Ensure product wrapper takes full height */
.product-wrapper {
    height: 100%;
}

/* Ensure productbox takes full height of wrapper */
.product-wrapper .productbox.productbox-column {
    height: 100%;
    flex-grow: 1;
}

/* Product Title - Left Aligned - Improved Font Size */
.productbox-title {
    text-align: left !important;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.productbox-title a {
    text-align: left !important;
    color: #333;
    font-weight: 500;
    font-size: 0.875rem !important; /* Increased from 0.75rem for better readability */
    line-height: 1.4;
    text-decoration: none;
    display: block;
    width: 100%;
    /* Ensure max 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.productbox-title a:hover {
    color: #0d93d6 !important;
    text-decoration: none;
}

/* Price Styling */
.productbox .price_wrapper {
    text-align: left !important;
    margin-bottom: 0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.productbox .price.productbox-price {
    font-size: 1rem;
    font-weight: 700;
    color: #0d93d6;
    text-align: left !important;
    margin: 0;
    width: 100%;
}

.productbox .old-price {
    text-align: left !important;
    margin-bottom: 0.25rem;
    width: 100%;
}

.productbox .old-price del {
    color: #999;
    font-size: 0.6875rem;
    text-decoration: line-through;
}

.productbox .price-note {
    text-align: left !important;
    width: 100%;
}

.productbox .price_label {
    text-align: left !important;
}

/* Delivery Status - Left Aligned */
.productbox .item-delivery-status {
    text-align: left !important;
    margin-top: 0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.productbox .item-delivery-status small,
.productbox .estimated_delivery {
    font-size: 0.75rem !important; /* Increased from 0.6875rem for better readability */
    color: #666;
    text-align: left !important;
    display: block;
    width: 100%;
}

.productbox .estimated_delivery {
    margin-top: 0.25rem;
}

.productbox .item-delivery-status .status,
.productbox .item-delivery-status .signal_image,
.productbox .item-delivery-status .availablefrom {
    text-align: left !important;
    width: 100%;
}

/* Rating - Left Aligned */
.productbox .rating {
    text-align: left !important;
    margin-bottom: 0.5rem;
}

.productbox .rating-wrapper {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Product Image - Compact size */
.productbox-image {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}

/* Limit height for square-image containers */
.productbox-image.square-image {
    max-height: 280px;
    min-height: 200px;
}

.productbox-image .inner {
    padding: 0.5rem !important;
}

/* Ensure images are visible and compact */
.productbox-image.square-image .inner img {
    max-height: 260px !important;
    max-width: 100% !important;
}

.productbox-images {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Product Slider Items - Apply same card styling - Optimized size */
.productbox-slider {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dee2e6 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: auto;
    max-height: none;
}

/* Ensure all slider boxes have borders, including last child */
.productbox-slider:last-child,
.productbox-slider:last-of-type,
.product-wrapper-product:last-child .productbox-slider,
.product-wrapper-product:last-of-type .productbox-slider,
.slick-slider .productbox-slider:last-child,
.carousel .productbox-slider:last-child {
    border: 1px solid #dee2e6 !important;
}

.productbox-slider:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.productbox-slider .productbox-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-height: 0;
}

.productbox-slider .productbox-title {
    text-align: left !important;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    width: 100%;
    color: #333;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.productbox-slider .productbox-title:hover {
    color: #0d93d6 !important;
}

.productbox-slider .price_wrapper {
    text-align: left !important;
    margin-bottom: 0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.productbox-slider .price.productbox-price,
.productbox-slider .price {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0d93d6;
    text-align: left !important;
    margin: 0;
    width: 100%;
}

.productbox-slider .old-price {
    text-align: left !important;
    margin-bottom: 0.25rem;
    width: 100%;
}

.productbox-slider .old-price del {
    color: #999;
    font-size: 0.875rem;
    text-decoration: line-through;
}

.productbox-slider .price-note {
    text-align: left !important;
    width: 100%;
}

.productbox-slider .productbox-image {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background-color: #f8f9fa;
    margin: 0;
}

.productbox-slider .productbox-image.square-image {
    max-height: 280px;
    min-height: 200px;
}

.productbox-slider .productbox-image .inner {
    padding: 0.5rem !important;
}

.productbox-slider .productbox-image.square-image .inner img {
    max-height: 260px !important;
    max-width: 100% !important;
}

.productbox-slider .productbox-images {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.productbox-slider .productbox-rating {
    text-align: left !important;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.productbox-slider .item-delivery-status {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

/* Slider Buy Button - Ensure it stays in box */
.productbox-slider .productbox-buy-button {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 0.5rem;
}

.productbox-slider .item-delivery-status {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

/* Slider Buy Button - Ensure it stays in box */
.productbox-slider .productbox-buy-button {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 0.5rem;
}

/* Product Wrapper for Sliders */
.product-wrapper-product {
    padding: 0 0.5rem;
}

.product-wrapper-product .productbox-slider {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Ensure slick slider items work correctly */
.slick-slide .product-wrapper-product,
.carousel .slick-slide .product-wrapper-product {
    padding: 0 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Override any existing slider item styles */
.item-slider.productbox-image {
    border-radius: 12px 12px 0 0;
    margin: 0;
}

.item-slider-desc {
    display: none; /* Hide old description, using productbox-title instead */
}

.item-slider-price {
    display: none; /* Hide old price wrapper, using price_wrapper instead */
}

/* Ensure slider items maintain card appearance */
.slick-slider .productbox-slider,
.carousel .productbox-slider {
    margin: 0;
}

@media (max-width: 768px) {
    .productbox-slider {
        padding: 0;
    }
    
    .productbox-slider .productbox-inner {
        padding: 0.75rem;
    }
    
    .productbox-slider .productbox-title {
        font-size: 0.6875rem;
    }
    
    .productbox-slider .price.productbox-price,
    .productbox-slider .price {
        font-size: 0.9375rem;
    }
}

/* Buy Button - Always Visible on Listing Page */
.productbox-buy-button {
    margin-top: auto;
    opacity: 1; /* Always visible on listing page */
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    padding-top: 0.5rem;
}

.productbox-add-to-cart {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none !important;
}

.productbox-add-to-cart:hover {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13, 147, 214, 0.3);
    outline: none !important;
}

.productbox-add-to-cart:active,
.productbox-add-to-cart:focus {
    transform: translateY(0);
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #0a7bb8 !important;
}

.productbox-add-to-cart i {
    font-size: 0.875rem;
}

/* Shopping cart icon in buy buttons should be white */
.productbox-add-to-cart .fa-shopping-cart,
.productbox-add-to-cart i.fa-shopping-cart,
.productbox-add-to-cart i.fas.fa-shopping-cart,
.btn.productbox-add-to-cart .fa-shopping-cart,
.btn.productbox-add-to-cart i.fa-shopping-cart,
button.productbox-add-to-cart .fa-shopping-cart,
button.productbox-add-to-cart i.fa-shopping-cart,
.productbox-buy-button .fa-shopping-cart,
.productbox-buy-button i.fa-shopping-cart,
.productbox-buy-button .btn .fa-shopping-cart,
.productbox-buy-button .btn i.fa-shopping-cart,
.sticky-add-to-cart .fa-shopping-cart,
.sticky-add-to-cart i.fa-shopping-cart,
.sticky-add-to-cart .btn .fa-shopping-cart,
.sticky-add-to-cart .btn i.fa-shopping-cart,
[class*="add-to-cart"] .fa-shopping-cart,
[class*="add-to-cart"] i.fa-shopping-cart,
[class*="buy-button"] .fa-shopping-cart,
[class*="buy-button"] i.fa-shopping-cart {
    color: #ffffff !important;
}

/* Shopping cart icon in product detail page add to cart button should be white */
.btn-primary .fa-shopping-cart,
.btn-primary i.fa-shopping-cart,
.btn-primary i.fas.fa-shopping-cart,
.btn.js-cfg-validate .fa-shopping-cart,
.btn.js-cfg-validate i.fa-shopping-cart,
.btn.js-cfg-validate i.fas.fa-shopping-cart,
.btn-basket-check .fa-shopping-cart,
.btn-basket-check i.fa-shopping-cart,
.btn-basket-check i.fas.fa-shopping-cart,
button[name="inWarenkorb"] .fa-shopping-cart,
button[name="inWarenkorb"] i.fa-shopping-cart,
button[name="inWarenkorb"] i.fas.fa-shopping-cart,
.btn-primary .btn-basket-check .fa-shopping-cart,
.btn-primary .btn-basket-check i.fa-shopping-cart,
.btn-primary .btn-basket-check i.fas.fa-shopping-cart {
    color: #ffffff !important;
}

/* Heart icon in listing page product boxes should be white */
.productbox .fa-heart,
.productbox i.fa-heart,
.productbox i.far.fa-heart,
.productbox i.fas.fa-heart,
.productbox-quick-actions .fa-heart,
.productbox-quick-actions i.fa-heart,
.productbox-quick-actions i.far.fa-heart,
.productbox-quick-actions i.fas.fa-heart,
.productbox .wishlist-button .fa-heart,
.productbox .wishlist-button i.fa-heart,
.productbox .wishlist-button i.far.fa-heart,
.productbox .wishlist-button i.fas.fa-heart,
.productbox .wishlist-icon,
.productbox .wishlist-icon.fa-heart,
.productbox .wishlist-icon.far.fa-heart,
.productbox .wishlist-icon.fas.fa-heart,
.productbox-column .fa-heart,
.productbox-column i.fa-heart,
.productbox-column i.far.fa-heart,
.productbox-column i.fas.fa-heart,
.productbox-column .wishlist-button .fa-heart,
.productbox-column .wishlist-button i.fa-heart {
    color: #ffffff !important;
}

/* Heart icon in wishlist buttons should be white */
.wishlist .fa-heart,
.wishlist i.fa-heart,
.wishlist i.far.fa-heart,
.wishlist i.fas.fa-heart,
.wishlist span.fa-heart,
.wishlist span.far.fa-heart,
.wishlist span.fas.fa-heart,
.btn.wishlist .fa-heart,
.btn.wishlist i.fa-heart,
.btn.wishlist i.far.fa-heart,
.btn.wishlist i.fas.fa-heart,
.btn.wishlist span.fa-heart,
.btn.wishlist span.far.fa-heart,
.btn.wishlist span.fas.fa-heart,
button.wishlist .fa-heart,
button.wishlist i.fa-heart,
button.wishlist i.far.fa-heart,
button.wishlist i.fas.fa-heart,
button.wishlist span.fa-heart,
button.wishlist span.far.fa-heart,
button.wishlist span.fas.fa-heart,
.badge.wishlist .fa-heart,
.badge.wishlist i.fa-heart,
.badge.wishlist i.far.fa-heart,
.badge.wishlist i.fas.fa-heart,
.badge.wishlist span.fa-heart,
.badge.wishlist span.far.fa-heart,
.badge.wishlist span.fas.fa-heart,
.badge-circle-1 .fa-heart,
.badge-circle-1 i.fa-heart,
.badge-circle-1 i.far.fa-heart,
.badge-circle-1 i.fas.fa-heart,
.badge-circle-1 span.fa-heart,
.badge-circle-1 span.far.fa-heart,
.badge-circle-1 span.fas.fa-heart,
.btn-secondary.wishlist .fa-heart,
.btn-secondary.wishlist i.fa-heart,
.btn-secondary.wishlist i.far.fa-heart,
.btn-secondary.wishlist i.fas.fa-heart,
.btn-secondary.wishlist span.fa-heart,
.btn-secondary.wishlist span.far.fa-heart,
.btn-secondary.wishlist span.fas.fa-heart {
    color: #ffffff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .productbox.productbox-column {
        padding: 0.75rem;
    }
    
    .productbox-title a {
        font-size: 0.6875rem;
    }
    
    .productbox .price.productbox-price {
        font-size: 0.9375rem;
    }
    
    .productbox-buy-button {
        opacity: 1; /* Always visible on mobile */
    }
    
    .productbox-add-to-cart {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
    }
}

/* Footer Styling - Logo Column and Box Headings */
.footer-logo-column {
    margin-bottom: 1.5rem;
}


.footer-logo-wrapper {
    margin-bottom: 1rem;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
}

.footer-logo-link {
    text-decoration: none;
    display: inline-block;
}

.footer-logo-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.footer-logo-icon svg {
    width: 100%;
    height: 100%;
}

.footer-logo-text {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-logo-klimab {
    color: #28a745; /* Green */
}

.footer-logo-rise {
    color: #0d93d6; /* Light Blue */
}

/* Footer Logo Column */
.footer-logo-column {
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .footer-logo-column {
        margin-bottom: 2rem;
    }
    
    .footer-logo-text {
        font-size: 1.25rem;
    }
}

/* ============================================
   UX/UI IMPROVEMENTS - COMPREHENSIVE FIXES
   ============================================ */

/* Remove ALL yellow colors from navigation and links */
.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link,
a:hover,
a:focus,
a.active {
    color: #0d93d6 !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.nav-link:active,
.nav-link:focus,
a:active,
a:focus,
.box-normal-link:active,
.box-normal-link:focus,
.box a:active,
.box a:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove yellow underlines from navigation - blue border, transparent background */
.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after,
.nav-link::before,
.nav-link::after {
    border-color: #0d93d6 !important;
    background-color: rgba(13, 147, 214, 0) !important;
}

/* Remove yellow underline from product detail page tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link,
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-item.active .nav-link::after {
    border-bottom-color: #0d93d6 !important;
    border-color: #0d93d6 #0d93d6 transparent !important;
    color: #0d93d6 !important;
}

.nav-tabs .nav-link:hover {
    border-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Filter items - Change yellow to blue - COMPREHENSIVE FIX */
.filter-item.active .filter-img,
.filter-item:active .filter-img,
.filter-item:hover .filter-img,
.filter-item:focus .filter-img,
.filter-item.active:hover .filter-img,
.filter-item.active:focus .filter-img,
.filter-item:active:hover .filter-img,
.filter-item:active:focus .filter-img,
.productlist-filter .filter-item.active .filter-img,
.productlist-filter .filter-item:active .filter-img,
.productlist-filter .filter-item:hover .filter-img,
.productlist-filter .filter-item:focus .filter-img,
.sidepanel-left .filter-item.active .filter-img,
.sidepanel-left .filter-item:active .filter-img,
.sidepanel-left .filter-item:hover .filter-img,
.sidepanel-left .filter-item:focus .filter-img {
    border-color: #0d93d6 !important;
    border: 3px solid #0d93d6 !important;
}

.filter-item:hover,
.filter-item:focus,
.filter-item.active:hover,
.filter-item.active:focus,
.filter-item:active:hover,
.filter-item:active:focus,
.productlist-filter .filter-item:hover,
.productlist-filter .filter-item:focus,
.productlist-filter .filter-item.active:hover,
.productlist-filter .filter-item.active:focus,
.sidepanel-left .filter-item:hover,
.sidepanel-left .filter-item:focus,
.sidepanel-left .filter-item.active:hover,
.sidepanel-left .filter-item.active:focus {
    color: #0d93d6 !important;
    background-color: rgba(13, 147, 214, 0.1) !important; /* Light blue background on hover */
}

/* Remove yellow underline from active category links in sidebar - COMPREHENSIVE FIX */
/* Override parent theme's nav-panel active styles */
aside .nav-panel > .nav > .active > .nav-link,
aside .nav-panel .active > .nav-link,
aside .nav-panel .nav-item.active .nav-link {
    border-bottom-color: #0d93d6 !important;
    border-bottom: 0.375rem solid #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Fix box-normal-link active states */
.productlist-filter .box-normal-link.active,
.productlist-filter .box-normal-link:active,
.sidepanel-left .box-normal-link.active,
.sidepanel-left .box-normal-link:active,
aside .box-normal .box-normal-link.active,
aside .box-normal .box-normal-link:active {
    border-bottom-color: #0d93d6 !important;
    border-bottom: 2px solid #0d93d6 !important;
    border-bottom-width: 2px !important;
    color: #0d93d6 !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* Fix filter-item active states */
.productlist-filter .filter-item.active,
.productlist-filter .filter-item:active,
.productlist-filter a.active,
.productlist-filter a:active,
.sidepanel-left .filter-item.active,
.sidepanel-left .filter-item:active,
.sidepanel-left a.active,
.sidepanel-left a:active {
    border-bottom-color: #0d93d6 !important;
    border-bottom: 2px solid #0d93d6 !important;
    border-bottom-width: 2px !important;
    color: #0d93d6 !important;
    text-decoration: none !important;
}

/* Remove any yellow pseudo-elements */
.productlist-filter .filter-item.active::after,
.productlist-filter .filter-item:active::after,
.sidepanel-left .filter-item.active::after,
.sidepanel-left .filter-item:active::after,
.productlist-filter a.active::after,
.productlist-filter a:active::after,
aside .nav-panel .active > .nav-link::after,
aside .nav-panel > .nav > .active > .nav-link::after {
    border-color: #0d93d6 !important;
    background-color: #ffffff !important;
}

/* Override any yellow background or border on active sidebar links */
.productlist-filter .box-normal-link.active,
.sidepanel-left .box-normal-link.active,
.productlist-filter a.active,
.sidepanel-left a.active,
aside .box-normal .box-normal-link.active {
    background-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
}

/* Fix any remaining yellow underlines in sidebar navigation */
aside .box a.active,
aside .box a:active,
aside .nav-link.active,
aside .nav-link:active {
    border-bottom-color: #0d93d6 !important;
    color: #0d93d6 !important;
}

/* Mobile Filter Sidebar Improvements */
@media (max-width: 767.98px) {
    .productlist-filter#collapseFilter {
        position: fixed;
        width: 100%;
        height: 100vh;
        max-height: calc(var(--vh, 1vh) * 100);
        z-index: 1050;
        background: #ffffff;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    
    .productlist-filter#collapseFilter.show {
        transform: translateX(0);
    }
    
    .productlist-filter#collapseFilter .productlist-filter-wrapper {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        overflow: auto;
        height: calc(100% - 80px);
    }
    
    .productlist-filter#collapseFilter .productlist-filter-footer {
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        position: sticky;
        bottom: 0;
        z-index: 10;
        border-top: 1px solid #dee2e6;
    }
    
    /* Filter button styling */
    .btn-filter-mobile {
        background-color: #0d93d6 !important;
        border-color: #0d93d6 !important;
        color: #ffffff !important;
        border-radius: 50px !important;
        padding: 0.5rem 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-filter-mobile:hover {
        background-color: #0a7bb8 !important;
        border-color: #0a7bb8 !important;
    }
    
    /* Close button for filter */
    .filter-close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: #333;
        cursor: pointer;
        z-index: 11;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }
    
    .filter-close-btn:hover {
        background-color: #f0f0f0;
    }
}

/* Loading States */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Button Improvements */
.btn {
    transition: all 0.3s ease;
    font-weight: 500;
    border-radius: 8px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Link Improvements */
a {
    transition: color 0.3s ease;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:focus {
    outline: none !important;
    box-shadow: none !important;
}

a:active,
a:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Form Validation States */
.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid {
    border-color: #28a745;
}

.form-control.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Trust Signals */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #333;
}

.trust-badge i {
    color: #28a745;
    font-size: 1rem;
}

/* Reduce spacing between breadcrumb and product image on mobile */
@media (max-width: 575.98px) {
    .breadcrumb-wrapper {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .breadcrumb {
        margin-bottom: 0.5rem !important;
    }
    
    .product-detail .product-image-wrapper,
    .product-detail .product-thumbnails-wrapper,
    .product-detail .product-image {
        margin-top: 0.5rem !important;
    }
    
    /* Reduce spacing in product detail container */
    .product-detail > .row,
    .product-detail > [class*="col"],
    .product-detail .container > .row {
        margin-top: 0 !important;
    }
    
    .product-detail .product-thumbnails-wrapper .product-thumbnails {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduce spacing after breadcrumb */
    .breadcrumb-wrapper + .row,
    .breadcrumb-wrapper + [class*="col"],
    .breadcrumb + .row,
    .breadcrumb + [class*="col"] {
        margin-top: 0.5rem !important;
    }
}

/* Add space between description section and footer */
.tab-content,
.tab-pane,
.card-body,
.product-detail .tab-content,
.product-detail .tab-pane,
.product-detail .card-body,
[class*="description"],
.product-description,
.description-section {
    margin-bottom: 3rem !important;
}

/* Description tab padding */
div#tab-description {
    padding-bottom: 10px;
}

@media (max-width: 767.98px) {
    .tab-content,
    .tab-pane,
    .card-body,
    .product-detail .tab-content,
    .product-detail .tab-pane,
    .product-detail .card-body,
    [class*="description"],
    .product-description,
    .description-section {
        margin-bottom: 2rem !important;
    }
}

/* Ensure footer has proper spacing from content above */
#footer {
    margin-top: 2rem !important;
}

/* Footer Mobile Styles */
@media (max-width: 767.98px) {
    #footer {
        margin-top: auto !important;
        padding: 4rem 0 0 !important;
        background-color: #f5f7fa !important;
        color: #525252 !important;
        padding-top: 10px !important;
    }
}

@media (min-width: 768px) {
    #footer {
        margin-top: 3rem !important;
    }
}

/* Product Detail Page Improvements */
.product-detail-page .product-image-gallery {
    position: relative;
}

/* Image wrapper gallery on detail page */
#image_wrapper #gallery {
    margin-bottom: 0px;
}

/* Adjust spacing between product image and description section */
.product-detail #image_wrapper {
    margin-bottom: 1rem !important;
}

.product-detail #image_wrapper + .col,
.product-detail #image_wrapper ~ .col,
.product-detail .row:first-of-type {
    margin-bottom: 1rem;
}

.product-detail .tab-navigation,
.product-detail .tabs,
.product-detail [id*="product-tabs"],
.product-detail [id*="tab-"],
.product-detail .tab-content {
    margin-top: 1rem !important;
}

/* Product actions (wishlist) positioned above image */
.product-actions-above {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.product-actions-above .product-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

/* Reduce spacing on mobile */
@media (max-width: 767.98px) {
    .product-detail #image_wrapper {
        margin-bottom: 0.75rem !important;
    }
    
    .product-detail #image_wrapper + .col,
    .product-detail #image_wrapper ~ .col,
    .product-detail .row:first-of-type {
        margin-bottom: 0.75rem;
    }
    
    .product-detail .tab-navigation,
    .product-detail .tabs,
    .product-detail [id*="product-tabs"],
    .product-detail [id*="tab-"],
    .product-detail .tab-content {
        margin-top: 0.75rem !important;
    }
    
    .product-actions-above {
        margin-bottom: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
}

.product-detail-page .product-image-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.product-detail-page .product-image-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-detail-page .product-image-thumbnail:hover,
.product-detail-page .product-image-thumbnail.active {
    border-color: #0d93d6;
}

/* Sticky Add to Cart on Mobile */
@media (max-width: 767.98px) {
    .product-detail-page .sticky-add-to-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        z-index: 1000;
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .product-detail-page .sticky-add-to-cart .price {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0d93d6;
        flex: 1;
    }
    
    .product-detail-page .sticky-add-to-cart .btn {
        flex: 1;
        padding: 0.75rem;
        font-size: 1rem;
    }
}

/* Accessibility Improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0d93d6;
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 9999;
}

.skip-to-content:focus {
    top: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #0d93d6;
    outline-offset: 2px;
}

/* Improved contrast for text */
.text-muted {
    color: #6c757d !important;
}

/* Card hover effects */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Image lazy loading placeholder */
img[loading="lazy"] {
    background-color: #f0f0f0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Improved spacing consistency */
.section-spacing {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
    .section-spacing {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* Cookie Banner Improvements */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    z-index: 1040;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

/* Improved mobile navigation */
@media (max-width: 991.98px) {
    .navbar-toggler {
        border: none;
        padding: 0.5rem;
        border-radius: 8px;
        transition: background-color 0.3s ease;
    }
    
    .navbar-toggler:hover {
        background-color: rgba(13, 147, 214, 0.1);
    }
    
    .navbar-toggler:focus {
        outline: 2px solid #0d93d6;
        outline-offset: 2px;
    }
    
    .nav-mobile-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* Product Quick View */
.quick-view-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.quick-view-overlay.show {
    display: flex;
}

.quick-view-content {
    background: #ffffff;
    border-radius: 12px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.quick-view-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.quick-view-close:hover {
    background-color: #f0f0f0;
}

/* Improved pagination */
.pagination .page-link {
    border-radius: 8px;
    margin: 0 0.25rem;
    border-color: #dee2e6;
    color: #0d93d6;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background-color: #0d93d6;
    border-color: #0d93d6;
    color: #ffffff;
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background-color: #0d93d6;
    border-color: #0d93d6;
    color: #ffffff;
}

/* Header dropdown - transparent background (for icon dropdowns only) */
header .nav-icons .dropdown-menu,
.nav-icons .dropdown-menu,
#shop-nav .nav-icons .dropdown-menu {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Improved dropdowns - general styling */
.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    padding: 0.5rem;
    background-color: #ffffff !important;
}

/* Mega Menu Dropdown - Fix black background/shade */
.dropdown-body,
.category-dropdown,
.categories-recursive-dropdown,
[id^="category-dropdown-"],
.nav-item .dropdown-menu,
.nav-item.dropdown .dropdown-menu,
.navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-body .dropdown-menu,
.category-dropdown .dropdown-menu,
.categories-recursive-dropdown .dropdown-menu,
.nav-item .dropdown-menu .dropdown-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Ensure mega menu dropdown items have proper contrast and no dark backgrounds */
.dropdown-body,
.dropdown-body *,
.category-dropdown,
.category-dropdown *,
.categories-recursive-dropdown,
.categories-recursive-dropdown *,
[id^="category-dropdown-"],
[id^="category-dropdown-"] * {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Override any dark text colors in mega menu */
.dropdown-body,
.category-dropdown,
.categories-recursive-dropdown {
    color: #333 !important;
}

.dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background-color: rgba(13, 147, 214, 0.1);
    color: #0d93d6;
}

.dropdown-item.active {
    background-color: #0d93d6;
    color: #ffffff;
}

/* Button secondary - blue background */
button.btn.btn-secondary,
.btn.btn-secondary,
.btn-secondary {
    background-color: #0d93d6 !important;
    border-color: #0d93d6 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #0a7bb8 !important;
}

/* Header icons - blue color */
i.fas.fa-heart,
.fas.fa-heart,
#shop-nav .fa-heart,
.nav-icons .fa-heart,
.fa-heart {
    color: #686868 !important;
}

span.fas.fa-user,
.fas.fa-user,
#shop-nav .fa-user,
.nav-icons .fa-user,
.fa-user {
    color: #686868 !important;
}

i.fas.fa-shopping-cart.cart-icon-dropdown-icon,
.fas.fa-shopping-cart.cart-icon-dropdown-icon,
#shop-nav .fa-shopping-cart,
.nav-icons .fa-shopping-cart,
.cart-icon-dropdown-icon,
.fa-shopping-cart {
    color: #686868 !important;
}


/* Header icons - gray color */
i.fas.fa-heart,
.fas.fa-heart,
#shop-nav .fa-heart,
.nav-icons .fa-heart {
    color: #686868 !important;
}

span.fas.fa-user,
.fas.fa-user,
#shop-nav .fa-user,
.nav-icons .fa-user {
    color: #686868 !important;
}

i.fas.fa-shopping-cart.cart-icon-dropdown-icon,
.fas.fa-shopping-cart.cart-icon-dropdown-icon,
#shop-nav .fa-shopping-cart,
.nav-icons .fa-shopping-cart,
.cart-icon-dropdown-icon {
    color: #686868 !important;
}

/* Badge/Superscript styling */
.fa-sup {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -.3em;
    background-color: #0d93d6;
    margin-top: -1em;
    padding: .4em .6em;
    border-radius: 50rem;
    font-size: .7em;
    font-family: "Open Sans", sans-serif;
    color: #ffffff;
    max-width: 3em;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1060;
}

.toast {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
}

.toast-success {
    background-color: #28a745;
    color: #ffffff;
}

.toast-error {
    background-color: #dc3545;
    color: #ffffff;
}

.toast-info {
    background-color: #0d93d6;
    color: #ffffff;
}

/* Improved tooltips */
.tooltip {
    font-size: 0.875rem;
}

.tooltip-inner {
    background-color: #333;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

/* Checkout Progress Bar - Change yellow underline to blue */
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after {
    background: #0d93d6 !important;
}

@media (max-width: 991.98px) {
    .stepper .step-current .step-content::after {
        background: #0d93d6 !important;
    }
}

/* Step check icon - Change to blue */
.fas.fa-check.step-check,
.fa-check.step-check,
.step-check,
.stepper .fa-check,
.stepper .step-check,
.stepper .fas.fa-check,
.checkout-steps .step-check,
.checkout-steps .fas.fa-check.step-check,
.checkout-steps .fa-check.step-check {
    color: #0d93d6 !important;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .productbox {
        break-inside: avoid;
    }
}