.modifier-sheet{position:fixed;z-index:120;inset:0;display:grid;pointer-events:none}.modifier-sheet.open{pointer-events:auto}.modifier-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(12,30,25,.58);opacity:0;transition:.22s;backdrop-filter:blur(4px)}.modifier-sheet.open .modifier-backdrop{opacity:1}
.modifier-panel{position:absolute;inset:max(10px,env(safe-area-inset-top)) 0 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:28px 28px 0 0;background:#f7f3ec;box-shadow:0 -25px 60px rgba(9,35,28,.28);transform:translateY(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.modifier-sheet.open .modifier-panel{transform:translateY(0)}
.modifier-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid #ded9cf;background:rgba(255,255,255,.96);padding-top:max(14px,env(safe-area-inset-top))}.modifier-head h2{overflow:hidden;margin:1px 0 0;color:#153d31;font-size:18px;white-space:nowrap;text-overflow:ellipsis}.modifier-head .eyebrow{margin:0}.modifier-close{display:grid;width:38px;height:38px;place-items:center;border:1px solid #ddd8ce;border-radius:13px;background:#f8f5ef;color:#174b3d;font-size:29px;line-height:1}.modifier-step{padding:7px 9px;border-radius:999px;background:#e4f2ec;color:#0b5a49;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.modifier-scroll{overflow:auto;padding:14px 14px 24px}.modifier-item-hero{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:13px;margin-bottom:12px;padding:12px;border:1px solid #ded8ce;border-radius:18px;background:#fff}.modifier-item-photo{display:grid;width:82px;height:72px;overflow:hidden;place-items:center;border-radius:14px;background:linear-gradient(135deg,#eed5b8,#e8d7b3)}.modifier-item-photo img{width:100%;height:100%;object-fit:cover}.modifier-item-photo.no-photo:after{content:"";width:46px;height:46px;border-radius:50%;background:url("/public/assets/hop-logo.png") center/contain no-repeat #fff;box-shadow:0 7px 16px rgba(53,39,25,.12)}.modifier-item-hero p,.modifier-item-hero h3,.modifier-item-hero span{margin:0}.modifier-item-hero p{color:#b4443d;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.modifier-item-hero h3{margin:3px 0;color:#163f32;font-size:18px}.modifier-item-hero span{display:block;color:#6f7d76;font-size:11px;line-height:1.45}
.included-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:12px;padding:13px;border:1px solid #d9d4ca;border-radius:16px;background:linear-gradient(135deg,#fff,#f8f2e6)}.included-card h3,.included-card p{margin:0}.included-card h3{color:#20483c;font-size:14px}.included-card>p{color:#62716a;font-size:11px;line-height:1.5}
.modifier-groups{display:grid;gap:12px}.modifier-group{padding:14px;border:1px solid #ddd8ce;border-radius:18px;background:#fff}.modifier-group.required{border-color:#b9d6cb;box-shadow:inset 4px 0 #0d684f}.modifier-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.modifier-group-head h3,.modifier-group-head p{margin:0}.modifier-group-head h3{color:#153f32;font-size:16px}.modifier-group-head p{margin-top:3px;color:#758078;font-size:10px;line-height:1.4}.modifier-rule{flex:0 0 auto;padding:5px 7px;border-radius:8px;background:#f1eee7;color:#6b756f;font-size:8px;font-weight:950;text-transform:uppercase}.modifier-group.required .modifier-rule{background:#e3f3ec;color:#0b5a49}
.size-choice-grid,.single-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.size-choice,.single-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 11px;border:1px solid #ddd8ce;border-radius:12px;background:#faf8f3;color:#304c43;text-align:left}.size-choice strong,.single-choice strong{display:block;font-size:12px}.size-choice small,.single-choice small{display:block;margin-top:2px;color:#788179;font-size:9px}.size-choice.is-selected,.single-choice.is-selected{border-color:#0d684f;background:#e6f4ee;box-shadow:0 0 0 1px #0d684f;color:#0a5947}
.multi-choice-list{display:grid;gap:7px}.multi-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:10px;border:1px solid #e0dbd1;border-radius:13px;background:#fbfaf7}.multi-choice.is-selected{border-color:#abd0c2;background:#edf7f2}.multi-choice-main{display:flex;align-items:flex-start;gap:9px;border:0;background:transparent;color:#304b43;text-align:left}.choice-check{display:grid;flex:0 0 21px;width:21px;height:21px;place-items:center;border:1px solid #c7cbc7;border-radius:7px;background:#fff;color:transparent;font-size:12px;font-weight:950}.multi-choice.is-selected .choice-check{border-color:#0c654e;background:#0c654e;color:#fff}.multi-choice-main strong,.multi-choice-main small{display:block}.multi-choice-main strong{font-size:12px}.multi-choice-main small{margin-top:2px;color:#768079;font-size:9px}.portion-toggle{grid-column:1/-1;display:flex;gap:5px;padding-top:7px;border-top:1px solid #dce8e2}.portion-toggle button{flex:1;min-height:32px;border:1px solid #cfd8d3;border-radius:9px;background:#fff;color:#68756f;font-size:9px;font-weight:950;text-transform:uppercase}.portion-toggle button.is-selected{border-color:#0b5c49;background:#0b5c49;color:#fff}
.modifier-instructions{display:grid;gap:5px;margin-top:12px;padding:14px;border:1px solid #ddd8ce;border-radius:17px;background:#fff}.modifier-instructions>span{color:#183f33;font-size:14px;font-weight:950}.modifier-instructions small{color:#77817b;font-size:9px}.modifier-instructions textarea{margin-top:5px;padding:10px;border:1px solid #ddd8ce;border-radius:11px;background:#faf8f3;color:#2b4a40;font:inherit;resize:none}
.modifier-footer{display:grid;gap:8px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));border-top:1px solid #d9d4ca;background:rgba(255,255,255,.98);box-shadow:0 -12px 30px rgba(29,55,46,.08)}.modifier-summary{display:flex;gap:5px;overflow:auto}.modifier-summary span{flex:0 0 auto;padding:5px 7px;border-radius:8px;background:#f0eee7;color:#5e6d66;font-size:8px;font-weight:850}.modifier-total-row{display:flex;align-items:center;justify-content:space-between;color:#52655e;font-size:11px;font-weight:850}.modifier-total-row strong{color:#163f32;font-size:17px}.modifier-footer>p{min-height:14px;margin:0;color:#b3423b;font-size:10px;font-weight:800}.modifier-footer>button{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 16px;border:0;border-radius:15px;background:linear-gradient(135deg,#0d684f,#0a503f);color:#fff;font-size:13px;font-weight:950;box-shadow:0 10px 24px rgba(11,93,72,.23)}.modifier-footer>button:disabled{background:#b8c0bc;box-shadow:none}
.cart-line-modifiers{display:flex!important;flex-wrap:wrap;gap:4px;margin-top:5px!important}.cart-line-modifiers span{padding:3px 5px;border-radius:6px;background:#eeeae2;color:#617069;font-size:8px;font-weight:800}.cart-line-note{margin-top:4px!important;color:#b5443d!important;font-size:9px!important;font-weight:850}.customer-item-modifiers{display:block;margin-top:3px;color:#6e7b74;font-size:9px;line-height:1.4}.menu-item-controls button.is-customize{width:auto;min-width:94px;padding:0 11px;font-size:10px;font-weight:950}.menu-item-controls:has(button.is-customize){grid-template-columns:minmax(0,1fr) auto}
@media(min-width:700px){.modifier-panel{inset:4vh max(18px,calc((100vw - 760px)/2));border-radius:28px}.modifier-scroll{padding:18px 22px 28px}.modifier-footer{padding-inline:22px}.modifier-item-hero{grid-template-columns:110px minmax(0,1fr)}.modifier-item-photo{width:110px;height:88px}.modifier-groups{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.modifier-group.size-group,.modifier-instructions{grid-column:1/-1}}
@media(max-width:390px){.modifier-head{grid-template-columns:38px minmax(0,1fr)}.modifier-step{display:none}.modifier-scroll{padding:10px}.modifier-footer{padding-inline:10px}.modifier-item-hero{grid-template-columns:68px minmax(0,1fr)}.modifier-item-photo{width:68px;height:64px}.size-choice-grid,.single-choice-grid{grid-template-columns:1fr 1fr}}