body {
    font-family: 'Inter', sans-serif;
    background-color: #f3e9d2;
}
:root {
    --brand-brown-dark: #8B4513;
    --brand-text: #5a3d2b;
    --brand-cream: #fdf5e6;
    --brand-footer: #3e2723;
    --brand-brown-light: #d2b48c;
}
.text-brand { color: var(--brand-text); }
.bg-brand-light { background-color: var(--brand-brown-light); }
.bg-brand-dark { background-color: var(--brand-brown-dark); }
.hover\:bg-brand-darker:hover { background-color: #65320d; }
.text-brand-dark { color: var(--brand-brown-dark); }
.bg-brand-cream { background-color: var(--brand-cream); }
.bg-brand-footer { background-color: var(--brand-footer); }
.border-brand-dark { border-color: var(--brand-brown-dark); }
.transition-transform { transition: transform 0.3s ease-out; }
.transition-opacity { transition: opacity 0.3s ease-out; }
.modal-backdrop {
    background-color: rgba(0,0,0,0.5);
}
html { scroll-behavior: smooth; }
.slider-img {
    transition: opacity 3s ease-in-out;
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.slider-img.active { opacity: 1; }
.hero-section h1, .hero-section p { text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
#mobile-menu {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.active-menu { max-height: 500px; opacity: 1; }
#cart-modal, #add-to-cart-choice-modal, #quantity-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
#cart-modal.open, #add-to-cart-choice-modal.open, #quantity-modal.open {
    opacity: 1;
    visibility: visible;
}
#cart-modal > div, #add-to-cart-choice-modal > div, #quantity-modal > div {
    transform: translateY(20px);
    transition: transform 0.3s ease-out;
}
#cart-modal.open > div, #add-to-cart-choice-modal.open > div, #quantity-modal.open > div {
    transform: translateY(0);
}
.remove-item-btn {
    transition: color 0.3s ease;
}
.remove-item-btn:hover {
    color: #ef4444; /* red-500 from Tailwind */
}
#success-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#success-modal.opacity-100 {
    opacity: 1;
    pointer-events: auto;
}
#header-category-icons .category-header-btn {
    transition: background 0.2s, color 0.2s, border 0.2s;
    border-width: 2px;
}
#header-category-icons .category-header-btn:hover,
#header-category-icons .category-header-btn.active {
    background: var(--brand-brown-dark);
    color: #fff;
    border-color: var(--brand-brown-dark);
}
#header-category-icons img {
    pointer-events: none;
}