/**
 * 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 charcoal */
:root {
    --primary: #374151 !important;
}

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

/* Primary color overrides - Replace all yellow (#F8BF00, #EFC03D, #ffc107) with charcoal */
.bg-primary,
[class*="bg-primary"] {
    background-color: #374151 !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: #374151 !important;
}

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

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

/* Button primary styles */
.btn-primary,
[class*="btn-primary"],
#cart-checkout-btn,
#cart-checkout-btn.btn-primary {
    background-color: #374151 !important;
    border-color: #374151 !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;
}

/* Ensure "Zum Warenkorb" button text and icon are white */
a.btn-basket,
.btn-basket,
a.btn-basket.btn-primary,
.btn-basket.btn-primary {
    color: #ffffff !important;
}

a.btn-basket *,
.btn-basket *,
a.btn-basket i,
.btn-basket i,
a.btn-basket .fas,
.btn-basket .fas,
a.btn-basket .fa-shopping-cart,
.btn-basket .fa-shopping-cart {
    color: #ffffff !important;
}

/* Modal close button hover - change yellow to topbar color */
button.close,
button.x.close,
.close,
.x.close,
button[data-dismiss="modal"],
button.close:hover,
button.x.close:hover,
.close:hover,
.x.close:hover,
button[data-dismiss="modal"]:hover,
button.close:focus,
button.x.close:focus,
.close:focus,
.x.close:focus,
button[data-dismiss="modal"]:focus,
.modal button.close,
.modal button.x.close,
.modal .close,
.modal .x.close,
.modal button[data-dismiss="modal"],
.modal button.close:hover,
.modal button.x.close:hover,
.modal .close:hover,
.modal .x.close:hover,
.modal button[data-dismiss="modal"]:hover {
    color: #374151 !important;
    background-color: #f5f7fa !important;
    border-color: #ffffff !important;
}

button.close i,
button.x.close i,
.close i,
.x.close i,
button[data-dismiss="modal"] i,
button.close:hover i,
button.x.close:hover i,
.close:hover i,
.x.close:hover i,
button[data-dismiss="modal"]:hover i,
button.close .fa-times,
button.x.close .fa-times,
.close .fa-times,
.x.close .fa-times,
button[data-dismiss="modal"] .fa-times,
button.close:hover .fa-times,
button.x.close:hover .fa-times,
.close:hover .fa-times,
.x.close:hover .fa-times,
button[data-dismiss="modal"]:hover .fa-times,
.modal button.close i,
.modal button.x.close i,
.modal .close i,
.modal .x.close i,
.modal button[data-dismiss="modal"] i,
.modal button.close:hover i,
.modal button.x.close:hover i,
.modal .close:hover i,
.modal .x.close:hover i,
.modal button[data-dismiss="modal"]:hover i,
.modal button.close .fa-times,
.modal button.x.close .fa-times,
.modal .close .fa-times,
.modal .x.close .fa-times,
.modal button[data-dismiss="modal"] .fa-times,
.modal button.close:hover .fa-times,
.modal button.x.close:hover .fa-times,
.modal .close:hover .fa-times,
.modal .x.close:hover .fa-times,
.modal button[data-dismiss="modal"]:hover .fa-times {
    color: #374151 !important;
}

/* Override any yellow background or border on close button hover */
button.close:hover,
button.x.close:hover,
.close:hover,
.x.close:hover,
button[data-dismiss="modal"]:hover,
.modal button.close:hover,
.modal button.x.close:hover,
.modal .close:hover,
.modal .x.close:hover,
.modal button[data-dismiss="modal"]:hover,
body .modal button.close:hover,
body .modal button.x.close:hover,
body .modal .close:hover,
body .modal .x.close:hover,
body .modal button[data-dismiss="modal"]:hover {
    background-color: #f5f7fa !important;
    background: #f5f7fa !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    color: #374151 !important;
}

/* Force override yellow colors in close button - highest specificity */
button.x.close:hover,
button.x.close:hover *,
button.x.close:hover i,
button.x.close:hover .fa-times,
button.x.close:hover .fa,
.modal button.x.close:hover,
.modal button.x.close:hover *,
.modal button.x.close:hover i,
.modal button.x.close:hover .fa-times,
.modal button.x.close:hover .fa,
body .modal button.x.close:hover,
body .modal button.x.close:hover *,
body .modal button.x.close:hover i,
body .modal button.x.close:hover .fa-times,
body .modal button.x.close:hover .fa {
    color: #374151 !important;
    background-color: #f5f7fa !important;
    border-color: #ffffff !important;
}

/* Override any inline yellow styles on close button */
button.x.close[style*="color"]:hover,
button.x.close[style*="background"]:hover,
.modal button.x.close[style*="color"]:hover,
.modal button.x.close[style*="background"]:hover,
body .modal button.x.close[style*="color"]:hover,
body .modal button.x.close[style*="background"]:hover {
    color: #374151 !important;
    background-color: #f5f7fa !important;
    border-color: #ffffff !important;
}

/* Override yellow color codes specifically for close button */
button.x.close:hover[style*="#F8BF00"],
button.x.close:hover[style*="#ffc107"],
button.x.close:hover[style*="#EFC03D"],
.modal button.x.close:hover[style*="#F8BF00"],
.modal button.x.close:hover[style*="#ffc107"],
.modal button.x.close:hover[style*="#EFC03D"] {
    color: #374151 !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: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    border-color: #374151 !important;
    color: #374151 !important;
}

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

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

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

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

/* Alert primary (if any yellow alerts exist) */
.alert-primary {
    background-color: rgba(55, 65, 81, 0.1) !important;
    border-color: #374151 !important;
    color: #374151 !important;
}

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

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

a[class*="primary"]:hover,
a[class*="primary"]:focus,
a.text-primary:hover,
a.text-primary:focus {
    color: #1f2937 !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: #374151 !important;
    border-color: #374151 !important;
    color: #374151 !important;
}

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

.cart-icon-dropdown-icon .fa-sup {
    max-width: none !important;
}

/* Text swatches active state styling */
.swatches-text.active {
    border: 1px solid #374151 !important;
    background-color: #374151 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Info essential list styling */
ul.info-essential.list-unstyled {
    margin-bottom: 10px !important;
}

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

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

/* Focus-visible styling for buttons and focusable elements */
.btn:focus-visible,
.focus,
:focus-visible {
    outline: 2px solid #374151 !important;
    border-radius: .125rem !important;
    outline-offset: 1px !important;
}

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

::-moz-selection {
    background-color: #374151 !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: #374151 !important;
    background-color: #374151 !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(55, 65, 81, 0.25) !important;
}

.custom-radio .custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #374151 !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(55, 65, 81, 0.5) !important;
}

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

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
    border-color: #374151 !important;
    background-color: #374151 !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(55, 65, 81, 0.25) !important;
}

.custom-checkbox .custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #374151 !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(55, 65, 81, 0.5) !important;
}

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

/* Custom Switch - Change yellow to blue */
.custom-switch .custom-control-input:checked~.custom-control-label::before {
    border-color: #374151 !important;
    background-color: #374151 !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(55, 65, 81, 0.25) !important;
}

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

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

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

.form-check-input:focus {
    border-color: #374151 !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 65, 81, 0.25) !important;
}

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

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

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

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

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

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

input[type="checkbox"]:focus {
    outline-color: #374151 !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;
}


/* 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: #374151 !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: #374151 !important;
}

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

a.text-primary:hover,
a.text-primary:focus,
.text-primary:hover,
.text-primary:focus {
    color: #1f2937 !important;
    /* Darker charcoal on hover */
}

/* Progress bar yellow to blue */
.progress-bar {
    background-color: #374151 !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: #374151 !important;
    border-color: #374151 !important;
    color: #374151 !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: #374151 !important;
    border-color: #374151 !important;
    color: #374151 !important;
}

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

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

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

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

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    border-color: #374151 !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(55, 65, 81, 0.1) !important;
    color: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    color: #ffffff !important;
    border-color: #374151 !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: #374151 !important;
    color: #374151 !important;
    background-color: transparent !important;
}

a.badge-outline-primary:hover,
a.badge-outline-primary:focus {
    background-color: rgba(55, 65, 81, 0.1) !important;
    color: #374151 !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: #374151 !important;
    color: #ffffff !important;
    border-color: #374151 !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: #374151 !important;
    border-color: #374151 !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: #374151 !important;
    color: #ffffff !important;
    border-color: #374151 !important;
}

.product-list .dropdown-menu .dropdown-item.active {
    background-color: #374151 !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: #374151 !important;
    background-color: rgba(55, 65, 81, 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: #374151 !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: #1f2937 !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: #374151 !important;
}

.nav-link.dropdown-toggle::before,
.nav-link.dropdown-toggle::after {
    border-color: #374151 !important;
    background-color: rgba(55, 65, 81, 0) !important;
}

/* Button secondary - blue background */
button.btn.btn-secondary,
.btn.btn-secondary,
.btn-secondary {
    background-color: #374151 !important;
    border-color: #374151 !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 #1f2937 !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: 0px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #374151 !important;
    transition: all 0.3s ease !important;
}

/* 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: #374151 !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 65, 81, 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: #374151 !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;
    }
}

/* 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;
    }
}

/* Result wrapper - Allow natural HTML flow */
#result-wrapper {
    display: block !important;
}

/* Sub-categories should appear directly under category name */
.content-cats-small,
.productlist-header-subcategories {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove spacing between category title and sub-categories */
.productlist-header .title,
.productlist-header h1,
.productlist-header .h2 {
    margin-bottom: 0.5rem !important;
}

.productlist-header-subcategories {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
}

/* Sub-category boxes - Large image cards, no padding */
.content-cats-small .sub-categories {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0.5rem 1.5rem 0.5rem !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.content-cats-small .sub-categories:hover {
    transform: translateY(-4px) !important;
}

/* Sub-category image wrapper - Full width, no padding, fills entire box */
.subcategories-image-wrapper {
    width: 100% !important;
    min-height: 300px !important;
    height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.subcategories-image-wrapper img,
.subcategories-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Sub-category overlay at bottom of image - Grey semi-transparent box with white text */
.subcategories-overlay-bottom {
    position: absolute !important;
    bottom: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: 90% !important;
}

.subcategories-title-link {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-block !important;
    background-color: rgba(55, 65, 81, 0.85) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.subcategories-title-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: rgba(55, 65, 81, 0.95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.05) !important;
}

/* Sub-category content area (lists below image) */
.subcategories-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 1rem !important;
}

.content-cats-small .sub-categories ul,
.subcategories-child-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.content-cats-small .sub-categories ul li,
.subcategories-child-list li {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.content-cats-small .sub-categories ul li a,
.subcategories-child-list li a {
    display: block !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    padding: 0.5rem 0 !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

.content-cats-small .sub-categories ul li a:hover,
.content-cats-small .sub-categories ul li a:focus,
.subcategories-child-list li a:hover,
.subcategories-child-list li a:focus {
    color: #374151 !important;
    background-color: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: #374151 !important;
    transform: none !important;
}

.content-cats-small .sub-categories ul li a:active,
.subcategories-child-list li a:active {
    color: #1f2937 !important;
}

/* Removed: HR styling - HR tag removed from template */

/* Ensure all sub-category boxes have equal height */
.content-cats-small .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.content-cats-small [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {

    /* Hide entire sub-categories row on mobile */
    .row.row-eq-height.content-cats-small,
    .content-cats-small.row,
    .row.content-cats-small {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide images on mobile - show only category name */
    .subcategories-image-wrapper,
    .subcategories-image-wrapper img,
    .subcategories-img,
    .subcategories-overlay-bottom,
    .subcategories-overlay-center,
    .subcategories-title-link {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide child category lists on mobile - show only first level category names */
    .subcategories-content,
    .content-cats-small .sub-categories ul,
    .subcategories-child-list,
    .content-cats-small .sub-categories .subcategories-content,
    .content-cats-small .sub-categories>div:last-child ul,
    .content-cats-small .sub-categories>div:last-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show only category name on mobile */
    .content-cats-small .sub-categories {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* Style the category name link on mobile */
    .content-cats-small .sub-categories .caption,
    .content-cats-small .sub-categories .caption a {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        background-color: rgba(55, 65, 81, 0.9) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .content-cats-small .sub-categories .caption a:hover,
    .content-cats-small .sub-categories .caption a:focus {
        background-color: rgba(55, 65, 81, 1) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* Product boxes spacing on mobile - category page only */
    #product-list .product-wrapper:not(:last-child) {
        margin-bottom: 6px !important;
        padding: 6px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .subcategories-image-wrapper {
        min-height: 250px !important;
        height: 250px !important;
    }
}

/* Category grid boxes should appear after sub-categories */
.category-grid-wrapper,
.category-grid,
.opc-Portlet[class*="CategoryGrid"] {
    order: 2;
}

/* Ensure product list appears after both */
.product-list {
    order: 3;
}

/* 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;
}

/* Gallery Overlay - Match subcategory styling */
.gallery__overlay {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 1.5rem !important;
    transform: translateX(-50%) !important;
    padding: 0.875rem 2rem !important;
    z-index: 10 !important;
    border-radius: 50px !important;
    background-color: rgba(55, 65, 81, 0.85) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: inline-block !important;
    max-width: calc(100% - 3rem) !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.gallery__overlay,
.gallery__overlay *,
.gallery__overlay a,
.gallery__overlay span {
    color: #ffffff !important;
}

.gallery__overlay:hover {
    background-color: rgba(55, 65, 81, 0.95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(-50%) scale(1.05) !important;
}

.gallery__overlay:hover,
.gallery__overlay:hover *,
.gallery__overlay:hover a,
.gallery__overlay:hover span {
    color: #ffffff !important;
}

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

/* Category Page - Force 1 column (1 image per row) */
body[class*="category"] .category-grid,
body[class*="kategorie"] .category-grid,
.page-category .category-grid,
.category-page .category-grid,
.category-grid-wrapper[data-category-page="true"] .category-grid {
    grid-template-columns: 1fr !important;
}

body[class*="category"] .category-grid-cols-2,
body[class*="category"] .category-grid-cols-3,
body[class*="category"] .category-grid-cols-4,
body[class*="kategorie"] .category-grid-cols-2,
body[class*="kategorie"] .category-grid-cols-3,
body[class*="kategorie"] .category-grid-cols-4,
.page-category .category-grid-cols-2,
.page-category .category-grid-cols-3,
.page-category .category-grid-cols-4,
.category-page .category-grid-cols-2,
.category-page .category-grid-cols-3,
.category-page .category-grid-cols-4,
.category-grid-wrapper[data-category-page="true"] .category-grid-cols-2,
.category-grid-wrapper[data-category-page="true"] .category-grid-cols-3,
.category-grid-wrapper[data-category-page="true"] .category-grid-cols-4 {
    grid-template-columns: 1fr !important;
}

/* Category Page - Adjust item width for single column */
body[class*="category"] .category-grid__item,
body[class*="kategorie"] .category-grid__item,
.page-category .category-grid__item,
.category-page .category-grid__item,
.category-grid-wrapper[data-category-page="true"] .category-grid__item {
    max-width: 100% !important;
    width: 100% !important;
}

/* 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 */
.customcontainer .category-grid-wrapper,
.customcontainer .category-grid {
    background-color: transparent;
}











/* 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 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 - Match New Design */
@media (max-width: 1024px) {

    .product-list .product-grid,
    .product-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 0px;
    }
}

/* Stat Value - Mobile View - High specificity to override plugin CSS */
@media (max-width: 480px) {

    body .stat-value,
    body .animated-hero .stat-value,
    body .feature-stats .stat-value,
    body .stat-item .stat-value,
    body .stat-content .stat-value {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Feature Stats Slider - Mobile Only */
@media (max-width: 767px) {
    .feature-stats.slick-slider {
        display: block !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }

    .feature-stats.slick-slider .slick-list {
        text-align: center !important;
    }

    .feature-stats.slick-slider .slick-track {
        display: flex !important;
        align-items: center !important;
    }

    .feature-stats.slick-slider .stat-item {
        padding: 12px 16px !important;
        margin: 0 auto !important;
        min-width: 0 !important;
        flex: none !important;
        max-width: 90% !important;
        text-align: center !important;
    }

    .feature-stats.slick-slider .stat-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .feature-stats.slick-slider .stat-icon {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }

    .feature-stats.slick-slider .stat-value {
        font-size: 11px !important;
        text-align: center !important;
    }

    .feature-stats.slick-slider .stat-label {
        font-size: 9px !important;
        text-align: center !important;
    }

    /* Hide arrows */
    .feature-stats.slick-slider .slick-arrow {
        display: none !important;
    }

    /* Style dots */
    .feature-stats.slick-slider .slick-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        bottom: -25px !important;
        position: absolute !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .feature-stats.slick-slider .slick-dots li {
        margin: 0 4px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .feature-stats.slick-slider .slick-dots li button {
        width: 8px !important;
        height: 8px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(14, 165, 233, 0.3) !important;
        border: none !important;
        opacity: 0.5 !important;
        transition: all 0.3s ease !important;
    }

    .feature-stats.slick-slider .slick-dots li button:before {
        display: none !important;
    }

    .feature-stats.slick-slider .slick-dots li.slick-active button {
        background: #0ea5e9 !important;
        opacity: 1 !important;
        transform: scale(1.2) !important;
    }
}

/* Desktop - Keep original layout */
@media (min-width: 768px) {
    .feature-stats {
        display: flex !important;
        flex-direction: column !important;
    }

    .feature-stats.slick-slider {
        display: flex !important;
    }

    .feature-stats.slick-slider .slick-list,
    .feature-stats.slick-slider .slick-track {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Button Styling */
.btn-outline-secondary {
    border-color: #374151;
    background-color: transparent;
    color: #525252;
}

/* Form Counter Styling - Improved Design - Only for product detail page */
.product-detail .form-counter,
.product-detail-page .form-counter {
    border: 1px solid #374151 !important;
    border-radius: 6px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
    flex-direction: row !important;
}

/* Ensure minus button is at start and plus button is at end */
.product-detail .form-counter .input-group-prepend,
.product-detail-page .form-counter .input-group-prepend {
    order: -1 !important;
}

.product-detail .form-counter .input-group-append,
.product-detail-page .form-counter .input-group-append {
    order: 1 !important;
}

.product-detail .form-counter:hover,
.product-detail-page .form-counter:hover {
    border-color: #1f2937 !important;
    box-shadow: 0 2px 4px rgba(55, 65, 81, 0.1) !important;
}

/* Form Counter Buttons - Only for product detail page */
.product-detail .form-counter button,
.product-detail-page .form-counter button,
.product-detail .form-counter .btn-counter,
.product-detail-page .form-counter .btn-counter {
    background-color: transparent !important;
    border: none !important;
    color: #374151 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 100% !important;
}

.product-detail .form-counter button:hover,
.product-detail-page .form-counter button:hover {
    background-color: #f5f7fa !important;
    color: #1f2937 !important;
}

.product-detail .form-counter button:active,
.product-detail-page .form-counter button:active {
    background-color: #e5e7eb !important;
}

/* Form Counter Input - Only for product detail page */
.product-detail .form-counter input,
.product-detail-page .form-counter input,
.product-detail .form-counter input[type="number"],
.product-detail-page .form-counter input[type="number"] {
    border: none !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 0.5rem 0.75rem !important;
    flex: 1 !important;
    min-width: 60px !important;
    max-width: 80px !important;
}

.product-detail .form-counter input:focus,
.product-detail-page .form-counter input:focus {
    outline: none !important;
    border-left-color: #374151 !important;
    border-right-color: #374151 !important;
    box-shadow: inset 0 0 0 1px #374151 !important;
}

/* Product Detail Page - Add to Cart Button Improvements - Only for product detail page */
.product-detail .basket-form-inline button[name="inWarenkorb"],
.product-detail-page .basket-form-inline button[name="inWarenkorb"],
.product-detail .product-buy button[name="inWarenkorb"],
.product-detail-page .product-buy button[name="inWarenkorb"] {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 48px !important;
    box-shadow: 0 2px 4px rgba(55, 65, 81, 0.2) !important;
    white-space: nowrap !important;
}

.product-detail .basket-form-inline button[name="inWarenkorb"] .btn-basket-check,
.product-detail-page .basket-form-inline button[name="inWarenkorb"] .btn-basket-check,
.product-detail .product-buy button[name="inWarenkorb"] .btn-basket-check,
.product-detail-page .product-buy button[name="inWarenkorb"] .btn-basket-check {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.product-detail .basket-form-inline button[name="inWarenkorb"]:hover,
.product-detail-page .basket-form-inline button[name="inWarenkorb"]:hover,
.product-detail .product-buy button[name="inWarenkorb"]:hover,
.product-detail-page .product-buy button[name="inWarenkorb"]:hover {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(55, 65, 81, 0.3) !important;
}

.product-detail .basket-form-inline button[name="inWarenkorb"]:active,
.product-detail-page .basket-form-inline button[name="inWarenkorb"]:active,
.product-detail .product-buy button[name="inWarenkorb"]:active,
.product-detail-page .product-buy button[name="inWarenkorb"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(55, 65, 81, 0.2) !important;
}

/* Quantity and Add to Cart Container - Only affect product detail page basket form */
.product-detail .basket-form-inline .row,
.product-detail-page .basket-form-inline .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
}

.product-detail .basket-form-inline .form-counter-wrapper,
.product-detail-page .basket-form-inline .form-counter-wrapper {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
}

/* Desktop: Ensure form counter and button have same height */
@media (min-width: 768px) {

    .product-detail .basket-form-inline .form-counter,
    .product-detail-page .basket-form-inline .form-counter {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .product-detail .basket-form-inline button[name="inWarenkorb"],
    .product-detail-page .basket-form-inline button[name="inWarenkorb"] {
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* Mobile Responsive */
@media (max-width: 767.98px) {

    .product-detail .basket-form-inline .row,
    .product-detail-page .basket-form-inline .row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .product-detail .basket-form-inline [class*="col-"],
    .product-detail-page .basket-form-inline [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .product-detail .basket-form-inline [class*="col-"]:first-child,
    .product-detail-page .basket-form-inline [class*="col-"]:first-child {
        margin-bottom: 0.5rem !important;
    }

    .product-detail .form-counter-wrapper,
    .product-detail-page .form-counter-wrapper,
    .product-detail .basket-form-inline .form-counter-wrapper,
    .product-detail-page .basket-form-inline .form-counter-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .product-detail .form-counter,
    .product-detail-page .form-counter,
    .product-detail .basket-form-inline .form-counter,
    .product-detail-page .basket-form-inline .form-counter {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .product-detail .basket-form-inline button[name="inWarenkorb"],
    .product-detail-page .basket-form-inline button[name="inWarenkorb"],
    .product-detail button[name="inWarenkorb"],
    .product-detail-page button[name="inWarenkorb"] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Card Header Styling */
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #3741512e;
    border-bottom: 1px solid #f5f7fa;
}

/* Mobile Product Detail Page - Better Accordion Design */
@media (max-width: 767.98px) {

    /* Accordion Container */
    .product-detail .accordion,
    .product-detail-page .accordion,
    #tabAccordion,
    [id*="tabAccordion"],
    .accordion {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Accordion Card */
    .product-detail .accordion .card,
    .product-detail-page .accordion .card,
    .accordion .card {
        border: none !important;
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
        transition: all 0.3s ease !important;
    }

    .product-detail .accordion .card:hover,
    .product-detail-page .accordion .card:hover,
    .accordion .card:hover {
        box-shadow: 0 4px 12px rgba(55, 65, 81, 0.15) !important;
        transform: translateY(-2px) !important;
    }

    /* Accordion Header - Modern Design - More Specific Selectors */
    .product-detail .accordion .card-header,
    .product-detail-page .accordion .card-header,
    .accordion .card-header,
    .product-detail .card-header[data-toggle="collapse"],
    .product-detail-page .card-header[data-toggle="collapse"],
    .card-header[data-toggle="collapse"],
    .accordion .card-header[data-toggle="collapse"] {
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
        border: none !important;
        border-bottom: 2px solid #e5e7eb !important;
        padding: 1rem 1.25rem !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        color: #374151 !important;
        min-height: 56px !important;
        width: 100% !important;
    }

    /* Accordion Header Hover State */
    .product-detail .accordion .card-header:hover,
    .product-detail-page .accordion .card-header:hover,
    .accordion .card-header:hover,
    .product-detail .card-header[data-toggle="collapse"]:hover,
    .product-detail-page .card-header[data-toggle="collapse"]:hover,
    .card-header[data-toggle="collapse"]:hover {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
        border-bottom-color: #374151 !important;
        color: #1f2937 !important;
    }

    /* Accordion Header Active/Expanded State */
    .product-detail .accordion .card-header[aria-expanded="true"],
    .product-detail-page .accordion .card-header[aria-expanded="true"],
    .accordion .card-header[aria-expanded="true"],
    .product-detail .card-header[data-toggle="collapse"][aria-expanded="true"],
    .product-detail-page .card-header[data-toggle="collapse"][aria-expanded="true"],
    .card-header[data-toggle="collapse"][aria-expanded="true"] {
        background: linear-gradient(135deg, #374151 0%, #4b5563 100%) !important;
        color: #ffffff !important;
        border-bottom-color: #374151 !important;
    }

    /* Accordion Chevron Icon - Ensure it shows */
    .product-detail .accordion .card-header::after,
    .product-detail-page .accordion .card-header::after,
    .accordion .card-header::after,
    .product-detail .card-header[data-toggle="collapse"]::after,
    .product-detail-page .card-header[data-toggle="collapse"]::after,
    .card-header[data-toggle="collapse"]::after {
        content: '\f078' !important;
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        transition: transform 0.3s ease, color 0.3s ease !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        display: inline-block !important;
        width: auto !important;
    }

    .product-detail .accordion .card-header[aria-expanded="true"]::after,
    .product-detail-page .accordion .card-header[aria-expanded="true"]::after,
    .accordion .card-header[aria-expanded="true"]::after,
    .product-detail .card-header[data-toggle="collapse"][aria-expanded="true"]::after,
    .product-detail-page .card-header[data-toggle="collapse"][aria-expanded="true"]::after,
    .card-header[data-toggle="collapse"][aria-expanded="true"]::after {
        transform: rotate(180deg) !important;
        color: #ffffff !important;
    }

    /* Accordion Body */
    .product-detail .accordion .card-body,
    .product-detail-page .accordion .card-body,
    .accordion .card-body,
    .product-detail .collapse.show .card-body,
    .product-detail-page .collapse.show .card-body,
    .collapse.show .card-body {
        padding: 1.25rem !important;
        background-color: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
        line-height: 1.7 !important;
        color: #374151 !important;
    }

    /* Accordion Content Styling */
    .product-detail .accordion .card-body p,
    .product-detail-page .accordion .card-body p,
    .accordion .card-body p {
        margin-bottom: 1rem !important;
        color: #4b5563 !important;
    }

    .product-detail .accordion .card-body ul,
    .product-detail-page .accordion .card-body ul,
    .accordion .card-body ul,
    .product-detail .accordion .card-body ol,
    .product-detail-page .accordion .card-body ol,
    .accordion .card-body ol {
        margin-bottom: 1rem !important;
        padding-left: 1.5rem !important;
    }

    .product-detail .accordion .card-body li,
    .product-detail-page .accordion .card-body li,
    .accordion .card-body li {
        margin-bottom: 0.5rem !important;
        color: #4b5563 !important;
    }

    /* Remove default Bootstrap accordion styling */
    .product-detail .accordion .card:not(:last-child),
    .product-detail-page .accordion .card:not(:last-child),
    .accordion .card:not(:last-child) {
        margin-bottom: 1rem !important;
    }
}

/* Product Detail Page - Overall Improvements */
.product-detail,
.product-detail-page {
    padding-bottom: 2rem !important;
}

/* Product Detail - Title and Info Section */
.product-detail h1,
.product-detail-page h1,
.product-detail .product-title,
.product-detail-page .product-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.product-detail .product-info,
.product-detail-page .product-info {
    margin-bottom: 1.5rem !important;
}

.product-detail .product-info-item,
.product-detail-page .product-info-item {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-bottom: 0.5rem !important;
}

/* Product Detail - Price Section */
.product-detail .price,
.product-detail-page .price,
.product-detail .productbox-price,
.product-detail-page .productbox-price {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
}

.product-detail .price-note,
.product-detail-page .price-note {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-bottom: 1rem !important;
}

/* Product Detail - Variant Selection */
.product-detail .variation-selection,
.product-detail-page .variation-selection {
    margin-bottom: 1.5rem !important;
}

.product-detail .variation-label,
.product-detail-page .variation-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}

/* Product Detail - Section Spacing */
.product-detail .product-section,
.product-detail-page .product-section {
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.product-detail .product-section:last-child,
.product-detail-page .product-section:last-child {
    border-bottom: none !important;
}

/* Smooth scroll behavior for tab navigation */
html {
    scroll-behavior: smooth !important;
}

/* Prevent jarring scroll jumps - add padding to tabs */
.tab-navigation,
.tab-content,
[id*="product-tabs"] {
    scroll-margin-top: 100px !important;
}

/* Product Detail Basket Form - Basic Styling */
.product-detail .basket-form-inline .row,
.product-detail-page .basket-form-inline .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Form Input Styling */
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: 0px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #0d93d6;
    transition: all 0.3s ease;
}

/* Contact and Checkout pages - Remove border-radius and use topbar color */
body.is-checkout input[type="text"],
body.is-checkout input[type="email"],
body.is-checkout input[type="password"],
body.is-checkout input[type="tel"],
body.is-checkout input[type="number"],
body.is-checkout textarea,
body.is-checkout select,
body.is-checkout .form-control,
body.is-checkout .ac_input,
body[data-page="7"] input[type="text"],
body[data-page="7"] input[type="email"],
body[data-page="7"] input[type="password"],
body[data-page="7"] input[type="tel"],
body[data-page="7"] textarea,
body[data-page="7"] select,
body[data-page="7"] .form-control,
body[data-page="7"] .ac_input,
body[id="kontakt"] input[type="text"],
body[id="kontakt"] input[type="email"],
body[id="kontakt"] input[type="tel"],
body[id="kontakt"] textarea,
body[id="kontakt"] select,
body[id="kontakt"] .form-control,
body[id="kontakt"] .ac_input,
#kontakt input[type="text"],
#kontakt input[type="email"],
#kontakt input[type="tel"],
#kontakt textarea,
#kontakt select,
#kontakt .form-control,
#kontakt .ac_input,
.bestellvorgang input[type="text"],
.bestellvorgang input[type="email"],
.bestellvorgang input[type="password"],
.bestellvorgang input[type="tel"],
.bestellvorgang textarea,
.bestellvorgang select,
.bestellvorgang .form-control,
.bestellvorgang .ac_input {
    border-radius: 0 !important;
    border-color: #374151 !important;
}

/* Contact and Checkout pages - Focus state with topbar color */
body.is-checkout input:focus,
body.is-checkout textarea:focus,
body.is-checkout select:focus,
body.is-checkout .form-control:focus,
body.is-checkout .ac_input:focus,
body[data-page="7"] input:focus,
body[data-page="7"] textarea:focus,
body[data-page="7"] select:focus,
body[data-page="7"] .form-control:focus,
body[id="kontakt"] input:focus,
body[id="kontakt"] textarea:focus,
body[id="kontakt"] select:focus,
body[id="kontakt"] .form-control:focus,
#kontakt input:focus,
#kontakt textarea:focus,
#kontakt select:focus,
#kontakt .form-control:focus,
.bestellvorgang input:focus,
.bestellvorgang textarea:focus,
.bestellvorgang select:focus,
.bestellvorgang .form-control:focus {
    border-color: #374151 !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 65, 81, 0.25) !important;
    outline: none !important;
}

/* Text Alignment */
.item-delivery-status.delivery-status {
    text-align: left;
}

.price_wrapper {
    text-align: left;
}

/* Energy label alignment - handled in main rule below */

/* Product Detail Page - Compact Image (All Screen Sizes) */
#image_wrapper,
.product-detail-gallery-wrapper,
.product-detail-gallery {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.product-detail-image-item.square-image {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.product-detail-image-inner {
    padding: 15px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-detail-main-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.product-detail-image-preview-bar {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

.product-thumbnails-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Product Detail Page - Compact Image on Mobile */
@media (max-width: 768px) {
    .product-detail-image-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .product-detail-image-item.square-image {
        max-height: 300px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .product-detail-image-inner {
        padding: 10px !important;
        height: 100% !important;
    }

    .product-detail-main-image {
        max-height: 280px !important;
    }
}

/* Product Detail Page - Compact Image on Desktop */
@media (min-width: 769px) {
    .product-detail-image-item.square-image {
        max-height: 500px !important;
        height: auto !important;
    }

    .product-detail-image-inner {
        padding: 20px !important;
        max-height: 480px !important;
    }

    .product-detail-main-image {
        max-height: 450px !important;
        max-width: 100% !important;
    }

    #image_wrapper {
        margin-bottom: 1rem !important;
    }
}

/* Slider Arrows - Show on all screen sizes - Modern Style */
.slick-type-product .slick-arrow,
.slick-type-box .slick-arrow,
.slick-type-half .slick-arrow,
.slick-type-product .slick-prev,
.slick-type-product .slick-next,
.slick-type-box .slick-prev,
.slick-type-box .slick-next,
.slick-type-half .slick-prev,
.slick-type-half .slick-next,
.slick-prev,
.slick-next,
.carousel .slick-prev,
.carousel .slick-next,
.box-slider .slick-prev,
.box-slider .slick-next,
.slick-slider .slick-prev,
.slick-slider .slick-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    position: absolute !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* Hide button text but keep pseudo-elements visible */
.slick-prev,
.slick-next {
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
}

.slick-prev::before,
.slick-next::before {
    text-indent: 0 !important;
    font-size: 18px !important;
}

.slick-type-product .slick-arrow:hover,
.slick-type-box .slick-arrow:hover,
.slick-type-half .slick-arrow:hover,
.slick-type-product .slick-prev:hover,
.slick-type-product .slick-next:hover,
.slick-type-box .slick-prev:hover,
.slick-type-box .slick-next:hover,
.slick-type-half .slick-prev:hover,
.slick-type-half .slick-next:hover,
.slick-prev:hover,
.slick-next:hover,
.carousel .slick-prev:hover,
.carousel .slick-next:hover,
.box-slider .slick-prev:hover,
.box-slider .slick-next:hover,
.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-50%) scale(1.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 101 !important;
}

/* Ensure arrow icon stays centered on hover */
.slick-type-product .slick-arrow:hover::before,
.slick-type-box .slick-arrow:hover::before,
.slick-type-half .slick-arrow:hover::before,
.slick-type-product .slick-prev:hover::before,
.slick-type-product .slick-next:hover::before,
.slick-type-box .slick-prev:hover::before,
.slick-type-box .slick-next:hover::before,
.slick-type-half .slick-prev:hover::before,
.slick-type-half .slick-next:hover::before,
.slick-prev:hover::before,
.slick-next:hover::before,
.carousel .slick-prev:hover::before,
.carousel .slick-next:hover::before,
.box-slider .slick-prev:hover::before,
.box-slider .slick-next:hover::before,
.slick-slider .slick-prev:hover::before,
.slick-slider .slick-next:hover::before {
    transform: translate(-50%, -50%) !important;
}

.slick-type-product .slick-arrow::before,
.slick-type-box .slick-arrow::before,
.slick-type-half .slick-arrow::before,
.slick-type-product .slick-prev::before,
.slick-type-product .slick-next::before,
.slick-type-box .slick-prev::before,
.slick-type-box .slick-next::before,
.slick-type-half .slick-prev::before,
.slick-type-half .slick-next::before,
.slick-prev::before,
.slick-next::before,
.carousel .slick-prev::before,
.carousel .slick-next::before,
.box-slider .slick-prev::before,
.box-slider .slick-next::before,
.slick-slider .slick-prev::before,
.slick-slider .slick-next::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #374151 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    content: '' !important;
}

/* Ensure arrow icons have content - Previous arrow */
.slick-prev::before,
.slick-type-product .slick-prev::before,
.slick-type-box .slick-prev::before,
.slick-type-half .slick-prev::before,
.carousel .slick-prev::before,
.box-slider .slick-prev::before,
.slick-slider .slick-prev::before {
    content: '‹' !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* Ensure arrow icons have content - Next arrow */
.slick-next::before,
.slick-type-product .slick-next::before,
.slick-type-box .slick-next::before,
.slick-type-half .slick-next::before,
.carousel .slick-next::before,
.box-slider .slick-next::before,
.slick-slider .slick-next::before {
    content: '›' !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* Ensure arrow icon stays visible and centered on hover */
.slick-type-product .slick-arrow:hover::before,
.slick-type-box .slick-arrow:hover::before,
.slick-type-half .slick-arrow:hover::before,
.slick-type-product .slick-prev:hover::before,
.slick-type-product .slick-next:hover::before,
.slick-type-box .slick-prev:hover::before,
.slick-type-box .slick-next:hover::before,
.slick-type-half .slick-prev:hover::before,
.slick-type-half .slick-next:hover::before,
.slick-prev:hover::before,
.slick-next:hover::before,
.carousel .slick-prev:hover::before,
.carousel .slick-next:hover::before,
.box-slider .slick-prev:hover::before,
.box-slider .slick-next:hover::before,
.slick-slider .slick-prev:hover::before,
.slick-slider .slick-next:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #374151 !important;
    transform: translate(-50%, -50%) !important;
}

/* Maintain arrow content on hover */
.slick-prev:hover::before,
.slick-type-product .slick-prev:hover::before,
.slick-type-box .slick-prev:hover::before,
.slick-type-half .slick-prev:hover::before,
.carousel .slick-prev:hover::before,
.box-slider .slick-prev:hover::before,
.slick-slider .slick-prev:hover::before {
    content: '‹' !important;
}

.slick-next:hover::before,
.slick-type-product .slick-next:hover::before,
.slick-type-box .slick-next:hover::before,
.slick-type-half .slick-next:hover::before,
.carousel .slick-next:hover::before,
.box-slider .slick-next:hover::before,
.slick-slider .slick-next:hover::before {
    content: '›' !important;
}

/* Arrow positioning - Horizontal */
.slick-prev {
    left: 10px !important;
}

.slick-next {
    right: 10px !important;
}

.carousel .slick-prev,
.box-slider .slick-prev,
.slick-slider .slick-prev {
    left: 10px !important;
}

.carousel .slick-next,
.box-slider .slick-next,
.slick-slider .slick-next {
    right: 10px !important;
}

/* Ensure arrows stay centered vertically and visible on hover */
.slick-type-product .slick-arrow:hover,
.slick-type-box .slick-arrow:hover,
.slick-type-half .slick-arrow:hover,
.slick-type-product .slick-prev:hover,
.slick-type-product .slick-next:hover,
.slick-type-box .slick-prev:hover,
.slick-type-box .slick-next:hover,
.slick-type-half .slick-prev:hover,
.slick-type-half .slick-next:hover,
.slick-prev:hover,
.slick-next:hover,
.carousel .slick-prev:hover,
.carousel .slick-next:hover,
.box-slider .slick-prev:hover,
.box-slider .slick-next:hover,
.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
    top: 50% !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Override any conflicting styles that might hide arrows */
.slick-arrow.slick-disabled,
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
}

.slick-arrow:not(.slick-disabled):hover,
.slick-prev:not(.slick-disabled):hover,
.slick-next:not(.slick-disabled):hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 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: #374151 !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: #374151 !important;
    background-color: rgba(55, 65, 81, 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: #374151 !important;
}

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

/* Filter items - Change yellow to charcoal - 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: #374151 !important;
    border: 3px solid #374151 !important;
}

/* Enhanced Filter Item Hover Effects */
.filter-item,
.productlist-filter .filter-item,
.sidepanel-left .filter-item,
.sidepanel-left a.filter-item {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    padding: 0.5rem 0.75rem !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: #374151 !important;
    background-color: rgba(55, 65, 81, 0.08) !important;
    border: 1px solid rgba(55, 65, 81, 0.3) !important;
    border-left: 4px solid #374151 !important;
    box-shadow: 0 2px 6px rgba(55, 65, 81, 0.12) !important;
    padding-left: calc(0.75rem - 3px) !important;
    border-radius: 4px !important;
}

/* Modern Filter Box Buttons - Base Styles */
.sidepanel-left .btn-filter-box,
.sidepanel-left .btn.btn-filter-box,
.sidepanel-left button.btn-filter-box {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.875rem 2.5rem 0.875rem 0 !important;
    text-align: left !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.sidepanel-left .btn-filter-box span,
.sidepanel-left .btn-filter-box .text-truncate,
.sidepanel-left .btn-filter-box .characteristic-collapse-btn-inner {
    color: #374151 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

.sidepanel-left .btn-filter-box:focus,
.sidepanel-left .btn-filter-box:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
}

/* Modern Filter Box Buttons - Hover & Active States */
.sidepanel-left .btn-filter-box:hover,
.sidepanel-left .btn-filter-box:focus,
.sidepanel-left .btn-filter-box:active,
.sidepanel-left .btn-filter-box[aria-expanded="true"] {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #374151 !important;
    color: #374151 !important;
    transform: translateX(4px) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidepanel-left .btn-filter-box:hover span,
.sidepanel-left .btn-filter-box:hover .text-truncate,
.sidepanel-left .btn-filter-box:hover .characteristic-collapse-btn-inner,
.sidepanel-left .btn-filter-box:focus span,
.sidepanel-left .btn-filter-box:focus .text-truncate,
.sidepanel-left .btn-filter-box:focus .characteristic-collapse-btn-inner,
.sidepanel-left .btn-filter-box[aria-expanded="true"] span,
.sidepanel-left .btn-filter-box[aria-expanded="true"] .text-truncate,
.sidepanel-left .btn-filter-box[aria-expanded="true"] .characteristic-collapse-btn-inner {
    color: #374151 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Filter box link wrappers - Let filter-item handle its own hover styles */
.sidepanel-left .box-link-wrapper {
    background-color: transparent !important;
    border: none !important;
}

.sidepanel-left .box-link-wrapper:hover,
.sidepanel-left .box-link-wrapper:focus {
    background-color: transparent !important;
    border: none !important;
}

/* Filter items already have their own hover styles, so don't override box-link-wrapper */
.sidepanel-left .filter-item:hover .box-link-wrapper,
.sidepanel-left .filter-item:focus .box-link-wrapper {
    background-color: transparent !important;
    border: none !important;
}

.sidepanel-left .filter-item:hover .box-link-wrapper *,
.sidepanel-left .filter-item:focus .box-link-wrapper * {
    color: inherit !important;
    background-color: transparent !important;
}

/* Filter item links hover - enhanced with better border */
.sidepanel-left .filter-item:hover,
.sidepanel-left .filter-item:focus,
.sidepanel-left a.filter-item:hover,
.sidepanel-left a.filter-item:focus {
    color: #374151 !important;
    background-color: rgba(55, 65, 81, 0.08) !important;
    border: 1px solid rgba(55, 65, 81, 0.3) !important;
    border-left: 4px solid #374151 !important;
    box-shadow: 0 2px 6px rgba(55, 65, 81, 0.12) !important;
    padding-left: calc(0.75rem - 3px) !important;
    transform: translateX(2px) !important;
    border-radius: 4px !important;
}

/* Filter item icons on hover - charcoal */
.sidepanel-left .filter-item:hover .snippets-filter-item-icon-right,
.sidepanel-left .filter-item:focus .snippets-filter-item-icon-right,
.sidepanel-left .filter-item:hover i,
.sidepanel-left .filter-item:focus i {
    color: #374151 !important;
}

/* Comprehensive sidebar filter hover - ensure all elements use charcoal, not yellow */
.sidepanel-left .filter-item:hover *,
.sidepanel-left .filter-item:focus *,
.sidepanel-left .filter-item:hover .filter-item-value,
.sidepanel-left .filter-item:focus .filter-item-value,
.sidepanel-left .filter-item:hover .word-break,
.sidepanel-left .filter-item:focus .word-break {
    color: #374151 !important;
}

/* Override any yellow background on filter items hover - Enhanced with better border */
.sidepanel-left a.filter-item:hover,
.sidepanel-left a.filter-item:focus,
.sidepanel-left .filter-item:hover,
.sidepanel-left .filter-item:focus {
    background-color: rgba(55, 65, 81, 0.08) !important;
    color: #374151 !important;
    border: 1px solid rgba(55, 65, 81, 0.3) !important;
    border-left: 4px solid #374151 !important;
    box-shadow: 0 2px 6px rgba(55, 65, 81, 0.12) !important;
    padding-left: calc(0.75rem - 3px) !important;
    transform: translateX(2px) !important;
    border-radius: 4px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 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: #374151 !important;
    border-bottom: 0.375rem solid #374151 !important;
    color: #374151 !important;
}

/* Enhanced Filter Category Headers - Base Styles */
.productlist-filter .box-normal-link,
.sidepanel-left .box-normal-link,
aside .box-normal .box-normal-link,
aside .nav-panel .nav-link,
.productlist-filter-headline {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.875rem 2.5rem 0.875rem 0 !important;
    position: relative !important;
    background: transparent !important;
    font-weight: 600 !important;
    color: #374151 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure dropdown arrow has proper spacing */
.productlist-filter .box-normal-link.dropdown-toggle,
.sidepanel-left .box-normal-link.dropdown-toggle,
aside .box-normal .box-normal-link.dropdown-toggle,
aside .nav-panel .nav-link.dropdown-toggle {
    padding-right: 2.5rem !important;
}

/* Removed duplicate - now handled above */

/* Fix box-normal-link active states - Modern Style */
.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: none !important;
    border-bottom: 2px solid #374151 !important;
    color: #374151 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* Enhanced Hover Effects for Filter Category Headers - Modern Style */
.productlist-filter .box-normal-link:hover,
.productlist-filter .box-normal-link:focus,
.sidepanel-left .box-normal-link:hover,
.sidepanel-left .box-normal-link:focus,
aside .box-normal .box-normal-link:hover,
aside .box-normal .box-normal-link:focus,
aside .nav-panel .nav-link:hover,
aside .nav-panel .nav-link:focus {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #374151 !important;
    color: #374151 !important;
    transform: translateX(2px) !important;
    border: 2px solid #374151 !important;
    border-left: 4px solid #374151 !important;
    box-shadow: 0 2px 8px rgba(55, 65, 81, 0.15) !important;
    padding: 0.5rem 2.5rem 0.5rem calc(0.75rem - 2px) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Modern Dropdown Arrow Styling */
.sidepanel-left .btn-filter-box.dropdown-toggle::after,
.productlist-filter .box-normal-link.dropdown-toggle::after,
.sidepanel-left .box-normal-link.dropdown-toggle::after,
aside .box-normal .box-normal-link.dropdown-toggle::after,
aside .nav-panel .nav-link.dropdown-toggle::after {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0.5rem !important;
    border-top-color: #6b7280 !important;
    border-width: 0.4em 0.4em 0 !important;
    transition: transform 0.3s ease, border-top-color 0.3s ease !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.sidepanel-left .btn-filter-box.dropdown-toggle[aria-expanded="true"]::after,
.productlist-filter .box-normal-link.dropdown-toggle[aria-expanded="true"]::after,
.sidepanel-left .box-normal-link.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
    border-top-color: #374151 !important;
}

/* Ensure dropdown arrow spacing on hover */
.productlist-filter .box-normal-link.dropdown-toggle:hover,
.productlist-filter .box-normal-link.dropdown-toggle:focus,
.sidepanel-left .box-normal-link.dropdown-toggle:hover,
.sidepanel-left .box-normal-link.dropdown-toggle:focus,
.sidepanel-left .btn-filter-box.dropdown-toggle:hover,
.sidepanel-left .btn-filter-box.dropdown-toggle:focus,
aside .box-normal .box-normal-link.dropdown-toggle:hover,
aside .box-normal .box-normal-link.dropdown-toggle:focus,
aside .nav-panel .nav-link.dropdown-toggle:hover,
aside .nav-panel .nav-link.dropdown-toggle:focus {
    padding-right: 2.5rem !important;
}

.sidepanel-left .btn-filter-box.dropdown-toggle:hover::after,
.sidepanel-left .btn-filter-box.dropdown-toggle:focus::after,
.productlist-filter .box-normal-link.dropdown-toggle:hover::after,
.productlist-filter .box-normal-link.dropdown-toggle:focus::after,
.sidepanel-left .box-normal-link.dropdown-toggle:hover::after,
.sidepanel-left .box-normal-link.dropdown-toggle:focus::after {
    border-top-color: #374151 !important;
}

.productlist-filter .box-normal-link.dropdown-toggle:hover::after,
.productlist-filter .box-normal-link.dropdown-toggle:focus::after,
.sidepanel-left .box-normal-link.dropdown-toggle:hover::after,
.sidepanel-left .box-normal-link.dropdown-toggle:focus::after,
.sidepanel-left .btn-filter-box.dropdown-toggle:hover::after,
.sidepanel-left .btn-filter-box.dropdown-toggle:focus::after,
aside .box-normal .box-normal-link.dropdown-toggle:hover::after,
aside .box-normal .box-normal-link.dropdown-toggle:focus::after,
aside .nav-panel .nav-link.dropdown-toggle:hover::after,
aside .nav-panel .nav-link.dropdown-toggle:focus::after {
    right: 0.75rem !important;
    margin-left: 0.5rem !important;
    border-top-color: #374151 !important;
}

/* Modern Filter Section - Overall Improvements */
.sidepanel-left .box {
    margin-bottom: 0.5rem !important;
}

.sidepanel-left .box-filter-hr {
    margin: 1rem 0 !important;
    border-top: 1px solid #e5e7eb !important;
    opacity: 0.5 !important;
}

.sidepanel-left .collapse {
    padding-top: 0.5rem !important;
}

.sidepanel-left .filter-search-wrapper {
    padding: 0.5rem 0 !important;
}

/* Modern Price Range Filter Styling */
.sidepanel-left .price-range-inputs {
    margin-bottom: 1rem !important;
    gap: 0.5rem !important;
}

.sidepanel-left .price-range-inputs .col {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.sidepanel-left .price-range-inputs .input-group {
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
}

.sidepanel-left .price-range-inputs .input-group:hover,
.sidepanel-left .price-range-inputs .input-group:focus-within {
    border-color: #374151 !important;
    box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.1) !important;
}

.sidepanel-left .price-range-inputs .form-control.price-range-input {
    border: none !important;
    border-radius: 0 !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: transparent !important;
    height: auto !important;
    min-height: 42px !important;
}

.sidepanel-left .price-range-inputs .form-control.price-range-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.sidepanel-left .price-range-inputs .form-control.price-range-input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.sidepanel-left .price-range-inputs .input-group-prepend {
    height: auto !important;
    border-radius: 0 !important;
    border-left: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    transition: all 0.3s ease !important;
}

.sidepanel-left .price-range-inputs .input-group:hover .input-group-prepend,
.sidepanel-left .price-range-inputs .input-group:focus-within .input-group-prepend {
    background: #f3f4f6 !important;
    border-left-color: #374151 !important;
}

.sidepanel-left .price-range-inputs .input-group-text {
    border: none !important;
    border-radius: 0 !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background: transparent !important;
    min-width: 50px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidepanel-left .price-range-inputs .input-group:hover .input-group-text,
.sidepanel-left .price-range-inputs .input-group:focus-within .input-group-text {
    color: #374151 !important;
}

/* Modern noUi Slider Styling */
.sidepanel-left .price-range-slide,
.sidepanel-left .noUi-target {
    margin: 1.5rem 0.5rem 1rem 0.5rem !important;
    background: #e5e7eb !important;
    border: none !important;
    border-radius: 4px !important;
    height: 6px !important;
    box-shadow: none !important;
}

.sidepanel-left .noUi-connect {
    background: linear-gradient(90deg, #374151 0%, #4b5563 100%) !important;
    border-radius: 4px !important;
    height: 6px !important;
}

.sidepanel-left .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    top: -7px !important;
    right: -10px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid #374151 !important;
    box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3) !important;
    cursor: grab !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidepanel-left .noUi-handle:active,
.sidepanel-left .noUi-handle:focus {
    cursor: grabbing !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(55, 65, 81, 0.4) !important;
    border-color: #4b5563 !important;
}

.sidepanel-left .noUi-handle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 10px rgba(10, 123, 184, 0.35) !important;
}

.sidepanel-left .noUi-handle::before,
.sidepanel-left .noUi-handle::after {
    display: none !important;
}

.sidepanel-left .noUi-handle .noUi-touch-area {
    width: 100% !important;
    height: 100% !important;
}

/* Price Range Filter Container */
.sidepanel-left .box-filter-price-collapse {
    padding: 0.75rem 0 !important;
}

.sidepanel-left .box-filter-price {
    margin-bottom: 0.5rem !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: #374151 !important;
    border-bottom: 2px solid #374151 !important;
    border-bottom-width: 2px !important;
    color: #374151 !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: #374151 !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: #374151 !important;
    color: #374151 !important;
}

/* Mobile Filter Sidebar Improvements */
@media (max-width: 767.98px) {

    /* Ensure menu items and arrows stay on same line on mobile */
    .productlist-filter .box-normal-link,
    .sidepanel-left .box-normal-link,
    aside .box-normal .box-normal-link,
    aside .nav-panel .nav-link,
    .nav-link,
    .nav-item .nav-link,
    .categories-recursive-link {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Ensure dropdown arrows stay on same line */
    .productlist-filter .box-normal-link.dropdown-toggle::after,
    .sidepanel-left .box-normal-link.dropdown-toggle::after,
    aside .box-normal .box-normal-link.dropdown-toggle::after,
    aside .nav-panel .nav-link.dropdown-toggle::after,
    .nav-link.dropdown-toggle::after {
        position: absolute !important;
        right: 0.75rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .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: #374151 !important;
        border-color: #374151 !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;
    }

    /* 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: 1.5rem !important;
}

/* Reduce spacing on category/product list pages */
#result-wrapper {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

.productlist-index,
.page-productlist #main-wrapper,
.page-productlist .container {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

/* Reduce pagination spacing */
.pagination {
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Reduce spacing after product list */
.product-list,
.productlist-wrapper {
    margin-bottom: 0.5rem !important;
}

/* Reduce spacing in product grid */
.product-list .row {
    margin-bottom: 0.5rem !important;
}

/* Reduce footer spacing on category pages */
.page-productlist footer,
.page-productlist #footer,
.page-productlist .footer {
    margin-top: 1rem !important;
}

/* Hide category description if it appears before products (in header area) */
#result-wrapper .desc.category-description,
#result-wrapper .category-description,
.productlist-header .desc,
.productlist-header .category-description,
.productlist-header-description .desc {
    display: none !important;
}

/* Category Description Styling - Above Footer (only at bottom) */
.category-description-footer,
.manufacturer-description-footer,
.characteristic-description-footer {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding: 1rem 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.category-description-footer .desc,
.manufacturer-description-footer .desc,
.characteristic-description-footer .desc,
.category-description-footer .category-description,
.manufacturer-description-footer .manufacturer-description,
.characteristic-description-footer .characteristic-description {
    color: #374151 !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
}

.category-description-footer .desc p,
.manufacturer-description-footer .desc p,
.characteristic-description-footer .desc p,
.category-description-footer .category-description p,
.manufacturer-description-footer .manufacturer-description p,
.characteristic-description-footer .characteristic-description p {
    margin: 0 0 1rem 0 !important;
    font-size: 1rem !important;
    color: #374151 !important;
}

.category-description-footer .desc p:last-child,
.manufacturer-description-footer .desc p:last-child,
.characteristic-description-footer .desc p:last-child {
    margin-bottom: 0 !important;
}

/* Category SEO text styling */
.category-description-footer .category-seo-text,
.category-description-footer section {
    color: #374151 !important;
}

.category-description-footer h2,
.category-description-footer h3 {
    color: #1f2937 !important;
    font-weight: 600 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.category-description-footer h2:first-child,
.category-description-footer h3:first-child {
    margin-top: 0 !important;
}

.category-description-footer ul,
.category-description-footer ol {
    margin: 1rem 0 !important;
    padding-left: 1.5rem !important;
}

.category-description-footer li {
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
}

.category-description-footer strong {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Hide category name overlay in product detail image slider */
.product-detail-category-overlay,
.product-detail-category-name {
    display: none !important;
    visibility: hidden !important;
}

/* Remove yellow color from active image in product detail slider */
.product-detail-gallery .slick-slide.slick-active,
.product-detail-gallery .slick-slide.slick-current,
.product-detail-image-item.slick-active,
.product-detail-image-item.slick-current,
.product-thumbnails .slick-slide.slick-active,
.product-thumbnails .slick-slide.slick-current,
.product-image-thumbnail.active,
.product-image-thumbnail.slick-active {
    border-color: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.product-thumbnails .slick-slide.slick-active .inner,
.product-thumbnails .slick-slide.slick-current .inner {
    border-color: #374151 !important;
    background-color: transparent !important;
}

/* Fix energy label spacing from top and bottom - less top, more bottom */
.energy-label-wrapper,
.product-detail .energy-label,
.energy-label.a-plus-plus-plus {
    margin-top: 0.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* Product detail page energy label - specific spacing */
.product-detail .energy-label-wrapper,
.product-detail .energy-label {
    margin-top: 0.125rem !important;
    margin-bottom: 1rem !important;
}

/* Description tab layout - handled in template with Bootstrap columns */

/* 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 Tabs */
.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 .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: #374151;
}

/* 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;
}

/* 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(55, 65, 81, 0.1);
    }

    .navbar-toggler:focus {
        outline: 2px solid #0d93d6;
        outline-offset: 2px;
    }

    .nav-mobile-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* 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: #374151;
    color: #ffffff;
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background-color: #0d93d6;
    border-color: #374151;
    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;
}

/* Remove border from categories-recursive-dropdown sub-sub menu */
.categories-recursive-dropdown.dropdown-menu,
.categories-recursive-dropdown,
.dropdown-menu.categories-recursive-dropdown,
.nav-item .dropdown-menu .categories-recursive-dropdown,
.dropdown-menu .categories-recursive-dropdown {
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !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;
    border: none !important;
    box-shadow: none !important;
}

/* Remove border from categories-recursive-dropdown sub-sub menu */
.categories-recursive-dropdown.dropdown-menu,
.categories-recursive-dropdown,
.dropdown-menu.categories-recursive-dropdown,
.nav-item .dropdown-menu .categories-recursive-dropdown,
.dropdown-menu .categories-recursive-dropdown,
.categories-recursive-dropdown.dropdown-menu ul,
.categories-recursive-dropdown ul {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    outline: none !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(55, 65, 81, 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: #374151 !important;
    border-color: #374151 !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 #1f2937 !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: #374151 !important;
}

@media (max-width: 991.98px) {
    .stepper .step-current .step-content::after {
        background: #374151 !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: #374151 !important;
}

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

}

/* Input Group Append */
.input-group-append {
    height: 42px;
}

/* ============================================
   PRODUCT SLIDER - ENERGY LABEL & VARIANTS
   Custom styling for product sliders
   ============================================ */

/* Product Box - Same styling for category page and all sliders */
.product-wrapper-product,
.productbox.productbox-column,
.box-slider .product-wrapper,
.carousel .product-wrapper,
.slick-slider .product-wrapper,
.slick-type-box .product-wrapper,
.slick-type-product .product-wrapper,
.slick-type-half .product-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin: 0 0.5rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Ensure productbox-inner has consistent structure */
.productbox-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Ensure product box content area uses flexbox - Same for all product boxes */
.product-wrapper-product>*,
.productbox.productbox-column>*,
.box-slider .product-wrapper>*,
.carousel .product-wrapper>*,
.slick-slider .product-wrapper>*,
.slick-type-box .product-wrapper>*,
.slick-type-product .product-wrapper>*,
.slick-type-half .product-wrapper>* {
    flex-shrink: 0 !important;
}

/* Ensure product wrapper maintains consistent height */
.product-wrapper-product,
.productbox.productbox-column,
.box-slider .product-wrapper,
.carousel .product-wrapper,
.slick-slider .product-wrapper,
.slick-type-box .product-wrapper,
.slick-type-product .product-wrapper,
.slick-type-half .product-wrapper {
    align-items: stretch !important;
}

/* Buy button positioning - Same for all product boxes */
.product-wrapper-product .productbox-buy-button,
.productbox.productbox-column .productbox-buy-button,
.box-slider .product-wrapper .productbox-buy-button,
.carousel .product-wrapper .productbox-buy-button,
.slick-slider .product-wrapper .productbox-buy-button,
.slick-type-box .product-wrapper .productbox-buy-button,
.slick-type-product .product-wrapper .productbox-buy-button,
.slick-type-half .product-wrapper .productbox-buy-button {
    margin-top: auto !important;
}

/* Add gap between slider items */
.slick-slider .slick-slide,
.carousel .slick-slide,
.box-slider .slick-slide {
    padding: 0 0.5rem !important;
    height: auto !important;
}

/* Subtle Product Box Hover Effect - Very small effect, no zoom */
.product-wrapper-product:hover,
.productbox.productbox-column:hover,
.box-slider .product-wrapper:hover,
.carousel .product-wrapper:hover,
.slick-slider .product-wrapper:hover,
.slick-type-box .product-wrapper:hover,
.slick-type-product .product-wrapper:hover,
.slick-type-half .product-wrapper:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    /* No transform/zoom - keep it subtle */
}

/* Subtle Button hover when product box is hovered */
.productbox.productbox-column:hover .productbox-buy-button .btn,
.productbox.productbox-column:hover .productbox-buy-button button,
.productbox.productbox-column:hover .productbox-buy-button a,
.product-wrapper-product:hover .productbox-buy-button .btn,
.product-wrapper-product:hover .productbox-buy-button button,
.product-wrapper-product:hover .productbox-buy-button a,
.box-slider .product-wrapper:hover .productbox-buy-button .btn,
.box-slider .product-wrapper:hover .productbox-buy-button button,
.box-slider .product-wrapper:hover .productbox-buy-button a,
.carousel .product-wrapper:hover .productbox-buy-button .btn,
.carousel .product-wrapper:hover .productbox-buy-button button,
.carousel .product-wrapper:hover .productbox-buy-button a,
.slick-slider .product-wrapper:hover .productbox-buy-button .btn,
.slick-slider .product-wrapper:hover .productbox-buy-button button,
.slick-slider .product-wrapper:hover .productbox-buy-button a,
.slick-type-box .product-wrapper:hover .productbox-buy-button .btn,
.slick-type-box .product-wrapper:hover .productbox-buy-button button,
.slick-type-box .product-wrapper:hover .productbox-buy-button a,
.slick-type-product .product-wrapper:hover .productbox-buy-button .btn,
.slick-type-product .product-wrapper:hover .productbox-buy-button button,
.slick-type-product .product-wrapper:hover .productbox-buy-button a,
.slick-type-half .product-wrapper:hover .productbox-buy-button .btn,
.slick-type-half .product-wrapper:hover .productbox-buy-button button,
.slick-type-half .product-wrapper:hover .productbox-buy-button a {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    color: #ffffff !important;
    /* No transform - keep it subtle */
}

/* Product Description in boxes - Same for category page and all sliders */
.item-box-description,
.productbox.productbox-column .item-box-description,
.product-wrapper-product .item-box-description,
.box-slider .item-box-description,
.carousel .item-box-description,
.slick-slider .item-box-description {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
    min-height: 2.5rem !important;
}

/* Product Title - Left Aligned - Same for category page and all sliders */
.productbox-title,
.item-slider-desc,
.productbox.productbox-column .productbox-title,
.product-wrapper-product .productbox-title,
.box-slider .item-slider-desc,
.carousel .item-slider-desc,
.slick-slider .item-slider-desc,
.slick-type-box .item-slider-desc,
.slick-type-product .item-slider-desc,
.slick-type-half .item-slider-desc {
    text-align: left !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
    min-height: 60px !important;
}

.productbox-title span,
.item-slider-desc span,
.box-slider .item-slider-desc span,
.carousel .item-slider-desc span,
.slick-slider .item-slider-desc span {
    text-align: left !important;
    display: block !important;
}

/* Energy Label - Displayed in all product boxes */
.energy-label-wrapper {
    text-align: left !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0.125rem !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure energy labels are always visible */
.energy-label-wrapper .energy-label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Energy Label Base Styles - Default green background */
.energy-label {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    color: #ffffff !important;
    background: #10b981 !important;
    /* Default green background */
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.2s ease-in-out !important;
}

.energy-label-popup-link {
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.energy-label-popup-link:hover .energy-label {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* Energy Label Color Backgrounds - EU Energy Efficiency Scale */
.energy-label-a-plus-plus-plus,
.energy-label-a\+\+\+,
[class*="energy-label-a+++"] {
    background: #008000 !important;
    /* Dark Green - Best */
    color: #ffffff !important;
}

.energy-label-a-plus-plus,
.energy-label-a\+\+,
[class*="energy-label-a++"]:not([class*="a+++"]) {
    background: #00a000 !important;
    /* Green */
    color: #ffffff !important;
}

.energy-label-a-plus,
.energy-label-a\+,
[class*="energy-label-a+"]:not([class*="a++"]):not([class*="a+++"]) {
    background: #00c000 !important;
    /* Light Green */
    color: #ffffff !important;
}

.energy-label-a,
[class*="energy-label-a"]:not([class*="a+"]):not([class*="a++"]):not([class*="a+++"]) {
    background: #10b981 !important;
    /* Emerald Green */
    color: #ffffff !important;
}

.energy-label-b,
[class*="energy-label-b"] {
    background: #22c55e !important;
    /* Green */
    color: #ffffff !important;
}

.energy-label-c,
[class*="energy-label-c"] {
    background: #84cc16 !important;
    /* Lime Green */
    color: #000000 !important;
}

.energy-label-d,
[class*="energy-label-d"] {
    background: #eab308 !important;
    /* Yellow */
    color: #000000 !important;
}

.energy-label-e,
[class*="energy-label-e"] {
    background: #f59e0b !important;
    /* Orange */
    color: #ffffff !important;
}

.energy-label-f,
[class*="energy-label-f"] {
    background: #ef4444 !important;
    /* Red */
    color: #ffffff !important;
}

.energy-label-g,
[class*="energy-label-g"] {
    background: #dc2626 !important;
    /* Dark Red - Worst */
    color: #ffffff !important;
}

/* Variations List Styling */
.variation-item {
    margin-bottom: 0.25rem !important;
    line-height: 1.5 !important;
}

.variation-item strong {
    color: var(--hdp-gray-900, #111827) !important;
    font-weight: 600 !important;
}

.variation-values {
    color: var(--hdp-gray-700, #374151) !important;
}

.variation-value {
    display: inline !important;
}

/* Delivery Status in Slider */
.item-delivery-status {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    min-height: 32px !important;
    display: block !important;
}

.item-delivery-status.delivery-status {
    min-height: 43px !important;
}

/* Delivery Time on New Line */
.item-delivery-status .estimated_delivery {
    display: block !important;
    margin-top: 0.25rem !important;
    line-height: 1.4 !important;
}

.item-delivery-status .signal_image {
    display: block !important;
    margin-bottom: 0.25rem !important;
}

/* Button Styling */
.productbox-buy-button {
    margin-top: auto !important;
    margin-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
}

.productbox-buy-button .btn-block {
    width: 100% !important;
    display: block !important;
}

/* Ensure button text is visible */
.productbox-buy-button .btn,
.productbox-buy-button button,
.productbox-buy-button a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    padding: 0.625rem 1rem !important;
}

/* Subtle Button hover effects */
.productbox-buy-button .btn:hover,
.productbox-buy-button button:hover,
.productbox-buy-button a:hover {
    background-color: #0a7bb8 !important;
    border-color: #0a7bb8 !important;
    color: #ffffff !important;
    /* No transform - keep it subtle */
}

/* Price Styling - Same for category page and all sliders */
.item-slider-price,
.product-wrapper-product .item-slider-price,
.productbox.productbox-column .item-slider-price,
.box-slider .item-slider-price,
.carousel .item-slider-price,
.slick-slider .item-slider-price,
.slick-type-box .item-slider-price,
.slick-type-product .item-slider-price,
.slick-type-half .item-slider-price {
    margin-bottom: 0.5rem !important;
    margin-top: 0.25rem !important;
    font-weight: 600 !important;
}

/* Result Wrapper Title Spacing */
#result-wrapper .title {
    margin-bottom: 5px !important;
}

/* Reduce Product Box Height - Make Plugin Boxes Smaller */
.productbox.productbox-column {
    padding: 0.75rem !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

.productbox-inner {
    gap: 0.25rem !important;
}

/* Reduce spacing in product box elements - Same for category page and all sliders */
.productbox-title,
.item-slider-desc,
.productbox.productbox-column .productbox-title,
.product-wrapper-product .productbox-title,
.box-slider .item-slider-desc,
.carousel .item-slider-desc,
.slick-slider .item-slider-desc,
.slick-type-box .item-slider-desc,
.slick-type-product .item-slider-desc,
.slick-type-half .item-slider-desc {
    margin-bottom: 0.25rem !important;
    min-height: 3em !important;
    flex-shrink: 0 !important;
}

/* Consistent spacing for all product box elements - Same for category page and all sliders */
.item-box-description,
.productbox.productbox-column .item-box-description,
.product-wrapper-product .item-box-description,
.box-slider .item-box-description,
.carousel .item-box-description,
.slick-slider .item-box-description {
    margin-bottom: 0.25rem !important;
    margin-top: 0.125rem !important;
    min-height: 2rem !important;
}

.energy-label-wrapper,
.productbox.productbox-column .energy-label-wrapper,
.product-wrapper-product .energy-label-wrapper,
.box-slider .energy-label-wrapper,
.carousel .energy-label-wrapper,
.slick-slider .energy-label-wrapper {
    margin-bottom: 0.25rem !important;
    margin-top: 0.125rem !important;
    min-height: 20px !important;
}

.item-delivery-status,
.productbox.productbox-column .item-delivery-status,
.product-wrapper-product .item-delivery-status,
.box-slider .item-delivery-status,
.carousel .item-delivery-status,
.slick-slider .item-delivery-status {
    margin-bottom: 0.25rem !important;
    margin-top: 0.25rem !important;
    min-height: 43px !important;
}

.item-delivery-status.delivery-status {
    min-height: 43px !important;
}

/* Consistent price spacing - Same for category page and all sliders */
.item-slider-price,
.productbox.productbox-column .item-slider-price,
.product-wrapper-product .item-slider-price,
.box-slider .item-slider-price,
.carousel .item-slider-price,
.slick-slider .item-slider-price {
    margin-bottom: 0.25rem !important;
    margin-top: 0.125rem !important;
}

/* Reduce spacing between price and button in product box sliders */
.slick-slider .item-slider-price,
.box-slider .item-slider-price,
.carousel .item-slider-price,
.product-wrapper-product .item-slider-price,
.slick-type-box .item-slider-price,
.slick-type-product .item-slider-price,
.slick-type-half .item-slider-price {
    margin-bottom: 0.125rem !important;
}

.slick-slider .productbox-buy-button,
.box-slider .productbox-buy-button,
.carousel .productbox-buy-button,
.product-wrapper-product .productbox-buy-button,
.slick-type-box .productbox-buy-button,
.slick-type-product .productbox-buy-button,
.slick-type-half .productbox-buy-button {
    margin-top: 0 !important;
    padding-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
}

/* Image container min-height for consistency */
.item-slider.productbox-image,
.product-wrapper-product .item-slider.productbox-image,
.productbox.productbox-column .productbox-image,
.box-slider .productbox-image,
.carousel .productbox-image,
.slick-slider .productbox-image {
    min-height: 200px !important;
    flex-shrink: 0 !important;
}

/* Buy button min-height for consistency */
.productbox-buy-button,
.product-wrapper-product .productbox-buy-button,
.productbox.productbox-column .productbox-buy-button,
.box-slider .productbox-buy-button,
.carousel .productbox-buy-button,
.slick-slider .productbox-buy-button {
    min-height: 44px !important;
    flex-shrink: 0 !important;
}

/* Tablet View - Price min-height */
@media (min-width: 768px) and (max-width: 1024px) {
    .price.productbox-price {
        min-height: 50px !important;
    }
}

.productbox-buy-button {
    margin-top: auto !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
}

/* Fix second image positioning in product boxes */
.productbox-images.list-gallery {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    min-height: 200px !important;
    display: block !important;
    height: auto !important;
}

/* Ensure productbox-image container doesn't cause positioning issues and ribbon appears above */
.productbox-image {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
}

/* Ensure badge container allows overflow for badge visibility */
.productbox-images.list-gallery .productbox-image.first-wrapper,
.productbox-images.list-gallery .productbox-image.second-wrapper {
    overflow: visible !important;
}

.productbox-image .ribbon,
.productbox-image .ribbon-8,
.productbox-image .productbox-ribbon {
    z-index: 30 !important;
    position: absolute !important;
}

/* Second image wrapper - absolutely positioned to overlay first image perfectly */
.productbox-images.list-gallery .productbox-image.second-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* First image wrapper - relative positioning */
.productbox-images.list-gallery .productbox-image.first-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Show second image on hover - Clean implementation */
.productbox-images.list-gallery:hover .productbox-image.second-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
    pointer-events: auto !important;
}

.productbox-images.list-gallery:hover .productbox-image.first-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
}

/* Image transitions handled by wrapper-based hover - img tags inherit from wrapper */

/* Ensure both images maintain same dimensions and proper alignment - Centered */
.productbox-images.list-gallery .productbox-image.second-wrapper .inner,
.productbox-images.list-gallery .productbox-image.first-wrapper .inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Second image inner container - must align perfectly with first */
.productbox-images.list-gallery .productbox-image.second-wrapper .inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.productbox-images.list-gallery .productbox-image.second-wrapper img,
.productbox-images.list-gallery .productbox-image.first-wrapper img,
.productbox-images.list-gallery .productbox-image.second-wrapper picture,
.productbox-images.list-gallery .productbox-image.first-wrapper picture {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: top !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure inner container picture and img are centered and positioned correctly */
.productbox-images.list-gallery .productbox-image .inner picture,
.productbox-images.list-gallery .productbox-image .inner img {
    margin: 0 auto !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}

/* Image transitions handled by wrapper-based hover above - removed duplicate styles */

/* Ensure sidebar is visible */
aside,
.sidepanel-left,
.productlist-filter,
.has-left-sidebar aside,
.has-left-sidebar .sidepanel-left {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure product images display correctly */
.productbox-images.list-gallery img,
.productbox-images.list-gallery picture {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.productbox-images.list-gallery .productbox-image.first-wrapper img,
.productbox-images.list-gallery .productbox-image.first-wrapper picture {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix ribbon badge z-index and color - ensure it appears above images - Smaller width, button color */
/* Override conflicting .product-list .ribbon rule with higher specificity - Higher z-index for badge */
.product-list .ribbon,
.product-list .ribbon-8,
.product-list .productbox-ribbon,
.ribbon,
.ribbon-8,
.productbox-ribbon {
    z-index: 100 !important;
    position: absolute !important;
    top: 0.25rem !important;
    left: 0.25rem !important;
    right: auto !important;
    background-color: #374151 !important;
    color: #ffffff !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 3px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    max-width: fit-content !important;
}

/* Ensure ribbon is positioned correctly within productbox-image - Higher z-index, positioned from left */
.productbox-image .ribbon,
.productbox-image .ribbon-8,
.productbox-image .productbox-ribbon,
.productbox-images .ribbon,
.productbox-images .ribbon-8,
.productbox-images .productbox-ribbon,
.product-list .productbox-image .ribbon,
.product-list .productbox-image .ribbon-8,
.product-list .productbox-image .productbox-ribbon,
.product-list .productbox-images .ribbon,
.product-list .productbox-images .ribbon-8,
.product-list .productbox-images .productbox-ribbon {
    z-index: 100 !important;
    position: absolute !important;
    top: 0.25rem !important;
    left: 0.25rem !important;
    right: auto !important;
    background-color: #374151 !important;
    color: #ffffff !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 3px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    max-width: fit-content !important;
}

/* Ensure parent containers don't clip the badge - allow badge to overflow */
.product-wrapper,
.product-wrapper-product,
.productbox.productbox-column {
    overflow: visible !important;
}

/* Ensure badge is positioned correctly and not clipped - positioned from left */
.productbox-images.list-gallery .productbox-image .ribbon,
.productbox-images.list-gallery .productbox-image .ribbon-8,
.productbox-images.list-gallery .productbox-image .productbox-ribbon {
    left: 0.25rem !important;
    right: auto !important;
}

/* Hide product variations list from product boxes */
.productbox-variations-list,
.productbox .productbox-variations-list,
.product-list .productbox-variations-list {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.productbox-image[data-target],
.productbox-image[aria-expanded="true"],
.productbox-image[aria-expanded="false"] {
    outline: none !important;
    border: none !important;
}

.productbox-image[aria-expanded="true"],
.productbox-image:focus,
.productbox-image:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove yellow color on productbox-image select/active */
.productbox-image:focus,
.productbox-image:active,
.productbox-image[aria-expanded="true"],
.productbox-image[aria-expanded="false"],
.productbox:focus,
.productbox:active,
.product-wrapper:focus,
.product-wrapper:active,
#result-wrapper_buy_form:focus,
#result-wrapper_buy_form:active,
[data-wrapper="true"]:focus,
[data-wrapper="true"]:active,
.productbox.productbox-column:focus,
.productbox.productbox-column:active,
.productbox.productbox-hover:focus,
.productbox.productbox-hover:active {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent yellow background/border on product box selection */
.productbox:focus,
.productbox:active,
.productbox.selected,
.productbox:focus-within,
.product-wrapper:focus,
.product-wrapper:active,
.product-wrapper.selected,
.product-wrapper:focus-within,
[data-wrapper="true"]:focus,
[data-wrapper="true"]:active,
[data-wrapper="true"].selected,
[data-wrapper="true"]:focus-within,
#result-wrapper_buy_form:focus,
#result-wrapper_buy_form:active,
#result-wrapper_buy_form:focus-within {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Removed - This rule was too aggressive and broke form elements, buttons, and inputs inside product boxes */

.productbox-image:focus *,
.productbox-image:active *,
.productbox-image[aria-expanded="true"] *,
.productbox-image[aria-expanded="false"] * {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Override any yellow background from parent theme */
.productbox-image[data-target]:focus,
.productbox-image[data-target]:active,
.productbox-image[data-target][aria-expanded="true"] {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Ensure no yellow border/background on variations collapse trigger */
.productbox-image[data-target="#variations-collapse"]:focus,
.productbox-image[data-target*="variations-collapse"]:focus,
.productbox-image[data-target="#variations-collapse"]:active,
.productbox-image[data-target*="variations-collapse"]:active,
.productbox-image[data-target="#variations-collapse"][aria-expanded="true"],
.productbox-image[data-target*="variations-collapse"][aria-expanded="true"] {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Energy Label Dual Layout */
.energy-label-wrapper {
    margin-bottom: 0.5rem !important;
    margin-top: 0.25rem !important;
    min-height: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.energy-label-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

.energy-label-text {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
    min-width: 180px !important;
    text-align: left !important;
}
/* Force Energy Label Left Alignment */
.product-detail .energy-label-wrapper,
.energy-label-wrapper {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-detail-info-col {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}


/* Mobile Energy Label Row Layout */
@media (max-width: 767.98px) {
    .energy-label-wrapper {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .energy-label-item {
        width: auto !important;
    }
    
    .energy-label-text {
        min-width: 0 !important;
        width: auto !important;
    }
}


/* Product Boxes Energy Label Row Layout */
.productbox .energy-label-wrapper,
.product-wrapper-product .energy-label-wrapper,
.box-slider .energy-label-wrapper,
.carousel .energy-label-wrapper,
.slick-slider .energy-label-wrapper {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
}


/* Product Warranty Badge */
.product-warranty-badge {
    padding: 12px 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.product-warranty-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}