:root{--color-background:#fdf8f6;--color-surface:#fdf8f6;--color-surface-low:#f7f3f1;--color-surface-high:#ebe7e5;--color-surface-highest:#e5e2e0;--color-secondary-container:#f0dfd8;--color-primary:#4b2e20;--color-primary-container:#654435;--color-on-primary:#fff;--color-on-surface:#1c1b1b;--color-on-surface-variant:#50443f;--color-outline:#82746e;--color-outline-variant:#d4c3bc;--shadow-ambient:0 4px 12px #4b2e200a;--shadow-raised:0 16px 38px #4b2e2024;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;--container-padding:20px;--section-gap:32px;--inline-gap:12px;--font-body:"Plus Jakarta Sans", Arial, sans-serif;--font-heading:"Be Vietnam Pro", "Plus Jakarta Sans", Arial, sans-serif}*{box-sizing:border-box}html{background:var(--color-background);min-height:100%}body{background:var(--color-background);min-width:320px;min-height:100dvh;color:var(--color-on-surface);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.page{min-height:100dvh;padding-bottom:32px}.page--with-bottom-nav{padding-bottom:116px}.container{width:min(100%,1120px);padding-inline:var(--container-padding);margin-inline:auto}.app-header{z-index:20;width:100%;height:64px;padding-inline:var(--container-padding);box-shadow:var(--shadow-ambient);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fdf8f6eb;border-bottom:1px solid #d4c3bc5c;grid-template-columns:44px 1fr 44px;align-items:center;display:grid;position:sticky;top:0}.app-header h1{color:var(--color-primary);font-family:var(--font-heading);text-align:center;margin:0;font-size:24px;line-height:32px}.desktop-nav{display:none}.quick-menu{z-index:19;border-radius:var(--radius-pill);width:min(100% - 32px,480px);box-shadow:var(--shadow-ambient);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fdf8f6f5;border:1px solid #d4c3bc7a;margin:10px auto 0;padding:8px;display:flex;position:sticky;top:64px}.quick-menu[hidden]{display:none}.quick-menu a{isolation:isolate;position:relative;overflow:hidden}.quick-menu a:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.quick-menu a:hover:after{opacity:1;transform:scale(1)}}.quick-menu a{border-radius:var(--radius-pill);min-height:38px;color:var(--color-primary);flex:1;place-items:center;font-size:13px;font-weight:700;display:grid}.quick-menu a:hover{background:var(--color-secondary-container)}.icon-button{isolation:isolate;position:relative;overflow:hidden}.icon-button:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.icon-button:hover:after{opacity:1;transform:scale(1)}}.icon-button{border-radius:var(--radius-pill);width:40px;height:40px;color:var(--color-primary);background:0 0;place-items:center;transition:background-color .16s,transform .16s;display:inline-grid}.icon-button:active{transform:scale(.94)}.icon-button:hover,.icon-button.is-active{background:var(--color-secondary-container)}.icon-button.is-active .material-symbols-outlined{font-variation-settings:"FILL" 1, "wght" 400}.icon-button--solid{background:var(--color-primary);width:32px;height:32px;color:var(--color-on-primary)}.icon-button--glass{box-shadow:var(--shadow-ambient);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fdf8f6e6}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 300;font-feature-settings:"liga";letter-spacing:0;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;direction:ltr;width:1em;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block;overflow:hidden}.home-page,.category-page,.receipt-page{padding-top:32px}.home-page{width:min(100%,900px)}.category-page{width:min(100%,960px)}.receipt-page{width:min(100%,560px)}.intro{margin-bottom:var(--section-gap)}.intro h2{color:var(--color-primary);font-family:var(--font-heading);margin:0 0 8px;font-size:24px;line-height:32px}.intro p{color:var(--color-on-surface-variant);margin:0;font-size:14px;line-height:20px}.section-block{margin-bottom:var(--section-gap)}.section-title{justify-content:space-between;align-items:end;margin-bottom:16px;display:flex}.section-title h3{color:var(--color-primary);font-family:var(--font-heading);margin:0;font-size:22px;line-height:28px}.search-box{border-radius:var(--radius-pill);background:var(--color-surface-highest);min-height:52px;box-shadow:var(--shadow-ambient);border:1px solid #d4c3bc8c;align-items:center;gap:12px;padding:0 16px;display:flex}.search-box input{width:100%;min-width:0;color:var(--color-on-surface);text-align:right;background:0 0;border:0;outline:0}.search-box input::placeholder{color:#50443fad}.category-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.category-card{isolation:isolate;position:relative;overflow:hidden}.category-card:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.category-card:hover:after{opacity:1;transform:scale(1)}}.category-card{border-radius:var(--radius-lg);min-height:210px;box-shadow:var(--shadow-ambient);position:relative;overflow:hidden}.category-card img,.category-card__overlay{width:100%;height:100%;position:absolute;inset:0}.category-card img{object-fit:cover;transition:transform .7s}.category-card:hover img{transform:scale(1.05)}.category-card__overlay{background:linear-gradient(#0000,#4b2e205c,#4b2e20eb)}.category-card__content{inset-inline:0;color:var(--color-on-primary);justify-content:space-between;align-items:end;gap:10px;padding:16px;display:flex;position:absolute;bottom:0}.category-card__content strong{font-family:var(--font-heading);margin-top:4px;font-size:22px;line-height:28px;display:block}.category-card__arrow{border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fff3;border:1px solid #ffffff4d;flex:0 0 32px;place-items:center;width:32px;height:32px;display:inline-grid}.filter-row{gap:var(--inline-gap);margin-bottom:var(--section-gap);scrollbar-width:none;display:flex;overflow-x:auto}.filter-row::-webkit-scrollbar{display:none}.filter-chip{isolation:isolate;position:relative;overflow:hidden}.filter-chip:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.filter-chip:hover:after{opacity:1;transform:scale(1)}}.filter-chip{border-radius:var(--radius-pill);background:var(--color-secondary-container);color:var(--color-on-surface-variant);flex:none;padding:9px 24px;font-size:12px;font-weight:700}.filter-chip.is-active{background:var(--color-primary);color:var(--color-on-primary)}.product-card{isolation:isolate;position:relative;overflow:hidden}.product-card:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.product-card:hover:after{opacity:1;transform:scale(1)}}.product-card{border-radius:var(--radius-md);min-width:0;box-shadow:var(--shadow-ambient);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f0dfd899;border:1px solid #4b2e200d;flex-direction:column;transition:transform .18s;display:flex;overflow:hidden}.product-card:hover{transform:translateY(-4px)}.product-card__media{aspect-ratio:1;background:var(--color-surface-high);flex:none;overflow:hidden}.product-card__media img{object-fit:cover;width:100%;height:100%;transition:transform .5s}.product-card:hover .product-card__media img{transform:scale(1.05)}.product-card__body{flex-direction:column;min-height:170px;padding:16px;display:flex}.product-card__body h2{color:var(--color-primary);font-family:var(--font-heading);margin:0 0 4px;font-size:20px;line-height:28px}.product-card__body p{color:var(--color-on-surface-variant);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 12px;font-size:14px;line-height:20px;display:-webkit-box;overflow:hidden}.product-card__footer{color:var(--color-primary);justify-content:space-between;align-items:center;gap:8px;margin-top:auto;font-size:12px;font-weight:700;display:flex}.product-hero{border-bottom-right-radius:40px;border-bottom-left-radius:40px;height:45vh;min-height:350px;position:relative;overflow:hidden}.product-hero img{object-fit:cover;width:100%;height:100%}.product-hero__shade{background:linear-gradient(#0000,#00000038);position:absolute;inset:0}.product-hero__header{top:0;height:80px;padding-inline:var(--container-padding);background:linear-gradient(#fdf8f6cc,#fdf8f600);justify-content:space-between;align-items:center;display:flex;position:absolute;inset-inline:0}.product-content{width:min(100%,720px);padding-top:16px;padding-bottom:132px}.product-summary{margin-bottom:var(--section-gap)}.product-summary>div{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.product-summary h1,.product-summary strong{color:var(--color-primary);font-family:var(--font-heading);margin:0;font-size:24px;line-height:32px}.product-summary p{color:var(--color-on-surface-variant);margin:8px 0 0;font-size:16px;line-height:26px}.components-list{flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;display:flex}.components-list li{border-radius:var(--radius-pill);background:var(--color-surface-low);color:var(--color-primary);border:1px solid #d4c3bcb8;padding:7px 12px;font-size:12px;font-weight:700}.choice-section{margin-bottom:var(--section-gap)}.choice-section h2{color:var(--color-primary);font-family:var(--font-heading);margin:0 0 12px;font-size:20px;line-height:28px}.size-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.size-button{isolation:isolate;position:relative;overflow:hidden}.size-button:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.size-button:hover:after{opacity:1;transform:scale(1)}}.size-button{border:1px solid var(--color-outline-variant);border-radius:var(--radius-md);min-height:48px;color:var(--color-on-surface-variant);background:0 0;place-items:center;gap:3px;padding:8px;font-size:12px;font-weight:700;display:grid}.size-button strong{font-size:11px;line-height:1.2}.size-button.is-active{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}.addons-list{gap:12px;display:grid}.addon-option{isolation:isolate;position:relative;overflow:hidden}.addon-option:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.addon-option:hover:after{opacity:1;transform:scale(1)}}.addon-option{border:1px solid var(--color-outline-variant);border-radius:var(--radius-md);background:var(--color-surface);min-height:58px;color:var(--color-on-surface);cursor:pointer;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 16px;display:grid}.addon-option input{opacity:0;pointer-events:none;position:absolute}.addon-option__box{align-items:center;gap:12px;display:flex}.addon-option__check{border:1px solid var(--color-outline);width:24px;height:24px;color:var(--color-on-primary);border-radius:6px;place-items:center;display:inline-grid}.addon-option__check .material-symbols-outlined{opacity:0;font-size:16px}.addon-option:has(input:checked){border-color:var(--color-primary);background:var(--color-secondary-container)}.addon-option:has(input:checked) .addon-option__check{border-color:var(--color-primary);background:var(--color-primary)}.addon-option:has(input:checked) .addon-option__check .material-symbols-outlined{opacity:1}.cart-bar{z-index:30;padding:16px var(--container-padding) max(16px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f0dfd8eb;border-top-left-radius:20px;border-top-right-radius:20px;gap:16px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #4b2e200d}.quantity-control{border-radius:var(--radius-pill);background:var(--color-secondary-container);min-height:52px;color:var(--color-primary);flex:0 0 124px;justify-content:space-between;align-items:center;padding:8px;display:flex}.quantity-control button{isolation:isolate;position:relative;overflow:hidden}.quantity-control button:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.quantity-control button:hover:after{opacity:1;transform:scale(1)}}.quantity-control button{border-radius:var(--radius-pill);width:34px;height:34px;color:inherit;background:#fdf8f694;place-items:center;display:inline-grid}.quantity-control>span{min-width:28px;font-family:var(--font-heading);text-align:center;font-size:20px}.primary-action{isolation:isolate;position:relative;overflow:hidden}.primary-action:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.primary-action:hover:after{opacity:1;transform:scale(1)}}.primary-action{border-radius:var(--radius-pill);background:var(--color-primary);min-width:0;min-height:52px;color:var(--color-on-primary);box-shadow:var(--shadow-raised);flex:1;justify-content:center;align-items:center;gap:12px;padding:12px 18px;font-size:12px;font-weight:700;display:flex}.primary-action strong{border-inline-start:1px solid #ffffff40;padding-inline-start:12px;font-size:14px}.receipt-section{margin-bottom:var(--section-gap)}.receipt-section__header{border-bottom:1px solid var(--color-outline-variant);justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:8px;display:flex}.receipt-section__header h2{border-bottom:0;margin:0;padding-bottom:0}.receipt-section__header a{color:var(--color-primary);font-size:13px;font-weight:700}.receipt-section h2{border-bottom:1px solid var(--color-outline-variant);color:var(--color-primary);font-family:var(--font-heading);margin:0 0 16px;padding-bottom:8px;font-size:22px}.receipt-list{gap:12px;display:grid}.receipt-item{border-radius:var(--radius-md);box-shadow:var(--shadow-ambient);background:#fff;border:1px solid #d4c3bc66;grid-template-columns:64px 1fr auto;align-items:start;gap:16px;padding:16px;display:grid}.receipt-item img{border-radius:var(--radius-sm);object-fit:cover;width:64px;height:64px}.receipt-item h3,.receipt-item p{margin:0}.receipt-item h3{color:var(--color-on-surface);font-size:16px}.receipt-item p{color:var(--color-on-surface-variant);margin-top:4px;font-size:14px}.receipt-item__body{min-width:0}.receipt-item__price{color:var(--color-primary);justify-items:end;gap:6px;display:grid}.receipt-item__price span{border-radius:var(--radius-pill);background:var(--color-surface-low);color:var(--color-on-surface-variant);padding:4px 8px;font-size:12px;font-weight:700}.receipt-controls{border-radius:var(--radius-pill);background:var(--color-surface-low);align-items:center;gap:8px;margin-top:12px;padding:6px;display:inline-flex}.receipt-controls button{isolation:isolate;position:relative;overflow:hidden}.receipt-controls button:after{z-index:1;border-radius:inherit;content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#4b2e2047,#4b2e201a 34%,#0000 68%);transition:opacity .22s,transform .42s;position:absolute;inset:-45%;transform:scale(.58)}@media (hover:hover){.receipt-controls button:hover:after{opacity:1;transform:scale(1)}}.receipt-controls button{border-radius:var(--radius-pill);width:30px;height:30px;color:var(--color-primary);background:#fff;place-items:center;display:inline-grid}.receipt-controls button .material-symbols-outlined{place-items:center;width:100%;height:100%;font-size:20px;line-height:1;display:grid}.receipt-controls>span{min-width:22px;color:var(--color-primary);text-align:center;font-weight:700}.receipt-controls__delete{color:var(--color-error,#ba1a1a)!important}.receipt-empty{color:var(--color-on-surface-variant);text-align:center;justify-items:center;gap:12px;padding:56px 20px;display:grid}.receipt-empty .material-symbols-outlined{color:var(--color-primary);font-size:44px}.receipt-empty h2,.receipt-empty p{margin:0}.receipt-empty h2{color:var(--color-primary);font-family:var(--font-heading);font-size:22px}.receipt-empty .primary-action{width:min(100%,220px);margin-top:12px}.receipt-summary{margin-bottom:var(--section-gap);border-radius:var(--radius-lg);background:#f0dfd87a;padding:24px}.receipt-summary h2{color:var(--color-primary);font-family:var(--font-heading);margin:0 0 18px;font-size:22px}.receipt-summary dl{gap:12px;margin:0;display:grid}.receipt-summary div{justify-content:space-between;align-items:center;gap:16px;display:flex}.receipt-summary dt,.receipt-summary dd{margin:0;font-size:14px}.receipt-summary dt{color:var(--color-on-surface-variant)}.receipt-summary dd{color:var(--color-on-surface)}.receipt-summary__total{border-top:1px solid var(--color-outline-variant);margin-top:4px;padding-top:14px}.receipt-summary__total dt,.receipt-summary__total dd{color:var(--color-primary);font-size:16px;font-weight:700}.receipt-note{color:#50443fb3;text-align:center;margin:0;font-size:12px;font-weight:700}.bottom-nav{z-index:40;padding:12px 16px max(24px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f1edebdb;border-top:1px solid #e5e2e08c;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:row-reverse;justify-content:space-around;align-items:center;gap:12px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -6px 24px #4b2e200f}.bottom-nav__item{border-radius:var(--radius-pill);min-width:86px;color:var(--color-on-surface-variant);place-items:center;padding:5px 16px;font-size:12px;font-weight:700;transition:background-color .16s,transform .16s;display:grid}.bottom-nav__item span:last-child{margin-top:4px}.bottom-nav__item:hover{background:var(--color-secondary-container);color:var(--color-primary)}.bottom-nav__item.is-active{background:var(--color-secondary-container);color:var(--color-primary);transform:scale(.96)}.bottom-nav__item.is-active .material-symbols-outlined{font-variation-settings:"FILL" 1, "wght" 400}@media (width>=1024px){.page:not(.product-page){padding-top:64px}.app-header{grid-template-columns:44px minmax(120px,1fr) auto 44px;position:fixed;left:0;right:0}.desktop-nav{justify-content:center;align-items:center;gap:8px;display:flex}.desktop-nav a{border-radius:var(--radius-pill);min-height:38px;color:var(--color-on-surface-variant);place-items:center;padding:0 18px;font-size:13px;font-weight:700;display:grid}.desktop-nav a:hover,.desktop-nav a.is-active{background:var(--color-secondary-container);color:var(--color-primary)}.app-header [data-action=menu]{pointer-events:none;opacity:0}.quick-menu,.bottom-nav{display:none}.page--with-bottom-nav{padding-bottom:32px}.category-card{min-height:280px}.category-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.product-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.cart-bar{border-radius:20px 20px 0 0;width:min(100% - 40px,560px);left:auto;right:50%;transform:translate(50%)}}@media (width>=768px) and (width<=1023px){.bottom-nav{border-radius:20px 20px 0 0;width:min(100% - 40px,560px);left:auto;right:50%;transform:translate(50%)}}@media (width>=1100px){.home-page,.category-page{padding-top:44px}}@media (width<=767px){.container{width:min(100%,640px)}.app-header{grid-template-columns:40px minmax(0,1fr) 40px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-hero{height:42vh;min-height:300px}}@media (width<=560px){.product-grid{grid-template-columns:1fr}.product-card{grid-template-columns:128px minmax(0,1fr);min-height:150px;display:grid}.product-card__media{aspect-ratio:auto;height:100%}.product-card__body{min-height:150px}.product-summary>div{align-items:flex-start}}@media (width<=420px){:root{--container-padding:16px}.category-grid,.product-grid{gap:12px}.category-card{min-height:184px}.product-card__body{min-height:160px;padding:14px}.cart-bar{gap:10px}.quantity-control{flex-basis:112px}.primary-action{padding-inline:14px}}@media (width<=370px){.category-grid{grid-template-columns:1fr}.category-card{min-height:180px}.size-options{grid-template-columns:1fr}.cart-bar{flex-direction:column}.quantity-control{flex-basis:auto;width:100%}.receipt-item{grid-template-columns:56px 1fr}.receipt-item img{width:56px;height:56px}.receipt-item__price{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;justify-items:stretch;width:100%}}