*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink-900);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
:lang(my){font-family:var(--font-myanmar);line-height:var(--lh-myanmar);letter-spacing:0}
a{color:var(--ink-900)}
a:hover{color:var(--ink-700)}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--yellow-300);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Promo + header ---------- */
.promo{background:var(--ink-900);color:#fff;font:600 13px/1 var(--font-body);text-align:center;padding:10px 16px}
.site-header{position:sticky;top:0;z-index:20;height:var(--header-h);background:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.header-inner{height:100%;display:flex;align-items:center;gap:32px}
.wordmark{text-decoration:none;font:800 24px var(--font-display);letter-spacing:-0.04em;color:var(--ink-900);white-space:nowrap}
.main-nav{display:flex;gap:24px;font:600 15px var(--font-body)}
.main-nav a{text-decoration:none;color:var(--ink-500);padding:6px 0;border-bottom:3px solid transparent;transition:color var(--dur-fast)}
.main-nav a:hover{color:var(--ink-900)}
.main-nav a.active{color:var(--ink-900);border-bottom-color:var(--yellow-400)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------- Lang toggle ---------- */
.lang-toggle{display:inline-flex;padding:3px;border-radius:999px;background:var(--ink-100)}
.lang-toggle button{height:30px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;font:600 13px/1 var(--font-body);background:transparent;color:var(--ink-600);transition:background var(--dur-fast)}
.lang-toggle button[lang=my]{font-family:var(--font-myanmar);line-height:1.9}
.lang-toggle button[aria-checked=true]{background:var(--yellow-400);color:var(--ink-900)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;font:600 15px/1 var(--font-body);border-radius:var(--radius-pill);border:var(--border-width) solid var(--yellow-400);background:var(--yellow-400);color:var(--ink-900);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--yellow-500);border-color:var(--yellow-500)}
.btn:active{transform:scale(0.97)}
.btn-inverse{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.btn-inverse:hover{background:var(--ink-700);border-color:var(--ink-700)}
.btn-sm{height:40px;padding:0 18px}
.btn-lg{height:48px;width:100%}
a.btn{text-decoration:none;color:var(--ink-900)}
.btn-outline{background:#fff;border-color:var(--ink-300)}
.btn-outline:hover{background:var(--ink-100);border-color:var(--ink-400)}
.btn-block{width:100%}

#cart-button .bag,#cart-button .cart-count{display:none}
.icon-btn{width:40px;height:40px;border:0;border-radius:999px;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-fast)}
.icon-btn:hover{background:var(--ink-100)}

/* ---------- Hero ---------- */
.hero{background:var(--yellow-400)}
.hero-inner{padding-top:72px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:16px}
.eyebrow{font:700 12px var(--font-body);letter-spacing:0.08em;text-transform:uppercase}
.eyebrow span{font-family:var(--font-myanmar);letter-spacing:0;text-transform:none}
.hero h1{margin:0;font:800 76px/0.95 var(--font-display);letter-spacing:-0.035em;text-wrap:balance}
.hero p{margin:0;max-width:460px;font:400 18px/1.5 var(--font-body)}
.hero-media{position:relative;aspect-ratio:5/4;border-radius:var(--radius-xl);overflow:hidden}
.hero-media.has-photo{aspect-ratio:4/5;width:100%;max-width:360px;justify-self:end;background:var(--ink-50);box-shadow:var(--shadow-lg)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Photo placeholder: diagonal yellow stripe */
.ph{background:repeating-linear-gradient(135deg,var(--yellow-100) 0 12px,var(--yellow-50) 12px 24px);display:flex;align-items:center;justify-content:center;color:var(--yellow-700);font:600 13px var(--font-body);text-align:center;padding:12px}

/* ---------- Listing ---------- */
.shop{padding-top:56px}
.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.shop-head h2{margin:0;font:700 40px/1.1 var(--font-display);letter-spacing:-0.02em}
.shop-sub{margin-top:4px;color:var(--text-secondary)}

.search{display:flex;align-items:center;gap:8px;width:280px;height:48px;padding:0 16px;background:#fff;border:var(--border-width) solid var(--ink-300);border-radius:var(--radius-md);color:var(--text-secondary);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.search:focus-within{border-color:var(--ink-900);box-shadow:var(--focus-ring)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:16px var(--font-body);color:var(--text-primary)}
.search input::placeholder{color:var(--ink-500)}

.tabs{display:flex;gap:28px;border-bottom:1px solid var(--border-subtle);overflow-x:auto;overflow-y:hidden;margin-bottom:32px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:12px 0 14px;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;background:transparent;cursor:pointer;text-align:left;white-space:nowrap;color:var(--ink-500);transition:color var(--dur-fast)}
.tab:hover{color:var(--ink-900)}
.tab[aria-selected=true]{color:var(--ink-900);border-bottom-color:var(--yellow-400)}
.tab .tl{display:block;font:700 16px/1.6 var(--font-body)}
.tab .ts{display:block;font-size:12px;line-height:1.6;font-weight:500}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;background:var(--ink-50);margin:0 calc(var(--gutter) * -1);padding:32px var(--gutter);border-radius:var(--radius-xl)}
.card{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:inherit}
.card-media{position:relative;aspect-ratio:1/1;padding:20px}
.card-media .img,.card-media .ph{width:100%;height:100%;border-radius:12px}
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out)}
.card:hover .card-media img{transform:scale(1.04)}
.badges{position:absolute;top:14px;right:14px;display:flex;gap:6px;pointer-events:none}
.badge{font:700 11px/1 var(--font-body);padding:6px 9px;border-radius:999px;white-space:nowrap}
.badge-sale{background:var(--ink-900);color:var(--yellow-400)}
.badge-veg{background:var(--leaf-100);color:var(--leaf-700)}
.badge-spicy{background:var(--chili-100);color:var(--chili-700)}
.badge-soldout{background:var(--ink-200);color:var(--ink-700)}
.card.is-soldout .card-media img{opacity:.45}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:var(--yellow-400);border-color:var(--yellow-400)}
.card-body{display:flex;flex-direction:column;gap:4px;padding:4px 20px 20px;flex:1}
.card-title{font:700 17px/1.25 var(--font-display);letter-spacing:-0.02em;text-wrap:pretty}
.card-title:lang(my){font-family:var(--font-myanmar);font-size:16px;line-height:1.8}
.card:hover .card-title{text-decoration:underline}
.card-sub{font-size:14px;color:var(--text-secondary)}
.card-sub:not(:lang(my)){line-height:1.5}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.price .now{font:700 18px var(--font-body)}
.price .was{font:500 14px var(--font-body);color:var(--ink-500);text-decoration:line-through}
.empty{padding:80px 0;text-align:center;color:var(--text-secondary)}

/* ---------- Product detail ---------- */
.detail{padding-top:32px}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px;font:500 14px var(--font-body);color:var(--ink-500)}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs a:hover{color:var(--ink-900)}
.crumbs .here{color:var(--ink-900)}
.detail-grid{display:grid;grid-template-columns:88px minmax(0,1.3fr) minmax(0,1fr);gap:24px 32px;align-items:start}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumb{position:relative;width:88px;height:88px;padding:6px;border-radius:12px;background:#fff;border:1.5px solid var(--ink-200);overflow:hidden;cursor:pointer;flex:none}
.thumb img,.thumb .ph{width:100%;height:100%;object-fit:contain;border-radius:6px;font-size:11px;padding:4px}
.thumb[aria-current=true]{box-shadow:inset 0 0 0 2px var(--ink-900);border-color:var(--ink-900)}
.main-media{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-xl);padding:40px}
.main-media img,.main-media .ph{width:100%;height:100%;object-fit:contain;border-radius:16px}
.main-media .badges{top:20px;right:20px}
.info{display:flex;flex-direction:column;gap:20px;padding-top:8px}
.info h1{margin:0;font:700 40px/1.1 var(--font-display);letter-spacing:-0.02em;text-wrap:balance}
.info h1:lang(my){font-family:var(--font-myanmar);font-size:32px;line-height:1.6}
.info .alt{font-size:20px;color:var(--text-secondary)}
.info .alt:not(:lang(my)){line-height:1.4}
.big-price{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.big-price .now{font:800 44px/1 var(--font-display);letter-spacing:-0.02em}
.big-price .was{font:500 22px var(--font-body);color:var(--ink-500);text-decoration:line-through}
.save{font:600 15px var(--font-body);color:var(--leaf-700)}
.muted{font:400 14px var(--font-body);color:var(--text-secondary)}
.desc{margin:0;font:400 16px/1.55 var(--font-body);color:var(--ink-700);text-wrap:pretty}
.stock{display:flex;align-items:center;gap:10px;font:600 15px var(--font-body)}
.stock::before{content:"";width:10px;height:10px;border-radius:99px;background:var(--leaf-500);flex:none}
.stock.low::before{background:var(--yellow-500)}
.stock.out{color:var(--ink-600)}
.stock.out::before{background:var(--ink-400)}
.buy-row{display:flex;align-items:center;gap:12px}
.buy-row .btn{flex:1}
.specs{border-top:1px solid var(--ink-200);padding-top:20px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font:400 14px/1.5 var(--font-body)}
.specs dt{color:var(--ink-500)}
.specs dd{margin:0}

/* ---------- Quantity stepper ---------- */
.stepper{display:inline-flex;align-items:center;height:40px;border-radius:999px;background:var(--ink-100);flex:none}
.stepper.sm{height:32px}
.stepper button{width:40px;height:40px;border:0;background:transparent;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-900)}
.stepper.sm button{width:32px;height:32px}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper span{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.stepper.sm span{font-size:14px}

/* ---------- Info band + footer ---------- */
.info-band-wrap{margin-top:96px}
.info-band{background:var(--ink-900);color:#fff;border-radius:var(--radius-xl);padding:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.info-band > div{display:flex;flex-direction:column;gap:6px}
.info-title{font:700 20px var(--font-display);color:var(--yellow-400)}
.info-body{color:var(--ink-300);line-height:1.5}
.site-footer{background:var(--ink-900);color:var(--ink-300);margin-top:96px}
.footer-inner{padding-top:56px;padding-bottom:56px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;font:15px/1.6 var(--font-body)}
.site-footer a{color:var(--ink-300);text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-mark{font:800 32px var(--font-display);letter-spacing:-0.04em;color:var(--yellow-400)}
.footer-tag{margin-top:4px}
.footer-head{color:#fff;font-weight:700;margin-bottom:8px}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 24px;padding-top:20px;padding-bottom:28px;border-top:1px solid var(--ink-700);font:13px/1.5 var(--font-body);color:var(--ink-400)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);background:var(--ink-900);color:#fff;padding:14px 22px;border-radius:999px;font:600 15px var(--font-body);box-shadow:var(--shadow-lg);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Cart drawer ---------- */
.drawer{position:fixed;inset:0;z-index:90;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.drawer.open .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:420px;max-width:100%;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-overlay);transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-subtle)}
.drawer-head h2{margin:0;font:700 24px var(--font-display);letter-spacing:-0.02em}
.drawer-body{flex:1;overflow-y:auto;padding:0 24px}
.drawer-foot{padding:20px 24px 24px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:12px}
.drawer-foot:empty{display:none}
.line{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.line-img{width:64px;height:64px;flex:none;border-radius:12px;border:1px solid var(--ink-200);padding:4px;background:#fff}
.line-img img,.line-img .ph{width:100%;height:100%;object-fit:contain;border-radius:8px;padding:0;font-size:0}
.line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.line-name{font-weight:700;line-height:1.3}
.line-price{font-weight:700;font-variant-numeric:tabular-nums}
.sum-row{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.sum-row.total{font:700 18px var(--font-body)}
.cart-empty{padding:64px 0;text-align:center;color:var(--text-secondary)}
.delivery{border:0;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.delivery legend{font-weight:700;margin-bottom:8px;padding:0}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:var(--border-width) solid var(--ink-300);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.opt:hover{border-color:var(--ink-500)}
.opt:has(input:checked){border-color:var(--ink-900);background:var(--yellow-50)}
.opt input{accent-color:var(--ink-900);width:18px;height:18px;margin:0;flex:none}
.opt-main{flex:1;display:flex;flex-direction:column;line-height:1.3}
.opt-name{font-weight:600}
.opt-note{font-size:13px;color:var(--text-secondary)}
.opt-price{font-weight:700;font-variant-numeric:tabular-nums}
.form-error{background:var(--chili-100);color:var(--chili-700);border-radius:var(--radius-md);padding:10px 14px;font:600 14px/1.4 var(--font-body)}
.center{text-align:center}
.thanks{padding-top:56px}
.thanks-card{max-width:620px;margin:0 auto;background:var(--ink-50);border:1px solid var(--ink-200);border-radius:var(--radius-xl);padding:48px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.thanks-card h1{margin:0;font:800 48px/1 var(--font-display);letter-spacing:-0.035em;text-wrap:balance}
.thanks-card .lead{margin:0;font-size:18px;color:var(--ink-700)}
.thanks-specs{width:100%}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero h1{font-size:60px}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}
  .main-media{order:1}
  .info{order:3}
  .info-band{grid-template-columns:1fr;padding:32px}
}
@media (max-width: 760px){
  :root{--gutter:16px;--header-h:64px}
  .main-nav{display:none}
  .header-inner{gap:16px}
  .wordmark{font-size:20px}
  .hero-inner{grid-template-columns:1fr;padding-top:48px;padding-bottom:48px;gap:32px}
  .hero h1{font-size:48px}
  .hero-media.has-photo{justify-self:center;max-width:280px}
  .hero p{font-size:16px}
  .shop{padding-top:40px}
  .shop-head h2{font-size:32px}
  .search{width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border-radius:20px}
  .card-media{padding:12px}
  .card-body{padding:4px 12px 14px}
  .card-title{font-size:15px}
  .card-foot{flex-direction:column;align-items:stretch;gap:8px}
  .card-foot .btn{width:100%}
  .badges{top:8px;right:8px;flex-direction:column;align-items:flex-end}
  .main-media{padding:20px;border-radius:20px}
  .info h1{font-size:32px}
  .thanks-card{padding:28px 20px}
  .thanks-card h1{font-size:36px}
  .big-price .now{font-size:36px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-inner > div:first-child{grid-column:1/-1}
  .info-band-wrap,.site-footer{margin-top:64px}
}
@media (max-width: 480px){
  .lang-toggle button{padding:0 9px}
  #cart-button{padding:0 14px;gap:6px}
  #cart-button .cart-text{display:none}
  #cart-button .bag{display:block}
  #cart-button .cart-count:not([hidden]){display:inline}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}