html { scroll-behavior: auto !important; }

        :root {
            --bg-cream: #f1f3f3;
            --bg-dark: #112653;
            --bg-charcoal: #212c43;
            --accent-primary: #1b2e7b;
            --accent-secondary: #344e7e;
            --text-dark: #535c72;
            --text-light: #f1f3f3;
            --text-muted-dark: #848ea7;
            --text-muted-light: #bcc4d6;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-cream);
            color: var(--text-dark);
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, .serif { font-family: 'Cormorant Garamond', serif; letter-spacing: 0.02em; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-cream); }
        ::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 10px; }

        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

        .glass-light { background: rgba(241, 243, 243, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(188, 196, 214, 0.4); box-shadow: 0 8px 32px 0 rgba(17, 38, 83, 0.1); }
        .glass-dark { background: rgba(33, 44, 67, 0.65); backdrop-filter: blur(16px); border: 1px solid rgba(188, 196, 214, 0.2); box-shadow: 0 8px 32px 0 rgba(17, 38, 83, 0.4); }

        .nav-link { position: relative; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); text-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease; }
        .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--text-light); transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }
        .nav-link.active { font-weight: bold; }
        .text-shadow-glow { text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.5); }

        .perspective-container { perspective: 1500px; }
        .tilt-card { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease; }
        .tilt-inner { transform: translateZ(50px); }

        .btn-base { position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid; }
        .btn-primary { background: #1b2e7b; color: #f1f3f3; border-color: #1b2e7b; }
        .btn-primary:hover { background: #344e7e; }

        .btn-base:hover { transform: scale(1.02); box-shadow: 0 10px 25px -5px rgba(27,46,123,0.3); }
        header button, .size-btn, .color-btn { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; display: inline-block; }
        header button:hover, .size-btn:hover, .color-btn:hover { transform: scale(1.05); }
        #desktop-nav .nav-link { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease; display: inline-block; }
        #desktop-nav .nav-link:hover { transform: scale(1.05); }

        button:active, .btn-base:active, .nav-link:active { transform: scale(0.96) !important; transition-duration: 0.1s !important; }

        .dot-flash { animation: dotFlash 1.4s infinite alternate; }
        @keyframes dotFlash { 0% { opacity: 0.2; } 100% { opacity: 1; } }

        .reveal-wrapper { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.2,0.8,0.2,1), transform 1s cubic-bezier(0.2,0.8,0.2,1); }
        .reveal-wrapper.is-visible { opacity: 1; transform: translateY(0); }

        .energy-particle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: screen; }

        @keyframes zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        .animate-fade-in { animation: fade-in 0.3s ease forwards; }
        .animate-fade-in-up { animation: fade-in-up 0.4s ease-out forwards; }
        .animate-zoom-out { animation: zoom-out 10s ease-out forwards; }

        #catalog { scroll-margin-top: 120px; }
        .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
        .mobile-horizontal-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
        .mobile-horizontal-scroll > * { scroll-snap-align: start; }
        @media (max-width: 767px) { input[type="text"], input[type="email"], textarea { font-size: 16px !important; } }

        button, a { touch-action: manipulation; }

        .catalog-floral-bg {
            position: relative;
        }
        .catalog-floral-bg::before, .embalagem-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.25; 
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            pointer-events: none;
            background-image: url('https://res.cloudinary.com/glyzgzot/image/upload/v1784986004/ChatGPT_Image_Jul_25_2026_10_26_25_AM_frgwup.png');
        }

        .embalagem-bg {
            position: relative;
        }
        
        .embalagem-bg::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 85vw;
            max-width: 500px;
            aspect-ratio: 1/1;
            z-index: 0;
            opacity: 0.25;
            background-image: url('https://res.cloudinary.com/glyzgzot/image/upload/v1784987023/Background_Symbol_lwsiba.png');
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        @media (min-width: 768px) {
            .catalog-floral-bg::before, .embalagem-bg::before {
                background-image: url('https://res.cloudinary.com/glyzgzot/image/upload/v1784985716/ChatGPT_Image_Jul_25_2026_10_21_27_AM_oybei6.png');
                opacity: 0.15;
            }
            .embalagem-bg::after {
                width: 45vw;
                max-width: 650px;
                opacity: 0.15;
            }
        }

        .catalog-skeleton-card {
            min-width: 0;
            padding: 0.75rem;
            border: 1px solid rgba(188, 196, 214, 0.45);
            background: rgba(255, 255, 255, 0.56);
            border-radius: 2px;
        }
        .catalog-skeleton-image {
            aspect-ratio: 1 / 1;
            width: 100%;
            margin-bottom: 1rem;
            border-radius: 2px;
        }
        .catalog-skeleton-line {
            height: 0.65rem;
            margin: 0.6rem auto;
            border-radius: 2px;
        }
        .catalog-skeleton-shimmer {
            background: linear-gradient(100deg, rgba(188,196,214,0.16) 20%, rgba(188,196,214,0.42) 40%, rgba(188,196,214,0.16) 60%);
            background-size: 220% 100%;
            animation: catalogShimmer 1.4s ease-in-out infinite;
        }
        @keyframes catalogShimmer { to { background-position-x: -220%; } }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
    
header nav, 
        header nav [aria-label="Giorélia"], 
        header nav button, 
        header nav svg, 
        header .nav-link, 
        header #cart-badge,
        header .nav-link::after {
            transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out, text-shadow 0.5s ease-in-out !important;
        }

        
        .header-light nav {
            background-color: rgba(241, 243, 243, 0.95) !important;
            border-color: rgba(188, 196, 214, 0.6) !important;
        }
        
        .header-light nav [aria-label="Giorélia"], 
        .header-light nav button, 
        .header-light nav svg, 
        .header-light .nav-link {
            color: #112653 !important;
            text-shadow: none !important;
        }
        
        .header-light .nav-link::after {
            background: #112653 !important;
        }
        
        .header-light #cart-badge {
            background-color: #112653 !important;
            color: #f1f3f3 !important;
        }

.prod-gallery-main{aspect-ratio:1/1;overflow:hidden; background:#e9eded}
.prod-gallery-main img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.prod-gallery-main:hover img{transform:scale(1.025)}
.prod-gallery-thumb{border:2px solid transparent;transition:border-color .3s ease,transform .3s ease,opacity .3s ease}
.prod-gallery-thumb:hover{transform:translateY(-2px);opacity:.85}
.prod-gallery-thumb.is-active{border-color:#1b2e7b}
.prod-stage{min-height:39vh}
.nav-cta:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #718ac1;outline-offset:3px}
@media(max-width:639px){.prod-stage{min-height:32vh}.prod-gallery-main img{object-fit:cover}}
@media (min-width:1024px){header nav button[onclick*="toggleMobileMenu"]{display:none}}
@media (max-width:1023px){header nav #desktop-nav{display:none}}

/* Images are supplied square; keep all product previews square even on older cached CSS. */
.prod-gallery-main,.catalog-skeleton-image{aspect-ratio:1/1}
.prod-gallery-thumb img,.modal-thumb{aspect-ratio:1/1;object-fit:cover}