/* ==========================================
    Kopi Mungil - Cute & Cozy Design System
    ========================================== */
 
 :root {
   /* Palette Colors */
   --bg-cream: #FAF4ED;
   --bg-soft: #FFF9F3;
   --card-bg: #FFFFFF;
   
   --mocha-dark: #4A3525;
   --mocha-medium: #6F4E37;
   --caramel-warm: #D9822B;
   --caramel-light: #F4D3B0;
   --blush-pink: #F7C8C5;
   --matcha-green: #8CA972;
   --soft-yellow: #FBE6A2;
   
   --text-main: #3D2D24;
   --text-muted: #826E63;
   --text-light: #A49286;
   
   /* Shadows & Radius */
   --radius-sm: 12px;
   --radius-md: 20px;
   --radius-lg: 32px;
   --radius-full: 999px;
   
   --shadow-soft: 0 10px 30px rgba(111, 78, 55, 0.07);
   --shadow-hover: 0 16px 36px rgba(111, 78, 55, 0.12);
   --shadow-float: 0 20px 40px rgba(74, 53, 37, 0.15);
   
   --transition-smooth: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* Reset & Base Settings */
 *,
 *::before,
 *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 html {
   scroll-behavior: smooth;
   font-size: 16px;
 }
 
 body {
   font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
   background-color: var(--bg-cream);
   color: var(--text-main);
   line-height: 1.6;
   overflow-x: hidden;
 }
 
 h1, h2, h3, h4, .logo-text {
   font-family: 'Fredoka', cursive, sans-serif;
   font-weight: 600;
   color: var(--mocha-dark);
 }
 
 a {
   text-decoration: none;
   color: inherit;
 }
 
 ul {
   list-style: none;
 }
 
 button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   outline: none;
   background: none;
 }
 
 .container {
   width: 90%;
   max-width: 1160px;
   margin: 0 auto;
 }
 
 .section-padding {
   padding: 100px 0;
 }
 
 /* Custom Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: var(--radius-full);
   font-weight: 600;
   font-size: 1rem;
   transition: var(--transition-smooth);
   cursor: pointer;
 }
 
 .btn-primary {
   background: linear-gradient(135deg, var(--caramel-warm), #C46E19);
   color: #FFFFFF;
   box-shadow: 0 6px 20px rgba(217, 130, 43, 0.3);
 }
 
 .btn-primary:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 10px 25px rgba(217, 130, 43, 0.4);
 }
 
 .btn-secondary {
   background-color: #FFFFFF;
   color: var(--mocha-dark);
   border: 2px solid var(--caramel-light);
   box-shadow: var(--shadow-soft);
 }
 
 .btn-secondary:hover {
   background-color: var(--bg-soft);
   transform: translateY(-3px);
   border-color: var(--caramel-warm);
 }
 
 .btn-lg {
   padding: 16px 32px;
   font-size: 1.05rem;
 }
 
 .btn-block {
   width: 100%;
 }
 
 /* Badges & Titles */
 .section-header {
   margin-bottom: 50px;
 }
 
 .text-center {
   text-align: center;
 }
 
 .section-subtitle {
   display: inline-block;
   background-color: rgba(217, 130, 43, 0.12);
   color: var(--caramel-warm);
   padding: 6px 16px;
   border-radius: var(--radius-full);
   font-size: 0.9rem;
   font-weight: 700;
   margin-bottom: 12px;
 }
 
 .section-title {
   font-size: 2.3rem;
   line-height: 1.3;
   margin-bottom: 12px;
 }
 
 .section-desc {
   color: var(--text-muted);
   max-width: 600px;
   margin: 0 auto;
   font-size: 1.05rem;
 }
 
 /* ==========================================
    Navbar Styling
    ========================================== */
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   padding: 20px 0;
   transition: all 0.3s ease;
 }
 
 .navbar.scrolled {
   background: rgba(250, 244, 237, 0.92);
   backdrop-filter: blur(12px);
   padding: 12px 0;
   box-shadow: 0 4px 20px rgba(74, 53, 37, 0.06);
 }
 
 .nav-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 90%;
   max-width: 1160px;
   margin: 0 auto;
 }
 
 .logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.5rem;
 }
 
 .logo-icon {
   background-color: var(--caramel-warm);
   color: white;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(217, 130, 43, 0.3);
 }
 
 .logo-text {
   font-size: 1.5rem;
   letter-spacing: -0.5px;
 }
 
 .logo-text .dot {
   color: var(--caramel-warm);
 }
 
 .nav-links {
   display: flex;
   gap: 32px;
 }
 
 .nav-link {
   font-weight: 600;
   color: var(--text-muted);
   transition: color 0.2s;
   position: relative;
 }
 
 .nav-link:hover,
 .nav-link.active {
   color: var(--caramel-warm);
 }
 
 .nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 50%;
   transform: translateX(-50%) scaleX(0);
   width: 18px;
   height: 3px;
   background-color: var(--caramel-warm);
   border-radius: 4px;
   transition: transform 0.3s ease;
 }
 
 .nav-link:hover::after,
 .nav-link.active::after {
   transform: translateX(-50%) scaleX(1);
 }
 
 .nav-actions {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
 .cart-btn {
   position: relative;
   background-color: var(--card-bg);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--mocha-dark);
   box-shadow: var(--shadow-soft);
   transition: var(--transition-smooth);
 }
 
 .cart-btn:hover {
   transform: scale(1.08);
   color: var(--caramel-warm);
 }
 
 .cart-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   background-color: var(--caramel-warm);
   color: white;
   font-size: 0.75rem;
   font-weight: 700;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid var(--bg-cream);
 }
 
 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   width: 30px;
   height: 24px;
 }
 
 .hamburger span {
   display: block;
   width: 100%;
   height: 3px;
   background-color: var(--mocha-dark);
   border-radius: 3px;
   transition: 0.3s;
 }
 
 /* ==========================================
    Hero Section
    ========================================== */
 .hero-section {
   position: relative;
   padding: 160px 0 90px 0;
   overflow: hidden;
 }
 
 .hero-bg-shapes .shape {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   z-index: -1;
   opacity: 0.5;
 }
 
 .shape-1 {
   width: 350px;
   height: 350px;
   background-color: var(--caramel-light);
   top: -50px;
   left: -100px;
 }
 
 .shape-2 {
   width: 400px;
   height: 400px;
   background-color: var(--blush-pink);
   right: -100px;
   bottom: 0;
 }
 
 .shape-3 {
   width: 250px;
   height: 250px;
   background-color: var(--soft-yellow);
   top: 40%;
   left: 45%;
 }
 
 .hero-container {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   align-items: center;
   gap: 40px;
 }
 
 .cute-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #FFFFFF;
   padding: 8px 18px;
   border-radius: var(--radius-full);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--mocha-dark);
   box-shadow: var(--shadow-soft);
   margin-bottom: 20px;
 }
 
 .hero-title {
   font-size: 3.2rem;
   line-height: 1.25;
   margin-bottom: 20px;
 }
 
 .hero-title .highlight {
   color: var(--caramel-warm);
   position: relative;
 }
 
 .hero-desc {
   font-size: 1.15rem;
   color: var(--text-muted);
   margin-bottom: 32px;
   max-width: 520px;
 }
 
 .hero-buttons {
   display: flex;
   gap: 16px;
   margin-bottom: 40px;
   flex-wrap: wrap;
 }
 
 .hero-features {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   padding-top: 20px;
   border-top: 2px dashed rgba(111, 78, 55, 0.12);
 }
 
 .feature-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--text-muted);
 }
 
 /* Cute Cup Animation Illustration */
 .hero-visual {
   display: flex;
   justify-content: center;
   position: relative;
 }
 
 .cup-illustration-card {
   background: linear-gradient(145deg, #FFFFFF, #FFF5EA);
   padding: 50px 40px;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-float);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   border: 3px solid #FFFFFF;
 }
 
 /* Steam Animation */
 .steam-container {
   display: flex;
   gap: 12px;
   margin-bottom: 10px;
 }
 
 .steam {
   font-size: 2rem;
   color: var(--caramel-warm);
   opacity: 0.7;
   animation: floatSteam 2.5s infinite ease-in-out;
 }
 
 .steam-2 {
   animation-delay: 0.4s;
 }
 
 .steam-3 {
   animation-delay: 0.8s;
 }
 
 @keyframes floatSteam {
   0% {
     transform: translateY(0) scale(1);
     opacity: 0.2;
   }
   50% {
     transform: translateY(-15px) scale(1.2);
     opacity: 0.8;
   }
   100% {
     transform: translateY(-30px) scale(1.4);
     opacity: 0;
   }
 }
 
 /* Cute Cup Vector */
 .cozy-cup-graphic {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .cup-body {
   width: 160px;
   height: 180px;
   background: linear-gradient(180deg, #6F4E37 0%, #4A3525 100%);
   border-radius: 20px 20px 60px 60px;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: inset 0 -10px 20px rgba(0,0,0,0.15);
 }
 
 .cup-face {
   display: flex;
   align-items: center;
   gap: 6px;
   color: #FFFFFF;
   margin-bottom: 14px;
 }
 
 .cup-face .eye {
   font-size: 1.4rem;
   font-weight: bold;
 }
 
 .cup-face .mouth {
   font-size: 1.1rem;
   margin-top: 6px;
 }
 
 .cup-face .blush {
   width: 10px;
   height: 10px;
   background-color: var(--blush-pink);
   border-radius: 50%;
   opacity: 0.8;
 }
 
 .cup-sleeve {
   background-color: #FFFFFF;
   color: var(--mocha-dark);
   padding: 6px 16px;
   border-radius: var(--radius-full);
   font-size: 0.85rem;
   font-weight: 700;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
 .cup-handle {
   position: absolute;
   right: -32px;
   top: 40px;
   width: 45px;
   height: 90px;
   border: 12px solid #6F4E37;
   border-left: none;
   border-radius: 0 30px 30px 0;
 }
 
 .cup-saucer {
   width: 200px;
   height: 16px;
   background-color: #E6D2C3;
   border-radius: 20px;
   margin-top: 8px;
   box-shadow: 0 6px 12px rgba(0,0,0,0.08);
 }
 
 /* Floating Stickers */
 .floating-sticker {
   position: absolute;
   background: #FFFFFF;
   padding: 10px 18px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-hover);
   display: flex;
   flex-direction: column;
   font-weight: 700;
   font-size: 0.85rem;
   border: 2px solid var(--bg-soft);
   animation: floatBadge 3.5s infinite ease-in-out;
 }
 
 .sticker-1 {
   top: 20px;
   right: -30px;
   color: var(--caramel-warm);
   animation-delay: 0s;
 }
 
 .sticker-2 {
   bottom: 40px;
   left: -35px;
   color: var(--mocha-dark);
   animation-delay: 1.2s;
 }
 
 .sticker-3 {
   bottom: -20px;
   right: 10px;
   background-color: var(--soft-yellow);
   color: var(--mocha-dark);
   animation-delay: 2s;
 }
 
 @keyframes floatBadge {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
 }
 
 /* ==========================================
    Highlights Bar
    ========================================== */
 .highlights-bar {
   background-color: var(--card-bg);
   padding: 30px 0;
   box-shadow: var(--shadow-soft);
   border-y: 1px solid rgba(111, 78, 55, 0.05);
 }
 
 .highlights-flex {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
 }
 
 .highlight-box {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
 .highlight-emoji {
   font-size: 2.2rem;
   background-color: var(--bg-soft);
   width: 60px;
   height: 60px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
 .highlight-box h3 {
   font-size: 1.1rem;
   margin-bottom: 2px;
 }
 
 .highlight-box p {
   font-size: 0.88rem;
   color: var(--text-muted);
 }
 
 /* ==========================================
    Menu Section
    ========================================== */
 .menu-tabs {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-bottom: 40px;
   flex-wrap: wrap;
 }
 
 .tab-btn {
   padding: 10px 24px;
   border-radius: var(--radius-full);
   background-color: var(--card-bg);
   color: var(--text-muted);
   font-weight: 600;
   font-size: 0.95rem;
   transition: var(--transition-smooth);
   box-shadow: var(--shadow-soft);
 }
 
 .tab-btn:hover,
 .tab-btn.active {
   background-color: var(--caramel-warm);
   color: #FFFFFF;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(217, 130, 43, 0.3);
 }
 
 .menu-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 28px;
 }
 
 .menu-card {
   background-color: var(--card-bg);
   border-radius: var(--radius-md);
   padding: 24px;
   box-shadow: var(--shadow-soft);
   transition: var(--transition-smooth);
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   border: 2px solid transparent;
 }
 
 .menu-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-hover);
   border-color: var(--caramel-light);
 }
 
 .menu-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   background-color: var(--soft-yellow);
   color: var(--mocha-dark);
   font-size: 0.75rem;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: var(--radius-full);
 }
 
 .menu-img-wrapper {
   height: 140px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4.5rem;
   margin-bottom: 16px;
   background: var(--bg-soft);
   border-radius: var(--radius-sm);
   transition: transform 0.3s ease;
 }
 
 .menu-card:hover .menu-img-wrapper {
   transform: scale(1.06);
 }
 
 .menu-title {
   font-size: 1.2rem;
   margin-bottom: 6px;
 }
 
 .menu-desc {
   font-size: 0.88rem;
   color: var(--text-muted);
   margin-bottom: 18px;
   flex-grow: 1;
 }
 
 .menu-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
   padding-top: 12px;
   border-top: 1px dashed rgba(111, 78, 55, 0.1);
 }
 
 .menu-price {
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--caramel-warm);
 }
 
 .add-item-btn {
   background-color: var(--bg-soft);
   color: var(--mocha-dark);
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   font-weight: bold;
   transition: var(--transition-smooth);
 }
 
 .add-item-btn:hover {
   background-color: var(--caramel-warm);
   color: #FFFFFF;
   transform: scale(1.15);
 }
 
 /* ==========================================
    Interactive Drink Customizer Section
    ========================================== */
 .customizer-section {
   background-color: var(--bg-soft);
   border-radius: var(--radius-lg);
   margin: 40px 0;
 }
 
 .customizer-wrapper {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: 40px;
   align-items: start;
 }
 
 .form-group {
   margin-top: 24px;
 }
 
 .form-label {
   font-weight: 700;
   color: var(--mocha-dark);
   font-size: 1.05rem;
   margin-bottom: 12px;
   display: block;
 }
 
 .options-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 12px;
 }
 
 .option-card {
   background-color: #FFFFFF;
   border: 2px solid transparent;
   padding: 12px;
   border-radius: var(--radius-sm);
   text-align: center;
   cursor: pointer;
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--text-muted);
   transition: var(--transition-smooth);
   box-shadow: 0 4px 10px rgba(0,0,0,0.03);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .option-card input {
   display: none;
 }
 
 .option-card:hover {
   border-color: var(--caramel-light);
   transform: translateY(-2px);
 }
 
 .option-card.active {
   border-color: var(--caramel-warm);
   background-color: rgba(217, 130, 43, 0.08);
   color: var(--caramel-warm);
 }
 
 /* Customizer Preview Card */
 .customizer-preview {
   position: sticky;
   top: 100px;
 }
 
 .preview-card {
   background-color: #FFFFFF;
   border-radius: var(--radius-md);
   padding: 30px;
   box-shadow: var(--shadow-float);
   text-align: center;
   border: 2px solid var(--caramel-light);
   position: relative;
 }
 
 .preview-badge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--blush-pink);
   color: var(--mocha-dark);
   padding: 4px 16px;
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: 0.85rem;
 }
 
 .preview-drink-visual {
   height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px 0;
 }
 
 .preview-cup {
   width: 100px;
   height: 140px;
   border: 4px solid var(--mocha-dark);
   border-radius: 12px 12px 35px 35px;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   background-color: #FFF;
 }
 
 .preview-liquid {
   width: 100%;
   height: 70%;
   background-color: #6F4E37;
   transition: background-color 0.4s ease, height 0.4s ease;
   border-radius: 0 0 28px 28px;
 }
 
 .preview-topping-visual {
   position: absolute;
   top: 10px;
   width: 100%;
   font-size: 1.2rem;
   text-align: center;
 }
 
 .preview-face {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-weight: bold;
   font-size: 1rem;
   text-shadow: 0 1px 3px rgba(0,0,0,0.4);
 }
 
 .preview-title {
   font-size: 1.4rem;
   margin-bottom: 8px;
 }
 
 .preview-details {
   font-size: 0.9rem;
   color: var(--text-muted);
   margin-bottom: 20px;
 }
 
 .tags-list {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   justify-content: center;
   margin-top: 8px;
 }
 
 .tag {
   background-color: var(--bg-soft);
   color: var(--mocha-dark);
   padding: 3px 10px;
   border-radius: var(--radius-full);
   font-size: 0.78rem;
   font-weight: 600;
 }
 
 .preview-price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 0;
   border-top: 2px dashed var(--bg-cream);
   font-weight: 700;
   margin-bottom: 16px;
 }
 
 .total-price {
   font-size: 1.4rem;
   color: var(--caramel-warm);
 }
 
 /* ==========================================
    Cozy Vibe Section
    ========================================== */
 .vibe-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center;
 }
 
 .vibe-list {
   margin-top: 24px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
 .vibe-list li {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }
 
 .vibe-bullet {
   background-color: var(--soft-yellow);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   flex-shrink: 0;
 }
 
 .vibe-gallery {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .gallery-card {
   border-radius: var(--radius-md);
   overflow: hidden;
   position: relative;
   box-shadow: var(--shadow-soft);
   background-size: cover;
   background-position: center;
   min-height: 200px;
   transition: var(--transition-smooth);
 }
 
 .gallery-card:hover {
   transform: scale(1.02);
 }
 
 .card-main {
   height: 240px;
   background-image: linear-gradient(to top, rgba(74,53,37,0.7), transparent), url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=800&q=80');
 }
 
 .gallery-sub-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }
 
 .card-sub-1 {
   height: 160px;
   background-image: linear-gradient(to top, rgba(74,53,37,0.7), transparent), url('https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&w=600&q=80');
 }
 
 .card-sub-2 {
   height: 160px;
   background-image: linear-gradient(to top, rgba(74,53,37,0.7), transparent), url('https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&w=600&q=80');
 }
 
 .card-overlay {
   position: absolute;
   bottom: 16px;
   left: 16px;
   color: #FFFFFF;
   font-weight: 700;
   font-size: 0.95rem;
   text-shadow: 0 2px 4px rgba(0,0,0,0.4);
 }
 
 /* ==========================================
    Reviews Section
    ========================================== */
 .reviews-section {
   background-color: var(--bg-soft);
 }
 
 .reviews-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px;
 }
 
 .review-card {
   background-color: #FFFFFF;
   border-radius: var(--radius-md);
   padding: 30px;
   box-shadow: var(--shadow-soft);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border: 2px solid transparent;
   transition: var(--transition-smooth);
 }
 
 .review-card:hover {
   transform: translateY(-50px);
   transform: translateY(-6px);
   box-shadow: var(--shadow-hover);
 }
 
 .review-card.highlight-card {
   border-color: var(--caramel-light);
   background: linear-gradient(180deg, #FFFFFF, #FFF9F3);
 }
 
 .review-rating {
   margin-bottom: 14px;
   font-size: 0.9rem;
 }
 
 .review-text {
   font-size: 0.98rem;
   color: var(--text-main);
   font-style: italic;
   margin-bottom: 20px;
   line-height: 1.6;
 }
 
 .reviewer-info {
   display: flex;
   align-items: center;
   gap: 14px;
 }
 
 .avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background-color: var(--bg-cream);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
 }
 
 .reviewer-name {
   font-size: 1rem;
   margin-bottom: 2px;
 }
 
 .reviewer-role {
   font-size: 0.8rem;
   color: var(--text-light);
 }
 
 /* ==========================================
    Location Section
    ========================================== */
 .location-box {
   background: linear-gradient(135deg, var(--mocha-dark), #332318);
   color: #FFFFFF;
   border-radius: var(--radius-lg);
   padding: 60px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center;
   box-shadow: var(--shadow-float);
 }
 
 .location-info h2 {
   color: #FFFFFF;
   margin-bottom: 24px;
 }
 
 .location-info .section-subtitle {
   background: rgba(255,255,255,0.15);
   color: var(--caramel-light);
 }
 
 .info-items {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-bottom: 30px;
 }
 
 .info-item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
 }
 
 .info-icon {
   font-size: 1.3rem;
 }
 
 .info-item strong {
   display: block;
   color: var(--caramel-light);
   font-size: 0.95rem;
 }
 
 .info-item p {
   font-size: 0.9rem;
   color: #E2D7CE;
 }
 
 .location-map-placeholder {
   height: 100%;
   min-height: 260px;
   background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=800&q=80') center/cover;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }
 
 .map-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
   padding: 24px;
   border-radius: var(--radius-md);
   text-align: center;
   color: var(--mocha-dark);
   box-shadow: var(--shadow-float);
 }
 
 .map-pin-pulse {
   font-size: 2.5rem;
   margin-bottom: 8px;
   animation: pulsePin 1.8s infinite;
 }
 
 @keyframes pulsePin {
   0% { transform: scale(1); }
   50% { transform: scale(1.15); }
   100% { transform: scale(1); }
 }
 
 .status-tag.open {
   display: inline-block;
   margin-top: 10px;
   font-size: 0.8rem;
   font-weight: 700;
   color: #2E7D32;
   background: #E8F5E9;
   padding: 4px 12px;
   border-radius: var(--radius-full);
 }
 
 /* ==========================================
    Footer
    ========================================== */
 .footer {
   background-color: #FFFFFF;
   padding: 70px 0 30px 0;
   border-top: 1px solid rgba(111, 78, 55, 0.08);
 }
 
 .footer-top {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
   gap: 40px;
   margin-bottom: 50px;
 }
 
 .footer-brand p {
   color: var(--text-muted);
   margin-top: 14px;
   font-size: 0.9rem;
   max-width: 280px;
 }
 
 .footer-links h4,
 .footer-newsletter h4 {
   font-size: 1.1rem;
   margin-bottom: 18px;
 }
 
 .footer-links ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .footer-links a {
   color: var(--text-muted);
   font-size: 0.9rem;
   transition: color 0.2s;
 }
 
 .footer-links a:hover {
   color: var(--caramel-warm);
 }
 
 .social-icons {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .newsletter-form {
   display: flex;
   gap: 8px;
   margin-top: 12px;
 }
 
 .newsletter-form input {
   flex-grow: 1;
   padding: 12px 16px;
   border-radius: var(--radius-full);
   border: 1px solid #E0D5CC;
   font-family: inherit;
   font-size: 0.88rem;
   outline: none;
 }
 
 .newsletter-form input:focus {
   border-color: var(--caramel-warm);
 }
 
 .footer-bottom {
   text-align: center;
   padding-top: 24px;
   border-top: 1px solid var(--bg-cream);
   font-size: 0.85rem;
   color: var(--text-light);
 }
 
 /* ==========================================
    Toast & Cart Modal Styling
    ========================================== */
 .toast {
   position: fixed;
   bottom: -60px;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--mocha-dark);
   color: #FFFFFF;
   padding: 12px 24px;
   border-radius: var(--radius-full);
   font-weight: 600;
   font-size: 0.9rem;
   box-shadow: var(--shadow-float);
   z-index: 2000;
   transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .toast.show {
   bottom: 30px;
 }
 
 /* Modal Overlay */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.4);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3000;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }
 
 .modal-overlay.open {
   opacity: 1;
   pointer-events: all;
 }
 
 .modal-content {
   background: #FFFFFF;
   width: 90%;
   max-width: 480px;
   border-radius: var(--radius-md);
   padding: 24px;
   box-shadow: var(--shadow-float);
   transform: translateY(20px);
   transition: transform 0.3s ease;
 }
 
 .modal-overlay.open .modal-content {
   transform: translateY(0);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--bg-cream);
 }
 
 .close-modal {
   font-size: 1.6rem;
   color: var(--text-muted);
 }
 
 .modal-body {
   max-height: 300px;
   overflow-y: auto;
   margin-bottom: 20px;
 }
 
 .cart-item-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px dashed var(--bg-cream);
 }
 
 .cart-item-info {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .cart-item-icon {
   font-size: 1.5rem;
 }
 
 .cart-item-name {
   font-size: 0.95rem;
   font-weight: 700;
 }
 
 .cart-item-price {
   font-size: 0.85rem;
   color: var(--text-muted);
 }
 
 .cart-total-row {
   display: flex;
   justify-content: space-between;
   font-size: 1.1rem;
   margin-bottom: 16px;
 }
 
 .empty-cart-msg {
   text-align: center;
   color: var(--text-muted);
   padding: 20px 0;
 }
 
 /* Scroll Animations */
 .reveal-left,
 .reveal-right,
 .reveal-up {
   opacity: 0;
   transition: all 0.8s ease-out;
 }
 
 .reveal-left {
   transform: translateX(-40px);
 }
 
 .reveal-right {
   transform: translateX(40px);
 }
 
 .reveal-up {
   transform: translateY(40px);
 }
 
 .reveal-active {
   opacity: 1;
   transform: translate(0, 0);
 }
 
 /* ==========================================
    Responsive Media Queries
    ========================================== */
 @media (max-width: 992px) {
   .hero-container,
   .customizer-wrapper,
   .vibe-grid,
   .location-box {
     grid-template-columns: 1fr;
     gap: 40px;
   }
 
   .footer-top {
     grid-template-columns: 1fr 1fr;
   }
 
   .highlights-flex {
     grid-template-columns: 1fr;
   }
 
   .hero-text {
     text-align: center;
   }
 
   .hero-desc {
     margin-left: auto;
     margin-right: auto;
   }
 
   .hero-buttons,
   .hero-features {
     justify-content: center;
   }
 }
 
 @media (max-width: 768px) {
   .nav-links {
     position: fixed;
     top: 70px;
     left: 0;
     width: 100%;
     background: rgba(250, 244, 237, 0.98);
     backdrop-filter: blur(10px);
     flex-direction: column;
     align-items: center;
     padding: 30px 0;
     gap: 20px;
     box-shadow: var(--shadow-soft);
     transform: translateY(-150%);
     transition: transform 0.4s ease;
   }
 
   .nav-links.active {
     transform: translateY(0);
   }
 
   .hamburger {
     display: flex;
   }
 
   .nav-cta {
     display: none;
   }
 
   .hero-title {
     font-size: 2.3rem;
   }
 
   .section-title {
     font-size: 1.8rem;
   }
 
   .footer-top {
     grid-template-columns: 1fr;
   }
 
   .location-box {
     padding: 30px 20px;
   }
 }