.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.menu-demo-section {
    position:relative;
    margin:1rem 0 4rem;
    padding:clamp(1.25rem,3vw,2.4rem);
    border-radius:34px;
    background:
        radial-gradient(circle at 92% 4%,rgba(255,66,72,.26),transparent 28%),
        linear-gradient(145deg,#191c27,#11131b);
    box-shadow:0 30px 80px rgba(19,22,31,.18);
    overflow:hidden;
}

.menu-demo-heading {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:1.5rem;
    align-items:end;
    margin-bottom:1.8rem;
}

.menu-demo-heading .eyebrow { background:rgba(255,255,255,.09); color:#ffd7d8; }
.menu-demo-heading h2 { max-width:780px; margin:0 0 .8rem; color:#fff; }
.menu-demo-heading p { max-width:760px; margin:0; color:rgba(255,255,255,.66); line-height:1.7; }

.menu-demo-cart-button {
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:50px;
    padding:.75rem .8rem .75rem 1.1rem;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:800 .9rem Inter,sans-serif;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease;
}
.menu-demo-cart-button strong { display:grid; place-items:center; min-width:30px; height:30px; padding:0 .4rem; border-radius:10px; background:#ff3035; }
.menu-demo-cart-button:hover { transform:translateY(-2px); background:rgba(255,255,255,.13); }

.menu-demo-app {
    position:relative;
    z-index:1;
    border:1px solid rgba(255,255,255,.1);
    border-radius:26px;
    background:#f7f5f1;
    overflow:hidden;
}

.menu-demo-app-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.2rem;
    border-bottom:1px solid #e4e0d9;
    background:#fff;
}

.menu-demo-brand { display:flex; align-items:center; gap:.8rem; min-width:0; }
.menu-demo-brand > span:last-child { display:grid; gap:.18rem; min-width:0; }
.menu-demo-brand strong { color:#181a22; font-size:.98rem; }
.menu-demo-brand small { color:#777b85; font-size:.76rem; }
.menu-demo-logo { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:14px; background:#171923; color:#fff; font-weight:900; }
.menu-demo-meta { display:flex; align-items:center; gap:.65rem; }
.menu-demo-meta span { padding:.5rem .65rem; border-radius:999px; background:#f4f2ee; color:#5d616c; font-size:.76rem; }
.menu-demo-meta b { color:#171923; }

.menu-demo-toolbar { display:grid; gap:1rem; padding:1.2rem 1.2rem .3rem; }
.menu-demo-search { display:flex; align-items:center; gap:.7rem; max-width:520px; padding:.15rem 1rem; border:1px solid #dedbd5; border-radius:16px; background:#fff; color:#8a8e98; }
.menu-demo-search:focus-within { border-color:#ff6a6e; box-shadow:0 0 0 4px rgba(255,48,53,.08); }
.menu-demo-search input { width:100%; min-height:46px; padding:0; border:0; outline:0; background:transparent; color:#171923; font:500 .92rem Inter,sans-serif; }
.menu-demo-categories { display:flex; gap:.6rem; padding-bottom:.4rem; overflow-x:auto; scrollbar-width:thin; }
.menu-demo-category { flex:0 0 auto; min-height:40px; padding:.65rem .95rem; border:1px solid #dfdcd6; border-radius:999px; background:#fff; color:#5c606b; font:700 .8rem Inter,sans-serif; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.menu-demo-category:hover { transform:translateY(-1px); border-color:#ffb7b9; color:#d92127; }
.menu-demo-category.is-active { border-color:#171923; background:#171923; color:#fff; }

.menu-demo-results { padding:1rem 1.2rem 1.3rem; }
.menu-demo-result-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; color:#171923; }
.menu-demo-result-head span { color:#7a7e88; font-size:.82rem; }
.menu-demo-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.menu-demo-empty { margin:1rem 0 0; padding:2rem; border:1px dashed #d7d3cc; border-radius:18px; color:#777b85; text-align:center; }

.menu-product-card {
    display:grid;
    grid-template-rows:auto 1fr;
    min-width:0;
    padding:0;
    border:1px solid #e2ded7;
    border-radius:20px;
    background:#fff;
    color:#171923;
    text-align:left;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(31,34,46,.05);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.menu-product-card:hover { transform:translateY(-4px); border-color:#ffb7b9; box-shadow:0 18px 34px rgba(31,34,46,.1); }
.menu-product-card-visual { position:relative; display:grid; place-items:center; min-height:142px; overflow:hidden; }
.menu-product-card-visual::before,.menu-product-visual::before { content:""; position:absolute; width:120px; height:120px; border:1px solid rgba(255,255,255,.28); border-radius:36% 64% 54% 46%; transform:rotate(22deg); }
.menu-product-card-visual span,.menu-product-visual > span { position:relative; z-index:1; font-size:2.4rem; font-weight:900; color:rgba(255,255,255,.9); text-shadow:0 8px 30px rgba(0,0,0,.14); }
.menu-product-card-copy { display:grid; align-content:start; gap:.55rem; padding:1rem; }
.menu-product-card-top { display:flex; justify-content:space-between; gap:.7rem; align-items:start; }
.menu-product-card h3 { margin:0; font-size:.94rem; line-height:1.35; }
.menu-product-card-price { flex:0 0 auto; color:#d92127; font-size:.9rem; font-weight:900; }
.menu-product-card p { display:-webkit-box; margin:0; overflow:hidden; color:#757983; font-size:.78rem; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.menu-product-card-badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.menu-product-card-badges span { padding:.3rem .48rem; border-radius:999px; background:#fff1f1; color:#c82329; font-size:.64rem; font-weight:800; }

.is-sand { background:linear-gradient(135deg,#d8aa6e,#805737); }
.is-tomato { background:linear-gradient(135deg,#ff7a67,#9b2027); }
.is-herb { background:linear-gradient(135deg,#7ba260,#274d36); }
.is-ocean { background:linear-gradient(135deg,#5da7b8,#183b56); }
.is-charcoal { background:linear-gradient(135deg,#696a71,#171923); }
.is-citrus { background:linear-gradient(135deg,#f1c84a,#7b9d47); }
.is-coffee { background:linear-gradient(135deg,#ab7655,#402d2a); }
.is-cocoa { background:linear-gradient(135deg,#b46c5a,#4a2027); }

.menu-product-modal,.menu-cart-modal {
    width:min(760px,calc(100% - 1.25rem));
    max-height:calc(100dvh - 1.25rem);
    margin:auto;
    padding:0;
    border:0;
    border-radius:26px;
    background:#fff;
    color:#171923;
    box-shadow:0 32px 100px rgba(8,10,16,.38);
    overflow:auto;
}
.menu-product-modal::backdrop,.menu-cart-modal::backdrop { background:rgba(12,15,23,.68); backdrop-filter:blur(7px); }
.menu-product-modal[open],.menu-cart-modal[open] { animation:menu-modal-in .22s cubic-bezier(.2,.8,.2,1) both; }
.menu-product-close { position:absolute; top:14px; right:14px; z-index:3; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:rgba(23,25,35,.9); color:#fff; font-size:1.4rem; cursor:pointer; }
.menu-product-visual { position:relative; display:grid; place-items:center; min-height:270px; }
.menu-product-visual > span { font-size:4.2rem; }
.menu-product-content { display:grid; gap:1rem; padding:1.5rem; }
.menu-product-content h3 { margin:0; font-size:clamp(1.6rem,4vw,2.2rem); letter-spacing:-.04em; }
.menu-product-content > p { margin:0; color:#676b76; line-height:1.7; }
.menu-product-badges,.menu-product-allergens { display:flex; flex-wrap:wrap; gap:.5rem; }
.menu-product-badges span,.menu-product-allergens span { padding:.42rem .65rem; border-radius:999px; background:#fff1f1; color:#c82329; font-size:.72rem; font-weight:800; }
.menu-product-allergens span { background:#f3f4f6; color:#656a76; }
.menu-product-option { display:grid; gap:.5rem; color:#343742; font-size:.82rem; font-weight:800; }
.menu-product-option select { min-height:48px; padding:0 .9rem; border:1px solid #dedfe5; border-radius:13px; background:#fff; color:#171923; font:600 .9rem Inter,sans-serif; }
.menu-product-actions { display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; }
.menu-quantity { display:flex; align-items:center; min-height:52px; border:1px solid #dedfe5; border-radius:14px; overflow:hidden; }
.menu-quantity button { width:42px; align-self:stretch; border:0; background:#f7f7f9; color:#171923; font-size:1.2rem; cursor:pointer; }
.menu-quantity output { min-width:34px; text-align:center; font-weight:900; }
.menu-add-cart { display:flex; justify-content:space-between; align-items:center; min-height:54px; padding:.9rem 1rem; border:0; border-radius:14px; background:#ff3035; color:#fff; font:800 .9rem Inter,sans-serif; cursor:pointer; }

.menu-cart-modal { width:min(520px,calc(100% - 1.25rem)); }
.menu-cart-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 1.3rem 1rem; border-bottom:1px solid #eceef2; }
.menu-cart-head small { color:#d92127; font-size:.66rem; font-weight:900; letter-spacing:.12em; }
.menu-cart-head h3 { margin:.25rem 0 0; font-size:1.5rem; }
.menu-cart-head button { display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:#171923; color:#fff; font-size:1.35rem; cursor:pointer; }
.menu-cart-items { display:grid; gap:.75rem; padding:1rem 1.3rem 0; }
.menu-cart-item { display:grid; grid-template-columns:1fr auto; gap:.8rem; padding:1rem; border:1px solid #e8e9ee; border-radius:16px; }
.menu-cart-item strong { display:block; margin-bottom:.25rem; font-size:.9rem; }
.menu-cart-item span { color:#767b86; font-size:.76rem; }
.menu-cart-item button { align-self:center; padding:.45rem .6rem; border:0; border-radius:10px; background:#fff1f1; color:#c82329; font:800 .72rem Inter,sans-serif; cursor:pointer; }
.menu-cart-empty { margin:0; padding:2.5rem 1.3rem; color:#7a7e88; text-align:center; }
.menu-cart-summary { display:grid; gap:1rem; padding:1.2rem 1.3rem; }
.menu-cart-summary > div { display:flex; justify-content:space-between; gap:1rem; font-size:1rem; }
.menu-cart-summary > div strong { font-size:1.25rem; }
.menu-cart-summary button { min-height:52px; border:0; border-radius:14px; background:#ff3035; color:#fff; font:800 .9rem Inter,sans-serif; cursor:pointer; }
.menu-cart-note { margin:0; padding:0 1.3rem 1.3rem; color:#7a7e88; font-size:.76rem; text-align:center; }
.menu-cart-note.is-success { color:#17834a; font-weight:800; }

@keyframes menu-modal-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:980px) {
    .menu-demo-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
    .menu-demo-section { margin-inline:-.15rem; padding:1rem; border-radius:24px; }
    .menu-demo-heading { grid-template-columns:1fr; align-items:start; }
    .menu-demo-cart-button { width:100%; justify-content:space-between; }
    .menu-demo-app-head { align-items:flex-start; flex-direction:column; }
    .menu-demo-meta { width:100%; }
    .menu-demo-meta span { flex:1; text-align:center; }
    .menu-demo-products { grid-template-columns:1fr; }
    .menu-product-card { grid-template-columns:118px 1fr; grid-template-rows:1fr; }
    .menu-product-card-visual { min-height:148px; }
    .menu-product-actions { grid-template-columns:1fr; }
    .menu-quantity { justify-content:space-between; }
    .menu-quantity button { width:52px; }
    .menu-product-visual { min-height:210px; }
}

@media (prefers-reduced-motion:reduce) {
    .menu-demo-section *,.menu-product-modal,.menu-cart-modal { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}