/* Custom checkbox styling for dark theme */
.filter-checkbox-origin,
.filter-checkbox-color,
.filter-checkbox-application {
    accent-color: #D4AF37;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.filter-checkbox-origin:checked,
.filter-checkbox-color:checked,
.filter-checkbox-application:checked {
    background-color: #D4AF37;
    border-color: #D4AF37;
}

/* Filter toggle button styling */
.filter-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    outline: none;
}
.filter-toggle:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}

.filter-content {
    transition: all 0.3s ease-in-out;
}

.filter-content.hidden {
    display: none;
}

/* Scrollbar styling for filter boxes */
.filter-content::-webkit-scrollbar {
    width: 6px;
}

.filter-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.filter-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 3px;
}

.filter-content::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.7);
}

/* Product card link - focus visible (WCAG 2.4.7) */
.product-card a:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}
.product-card a:focus-visible .absolute.inset-0.border-2 {
    border-color: #D4AF37 !important;
}

/* Product card overlay - ALL text white with strong dark shadow (works on any background) */
.product-card .absolute.inset-0.flex,
.product-card .absolute.inset-0.flex h3,
.product-card .absolute.inset-0.flex p,
.product-card .absolute.inset-0.flex span,
.product-card .absolute.inset-0.flex div {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Product card overlay - MQ code - soluk beyaz */
.product-card .absolute.inset-0.flex .text-marque-gold {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Kategori açıklaması - Premium renkler */
.category-description-text {
    color: #C0C0C0; /* Parlak silver rengi - Dark mode */
    font-family: var(--site-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Kategori açıklaması - Light mode için premium renk */
body.theme-light .category-description-text {
    color: #8B7355 !important; /* Koyu bronz/altın tonu - Light mode */
}

/* Collection description section - Premium renkler */
/* Grid'e margin-bottom ekle - yazıyı aşağı taşımak için */
#products-grid {
    margin-bottom: 1.5rem !important; /* 6 * 0.25rem = 1.5rem - Mobile */
}

@media (min-width: 768px) {
    #products-grid {
        margin-bottom: 2rem !important; /* 8 * 0.25rem = 2rem - Tablet */
    }
}

@media (min-width: 1024px) {
    #products-grid {
        margin-bottom: 2.5rem !important; /* 10 * 0.25rem = 2.5rem - Desktop */
    }
}

/* Yazının üst ve alt padding'ini azalt */
.collection-description-section {
    padding-top: 0.5rem !important; /* 2 * 0.25rem = 0.5rem */
    padding-bottom: 0.25rem !important; /* 1 * 0.25rem = 0.25rem */
}

.collection-description-text {
    color: #C0C0C0; /* Parlak silver rengi - Dark mode */
    font-family: var(--site-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Collection description - Light mode için premium renk */
body.theme-light .collection-description-text {
    color: #8B7355 !important; /* Koyu bronz/altın tonu - Light mode */
}

/* Animation classes */
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

.slide-up {
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-up.visible {
    transform: translateY(0);
}

/* Filter arrow rotation */
.filter-arrow-rotated {
    transform: rotate(180deg);
}

/* Collection Hero: Inter Font and About page font sizes */
/* Target hero section in collection page - override font classes and Tailwind text sizes */
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.font-playfair,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-4xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-5xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-6xl,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-7xl {
    font-size: 1.1875rem !important; /* 19px - mobile */
    font-weight: 300 !important;
}

@media (min-width: 640px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-5xl {
        font-size: 1.375rem !important; /* 22px - sm */
    }
}

@media (min-width: 768px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-6xl {
        font-size: 1.625rem !important; /* 26px - md */
    }
}

@media (min-width: 1024px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-7xl {
        font-size: 2.0625rem !important; /* 33px - lg */
    }
}

@media (min-width: 1280px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black h1.text-7xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-4xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-5xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-6xl,
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black div.font-inter.text-7xl {
        font-size: 2.5rem !important; /* 40px - xl */
    }
}

section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.font-manrope,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-base,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p.text-lg {
    font-size: 1rem !important; /* text-base - mobile */
}

@media (min-width: 768px) {
    section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black p {
        font-size: 1.125rem !important; /* text-lg - md */
    }
}

/* Collections Coming Soon: Inter font and About page font sizes */
main.pt-24 h1,
main.pt-24 h1.font-playfair {
    font-size: 1.1875rem !important; /* 19px - mobile */
    font-weight: 300 !important;
}

@media (min-width: 640px) {
    main.pt-24 h1 {
        font-size: 1.375rem !important; /* 22px - sm */
    }
}

@media (min-width: 768px) {
    main.pt-24 h1 {
        font-size: 1.625rem !important; /* 26px - md */
    }
}

@media (min-width: 1024px) {
    main.pt-24 h1 {
        font-size: 2.0625rem !important; /* 33px - lg */
    }
}

@media (min-width: 1280px) {
    main.pt-24 h1 {
        font-size: 2.5rem !important; /* 40px - xl */
    }
}

main.pt-24 p,
main.pt-24 p.font-inter {
    font-size: 1rem !important; /* text-base - mobile */
}

@media (min-width: 768px) {
    main.pt-24 p {
        font-size: 1.125rem !important; /* text-lg - md */
    }
}

@media (min-width: 1024px) {
    main.pt-24 p {
        font-size: 1.25rem !important; /* text-xl - lg */
    }
}

.filter-arrow-normal {
    transform: rotate(0deg);
}

/* Display utilities */
.hidden-display {
    display: none !important;
}

.block-display {
    display: block !important;
}

.grid-display {
    display: grid !important;
}

/* Collection Page: Apply Inter font to ALL content */
body:has(#products-grid),
#products-grid,
#products-grid *,
.product-card,
.product-card *,
.filter-group,
.filter-group *,
.filter-toggle,
.filter-content,
.filter-content *,
.category-description,
.category-description *,
.category-description-text,
.category-description-text *,
section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black,
/* Font family now managed by CSS variable */

/* Font classes now managed by CSS variable - no need for overrides */

/* =================================
   Collection Hero - Light Theme Text Colors
   ================================= */

/* Collection hero text - Light temada beyaz (Projects hero gibi) */
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) h1,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) h1.text-white,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) h1,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) h1.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero) h1.text-white,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) div.font-inter.text-white,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) div.font-inter.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero) div.font-inter.text-white,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p.text-white,
body.theme-light section.relative.min-h-\[44vh\].bg-marque-black:not(.projects-hero) p.text-white\/70,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p.text-white,
body.theme-light section.relative.min-h-\[44vh\].md\:min-h-\[53vh\].bg-marque-black:not(.projects-hero) p.text-white\/70,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero) p.text-white,
body.theme-light section.relative[class*="min-h"].bg-marque-black:not(.projects-hero) p.text-white\/70 {
    color: rgba(255, 255, 255, 0.95) !important; /* Off-white */
    text-shadow: none !important; /* Gölge yok */
}

/* =================================
   Collection Filters - Light Theme Text Colors
   ================================= */

/* Filter toggle buttons - Light theme - MAXIMUM SPECIFICITY - Target Tailwind utility classes directly */
/* Target button and all its children including spans */
html body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"],
html body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"] *,
html body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"] span,
html body.theme-light section.bg-marque-black .filter-toggle.text-white\/60,
html body.theme-light section.bg-marque-black .filter-toggle.text-white\/60 *,
html body.theme-light section.bg-marque-black .filter-toggle.text-white\/60 span,
html body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"],
html body.theme-light section.bg-marque-black button.filter-toggle,
html body.theme-light section.bg-marque-black button.filter-toggle *,
html body.theme-light section.bg-marque-black button.filter-toggle span,
html body.theme-light section.bg-marque-black .filter-toggle,
html body.theme-light section.bg-marque-black .filter-toggle *,
html body.theme-light section.bg-marque-black .filter-toggle span,
body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"],
body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"] *,
body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"] span,
body.theme-light section.bg-marque-black .filter-toggle.text-white\/60,
body.theme-light section.bg-marque-black .filter-toggle.text-white\/60 *,
body.theme-light section.bg-marque-black .filter-toggle.text-white\/60 span,
body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white/60"],
body.theme-light section.bg-marque-black button.filter-toggle,
body.theme-light section.bg-marque-black button.filter-toggle *,
body.theme-light section.bg-marque-black button.filter-toggle span,
body.theme-light section.bg-marque-black .filter-toggle,
body.theme-light section.bg-marque-black .filter-toggle *,
body.theme-light section.bg-marque-black .filter-toggle span,
body.theme-light .filter-toggle.text-white\/60,
body.theme-light .filter-toggle.text-white\/60 *,
body.theme-light .filter-toggle.text-white\/60 span,
body.theme-light button.filter-toggle.text-white\/60,
body.theme-light button.filter-toggle.text-white\/60 *,
body.theme-light button.filter-toggle.text-white\/60 span,
body.theme-light .filter-toggle[class*="text-white"],
body.theme-light .filter-toggle[class*="text-white/60"],
body.theme-light .filter-toggle span,
body.theme-light button.filter-toggle span {
    color: rgba(17, 24, 39, 0.85) !important; /* Darker gray for better visibility */
}

html body.theme-light section.bg-marque-black .filter-toggle:hover,
html body.theme-light section.bg-marque-black button.filter-toggle:hover,
html body.theme-light section.bg-marque-black .filter-toggle.hover\:text-white:hover,
html body.theme-light section.bg-marque-black button.filter-toggle.hover\:text-white:hover,
html body.theme-light section.bg-marque-black .filter-toggle:hover span,
html body.theme-light section.bg-marque-black button.filter-toggle:hover span,
html body.theme-light section.bg-marque-black .filter-toggle.hover\:text-white:hover span,
html body.theme-light section.bg-marque-black button.filter-toggle.hover\:text-white:hover span,
body.theme-light section.bg-marque-black .filter-toggle:hover,
body.theme-light section.bg-marque-black button.filter-toggle:hover,
body.theme-light section.bg-marque-black .filter-toggle.hover\:text-white:hover,
body.theme-light section.bg-marque-black button.filter-toggle.hover\:text-white:hover,
body.theme-light section.bg-marque-black .filter-toggle:hover span,
body.theme-light section.bg-marque-black button.filter-toggle:hover span,
body.theme-light section.bg-marque-black .filter-toggle.hover\:text-white:hover span,
body.theme-light section.bg-marque-black button.filter-toggle.hover\:text-white:hover span,
body.theme-light .filter-toggle:hover,
body.theme-light .filter-toggle.hover\:text-white:hover,
body.theme-light button.filter-toggle:hover,
body.theme-light .filter-toggle:hover span,
body.theme-light button.filter-toggle:hover span {
    color: rgba(17, 24, 39, 0.95) !important; /* Darker on hover for better visibility */
}

/* Filter toggle SVG arrows - Light theme - Match text color */
html body.theme-light section.bg-marque-black .filter-toggle svg,
html body.theme-light section.bg-marque-black button.filter-toggle svg,
html body.theme-light section.bg-marque-black .filter-toggle[class*="text-white"] svg,
html body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white"] svg,
body.theme-light section.bg-marque-black .filter-toggle svg,
body.theme-light section.bg-marque-black button.filter-toggle svg,
body.theme-light section.bg-marque-black .filter-toggle[class*="text-white"] svg,
body.theme-light section.bg-marque-black button.filter-toggle[class*="text-white"] svg,
body.theme-light .filter-toggle svg {
    color: rgba(17, 24, 39, 0.85) !important; /* Match text color - darker */
    stroke: rgba(17, 24, 39, 0.85) !important;
}

html body.theme-light section.bg-marque-black .filter-toggle:hover svg,
html body.theme-light section.bg-marque-black button.filter-toggle:hover svg,
body.theme-light section.bg-marque-black .filter-toggle:hover svg,
body.theme-light section.bg-marque-black button.filter-toggle:hover svg,
body.theme-light .filter-toggle:hover svg {
    color: rgba(17, 24, 39, 0.95) !important; /* Darker on hover */
    stroke: rgba(17, 24, 39, 0.95) !important;
}

/* Filter content boxes - Light theme backgrounds and borders */
html body.theme-light section.bg-marque-black .filter-content,
body.theme-light section.bg-marque-black .filter-content,
body.theme-light .filter-content.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.95) !important; /* Light background */
    border-color: rgba(0, 0, 0, 0.1) !important; /* Light border */
}

/* Filter option labels - Light theme - MAXIMUM SPECIFICITY - Target Tailwind utility classes directly */
html body.theme-light section.bg-marque-black .filter-content span.text-white,
html body.theme-light section.bg-marque-black .filter-content label span.text-white,
html body.theme-light section.bg-marque-black .filter-content .text-white,
html body.theme-light section.bg-marque-black .filter-content label .text-white,
body.theme-light section.bg-marque-black .filter-content span.text-white,
body.theme-light section.bg-marque-black .filter-content label span.text-white,
body.theme-light section.bg-marque-black .filter-content .text-white,
body.theme-light section.bg-marque-black .filter-content label .text-white,
body.theme-light .filter-content span.text-white,
body.theme-light .filter-content .text-white,
body.theme-light .filter-content label span.text-white {
    color: rgba(17, 24, 39, 0.95) !important; /* Very dark for labels - maximum contrast */
}

html body.theme-light section.bg-marque-black .filter-content label:hover span.text-white,
html body.theme-light section.bg-marque-black .filter-content .group:hover .text-white,
html body.theme-light section.bg-marque-black .filter-content label.group:hover span.text-white,
body.theme-light section.bg-marque-black .filter-content label:hover span.text-white,
body.theme-light section.bg-marque-black .filter-content .group:hover .text-white,
body.theme-light section.bg-marque-black .filter-content label.group:hover span.text-white,
body.theme-light .filter-content label:hover span.text-white,
body.theme-light .filter-content .group:hover .text-white,
body.theme-light .filter-content label.group:hover span.text-white {
    color: #D4AF37 !important; /* Keep gold hover effect */
}

/* Filter checkbox borders - Light theme */
html body.theme-light section.bg-marque-black .filter-content input[type="checkbox"],
body.theme-light section.bg-marque-black .filter-content input[type="checkbox"],
body.theme-light .filter-content input[type="checkbox"].border-white\/30 {
    border-color: rgba(0, 0, 0, 0.2) !important; /* Light border */
}

/* Filter "no items" messages - Light theme - Target Tailwind utility classes directly */
html body.theme-light section.bg-marque-black .filter-content p.text-white\/40,
html body.theme-light section.bg-marque-black .filter-content p.text-white\/50,
html body.theme-light section.bg-marque-black .filter-content p[class*="text-white/40"],
html body.theme-light section.bg-marque-black .filter-content p[class*="text-white/50"],
html body.theme-light section.bg-marque-black .filter-content .text-white\/40,
html body.theme-light section.bg-marque-black .filter-content .text-white\/50,
html body.theme-light section.bg-marque-black .filter-content [class*="text-white/40"],
html body.theme-light section.bg-marque-black .filter-content [class*="text-white/50"],
body.theme-light section.bg-marque-black .filter-content p.text-white\/40,
body.theme-light section.bg-marque-black .filter-content p.text-white\/50,
body.theme-light section.bg-marque-black .filter-content p[class*="text-white/40"],
body.theme-light section.bg-marque-black .filter-content p[class*="text-white/50"],
body.theme-light section.bg-marque-black .filter-content .text-white\/40,
body.theme-light section.bg-marque-black .filter-content .text-white\/50,
body.theme-light section.bg-marque-black .filter-content [class*="text-white/40"],
body.theme-light section.bg-marque-black .filter-content [class*="text-white/50"],
body.theme-light .filter-content p.text-white\/40,
body.theme-light .filter-content p.text-white\/50,
body.theme-light .filter-content .text-white\/40,
body.theme-light .filter-content .text-white\/50 {
    color: rgba(17, 24, 39, 0.65) !important; /* Darker gray for better visibility */
}

/* Clear filters button - Light theme - Target Tailwind utility classes directly */
html body.theme-light section.bg-marque-black button#clear-filters.text-white,
html body.theme-light section.bg-marque-black button#clear-filters[class*="text-white"],
html body.theme-light section.bg-marque-black #clear-filters.text-white,
html body.theme-light section.bg-marque-black #clear-filters[class*="text-white"],
html body.theme-light section.bg-marque-black button#clear-filters,
html body.theme-light section.bg-marque-black #clear-filters,
body.theme-light section.bg-marque-black button#clear-filters.text-white,
body.theme-light section.bg-marque-black button#clear-filters[class*="text-white"],
body.theme-light section.bg-marque-black #clear-filters.text-white,
body.theme-light section.bg-marque-black #clear-filters[class*="text-white"],
body.theme-light section.bg-marque-black button#clear-filters,
body.theme-light section.bg-marque-black #clear-filters,
body.theme-light button#clear-filters.text-white,
body.theme-light #clear-filters.text-white {
    color: rgba(17, 24, 39, 0.95) !important; /* Very dark gray for maximum contrast */
    background-color: rgba(17, 24, 39, 0.08) !important; /* Light background */
    border-color: rgba(17, 24, 39, 0.2) !important; /* Light border */
}

html body.theme-light section.bg-marque-black button#clear-filters:hover,
html body.theme-light section.bg-marque-black #clear-filters:hover,
body.theme-light section.bg-marque-black button#clear-filters:hover,
body.theme-light section.bg-marque-black #clear-filters:hover,
body.theme-light button#clear-filters:hover,
body.theme-light #clear-filters:hover {
    color: rgba(26, 26, 26, 1) !important; /* Full dark on hover */
    background-color: rgba(26, 26, 26, 0.15) !important; /* Slightly darker background */
    border-color: rgba(26, 26, 26, 0.3) !important; /* Darker border */
}

/* Filter section border - Light theme */
html body.theme-light section.bg-marque-black.border-white\/10,
body.theme-light section.bg-marque-black.border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important; /* Light border */
}

/* No results text - Light theme */
html body.theme-light section.bg-marque-black #no-results p.text-white\/60,
html body.theme-light section.bg-marque-black #no-results p[class*="text-white/60"],
html body.theme-light section.bg-marque-black #no-results .text-white\/60,
html body.theme-light section.bg-marque-black #no-results [class*="text-white/60"],
body.theme-light section.bg-marque-black #no-results p.text-white\/60,
body.theme-light section.bg-marque-black #no-results p[class*="text-white/60"],
body.theme-light section.bg-marque-black #no-results .text-white\/60,
body.theme-light section.bg-marque-black #no-results [class*="text-white/60"],
body.theme-light #no-results p.text-white\/60,
body.theme-light #no-results .text-white\/60 {
    color: rgba(17, 24, 39, 0.75) !important; /* Darker gray for better visibility */
}

html body.theme-light section.bg-marque-black #no-results p.text-white\/40,
html body.theme-light section.bg-marque-black #no-results p.text-white\/50,
html body.theme-light section.bg-marque-black #no-results p[class*="text-white/40"],
html body.theme-light section.bg-marque-black #no-results p[class*="text-white/50"],
html body.theme-light section.bg-marque-black #no-results .text-white\/40,
html body.theme-light section.bg-marque-black #no-results .text-white\/50,
html body.theme-light section.bg-marque-black #no-results [class*="text-white/40"],
html body.theme-light section.bg-marque-black #no-results [class*="text-white/50"],
body.theme-light section.bg-marque-black #no-results p.text-white\/40,
body.theme-light section.bg-marque-black #no-results p.text-white\/50,
body.theme-light section.bg-marque-black #no-results p[class*="text-white/40"],
body.theme-light section.bg-marque-black #no-results p[class*="text-white/50"],
body.theme-light section.bg-marque-black #no-results .text-white\/40,
body.theme-light section.bg-marque-black #no-results .text-white\/50,
body.theme-light section.bg-marque-black #no-results [class*="text-white/40"],
body.theme-light section.bg-marque-black #no-results [class*="text-white/50"],
body.theme-light #no-results p.text-white\/40,
body.theme-light #no-results p.text-white\/50,
body.theme-light #no-results .text-white\/40,
body.theme-light #no-results .text-white\/50 {
    color: rgba(17, 24, 39, 0.65) !important; /* Darker gray for better visibility */
}

/* =================================
   Motion Reduction – Collection Page
   ================================= */

@media (prefers-reduced-motion: reduce) {
    /* Ürün kartları ve koleksiyon kartlarında ölçek/geçiş animasyonlarını kapat */
    .product-card,
    .product-card * {
        transition: none !important;
        transform: none !important;
    }

    /* Mobil koleksiyon kartları */
    .mobile-collection-card,
    .mobile-collection-card * {
        transition: none !important;
        transform: none !important;
    }

    /* Mega menü kartları (koleksiyon ve stok menüleri için) */
    .mega-menu-card,
    .mega-menu-card * {
        transition: none !important;
        transform: none !important;
    }

    /* Filter accordion – ok dönüşü ve içerik geçişi */
    .filter-content,
    .filter-toggle,
    .filter-toggle *,
    #category-arrow,
    #origin-arrow,
    #color-arrow,
    #application-arrow {
        transition: none !important;
        transform: none !important;
    }
}