/* @import "tailwindcss"; */

        /* Define CSS variables with fallback values. These will be overridden by JS. */
        :root {
            --color-bg-primary: #FDFCEF;
            --color-text-body: #3A5470;
            --color-text-secondary: #4A688A;
            --color-text-heading: #2C4258;
            --color-brand-light: #F9A7B0;
            --color-brand-accent: #FF69B4;
            --color-brand-logo: #FFC0CB;
            /* Logo placeholder background */
            --color-nav-active-bg: #FFE4E1;
            /* Tailwind pink-200 */
            --color-bg-dark: #213751;
            --color-border-light: #B7C6D9;
            --color-scrollbar-thumb: #708CA9;
            --color-scrollbar-thumb-hover: #52708E;
            --color-white: #FFFFFF;
            --color-black: #000000;
            --color-bg-light-alt: #F9FAFB;
            /* Tailwind gray-50 */
            --color-border-alt: #E5E7EB;
            /* Tailwind gray-200 */
            --color-button-secondary: #D1D5DB;
            /* Tailwind gray-300 */
            --color-button-secondary-hover: #9CA3AF;
            /* Tailwind gray-400 */
            --color-bg-light-tertiary: #F3F4F6;
            /* Tailwind gray-100 */
            --color-status-success: #22C55E;
            /* Tailwind green-600 */
            --color-status-error: #EF4444;
            /* Tailwind red-500 */
        }


                /* --- Custom font-face rule for local Copperplate files --- */
        @font-face {
            font-family: 'Copperplate Bold';
            src: url('../fonts/CopperplateCC-Bold.otf') format('opentype'),
                 url('../fonts/CopperplateCC-Bold.ttf') format('truetype'),
                 url('../fonts2/CopperplateCC-Bold.woff') format('woff'),
                 url('../fonts3/CopperplateCC-Bold.woff2') format('woff2');
            font-weight: bold;
            font-style: normal;
        }

        @font-face {
            font-family: 'Copperplate Heavy';
            src: url('../fonts/CopperplateCC-Heavy.otf') format('opentype'),
                 url('../fonts/CopperplateCC-Heavy.ttf') format('truetype'),
                 url('../fonts2/CopperplateCC-Heavy.woff') format('woff'),
                 url('../fonts2/CopperplateCC-Heavy.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        /* --- End of custom font-face rule --- */

        body {
            font-family: 'Balthazar', serif;
            background-color: var(--color-bg-primary);
            color: var(--color-text-body);
            overflow-y: scroll;
            /* Always show vertical scrollbar to prevent layout shifts */
            font-size: 1.125rem;
            /* Tailwind's 'lg' (18px) */

            /*product details has this info*/
            min-height: 100vh; /* Ensure body takes full viewport height */
            display: flex;
            flex-direction: column;

        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .font-bold,
        .font-semibold,
        .font-extrabold {
            font-family: 'Copperplate Bold', sans-serif;
        }

        .container {
            max-width: 1200px;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--color-border-light);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--color-scrollbar-thumb);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--color-scrollbar-thumb-hover);
        }