:root {
    --bg: #0f1724;
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-button-bg: rgba(255, 255, 255, 0.12);
    --glass-button-hover: rgba(255, 255, 255, 0.24);
}

.dark {
    --bg: #000000;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-button-bg: rgba(255, 255, 255, 0.10);
    --glass-button-hover: rgba(255, 255, 255, 0.20);
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg);
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(170, 32, 246, 0.15), transparent 25%), 
        radial-gradient(circle at 85% 30%, rgba(0, 255, 157, 0.08), transparent 25%);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
}

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Categories dropdown visibility fix */
#categories-menu {
    z-index: 100;
    pointer-events: none;
}

#categories-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

.hidden.lg\:block.relative:hover #categories-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

/* Category Cards - Modern Bold Design */
.category-modern {
    min-height: 220px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-modern:hover {
    transform: translateY(-8px) scale(1.02);
}

.category-modern:active {
    transform: translateY(-4px) scale(0.99);
}

@media (max-width: 768px) {
    .category-modern {
        min-height: 200px;
    }
    
    .category-modern:hover {
        transform: translateY(-4px) scale(1.01);
    }
}


/* Style dropdown options to match dark theme */
#period-selector option {
    background-color: #1a1f2e;
    color: white;
    padding: 8px;
}

#period-selector option:hover,
#period-selector option:checked {
    background-color: rgba(170, 32, 246, 0.3);
}

/* Loading Screen */
#loading-screen {
    background: #000;
    will-change: opacity;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 3px solid rgba(170, 32, 246, 0.2);
    border-top-color: #AA20F6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    will-change: transform;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile spinner - smaller and simpler */
@media (max-width: 768px) {
    .loading-spinner {
        width: 40px;
        height: 40px;
        border-width: 2.5px;
    }
}

/* Lazy load image transitions - smooth progressive loading */
img.lazyload {
    filter: blur(6px) saturate(.9);
    transform: scale(1.02);
    opacity: 0.92;
    transition: filter 360ms ease, opacity 300ms ease, transform 400ms ease;
}

img.lazyload.loaded,
img.loaded {
    filter: none;
    transform: none;
    opacity: 1;
}

/* Content visibility for better rendering performance */
.glass-panel {
    content-visibility: auto;
}
 
/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
 
.glass-button {
    background: var(--glass-button-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: all 0.3s ease;
}
.glass-button:hover {
    background: var(--glass-button-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(170, 32, 246, 0.45);
}

.text-glow {
    text-shadow: 0 0 20px rgba(170, 32, 246, 0.5);
}

/* Custom scrollbar */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #AA20F6; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Brands Marquee (replaced by brandMarquee) */
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-marquee2 { animation: marquee2 40s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
@keyframes marquee2 { 0% { transform: translateX(100%); } 100% { transform: translateX(0%); } }

/* Remove grey background from brand marquee in dark mode */
.dark .border-y {
    background-color: transparent !important;
}

/* Small-screen sizing for brand logos (keep grayscale/opacity from markup) */
@media (max-width: 768px) {
    .animate-marquee img, .animate-marquee2 img { height: 2.25rem !important; max-height: 2.25rem; display: inline-block; }
    /* Speed up marquee animation on mobile */
    .animate-marquee { animation: marquee 20s linear infinite; }
    .animate-marquee2 { animation: marquee2 20s linear infinite; }
}

/* Preferences dropdown (currency + language) */
.prefs-dropdown { min-width: 18rem; }
.prefs-dropdown .prefs-option { display: flex; align-items: center; gap: 0.75rem; border: 1px solid transparent; }
.prefs-dropdown .prefs-option .currency-icon, .prefs-dropdown .prefs-option .flag { width: 1.5rem; text-align: center; font-size: 1.05rem; }
.flag { font-size: 1.05rem; margin-right: 0.25rem; display: inline-block; }
.prefs-toggle-flag { font-size: 1.05rem; margin-right: 0.5rem; }
.flag-img { width: 20px; height: auto; display: inline-block; border-radius: 2px; margin-right: 0.5rem; }
.prefs-dropdown .prefs-option.selected, .prefs-dropdown .prefs-option:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.04); }
.prefs-dropdown .prefs-option.selected { color: white; font-weight: 600; }
.prefs-dropdown .prefs-option.selected i[data-lucide="check"] { opacity: 1 !important; }
.prefs-dropdown .prefs-option i[data-lucide="check"] { color: var(--tw-color-white, #fff); }

/* Mobile prefs option styles (same look as desktop when selected) */
.mobile-prefs-option { display: flex; align-items: center; gap: 0.75rem; border: 1px solid transparent; }
.mobile-prefs-option.selected, .mobile-prefs-option:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.04); }
.mobile-prefs-option.selected { color: white; font-weight: 600; }
.mobile-prefs-option.selected i[data-lucide="check"] { opacity: 1 !important; }
.mobile-prefs-option i[data-lucide="check"] { color: var(--tw-color-white, #fff); }

/* Ensure touch-friendly scrolling inside mobile prefs */
#mobile-prefs { -webkit-overflow-scrolling: touch; }

/* Slight shadow and pointer */
.prefs-dropdown .glass-panel { box-shadow: 0 12px 40px rgba(0,0,0,0.6); }

/* Responsive adjustments */
@media (max-width: 640px) {
    .prefs-dropdown { right: -0.5rem; left: 0.5rem; width: calc(100% - 1rem); }
}

/* Slightly widen catalog product cards on small screens while keeping 2-per-row */
@media (max-width: 640px) {
    /* Reduce the grid gap used by Tailwind's `gap-6` so each column has a bit more width */
    /* Scope adjustments to catalog only (do not affect other grids/site areas) */
    .catalog-view .grid.grid-cols-2.gap-6 {
        gap: 0.75rem; /* tighter so catalog cards gain more horizontal space */
    }

    /* Tighten the horizontal padding inside product cards only when used in catalog */
    .catalog-view .glass-panel > .p-5 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Reduce container horizontal padding only for the catalog container so other sections keep their spacing */
    .catalog-view {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Stronger rule set for slightly larger small viewports to ensure catalog cards stay wide */
@media (max-width: 768px) {
    .catalog-view .grid.grid-cols-2.gap-6 {
        gap: 0.5rem !important; /* make columns tighter so cards are wider */
    }
    .catalog-view .glass-panel > .p-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .catalog-view {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Ensure horizontal slider cards match height for consistent appearance */
.snap-start {
    height: 520px; /* desktop default card height for sliders */
}
.snap-start .glass-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Keep image area from stretching while allowing content to flow */
.snap-start .aspect-square { 
    flex: 0 0 auto; 
    height: 320px; 
    min-height: 320px; 
    max-height: 320px; 
    overflow: hidden;
}

@media (max-width: 1024px) {
    .snap-start .aspect-square { height: 280px; min-height: 280px; max-height: 280px; }
}

@media (max-width: 768px) {
    .snap-start { height: 420px; }
    .snap-start .aspect-square { height: 240px; min-height: 240px; max-height: 240px; }
}

/* Light-mode: make nav / brand marquee / footer transparent like FAQ container */
/* Light-mode: make nav / brand marquee / footer sit on a subtle semi-opaque panel
   similar to FAQ panels but with a bit more weight (less transparent) */
:root:not(.dark) .border-b.backdrop-blur-md,
:root:not(.dark) .border-y,
:root:not(.dark) footer {
    background-color: rgba(15,23,36,0.08) !important; /* subtle overlay for light mode */
    background-image: none !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Brand marquee should sit on the same semi-opaque band */
:root:not(.dark) .border-y {
    background-color: rgba(15,23,36,0.08) !important;
}

/* Reduce inner marquee transparency but keep slight faded appearance */
:root:not(.dark) .animate-marquee,
:root:not(.dark) .animate-marquee2 {
    background: transparent !important;
    opacity: 0.85 !important;
}

/* Light-mode: mobile menu overlay and panel should be less transparent for readability */
:root:not(.dark) #mobile-menu {
    background-color: rgba(15,23,36,0.85) !important; /* darker overlay */
    backdrop-filter: blur(6px) !important;
}

:root:not(.dark) #mobile-menu > div {
    background: rgba(10,14,20,0.9) !important; /* inner panel weight */
    background-image: none !important;
    border-color: rgba(255,255,255,0.07) !important;
}

:root:not(.dark) #mobile-menu .text-gray-400,
:root:not(.dark) #mobile-menu .text-gray-300,
:root:not(.dark) #mobile-menu .text-white {
    color: #e6eef8 !important; /* readable foreground */
}

/* Lazyload image placeholder + smooth reveal */
.lazyload { filter: blur(6px) saturate(.9); transform: scale(1.02); opacity: 0.92; transition: filter 360ms ease, opacity 300ms ease, transform 400ms ease; }
.lazyload.loaded { filter: none; transform: none; opacity: 1; }

/* Make certain product page panels wider on small screens for improved readability */
@media (max-width: 768px) {
    .product-fullwidth {
        width: calc(100% + 1.5rem); /* moderate bleed */
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: calc(1.5rem + 1rem);
        padding-right: calc(1.5rem + 1rem);
        border-radius: 1rem;
    }
    .product-fullwidth .grid, .product-fullwidth .text-sm, .product-fullwidth p { max-width: none; }
}

/* Reseller table mobile widen (match product panels) */
@media (max-width: 768px) {
    /* Make reseller table responsive and avoid horizontal scroll on small screens */
    .reseller-fullwidth {
        width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding-left: 0.25rem; /* small gutter */
        padding-right: 0.25rem;
        border-radius: 1rem;
        overflow-x: hidden; /* avoid forcing horizontal scroll */
    }

    /* Force the table to fit the container and allow cells to wrap */
    .reseller-fullwidth table {
        width: calc(100% + 1rem);
        max-width: calc(100% + 1rem);
        table-layout: fixed; /* ensure equal column widths */
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-collapse: collapse;
    }

    /* Make all four columns equal width on small screens */
    .reseller-fullwidth table th,
    .reseller-fullwidth table td {
        width: 25% !important;
        box-sizing: border-box;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* Remove extra left padding on first column for reseller table on small screens */
@media (max-width: 768px) {
    .reseller-fullwidth table th:first-child,
    .reseller-fullwidth table td:first-child {
        padding-left: 0.25rem !important; /* small left gutter to avoid touching edge */
    }

    /* Reduce general cell padding on small screens and allow wrapping */
    .reseller-fullwidth table th,
    .reseller-fullwidth table td {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        white-space: normal; /* allow wrapping */
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    .reseller-fullwidth table th:last-child,
    .reseller-fullwidth table td:last-child {
        padding-right: 0.25rem !important; /* small right gutter to match */
    }
}

/* Product-page specific mobile spacing tweaks */
@media (max-width: 768px) {
    .view-product .lg\:grid-cols-12 { gap: 1rem !important; }
    .view-product .gap-8 { gap: 1rem !important; }
    .view-product .space-y-12 > * + * { margin-top: 1rem !important; }
}

/* Hero slider: ensure slides are exactly 100% width with no gaps and container clips overflow */
.relative.overflow-hidden[class*="h-[500px]"] {
    overflow: hidden !important; /* force clip so only one slide shows */
}
#hero-track {
    gap: 0 !important;
    display: flex !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#hero-track > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    opacity: 0.3;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active slide styling */
#hero-track > div.active-slide {
    opacity: 1;
    transform: scale(1);
}

/* Header logo: keep PNG transparency and remove added light/mask effects */
.logo-glow {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: transform 200ms ease;
    box-shadow: none !important; /* ensure no rectangular shadow */
}
/* Use drop-shadow on the PNG itself so the glow follows its opaque pixels */
.logo-glow img {
    display: block;
    filter: drop-shadow(0 8px 22px rgba(170,32,246,0.45)) drop-shadow(0 0 36px rgba(170,32,246,0.12));
    transition: filter 220ms ease, transform 200ms ease;
}
.logo-glow:hover img {
    filter: drop-shadow(0 14px 36px rgba(170,32,246,0.55)) drop-shadow(0 0 72px rgba(170,32,246,0.2));
    transform: translateY(-1px) scale(1.02);
}
.logo-glow::before { display: none !important; }

/* Hero image enhancements: subtle Ken Burns, vignette and nicer blending */
.hero-bg {
    background-size: cover;
    background-position: center center;
    transform-origin: center center;
    will-change: transform, filter;
    animation: hero-kenburns 20s ease-in-out infinite;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.18) 100%);
    mix-blend-mode: multiply;
}

@keyframes hero-kenburns {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.06) translateY(-2%); }
    100% { transform: scale(1) translateY(0); }
}

/* Slightly soften slide transitions so the hero image crossfades feel smoother */
#hero-track > div .hero-bg {
    transition: transform 800ms cubic-bezier(.2,.9,.3,1), opacity 600ms ease;
}

/* Increase text contrast on hero slides to ensure readability */
#hero-track .max-w-2xl h1 {
    text-shadow: 0 6px 28px rgba(0,0,0,0.85) !important;
}
#hero-track .max-w-2xl p {
    text-shadow: 0 4px 18px rgba(0,0,0,0.75) !important;
}

/* Unified overlay above hero images: gradient + subtle animated sheen */
.hero-overlay {
    pointer-events: none;
    /* lighten the overlay so text remains readable */
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0) 65%);
    mix-blend-mode: multiply;
    position: absolute;
    inset: 0;
    z-index: 10;
}

.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    /* reduce sheen intensity so it doesn't wash text */
    background: linear-gradient(120deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 30%, rgba(255,255,255,0) 60%);
    transform: translateX(-120%);
    mix-blend-mode: overlay;
    filter: blur(4px);
    animation: hero-sheen 10s linear infinite;
    z-index: 12;
}

@keyframes hero-sheen {
    0% { transform: translateX(-120%); opacity: 0; }
    15% { opacity: 0.65; }
    50% { transform: translateX(20%); opacity: 0.35; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* Tighten key info badges (platform / region / delivery) on small screens */
@media (max-width: 640px) {
    .view-product .key-info-badges { 
        gap: 0.5rem !important; 
        flex-wrap: nowrap !important; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }
    .view-product .key-info-badges > * { 
        padding: 0.45rem 0.75rem !important; /* approx px-3 py-2 */
        min-width: auto !important;
    }
    .view-product .key-info-badges .items-center { gap: 0.5rem !important; }
    .view-product .key-info-badges i[data-lucide] { width: 1.05rem !important; height: 1.05rem !important; }
}

/* Scoped mobile adjustments for the home Explore Categories promo grid only */
@media (max-width: 640px) {
    .explore-categories .grid.grid-cols-2.gap-6 {
        gap: 0.75rem; /* tighter so category cards gain more horizontal space */
    }

    /* Tighten the inner padding of the category card content (p-6) to give more space */
    .explore-categories .glass-panel > .p-6 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Allow the explore block to reach closer to the page edges without affecting other containers */
    .explore-categories.container,
    .explore-categories {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Reduce vertical spacing between the moving logos (brand marquee) and the Explore Categories block */
.border-y + .explore-categories {
    padding-top: 1.5rem; /* reduce from default py-12 (3rem) to 1.5rem */
}

/* Purchase notification responsive */
#purchase-notification {
    max-width: 380px;
}

@media (max-width: 640px) {
    #purchase-notification {
        left: 1rem;
        right: 1rem;
        bottom: 5rem;
        max-width: none;
    }
}

/* Slightly tighten spacing between description and reviews on desktop product pages */
.view-product .space-y-12 > * + * {
    margin-top: 1.25rem !important; /* ~20px (reduced from 3rem) */
}

/* Review date spacing tweaks */
.review-date { min-width: 4.5rem; text-align: right; }
@media (max-width: 768px) {
    .view-product .review-date { min-width: 6.25rem; }
}

/* Chat Widget Styles */
#chat-widget {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#chat-options {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#chat-options:not(.invisible) {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive chat widget */
@media (max-width: 640px) {
    #chat-widget {
        bottom: 4rem;
        right: 1.75rem;
    }
    
    #chat-options {
        width: calc(100vw - 2rem);
        max-width: 280px;
        right: 0;
    }
}

/* Smooth hover effects for chat buttons */
#chat-options a {
    will-change: transform, background-color;
}

#chat-options a:active {
    transform: scale(0.97);
}

/* Modal animations */
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}