/* Shared modifier dialog. All rules are scoped so Menu/POS styles cannot alter cards. */
.customize-dialog { box-sizing:border-box; width:min(840px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid #e1e6ed; border-radius:20px; color:#182234; background:#fff; box-shadow:0 24px 80px #14213d40; font:inherit; }
.customize-dialog *, .customize-dialog *::before, .customize-dialog *::after { box-sizing:border-box; }
.customize-dialog::backdrop { background:rgb(15 23 42 / 58%); }
.customize-dialog form { display:flex; flex-direction:column; max-height:calc(100dvh - 42px); margin:0; }
.customize-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid #e6eaf0; flex:none; }
.customize-head small { font-size:11px; font-weight:750; letter-spacing:.1em; color:#b50931; }
.customize-head h2 { margin:4px 0 0; font-size:23px; line-height:1.25; font-weight:750; overflow-wrap:anywhere; }
.customize-close { display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid #e0e5ec; border-radius:12px; color:#38465a; background:#f6f8fb; font-size:26px; cursor:pointer; }
.customize-body { padding:0 24px 16px; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.customize-section { border-bottom:1px solid #e7ebf0; }
.customize-section:last-child { border:0; }
.customize-section > summary { display:flex; align-items:center; gap:12px; min-height:76px; padding:16px 0; cursor:pointer; list-style:none; }
.customize-section > summary::-webkit-details-marker { display:none; }
.customize-section > summary > span:first-child { flex:1; min-width:0; }
.customize-section summary strong { display:block; font-size:17px; line-height:1.3; font-weight:750; }
.customize-section summary small { display:block; margin-top:4px; color:#627087; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.customize-section-badge { flex:none; border-radius:20px; padding:4px 8px; background:#f1f4f8; color:#526176; font-size:10px; font-weight:750; }
.customize-section-badge.is-complete { background:#e6f7ee; color:#087949; }
.customize-chevron { flex:none; width:9px; height:9px; margin-right:4px; border-right:2px solid #59677c; border-bottom:2px solid #59677c; transform:rotate(45deg); }
.customize-section[open] .customize-chevron { transform:rotate(225deg); }
.customize-section-content { padding:0 0 18px; }
.customize-rule { margin:0 0 10px; font-size:12px; color:#65738a; }
.customize-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; }
.customize-card { position:relative; min-width:0; display:flex; flex-direction:column; border:1px solid #dce2ea; border-radius:12px; overflow:hidden; background:#fff; transition:border-color .1s,background .1s; }
.customize-card:hover:not(.is-unavailable) { border-color:#8b99ac; }
.customize-card.is-selected { border-color:#d90839; box-shadow:0 0 0 1px #d90839; background:#fff7f9; }
.customize-card.is-unavailable { background:#f5f6f8; color:#647083; }
.customize-card.is-included { border-color:#b3d9c5; box-shadow:none; background:#f5fcf8; }
.customize-card .customize-card-select { display:flex; flex:1; flex-direction:column; align-items:stretch; position:relative; min-width:0; margin:0; padding:0 0 12px; font-weight:inherit; cursor:pointer; }
.customize-card-select > :is(.customize-card-name,.customize-card-price,small,del,.customize-stock) { margin-left:12px; margin-right:12px; }
.customize-card.is-included .customize-card-select, .customize-card.is-unavailable .customize-card-select { cursor:default; }
.customize-card-select input { position:absolute; width:1px; height:1px; opacity:0; padding:0; margin:0; }
.customize-check { position:absolute; z-index:1; top:8px; right:8px; display:grid; place-items:center; width:22px; height:22px; border:1px solid #cbd3df; border-radius:50%; background:#fff; font-size:12px; color:transparent; }
.is-selected .customize-check { border-color:#d90839; background:#d90839; color:white; }
.is-included .customize-check { border-color:#138556; background:#138556; }
/* Full-bleed photos use the menu card proportions; reserve their space before loading. */
.customize-thumb { display:grid; place-items:center; position:relative; flex:none; width:100%; aspect-ratio:782 / 596; margin:0 0 10px; overflow:hidden; background:#f0f3f7; }
.customize-thumb img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; background:#fff; }
.customize-thumb img[hidden] { display:none; }
.customize-placeholder { font-size:28px; font-weight:700; color:#9caabd; }
.customize-card-name { display:block; font-size:13px; line-height:1.4; font-weight:750; overflow-wrap:anywhere; }
.customize-card-price { display:block; margin-top:7px; font-size:13px; line-height:1.4; font-weight:750; color:#b50931; }
.customize-card small { display:block; font-size:11px; line-height:1.5; font-weight:400; color:#69778c; margin-top:4px; overflow-wrap:anywhere; }
.customize-card del { display:block; font-size:11px; color:#7c8797; margin-top:2px; }
.customize-stock { display:block; font-size:11px; color:#a4342d; margin-top:7px; font-weight:650; }
.customize-stepper { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 10px 10px; }
.customize-stepper[hidden] { display:none; }
.customize-stepper button { width:38px; height:38px; border:1px solid #d5dae3; border-radius:9px; background:#fff; color:#172236; font-size:20px; font-weight:650; cursor:pointer; }
.customize-stepper output { font-size:14px; font-weight:750; }
.customize-stepper button:disabled { opacity:.4; cursor:default; }
.customize-footer { display:flex; flex:none; align-items:center; justify-content:space-between; gap:18px; padding:16px 24px; border-top:1px solid #e1e7ef; background:#fbfcfe; }
.customize-price { min-width:0; }
.customize-price strong { display:block; font-size:24px; font-weight:800; line-height:1.3; margin:2px 0; }
.customize-price small { display:block; font-size:11px; line-height:1.5; color:#65738a; }
.customize-confirm { min-height:48px; min-width:180px; padding:12px 22px; flex:none; border:0; border-radius:12px; background:#d90839; color:white; font-size:14px; font-weight:750; cursor:pointer; }
.customize-confirm:disabled { background:#a7afbd; cursor:default; }
.customize-error { margin:12px 0 0; border:1px solid #f0cac6; padding:12px; border-radius:10px; background:#fff4f2; color:#b42318; font-size:13px; }
.customize-error[hidden] { display:none; }
.customize-notice { position:fixed; top:16px; right:16px; z-index:10000; max-width:min(360px,calc(100vw - 32px)); margin:0; padding:14px 18px; border:1px solid #dbe1e9; border-radius:12px; background:white; color:#182234; box-shadow:0 8px 24px #18223426; font:500 14px/1.5 system-ui,sans-serif; }
.customize-dialog button:focus-visible, .customize-dialog summary:focus-visible { outline:3px solid #6fa5e9; outline-offset:3px; }
.customize-card:has(input:focus-visible) { outline:3px solid #6fa5e9; outline-offset:2px; }
@media (max-width:720px) { .customize-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .customize-head h2 { font-size:20px; } }
@media (max-width:520px) {
    .customize-dialog { width:100%; max-width:none; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
    .customize-dialog form { height:100%; max-height:100dvh; }
    .customize-head { padding:12px 16px; }.customize-head h2 { font-size:18px; }.customize-head small { font-size:10px; }
    .customize-body { flex:1; padding:0 16px 12px; }.customize-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .customize-section > summary { min-height:70px; gap:8px; padding:12px 0; }.customize-section summary strong { font-size:15px; }
    .customize-section-badge { font-size:9px; padding:4px 7px; }
    .customize-footer { gap:10px; padding:12px 16px max(12px,env(safe-area-inset-bottom)); }.customize-confirm { min-width:138px; padding:12px 14px; font-size:13px; }
    .customize-price strong { font-size:22px; } #customizePriceBreakdown { max-width:180px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .customize-card { transition:none; } }