:root{--color-cream: #F9F5F0;--color-cocoa: #3D2B1F;--color-berry: #8B3A52;--color-matcha: #5A7A5A;--color-citrus: #D4841A;--color-soft-black: #1A1A1A;--color-warm-white: #FDFAF6;--color-cocoa-light: #6B4C3B;--color-berry-light: #C4667F;--color-matcha-light: #8AAF8A;--color-citrus-light: #E8A840;--color-cream-dark: #EDE8E0;--color-surface: #FFFFFF;--color-surface-raised: #FDFAF6;--color-border: #E8E0D8;--color-text-primary: #1A1A1A;--color-text-secondary: #5C4E42;--color-text-muted: #9E8E82;--font-display: "Playfair Display", Georgia, serif;--font-body: "Inter", system-ui, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3.5rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(61,43,31,.08), 0 1px 2px rgba(61,43,31,.06);--shadow-md: 0 4px 12px rgba(61,43,31,.1), 0 2px 4px rgba(61,43,31,.06);--shadow-lg: 0 8px 24px rgba(61,43,31,.12), 0 4px 8px rgba(61,43,31,.08);--shadow-xl: 0 16px 48px rgba(61,43,31,.16), 0 8px 16px rgba(61,43,31,.1);--shadow-card-hover: 0 12px 32px rgba(61,43,31,.16), 0 4px 8px rgba(61,43,31,.1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-base: .25s;--duration-slow: .4s;--duration-drawer: .35s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{font-family:var(--font-body);font-size:var(--font-size-base);color:var(--color-text-primary);background-color:var(--color-cream);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;color:var(--color-cocoa)}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;background:none}img{max-width:100%;display:block}ul,ol{list-style:none}input,textarea{font-family:var(--font-body);font-size:var(--font-size-base)}:focus-visible{outline:2px solid var(--color-berry);outline-offset:2px;border-radius:var(--radius-sm)}.layout{min-height:100vh;display:flex;flex-direction:column}.layout__main{flex:1}.nav{position:sticky;top:0;z-index:100;background:#f9f5f0eb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.nav__inner{max-width:1200px;margin:0 auto;padding:0 var(--space-6);height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}.nav__brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex-shrink:0}.nav__brand-name{font-family:var(--font-display);font-size:var(--font-size-md);color:var(--color-cocoa);font-weight:600;letter-spacing:-.02em}.nav__links{display:flex;align-items:center;gap:var(--space-2)}.nav__link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);position:relative}.nav__link:hover{background:var(--color-cream-dark);color:var(--color-cocoa)}.nav__link--active{color:var(--color-cocoa);background:var(--color-cream-dark)}.nav__link--box{background:var(--color-cocoa);color:var(--color-cream);padding:var(--space-2) var(--space-4)}.nav__link--box:hover{background:var(--color-cocoa-light);color:var(--color-cream)}.nav__link--box.nav__link--active{background:var(--color-cocoa);color:var(--color-cream)}.nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--color-berry);color:#fff;border-radius:var(--radius-full);font-size:11px;font-weight:700;line-height:1}.footer{background:var(--color-cocoa);color:var(--color-cream);margin-top:var(--space-20)}.footer__inner{max-width:1200px;margin:0 auto;padding:var(--space-12) var(--space-6);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:var(--space-6);align-items:start}.footer__brand{display:flex;align-items:center;gap:var(--space-4)}.footer__brand svg rect{fill:var(--color-cocoa-light)}.footer__name{font-family:var(--font-display);font-size:var(--font-size-md);color:var(--color-cream);font-weight:600}.footer__tagline{font-size:var(--font-size-sm);color:#f9f5f08c;margin-top:2px}.footer__links{display:flex;gap:var(--space-6)}.footer__link{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:#f9f5f0b3;text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}.footer__link:hover{color:var(--color-cream)}.footer__legal{grid-column:1 / -1;font-size:var(--font-size-xs);color:#f9f5f066;border-top:1px solid rgba(249,245,240,.1);padding-top:var(--space-6)}@media (max-width: 640px){.nav__brand-name{display:none}.nav__inner{padding:0 var(--space-4)}.nav__link span:last-child{display:none}.nav__link--box span{display:inline}.footer__inner{grid-template-columns:1fr}.footer__links{flex-direction:column;gap:var(--space-3)}}.home{padding-bottom:var(--space-20)}.home__hero{background:var(--color-warm-white);border-bottom:1px solid var(--color-border);padding:var(--space-20) 0 var(--space-12)}.home__hero-inner{max-width:1200px;margin:0 auto;padding:0 var(--space-6);display:grid;grid-template-columns:1fr 380px;gap:var(--space-12);align-items:center}.home__hero-eyebrow{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:500;color:var(--color-berry);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4)}.home__hero-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--color-cocoa);line-height:1.15;letter-spacing:-.03em;margin-bottom:var(--space-5)}.home__hero-title em{font-style:italic;color:var(--color-berry)}.home__hero-desc{font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.65;max-width:520px;margin-bottom:var(--space-8)}.home__hero-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.home__scratch-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3)}.home__stats{max-width:1200px;margin:var(--space-12) auto 0;padding:0 var(--space-6);display:flex;gap:var(--space-10)}.home__stat{display:flex;flex-direction:column;gap:2px}.home__stat-value{font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:700;color:var(--color-cocoa);line-height:1}.home__stat-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.home__featured{padding:var(--space-16) 0 0}.home__section-inner{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.home__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}.home__section-title{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--color-cocoa);margin-bottom:var(--space-2)}.home__section-sub{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:480px}.home__featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4)}.featured-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.featured-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.featured-card__color{height:6px}.featured-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.featured-card__meta{display:flex;justify-content:space-between;align-items:center}.featured-card__region{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.featured-card__price{font-size:var(--font-size-sm);font-weight:600;color:var(--color-cocoa)}.featured-card__name{font-family:var(--font-display);font-size:var(--font-size-md);color:var(--color-cocoa);font-weight:600;text-decoration:none;line-height:1.3}.featured-card__name:hover{color:var(--color-berry)}.featured-card__desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.featured-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}.home__cta{margin-top:var(--space-20);background:var(--color-cocoa);border-radius:var(--radius-2xl);max-width:1200px;margin-left:auto;margin-right:auto;padding:var(--space-16) var(--space-8);text-align:center}.home__cta-inner{max-width:520px;margin:0 auto}.home__cta-title{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--color-cream);margin-bottom:var(--space-4)}.home__cta-desc{color:#f9f5f0a6;font-size:var(--font-size-md);margin-bottom:var(--space-8);line-height:1.6}.scratch-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-warm-white);border:1px solid var(--color-border);box-shadow:var(--shadow-md);cursor:crosshair}.scratch-card__inner{position:relative;height:100px}.scratch-card__reveal{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding:var(--space-4);transition:opacity .3s ease}.scratch-card__snack{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;color:inherit;width:100%}.scratch-card__snack:hover .scratch-card__name{color:var(--color-berry)}.scratch-card__dot{width:40px;height:40px;border-radius:var(--radius-full);flex-shrink:0}.scratch-card__label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:600;margin-bottom:2px}.scratch-card__name{font-family:var(--font-display);font-size:var(--font-size-md);font-weight:600;color:var(--color-cocoa);transition:color var(--duration-fast) var(--ease-out)}.scratch-card__region{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:2px}.scratch-card__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:var(--radius-lg);transition:opacity .4s ease}.scratch-card--reduced{padding:var(--space-4)}.scratch-card__reveal-btn{font-size:var(--font-size-sm);color:var(--color-berry);font-weight:500;background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;margin-bottom:var(--space-3);display:block}.tag{display:inline-block;padding:3px 8px;background:var(--color-cream-dark);border-radius:var(--radius-full);font-size:11px;font-weight:500;color:var(--color-text-secondary);text-transform:capitalize}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);border:none;font-family:var(--font-body);line-height:1}.btn:active{transform:scale(.98)}.btn--primary{background:var(--color-berry);color:#fff}.btn--primary:hover{background:var(--color-cocoa)}.btn--ghost{background:transparent;color:var(--color-cocoa);border:1px solid var(--color-border)}.btn--ghost:hover{background:var(--color-cream-dark)}.btn--outline{background:transparent;color:var(--color-cocoa);border:1px solid var(--color-cocoa)}.btn--outline:hover{background:var(--color-cocoa);color:var(--color-cream)}.btn--added{background:var(--color-matcha);color:#fff;border:1px solid transparent}.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs)}.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}@media (max-width: 900px){.home__hero-inner{grid-template-columns:1fr}.home__hero-scratch{max-width:440px}}@media (max-width: 640px){.home__stats{gap:var(--space-6)}.home__section-header{flex-direction:column}.home__cta{border-radius:0;margin-left:0;margin-right:0}}.quiz{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);background:var(--color-warm-white)}.quiz__inner{width:100%;max-width:600px;display:flex;flex-direction:column;gap:var(--space-8)}.quiz__progress{display:flex;flex-direction:column;gap:var(--space-3)}.quiz__progress-steps{display:flex;gap:var(--space-2)}.quiz__progress-dot{width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-cream-dark);color:var(--color-text-muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.quiz__progress-dot--done{background:var(--color-matcha);color:#fff}.quiz__progress-dot--active{background:var(--color-berry);color:#fff}.quiz__progress-bar{height:3px;background:var(--color-cream-dark);border-radius:var(--radius-full);overflow:hidden}.quiz__progress-fill{height:100%;background:var(--color-berry);border-radius:var(--radius-full)}.quiz__progress-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.quiz__card-wrap{min-height:360px;position:relative}.quiz__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-md)}.quiz__question-head{margin-bottom:var(--space-8)}.quiz__subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}.quiz__question{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--color-cocoa);line-height:1.25}.quiz__multi-note{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-2);font-style:italic}.quiz__options{display:flex;flex-direction:column;gap:var(--space-3)}.quiz__options--grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.quiz__option{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-cream);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;text-align:left;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);font-family:var(--font-body);width:100%}.quiz__option:hover{border-color:var(--color-berry-light);background:var(--color-warm-white);box-shadow:var(--shadow-sm)}.quiz__option--selected{border-color:var(--color-berry);background:#fdf3f5;box-shadow:0 0 0 3px #8b3a5214}.quiz__option-check{width:20px;height:20px;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.quiz__option--selected .quiz__option-check{border-color:var(--color-berry);background:var(--color-berry);color:#fff}.quiz__option-label{display:block;font-weight:600;font-size:var(--font-size-base);color:var(--color-cocoa);margin-bottom:2px}.quiz__option-desc{display:block;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.quiz__nav{display:flex;justify-content:space-between;gap:var(--space-4)}@media (max-width: 480px){.quiz__options--grid{grid-template-columns:1fr}.quiz__card{padding:var(--space-6)}}.discover{min-height:calc(100vh - 60px)}.discover__header{background:var(--color-warm-white);border-bottom:1px solid var(--color-border);position:sticky;top:60px;z-index:50}.discover__header-inner{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-6) var(--space-4);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}.discover__title{font-family:var(--font-display);font-size:var(--font-size-xl);color:var(--color-cocoa);margin-bottom:var(--space-1)}.discover__profile-note{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-muted)}.discover__quiz-link{color:var(--color-berry);font-weight:500;text-decoration:underline}.discover__search-wrap{display:flex;gap:var(--space-3);align-items:center;flex-shrink:0}.discover__search{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);cursor:text;min-width:240px}.discover__search:focus-within{border-color:var(--color-berry);box-shadow:0 0 0 3px #8b3a5214}.discover__search-icon{color:var(--color-text-muted);flex-shrink:0}.discover__search-input{border:none;background:transparent;outline:none;font-size:var(--font-size-sm);color:var(--color-text-primary);width:100%}.discover__search-input::placeholder{color:var(--color-text-muted)}.discover__search-clear{color:var(--color-text-muted);display:flex;align-items:center;cursor:pointer;padding:2px;border-radius:var(--radius-sm);transition:color var(--duration-fast)}.discover__search-clear:hover{color:var(--color-cocoa)}.discover__filter-toggle{position:relative;flex-shrink:0}.discover__filter-toggle--active{background:var(--color-cream-dark);border-color:var(--color-cocoa)}.discover__filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--color-berry);color:#fff;border-radius:var(--radius-full);font-size:11px;font-weight:700}.filter-panel{overflow:hidden;border-top:1px solid var(--color-border)}.filter-panel__inner{max-width:1200px;margin:0 auto;padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.filter-section{display:flex;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap}.filter-section__label{display:flex;align-items:center;gap:4px;font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;min-width:60px;padding-top:6px;flex-shrink:0}.filter-section__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:500;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-body);text-transform:capitalize}.chip:hover{border-color:var(--color-cocoa);color:var(--color-cocoa)}.chip--active{background:var(--color-cocoa);border-color:var(--color-cocoa);color:var(--color-cream)}.discover__inner{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6)}.discover__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.discover__count{font-size:var(--font-size-sm);color:var(--color-text-muted)}.discover__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5)}.snack-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out);cursor:default}.snack-card__accent{height:5px}.snack-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.snack-card__meta{display:flex;justify-content:space-between;align-items:center}.snack-card__region{font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.snack-card__price{font-size:var(--font-size-sm);font-weight:700;color:var(--color-cocoa)}.snack-card__name{font-family:var(--font-display);font-size:var(--font-size-md);font-weight:600;color:var(--color-cocoa);text-decoration:none;line-height:1.3;display:block}.snack-card__name:hover{color:var(--color-berry)}.snack-card__desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.snack-card__meters{display:flex;flex-direction:column;gap:var(--space-2)}.snack-card__meter{display:flex;align-items:center;gap:var(--space-3)}.snack-card__meter-label{font-size:11px;color:var(--color-text-muted);font-weight:600;min-width:36px;text-transform:uppercase;letter-spacing:.05em}.snack-card__meter-track{flex:1;height:4px;background:var(--color-cream-dark);border-radius:var(--radius-full);overflow:hidden}.snack-card__meter-fill{height:100%;border-radius:var(--radius-full);transition:width .5s var(--ease-out)}.snack-card__meter-fill--spice{background:var(--color-citrus)}.snack-card__meter-fill--sweet{background:var(--color-berry-light)}.snack-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}.snack-card__footer{display:flex;gap:var(--space-2);margin-top:var(--space-1)}.snack-card__footer .btn{flex:1;justify-content:center}.discover__empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-20) var(--space-4);gap:var(--space-4)}.discover__empty-icon{width:64px;height:64px;border-radius:var(--radius-full);background:var(--color-cream-dark);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.discover__empty-title{font-family:var(--font-display);font-size:var(--font-size-xl);color:var(--color-cocoa)}.discover__empty-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:360px}@media (max-width: 640px){.discover__header-inner{flex-direction:column;gap:var(--space-4)}.discover__search-wrap{width:100%}.discover__search{flex:1;min-width:0}.filter-section{flex-direction:column;gap:var(--space-2)}}.detail{min-height:calc(100vh - 60px)}.detail__back-bar{border-bottom:1px solid var(--color-border);background:var(--color-warm-white)}.detail__back-inner{max-width:1200px;margin:0 auto;padding:var(--space-3) var(--space-6)}.detail__inner{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16)}.detail__hero{display:grid;grid-template-columns:360px 1fr;gap:var(--space-10);margin-bottom:var(--space-12);align-items:start}.detail__hero-visual{border-radius:var(--radius-2xl);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.detail__hero-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:var(--space-6);box-sizing:border-box}.detail__region-badge{position:absolute;bottom:var(--space-4);left:var(--space-4);background:#3d2b1fd9;color:var(--color-cream);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.detail__price-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}.detail__price{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-cocoa)}.detail__dietary-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--color-cream-dark);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;color:var(--color-matcha);text-transform:capitalize;border:1px solid var(--color-border)}.detail__name{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,3rem);color:var(--color-cocoa);line-height:1.15;letter-spacing:-.02em;margin-bottom:var(--space-4)}.detail__desc{font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-5);max-width:540px}.detail__flavor-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.detail__flavor-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;border:1px solid transparent;text-transform:capitalize}.detail__cta{min-width:200px}.detail__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-12)}.detail__section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.detail__section--pairing{background:var(--color-cocoa);border-color:transparent}.detail__section--pairing .detail__section-title{color:#f9f5f0b3}.detail__section-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-family:var(--font-body)}.flavor-meter{display:flex;flex-direction:column;gap:var(--space-2)}.flavor-meter__header{display:flex;justify-content:space-between;align-items:center}.flavor-meter__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.flavor-meter__value{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:600}.flavor-meter__track{height:6px;background:var(--color-cream-dark);border-radius:var(--radius-full);overflow:hidden}.flavor-meter__fill{height:100%;border-radius:var(--radius-full)}.detail__ingredients{display:flex;flex-direction:column;gap:var(--space-2)}.detail__ingredient{font-size:var(--font-size-sm);color:var(--color-text-secondary);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}.detail__ingredient:before{content:"";width:5px;height:5px;border-radius:var(--radius-full);background:var(--color-citrus-light);flex-shrink:0}.detail__pairing{font-size:var(--font-size-sm);color:#f9f5f0bf;line-height:1.7;font-style:italic}.detail__related{margin-top:var(--space-8)}.detail__related-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--font-size-xl);color:var(--color-cocoa);margin-bottom:var(--space-6)}.detail__related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}.detail__related-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.detail__related-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.detail__related-art{height:100px;display:flex;align-items:center;justify-content:center;padding:var(--space-3);box-sizing:border-box}.detail__related-body{padding:var(--space-4)}.detail__related-region{font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-1)}.detail__related-name{font-family:var(--font-display);font-size:var(--font-size-base);font-weight:600;color:var(--color-cocoa);margin-bottom:var(--space-1)}.detail__related-price{font-size:var(--font-size-sm);font-weight:600;color:var(--color-berry)}.detail-notfound{max-width:480px;margin:var(--space-20) auto;text-align:center;padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media (max-width: 900px){.detail__hero{grid-template-columns:1fr}.detail__hero-visual{aspect-ratio:2/1}.detail__grid{grid-template-columns:1fr}}.box-page{min-height:calc(100vh - 60px);position:relative}.box-page__inner{max-width:1100px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16)}.box-page__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap}.box-page__title{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--color-cocoa);margin-bottom:var(--space-1)}.box-page__subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:440px}.box-page__header-actions{display:flex;gap:var(--space-3);flex-shrink:0}.box-page__layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-8);align-items:start}.box-page__items-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.box-page__items-count{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary)}.box-page__item-list{display:flex;flex-direction:column;gap:var(--space-3)}.box-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:stretch}.box-item__art{width:72px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:var(--space-2);box-sizing:border-box}.box-item__body{flex:1;padding:var(--space-4) var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.box-item__info{flex:1;min-width:0}.box-item__name{display:block;font-weight:600;font-size:var(--font-size-base);color:var(--color-cocoa);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;transition:color var(--duration-fast) var(--ease-out)}.box-item__name:hover{color:var(--color-berry)}.box-item__region{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:500}.box-item__controls{display:flex;align-items:center;gap:var(--space-4);flex-shrink:0}.box-item__qty{display:flex;align-items:center;gap:var(--space-2);background:var(--color-cream-dark);border-radius:var(--radius-md);padding:var(--space-1)}.box-item__qty-btn{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-cocoa);transition:background var(--duration-fast) var(--ease-out)}.box-item__qty-btn:hover{background:var(--color-cream)}.box-item__qty-value{font-size:var(--font-size-sm);font-weight:700;color:var(--color-cocoa);min-width:20px;text-align:center}.box-item__price{font-size:var(--font-size-base);font-weight:700;color:var(--color-cocoa);min-width:52px;text-align:right}.box-item__remove{color:var(--color-text-muted);padding:var(--space-1);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);display:flex;align-items:center;cursor:pointer}.box-item__remove:hover{color:#c0392b;background:#c0392b14}.box-page__empty{text-align:center;padding:var(--space-16) var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.box-page__empty-icon{width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-cream-dark);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.box-page__empty-title{font-family:var(--font-display);font-size:var(--font-size-xl);color:var(--color-cocoa)}.box-page__empty-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:360px}.box-page__empty-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.box-summary{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:calc(60px + var(--space-6))}.box-summary__section{display:flex;flex-direction:column;gap:var(--space-3)}.box-summary__label{font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.box-summary__budget-options{display:flex;gap:var(--space-2)}.box-summary__budget-btn{flex:1;padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-cream);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-body)}.box-summary__budget-btn:hover{border-color:var(--color-cocoa);color:var(--color-cocoa)}.box-summary__budget-btn--active{background:var(--color-cocoa);border-color:var(--color-cocoa);color:var(--color-cream)}.box-summary__budget-bar{display:flex;flex-direction:column;gap:var(--space-2)}.box-summary__budget-track{height:8px;background:var(--color-cream-dark);border-radius:var(--radius-full);overflow:hidden}.box-summary__budget-fill{height:100%;background:var(--color-matcha);border-radius:var(--radius-full)}.box-summary__budget-fill--over{background:#c0392b}.box-summary__budget-labels{display:flex;justify-content:space-between;align-items:center}.box-summary__budget-spent{font-size:var(--font-size-sm);font-weight:700;color:var(--color-matcha)}.box-summary__budget-spent--over{color:#c0392b}.box-summary__budget-max{font-size:var(--font-size-xs);color:var(--color-text-muted)}.box-summary__over-msg{font-size:var(--font-size-xs);color:#c0392b;font-weight:600}.box-summary__row{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.box-summary__row--total{font-weight:700;font-size:var(--font-size-base);color:var(--color-cocoa)}.box-summary__free{color:var(--color-matcha);font-style:normal;font-weight:600}.box-summary__divider{height:1px;background:var(--color-border)}.box-summary__shipping-note{font-size:var(--font-size-xs);color:var(--color-text-muted)}.box-summary__checkout{width:100%;justify-content:center}.box-summary__checkout:disabled{opacity:.4;cursor:not-allowed}.box-summary__secure{font-size:11px;color:var(--color-text-muted);text-align:center;line-height:1.5}.vending-drop{position:fixed;top:80px;right:120px;font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-berry);pointer-events:none;z-index:200}@media (max-width: 880px){.box-page__layout{grid-template-columns:1fr}.box-summary{position:static}}@media (max-width: 540px){.box-item__body{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.box-item__controls{width:100%;justify-content:space-between}}.checkout{min-height:calc(100vh - 60px);padding:var(--space-8) 0 var(--space-20);background:var(--color-warm-white)}.checkout__inner{max-width:1000px;margin:0 auto;padding:0 var(--space-6)}.checkout__progress{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-8)}.checkout__step{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted)}.checkout__step--active{color:var(--color-berry)}.checkout__step-line{flex:1;height:1px;background:var(--color-border)}.checkout__layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-8);align-items:start}.checkout__form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}.checkout__form-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--font-size-xl);color:var(--color-cocoa)}.checkout__payment-note{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic;padding:var(--space-3) var(--space-4);background:var(--color-cream-dark);border-radius:var(--radius-md)}.checkout__field{display:flex;flex-direction:column;gap:var(--space-2)}.checkout__field-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary)}.checkout__input{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-surface);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);width:100%}.checkout__input:focus{outline:none;border-color:var(--color-berry);box-shadow:0 0 0 3px #8b3a5214}.checkout__input--error{border-color:#c0392b}.checkout__field-error{font-size:var(--font-size-xs);color:#c0392b;font-weight:500}.checkout__field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.checkout__form-actions{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)}.checkout__summary{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);position:sticky;top:calc(60px + var(--space-6))}.checkout__summary-title{font-family:var(--font-display);font-size:var(--font-size-lg);color:var(--color-cocoa);margin-bottom:var(--space-4)}.checkout__summary-items{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)}.checkout__summary-item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-sm)}.checkout__summary-dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0}.checkout__summary-name{flex:1;color:var(--color-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkout__summary-qty{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:600}.checkout__summary-price{font-weight:600;color:var(--color-cocoa);flex-shrink:0}.checkout__summary-totals{display:flex;flex-direction:column;gap:var(--space-3)}.checkout__summary-row{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.checkout__summary-row--total{font-weight:700;font-size:var(--font-size-base);color:var(--color-cocoa)}.checkout__summary-divider{height:1px;background:var(--color-border)}.checkout__free{color:var(--color-matcha);font-style:normal;font-weight:600}.checkout__empty{max-width:400px;margin:var(--space-20) auto;text-align:center;padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);color:var(--color-text-muted)}.checkout__empty h2{color:var(--color-cocoa)}@media (max-width: 768px){.checkout__layout{grid-template-columns:1fr}.checkout__summary{position:static;order:-1}}.order{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);background:var(--color-warm-white)}.order__inner{width:100%;max-width:520px}.order__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-10) var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);box-shadow:var(--shadow-xl)}.order__check-wrap{width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-matcha);color:#fff;display:flex;align-items:center;justify-content:center}.order__title{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--color-cocoa)}.order__subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.65;max-width:380px}.order__ref-block{display:flex;align-items:center;gap:var(--space-3);background:var(--color-cream-dark);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);color:var(--color-text-secondary)}.order__ref-label{display:block;font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:2px}.order__ref-value{display:block;font-size:var(--font-size-base);font-weight:700;color:var(--color-cocoa);font-family:monospace;letter-spacing:.05em}.order__timeline{width:100%;display:flex;flex-direction:column;gap:0;text-align:left}.order__timeline-step{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-3) 0;position:relative;color:var(--color-text-muted)}.order__timeline-step+.order__timeline-step{border-top:1px solid var(--color-border)}.order__timeline-step--done{color:var(--color-cocoa)}.order__timeline-dot{width:22px;height:22px;border-radius:var(--radius-full);border:2px solid var(--color-border);background:var(--color-cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all var(--duration-base)}.order__timeline-step--done .order__timeline-dot{background:var(--color-matcha);border-color:var(--color-matcha);color:#fff}.order__timeline-label{font-weight:600;font-size:var(--font-size-sm)}.order__timeline-note{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:2px}.order__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;width:100%}