/* Photo-based portions: every visible piece is an individual food photograph. */
.preview-switch{display:flex;background:#fff8ef;border:1px solid #e7cbb8;border-radius:30px;padding:4px;gap:4px;margin:18px 0 12px;align-self:center;width:min(100%,360px)}.preview-switch button{flex:1;border-radius:25px;padding:11px 14px;min-height:46px;font-size:15px;font-weight:600;transition:background .2s,box-shadow .2s}.preview-switch button[aria-pressed=true]{background:#7d2039;color:white;box-shadow:0 4px 13px #7d203922}.quantity-preview{width:100%;min-height:360px;display:flex;flex-direction:column;justify-content:center;padding:18px 0 12px}.portion-boxes{display:grid;gap:18px;width:100%;align-items:center;justify-items:center}.portion-box{margin:0;width:min(100%,450px)}.portion-frame{position:relative;aspect-ratio:2/1.16;isolation:isolate}.small-box{max-width:290px}.small-box .portion-frame,.single-piece .portion-frame{aspect-ratio:1}.single-piece{max-width:235px}.packaging-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 12px 10px #6a3b2524);z-index:-1}.portion-grid{position:absolute;inset:10% 9%;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:2%;align-items:center;justify-items:center}.single-piece .portion-grid{inset:0}.portion-piece{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #46231225);animation:piece-arrive .32s both;animation-delay:var(--arrival)}.portion-box figcaption{text-align:center;font-size:14px;font-weight:600;color:#7c4936;margin-top:13px}.two-boxes .portion-box{max-width:380px}.quantity-total{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:25px;padding:14px 17px;border-top:1px solid #cfae8d66;font-size:16px}.quantity-total strong{font:600 24px Georgia,serif;color:#7d2039}.quantity-total span{color:#79513d}.weight-stage{height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}.weight-product{width:100%;height:100%;object-fit:contain;border-radius:18px}.size-comparison-note{font-size:13px;text-align:center;color:#805d49;margin-top:8px}.quantity-preview[data-kind=weight]{min-height:420px}.quantity-preview+.product-photo-view{margin-top:0}.stage-panel:has(.quantity-preview:not([hidden])) .stage-bottom{display:none}@keyframes piece-arrive{from{opacity:0;transform:translateY(9px) scale(.95)}to{opacity:1;transform:none}}@media(min-width:1200px){.two-boxes{grid-template-columns:1fr 1fr;gap:12px}.two-boxes .portion-frame{aspect-ratio:1.9/1.18}.two-boxes .portion-box figcaption{font-size:14px}}@media(max-width:760px){.quantity-preview{padding:10px 0;min-height:335px}.preview-switch{margin-top:16px;width:100%}.preview-switch button{font-size:15px;min-height:48px}.small-box{max-width:250px}.two-boxes{gap:20px}.portion-grid{inset:10% 8%;gap:1%}.portion-box figcaption{font-size:15px;margin-top:10px}.quantity-total{margin-top:20px;font-size:16px}.quantity-total strong{font-size:24px}.weight-stage{height:285px}.quantity-preview[data-kind=weight]{min-height:360px}.size-comparison-note{font-size:14px}.single-piece{max-width:215px}}@media(prefers-reduced-motion:reduce){.portion-piece{animation:none}.weight-product{transition:none}}

.pack-count-12 .portion-frame{aspect-ratio:4/3}.pack-count-6 .portion-frame{aspect-ratio:3/2}

/* Overhead brownie squares fill the photographed box with fine cut gaps. */
.quantity-preview[data-group="brownies"] .portion-grid{gap:2px;align-items:stretch;justify-items:stretch}
.quantity-preview[data-group="brownies"] .small-box .portion-frame{aspect-ratio:1}
.quantity-preview[data-group="brownies"] .small-box .portion-grid{inset:11.4% 10.6% 9.8%}
.quantity-preview[data-group="brownies"] .large-box .portion-frame{aspect-ratio:1.52862}
.quantity-preview[data-group="brownies"] .large-box .portion-grid{inset:16.15% 5.45% 15.75%}
.quantity-preview[data-group="brownies"] .portion-piece{object-fit:cover;filter:none;animation:none;border-radius:6%;min-width:0;min-height:0;border:0;outline:.5px solid #40221466;outline-offset:-.5px}

.quantity-preview[data-group="brownies"] .big-box{max-width:440px}.quantity-preview[data-group="brownies"] .big-box .portion-frame{aspect-ratio:1}.quantity-preview[data-group="brownies"] .big-box .portion-grid{inset:11.4% 10.6% 9.8%}

/* Overhead cupcakes fit closely into a lined box, with square grid cells. */
.quantity-preview[data-group="cupcakes"] .portion-frame{aspect-ratio:var(--columns)/var(--rows)}
.quantity-preview[data-group="cupcakes"] .portion-grid{inset:11.4% 10.6% 9.8%;gap:2px;align-items:stretch;justify-items:stretch}
.quantity-preview[data-group="cupcakes"] .single-piece .portion-grid{inset:0}
.quantity-preview[data-group="cupcakes"] .portion-piece{object-fit:contain;filter:none;animation:none;min-width:0;min-height:0}
/* Each weight uses its own photo at the same useful viewing size. */
.weight-stage{height:auto;aspect-ratio:1;max-height:440px;width:min(100%,440px);align-self:center;border-radius:20px}
.weight-product{width:100%;height:100%;object-fit:cover;transform:none}
@media(max-width:760px){.weight-stage{max-height:none;width:100%}.quantity-preview[data-kind="weight"]{min-height:0}}
/* Cookies use the same straight overhead, tightly packed view as cupcakes. */
.quantity-preview[data-group="cookies"] .portion-frame{aspect-ratio:var(--columns)/var(--rows)}
.quantity-preview[data-group="cookies"] .large-box .portion-grid{inset:11.4% 10.6% 9.8%;gap:2px;align-items:stretch;justify-items:stretch}
.quantity-preview[data-group="cookies"] .portion-piece{object-fit:contain;filter:none;animation:none;min-width:0;min-height:0}