:root {
    --primary: #906141;
    --primary-dark: #6B4530;
    --surface: #FDFAF6;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #fff8f3;
    color: #1f1b15;
}

.font-serif-tc {
    font-family: 'Noto Serif TC', serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.category-overlay {
    background-color: rgba(44, 31, 20, 0.48);
    transition: background-color 0.3s ease;
}

.category-card:hover .category-overlay {
    background-color: rgba(144, 97, 65, 0.72);
}

.category-card:hover img {
    transform: scale(1.04);
}

#product-modal,
#product-list-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-backdrop-custom {
    background-color: rgba(44, 31, 20, 0.6);
}

.carousel-item {
    display: none;
    animation: fade 1.5s ease-in-out;
}

.carousel-item.active {
    display: block;
}

@keyframes fade {
    from { opacity: .4; }
    to { opacity: 1; }
}

.about-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5zM10 20c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5zM50 20c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5zM30 35c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5zM10 50c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5zM50 50c2.5 0 5 2 5 5s-2.5 5-5 5-5-2-5-5 2.5-5 5-5z' fill='%2374492b' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.hero-slide-1 {
    background-image: url('../images/hero/slide-01.jpg');
}

.hero-slide-2 {
    background-image: url('../images/hero/slide-02.jpg');
}

.hero-slide-3 {
    background-image: url('../images/hero/slide-03.jpg?v=20260722');
}