:root {
    --nav-height: 80px;
}

/* 
Tailwind Safelist for Konigle Commerce Product Pages 
(Prevents responsive layout classes and gallery images from being purged)
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 gap-4 gap-6 gap-8 gap-12 gap-16
flex flex-col flex-row md:flex-row lg:flex-row items-center items-start justify-between justify-center
w-full h-full w-16 h-16 w-20 h-20 w-24 h-24 max-w-7xl mx-auto px-4 py-8
aspect-square aspect-video object-cover object-contain cursor-pointer opacity-50 opacity-100
border border-primary border-primary-500 rounded-md rounded-lg rounded-xl shadow-sm shadow-md transition-shadow overflow-hidden
text-2xl text-3xl font-bold font-semibold text-primary-900 text-primary-600 line-through
hidden sm:hidden md:hidden lg:hidden
block sm:block md:block lg:block
flex sm:flex md:flex lg:flex
grid sm:grid md:grid lg:grid
md:w-1/2 md:w-2/3 lg:w-1/2 lg:w-2/3 flex-1 flex-shrink-0 flex-grow relative absolute inset-0 top-0 left-0 right-0 bottom-0
mt-6 mb-6 w-full
*/

body {
    background-color: var(--color-white);
    color: var(--color-primary-900);
    overflow-x: hidden;
}

/* --- E-commerce Button Fallbacks --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-family: var(--font-sans);
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
}
.btn-md {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px;
}
.btn-primary {
    background-color: var(--color-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.btn-light {
    background-color: var(--color-surface-100);
    color: var(--color-primary-900);
}
.btn-light:hover:not(:disabled) {
    background-color: var(--color-surface-200);
}
.btn-primary-outline {
    border: 2px solid var(--color-primary-500);
    color: var(--color-primary-500);
    background-color: transparent;
}
.btn-primary-outline:hover:not(:disabled) {
    background-color: var(--color-primary-50);
}

/* --- E-commerce Image Gallery Fallbacks --- */
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }
.object-cover { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.max-w-full { max-width: 100% !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.overflow-hidden { overflow: hidden !important; }
.cursor-pointer { cursor: pointer !important; }

.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    height: 70px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-surface-100);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-primary-200);
    border-radius: 10px;
}

.hero-swiper .swiper-pagination-bullet {
    background: white !important;
    opacity: 0.5;
    width: 12px;
    height: 12px;
}
.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 32px;
    border-radius: 6px;
}

@media (hover: none) {
    .hover-lift { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary-500);
    color: white;
    padding: 1rem;
    z-index: 100;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}