@font-face { font-family:Trop Sans; src:url(assets/body.woff) format("woff"); font-display:swap; }
@font-face { font-family:Trop Sans; src:url(assets/body-bold.woff) format("woff"); font-weight:700; font-display:swap; }
:root {
  --plum:#541333; --plum-dark:#430e2a; --muted:#68535f; --line:#e9e0e5;
  --green:#5a811e; --lime:#d1ef85; --yellow:#ffde67; --paper:#fff;
  --control:#f7f1f5; --sans:"Trop Sans",system-ui,sans-serif;
  --bag-space:calc(66px + env(safe-area-inset-bottom, 0px));
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding-bottom:var(--bag-space); background:var(--paper); color:var(--plum-dark); font:16px/1.45 var(--sans); }
body:has(dialog[open]) { overflow:hidden; }
img { display:block; max-width:100%; }
button,select,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
a { color:inherit; text-decoration:none; }
p,h1,h2,h3 { margin:0; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid #7b3c78; outline-offset:3px; }
.wrap { width:min(1150px, calc(100% - 40px)); margin-inline:auto; }
.sr-only,.icons { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:fixed; top:8px; left:8px; z-index:9; padding:8px 12px; background:white; transform:translateY(-160%); }
.skip:focus { transform:none; }
.icon { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.top { border-bottom:1px solid var(--line); }
.header { position:relative; display:flex; align-items:center; justify-content:center; min-height:80px; padding:8px 53px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand img { width:58px; height:58px; border:1px solid #ded1d7; border-radius:50%; flex:none; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:clamp(1.2rem, 3.4vw, 2.35rem); letter-spacing:-.052em; line-height:1.12; }
.brand small { margin-top:2px; font-size:clamp(.69rem, 1.65vw, 1.07rem); line-height:1.25; }
.bag-button { position:absolute; right:0; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:white; color:var(--plum); }
.bag-button:hover { background:var(--control); }
.bag-button span[data-count] { position:absolute; top:-2px; right:-3px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:100px; background:var(--lime); color:#273709; font-size:.68rem; font-weight:700; }

.hero { position:relative; isolation:isolate; width:min(1400px,100%); margin-inline:auto; background:#263613; }
.hero-art { position:absolute; inset:0; z-index:-2; touch-action:pan-y; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; }
.hero-art img:not([hidden]) { animation:photo-in .34s ease-out; }
@keyframes photo-in { from { opacity:.68; } to { opacity:1; } }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#18200bcc,#1b250881 25%,transparent 59%); }
.hero-copy { min-height:clamp(210px,34vw,435px); display:grid; align-items:center; padding-block:22px 37px; pointer-events:none; }
.hero h1 { color:white; font-size:clamp(2.25rem, 5.9vw, 5.05rem); letter-spacing:-.057em; line-height:.98; width:max-content; max-width:56%; text-shadow:0 1px 9px #17220bbf; }
.hero h1::after { content:""; display:block; height:5px; width:59%; margin-top:11px; border-radius:100%; transform:rotate(-4deg); background:var(--lime); }
.carousel-controls { position:absolute; bottom:5px; right:clamp(12px,3vw,42px); display:flex; align-items:center; gap:1px; border-radius:24px; background:#1e2a15b9; padding-inline:4px; }
.carousel-controls button { display:grid; place-items:center; min-width:35px; height:38px; border:0; border-radius:30px; padding:0; background:transparent; color:white; }
.carousel-controls :focus-visible { outline-color:white; outline-offset:-2px; }
.carousel-dots { display:flex; }
.carousel-dots button::before { content:""; width:8px; height:8px; border:1px solid white; border-radius:50%; }
.carousel-dots button[aria-pressed="true"]::before { background:var(--lime); border-color:var(--lime); }
.rotation-button::before { content:""; width:0; height:0; border-block:5px solid transparent; border-left:8px solid currentColor; }
.rotation-button[data-playing="true"]::before { width:8px; height:10px; border:0; border-inline:2px solid currentColor; }

.store-strip { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; min-height:45px; padding-block:7px; font-size:clamp(.76rem,1.8vw,1.06rem); text-align:center; }
.store-status { display:inline-flex; align-items:center; gap:6px; }
.store-status::before { content:""; width:9px; height:9px; border-radius:50%; background:#a991a0; }
.store-status[data-state="open"]::before { background:var(--green); }
.store-status[data-state="closed"]::before { background:#a7444a; }

.category-links { display:flex; flex-wrap:wrap; gap:7px; margin-block:10px 15px; }
.category-links a,.outline { min-height:44px; padding:5px 11px; border:1px solid #d8c7d0; border-radius:100px; background:var(--control); color:var(--plum); font-weight:700; font-size:.87rem; }
.category-links a { display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; }
.category-links a:hover { border-color:var(--plum); }
.category-links a[aria-current] { border-color:var(--plum); background:var(--plum); color:white; }

.primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:6px 14px; border:1px solid transparent; border-radius:90px; background:var(--green); color:white; font-weight:700; }
.primary:hover { filter:brightness(.95); }
.promotion { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:clamp(10px,3vw,24px); align-items:center; background:var(--plum); border-radius:19px; padding:10px clamp(10px,2vw,22px) 10px 10px; color:white; }
.promotion img { width:100%; height:auto; aspect-ratio:2.18; object-fit:cover; border-radius:12px; }
.promotion h2 { font-size:clamp(1.15rem,3.6vw,2.65rem); letter-spacing:-.055em; line-height:1.02; }
.promotion p { margin-top:3px; font-size:clamp(.8rem,1.7vw,1.12rem); }
.promotion-copy > strong { color:var(--yellow); font-size:clamp(1.07rem,2.85vw,1.95rem); }
.promotion .primary { background:var(--lime); color:#263508; white-space:nowrap; }

.menu-section { scroll-margin-top:14px; }
.menu-section h2 { margin-block:20px 11px; font-size:clamp(1.45rem,4.4vw,2.55rem); letter-spacing:-.045em; line-height:1.1; }
.section-products { display:grid; gap:9px; }
.section-intro { margin-bottom:8px; color:var(--muted); }
.menu-section + .menu-section { margin-top:22px; }
.product { display:grid; grid-template-columns:minmax(0,37%) minmax(0,1fr) auto; align-items:center; gap:clamp(9px,3vw,26px); width:100%; overflow:hidden; min-height:93px; padding:0 clamp(8px,2.4vw,19px) 0 0; background:white; border:1px solid var(--line); border-radius:17px; text-align:left; }
.product:hover { border-color:#be9fb0; background:#fffafb; }
.product-visual,.detail-visual { position:relative; display:block; align-self:stretch; }
.product-visual { overflow:hidden; border-radius:16px; background:#414829; isolation:isolate; }
.product-photo-back { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(10px); transform:scale(1.13); }
.product-photo { width:100%; height:100%; min-height:92px; max-height:180px; aspect-ratio:1.6; object-fit:contain; }
.photo-brand { position:absolute; width:clamp(24px,4.3vw,53px); height:auto; aspect-ratio:1; border-radius:50%; right:6px; bottom:6px; box-shadow:0 1px 5px #161a1866; }
.detail-visual .photo-brand { right:9px; bottom:9px; width:46px; }
.product-copy { display:grid; gap:3px; padding-block:8px; }
.product-copy > strong { font-size:clamp(.99rem,3.1vw,2rem); letter-spacing:-.045em; line-height:1.13; }
.product-copy > span:not(.product-price) { color:var(--muted); font-size:clamp(.75rem,1.9vw,1.18rem); line-height:1.29; }
.product-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; }
.product-price b { color:var(--plum); white-space:nowrap; font-weight:700; font-size:clamp(.93rem,2.5vw,1.7rem); }
.product-price small,.product-price del { color:var(--muted); font-size:.74rem; white-space:nowrap; }
.product-plus { display:grid; place-items:center; width:clamp(33px,6.4vw,66px); height:clamp(33px,5.4vw,54px); border-radius:clamp(9px,1.8vw,16px); background:var(--green); color:white; font:400 clamp(1.35rem,3.5vw,2.7rem)/1 var(--sans); }

.loyalty-banner,.location { padding:15px 17px; border-radius:15px; }
.loyalty-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px 15px; background:#eff4df; }
.loyalty-banner h2,.location h2 { font-size:clamp(1.23rem,3vw,1.8rem); line-height:1.15; letter-spacing:-.035em; }
.loyalty-banner p,.location address { margin-top:4px; color:var(--muted); font-size:.87rem; }
.loyalty-banner .primary { text-decoration:none; font-size:.83rem; }
.location { margin-top:28px; background:var(--control); }
.location-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; margin-bottom:12px; }
.location address { font-style:normal; }
.location .primary { text-decoration:none; font-size:.83rem; }
.location-map { display:block; width:100%; height:clamp(250px,41vw,340px); border:0; border-radius:12px; background:#e9e9e4; }
.footer { padding-block:13px 20px; color:var(--muted); }
.bag-bar { position:fixed; z-index:4; bottom:0; inset-inline:0; padding:6px 0 calc(7px + env(safe-area-inset-bottom, 0px)); background:#fff; border-top:1px solid #eee6eb; }
.bag-bottom { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; min-height:51px; padding:6px 13px; border:0; border-radius:100px; background:var(--plum); color:white; }
.bag-bottom #bag-summary { margin-left:auto; font-size:.86rem; white-space:nowrap; }

.sheet { position:fixed; inset:auto 0 0; width:min(calc(100% - 15px),575px); max-width:none; max-height:91vh; max-height:91dvh; margin:0 auto; padding:0; overflow:hidden; border:0; border-radius:22px 22px 0 0; background:white; color:var(--plum-dark); }
.sheet[open] { display:flex; animation:sheet-in .25s ease-out; }
.sheet::backdrop { background:#3513298c; }
@keyframes sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet-scroll { width:100%; overflow:auto; overscroll-behavior:contain; }
.sheet-body { padding:17px 18px calc(18px + env(safe-area-inset-bottom,0px)); }
.sheet-body h2 { margin:4px 40px 8px 0; font-size:clamp(1.4rem,5.8vw,2.2rem); line-height:1.12; letter-spacing:-.048em; }
.sheet-body > p:not(.detail-category) { margin-bottom:9px; color:var(--muted); }
.detail-category { color:var(--green); font-size:.77rem; font-weight:700; }
.detail-photo { width:100%; height:clamp(130px,29dvh,240px); margin-bottom:10px; object-fit:contain; background:#f8f4ee; border-radius:13px; }
.close,.quantity button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #dbcdd5; border-radius:50%; background:white; color:var(--plum); font-size:1.26rem; }
.close { position:absolute; top:8px; right:8px; }
fieldset { min-width:0; margin:0 0 9px; padding:0; border:0; }
legend { margin-bottom:3px; padding:0; font-weight:700; }
.helper { color:var(--muted); font-size:.85rem; }
.select-field { display:grid; gap:4px; margin-bottom:10px; font-weight:700; }
.select-field select,.select-field textarea,#order-text { display:block; width:100%; min-height:43px; padding:6px 9px; border:1px solid #d7c6ce; border-radius:8px; background:white; color:var(--plum-dark); font-weight:400; }
.group { margin-top:9px; }
.group h3 { font-size:.84rem; }
.group > div { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.option { position:relative; }
.option input { position:absolute; width:1px; height:1px; opacity:0; }
.option span { display:flex; align-items:center; min-height:39px; padding:4px 9px; border:1px solid #dbccd7; border-radius:100px; cursor:pointer; font-size:.81rem; }
.option input:checked + span { border-color:#799750; background:#e5edcf; }
.option input:focus-visible + span { outline:2px solid var(--green); outline-offset:2px; }
.option input:disabled + span { opacity:.5; cursor:default; }
.quantity { display:flex; align-items:center; gap:5px; }
.quantity output { min-width:1.4rem; text-align:center; }
.item-actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:center; position:sticky; bottom:0; padding-block:5px 0; background:white; }
.bag-line,.summary-total { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bag-line { padding-block:9px; border-bottom:1px solid var(--line); }
.bag-info { min-width:0; overflow-wrap:anywhere; }
.bag-info small,.bag-info b { display:block; }
.bag-info small { color:var(--muted); }
.summary-total { margin-block:10px 13px; font-weight:700; }
.bag-actions { display:grid; gap:7px; margin-top:9px; }
.bag-actions .primary { text-decoration:none; }
.order-fallback,#copy-status { margin-top:7px; }
.order-fallback p { margin-top:4px; }

@media(max-width:565px) {
  .wrap { width:calc(100% - 24px); }
  .header { min-height:64px; padding:7px 49px 7px 5px; }
  .brand img { width:42px; height:42px; }
  .hero-copy { min-height:clamp(148px,39vw,221px); }
  .hero-art img { object-position:82% center; }
  .hero h1 { font-size:clamp(1.59rem,6.9vw,2.5rem); }
  .hero h1::after { height:4px; margin-top:8px; }
  .hero::after { background:linear-gradient(90deg,#17210bcf,#1b25086e 32%,transparent 72%); }
  .carousel-controls { right:8px; bottom:4px; }
  .carousel-controls button { min-width:31px; height:33px; }
  .category-links { gap:5px; margin-block:8px 10px; }
  .category-links a { min-height:41px; padding-inline:7px; font-size:.72rem; }
  .promotion { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:5px 9px; padding:7px; border-radius:13px; }
  .promotion img { grid-row:span 2; aspect-ratio:1.57; }
  .promotion .primary { width:fit-content; min-height:44px; font-size:.77rem; padding:3px 12px; }
  .product { grid-template-columns:minmax(0,36%) minmax(0,1fr) auto; padding-right:6px; gap:7px; border-radius:13px; }
  .product-visual { border-radius:12px; }
  .product-photo { max-height:130px; }
  .product-copy > span:not(.product-price) { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sheet { width:100%; }
  .item-actions .primary { font-size:.87rem; padding-inline:7px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .sheet[open], .hero-art img:not([hidden]) { animation:none; }
}