*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Manrope,sans-serif;background-color:var(--surface);color:var(--on-surface);min-height:100vh;overflow-x:hidden}:root{--primary: #432406;--primary-container: #5d3a1a;--primary-fixed: #ffdcc2;--primary-fixed-dim: #f0bc92;--on-primary: #ffffff;--on-primary-container: #d6a47c;--secondary: #7b5455;--secondary-container: #fecbcb;--on-secondary: #ffffff;--on-secondary-container: #7a5354;--tertiary: #21300f;--tertiary-container: #374723;--tertiary-fixed: #d5eab8;--on-tertiary: #ffffff;--surface: #fff8ef;--surface-bright: #fff8ef;--surface-container: #f5edde;--surface-container-high: #efe7d9;--surface-container-highest:#e9e2d3;--surface-container-low: #fbf3e4;--surface-container-lowest: #ffffff;--surface-dim: #e1d9cb;--on-surface: #1e1b13;--on-surface-variant: #50453c;--outline: #82746b;--outline-variant: #d4c3b8;--error: #ba1a1a;--error-container: #ffdad6;--on-error: #ffffff;--transition-smooth: all .4s cubic-bezier(.16, 1, .3, 1);--shadow-ambient: 0 10px 40px rgba(67, 36, 6, .08);--display-lg: clamp(2.5rem, 5vw, 3.5rem);--display-md: clamp(2rem, 4vw, 2.8rem);--display-sm: clamp(1.6rem, 3vw, 2.2rem);--headline-lg: clamp(1.4rem, 2.5vw, 1.75rem);--headline-md: clamp(1.2rem, 2vw, 1.5rem);--title-lg: 1.125rem;--title-md: 1rem;--body-lg: 1rem;--body-md: .9375rem;--label-lg: .875rem;--label-md: .75rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-14: 56px;--space-16: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 100px;--shadow-sm: 0 4px 20px rgba(30,27,19,.06);--shadow-md: 0 8px 40px rgba(30,27,19,.08);--shadow-lg: 0 16px 60px rgba(30,27,19,.1);--nav-height: 0px}h1,h2,h3,h4{font-family:"Noto Serif",serif;color:var(--on-surface);line-height:1.2;letter-spacing:-.02em}h1{font-size:var(--display-lg);font-weight:600}h2{font-size:var(--display-sm);font-weight:600}h3{font-size:var(--headline-md);font-weight:500}h4{font-size:var(--title-lg);font-weight:500}p{line-height:1.65;color:var(--on-surface-variant)}a{color:inherit;text-decoration:none}.page-wrapper{max-width:1200px;margin:0 auto;background:var(--surface);min-height:100vh;position:relative;padding-bottom:var(--nav-height);overflow-x:hidden;box-shadow:0 0 100px #4324060d;animation:pageFadeIn .8s var(--transition-smooth)}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-pad{padding:var(--space-8) var(--space-6)}.section-pad-sm{padding:var(--space-6) var(--space-6)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:500px;height:var(--nav-height);background:#fff8efd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(212,195,184,.3);display:flex;align-items:center;justify-content:space-around;z-index:100;transition:var(--transition-smooth)}@media (min-width: 768px){.bottom-nav{bottom:24px;border-radius:var(--radius-full);border:1px solid rgba(67,36,6,.1);box-shadow:var(--shadow-ambient);width:450px}}.nav-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);cursor:pointer;color:var(--outline);transition:var(--transition-smooth);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);text-decoration:none;min-width:64px}.nav-item:hover{transform:translateY(-4px);color:var(--primary)}.nav-item:hover,.nav-item.active{color:var(--primary-container)}.nav-item span.nav-label{font-family:Manrope,sans-serif;font-size:var(--label-md);font-weight:600;letter-spacing:.02em;text-transform:uppercase}.nav-item svg{width:22px;height:22px}.app-header{background:var(--surface);padding:var(--space-3) var(--space-5);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 12px #4324060f;min-height:80px}.app-header .logo-text{font-family:"Noto Serif",serif;font-size:1.25rem;font-weight:700;color:var(--primary);letter-spacing:.08em}.app-header .logo-tagline{font-size:var(--label-md);color:var(--on-surface-variant);font-weight:500;letter-spacing:.06em;margin-top:1px}.back-btn{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--label-lg);font-weight:600;color:var(--on-surface-variant);cursor:pointer;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:transparent;border:none;transition:background .2s,color .2s;text-decoration:none;font-family:Manrope,sans-serif}.back-btn:hover{background:var(--surface-container);color:var(--primary-container)}.back-btn svg{width:18px;height:18px}.card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.card-body{padding:var(--space-5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:none;cursor:pointer;font-family:Manrope,sans-serif;font-weight:700;font-size:var(--label-lg);border-radius:var(--radius-full);padding:var(--space-4) var(--space-8);transition:all .2s ease;letter-spacing:.03em}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-container));color:var(--on-primary);box-shadow:0 4px 24px #43240640}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px #43240659}.btn-secondary{background:var(--secondary-container);color:var(--on-secondary-container)}.btn-secondary:hover{background:var(--primary-fixed)}.btn-ghost{background:var(--surface-container);color:var(--on-surface-variant)}.btn-ghost:hover{background:var(--surface-container-high)}.btn-full{width:100%}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--label-md)}.chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--label-md);font-weight:600;font-family:Manrope,sans-serif;letter-spacing:.04em}.chip-green{background:var(--tertiary-fixed);color:var(--tertiary)}.chip-pink{background:var(--secondary-container);color:var(--secondary)}.chip-cream{background:var(--primary-fixed);color:var(--primary-container)}.flavor-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.product-card{background:var(--surface-container-lowest);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:var(--transition-smooth)}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.product-card-image{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.product-card-image-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:3rem}.product-card-body{padding:var(--space-4) var(--space-5)}.product-card-title{font-family:"Noto Serif",serif;font-size:var(--title-lg);font-weight:600;color:var(--on-surface);margin-bottom:var(--space-1)}.product-card-sub{font-size:var(--label-lg);color:var(--on-surface-variant);margin-bottom:var(--space-3)}.product-card-price{font-family:Manrope,sans-serif;font-weight:700;color:var(--primary-container);font-size:var(--title-md)}.product-grid-container{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}@media (min-width: 640px){.product-grid-container{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}@media (min-width: 1024px){.product-grid-container{grid-template-columns:repeat(4,1fr);gap:var(--space-8)}}.qty-control{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-container);border-radius:var(--radius-full);padding:var(--space-1) var(--space-2)}.qty-btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--surface-container-highest);color:var(--on-surface);font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}.qty-btn:hover{background:var(--outline-variant)}.qty-value{font-family:Manrope,sans-serif;font-weight:700;font-size:var(--title-md);min-width:24px;text-align:center;color:var(--on-surface)}.tonal-divider{height:8px;background:var(--surface-container);margin:0 calc(var(--space-6) * -1)}.hero{background:linear-gradient(160deg,var(--primary) 0%,var(--primary-container) 100%);padding:var(--space-14) var(--space-6) var(--space-12);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}.hero-eyebrow{font-family:Manrope,sans-serif;font-size:var(--label-md);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-fixed-dim);margin-bottom:var(--space-3)}.hero h1{color:var(--on-primary)}.hero p{color:#fff8efbf;margin-top:var(--space-4);margin-bottom:var(--space-8);font-size:var(--body-lg)}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-family:Manrope,sans-serif;font-size:var(--label-md);font-weight:600;color:var(--primary-fixed);letter-spacing:.05em;margin-bottom:var(--space-5)}.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-5)}.section-header h2{font-size:var(--headline-lg)}.see-all-btn{font-size:var(--label-md);font-weight:600;color:var(--primary-container);cursor:pointer;background:none;border:none;font-family:Manrope,sans-serif;padding:0;text-decoration:none}.footer-inpage{background:var(--surface-container);padding:var(--space-8) var(--space-6);text-align:center}.footer-brand{font-family:"Noto Serif",serif;font-size:1.1rem;font-weight:700;color:var(--primary);letter-spacing:.08em;margin-bottom:var(--space-2)}.footer-copy{font-size:var(--label-md);color:var(--on-surface-variant);line-height:1.7}.footer-social{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-4)}.social-link{width:38px;height:38px;border-radius:50%;background:var(--surface-container-highest);display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant);transition:background .2s,color .2s}.social-link:hover{background:var(--primary-fixed);color:var(--primary)}.cart-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6)}.cart-item-emoji{font-size:2.5rem;flex-shrink:0}.cart-item-info{flex:1}.cart-item-name{font-family:"Noto Serif",serif;font-size:var(--title-md);font-weight:600;color:var(--on-surface)}.cart-item-sub{font-size:var(--label-md);color:var(--on-surface-variant);margin-top:2px}.cart-item-price{font-family:Manrope,sans-serif;font-weight:700;color:var(--primary-container);font-size:var(--body-md)}.info-row{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid rgba(212,195,184,.25)}.info-row:last-child{border-bottom:none}.info-row-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary-fixed);display:flex;align-items:center;justify-content:center;color:var(--primary-container);flex-shrink:0}.info-row-label{font-size:var(--label-md);color:var(--on-surface-variant);font-weight:500;margin-bottom:2px}.info-row-value{font-size:var(--body-md);color:var(--on-surface);font-weight:600}.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-container));display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-family:"Noto Serif",serif;font-size:2rem;font-weight:700;margin:0 auto var(--space-4)}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(212,195,184,.2)}.setting-row:last-child{border-bottom:none}.setting-row:hover{background:var(--surface-container-low)}.setting-row-left{display:flex;align-items:center;gap:var(--space-3);color:var(--on-surface-variant)}.setting-row-label{font-size:var(--body-md);color:var(--on-surface);font-weight:500}.order-card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.order-status-badge{font-size:var(--label-md);font-weight:600;border-radius:var(--radius-full);padding:var(--space-1) var(--space-3)}.badge-delivered{background:var(--tertiary-fixed);color:var(--tertiary)}.badge-pending{background:var(--secondary-container);color:var(--secondary)}.sticky-cta{position:fixed;bottom:var(--nav-height);left:50%;transform:translate(-50%);width:100%;max-width:430px;padding:var(--space-3) var(--space-6);background:#fff8efe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:90;box-shadow:0 -4px 24px #1e1b1314}.detail-hero{background:var(--surface-container-low);padding:var(--space-10) var(--space-6);display:flex;align-items:center;justify-content:center;min-height:240px;position:relative}.detail-hero-emoji{font-size:6rem;filter:drop-shadow(0 8px 24px rgba(30,27,19,.12))}.ingredients-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}::-webkit-scrollbar{width:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .45s ease forwards}.cart-badge{position:absolute;top:-6px;right:-8px;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surface-container);font-family:Manrope,sans-serif;z-index:10}