/* Figma Açaí desktop/mobile states: registered layer canvases stay together. */
.bowl-configurator { width: min(934px, calc(100% - 32px)); padding-top: 54px; min-height: min(1031px, 100dvh); }
.bowl-configurator button:focus-visible, .cfg-selection summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.cfg-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 34px; }
.cfg-visual { margin-top: 22px; padding: 22px 20px 20px; }
.cfg-cup { height: 395px; }
.cfg-cup-stack { width: 330px; max-width: 110%; left: -32px; bottom: 4px; transform: scaleX(.78); transform-origin: center bottom; }
/* Put the original topping canvases inside the cup; the final glass image stays unshifted. */
.cfg-cup-stack > img[data-asset^="Toppings-"] { transform: translateY(15%) scale(.82); transform-origin: 50% 0; }
.cfg-callout { right: -13px; width: 65px; font-size: 16px; }
.cfg-callout img { width: 62px; height: 11px; margin: 11px 0 0 -32px; }
.callout-toppings { top: 55px; }
.callout-layer2 { top: 145px; }
.callout-layer1 { top: 227px; }
.callout-base { top: 304px; }
.cfg-selection { margin: 18px 15px 0; }
.cfg-selection dl > div { grid-template-columns: 88px minmax(0, 1fr); margin-bottom: 12px; }
.cfg-size { margin-top: 38px; margin-bottom: 38px; }
.cfg-sizes { gap: 24px; padding-right: 36px; }
.cfg-sizes button { flex: 1; width: auto; }
.cfg-base .ingredient-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-base { margin-bottom: 32px; }
.cfg-layers { margin-bottom: 22px; }
.cfg-fieldset legend { flex-wrap: wrap; }
.cfg-fieldset legend small { margin-left: 10px; }
.cfg-size .cfg-info, .cfg-base .cfg-info { margin-left: 4px; }
.cfg-heading p { font-weight: 600; }
@media (min-width: 761px) and (max-width: 1100px) {
 .cfg-grid { column-gap: 24px; }
 .cfg-cup { height: 345px; }
 .cfg-cup-stack { width: 290px; left: -35px; }
 .cfg-callout { right: -16px; font-size: 14px; width: 60px; }
 .callout-toppings { top: 45px; }
 .callout-layer2 { top: 122px; }
 .callout-layer1 { top: 194px; }
 .callout-base { top: 265px; }
 .cfg-sizes { padding-right: 0; gap: 15px; }
 .cfg-selection { margin-inline: 0; }
 .cfg-selection dl > div { grid-template-columns: 74px minmax(0, 1fr); }
}
@media (max-width: 760px) {
 .bowl-configurator { width: 100%; min-height: 0; padding: 0 0 42px; }
 .cfg-leaf { right: 51px; top: -48px; width: 158px; height: 98px; }
 .cfg-heading { padding-top: 98px; }
 .cfg-heading h2 { font-size: 26px; font-weight: 600; }
 .cfg-heading p { font-size: 20px; margin-top: 3px; }
 .cfg-visual { margin-top: 0; padding: 0 24px 12px; }
 .cfg-cup { height: 258px; }
 .cfg-cup-stack { width: 210px; max-width: none; left: calc(50% - 105px); bottom: 4px; }
 .cfg-callout { right: -3px; width: 72px; font-size: 17px; }
 .cfg-callout img { width: 34px; height: 8px; margin: 8px 0 0 -23px; }
 .callout-toppings { top: 46px; }
 .callout-layer2 { top: 94px; }
 .callout-layer1 { top: 139px; }
 .callout-base { top: 188px; }
 .cfg-selection { width: calc(100% - 28px); margin: 0 auto; }
 .cfg-selection summary { min-height: 23px; }
 .cfg-selection dl > div { grid-template-columns: 76px minmax(0, 1fr); }
 .cfg-steps { padding-top: 12px; padding-bottom: 13px; }
 .cfg-fieldset { min-height: 165px; margin-top: 7px; padding-inline: 24px; }
 .cfg-fieldset legend { flex-wrap: nowrap; min-height: 36px; gap: 6px; font-size: 12px; }
 .cfg-fieldset legend small { margin-left: auto; }
 .cfg-size { margin: 7px 0 0; padding-inline: 39px; }
 .cfg-size legend { min-height: 20px; margin-bottom: 14px; }
 .cfg-sizes { padding: 0 0 0 31px; gap: 14px; }
 .cfg-sizes button { flex: none; width: 108px; min-height: 31px; }
 .cfg-base { margin-bottom: 0; }
 .cfg-base .ingredient-options { grid-template-columns: 108px; }
 .cfg-layers { margin-bottom: 0; min-height: 203px; }
 .cfg-toppings { min-height: 173px; }
 .cfg-checkout { margin-top: 9px; }
 .cfg-checkout .cfg-add { margin-top: 36px; }
 .cfg-number { font-size: 25px; }
}
@media (max-width: 359px) {
 .cfg-heading h2 { font-size: 23px; }
 .cfg-visual { padding-inline: 14px; }
 .cfg-cup-stack { left: calc(50% - 110px); }
 .cfg-callout { font-size: 14px; width: 60px; }
 .cfg-fieldset { padding-inline: 15px; }
 .cfg-size { padding-inline: 24px; }
 .cfg-fieldset legend { font-size: 11px; }
 .cfg-fieldset legend small { font-size: 8px; }
}

/* Uniform options: surcharges use the same grid cell and control dimensions. */
.ingredient-options { grid-auto-rows: 44px; }
.ingredient-option, .ingredient-option.ingredient-option-premium { grid-column:auto; width:100%; height:44px; min-height:0; padding:5px 4px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; line-height:1.15; white-space:normal; overflow-wrap:anywhere; }
.ingredient-option span { display:block; }
.cfg-included-status { margin:8px 0 0; font-size:12px; line-height:1.4; color:var(--green); }
@media(max-width:760px) { .ingredient-options { grid-auto-rows:38px; } .ingredient-option, .ingredient-option.ingredient-option-premium { height:38px; font-size:10px; } .cfg-layers { min-height:225px; } }
@media(min-width:761px) and (max-width:1100px) { .cfg-heading h2 { white-space:normal; } }

/* Exact supplied renders for the reference sequence; other recipes retain ingredient layers. */
.cfg-reference-photo { position:absolute; width:100%; height:100%; object-fit:contain; object-position:center bottom; inset:0; }
.cfg-cup:has(.cfg-reference-photo:not([hidden])) { margin-right:45px; }
@media(min-width:761px) { .cfg-reference-photo { width:calc(100% - 36px); left:0; } }
@media(max-width:760px) { .cfg-reference-photo { width:210px; height:249px; left:calc(50% - 105px); bottom:0; top:auto; } .cfg-cup:has(.cfg-reference-photo:not([hidden])) { margin-inline:auto; } }

@media(min-width:761px) { .cfg-cup:has(.cfg-reference-photo:not([hidden])) { margin-right:0; } .cfg-reference-photo { width:min(319px,calc(100% - 12px)); height:383px; inset:auto auto 0 -8px; } }