:root {
            --pink: #FFB4B4;
            --soft-pink: #FDACAC;
            --yellow: #F4F754;
            --black: #000000;
            --nav-bg: #3C3D37;
            --divider: #181C14;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-script { font-family: 'Pinyon Script', cursive; }

        /* --- HEADER ANIMATIONS --- */
        .nav-item { position: relative; overflow: hidden; }
        .nav-item .bg-slide {
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 160%;
            height: 100%;
            background: var(--pink);
            transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: -1;
        }
        .nav-item:hover .bg-slide { bottom: 0; }
        .underline-grow::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 50%;
            background: currentColor;
            transition: width 0.4s ease, left 0.4s ease;
        }
        .nav-item:hover .underline-grow::after { width: 100%; left: 0; }

        /* --- HERO SPLIT CAROUSEL --- */
        .hero-slide {
            position: absolute;
            inset: 0;
            display: flex;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease, visibility 0.8s;
        }
        .hero-slide.active { opacity: 1; visibility: visible; }
        
        .hero-text-panel { transform: translateY(30px); opacity: 0; transition: all 1s ease 0.3s; }
        .hero-image-panel { transform: translateX(50px); opacity: 0; transition: all 1.2s ease; }
        .active .hero-text-panel { transform: translateY(0); opacity: 1; }
        .active .hero-image-panel { transform: translateX(0); opacity: 1; }

        .word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
        .word-reveal span { 
            display: inline-block; 
            transform: translateY(110%); 
            transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); 
        }
        .active .word-reveal span { transform: translateY(0); }

        /* --- MASONRY GRID --- */
        .masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .tall { grid-row: span 2; }
        .wide { grid-column: span 2; }

        /* --- PRODUCT CARDS --- */
        .product-card { transition: transform 0.4s ease; }
        .product-card:hover { transform: translateY(-10px); }
        .product-image-container img { transition: transform 0.8s ease; }
        .product-card:hover .product-image-container img { transform: scale(1.1); }

        /* --- CUSTOM SCROLLBARS --- */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: white; }
        ::-webkit-scrollbar-thumb { background: var(--pink); }

        /* --- OVERLAYS --- */
        #auth-overlay, #quick-view, #cart-drawer {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
        }

        .drawer-content {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 100%;
            max-width: 450px;
            background: white;
            box-shadow: -10px 0 30px rgba(0,0,0,0.05);
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .drawer-open .drawer-content { transform: translateX(0); }

        /* --- DRAG SCROLL --- */
        .drag-row { cursor: grab; display: flex; gap: 40px; overflow-x: auto; padding: 20px; scrollbar-width: none; }
        .drag-row::-webkit-scrollbar { display: none; }
        .drag-row:active { cursor: grabbing; }

        .reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: all 1s ease; }
        .reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }