:root {
    /* Brand Color Palette from Complete Website Roadmap */
    --color-rose-quartz: #EFCFD1;
    --color-soft-blush: #F6E8E7;
    --color-champagne-gold: #C9A06A;
    --color-ivory-white: #FAF8F6;
    --color-rich-brown: #3A2724;
}

/* Custom Elegant Scrollbar for the site */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #FAF8F6; /* ivory */
}

::-webkit-scrollbar-thumb {
    background: #EFCFD1; /* quartz */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C9A06A; /* gold */
}

/* Hide scrollbar for Chrome, Safari and Opera (for bestsellers carousel wrapper) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Scroll margin top to prevent header overlap when using anchor tags */
html {
    scroll-padding-top: 5rem;
}

/* Scrolled state for the header with glassmorphism background */
#main-header.scrolled {
    background-color: rgba(250, 248, 246, 0.9) !important; /* Ivory with 90% opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -10px rgba(58, 39, 36, 0.15); /* Rich Brown shadow */
    border-bottom: 1px solid rgba(239, 207, 209, 0.4); /* Blush border */
}