/* MARCO COFFEE V17: centered menu + full product details, responsive checkout and success.
   Applied last; preserves product, cart, rewards and payment calculations. */
:root{--v17-gold:#936719;--v17-gold-dark:#765112;--v17-ink:#292b2e;--v17-line:#e7e2d9;--v17-muted:#6a6967}
body .store-shell{grid-template-columns:220px minmax(0,1fr)!important;max-width:1500px!important;min-height:calc(100vh - 94px)}
body .compact-menu-content{padding:32px 27px 40px!important}
body .compact-products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body .compact-product-card{cursor:default!important}
body .compact-product-card .add-product{cursor:pointer!important}
body .compact-product-card:focus-within{border-color:var(--v17-gold)!important}
/* Neutralize the legacy sidebar product panel. The product form now lives in body-level modal. */
body #optionDialog,
body #checkoutDialog,
body #orderSuccessDialog{position:fixed!important;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;transform:none!important;margin:auto!important;border:0!important;max-width:none!important;box-sizing:border-box;overscroll-behavior:contain}
body #optionDialog::backdrop,body #checkoutDialog::backdrop,body #orderSuccessDialog::backdrop{background:rgba(23,24,26,.68);backdrop-filter:blur(3px)}
body #optionDialog{width:min(760px,calc(100vw - 34px))!important;max-height:calc(100dvh - 32px)!important;border-radius:22px!important;overflow-y:auto!important;box-shadow:0 28px 100px #16161660!important;background:#fff!important}
body #optionDialog .option-modal-inner{padding:29px 32px 22px!important;width:100%!important;max-width:none!important;overflow:visible!important;display:block!important;box-sizing:border-box}
body #optionDialog .detail-close{position:absolute!important;z-index:3;top:14px!important;right:16px!important;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#f3f2f0!important;color:#303135!important;font-size:25px}
body .v17-detail-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;padding:2px 0 10px}
body .v17-product-summary,body .v17-options-panel{min-width:0}
body #optionDialog .option-hero-image{display:grid!important;place-items:center!important;min-height:225px!important;height:265px!important;max-height:none!important;background:#faf9f7!important;border-radius:16px!important;overflow:hidden!important;margin-bottom:18px!important;padding:15px}
body #optionDialog .option-hero-image img{height:100%!important;max-height:235px!important;width:100%!important;object-fit:contain!important;background:transparent!important}
body #optionDialog .option-modal-header{display:flex!important;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:9px}
body #optionDialog .option-modal-header h2{font:700 clamp(23px,2vw,30px)/1.18 Georgia,'Times New Roman',serif!important;color:#232323!important;letter-spacing:-.4px}
body #optionDialog .option-modal-header strong{font:750 20px/1.2 'Segoe UI',Arial,sans-serif!important;color:var(--v17-gold)!important}
body #optionDialog .option-product-description{font:400 14px/1.58 'Segoe UI',Arial,sans-serif!important;color:#676767!important;margin:6px 0 0!important}
body .v17-options-panel{padding:7px 0 0}
body .v17-option-heading{display:flex;flex-direction:column;gap:5px;border-bottom:1px solid var(--v17-line);padding-bottom:11px;margin-bottom:13px}
body .v17-option-heading strong{font-size:18px;font-weight:750;color:#232323}
body .v17-option-heading span{font-size:12px;color:#81796d}
body #optionDialog .option-group{padding-top:8px!important;margin-bottom:13px!important}
body #optionDialog .option-group legend{font-size:15px!important;font-weight:800!important}
body #optionDialog .option-group legend small{font-size:12px!important;color:#81786a!important}
body #optionDialog .option-choice-grid,body #optionDialog .option-choice-grid:has(label:nth-child(3)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
body #optionDialog .option-choice{min-height:43px!important;font-size:13px!important;padding:9px 11px!important;border:1px solid #e4e1dd!important;border-radius:10px!important;cursor:pointer}
body #optionDialog .option-choice.selected{border-color:var(--v17-gold)!important;background:#fff9ed!important}
body #optionDialog .option-choice strong{font-size:12px!important}
body #optionDialog #optionError{margin:12px 0!important;padding:12px;border-radius:10px;background:#fff1ea;color:#a33920;font-size:13px}
body .v17-recommendations{margin-top:11px;padding:19px 0 14px;border-top:1px solid var(--v17-line)}
body .v17-recommendation-header{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:12px}
body .v17-recommendation-header span{font-weight:800;letter-spacing:2px;color:var(--v17-gold);font-size:10px}
body .v17-recommendation-header h3{font:700 22px/1.2 Georgia,'Times New Roman',serif!important;margin:4px 0 0;color:#232323}
body .v17-recommendation-header small{font-size:12px;color:#777}
body .v17-recommendation-list{display:grid;grid-template-columns:1fr;gap:10px}
body .v17-rec-item{border:1px solid #e8e5e0;border-radius:14px;background:#fff;text-align:left;display:grid;grid-template-columns:24px 74px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;min-width:0;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
body .v17-rec-item:hover{border-color:var(--v17-gold);background:#fffaf2;transform:translateY(-1px)}
body .v17-rec-item.selected{border-color:var(--v17-gold);background:#fff8ea;box-shadow:0 0 0 1px #dcb56f inset}
body .v17-rec-item:focus-within{outline:3px solid #d7af66;outline-offset:2px}
body .v17-rec-check{display:grid;place-items:center}
body .v17-rec-check input{position:absolute;opacity:0;pointer-events:none}
body .v17-rec-check>span{width:18px;height:18px;border:1.6px solid #c7b18a;border-radius:5px;display:grid;place-items:center;background:#fff;transition:all .18s ease}
body .v17-rec-check input:checked+span{background:var(--v17-gold);border-color:var(--v17-gold)}
body .v17-rec-check input:checked+span::after{content:'✓';font-size:12px;font-weight:800;color:#fff;line-height:1}
body .v17-rec-photo{flex:0 0 66px;width:66px;height:70px;background:#faf9f7;border-radius:9px;display:grid;place-items:center;overflow:hidden}
body .v17-rec-photo img{width:100%;height:100%;object-fit:contain}
body .v17-rec-photo>span{font-size:10px;color:#999;text-align:center}
body .v17-rec-text{min-width:0;display:grid;gap:5px}
body .v17-rec-text b{font-size:13px;line-height:1.2;overflow-wrap:anywhere;color:#272727}
body .v17-rec-text small{font-size:12px;color:#7b776f;display:grid;gap:5px;line-height:1.45}.v17-rec-text small em{font-style:normal;color:var(--v17-gold);font-weight:800}
body #optionDialog .option-modal-footer{display:grid!important;grid-template-columns:minmax(110px,1fr) 130px minmax(190px,240px)!important;gap:15px!important;align-items:center!important;padding:14px 0 max(14px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--v17-line);margin-top:8px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.94),#fff 22%);backdrop-filter:blur(6px);z-index:3}
body #optionDialog .option-order-total{grid-column:auto!important;grid-row:auto!important;display:grid;gap:6px!important}
body #optionDialog .option-order-total strong{font-size:22px!important;color:var(--v17-gold)!important}
body #optionDialog .option-modal-footer #optionAddBtn{width:100%!important;min-height:47px!important;height:auto!important;white-space:nowrap!important;font-size:14px!important;padding:12px 14px!important}
body #optionDialog .option-modal-footer .qty-controls{margin:0!important;height:45px;min-width:0}
/* Checkout: one large desktop dialog, naturally scrollable on narrow devices. */
body #checkoutDialog{width:min(1080px,calc(100vw - 34px))!important;max-height:calc(100dvh - 36px)!important;border-radius:20px!important;overflow:auto!important;background:#fff!important;box-shadow:0 28px 90px #16161655!important}
body #checkoutDialog>.modal-inner{padding:28px 32px 30px!important;width:100%;max-width:none;box-sizing:border-box}
body #checkoutDialog .modal-header{margin-bottom:15px}
body #checkoutDialog .modal-header h2{font-size:31px!important;line-height:1.2}
body .v17-checkout-help{font-size:13px;color:#757575;margin:8px 0 0}
body .v17-checkout-columns{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;align-items:start}
body .v17-checkout-main,body .v17-checkout-side{min-width:0}
body .v17-checkout-side{border:1px solid #e9e6e1;background:#fcfbf9;border-radius:14px;padding:19px}
body #checkoutDialog .form-section-title{margin-top:16px!important}
body #checkoutDialog .delivery-choice{margin-top:11px!important}
body #checkoutDialog .order-summary{border-top:1px solid #ddd5c9;padding-top:12px}
body #checkoutDialog #submitOrder{font-size:15px!important;min-height:52px!important}
body #checkoutDialog .field textarea{min-height:66px}
/* Confirmation: explicit large, centered business acknowledgement after POST success. */
body #orderSuccessDialog{width:min(920px,calc(100vw - 32px))!important;max-height:calc(100dvh - 35px)!important;border-radius:24px!important;overflow:auto!important;background:#fff!important;box-shadow:0 25px 100px #0005!important}
body #orderSuccessDialog .v17-success-inner{padding:clamp(30px,5vw,65px)!important;position:relative;max-width:none!important;text-align:center}
body #orderSuccessDialog .close-button{position:absolute;right:18px;top:18px}
body .v17-success-icon{width:83px;height:83px;display:grid;place-items:center;margin:0 auto 19px;border-radius:50%;background:#e9f4ed;color:#23794a;font-size:44px;border:1px solid #c4e4d0}
body .v17-success-kicker{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--v17-gold);margin:0 0 15px}
body .v17-success-inner h2{font:700 clamp(29px,3.5vw,44px)/1.18 Georgia,'Times New Roman',serif!important;max-width:720px;margin:0 auto 15px;color:#242424}
body .v17-success-inner #successDescription{font-size:16px;color:#626262;line-height:1.6;max-width:650px;margin:0 auto 28px}
body .v17-success-reference{display:grid;gap:9px;max-width:420px;margin:0 auto 28px;padding:18px 25px;background:#faf6ed;border:1px solid #e9d7b5;border-radius:14px}
body .v17-success-reference span{font-size:12px;color:#75674e}
body .v17-success-reference strong{font-size:21px;color:#333;word-break:break-all}
body .v17-success-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
body .v17-success-actions>*{display:inline-flex!important;align-items:center;justify-content:center;min-width:185px;min-height:48px;font-size:14px;font-weight:700;padding:12px 16px!important;border-radius:10px;text-decoration:none!important;white-space:normal;text-align:center}
body .v17-success-actions .btn{background:var(--v17-gold)!important;border-color:var(--v17-gold)!important;color:#fff!important}
body .v17-success-note{font-size:12px;color:#7b7b7b;margin:24px auto 0;max-width:600px}
@media(max-width:1100px){body .store-shell{grid-template-columns:200px minmax(0,1fr)!important}}
@media(max-width:790px){
 body .store-shell{display:block!important}
 body .compact-menu-content{padding:19px 12px 30px!important}
 body #optionDialog{width:min(720px,calc(100vw - 18px))!important;max-height:calc(100dvh - 18px)!important;border-radius:16px!important}
 body #optionDialog .option-modal-inner{padding:18px 19px 20px!important}
 body .v17-detail-grid{grid-template-columns:1fr;gap:14px}
 body #optionDialog .option-hero-image{height:210px!important;min-height:210px!important}
 body #checkoutDialog{width:min(690px,calc(100vw - 18px))!important;max-height:calc(100dvh - 18px)!important}
 body #checkoutDialog>.modal-inner{padding:20px 20px 25px!important}
 body .v17-checkout-columns{grid-template-columns:1fr;gap:6px}
 body .v17-checkout-side{padding:16px}
}
@media(max-width:600px){
 body #optionDialog,body #checkoutDialog,body #orderSuccessDialog{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
 body #optionDialog .option-modal-inner{padding:22px 17px max(20px,env(safe-area-inset-bottom))!important}
 body .v17-detail-grid{grid-template-columns:1fr;gap:10px}
 body #optionDialog .option-hero-image{height:205px!important;min-height:205px!important;max-height:none!important;padding:12px}
 body .v17-options-panel{padding-top:5px}
 body #optionDialog .option-choice-grid,body #optionDialog .option-choice-grid:has(label:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body .v17-recommendation-list{display:grid;grid-template-columns:1fr;gap:9px;padding-bottom:8px}
 body .v17-recommendation-header small{display:none}
 body #optionDialog .option-modal-footer{grid-template-columns:1fr 1fr!important;gap:12px!important;padding-top:16px!important}
 body #optionDialog .option-order-total{grid-column:1!important;grid-row:1!important}
 body #optionDialog .option-modal-footer .qty-controls{grid-column:2!important;grid-row:1!important}
 body #optionDialog .option-modal-footer #optionAddBtn{grid-column:1/-1!important;grid-row:2!important}
 body #checkoutDialog>.modal-inner{padding:22px 16px 35px!important}
 body #checkoutDialog .modal-header h2{font-size:26px!important}
 body #checkoutDialog .form-grid{grid-template-columns:1fr!important}
 body #orderSuccessDialog .v17-success-inner{padding:clamp(29px,7vw,45px) 22px!important;min-height:100%;display:flex;flex-direction:column;justify-content:center}
 body .v17-success-actions{display:grid;grid-template-columns:1fr;width:100%}
 body .v17-success-actions>*{width:100%}
}
@media(prefers-reduced-motion:reduce){body #optionDialog *,body #checkoutDialog *,body #orderSuccessDialog *{transition:none!important}}
/* Footer alignment: override legacy V7/V10 grid-placement rules for the new modal. */
@media(min-width:601px){
 body #optionDialog .option-modal-footer{display:flex!important;flex-direction:row!important;justify-content:space-between!important;gap:15px!important;align-items:center!important}
 body #optionDialog .option-modal-footer .option-order-total{flex:1 1 auto!important;width:auto!important;min-width:0!important;grid-column:auto!important;grid-row:auto!important}
 body #optionDialog .option-modal-footer .qty-controls{flex:0 0 140px!important;width:140px!important;grid-column:auto!important;grid-row:auto!important}
 body #optionDialog .option-modal-footer #optionAddBtn{flex:0 0 220px!important;width:220px!important;grid-column:auto!important;grid-row:auto!important}
}
@media(max-width:600px){
 body #optionDialog .option-modal-footer .option-order-total{grid-column:1!important;grid-row:1!important}
 body #optionDialog .option-modal-footer .qty-controls{grid-column:2!important;grid-row:1!important;max-width:100%!important}
 body #optionDialog .option-modal-footer #optionAddBtn{grid-column:1/-1!important;grid-row:2!important}
}