:root {
    /* Light Theme (Default) */
    --primary-color: #4A2C2A;
    /* Deep Chocolate */
    --secondary-color: #F4C2C2;
    /* Soft Pink */
    --accent-color: #D4AF37;
    /* Gold */
    --bg-color: #FFFDD0;
    /* Cream */
    --text-color: #333333;
    --white: #ffffff;
    --card-bg: #ffffff;
    --footer-bg: #2c1a19;
    --footer-text: #aaaaaa;
    --nav-bg: #ffffff;
    --nav-shadow: rgba(0, 0, 0, 0.1);
    --hero-overlay: rgba(0, 0, 0, 0.3);
    --font-heading: 'Playfair Display',
        serif;
    --font-body: 'Inter',
        sans-serif;
    --transition: all 0.3s ease;
}

/* Dark Theme Override */
[data-theme="dark"] {
    --primary-color: #F4C2C2;
    /* Soft Pink becomes primary for text contrast */
    --secondary-color: #4A2C2A;
    /* Deep Chocolate becomes secondary */
    --accent-color: #D4AF37;
    /* Gold remains accent */
    --bg-color: #1a1a1a;
    /* Dark Gray Background */
    --text-color: #e0e0e0;
    /* Light Gray Text */
    --white: #1a1a1a;
    /* Redefine white to dark for backgrounds that used it */
    --card-bg: #2d2d2d;
    /* Darker Gray for cards */
    --footer-bg: #111111;
    /* Very Dark Gray for footer */
    --footer-text: #cccccc;
    --nav-bg: #2d2d2d;
    --nav-shadow: rgba(0, 0, 0, 0.5);
    --hero-overlay: rgba(0, 0, 0, 0.6);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--bg-color);
    /* Changed from white to bg-color for contrast */
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--primary-color);
}

[data-theme="dark"] .btn {
    color: #1a1a1a;
    /* Ensure text is dark on the light primary color in dark mode */
}

.btn:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

/* Header */
header {
    background-color: var(--nav-bg);
    box-shadow: 0 2px 10px var(--nav-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-color);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Theme Toggle Button */
.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--primary-color);
    transition: var(--transition);
    padding: 5px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-btn:hover {
    transform: scale(1.1);
    color: var(--accent-color);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-color);
}

/* Hero Section */
.hero {
    height: 90vh;
    background: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('assets/hero_cake.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    /* Always white text on hero image */
}

.hero-content h1 {
    font-size: 4rem;
    color: #ffffff;
    /* Always white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero .btn {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.hero .btn:hover {
    background-color: transparent;
    color: #ffffff;
}

/* About Section */
.about {
    background-color: var(--card-bg);
    /* Use card-bg for sections that were white */
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text {
    flex: 1;
}

.about-image {
    flex: 1;
}

.about-image img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Features/Products Preview */
.features {
    background-color: var(--bg-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

/* Catalog Page */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.product-image {
    height: 250px;
    overflow: hidden;
    position: relative;
    /* Added for positioning arrows */
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
    cursor: pointer;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
    animation: slideRightAndLeft 10s forwards ease-in-out;
}

@keyframes slideRightAndLeft {
    0% {
        transform: scale(1.05) translateX(0);
    }

    50% {
        transform: scale(1.05) translateX(10px);
    }

    100% {
        transform: scale(1.05) translateX(0);
    }
}

/* In-Card Navigation Arrows */
.card-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
    transition: background-color 0.3s, opacity 0.3s;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Hidden by default */
}

.product-card:hover .card-nav {
    opacity: 1;
    /* Show on hover */
}

/* Show arrows on touch devices by default or active state if needed, 
   but hover works for desktop. For mobile, we might want them always visible 
   or visible on tap. Let's keep hover for now as it works on tap often. */
@media (hover: none) {
    .card-nav {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.5);
    }
}

.card-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--accent-color);
}

.card-prev {
    left: 10px;
}

.card-next {
    right: 10px;
}

.product-info {
    padding: 25px;
}

.product-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.product-info p {
    color: var(--text-color);
    opacity: 0.9;
    margin-bottom: 20px;
}

.info-item h3 {
    color: var(--accent-color);
    margin-bottom: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.info-item ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--white);
    /* In dark mode, this is dark, but footer bg is dark. Need to fix. */
}

[data-theme="dark"] .footer-col h4 {
    color: #ffffff;
    /* Force white text in footer for dark mode */
}

/* Fix for footer text in light mode */
@media (prefers-color-scheme: light) {
    .footer-col h4 {
        color: #ffffff;
    }
}


.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    color: #ffffff;
}

.social-links a:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox / Gallery Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation-name: zoom;
    animation-duration: 0.3s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    height: 150px;
    font-family: var(--font-body);
    font-size: 1.1rem;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

.lightbox-nav {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2001;
    background-color: rgba(0, 0, 0, 0.3);
}

.lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--accent-color);
}

.lightbox-prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Make images in catalog clickable */
.product-image img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-image img:hover {
    transform: scale(1.03);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--nav-bg);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-150%);
        transition: var(--transition);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .about-content {
        flex-direction: column;
    }
}

@media only screen and (max-width: 700px) {
    .lightbox-content {
        width: 100%;
    }

    .lightbox-close {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }

    .lightbox-nav {
        padding: 10px;
        font-size: 16px;
    }
}

/* Menu Page */
.pdf-container {
    width: 100%;
    height: 90vh;
    min-height: 600px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: var(--card-bg);
    margin: 0 auto;
}

.pdf-container object,
.pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.product-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}