/* ─── Base Styles ─── */
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; }

/* ─── Glass Buttons ─── */
.glass-button {
    position: relative; overflow: hidden; border-radius: 0.5rem;
    padding: 1rem 2rem; font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 600; font-size: 0.875rem; text-transform: uppercase;
    letter-spacing: 0.2em; text-decoration: none; display: inline-block;
    background: linear-gradient(135deg, hsla(38,45%,60%,0.9), hsla(38,50%,45%,0.95));
    color: hsl(0,0%,100%); backdrop-filter: blur(10px);
    border: 1px solid hsla(38,40%,75%,0.3);
    box-shadow: 0 8px 32px hsla(38,45%,60%,0.25), inset 0 1px 0 hsla(0,0%,100%,0.2);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1); cursor: pointer;
}
.glass-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px hsla(38,45%,60%,0.35), inset 0 1px 0 hsla(0,0%,100%,0.3);
}

.glass-button-outline {
    position: relative; overflow: hidden; border-radius: 0.5rem;
    padding: 1rem 2rem; font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 600; font-size: 0.875rem; text-transform: uppercase;
    letter-spacing: 0.2em; text-decoration: none; display: inline-block;
    background: hsla(0,0%,100%,0.08); color: hsl(0,0%,100%);
    backdrop-filter: blur(10px); border: 1px solid hsla(0,0%,100%,0.25);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1); cursor: pointer;
}
.glass-button-outline:hover {
    background: hsla(0,0%,100%,0.15);
    border-color: hsla(0,0%,100%,0.4);
    transform: translateY(-2px);
}

/* ─── Category Cards ─── */
.category-card {
    position: relative; overflow: hidden; border-radius: 0.75rem; cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.category-card .card-bg { transition: all 0.6s cubic-bezier(0.4,0,0.2,1); }
.category-card:hover .card-bg { transform: scale(1.08); filter: brightness(0.5); }
.category-card .card-content { transition: all 0.5s cubic-bezier(0.4,0,0.2,1); }
.category-card:hover .card-content { transform: translateY(-8px); }

/* ─── Section Reveal Animations ─── */
.section-reveal {
    opacity: 0; transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4,0,0.2,1);
}
.section-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ─── Hero Slider ─── */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(0.4,0,0.2,1), transform 1.2s cubic-bezier(0.4,0,0.2,1); transform: scale(1.05); z-index: 0; }
.hero-slide.active { opacity: 1; transform: scale(1); z-index: 1; }
/* Grid stack: all hero-content items share the same cell */
.hero-content-stack { display: grid; }
.hero-content-stack > .hero-content { grid-area: 1 / 1; }
.hero-content { opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1), filter 0.7s cubic-bezier(0.4,0,0.2,1); pointer-events: none; }
.hero-content.active { opacity: 1; transform: translateY(0); filter: blur(0px); pointer-events: auto; }

/* ─── Parallax Hero ─── */
.parallax-hero-img { transition: transform 0.1s linear; will-change: transform; }

/* ─── Scrollbar ─── */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Mega Menu ─── */
.mega-trigger:hover .mega-menu,
.mega-menu:hover { display: block !important; opacity: 1 !important; }
.mega-trigger:hover .chevron-icon { transform: rotate(180deg); }

/* ─── Accessibility ─── */
.dyslexic-font * { font-family: 'Lexend', sans-serif !important; letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 1.8 !important; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.underline-links a { text-decoration: underline !important; text-underline-offset: 3px; }
.grayscale-mode { filter: grayscale(1); }
.big-cursor, .big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 20H20l-4 16z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; }

/* ─── Toast Notification ─── */
.toast-notification {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 200;
    background: hsl(0,0%,18%); color: hsl(0,0%,98%); padding: 1rem 1.5rem;
    border-radius: 0.75rem; font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.875rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border: 1px solid hsla(38,45%,60%,0.3);
    transform: translateY(120%); opacity: 0;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.toast-notification.show { transform: translateY(0); opacity: 1; }

/* ─── Product Card Hover Line ─── */
.product-card-line { width: 2.5rem; transition: width 0.5s ease; }
.group:hover .product-card-line { width: 3.5rem; }

/* ─── Bounce Arrow ─── */
@keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.bounce-arrow { animation: bounceArrow 2s ease-in-out infinite; }

/* ─── Spin Animation ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ─── Fade Animations ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slideInLeft 0.7s ease-out forwards; }

/* Delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1.0s; }
.delay-1100 { animation-delay: 1.1s; }
.delay-1200 { animation-delay: 1.2s; }
.delay-1500 { animation-delay: 1.5s; }

/* Initially hidden for scroll reveal */
.scroll-reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4,0,0.2,1); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }
.scroll-reveal-left { opacity: 0; transform: translateX(-40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.scroll-reveal-left.visible { opacity: 1; transform: translateX(0); }
.scroll-reveal-right { opacity: 0; transform: translateX(40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.scroll-reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Rich text blocks */
.grapil-rich-text { line-height: 1.85; }
.grapil-rich-text > * + * { margin-top: 1rem; }
.grapil-rich-text h1,
.grapil-rich-text h2,
.grapil-rich-text h3,
.grapil-rich-text h4 {
    color: hsl(0,0%,15%);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
    margin-top: 1.5rem;
}
.grapil-rich-text h1 { font-size: 1.9rem; }
.grapil-rich-text h2 { font-size: 1.55rem; }
.grapil-rich-text h3 { font-size: 1.25rem; }
.grapil-rich-text ul,
.grapil-rich-text ol {
    margin: 1rem 0 1rem 1.25rem;
    display: grid;
    gap: 0.45rem;
}
.grapil-rich-text a {
    color: hsl(38,45%,45%);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.grapil-rich-text figure {
    margin: 1.5rem 0;
}
.grapil-rich-text img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1.1rem;
    border: 1px solid rgba(31,32,35,0.08);
    background: rgba(255,255,255,0.7);
}
.grapil-rich-text figcaption {
    margin-top: 0.55rem;
    color: hsl(0,0%,45%);
    font-size: 0.9rem;
}
.grapil-rich-text blockquote {
    padding: 1rem 1.1rem;
    border-left: 3px solid hsl(38,45%,55%);
    background: rgba(201,169,110,0.08);
    border-radius: 0.85rem;
}
.grapil-rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(31,32,35,0.12);
    border-radius: 0.75rem;
    overflow: hidden;
}
.grapil-rich-text th,
.grapil-rich-text td {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(31,32,35,0.08);
    vertical-align: top;
}
.grapil-rich-text th {
    background: rgba(31,32,35,0.05);
    font-weight: 700;
}

@media (max-width: 768px) {
    .grapil-rich-text table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}