:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Font Family Utilities */
.font-family-cardo {
    font-family: "Cardo", serif !important;
}

/* Header Navigation Fixes - Only for desktop navigation, not mobile menu */
header .hidden.lg\:block nav {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

header .hidden.lg\:block nav a {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    color: #3B4E65 !important;
}

header .hidden.lg\:block nav a:hover {
    text-decoration: none !important;
    color: #157DB0 !important;
}

/* Override for header icon links (not nav links) */
header .flex.items-center.gap-\[24px\] a {
    color: #3B4E65 !important;
}

header .flex.items-center.gap-\[24px\] a:hover {
    color: #157DB0 !important;
}

.no-underline {
    text-decoration: none !important;
}

/* Mobile menu category buttons - no background */
header nav button {
    background: transparent !important;
    border: none !important;
}

/* Header Icons - Only for icon buttons (w-6 h-6), not mobile menu buttons */
header button.w-6,
header a[class*="w-6"],
header .flex.items-center button,
header .flex.items-center a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3B4E65 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

header button.w-6:hover,
header a[class*="w-6"]:hover {
    color: #157DB0 !important;
    background: transparent !important;
}

header button.w-6 svg,
header a[class*="w-6"] svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* Don't force display on SVGs that use x-show (Alpine.js) */
header button.w-6 svg:not([x-show]) {
    display: block !important;
}

/* Specifiek voor header right icons */
header .flex.items-center.gap-\[24px\] button,
header .flex.items-center.gap-\[24px\] a {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

/* Color Utilities */
.text-secondary {
    color: #3B4E65 !important;
}

.text-primary {
    color: #157DB0 !important;
}

/* Category filter buttons - override all conflicting styles */
button[class*="border-tertiary"] {
    background-color: transparent;
    color: #3B4E65;
    border-color: #1b202d !important;
}

button[class*="border-tertiary"].bg-tertiary {
    background-color: #1b202d !important;
    color: white !important;
    border-color: #1b202d !important;
}

button[class*="border-tertiary"]:hover {
    background-color: #1b202d !important;
    color: white !important;
    border-color: #1b202d !important;
}

.text-sale {
    color: #F03B50 !important;
}

.bg-sale\/15 {
    background-color: rgba(240, 59, 80, 0.15) !important;
}

.bg-sale\/25 {
    background-color: rgba(240, 59, 80, 0.25) !important;
}

/* Background Colors */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-white\/30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Footer Styling */
footer {
    width: 100% !important;
}

footer a {
    text-decoration: none !important;
    color: white !important;
}

footer a:visited {
    color: white !important;
}

footer a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer .text-white,
footer h3,
footer h4 {
    color: white !important;
}

/* Specific Tailwind color overrides */
.bg-\[\#157db0\] {
    background-color: #157db0 !important;
}

.bg-\[\#3b4e65\] {
    background-color: #3b4e65 !important;
}

.bg-\[\#1b202d\] {
    background-color: #1b202d !important;
}

.text-\[\#3b4e65\] {
    color: #3b4e65 !important;
}

/* Hero Section */
.hero-section h2 {
    color: white !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: 1.75rem !important;
}

@media (min-width: 768px) {
    .hero-section h2 {
        font-size: 64px !important;
    }
}

/* USP Section - Force white text */
section.relative h2.text-white {
    color: white !important;
}

/* Hero Cards */
.bg-tertiary {
    background-color: #1b202d !important;
}

.bg-tertiary\/25 {
    background-color: rgba(27, 32, 45, 0.25) !important;
}

.bg-tertiary\/40 {
    background-color: rgba(27, 32, 45, 0.40) !important;
}

.bg-tertiary\/90 {
    background-color: rgba(27, 32, 45, 0.90) !important;
}

.text-tertiary {
    color: #1b202d !important;
}

.bg-season {
    background-color: #AC7D94 !important;
}

/* Utility classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom width/height for category images */
.w-31 {
    width: 124px !important;
}

.h-31 {
    height: 124px !important;
}

/* Custom width/height for color swatches */
.w-4\.5 {
    width: 18px !important;
}

.h-4\.5 {
    height: 18px !important;
}

@media (min-width: 768px) {
    .md\:w-45 {
        width: 180px !important;
    }

    .md\:h-45 {
        height: 180px !important;
    }
}

/* Category carousel visibility */
.categories-carousel.hidden {
    display: none !important;
}

.container {
    max-width: 1211px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .md\:container {
        max-width: 1211px;
        margin: 0 auto;
        padding: 0 20px;
    }
}

/* Range Slider Styles */
.slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 4px;
}

.slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #157DB0;
    cursor: pointer;
    border: none;
    box-shadow: none;
    transition: all 0.2s ease;
    margin-top: -4px;
    position: relative;
}

.slider-thumb::-webkit-slider-thumb:hover {
    background: #0f6b9a;
}

.slider-thumb::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #157DB0;
    cursor: pointer;
    border: none;
    box-shadow: none;
    transition: all 0.2s ease;
    margin-top: -4px;
}

.slider-thumb::-moz-range-thumb:hover {
    background: #0f6b9a;
}

.slider-thumb::-webkit-slider-track {
    background: transparent;
    height: 4px;
    border-radius: 2px;
}

.slider-thumb::-moz-range-track {
    background: transparent;
    height: 4px;
    border-radius: 2px;
}

/* Mobile Filters Overlay */
.mobile-filters-overlay {
    display: none;
}

.filters-panel {
    height: 555px;
    border-radius: 0 0 0 4px
}

/* Prevent body scroll when mobile filters are open */
body.mobile-filters-bar-open {
    overflow: hidden;

    .mobile-filters-overlay {
        display: block;
    }
}

/* Product Image Quality - Fix blurry/pixelated images in Owl Carousel */
.products-carousel .owl-item,
.products-carousel .item,
.products-carousel img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -webkit-font-smoothing: subpixel-antialiased;
}

.products-carousel img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;

    /* Force hardware acceleration */
    will-change: transform;
}

/* Archive Color Swatches (from plugin, made available globally) */
.archive-color-swatches {
    margin-top: 8px;
    margin-bottom: 5px;
}

.swatch-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #666;
}

.color-swatches-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    padding: 2px;
    box-sizing: border-box;
}

.color-swatch:hover {
    border-color: #3B4E65;
    transform: scale(1.15);
    z-index: 10;
}

.swatch-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Tooltip on hover */
.color-swatch::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.color-swatch:hover::after {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .color-swatch {
        width: 16px;
        height: 16px;
    }

    .swatch-label {
        font-size: 11px;
    }
}

/* Diagonal Strike-through for prices */
.diagonal-strike {
    display: inline-block;
    position: relative;
}

.diagonal-strike:before {
    background: var(--strike-color, #AC7D94);
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: rotate(-11deg) translateY(-50%);
    width: 100%;
}

@media (min-width: 1024px) {
    .md\:container {
        max-width: 1211px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .reviews-carousel {
        .owl-item {
            display: flex;
            margin: 5px 0px;
        }
    }

}