/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Playfair+Display:wght@700&display=swap');

:root {
    /* Bodren Palette */
    --color-bg-primary: #3b261b;
    /* Deep Coffee Brown */
    --color-bg-secondary: #4a342a;
    /* Lighter Brown for Cards/Sections */
    --color-bg-accent: #2c1e1a;
    /* Darker Shadow Brown */

    --color-text-primary: #f2e6d8;
    /* Cream/Beige Text */
    --color-text-secondary: #d4c5b5;
    /* Muted Beige */
    --color-text-highlight: #e6a86c;
    /* Gold/Orange text accent */

    --color-btn-bg: #7aa19c;
    /* Muted Teal Button */
    --color-btn-text: #ffffff;

    --font-heading: 'Outfit', sans-serif;
    /* Modern Bold Sans */
    --font-body: 'Outfit', sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    --container-max-width: 1200px;
    --border-radius: 20px;
    /* Rounded soft corners */
    --glass-bg: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    background-image: linear-gradient(to bottom, #3b261b, #2c1e1a);
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: 4rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

h2 {
    font-size: 2.5rem;
    color: var(--color-text-highlight);
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Utilities */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

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

.text-gold {
    color: var(--color-text-highlight);
}

/* Buttons containing "Bodren" style */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-btn-bg);
    color: var(--color-btn-text);
    border-radius: 50px;
    font-weight: 500;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    background-color: #8bbcb6;
}

/* Add Button on Cards - Flexbox Refactor */
.menu-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    /* Ensure uniform height perception */
    padding-bottom: 30px;
    /* Standard padding */
}

.menu-item-card p {
    margin-bottom: 20px;
    /* Minimum space before button */
    flex-grow: 1;
    /* Push button down */
}

.btn-add-cart {
    position: static;
    /* Remove absolute positioning */
    margin-top: auto;
    /* Push to bottom of flex container */
    align-self: flex-end;
    /* Align to the right */

    background: linear-gradient(135deg, var(--color-gold), #b8860b);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.btn-add-cart i {
    font-size: 0.9em;
}

.btn-add-cart:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #ffd700, var(--color-gold));
    box-shadow: 0 8px 20px rgba(218, 165, 32, 0.4);
    /* Golden glow */
}

.btn-add-cart:active {
    transform: translateY(-1px);
}

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

/* Header */
header {
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: transparent;
    /* Transparent at top */
    transition: all 0.4s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

header.scrolled {
    background: rgba(30, 25, 20, 0.9);
    /* Dark glass when scrolling */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    /* Slightly compact on scroll */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

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

/* Navigation Links Alignment - Added for symmetry */
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--glass-bg);
    padding: 10px 30px;
    border-radius: 30px;
}

.nav-item {
    transition: color 0.3s;
}

.nav-item:hover {
    color: var(--color-text-highlight);
}

/* Highlighted Cart/Order Button */
.nav-cart-highlight {
    color: var(--color-text-highlight) !important;
    border: 1px solid var(--color-text-highlight);
    padding: 8px 20px !important;
    border-radius: 30px;
    transition: all 0.3s ease;
    background: rgba(230, 168, 108, 0.1);
}

.nav-cart-highlight:hover {
    background: var(--color-text-highlight);
    color: #fff !important;
    box-shadow: 0 0 15px rgba(230, 168, 108, 0.4);
}

.nav-cart-highlight::after {
    display: none;
    /* No underline for this button style */
}

.desktop-only {
    display: inline-block;
}

.logo-img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-text-highlight);
}

.nav-links {
    background: var(--glass-bg);
    padding: 10px 30px;
    border-radius: 30px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    gap: var(--spacing-md);
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    opacity: 0.8;
}

.nav-links a:hover {
    opacity: 1;
    color: var(--color-text-highlight);
}

/* Extracted Utilities */
.btn-contact {
    padding: 10px 25px;
    font-size: 0.9rem;
}

.rating-large {
    font-size: 1.5rem;
    margin-top: 10px;
}

.rating-text {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-left: 10px;
}

.address-text {
    margin-bottom: 20px;
}

.btn-directions {
    margin-bottom: 30px;
}

.insta-handle {
    color: var(--color-text-highlight);
    font-size: 1.2rem;
}

.bean-top-left {
    top: 20%;
    left: 5%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.2;
}

.bean-bottom-right {
    bottom: 10%;
    right: 10%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.2;
}

.card-desc {
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.about-header-container {
    margin-bottom: 60px;
}

.text-uppercase-spacing {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.center-feature-container {
    grid-column: span 2;
    text-align: center;
    margin: 40px 0;
}

.center-feature-img {
    max-width: 300px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.footer-cta {
    margin-bottom: 30px;
}

.trust-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #ffd700;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    font-weight: 500;
}

.footer-title {
    font-size: 2rem;
}

.btn-quiz {
    margin-top: 20px;
    background-color: #d4a373;
    color: #fff;
}

.footer-copyright {
    margin-top: 30px;
    opacity: 0.5;
    font-size: 0.8rem;
}

/* Add Button on Cards */
.menu-item-card {
    position: relative;
    padding-bottom: 90px;
    /* Increased space to prevent overlap */
}

/* Hero Section */
.hero {
    min-height: 100vh;
    padding-top: 150px;
    /* Space for header */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-text-content {
    z-index: 2;
}

.hero-desc {
    font-size: 1.2rem;
    max-width: 500px;
    margin-bottom: var(--spacing-md);
    opacity: 0.9;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-wrapper {
    width: 100%;
    max-width: 500px;
    animation: float 6s ease-in-out infinite;
}

.hero-main-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    transform: rotate(5deg);
}

/* Cards / Offerings */
.offerings-section {
    padding: var(--spacing-xl) 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.card {
    background: var(--glass-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    text-align: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
}

.card-img-container {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

.product-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.card:hover .product-img {
    transform: scale(1.1) rotate(5deg);
}

.card h3 {
    margin-top: var(--spacing-sm);
    color: var(--color-text-primary);
}

.card-rating {
    color: #ffd700;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.card-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-text-highlight);
    margin: var(--spacing-sm) 0;
    display: block;
}

.card-add {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-btn-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* About / Stats Section (1, 2, 3...) */
.about-section {
    padding: var(--spacing-xl) 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.feature-number {
    font-size: 8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.03);
    line-height: 0.8;
    position: absolute;
    z-index: -1;
    transform: translate(-20px, -20px);
}

.feature-item {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

/* Footer */
footer {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-bg-accent);
    margin-top: var(--spacing-xl);
    border-radius: 50px 50px 0 0;
}

.social-links a {
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin: 0 10px;
}

/* Floating Beans Animation */
.floating-bean {
    position: absolute;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    animation: float 10s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Refined Errors Fixes */
.roaster-desc-container,
.section-separator {
    /* Kept for compatibility if used, but redefined styles above take precedence in new layout */
    margin: 0 auto;
}

/* Testimonials */
.testimonials-section {
    padding: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.testimonial-card {
    background: var(--glass-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.testimonial-text {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-text-highlight);
}

/* Location & Hours */
.location-section {
    padding: var(--spacing-xl) 0;
    background: rgba(0, 0, 0, 0.2);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.map-container {
    height: 100%;
    min-height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--color-text-highlight);
}

.hours-container {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hours-list {
    list-style: none;
    margin-top: 20px;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hours-list li:last-child {
    border-bottom: none;
}

.day {
    font-weight: 700;
    color: var(--color-text-highlight);
}

/* Instagram Feed */
.instagram-section {
    padding: var(--spacing-xl) 0;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: var(--spacing-lg);
}

.insta-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.insta-img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-on-scroll {
    opacity: 0;
    /* Hidden by default */
}

.animate-on-scroll.is-visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

.fade-left.is-visible {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.pop-in.is-visible {
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Quiz Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.quiz-container {
    background: var(--color-bg-secondary);
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: var(--border-radius);
    text-align: center;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-text-highlight);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .quiz-container {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--color-text-highlight);
}

.quiz-question {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: var(--color-text-primary);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quiz-btn {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.quiz-btn:hover {
    background: var(--color-text-highlight);
    color: var(--color-bg-primary);
    transform: translateX(5px);
}

.quiz-result {
    display: none;
    animation: fadeIn 0.5s ease;
}

/* --- Menu Page Specific Styles --- */
.menu-hero {
    padding: 200px 0 100px 0;
    text-align: center;
    background: radial-gradient(circle at center, rgba(65, 45, 35, 0.4) 0%, transparent 70%);
}

.menu-category-block {
    margin-bottom: 120px;
    background: transparent;
    /* Remove solid background for open feel */
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.category-header {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease-out;
    /* Smooth parallax feel */
    filter: brightness(0.85) contrast(1.1);
}

.menu-category-block:hover .category-img {
    transform: scale(1.02);
}

.category-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.5), transparent);
    z-index: 2;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.category-title-overlay.right {
    text-align: right;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.5), transparent);
}

.category-title-overlay h2 {
    font-size: 4rem;
    color: var(--color-text-primary);
    margin-bottom: 5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    font-family: var(--font-heading);
    letter-spacing: -1px;
}

.category-title-overlay p {
    font-size: 1.4rem;
    color: var(--color-text-highlight);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 60px 20px 20px 20px;
    margin-top: -50px;
    /* Overlap effect */
    position: relative;
    z-index: 5;
}

.menu-item-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.menu-item-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    /* Brighter glass */
    border-color: var(--color-text-highlight);
    box-shadow: 0 20px 40px rgba(230, 168, 108, 0.15);
    /* Golden Glow */
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.item-header h4 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.item-header .price {
    font-size: 1.3rem;
    color: var(--color-text-highlight);
    font-weight: 700;
}

.menu-item-card p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
    font-weight: 300;
}

/* Scrollbar for 'vibey' feel if needed, but keeping it standard for now */

/* Menu Page Mobile & Responsiveness */
@media (max-width: 768px) {
    .menu-hero {
        padding-top: 120px;
        padding-bottom: 30px;
    }

    .menu-hero h1 {
        font-size: 1.8rem !important;
        /* Reduced further to fit single line */
        line-height: 1.1;
        margin-bottom: 10px;
        word-wrap: break-word;
        /* Ensure wrapping */
    }

    .menu-hero p {
        font-size: 1rem;
        padding: 0 15px;
        line-height: 1.4;
    }

    .menu-category-block {
        margin-bottom: 40px;
        border-radius: 12px;
    }

    .category-header {
        height: 220px;
        margin-bottom: 20px;
        /* Added spacing between image and list */
        /* Reduced height for mobile */
    }

    .category-title-overlay {
        padding: 20px;
        /* Reduced padding */
    }

    .category-title-overlay h2 {
        font-size: 1.8rem;
        /* Significantly smaller */
        margin-bottom: 0;
    }

    .category-title-overlay p {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    .menu-items-grid {
        display: block;
        /* Stack items vertically */
        padding: 0 15px 30px 15px;
        margin-top: 0;
        /* Removing negative margin on mobile for cleaner stack */
        position: relative;
        z-index: 5;
    }

    .menu-item-card {
        margin-bottom: 15px;
        /* Spacing between cards */
        background: rgba(255, 255, 255, 0.05);
        /* Slightly clearer background */
        padding: 20px;
    }

    .menu-item-card:hover {
        transform: none;
        /* Disable lift on touch devices */
        box-shadow: none;
    }

    .item-header h4 {
        font-size: 1.2rem;
    }

    .item-header .price {
        font-size: 1.1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /* Tablet Tweak */
    .menu-items-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on tablet */
    }
}

.result-drink {
    font-size: 2rem;
    color: var(--color-text-highlight);
    margin: 20px 0;
    font-family: var(--font-heading);
}

.quiz-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--color-text-highlight);
    width: 0%;
    transition: width 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 3rem;
    }

    .hero-video-wrapper {
        height: 300px;
    }

    /* Mobile Navigation */
    /* Full Menu Styles */
    .menu-container {
        background: var(--glass-bg);
        border-radius: var(--border-radius);
        padding: 40px;
        margin-top: 40px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .menu-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .menu-category h3 {
        color: var(--color-text-highlight);
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-size: 1.8rem;
    }

    .menu-list {
        list-style: none;
    }

    .menu-list-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
        padding-bottom: 5px;
    }

    .menu-item-name {
        font-weight: 500;
        font-size: 1.1rem;
    }

    .menu-item-price {
        font-weight: 700;
        color: var(--color-text-highlight);
    }

    .menu-item-desc {
        font-size: 0.9rem;
        color: var(--color-text-secondary);
        margin-top: -10px;
        margin-bottom: 15px;
        display: block;
    }

    @media (max-width: 768px) {
        .menu-grid-layout {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(59, 38, 27, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 20px 0;
        text-align: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 15px;
        font-size: 1.2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hamburger-menu {
        display: block;
    }

    .desktop-only {
        display: none;
        /* Hide Contact button in header to save space, or keep it depending on preference. User image showed it present, but let's prioritize menu. Actually, let's keep contact button if it fits, but user's image showed menu missing. I'll hide desktop button to make room for hamburger if needed, OR put hamburger next to it. Let's hide 'desktop-only' contact for now to be safe, or rename class to hide-on-mobile. user image showed contact button, so maybe they want it. I'll keep contact button HIDDEN inside nav-links for now? No, let's just use the hamburger for links. */
        display: block;
        /* Wait, user image showed contact button present. I will keep it visible but maybe smaller? Or let hamburger take left/right? Let's keep hamburger on right, logo left. Contact button might overlay? */
    }

    .desktop-only {
        display: none;
    }

    /* Fixes for Location Section */
    .location-grid {
        grid-template-columns: 1fr;
    }

    .map-container {
        min-height: 250px;
    }

    .hours-container {
        padding: 25px;
        /* Reduced from 40px */
    }

    .hours-list li {
        gap: 10px;
        /* Prevent text touching */
        font-size: 0.95rem;
        /* Slightly smaller text */
    }

}

/* --- Business Menu Overhaul --- */
.menu-list-section {
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.menu-section-header {
    text-align: left;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.menu-section-header h2 {
    font-size: 2rem;
    color: var(--color-gold);
    margin-bottom: 5px;
}

.menu-section-header p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-style: italic;
    opacity: 0.8;
}

.menu-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.menu-list-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.item-details h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #fff;
    font-family: var(--font-heading);
}

.item-badge {
    font-size: 0.7rem;
    background: var(--color-gold);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-weight: bold;
}

.price-action {
    display: flex;
    align-items: center;
    gap: 15px;
}

.price {
    font-size: 1.1rem;
    color: var(--color-text-highlight);
    font-weight: 500;
}

.btn-add-minimal {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-add-minimal:hover {
    background: var(--color-gold);
    color: #000;
    border-color: var(--color-gold);
}

/* Zig-Zag Menu Layout */
.menu-split-section {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    /* Text wider than image? Or equal? Let's go 1:1 or 1.2:0.8 */
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
    background: rgba(30, 25, 20, 0.3);
    /* Subtle backdrop */
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-split-section.image-left {
    grid-template-areas: "img txt";
    grid-template-columns: 0.8fr 1fr;
}

.menu-split-section.image-right {
    grid-template-areas: "txt img";
    grid-template-columns: 1fr 0.8fr;
}

.menu-split-text {
    grid-area: txt;
}

.menu-split-image-container {
    grid-area: img;
    height: 100%;
    min-height: 300px;
    /* Ensure height */
    overflow: hidden;
    border-radius: 15px;
}

.menu-split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.menu-split-section:hover .menu-split-img {
    transform: scale(1.03);
}

@media (max-width: 768px) {

    .menu-split-section,
    .menu-split-section.image-left,
    .menu-split-section.image-right {
        grid-template-columns: 1fr;
        grid-template-areas:
            "img"
            "txt";
        gap: 20px;
    }

    .menu-split-image-container {
        min-height: 200px;
        max-height: 250px;
    }
}

.signature-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: rgba(30, 25, 20, 0.6);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 80px;
    border: 1px solid rgba(230, 168, 108, 0.1);
}

.signature-img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Combo Section */
.combo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.combo-card {
    background: linear-gradient(145deg, rgba(40, 30, 25, 0.9), rgba(20, 15, 10, 0.9));
    border: 1px solid var(--color-gold);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.combo-card:hover {
    transform: translateY(-5px);
}

.combo-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.combo-title {
    font-size: 1.1rem;
    color: var(--color-gold);
    margin: 10px 0;
}

.combo-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
}

.menu-cta-container {
    text-align: center;
    padding: 80px 0;
    background: radial-gradient(circle, rgba(230, 168, 108, 0.1) 0%, transparent 60%);
}

@media (max-width: 768px) {
    .signature-section {
        grid-template-columns: 1fr;
        padding: 20px;
        /* Reduce padding on mobile */
        gap: 30px;
    }

    /* Consistent Image sizing for mobile signatures/combos */
    .signature-section .image-content {
        order: -1;
        /* Ensure image is always on top on mobile */
        max-height: 300px;
        overflow: hidden;
        border-radius: 15px;
    }

    .signature-img {
        height: 100%;
        object-fit: cover;
    }

    .combo-grid {
        grid-template-columns: 1fr;
        /* Force single column stack for cards on mobile */
        gap: 15px;
    }
}

/* Checkout Page Specifics (Global to reuse if needed) */
.checkout-urgency {
    color: #4caf50;
    /* Green for go/fresh/positive */
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-signals {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.upsell-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.upsell-header {
    font-size: 1rem;
    color: var(--color-gold);
    margin-bottom: 15px;
}

.upsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.upsell-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.upsell-item:hover {
    background: var(--color-gold);
    color: #000;
}

.upsell-name {
    font-size: 0.8rem;
    display: block;
    margin-bottom: 5px;
}

.upsell-price {
    font-size: 0.9rem;
    font-weight: bold;
}

/* Menu Cleanup Classes */
.hero-main-title {
    font-size: 3rem;
    line-height: 1.2;
}

.signature-heading {
    color: var(--color-gold);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.signature-subheading {
    color: #ccc;
    margin-bottom: 30px;
}

.divider-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-description-small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.margin-bottom-large {
    margin-bottom: 120px;
}

.header-centered {
    border: none !important;
    text-align: center !important;
}

.combo-highlight-box {
    background: linear-gradient(to right, rgba(40, 30, 25, 0.9), rgba(20, 15, 10, 0.9));
    margin-bottom: 20px;
}

.combo-description {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.btn-full-width {
    margin-top: 15px;
    width: 100%;
}

.cta-subtext {
    margin-bottom: 30px;
    color: #ccc;
}

.cta-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}



/* Checkout Quantity Controls */
.qty-controls-checkout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: middle;
}

.btn-qty {
    background: none;
    border: none;
    color: var(--color-gold);
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 5px;
    transition: color 0.2s;
}

.btn-qty:hover {
    color: #fff;
    transform: scale(1.2);
}

.qty-display {
    font-size: 0.9rem;
    min-width: 20px;
    text-align: center;
}

/* --- Cart Slide-in Drawer System --- */

/* Floating Cart Button */
.cart-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-gold), #b8860b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 2000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

header.scrolled {
    background: rgba(30, 25, 20, 0.9);
    /* Dark glass when scrolling */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    /* Slightly compact on scroll */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Utilities for Footer */
.footer-margin-top {
    margin-top: 50px;
}

.created-by-link {
    color: var(--color-text-highlight);
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.8;
}

.created-by-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.cart-floating-btn:hover {
    transform: scale(1.1) rotate(5deg);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4757;
    color: white;
    font-size: 0.75rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid #2a2a2a;
}

/* Cart Overlay (Background Dim) */
.cart-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2001;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    /* Scaling animation start */
    transition: opacity 0.3s ease;
}

/* Slide-in Drawer */
.cart-content {
    position: absolute;
    top: 0;
    right: -100%;
    /* Start off-screen */
    width: 100%;
    max-width: 450px;
    height: 100%;
    background: rgba(30, 25, 20, 0.95);
    /* Deep brown/black glass */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active State for JS to toggle */
.cart-modal[style*="display: flex"] {
    opacity: 1;
}

.cart-modal[style*="display: flex"] .cart-content {
    right: 0;
    /* Slide in */
}

/* Header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.cart-header h2 {
    font-size: 2rem;
    margin: 0;
    color: var(--color-gold);
    font-family: var(--font-heading);
    letter-spacing: -0.5px;
}

.close-cart {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s;
}

.close-cart:hover {
    color: #fff;
}

/* Items List */
.cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 5px;
    /* Space for scrollbar */
}

/* Custom Scrollbar */
.cart-items::-webkit-scrollbar {
    width: 6px;
}

.cart-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.cart-item-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.cart-item-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #f0f0f0;
}

.item-qty {
    font-size: 0.85rem;
    color: var(--color-gold);
    background: rgba(230, 168, 108, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.item-action {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.item-price {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text-highlight);
}

.btn-remove {
    background: transparent;
    border: none;
    color: #ff4757;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-remove:hover {
    opacity: 1;
}

/* Footer & Total */
.cart-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 1.4rem;
}

.cart-total span:first-child {
    color: var(--color-text-secondary);
}

.cart-total span:last-child {
    color: var(--color-gold);
    font-weight: 700;
    font-size: 1.8rem;
}

.btn-checkout {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-gold), #b8860b);
    border: none;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 165, 32, 0.5);
}

/* Animations included in index.html already (.pop-in) */

/* Checkout Form Styling */
.checkout-content .form-group {
    margin-bottom: 20px;
}

.checkout-content label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.checkout-content input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s;
}

.checkout-content input:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(230, 168, 108, 0.1);
}

/* Toast */
.toast-msg {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: var(--color-gold);
    padding: 15px 30px;
    border-radius: 50px;
    z-index: 3000;
    border: 1px solid var(--color-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

.toast-error {
    border-color: #ff4444;
    color: #ff4444;
}

/* Menu Preview Spacing */
.view-menu-container {
    margin-top: 80px;
    text-align: center;
}

/* Centered Options Modal */
.options-modal-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    height: auto;
    max-height: 85vh;
    background: rgba(30, 25, 20, 0.95);
    border: 1px solid var(--color-gold);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(230, 168, 108, 0.2);
    border-radius: 20px;
    padding: 30px;
    z-index: 3001;
    overflow-y: auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.options-modal-centered h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--color-gold);
}

.options-modal-centered label {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    margin-bottom: 10px;
}

.options-modal-centered label:hover {
    background: rgba(230, 168, 108, 0.1);
    border-color: var(--color-gold);
}

/* --- Side Cart Quantity Controls --- */

.cart-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.btn-qty-mini {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.btn-qty-mini:hover {
    border-color: var(--color-text-highlight);
    color: var(--color-text-highlight);
    background: rgba(255, 255, 255, 0.05);
}

.item-qty {
    font-size: 0.9rem;
    min-width: 15px;
    text-align: center;
}

/* --- Premium Modal Styling (Overrides & New) --- */

/* 1. Modal Background & Structure */
.options-modal-centered {
    background: rgba(44, 30, 26, 0.98) !important;
    /* Deep Coffee Brown Opaque */
    border: 1px solid rgba(230, 168, 108, 0.3) !important;
    /* Subtle Gold Border */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    width: 90% !important;
    max-width: 420px !important;
}

.options-modal-centered h2 {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.options-modal-centered h4 {
    color: var(--color-text-highlight);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* 2. Premium Option Cards */
.option-label {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Effect */
.option-label:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
}

/* Selected State (using :has() selector) */
.option-label:has(input:checked) {
    background: linear-gradient(135deg, rgba(230, 168, 108, 0.15), rgba(44, 30, 26, 0.8)) !important;
    border-color: var(--color-text-highlight) !important;
    box-shadow: 0 4px 15px rgba(230, 168, 108, 0.1);
}

/* Hide Default Input */
.option-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Option Text */
.option-text {
    font-size: 1rem;
    font-weight: 500;
    color: #e0e0e0;
    transition: color 0.2s;
}

.option-label:has(input:checked) .option-text {
    color: #fff;
    font-weight: 600;
}

/* Custom Check Indicator */
.option-check-mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    transition: all 0.3s;
}

/* If radio is checked, fill the circle */
.option-label input:checked~.option-check-mark {
    border-color: var(--color-text-highlight);
    background-color: var(--color-text-highlight);
    box-shadow: 0 0 10px var(--color-text-highlight);
}

/* Inner white dot for radio logic */
.option-label input:checked~.option-check-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}


/* 3. Unified Quantity Pill */
.qty-selector-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.qty-selector-container h4 {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
}

.qty-controls {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 5px;
    gap: 0;
    width: 100%;
    max-width: 200px;
}

.btn-qty {
    width: 45px;
    height: 45px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
}

.btn-qty:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-highlight);
}

#qty-display {
    flex-grow: 1;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-highlight);
    font-family: 'Playfair Display', serif;
}

/* Checkout Button */
#btn-confirm-options {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--color-gold), #b8860b);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 20px rgba(218, 165, 32, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
}

#btn-confirm-options:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(218, 165, 32, 0.3);
}

/* --- Custom Scrollbar for Modal --- */
.options-modal-centered::-webkit-scrollbar {
    width: 8px;
}

.options-modal-centered::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.options-modal-centered::-webkit-scrollbar-thumb {
    background: rgba(230, 168, 108, 0.5);
    border-radius: 4px;
}

.options-modal-centered::-webkit-scrollbar-thumb:hover {
    background: rgba(230, 168, 108, 0.8);
}

/* --- Checkout Page Quantity Controls --- */
.qty-controls-checkout {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.qty-controls-checkout .btn-qty {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.qty-controls-checkout .qty-display {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 25px;
    text-align: center;
    color: var(--color-text-highlight);
}

/* --- Item Badge (e.g., Must Try) --- */
.item-badge {
    background-color: var(--color-text-highlight);
    color: #2c1e1a;
    /* Dark text on gold background */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* --- Mobile Floating Cart Button --- */
#mobile-cart-fab {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    /* Hidden by default */
    width: 90%;
    max-width: 380px;
    background: var(--color-text-highlight);
    /* Gold background */
    color: #2c1e1a;
    /* Dark text */
    padding: 10px 15px;
    /* Reduced padding */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease-out;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px;
    border: none;
    font-weight: 700;
}

#mobile-cart-fab span {
    white-space: nowrap;
}

#mobile-cart-fab.visible {
    transform: translateX(-50%) translateY(0);
}

#mobile-cart-fab .fab-text {
    font-weight: 700;
    font-size: 0.9rem;
    /* Reduced from 1rem */
    flex: 1;
    /* Allow it to take space but not push others out excessively */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Safety logic */
    margin-right: 10px;
}

#mobile-cart-fab .fab-total {
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 10px;
    /* Compact padding */
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    /* Slightly smaller */
    flex-shrink: 0;
    /* Don't shrink the price/count */
}

@media (min-width: 769px) {
    #mobile-cart-fab {
        display: none !important;
    }
}

/* --- Fix for Add Button Sticky State --- */
.btn-add-minimal {
    background: transparent;
    border: 1px solid var(--color-text-highlight);
    color: var(--color-text-highlight);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s;
    outline: none;
}

.btn-add-minimal:focus,
.btn-add-minimal:active {
    background: transparent !important;
    color: var(--color-text-highlight) !important;
    border-color: var(--color-text-highlight) !important;
    outline: none !important;
    box-shadow: none;
}

.btn-add-minimal:active {
    transform: scale(0.9);
}

/* --- On-Card Quantity Controls --- */
.card-qty-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 2px;
    border-radius: 20px;
    animation: fadeIn 0.3s ease;
}

.qty-btn-card {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-text-highlight);
    background: transparent;
    color: var(--color-text-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn-card:hover {
    background: rgba(230, 168, 108, 0.1);
}

.qty-btn-card.plus {
    background: rgba(255, 255, 255, 0.05);
    /* Slightly distinct "plus" */
}

.qty-val-card {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #3b2f2f;
    /* Dark brown from image */
    border-radius: 8px;
    /* Rounded rectangle */
    margin: 0 4px;
    /* Spacing from buttons */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Utility Classes (Replacing Inline Styles) --- */
.icon-gold {
    color: gold;
}

.cta-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

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