*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 var(--font, system-ui, sans-serif);
}
a{color:var(--accent)}
img{max-width:100%;display:block}

.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.bar-brand,.brand{
  font-weight:700; font-size:18px; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.bar-right{display:flex; align-items:center; gap:6px}
.bar-toggle,.bar-lang{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.bar-toggle span{font-size:20px; line-height:1}
.bar-panel,.bar-langs{
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:8px 16px 14px;
}
.bar-panel.open,.bar-langs.open{display:block}
.bar-panel a,.bar-langs button{
  display:block; width:100%; text-align:left;
  padding:13px 4px; font-size:17px;
  color:var(--ink); text-decoration:none;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  cursor:pointer; font-family:inherit;
}
.bar-panel a:last-child,.bar-langs button:last-child{border-bottom:0}
.bar-panel a.current,.bar-langs button.current{color:var(--accent); font-weight:700}
.navrule{
  height:1px; margin:8px 0; background:var(--line);
  border:0; padding:0;
}
.bar-panel a.plat,.plat{color:var(--ink2); font-size:15px}

@media (min-width:760px){
  .bar{position:sticky; padding:12px 28px}
  .bar-toggle{display:none}
  .bar-panel{
    display:flex; position:static; align-items:center; gap:18px;
    padding:0; border:0; background:transparent;
  }
  .bar-panel a{
    width:auto; padding:6px 2px; border-bottom:0; font-size:15px;
  }
  .navrule{width:1px; height:20px; margin:0 4px}
}

:root{--side:1mm}
.wrap{max-width:900px; margin:0 auto; padding:22px var(--side,1mm) 40px}
h1{font-size:27px; margin:0 0 6px}
h2{font-size:21px; margin:28px 0 10px; color:var(--accent)}
h3{font-size:17px; margin:20px 0 8px}
h1,h2,h3,.bar-brand,.brand{font-family:var(--head, var(--font))}
.muted{color:var(--ink2); font-size:15px}
.note{
  color:var(--ink2); font-size:14px; line-height:1.5;
  border-top:1px solid var(--line); margin-top:26px; padding-top:14px;
}

.slideshow{position:relative; width:100%; overflow:hidden; background:var(--surface)}
.slides{display:flex; transition:transform .45s ease; touch-action:pan-y}
.slides figure{flex:0 0 100%; margin:0; width:100%}
.slides img{
  display:block; width:100%; height:clamp(220px,46vw,430px); object-fit:cover;
}
.dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px;
}
.dots button{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.85); background:transparent; cursor:pointer;
}
.dots button.on{background:#fff}

.hero-text{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px 16px; margin:18px 0;
}
.hero-text .logo{width:auto; height:64px; max-width:60%; object-fit:contain; margin:0 0 10px}
body.t2 .hero-text .logo,body.t3 .hero-text .logo{margin-left:auto; margin-right:auto}

.card,.menu{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin:14px 0;
}
.row,.in{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:9px 0; border-bottom:1px solid var(--line);
}
.row:last-child,.in:last-child{border-bottom:0}
.row>div:first-child,.row.haspic>div{flex:1; min-width:0}
.mview{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; margin:2px 0 8px; background:var(--surface)}
.mview .mv{border:0; background:transparent; color:var(--ink2); font:inherit; font-weight:600; padding:7px 16px; border-radius:999px; cursor:pointer}
.mview .mv.on{background:var(--brand); color:#fff}
body:not(.mphotos) .row.haspic{flex-wrap:wrap}
body:not(.mphotos) .row.haspic>div{cursor:pointer}
body:not(.mphotos) .row.haspic .name::after{content:""; display:inline-block; width:14px; height:14px; margin-left:6px; vertical-align:-2px; opacity:.6; background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h3l2-3h6l2 3h3v11H4z'/><circle cx='12' cy='13' r='3.5'/></svg>");
  mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h3l2-3h6l2 3h3v11H4z'/><circle cx='12' cy='13' r='3.5'/></svg>")}
body:not(.mphotos) .row .pic{display:none; order:10; width:100%; height:auto; max-height:280px; object-fit:cover; border-radius:10px; margin:8px 0 2px; cursor:zoom-in; background:var(--line)}
body:not(.mphotos) .row.open .pic{display:block}
body.mphotos .msec{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; padding:14px}
body.mphotos .msec>h3,body.mphotos .msec>.sizes{grid-column:1/-1; margin:0}
body.mphotos .row{display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg)}
body.mphotos .row>div{padding:0 10px; flex:1}
body.mphotos .row .pic{display:block; width:100%; height:130px; object-fit:cover; border-radius:0; cursor:zoom-in; background:var(--line)}
body.mphotos .row:not(.haspic)::before{content:""; display:block; height:40px; background:linear-gradient(135deg,var(--line),transparent)}
body.mphotos .row .name{display:block; font-size:15px; line-height:1.25}
body.mphotos .row .desc{font-size:13px}
body.mphotos .row .price{padding:0 10px 10px; font-weight:700}
body.mphotos .row.two .price{padding:0 10px 4px} body.mphotos .row.two .price+.price{padding-bottom:10px; margin:0}
body.mphotos .row .addbtn{margin:0 10px 10px auto}
body.mphotos .msec{align-items:start}
body.mphotos .row:not(.two){display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 0}
body.mphotos .row:not(.two)>.pic,body.mphotos .row:not(.two)>div,body.mphotos .row:not(.two)::before{grid-column:1/-1}
body.mphotos .row:not(.two)>div{padding-top:4px}
body.mphotos .row:not(.two) .price{grid-column:1; padding:0 10px 10px}
body.mphotos .row:not(.two) .addbtn{grid-column:2; margin:0 10px 10px 0}
.piclb{position:fixed; inset:0; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; z-index:60; cursor:zoom-out; padding:16px}
.piclb img{max-width:100%; max-height:100%; border-radius:12px; object-fit:contain}
.piclb figcaption{position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#fff; font-weight:600; text-shadow:0 1px 4px #000}
.sizes{display:flex; justify-content:flex-end; gap:0; padding:4px 0 0; color:var(--ink2); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.sizes span{min-width:112px; text-align:right}
.row.two .price{min-width:64px; text-align:right}
.row.two .price+.price{margin-left:6px}
.row.two .addbtn{margin-left:4px; width:26px; height:26px}
.row.two .addbtn svg{width:16px; height:16px}
.row.two .price{min-width:56px; font-size:15px}
.n{font-weight:600}
.name{font-weight:600}
.desc,.d{display:block; color:var(--ink2); font-size:14px; margin-top:2px}
.price,.p{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink)}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:10px;
  background:var(--accent); color:#fff; text-decoration:none;
  border:1px solid var(--accent); font-weight:600;
}
.btn.ghost,.ghost{
  background:var(--surface); color:var(--ink); border-color:var(--line);
}

.travel{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:10px 0}
.travel a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; text-decoration:none; color:var(--accent);
}
.travel svg{flex:0 0 auto}

.foot{
  border-top:1px solid var(--line); margin-top:32px;
  padding:18px 16px 34px; color:var(--ink2); font-size:14px;
  text-align:center;
}
.foot a{color:var(--accent)}

.contact-lines{margin:0 0 12px}
.contact-line{display:flex;align-items:center;gap:10px;padding:8px 0;text-decoration:none;color:var(--ink);font-size:1.05rem}
.contact-line svg{flex:0 0 auto;color:var(--accent)}

.menu{list-style:none; padding:6px 0; margin:0 0 6px}
.menu li{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line)}
.menu li:last-child{border-bottom:0}
.menu .n{flex:1}
.menu .d{display:block; font-weight:400}
main{display:block}
main:not(.wrap){max-width:900px; margin:0 auto; padding:22px var(--side,1mm) 40px}
.hours{list-style:none; padding:0; margin:0}
.hours li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours li span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap}
footer .inner{max-width:900px; margin:0 auto; padding:0 16px}

.addbtn{
  flex:0 0 auto; margin-left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--accent); cursor:pointer;
}
.addbtn.added{background:var(--accent); color:#fff; border-color:var(--accent)}
.cartfab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:80;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.cartfab-n{font-variant-numeric:tabular-nums}

.qtyrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.qtyrow:last-of-type{border-bottom:0}
.qty{display:inline-flex; align-items:center; gap:8px}
.qty button{width:32px; height:32px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--accent); font-size:18px; line-height:1; cursor:pointer}
.qty span{min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums}
.sum{display:flex; justify-content:space-between; font-weight:700; padding:12px 0 0}
.f label{display:block; margin:12px 0 4px; font-size:14px; color:var(--ink2)}
.f input,.f textarea,.f select{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit}
.f .modes{display:flex; gap:16px; margin:8px 0 2px; flex-wrap:wrap}
.f .modes label{display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--ink); font-size:16px}
.f .modes input{width:auto}
.pay{margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-weight:600}
.sendbtn{margin-top:14px; padding:13px 18px; border-radius:10px; background:var(--accent); border:1px solid var(--accent); color:#fff; font:inherit; font-weight:700; cursor:pointer}

.dlv-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.dlv-row a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:14px;color:var(--accent)}

body.t2 .hero-text{background:transparent;border:0;text-align:center;padding:24px 16px 6px}
body.t2 h1{letter-spacing:.06em;text-transform:uppercase;font-size:24px}
body.t2 .card,body.t2 .menu{border-radius:6px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
body.t2 h2{font-weight:400;letter-spacing:.04em}
body.t2 .slides img{height:clamp(260px,56vw,520px)}
body.t2 .dots button.on{background:var(--accent);border-color:var(--accent)}
body.t3 .slideshow{max-width:900px;margin:18px auto 0;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08)}
body.t3 .hero-text{border-radius:0;border:0;border-bottom:2px solid var(--accent);background:transparent;text-align:center;margin:8px 0 0}
body.t3 h1{font-style:italic;font-size:30px}
body.t3 .card,body.t3 .menu{border-radius:4px;box-shadow:2px 2px 0 var(--line)}
body.t3 .row .name{font-family:var(--font)}
body.t3 .btn,body.t3 .sendbtn,body.t3 .adm-btn{border-radius:4px}
body.t4 .card,body.t4 .menu{border:2px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--accent)}
body.t4 .hero-text{border:2px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--accent)}
body.t4 h1{text-transform:uppercase;letter-spacing:.04em;font-size:30px}
body.t4 h2{background:var(--accent);color:var(--surface);display:inline-block;padding:4px 12px;text-transform:uppercase;letter-spacing:.06em;font-size:16px;margin-bottom:12px}
body.t4 .row .price{font-weight:800}
body.t4 .btn,body.t4 .sendbtn,body.t4 .adm-btn,body.t4 .cartfab,body.t4 .addbtn{border-radius:0}
body.t4 .slides img{height:clamp(220px,50vw,460px)}
body.t4 .dots button.on{background:var(--accent);border-color:var(--ink)}
body.t5 .card,body.t5 .menu,body.t5 .hero-text{background:transparent;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
body.t5 .wrap{max-width:760px;padding-top:34px}
body.t5 h1{font-weight:400;font-size:34px;letter-spacing:-.01em}
body.t5 h2{font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:8px;margin-top:38px}
body.t5 .row,body.t5 .in{padding:14px 0;border-bottom:1px solid var(--line)}
body.t5 .row .price{font-weight:400}
body.t5 .slideshow{border-radius:0}
body.t5 .dots button{border-radius:0;width:18px;height:3px}
body.t5 .btn,body.t5 .sendbtn,body.t5 .addbtn{border-radius:2px}
body.t6{background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.06),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(255,255,255,.05),transparent 50%)}
body.t6 .card,body.t6 .menu,body.t6 .hero-text{background:transparent;border:2px dashed color-mix(in srgb,var(--ink) 55%,transparent);border-radius:10px;box-shadow:none}
body.t6 h1{font-size:40px;color:var(--accent);text-align:center}
body.t6 h2{font-size:30px;color:var(--ink);text-align:center;border-bottom:1px dashed color-mix(in srgb,var(--ink) 45%,transparent);padding-bottom:4px}
body.t6 h3{font-size:24px}
body.t6 .row,body.t6 .in{border-bottom:0;padding:8px 0}
body.t6 .row .name{font-family:var(--head);font-size:22px}
body.t6 .row .price{color:var(--accent);font-family:var(--head);font-size:22px;font-weight:600}
body.t6 .btn,body.t6 .sendbtn,body.t6 .addbtn,body.t6 .cartfab{border-radius:8px;border:2px solid var(--accent);background:transparent;color:var(--accent)}
body.t6 .sendbtn,body.t6 .cartfab{background:var(--accent);color:var(--bg)}
body.t6 .slideshow{border:4px solid #8b6b4a;border-radius:6px}

.row.soldout{opacity:.55}.row.soldout .sold{display:inline-block;margin:0 10px 10px;padding:3px 9px;border-radius:999px;background:var(--line);color:var(--ink);font-size:12px;font-weight:700}
body:not(.mphotos) .row.soldout .sold{margin:0 0 0 8px}
.busy{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:#fff4e0;border:1px solid #e0a24a;color:#7a4a00;font-weight:600}

.slideshow .ss-logo{position:absolute;top:12px;left:12px;width:clamp(64px,18vw,104px);height:auto;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:3}
.cats{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats .cat{flex:0 0 auto;width:min(42vw,180px);scroll-snap-align:start;text-decoration:none;color:var(--ink,inherit);display:flex;flex-direction:column;gap:6px}
.cats .cat img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.cats .cat span{font-weight:700;font-size:15px;text-align:center}

@media (min-width:1000px){
  main.wrap,main:not(.wrap),footer .inner{max-width:calc(1100px - 2 * var(--side,1mm))}
  .hero-text{max-width:calc(1100px - 2 * var(--side,1mm)); margin:22px auto 0}
  .cats{max-width:1100px; margin:0 auto; justify-content:center; gap:18px; padding:20px var(--side,1mm) 6px}
  .cats .cat{width:220px}
  .slides img{height:clamp(300px,34vw,460px)}
  main.wrap:has(> section .hours){display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:0 22px; align-items:start}
  main.wrap:has(> section .hours)>section{margin:14px 0}
  main.wrap:has(> #orderform){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:0 22px; align-items:start}
  main.wrap:has(> #orderform)>*{grid-column:1/-1}
  main.wrap:has(> #orderform)>section.card:has(#items){grid-column:1; position:sticky; top:120px}
  main.wrap:has(> #orderform)>#orderform{grid-column:2; margin-top:14px}
  body.mphotos .msec{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  body.mphotos .row .pic{height:160px}
}
