/* Honeyman Honey - Alternating White & Pantone 7527 Clinical Wellness Palette */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --forest-dark: #0D2319;
    --forest-card: #132E22;
    --forest-border: #1F4532;
    --honey-gold: #F59E0B;
    --honey-amber: #D97706;
    --pantone-7527: #EBEAE4;
    --pure-white: #FFFFFF;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--pure-white);
    color: #1C2822;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Cinzel', serif;
}

/* Alternating Section Background Classes */
.bg-section-white { background-color: var(--pure-white); }
.bg-section-tint { background-color: var(--pantone-7527); }

/* Custom Forest Theme Classes */
.bg-forest-dark { background-color: var(--forest-dark); }
.bg-forest-card { background-color: var(--forest-card); }
.border-forest { border-color: var(--forest-border); }
.text-forest-gold { color: #E5B842; }

/* Responsive Image & Touch Safety */
img {
    max-width: 100%;
    height: auto;
}

/* Image Slot & Filename Helper Badge */
.img-slot { position: relative; }
.filename-badge {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(217, 119, 6, 0.95);
    color: #fff;
    font-family: monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
body.show-filenames .filename-badge { display: inline-block; }

/* Opaque Solid Mobile Navigation Menu */
#mobile-menu {
    background-color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Fixed container for catalog and store product images */
.product-img-wrapper {
    position: relative;
    width: 100%;
    height: 12rem; /* Adjust height as needed (e.g., h-48 in Tailwind) */
    background-color: #f5f5f4; /* Light neutral background for padding gaps */
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zooms/crops slightly to fill box completely */
    transition: transform 0.3s ease;
}

.product-img-wrapper:hover img {
    transform: scale(1.03); /* Subtle zoom effect on hover */
}