/* v56: ordering uses the approved site tokens, fonts, logo and characters. */ .inline-photo-link{border:0;background:transparent;color:var(--red);text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:12px;min-height:44px;padding:6px 2px;cursor:pointer} /* A non-modal product editor is inserted next to its card, inside the menu. */ #product-dialog.inline-product{position:static;inset:auto;grid-column:1/-1;width:100%;max-width:none;height:auto;max-height:none;margin:0;border:1px solid var(--red);border-radius:16px;padding:0;background:var(--cream);overflow:visible;box-shadow:none} #product-dialog.inline-product:not([open]){display:none} #product-dialog.inline-product[open]{display:block;animation:none} #product-dialog.inline-product .dialog-head{position:static;display:flex;align-items:center;padding:14px 16px;background:var(--sand);border-bottom:1px solid var(--line);border-radius:15px 15px 0 0;min-height:0} #product-dialog.inline-product .dialog-head h2{font-size:21px;margin:0;line-height:1.2} #product-dialog.inline-product .close-dialog{min-width:44px;min-height:44px;flex:none} #product-dialog.inline-product #product-options{display:block;overflow:visible;padding:14px 16px;height:auto;min-height:0;max-height:none} #product-dialog.inline-product .product-detail-copy{padding:0;overflow:visible;max-height:none;height:auto} #product-dialog.inline-product .product-ingredients{margin:0 0 12px;padding:0;font-size:13px} #product-dialog.inline-product .product-ingredients>summary{min-height:32px;cursor:pointer} #product-dialog.inline-product .product-ingredients p{font-size:14px;line-height:1.5} #product-dialog.inline-product .serving-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:12px} #product-dialog.inline-product .serving-options legend{font-size:14px;margin-bottom:8px} #product-dialog.inline-product .serving-option{padding:8px 12px;min-width:0;border-radius:12px;gap:8px;flex-wrap:wrap} #product-dialog.inline-product .serving-option-copy strong{font-size:15px} #product-dialog.inline-product .serving-option-copy small{font-size:12px} #product-dialog.inline-product .serving-units{display:grid;gap:8px;margin:0} #product-dialog.inline-product .serving-unit{margin:0;border-radius:12px;overflow:hidden} #product-dialog.inline-product .serving-unit>summary{padding:12px;font-size:13px;display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center} #product-dialog.inline-product .serving-unit>summary strong{font-size:14px} #product-dialog.inline-product .unit-mix{font-size:12px;flex:1;min-width:80px} #product-dialog.inline-product .unit-chevron{font-size:12px;margin-left:auto;color:var(--red)} #product-dialog.inline-product .serving-unit-body{padding:8px 12px 12px} #product-dialog.inline-product .choice-counts{padding:0;margin:0 0 12px} #product-dialog.inline-product .choice-counts legend{font-size:14px;margin-bottom:3px} #product-dialog.inline-product .choice-count-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px} #product-dialog.inline-product .choice-counter{padding:8px;min-width:0;flex:none;border-radius:10px} #product-dialog.inline-product .choice-counter>strong{font-size:13px;line-height:1.3;margin:0 0 4px;min-height:0} #product-dialog.inline-product .choice-counter.selected{padding:7px} #product-dialog.inline-product .choice-stepper{justify-content:center;gap:4px} #product-dialog.inline-product .choice-stepper button{width:44px;min-width:44px;flex-basis:44px;height:44px} #product-dialog.inline-product .choice-stepper output{font-size:14px;min-width:26px} #product-dialog.inline-product .unit-notes{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding-top:4px} #product-dialog.inline-product .unit-notes summary{font-size:13px;min-height:44px;display:flex;align-items:center;padding:0;cursor:pointer} #product-dialog.inline-product .unit-notes label{font-size:12px;margin:4px 0} #product-dialog.inline-product .unit-notes textarea{font-size:16px;resize:vertical;min-height:68px} #product-dialog.inline-product .unit-remove,#product-dialog.inline-product .unit-copy{font-size:12px;margin-right:16px} #product-dialog.inline-product .serving-hint{font-size:12px;margin:0 0 10px} #product-dialog.inline-product .serving-checkout{position:static;padding:12px 16px;margin:0;border-top:1px solid var(--line);border-radius:0 0 15px 15px;background:var(--sand);display:flex;align-items:center;gap:12px;justify-content:space-between} #product-dialog.inline-product .serving-total{font-size:14px;font-weight:700} #product-dialog.inline-product .serving-checkout .btn{min-height:44px;font-size:14px;border-radius:12px;padding:12px 18px;flex:0 1 auto} #product-dialog.inline-product [hidden]{display:none!important} .menu-focused #menu .section-top{margin:8px 0} .menu-focused #menu .section-top h2{font-size:27px} .menu-focused #menu .section-top p{font-size:13px} .menu-focused #menu .moment-picker{margin:0 0 6px;flex:none} .menu-focused #menu .moment-picker>summary{padding:8px 12px;font-size:13px} .menu-focused #menu .moment-picker[open]{max-height:26dvh;overflow:auto} .menu-focused #menu .menu-results{margin:0;padding:4px 0 8px} .menu-focused #menu .menu-focus-bottom{gap:8px;padding:10px 0 max(10px,env(safe-area-inset-bottom));min-height:70px} #focus-menu-cart{min-height:46px;white-space:nowrap;font-size:14px;flex:none} #focus-order-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:12px;min-width:0} .gift-toggle{display:flex!important;align-items:center;gap:10px;margin:18px 0 8px!important;padding:12px;background:var(--sand);border-radius:12px;font-size:14px!important;cursor:pointer} .gift-toggle input{width:20px!important;height:20px;min-height:20px;margin:0!important;flex:none;accent-color:var(--red)} .cart-saved-note{display:block;margin-top:6px;font-size:12px} @media(max-width:760px){ .menu-focused #menu{padding-inline:12px} .menu-focused #menu .section-top p{display:none} .menu-focused #menu .menu-focus-bar{padding:8px 0} .menu-focused #menu .section-top h2{font-size:23px} .menu-focused #menu .menu-mascot{height:35px;width:38px} .menu-focused #menu .filters{padding-bottom:6px} .menu-focused #menu .menu-focus-bottom{display:grid;grid-template-columns:1fr;padding-top:8px;gap:4px} #focus-menu-cart{width:100%;padding:11px} #focus-order-summary{text-align:center;max-width:100%;font-size:12px} #product-dialog.inline-product #product-options{padding:12px} #product-dialog.inline-product .serving-options{grid-template-columns:1fr} #product-dialog.inline-product .choice-count-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))} #product-dialog.inline-product .serving-checkout{padding:12px} #product-dialog.inline-product .serving-checkout .btn{max-width:62%;font-size:13px;padding:11px 13px} } @media(max-width:360px){#product-dialog.inline-product .choice-count-row{grid-template-columns:1fr}} @media(max-height:600px) and (orientation:landscape){.menu-focused #menu .section-top,.menu-focused #menu .moment-picker{display:none}.menu-focused #menu .menu-focus-bottom{min-height:54px;padding-block:4px}.menu-focused #focus-order-summary{display:none}} /* v59: owner's reference — full square photos and direct corner controls. */ #menu .product-grid,#menu .moment-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;align-items:start} #suggested-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;align-items:start} #dimdom-app .compact-product{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;width:100%;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none;padding:0;text-align:left;transform:none} #dimdom-app .compact-product .product-media{position:relative;width:100%;min-width:0;aspect-ratio:1} #dimdom-app .compact-product .compact-photo{display:block;position:relative;width:100%;height:auto!important;min-height:0;aspect-ratio:1;border:1px solid var(--line);padding:0;background:var(--sand);overflow:hidden;border-radius:16px;cursor:zoom-in} #dimdom-app .compact-product .photo-face{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;isolation:isolate} #dimdom-app .compact-product .photo-face>img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;display:block;object-fit:contain;object-position:center;border-radius:0;transform:none!important} #dimdom-app .compact-product .product-bottom{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:10px 2px 0;gap:5px} #dimdom-app .compact-product .product-price-row{min-width:0} #dimdom-app .compact-product h3{display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:0;overflow-wrap:anywhere;margin:0;min-height:0;-webkit-line-clamp:unset;overflow:visible;color:var(--dark)} #dimdom-app .compact-product .item-price{font-size:19px;line-height:1.3;white-space:normal;color:var(--red);font-weight:800} #dimdom-app .compact-product .product-badge{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 8px;border-radius:7px;background:var(--red);color:var(--cream);font-size:12px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;pointer-events:none} #dimdom-app .catalog-quantity{position:absolute;top:8px;right:8px;display:grid;grid-template-columns:44px;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:50%;color:var(--red);background:var(--cream);width:44px;box-sizing:content-box;box-shadow:0 2px 8px #0001;overflow:hidden} #dimdom-app .catalog-quantity.has-quantity{grid-template-columns:44px 24px 44px;width:112px;border-radius:24px} #dimdom-app .catalog-quantity button{border:0;border-radius:0;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;display:grid;grid-template-columns:1fr;gap:0;place-items:center;text-align:center;font-size:25px;font-weight:600;line-height:1;background:transparent;color:var(--red);flex:none;cursor:pointer} #dimdom-app .catalog-quantity output{font-size:14px;font-weight:700;text-align:center;min-width:0} #dimdom-app .catalog-quantity [hidden]{display:none!important} #dimdom-app .catalog-quantity button:disabled{opacity:.4;cursor:not-allowed} #dimdom-app .compact-product .catalog-options{display:block;min-height:44px;width:100%;border:0;border-radius:0;background:transparent;color:var(--red);font-size:14px;line-height:1.3;padding:6px 0;text-decoration:underline;text-underline-offset:3px;text-align:left;cursor:pointer} #dimdom-app .compact-product .suggestion-label{display:block;letter-spacing:0;font-size:12px;margin:0;color:var(--dark);font-weight:400;line-height:1.3} #dimdom-app .compact-product button:focus-visible{outline:3px solid var(--red);outline-offset:3px} #cart-dialog #suggested-products{margin:12px 0 0} #cart-dialog .compact-product{min-width:0;max-width:none;width:100%} #cart-dialog .cart-row-actions button{min-width:44px;min-height:44px} #menu .moment-picker,.menu-focused #menu .moment-picker[open]{display:block;max-height:none;height:auto;overflow:visible;margin:0 0 20px;padding:12px;flex:none} #menu .moment-picker>summary{padding:4px 0;min-height:32px;line-height:1.4;font-size:15px} #menu .moment-picker>summary span{display:inline;font-size:12px} #menu .moment-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} #menu .moment-tabs button{min-height:44px;flex:1 1 auto;padding:8px 12px;font-size:14px;white-space:normal} #menu .moment-note{margin:0 0 14px;font-size:13px;line-height:1.5} #menu .moment-products{overflow:visible;margin:0} #product-dialog.inline-product .selected-product-summary{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;align-items:center;margin:0 0 12px} #product-dialog.inline-product .selected-product-summary img{grid-row:1/3;width:64px;height:64px;object-fit:contain;object-position:center;border:1px solid var(--line);border-radius:10px;background:var(--sand)} #product-dialog.inline-product .selected-product-summary strong{align-self:end;font-size:16px;line-height:1.3;overflow-wrap:anywhere;color:var(--dark)} #product-dialog.inline-product .selected-product-summary span{align-self:start;font-size:14px;font-weight:700;color:var(--red)} /* Keep legacy recommendation button rules out of the inline editor. */ #product-dialog.inline-product button{display:inline-flex;align-items:center;justify-content:center;grid-template-columns:none;gap:0;text-align:center} #product-dialog.inline-product .choice-stepper button{padding:0;background:var(--cream);color:var(--red);font-size:20px} #product-dialog.inline-product .quantity-stepper{width:132px;min-width:132px;flex:none} #product-dialog.inline-product .quantity-stepper input{width:44px!important;flex:none} #product-dialog.inline-product .quantity-stepper button{padding:0;width:44px;min-width:44px;min-height:44px;font-size:22px;background:transparent;color:var(--red);border:0} #product-dialog.inline-product .close-dialog{padding:0;background:transparent;color:var(--dark);font-size:22px;border:1px solid var(--line);border-radius:50%} #product-dialog.inline-product .inline-photo-link,#product-dialog.inline-product .unit-copy,#product-dialog.inline-product .unit-remove{border:0;background:transparent;color:var(--red);border-radius:0;font-size:13px} #product-dialog.inline-product .serving-checkout .btn-red{background:var(--red);color:var(--cream);border:1px solid var(--red)} .menu-focused #menu .menu-focus-bottom{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 0 max(8px,env(safe-area-inset-bottom));min-height:0;flex:none} #focus-menu-cart{width:100%;min-height:46px;white-space:normal;font-size:14px;padding:10px} #focus-order-summary{text-align:center;font-size:12px} #focus-order-peek{border:0;padding:0;margin:0;background:none;min-width:0} #focus-order-peek>summary{cursor:pointer;min-height:36px;padding:6px 0;font-size:14px;font-weight:700;color:var(--red)} #focus-peek-count{font-size:12px;font-weight:600;margin-left:8px} #focus-order-items{max-height:min(126px,23dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--red) transparent} .peek-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)} .peek-info{min-width:0;flex:1}.peek-info>strong{display:block;font-size:14px;line-height:1.3}.peek-info>small{display:block;font-size:12px;line-height:1.3;color:var(--dark);white-space:normal;overflow-wrap:anywhere} .peek-quantity{display:grid;grid-template-columns:44px 26px 44px;align-items:center;flex:none;background:var(--cream);border:1px solid var(--line);border-radius:9px;overflow:hidden} .peek-quantity button{padding:0;border-radius:0;border:0;background:none;color:var(--red);width:44px;height:44px;font-size:23px}.peek-quantity output{text-align:center;font-size:14px;font-weight:700}.peek-quantity button:disabled{opacity:.4} #photo-dialog .photo-caption{padding:12px;max-width:640px}#photo-dialog .photo-caption h2{font-size:24px;margin:0 0 8px}#photo-dialog .photo-caption p{font-size:16px;line-height:1.5;margin:0}#photo-dialog #photo-large{max-height:65dvh} .hero-copy>.arrival-pause{color:inherit} @media(max-width:760px){ #menu .product-grid,#menu .moment-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px} #dimdom-app .compact-product .product-bottom{padding:8px 1px 0;gap:4px} #dimdom-app .compact-product h3{font-size:15px;line-height:1.35} #dimdom-app .compact-product .item-price{font-size:17px} #dimdom-app .compact-product .catalog-options{font-size:13px} .menu-focused #menu{padding-inline:12px} .menu-focused #menu .menu-results{padding-bottom:8px} .menu-focused #menu .menu-results select{min-height:44px;font-size:12px} #menu .moment-picker{padding:10px} #menu .moment-picker>summary span{display:block;margin-left:0} #menu .moment-tabs{gap:6px} #menu .moment-tabs button{font-size:12px;padding-inline:9px} } @media(max-width:360px){ #menu .product-grid,#menu .moment-products,#suggested-products{gap:18px 8px} #dimdom-app .catalog-quantity{top:5px;right:5px} #dimdom-app .compact-product .product-badge{left:5px;bottom:5px;padding:3px 5px;max-width:calc(100% - 10px)} } @media(max-height:600px) and (orientation:landscape){#focus-order-items{max-height:80px}#focus-order-peek>summary{min-height:28px;padding-block:3px}.menu-focused #menu .menu-focus-bottom{padding-block:3px}} @media(prefers-reduced-motion:reduce){#dimdom-app .compact-product img{transition:none!important}} /* v61: compact cards fill the available width while retaining square, contained photos. */ #menu{--menu-card-min:180px} #menu .product-grid,#menu .moment-products{width:100%;max-width:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--menu-card-min)),1fr));margin-inline:0;gap:12px;align-items:stretch} #menu .moment-picker{width:100%;max-width:none;box-sizing:border-box;margin-inline:0} #dimdom-app .compact-product{border:1px solid var(--line);border-radius:15px;padding:8px;background:var(--cream);overflow:hidden;min-width:0} #dimdom-app .compact-product .compact-photo{border-radius:10px} #dimdom-app .compact-product .product-bottom{padding:8px 2px 2px;gap:4px;min-width:0} #dimdom-app .compact-product h3{font-size:15px;line-height:1.25;font-weight:700} #dimdom-app .compact-product .item-price{font-size:16px;line-height:1.25} #dimdom-app .compact-product .product-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:12px;line-height:1.4;color:var(--dark);font-weight:400} #dimdom-app .catalog-quantity{top:5px;right:5px} #dimdom-app .compact-product .product-badge{left:5px;bottom:5px;max-width:calc(100% - 10px);padding:3px 5px;font-size:12px} #menu .menu-products-scroll{min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;scroll-padding-block:12px;padding-bottom:20px} #cart-dialog #suggested-products{max-width:440px;margin-inline:auto} #product-dialog.inline-product{min-width:0;box-sizing:border-box;scroll-margin-block:8px} #product-dialog.inline-product .dialog-head{padding:8px 12px;gap:8px} #product-dialog.inline-product .dialog-head h2{font-size:18px;overflow-wrap:anywhere} #product-dialog.inline-product #product-options{padding:10px 12px} #product-dialog.inline-product .selected-product-summary{grid-template-columns:48px minmax(0,1fr);gap:2px 10px;margin-bottom:6px} #product-dialog.inline-product .selected-product-summary img{width:48px;height:48px} #product-dialog.inline-product .selected-product-summary strong{font-size:14px} #product-dialog.inline-product .serving-options{gap:6px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-bottom:10px} #product-dialog.inline-product .serving-option{padding:4px 8px;gap:4px} #product-dialog.inline-product .serving-option-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;min-height:44px;border:0;border-radius:0;padding:4px 0;background:transparent;color:var(--dark);text-align:left;cursor:pointer} #product-dialog.inline-product .serving-option-copy strong{font-size:14px;line-height:1.2} #product-dialog.inline-product .serving-option-copy small{font-size:12px;line-height:1.2;margin:0} #product-dialog.inline-product .choice-buttons{display:flex;flex-wrap:wrap;gap:6px} #product-dialog.inline-product .choice-pick{flex:1 1 90px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--dark);padding:9px 12px;font:inherit;font-size:14px;line-height:1.3;cursor:pointer;overflow-wrap:anywhere} #product-dialog.inline-product .choice-pick[aria-pressed=true]{background:var(--red);color:var(--cream);border-color:var(--red);font-weight:700} #product-dialog.inline-product .choice-pick:focus-visible,#product-dialog.inline-product .serving-option-copy:focus-visible{outline:3px solid var(--red);outline-offset:2px} #product-dialog.inline-product .product-feedback{font-size:13px;line-height:1.4;margin:8px 0;padding:8px 10px;background:var(--sand);border-radius:8px;overflow-wrap:anywhere} #product-dialog.inline-product .serving-unit>summary{padding:8px 10px} #product-dialog.inline-product .serving-unit-body{padding:6px 10px 10px} #product-dialog.inline-product .serving-checkout{padding:8px 12px;gap:8px;flex-wrap:wrap} #product-dialog.inline-product .serving-checkout .btn{max-width:100%;font-size:13px;padding:9px 12px} #focus-order-items{max-height:min(100px,15dvh)} @media(max-width:760px){ #dimdom-app .compact-product{padding:6px;border-radius:12px} #dimdom-app .compact-product .product-bottom{padding:7px 1px 2px} } @media(max-width:480px){ #menu .product-grid,#menu .moment-products{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:360px){ #menu .product-grid,#menu .moment-products,#suggested-products{gap:8px} #dimdom-app .compact-product{padding:4px} #dimdom-app .catalog-quantity{top:3px;right:3px} #dimdom-app .catalog-quantity.has-quantity{grid-template-columns:44px 20px 44px;width:108px} } @media(max-height:600px) and (orientation:landscape){ #menu{--menu-card-min:160px} #focus-order-items{max-height:60px} } /* v62: presentation first, one compact serving at a time, optional extras. */ #product-dialog.inline-product{max-width:760px;justify-self:center;border-color:var(--line)} #product-dialog.inline-product .dialog-head{padding:8px 12px} #product-dialog.inline-product .dialog-head h2{font-size:16px} #product-dialog.inline-product #product-options{padding:10px 12px} #product-dialog .compact-selection{margin:0;display:grid;gap:8px} #product-dialog .presentation-picker{border:0;padding:0;margin:0;min-width:0} #product-dialog .presentation-picker legend{font-size:14px;font-weight:600;margin-bottom:6px} #product-dialog .presentation-buttons{display:flex;flex-wrap:wrap;gap:6px} #product-dialog.inline-product .presentation-choice{display:flex;flex:1 1 100px;flex-direction:column;gap:3px;min-width:0;min-height:52px;border:1px solid var(--line);border-radius:9px;padding:8px;background:var(--cream);color:var(--dark);cursor:pointer} #product-dialog .presentation-choice strong{font-size:14px;line-height:1.2;overflow-wrap:anywhere} #product-dialog .presentation-choice small{font-size:13px;color:var(--red)} #product-dialog .presentation-choice:hover,#product-dialog .presentation-choice:focus-visible{border-color:var(--red);outline-offset:2px} #product-dialog.inline-product .serving-units{gap:6px} #product-dialog.inline-product .serving-unit{border:1px solid var(--line);border-radius:10px;background:transparent} #product-dialog.inline-product .serving-unit>summary{padding:8px 10px;gap:3px 8px;min-height:44px;cursor:pointer} #product-dialog.inline-product .serving-unit>summary strong{font-size:14px} #product-dialog.inline-product .serving-unit .unit-mix{flex:1 1 150px;font-size:12px;line-height:1.4} #product-dialog .unit-price{font-size:13px;font-weight:700;color:var(--red);margin-left:auto} #product-dialog.inline-product .serving-unit-body{padding:4px 10px 8px;display:grid;gap:8px} #product-dialog .compact-choice-group{border:0;padding:0;margin:0;min-width:0} #product-dialog .compact-choice-group legend{font-size:13px;font-weight:600;padding:0;margin-bottom:5px} #product-dialog .compact-choice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 10px} #product-dialog .compact-choice-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;border-bottom:1px solid var(--line)} #product-dialog .compact-choice-label{font-size:14px;line-height:1.25;min-width:0;overflow-wrap:anywhere} #product-dialog .compact-choice-label small{display:block;font-size:12px;margin:2px 0} #product-dialog.inline-product .choice-stepper{display:flex;align-items:center;flex:none;margin:0;gap:2px} #product-dialog.inline-product .choice-stepper output{min-width:22px;text-align:center} #product-dialog.inline-product .choice-pick{padding:6px 9px;flex:1 1 80px} #product-dialog .unit-extras{border:0;border-top:1px solid var(--line);padding:2px 0 0;margin:0;background:transparent;border-radius:0} #product-dialog .unit-extras>summary{font-size:14px;min-height:40px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--red)} #product-dialog .unit-extras>summary::after{content:'+';margin-left:auto;font-weight:700} #product-dialog .unit-extras[open]>summary::after{content:'−'} #product-dialog .unit-extras>.compact-choice-group{margin-bottom:6px} #product-dialog .unit-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap} #product-dialog.inline-product .unit-actions button,#product-dialog.inline-product .add-another-unit{border:0;background:transparent;color:var(--red);font:inherit;font-size:13px;min-height:36px;padding:4px 0;margin:0;cursor:pointer;border-radius:0} #product-dialog.inline-product .add-another-unit{justify-self:start} #product-dialog.inline-product .product-feedback{margin:0;padding:6px 8px;font-size:13px} #product-dialog.inline-product .serving-checkout{position:sticky;bottom:0;z-index:5;padding:8px 12px} #product-dialog.inline-product .serving-total{font-size:13px} #product-dialog.inline-product .serving-checkout .btn{min-width:92px;font-size:14px;min-height:44px} /* One bottom bar: expandable preview and full order, notes stay with each line. */ .menu-focused #menu .menu-focus-bottom{position:relative;display:block;min-height:0;padding:8px 0 max(8px,env(safe-area-inset-bottom))} #menu .order-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-radius:12px;background:var(--red);color:var(--cream);overflow:hidden;min-width:0} #menu .order-dock>button{margin:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:0;min-height:52px;padding:8px 12px} #menu .order-dock #focus-peek-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;text-align:left;font-size:13px;align-content:center} #focus-peek-toggle>strong{grid-column:1;font-size:15px} #focus-peek-toggle .peek-chevron{grid-column:2;grid-row:1/3;align-self:center;font-size:20px} #focus-peek-toggle[aria-expanded=true] .peek-chevron{transform:rotate(180deg)} #menu .order-dock #focus-menu-cart{width:auto;max-width:160px;font-size:14px;border-left:1px solid currentColor;white-space:normal;line-height:1.25;font-weight:600} #menu .order-dock button:focus-visible{outline:2px solid var(--cream);outline-offset:-4px} #menu .order-dock button:disabled{cursor:default;opacity:.75} #menu #focus-order-peek{position:absolute;inset:auto 0 calc(100% - 2px);z-index:3;border:1px solid var(--line);border-radius:12px;background:var(--cream);padding:4px 12px;box-shadow:0 -6px 20px #0001;max-height:min(35dvh,260px);overflow:auto} #menu #focus-order-items{max-height:none;overflow:visible} #menu .peek-row{padding:7px 0;align-items:center} #menu .peek-row:first-child{border-top:0} #dimdom-app .cart-line-note{border:0;border-radius:9px;background:transparent;padding:0;margin:4px 0 0;min-width:0} #dimdom-app .cart-line-note>summary{font-size:12px;line-height:1.3;color:var(--dark);cursor:pointer;min-height:32px;display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--cream);text-decoration:none;list-style:none} #dimdom-app .cart-line-note>summary::-webkit-details-marker{display:none} #dimdom-app .cart-line-note>summary::after{content:'+';font-size:16px;line-height:1;color:var(--red);margin-left:auto} #dimdom-app .cart-line-note[open]{border:1px solid var(--line);background:var(--cream);overflow:hidden} #dimdom-app .cart-line-note[open]>summary{width:100%;border:0;border-radius:0;padding:5px 9px;min-height:28px;background:var(--sand)} #dimdom-app .cart-line-note[open]>summary::after{content:'−'} #dimdom-app .cart-line-note>summary:focus-visible{outline:2px solid var(--red);outline-offset:-3px} #dimdom-app .cart-line-note:has(textarea:focus){border-color:var(--red)} #dimdom-app .cart-line-note textarea{display:block;width:100%;max-width:none;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.35;field-sizing:content;min-height:38px;max-height:100px;margin:0;padding:7px 9px;border:0;border-radius:0;outline:none;background:transparent;color:var(--dark);resize:vertical;overflow-y:auto} #dimdom-app #cart-dialog .cart-line-note textarea{min-height:38px;background:transparent} #dimdom-app .cart-line-note:not([open]) textarea{display:none} /* Instructions begin at the product text edge; quantity controls stay visible. */ #cart-dialog .cart-row-info{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0} #cart-dialog .cart-row-info>strong,#cart-dialog .cart-row-info>small{grid-column:1/-1} #dimdom-app #cart-dialog .cart-row-info>.cart-line-note{grid-column:1/-1;margin:0;justify-self:stretch} #cart-dialog .cart-row-info>.cart-row-actions{display:flex;width:fit-content;align-items:center;margin:0;grid-column:1/-1} #cart-dialog .cart-row-actions>span{display:grid;place-items:center;min-width:28px} @media(min-width:440px){ #cart-dialog .cart-row-info{grid-template-columns:minmax(0,1fr) auto;column-gap:10px} #dimdom-app #cart-dialog .cart-row-info>.cart-line-note{grid-column:1;grid-row:3} #cart-dialog .cart-row-info>.cart-row-actions{grid-column:2;grid-row:3;align-self:start} #dimdom-app #cart-dialog .cart-row-info>.cart-line-note[open]{grid-column:1/-1;grid-row:4} } #focus-peek-count{margin-left:4px} @media(max-width:480px){ #menu .order-dock>button{padding:7px 10px} #menu .order-dock #focus-menu-cart{max-width:124px;font-size:13px} #menu #focus-order-peek{padding-inline:8px} #product-dialog.inline-product{border-radius:12px} } /* v65: compact centered order dock and a reserved top row for every control. */ body.menu-focused{--menu-gutter:max(20px,calc((100vw - 1200px)/2));--menu-control-top:max(8px,env(safe-area-inset-top))} .menu-focused #menu{padding-inline:var(--menu-gutter)} .menu-focused #menu .menu-focus-bar{gap:8px;padding:var(--menu-control-top) 0 8px;min-height:60px} .menu-focused #menu .menu-focus-bar>strong{font-size:17px;white-space:nowrap} .menu-focus-actions{display:flex;gap:8px;align-items:center;flex:none} .menu-audio-space{display:block;width:96px;flex:none} .menu-focused #menu .menu-focus-actions>button{display:grid;place-items:center;position:relative;box-sizing:border-box;min-width:44px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;color:var(--red)} .menu-focused #menu #exit-menu{font-size:25px;font-weight:400} .menu-focused #menu .menu-cart-icon .header-cart-count{position:absolute;right:-3px;top:-3px;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:1px 4px;line-height:16px;border-radius:10px;background:var(--red);color:var(--cream);text-align:center} body.menu-focused .music-float,body.menu-focused .sound-toggle{top:var(--menu-control-top);bottom:auto!important;left:auto;width:44px;height:44px;min-height:44px;margin:0} body.menu-focused .music-float{right:calc(var(--menu-gutter) + 104px)} body.menu-focused .sound-toggle{right:calc(var(--menu-gutter) + 156px)} .menu-focused #menu .menu-focus-bottom{width:min(100%,clamp(320px,34vw,560px));align-self:center;flex:none;padding:8px 0 max(8px,env(safe-area-inset-bottom));margin:0} #menu .order-dock{box-shadow:0 3px 14px #0001} #menu #focus-order-peek{max-height:min(42dvh,320px);overscroll-behavior:contain} #cart-dialog .cart-clear{display:block;margin:12px 0 0 auto;padding:8px 0;min-height:44px;border:0;background:transparent;color:var(--red);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} #cart-dialog .cart-cleared{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sand);font-size:14px;text-align:center} #cart-dialog .cart-cleared button{padding:8px;min-height:44px;border:0;background:transparent;color:var(--red);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer} #photo-dialog{inset:0;margin:auto;box-sizing:border-box;width:min(900px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;max-height:calc(100dvh - 24px);padding:16px;background:var(--cream);color:var(--dark);overflow:auto;overscroll-behavior:contain;border-radius:16px} #photo-dialog #photo-close{height:44px;min-height:44px;margin:0 0 12px auto;padding:8px 12px;border:1px solid var(--line);border-radius:24px;background:transparent;color:var(--red);font:inherit;font-size:14px;cursor:pointer} #photo-dialog .photo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:20px} #photo-dialog #photo-large{width:100%;max-width:100%;height:min(420px,60dvh);max-height:none;min-height:0;object-fit:contain;object-position:center;margin:0;border-radius:12px;background:var(--sand)} #photo-dialog .photo-caption{padding:0;min-width:0;max-width:none} #photo-dialog .photo-caption h2{font-size:clamp(20px,2.5vw,28px);line-height:1.15;margin:0 0 10px;overflow-wrap:anywhere} #photo-dialog .photo-caption p{font-size:14px;line-height:1.45;margin:0;overflow-wrap:anywhere} @media(max-width:760px){body.menu-focused{--menu-gutter:12px}.menu-focused #menu .menu-focus-bar>strong{font-size:15px}.menu-focus-bar>strong>span{display:none}} @media(max-width:559px){#photo-dialog .photo-layout{grid-template-columns:minmax(0,1fr);gap:12px}#photo-dialog .photo-caption h2{font-size:21px;margin-bottom:8px}} @media(max-width:360px){#photo-dialog .photo-caption p{font-size:13px}} @media(max-height:500px){#photo-dialog .photo-caption p{font-size:13px;line-height:1.35}#photo-dialog .photo-caption h2{font-size:20px}.menu-focused #menu .menu-focus-bottom{padding-block:4px}} /* v66: separate the expanded order from the menu without changing its palette. */ #menu .order-peek-backdrop{display:none} body.menu-focused #menu .order-peek-backdrop:not([hidden]){display:block;position:absolute;inset:0;z-index:var(--z-velo-menu);width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#28211b40;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer} .menu-focused #menu .menu-focus-bottom{z-index:var(--z-modal-menu)} #menu #focus-order-peek{border-color:var(--line);box-shadow:0 -8px 32px #28211b30,0 4px 12px #28211b18} #cart-dialog .cart-swipe-hint{display:none} #cart-dialog .cart-heading-copy{min-width:0;flex:1} #cart-dialog.cart-swipe-ready[open]{animation:none!important} #cart-dialog.cart-dragging{transform:translateX(var(--cart-drag-x,0px))!important;transition:none!important;will-change:transform} #cart-dialog.cart-dragging::backdrop{opacity:var(--cart-shade,1)} #cart-dialog.cart-swipe-closing{animation:none!important;transform:translateX(100%)!important;transition:transform 180ms ease-out;pointer-events:none} #cart-dialog.cart-swipe-reset{animation:none!important;transform:translateX(0)!important;transition:transform 180ms ease-out} #cart-dialog.cart-swipe-closing::backdrop{opacity:0;transition:opacity 180ms ease-out} #cart-dialog.cart-swipe-reset::backdrop{opacity:1;transition:opacity 180ms ease-out} .no-mascot-motion #cart-dialog[open]{animation:none!important} @media(max-width:1024px),(pointer:coarse){ #cart-dialog,#cart-dialog .cart-scroll{touch-action:pan-y pinch-zoom} #cart-dialog .dialog-head{gap:10px;padding:16px} #cart-dialog .dialog-head h2{font-size:28px;line-height:1.15} #cart-dialog .cart-swipe-hint{display:block;margin-top:4px;font-size:11px;line-height:1.2;color:var(--dark)} #cart-dialog .close-dialog{flex:none} } /* v69: labeled music and bell sit above the order dock, away from header/cart controls. */ body.menu-focused .music-dock .music-float{left:12px;right:auto;top:auto;bottom:max(88px,calc(env(safe-area-inset-bottom) + 88px))!important;width:208px;max-width:calc(100vw - 84px);height:auto;min-height:52px;padding:8px 14px} body.menu-focused .sound-toggle{left:228px;right:auto;top:auto;bottom:max(92px,calc(env(safe-area-inset-bottom) + 92px))!important} /* v84: search + sorting share a row; discovery is compact and photographs stay free. */ .menu-focused #menu .menu-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,180px) auto;align-items:center;gap:10px;min-width:0;width:100%} #menu .menu-tools .menu-search{width:100%;min-width:0;max-width:none} #menu .menu-sort{display:block;min-width:0;margin:0} #menu .menu-sort select{display:block;box-sizing:border-box;width:100%;max-width:none;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:11px;background:var(--cream);color:var(--dark);padding:10px 12px;font:inherit;font-size:14px} #menu #surprise-me,#menu .moment-picker>summary{background:var(--red);border:1px solid var(--red);color:var(--cream);border-radius:11px;min-height:44px;padding:10px 14px;font-size:14px;font-weight:700;line-height:1.35} #menu .moment-picker,.menu-focused #menu .moment-picker[open]{border:0;padding:0;background:transparent;margin:0 0 16px;overflow:visible} #menu .moment-picker>summary{display:flex;align-items:center;gap:10px;list-style:none;width:fit-content;max-width:100%;cursor:pointer} #menu .moment-picker>summary::-webkit-details-marker{display:none} #menu .moment-picker>summary::marker{content:''} #menu .moment-picker>summary span{display:inline;margin:0;color:inherit;font-size:12px;font-weight:400} #menu .moment-picker>summary::after{content:'+';font-size:20px;line-height:1;margin-left:auto} #menu .moment-picker[open]>summary::after{content:'−'} #menu .moment-picker>summary:focus-visible{outline:3px solid var(--red);outline-offset:3px} @media(hover:hover) and (pointer:fine){#menu #surprise-me:hover,#menu .moment-picker>summary:hover{background:#aa1025;border-color:#aa1025}} @media(prefers-reduced-motion:no-preference){#menu #surprise-me,#menu .moment-picker>summary{transition:background-color 180ms ease,box-shadow 180ms ease}#menu .moment-picker[open]>.moment-tabs{animation:dd-disclose 200ms ease-out}} #dimdom-app #menu .compact-product .compact-photo{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible} #dimdom-app #menu .compact-product .photo-face{overflow:visible} @media(max-width:760px){ .menu-focused #menu .menu-tools{grid-template-columns:minmax(0,1fr) minmax(120px,145px);gap:8px} #menu #surprise-me{grid-column:1/-1;justify-self:start} #menu .menu-sort select{padding:10px 8px;font-size:13px} } /* v85: no visible result counter; search and sorting have one shared baseline. */ #menu #product-count{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} #menu .menu-search{position:relative;align-self:center} #menu .menu-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--red);pointer-events:none} #menu .menu-search input{box-sizing:border-box;width:100%;min-width:0;height:46px;min-height:46px;padding:10px 40px;font:inherit;font-size:16px;line-height:1.35;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--dark)} #menu .menu-search input::placeholder{color:#75665a;opacity:1} #menu .menu-search input:focus-visible,#menu .menu-sort select:focus-visible{outline:2px solid var(--red);outline-offset:2px} #menu .menu-sort select{height:46px;min-height:46px;font-size:14px} @media(max-width:760px){.menu-focused #menu .menu-tools{grid-template-columns:minmax(0,1fr) minmax(0,160px)}#menu .menu-sort select{font-size:14px}} @media(max-width:360px){.menu-focused #menu .menu-tools{grid-template-columns:minmax(0,1fr) minmax(0,145px)}} /* Feather only food photos; controls, labels and original assets remain crisp. */ #dimdom-app .compact-product .photo-face>img,#dimdom-app #photo-large,#dimdom-app .product-dialog-image{ border-radius:12px; -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent); -webkit-mask-composite:source-in;mask-composite:intersect; } /* v86: a compact product portrait; only the photograph levitates. */ #dimdom-app .compact-product{padding:9px;border-radius:16px;box-sizing:border-box} #dimdom-app .compact-product .product-media{aspect-ratio:1.55;isolation:isolate} #dimdom-app .compact-product .compact-photo{aspect-ratio:auto;height:100%!important;border:0;background:transparent;box-shadow:none;overflow:visible;perspective:750px} #dimdom-app .compact-product .photo-face{display:flex;align-items:center;justify-content:center;inset:0 4px 5px;width:auto;height:auto;overflow:visible;isolation:auto;transform:rotateX(4deg) rotateY(-3deg);transform-origin:50% 75%} #dimdom-app .compact-product .photo-face>img{position:relative;inset:auto;width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:18px} #dimdom-app .compact-product .photo-face>img,#dimdom-app #photo-large,#dimdom-app .product-dialog-image{ -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 83%,transparent); mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 83%,transparent); } #dimdom-app .compact-product .compact-photo::before{content:'';position:absolute;left:20%;right:20%;bottom:1px;height:16px;background:radial-gradient(ellipse,rgba(62,35,20,.22),rgba(62,35,20,.08) 42%,transparent 72%);pointer-events:none} #dimdom-app .compact-product .product-bottom{padding:5px 2px 2px;gap:3px} #dimdom-app .compact-product h3{font-size:14px;line-height:1.2;margin:0;font-weight:700} #dimdom-app .compact-product .item-price{font-size:15px;line-height:1.2;display:block} #dimdom-app .compact-product .product-excerpt{font-size:12px;line-height:1.3;margin:0;-webkit-line-clamp:2} #dimdom-app .compact-product .product-badge{z-index:1;font-size:12px;padding:3px 6px;bottom:3px;max-width:calc(100% - 10px)} #dimdom-app .compact-product .catalog-quantity{z-index:2;top:2px;right:2px} @keyframes dd-food-float{0%,100%{translate:0 -1px}50%{translate:0 -5px}} @keyframes dd-food-shadow{0%,100%{scale:1;opacity:.85}50%{scale:.88;opacity:.55}} @media(prefers-reduced-motion:no-preference){ #dimdom-app .compact-product .photo-face{animation:dd-food-float 4.8s ease-in-out infinite paused;transition:transform 240ms ease} #dimdom-app .compact-product .compact-photo::before{animation:dd-food-shadow 4.8s ease-in-out infinite paused} #dimdom-app .compact-product:nth-of-type(3n+2) .photo-face,#dimdom-app .compact-product:nth-of-type(3n+2) .compact-photo::before{animation-delay:-1.6s} #dimdom-app .compact-product:nth-of-type(3n) .photo-face,#dimdom-app .compact-product:nth-of-type(3n) .compact-photo::before{animation-delay:-3.2s} #dimdom-app .compact-product.photo-in-view .photo-face,#dimdom-app .compact-product.photo-in-view .compact-photo::before{animation-play-state:running} } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ #dimdom-app .compact-product .compact-photo:hover .photo-face,#dimdom-app .compact-product .compact-photo:focus-visible .photo-face{transform:rotateX(-3deg) rotateY(3deg) scale(1.045)} } #dimdom-app.menu-photos-paused .compact-product .photo-face,#dimdom-app.menu-photos-paused .compact-product .compact-photo::before, body.dimdom-motion-paused #dimdom-app .compact-product .photo-face,body.dimdom-motion-paused #dimdom-app .compact-product .compact-photo::before{animation-play-state:paused} #dimdom-app.no-mascot-motion .compact-product .photo-face,#dimdom-app.no-mascot-motion .compact-product .compact-photo::before, [data-dimdom-motion="off"] .compact-product .photo-face,[data-dimdom-motion="off"] .compact-product .compact-photo::before{animation:none!important;transform:none!important;transition:none!important} @media(prefers-reduced-motion:reduce){#dimdom-app .compact-product .photo-face{transform:none;transition:none}} @media(max-width:480px){ #dimdom-app .compact-product{padding:7px} #dimdom-app .compact-product .product-media{aspect-ratio:1.4} #dimdom-app .compact-product .product-bottom{padding-top:4px} #dimdom-app .compact-product h3{font-size:14px} #dimdom-app .compact-product .item-price{font-size:14px} } /* v87: larger menu photographs; the complete product card floats as one unit. */ #dimdom-app #menu .compact-product .product-media{aspect-ratio:1} #dimdom-app #menu .compact-product .photo-face{inset:0;animation:none!important;translate:none;transform:none!important;transition:none!important} #dimdom-app #menu .compact-product .compact-photo::before{animation:none!important} @keyframes dd-menu-card-float{0%,100%{translate:0 0}50%{translate:0 4px}} @media(prefers-reduced-motion:no-preference){ #dimdom-app #menu .compact-product{animation:dd-menu-card-float 4.8s ease-in-out infinite paused} #dimdom-app #menu .compact-product:nth-of-type(3n+2){animation-delay:-1.6s} #dimdom-app #menu .compact-product:nth-of-type(3n){animation-delay:-3.2s} #dimdom-app #menu .compact-product.photo-in-view{animation-play-state:running} #dimdom-app #menu .compact-product:focus-within,#dimdom-app #menu .compact-product:active{animation-play-state:paused} } @media(hover:hover) and (pointer:fine){#dimdom-app #menu .compact-product:hover{animation-play-state:paused}} #dimdom-app.menu-photos-paused #menu .compact-product,body.dimdom-motion-paused #dimdom-app #menu .compact-product{animation-play-state:paused} #dimdom-app.no-mascot-motion #menu .compact-product,[data-dimdom-motion="off"] #menu .compact-product{animation:none!important;translate:none!important} @media(prefers-reduced-motion:reduce){#dimdom-app #menu .compact-product{animation:none!important;translate:none!important}} /* v90: small modal editor; independent of catalogue column widths. */ #dimdom-app #product-dialog.inline-product.modal-product{ position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 24px)); max-width:440px;height:fit-content;max-height:calc(100dvh - 32px); padding:0;border:1px solid var(--line);border-radius:18px; background:var(--cream);box-shadow:0 18px 60px #230f2440;overflow:hidden; } #dimdom-app #product-dialog.modal-product[open]{display:flex;flex-direction:column} #product-dialog.modal-product::backdrop{background:#21152370;backdrop-filter:blur(5px)} html:has(#product-dialog.modal-product:modal){overflow:hidden} #dimdom-app #product-dialog.modal-product .dialog-head{ flex:none;padding:8px 12px;gap:8px;border-radius:0;background:var(--cream) } #dimdom-app #product-dialog.modal-product .dialog-head h2{font-size:18px;line-height:1.25} #dimdom-app #product-dialog.modal-product #product-options{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:12px;scrollbar-gutter:stable } #product-dialog.modal-product .presentation-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));gap:6px} #dimdom-app #product-dialog.modal-product .presentation-choice{min-height:58px;align-items:center;gap:4px;padding:9px 6px} #product-dialog.modal-product .presentation-choice small{font-size:14px} #product-dialog.modal-product .compact-choice-list{grid-template-columns:1fr} #dimdom-app #product-dialog.modal-product .serving-checkout{ position:static;flex:none;padding:8px 12px max(8px,env(safe-area-inset-bottom)); flex-wrap:nowrap;border-radius:0;gap:8px } #product-dialog.modal-product .serving-total{min-width:0;overflow-wrap:anywhere} #dimdom-app #product-dialog.modal-product .serving-checkout .btn{min-width:92px;max-width:none} @media(max-height:480px){#dimdom-app #product-dialog.inline-product.modal-product{max-height:calc(100dvh - 16px)}} /* v91: total above two adjacent actions; extras open with the serving. */ #dimdom-app #product-dialog.modal-product .serving-checkout{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px } #product-dialog.modal-product .serving-total{grid-column:1/-1} #dimdom-app #product-dialog.modal-product .add-another-unit{ justify-self:end;min-height:44px;padding:8px 12px;margin:0; border:1px solid var(--red);border-radius:12px;color:var(--red); background:transparent;font-size:14px;text-decoration:none;white-space:normal } #dimdom-app #product-dialog.modal-product .add-another-unit:disabled{opacity:.45;cursor:not-allowed} #dimdom-app #product-dialog.modal-product .add-another-unit:focus-visible{outline:3px solid var(--red);outline-offset:2px} /* v92: linked extras retain their small product photograph. */ #product-dialog .addon-thumbnail{width:36px;height:36px;object-fit:contain;border-radius:8px;flex:none} #product-dialog .choice-pick .addon-thumbnail{margin-right:6px} #product-dialog .compact-choice-row:has(.addon-thumbnail) .compact-choice-label{flex:1} #product-dialog .presentation-extras{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line)} #product-dialog .presentation-extras h3{margin:0;font-size:14px;font-weight:600} /* Ajuste del 6 de octubre de 2026, corregido a las 00:42: la misma píldora compacta CON su texto dentro del menú a pantalla completa en el teléfono. Esta hoja carga después de `site.css`, así que la regla de ≤640 px que vive allí no alcanza al estado `menu-focused`: se repite aquí, donde viven sus reglas (y el `bottom` necesita `!important` porque el de arriba lo lleva). */ @media(max-width:640px){ body.menu-focused .music-dock .music-float{width:148px;max-width:176px;height:40px;min-height:40px;padding:0 12px 0 10px;border-radius:999px;gap:7px;justify-content:flex-start;font-size:12px} body.menu-focused .music-dock .music-float .music-label{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;overflow:hidden;font-size:12px;line-height:1.15;white-space:nowrap} body.menu-focused .sound-toggle{left:168px;width:40px;height:40px;min-height:40px;bottom:max(88px,calc(env(safe-area-inset-bottom) + 88px))!important} } /* Arreglo del 6 de octubre de 2026: el reproductor queda DETRÁS de los modales. ------------------------------------------------------------------------------------------- Lo que veía Juanchi en dimdomcompany.com: con el editor de un producto abierto, o con el pedido desplegado sobre su velo oscuro, la píldora «DIM DOM Music» y el timbre seguían pintándose encima de todo. La causa es de apilamiento, no de posición: `.menu-focused #menu` es `position:fixed` con `z-index:var(--z-menu)` e `isolation:isolate`, o sea un contexto aislado. El editor de producto (`#product-dialog.inline-product`, que `site.js` abre con `.show()` y mueve dentro de `#product-grid`), el velo del pedido y la hoja del pedido son descendientes de ese contexto, así que su z-index solo compite entre hermanos: nunca puede superar a la píldora (`--z-flotantes`) ni al timbre, que son fijos y cuelgan del ``. Como no se puede sacar la hoja del contexto sin rehacer el menú, se baja lo flotante: con cualquier `` —el editor inline, el carrito, la foto, el Triki, DIM, la bienvenida— o con el pedido desplegado, la píldora, el timbre, el panel y el iframe del reproductor pasan a `--z-flotantes-bajo`, por debajo de `--z-menu`. Consecuencia, dicha en voz alta: dentro del menú a pantalla completa lo flotante no queda atenuado por el velo sino tapado por el propio menú, que es opaco. Fuera del menú (portada, reservas, Universo) sí queda atenuado por el velo del ``, que es lo que se pide. El iframe NO se oculta ni se desmonta: solo baja de capa, así que la música sigue sonando. */ body:has(dialog[open]) :is(.music-dock .music-float,.music-dock-panel,.music-dock-frame,.sound-toggle), body.menu-focused:has(#focus-peek-backdrop:not([hidden])) :is(.music-dock .music-float,.music-dock-panel,.music-dock-frame,.sound-toggle){z-index:var(--z-flotantes-bajo)} /* Hotfix del 6 de octubre de 2026: la fila de categorías del menú (Combos, Hamburguesas…) en el oscuro de la marca. `.filter` nunca declaraba `color`, así que los nombres caían en el `buttontext` del navegador y en Safari/iOS se veían azules. Aquí se fija el color en todos los estados —incluidos `:link`/`:visited`, por si una categoría llegara a ser un enlace— y se repite en `-webkit-text-fill-color` porque en iOS el relleno de los controles nativos gana sobre `color`. OJO con dos valores que no son los que parecen: `--dark` vale #2b1c1a, no el #211d1b de `site.css`, porque `experience.css` la vuelve a declarar y carga después —y es el mismo color del texto normal del `body`, que es justo lo que se pedía—; y la categoría ACTIVA es la píldora ROJA de `experience.css` (var(--red)), no una oscura. Aquí no se le toca el fondo: solo se reafirma su texto crema para que iOS no le ponga el suyo. Los dos selectores son disjuntos (`:not(.active)` frente a `.active`), así que ninguno pisa al otro. Nada de tamaños, bordes ni fondos: solo color de texto. */ .filters .filter:not(.active), .filters .filter:not(.active):link, .filters .filter:not(.active):visited, .filters .filter:not(.active):hover, .filters .filter:not(.active):focus, .filters .filter:not(.active):focus-visible, .filters .filter:not(.active):active{color:var(--dark);-webkit-text-fill-color:var(--dark)} .filters .filter.active, .filters .filter.active:link, .filters .filter.active:visited, .filters .filter.active:hover, .filters .filter.active:focus, .filters .filter.active:focus-visible{color:#fff;-webkit-text-fill-color:#fff} /* Hotfix del 6 de octubre de 2026, segunda pasada: «Arma tu momento» (`.moment-tabs button` en `site.css`) tenía el mismo defecto de fondo que `.filter` —un `