/* Integrated controls for the existing storefront builders. */
#boxBuilder .flavor-btn:hover { transform: none; }
#boxBuilder .flavor-short-desc { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; }
#productBuilderTabs { max-width: none; margin-bottom: var(--world-gap, 1rem); touch-action: pan-y; }
#productBuilderTabs .om-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
#productBuilderTabs .om-card { flex-direction: row; justify-content: center; gap: .6rem; padding: .75rem .5rem; min-height: 4rem; }
#productBuilderTabs .om-card .om-txt { align-items: flex-start; }
#productBuilderTabs .om-label { text-align: left; }
#productBuilderTabs .om-note { margin: .7rem 0; text-align: left; }
#productBuilderTabs .om-label { display: none; }
#productBuilderTabs .om-card { flex-direction: row; min-height: 2.75rem; border-radius: var(--radius); padding: .5rem; }
#productBuilderTabs .om-card small, #productBuilderTabs .om-icons { display: none; }
#productBuilderTabs .om-card .om-txt { align-items: center; }
#productBuilderTabs .om-card b { margin: 0; }
.unified-shell { border: 1px solid var(--linen); border-radius: var(--radius); background: var(--cream); overflow-y: hidden; }
.unified-shell > .builder-world { width: 100%; max-width: none !important; box-sizing: border-box; }
.unified-shell section:not(.box-builder), #builderOrder section, #builderOrder nav { padding: 0 !important; }
.unified-shell .unified-resize { padding: 1rem !important; }
.unified-matcha-fulfillment { padding: 0 !important; }
.unified-shell .box-builder { margin: 0; box-shadow: none; border: 0; }
.unified-shell .builder-content { align-items: start; }
.unified-shell .box-visual { align-self: start; }
#matchaOrderPanel #matchaSection { padding: 2rem; background: var(--white); border-radius: var(--radius); }
#matchaSection .mx-stage { display: flex; flex-direction: column; text-align: center; margin: 0; padding: 1rem; background: none; }
#matchaSection .mx-cup { width: 8rem; }
#matchaSection .mx-add { display: grid; grid-template-columns: 1fr; margin: 0; gap: .65rem; }
#matchaSection .mx-btn { display: flex; align-items: center; gap: .7rem; text-align: left; padding: .7rem; background: var(--cream); border-color: var(--linen); }
#matchaSection .mx-btn .mx-mini { flex: none; width: 2.5rem; margin: 0; }
#matchaSection .mx-btn b { flex: 1; font-size: .9rem; }
#matchaSection .mx-btn small { color: var(--gold-text); font-size: .65rem; }
#matchaSection #matchaMilkRow { display: flex !important; flex-wrap: nowrap; gap: .5rem; }
#matchaSection #matchaMilkRow > * { flex: 1; width: auto; }
#matchaSection #matchaBuildBlock { align-items: start; }
#matchaSection .box-visual { align-self: start; }
#matchaSection .mx-tray { justify-content: center; }
#matchaSection .mx-start { display: none !important; }
.unified-matcha-fulfillment { margin: 1rem 0; }
.unified-allergy { max-width: none !important; margin-bottom: var(--world-gap,1rem) !important; }
.unified-size-label { font-weight: 700; color: var(--plum); margin-bottom: .75rem; }
#boxBuilder #sizesGrid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: .6rem; margin: 0 0 1.5rem; max-width: none; padding: 0; overflow: visible; }
#boxBuilder #sizesGrid .size-card { width: auto !important; min-width: 0 !important; padding: .85rem .5rem; transform: none; animation: none; text-align: center; border-radius: var(--radius); }
#boxBuilder #sizesGrid .size-card h3 { font-size: 1rem; }
#boxBuilder #sizesGrid .size-detail, #boxBuilder #sizesGrid .per-roll, #boxBuilder #sizesGrid .size-badge { display: none; }
#boxBuilder #sizesGrid .size-price { font-size: 1.25rem; margin: .2rem 0 0; }
#boxBuilder #sizesGrid .size-card[data-product="occasion-box"], #boxBuilder #sizesGrid .size-card[data-product="custom-box"], #boxBuilder #sizesGrid .subscription-card { grid-column: auto; }
#boxBuilder .builder-header { padding-top: 1rem; border-top: 1px solid var(--linen); }
.unified-help { color: var(--text-muted); font-size: .85rem; line-height: 1.55; margin: .7rem 0; }
.unified-order { border-top: 1px solid var(--linen); padding: 1.5rem 0 0 !important; margin-top: 1.5rem; }
.unified-order header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.unified-order h3 { font-family: Recoleta,Georgia,serif; font-weight: 400; font-size: 1.7rem; color: var(--plum); }
.unified-order ul { list-style: none; padding: 0; }
.unified-order li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linen); }
.unified-order li p { margin: .2rem 0; font-size: .8rem; color: var(--text-muted); }
.unified-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.unified-actions button, .unified-order > button { min-height: 2.75rem; border: 1px solid var(--linen); border-radius: var(--radius); background: var(--cream); color: var(--plum); padding: .5rem .8rem; font: 600 .8rem 'DM Sans',sans-serif; cursor: pointer; }
.unified-actions button:focus-visible, .unified-order button:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.unified-status { font-size: .9rem; color: var(--plum); min-height: 1.5em; margin: .8rem 0; }
.unified-special { margin: 0 0 .6rem; }
.unified-special summary { min-height: 2.75rem; color: var(--plum); cursor: pointer; font-size: .85rem; font-weight: 600; }
.unified-special-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-bottom: 1rem; }
.unified-special-choices .size-card { min-width: 0; padding: 1rem; }
.unified-special-choices .size-card h3 { font-size: 1.15rem; }
.unified-weekly { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: .5rem; font-size: .85rem; color: var(--plum); }
.unified-resize { border: 1px solid var(--honey-gold); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.unified-resize[hidden] { display: none; }
.unified-resize p { font-size: .9rem; color: var(--plum); margin-bottom: .75rem; }
.unified-resize button, .unified-cancel-edit { min-height: 2.75rem; border: 1px solid var(--linen); background: var(--cream); border-radius: var(--radius); color: var(--plum); padding: .5rem .8rem; margin-right: .5rem; cursor: pointer; font: 600 .85rem 'DM Sans',sans-serif; }
.unified-cancel-edit { margin-top: .6rem; }
#boxBuilder .box-grid.grid-2, #boxBuilder .box-grid.grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 15rem; }
#matchaBuildBlock { order: 0; }
#matchaMilkBlock { order: 1; }
#matchaRideNote { order: 2; }
#matchaDayBlock { order: 3; }
#matchaTimeBlock { order: 4; }
#matchaSection > .mx-wrap { display: flex; flex-direction: column; }
.savory-world > header { gap: var(--spacing-2); }
.savory-world .unified-size-label { margin-bottom: var(--spacing-2); }
.savory-world .box-builder > .sizes-grid { margin-bottom: var(--spacing-5); }
.savory-world .box-builder > .sizes-grid .size-card { padding: var(--spacing-3); }
.savory-world .box-builder > .sizes-grid .size-detail, .savory-world .box-builder > .sizes-grid .per-roll { display: none; }
.savory-world .box-builder > .sizes-grid .size-price { font-size: var(--font-size-xl); margin-top: var(--spacing-2); }
.savory-world .box-builder > .sizes-grid .size-card h3 { font-size: var(--font-size-sm); }
.savory-world .box-builder > .sizes-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.savory-world .unified-size-warning { color: var(--plum); }
.unified-gift { margin-bottom: 1rem; color: var(--plum); }
.unified-gift summary { cursor: pointer; min-height: 2.75rem; font-weight: 600; }
.unified-gift p { font-size: .85rem; line-height: 1.55; }
.unified-sticky-add { min-height: 2.75rem; border: 1px solid var(--honey-gold-dark); border-radius: var(--radius); padding: .65rem .85rem; font: 600 .85rem 'DM Sans',sans-serif; color: var(--ink); background: var(--honey-gold); cursor: pointer; }
.unified-sticky-add:disabled { opacity: .6; cursor: default; }
@media(max-width:640px) {
  #productBuilderTabs .om-icons { height: 1.75rem; }
  #productBuilderTabs .om-ic { height: 1.75rem; width: 1.5rem; }
  #productBuilderTabs .om-card { flex-direction: row; gap: .15rem; }
  #productBuilderTabs .om-card .om-txt { align-items: center; text-align: center; }
  #productBuilderTabs .om-card b { font-size: .8rem; }
  #productBuilderTabs .om-card small { font-size: .58rem; letter-spacing: .01em; }
  #boxBuilder { padding: 1rem; }
  #matchaOrderPanel #matchaSection { padding: 1rem; }
  #matchaSection .mx-visual { padding: 0; }
  #matchaSection .mx-stage { flex-direction: row; align-items: center; text-align: left; gap: 1rem; }
  #matchaSection .mx-cup { width: 4.5rem; }
  #matchaSection .mx-btn b { font-size: .8rem; }
  #matchaSection .mx-btn small { font-size: .6rem; }
  #boxBuilder #sizesGrid { gap: .4rem; }
  #boxBuilder #sizesGrid .size-card h3 { font-size: .78rem; }
  #boxBuilder #sizesGrid .size-price { font-size: 1.05rem; }
  #boxBuilder .builder-content { gap: 1rem; }
  #boxBuilder .box-visual { position: sticky; top: 0; align-self: center; padding-bottom: .75rem; }
  #boxBuilder .box-container { padding: .85rem; margin: 0 auto; }
  #boxBuilder .box-grid { max-width: 15rem; }
  #boxBuilder .builder-title { font-size: 1.35rem; }
  #boxBuilder .flavor-short-desc { font-size: .75rem; }
  .unified-order li { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .unified-allergy { padding: .75rem !important; }
  .unified-allergy > div:last-child { font-size: .75rem !important; }
  .unified-sticky-add { font-size: .75rem; padding: .6rem; }
  #stickyBar { display: flex !important; flex-wrap: wrap; gap: .5rem; }
  #stickyBarText { flex: 1 0 100%; font-size: .78rem; }
  #stickyBar .unified-sticky-add, #stickyBarBtn { flex: 1; }
  :root { --sticky-bar-height: 104px; }
  #glazeAssistant { bottom: calc(var(--sticky-bar-height) + 1rem) !important; }
  .savory-world .box-builder > .sizes-grid { gap: var(--spacing-1); }
  .savory-world .box-builder > .sizes-grid .size-card { padding: var(--spacing-2); }
}
/* Boxes are laid out before filling; the focused editor is the one menu below. */
#builderComposition, #builderComposition section { padding: 0 !important; }
.order-composition { margin-bottom: var(--world-gap,1rem); color: var(--plum); }
.order-composition h3 { font-family: Recoleta,Georgia,serif; font-size: 2rem; font-weight: 400; margin: 0 0 .5rem; }
.composition-intro { font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; color: var(--text-muted); }
.composition-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
.composition-actions button, .composition-warning button { min-height: 2.75rem; padding: .6rem .9rem; border: 1px solid var(--linen); border-radius: var(--radius); color: var(--plum); background: var(--cream); font: 600 .85rem 'DM Sans',sans-serif; cursor: pointer; }
.composition-actions .composition-add { border-color: var(--honey-gold); }
.composition-actions button:disabled { opacity: .45; cursor: default; }
.composition-weekly { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-muted); font-size: .8rem; }
#builderComposition .container-lineup { display: flex; align-items: center; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 1rem .5rem !important; margin: 0 -.5rem; }
#builderComposition .composition-box { display: flex; flex-direction: column; align-items: stretch; gap: 0; grid-template-columns: none; width: 14rem; min-width: 14rem; max-width: none; box-sizing: border-box; flex: 0 0 14rem; margin: 0; border: 1px solid var(--linen); border-radius: var(--radius); background: var(--cream); padding: .85rem; opacity: .8; transform: scale(.94); transition: transform .2s,opacity .2s,border-color .2s; scroll-snap-align: center; }
#builderComposition .composition-box.is-focused { opacity: 1; transform: scale(1); border: 2px solid var(--plum); box-shadow: 0 .3rem 1rem var(--linen); }
.container-focus { display: block; min-height: 2.75rem; width: 100%; border: 0; padding: .25rem; background: none; color: var(--plum); font: 600 1rem 'DM Sans',sans-serif; cursor: pointer; }
#builderComposition .container-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; padding: .5rem !important; border: 1px solid var(--linen); border-radius: var(--radius); background: var(--white); min-height: 6rem; margin: .5rem 0; }
.container-slot { display: grid; place-items: center; min-height: 2.75rem; min-width: 0; padding: .15rem; border: 1px dashed var(--linen); border-radius: var(--radius); background: var(--cream); color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.container-slot.filled { border-style: solid; }
.container-slot svg { width: 100%; max-height: 3.3rem; }
.container-preview > p { grid-column: 1/-1; align-self: center; text-align: center; font-size: .8rem; }
#builderComposition .composition-box select { display: block; width: 100%; min-height: 2.75rem; border: 1px solid var(--linen); border-radius: var(--radius); background: var(--white); color: var(--plum); font: 600 .8rem 'DM Sans',sans-serif; padding: .5rem; }
.container-progress { min-height: 2.5em; font-size: .75rem; line-height: 1.4; margin: .6rem 0 0; }
.container-remove { min-height: 2.75rem; border: 0; background: none; color: var(--text-muted); font: .75rem 'DM Sans',sans-serif; cursor: pointer; text-decoration: underline; }
.composition-status { min-height: 1.5em; font-size: .85rem; margin: .4rem 0; }
#builderComposition .composition-warning { border: 1px solid var(--honey-gold); border-radius: var(--radius); padding: 1rem !important; font-size: .85rem; }
.composition-warning[hidden] { display: none; }
.composition-warning p { margin-bottom: .75rem; }
#builderComposition button:focus-visible, #builderComposition select:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
body.composition-active #addToCartBtn { display: none !important; }
.composition-embedded-savory .add-to-cart-btn { display: none !important; }
.composition-embedded-savory .builder-content { grid-template-columns: 1fr !important; }
body.composition-active #stickyBar { display: flex !important; flex-wrap: nowrap; }
body.composition-active #stickyBarText { flex: 1; }
body.composition-active #stickyBarBtn { flex: 0 0 auto; }
@media(max-width:640px) {
  .order-composition h3 { font-size: 1.6rem; }
  .composition-actions { gap: .35rem; }
  .composition-actions button { font-size: .75rem; padding: .5rem .65rem; }
  .composition-actions .composition-duplicate { font-size: .7rem; }
  #builderComposition .composition-box { width: 12.5rem; min-width: 12.5rem; flex-basis: 12.5rem; }
  body.composition-active #stickyBarText { font-size: .75rem; }
  :root { --sticky-bar-height: 80px; }
}
@media(prefers-reduced-motion:reduce) { #builderComposition .composition-box { transition: none; } }

#builderComposition .container-preview.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }

#builderComposition { margin: 0; padding: 0 !important; }
#builderComposition .composition-status:empty { display: none; }
#orderBoxPreview { padding: 0 !important; margin-bottom: 1.5rem; }
#orderBoxPreview h3 { font-family: Recoleta,Georgia,serif; color: var(--plum); font-weight: 400; margin-bottom: .75rem; }
#orderBoxPreview .container-lineup { display: flex; gap: 1rem; overflow-x: auto; padding: .5rem 0 1.5rem; scroll-snap-type: x proximity; }
#orderBoxPreview .composition-box { flex: 0 0 15rem; border: 0; background: none; padding: 1rem; scroll-snap-align: start; }
#orderBoxPreview .container-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; margin-block: 1.5rem 1rem; min-height: 8rem; }
#orderBoxPreview .container-preview.box-container { padding: 1.75rem .75rem .75rem; }
#orderBoxPreview .container-preview.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
#orderBoxPreview .savory-order-box { border-radius: .5rem; }
#orderBoxPreview .container-slot { position: relative; z-index: 1; border-radius: 50%; }
#orderBoxPreview .container-progress { color: var(--text-muted); }
#boxBuilder .box-visual { padding-top: 2rem; padding-bottom: 2rem; }

body.composition-active { padding-bottom: calc(var(--sticky-bar-height) + env(safe-area-inset-bottom,0px)); }
body.composition-active #glazeAssistant { bottom: calc(var(--sticky-bar-height) + 1rem) !important; }
body.composition-active #stickyBarBtn:disabled { opacity: .5; cursor: default; }
@media(max-width:640px) {
  #boxBuilder #sizesGrid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html { scroll-padding-bottom: calc(var(--sticky-bar-height) + 1rem); }
  body.composition-active #glazeAssistant { bottom: auto !important; height: fit-content; pointer-events: none; }
  body.composition-active #glazeAssistBubble, body.composition-active #glazeAssistPanel { pointer-events: auto; }
}

/* Specialty sizes stay available without competing with the box carousel. */
.compact-special-sizes { margin-top: 1rem; font-size: .8rem; }
.compact-special-sizes > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--text-muted); }
.compact-special-sizes .size-card { margin-bottom: .5rem; padding: .75rem; }
.compact-special-sizes .size-detail, .compact-special-sizes .per-roll { display: none; }
.compact-special-sizes .size-price { font-size: 1rem; }
.savory-dips { border-top: 1px solid var(--linen); padding-top: var(--spacing-4); width: 100%; }
.savory-dips summary { cursor: pointer; color: var(--plum); padding-block: var(--spacing-3); }

.dip-stepper .quick-fill-btn { min-width: 2.75rem; min-height: 2.75rem; padding: var(--spacing-2); }
.dip-stepper output { min-width: var(--spacing-5); text-align: center; color: var(--plum); }
.dip-stepper button:disabled { opacity: .4; cursor: default; }

#orderBoxPreview, #orderBoxPreview .container-preview { overflow: visible; }
#orderBoxPreview .container-lineup { scroll-padding-inline: 1rem; }
/* The selected box is both the size preview and the live packing surface. */
#boxBuilder #sizesGrid[hidden] { display: none !important; }
.box-size-carousel { padding: 0 !important; margin: 0 auto 1rem; width: 100%; max-width: 28rem; overflow: visible; }
.box-size-rail { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; width: 100%; padding: 0; }
.box-size-rail::-webkit-scrollbar { display: none; }
.box-size-slide { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0; }
.box-size-caption { display: block; text-align: center; margin: 0; padding-block: .5rem; font: 600 1rem 'DM Sans',sans-serif; color: var(--plum); }
.box-size-stage { display: flex; align-items: center; justify-content: center; padding: 0; width: 100%; }
.box-size-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; padding: 0; }
.box-size-nav p { margin: 0; text-align: center; font: .75rem 'DM Sans',sans-serif; color: var(--text-muted); }
.box-size-arrow { width: 2.75rem; min-height: 2.75rem; flex: 0 0 2.75rem; border: 1px solid var(--linen); border-radius: 50%; background: var(--cream); color: var(--plum); font: 1.15rem 'DM Sans',sans-serif; cursor: pointer; }
.box-size-arrow:disabled { opacity: .25; cursor: default; }
.box-size-arrow:focus-visible, .box-size-rail:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }
#boxBuilder .box-size-stage .box-visual, .box-size-stage .box-visual { position: relative; top: auto; padding: 1.75rem .5rem 1.25rem; margin: 0; width: 100%; max-width: 22rem; align-self: center; }
#boxBuilder .box-size-stage .box-container, .box-size-stage .box-container { display: block; width: 100%; padding: 2rem 1.5rem 1.5rem; margin: 0; box-sizing: border-box; }
.box-size-stage .box-container::after, .container-preview.box-container::after { content: 'Glaze'; min-width: 0; width: auto; top: -.65rem; padding: .45rem 1.4rem; font-size: 1.1rem; }
.box-size-stage .box-container::before { top: 1rem; right: .65rem; left: .65rem; bottom: .65rem; }
#boxBuilder .box-size-stage .box-grid, .box-size-stage .box-grid { width: 100%; max-width: none; margin: 0; gap: .6rem; }
#boxBuilder .box-size-stage .box-grid.grid-2, #boxBuilder .box-size-stage .box-grid.grid-4, .box-size-stage .box-grid.grid-2, .box-size-stage .box-grid.grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.box-size-stage .box-grid.grid-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.box-size-stage .box-grid.grid-12 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.box-size-stage .roll-slot { width: 100%; height: auto; min-height: 0; min-width: 0; padding: 0; aspect-ratio: 1; box-sizing: border-box; animation: none; }
.box-size-stage .box-complete-badge { display: none !important; }
.savory-world .box-size-stage .box-container { border-radius: .55rem; }
.savory-world .box-size-stage .box-container::before { border-radius: .3rem; }
#boxBuilder .builder-content { display: block; }
#boxBuilder .builder-header, .savory-world .builder-header { border-top: 0; padding-top: 0; }
#matchaSection .box-size-carousel { order: -2; }
#matchaSection > .builder-header { order: -1; }
#matchaSection .mx-stage, #matchaSection #matchaStartCup, #matchaSection #matchaLine { display: none !important; }
#matchaSection .mx-visual::after { display: none; }
#matchaBuildBlock { display: block; }
.box-size-stage .cup-box .box-container { border-color: var(--honey-gold); }
.box-size-stage .cup-tray { display: grid; gap: .6rem; grid-template-columns: repeat(2,minmax(0,1fr)); background: var(--plum); }
.box-size-stage .cup-tray.tray-1 { grid-template-columns: 1fr; max-width: 10rem; margin-inline: auto; }
.box-size-stage .cup-tray.tray-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.box-size-stage .cup-tray.tray-12 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.box-size-stage .cup-box .grid-1 { width: 5rem !important; margin: auto !important; }
.box-size-stage .cup-box:has(.grid-1) { max-width: 11rem; }
.box-size-stage .mx-slot { height: auto; position: relative; z-index: 1; width: 100%; min-width: 0; min-height: 0; aspect-ratio: .7; border: 0; padding: 0; background: none; }
.box-size-stage .empty-cup { border: 2px dashed var(--honey-gold); border-radius: .5rem .5rem 1rem 1rem; aspect-ratio: .7; background: var(--cream); box-shadow: inset 0 0 .75rem var(--linen); opacity: .7; }
.box-size-stage .mx-select { width: 100%; height: 100%; padding: 0; min-height: 0; background: none; }
.box-size-stage .mx-slot svg { width: 100%; height: 100%; max-height: none; }
#boxBuilder .box-grid .roll-slot { overflow: hidden; }
@media(min-width:641px) { .box-size-carousel { max-width: 24rem; } }

.box-size-stage .roll-slot .roll-svg { width: calc(100% - .5rem); height: calc(100% - .5rem); max-width: none; max-height: none; }
.box-size-stage .box-visual::after { display: none; }
#matchaSection .box-size-stage .mx-visual { padding: 1.75rem .5rem 1.25rem !important; }
#matchaSection .box-size-stage #matchaTray { padding: 2rem 1.5rem 1.5rem !important; overflow: visible; }
#matchaSection #matchaSubheading, #matchaBuildBlock .flavor-picker > .picker-label { display: none; }
#matchaSection .box-size-stage .empty-cup { height: auto; background: var(--cream); border: 2px dashed var(--honey-gold); }

/* Order review: actual selections, one set of actions, and a quiet empty state. */
#order { background: var(--cream); padding-block: 2.5rem; }
#order > .section-inner > .section-subtitle { margin-bottom: 1.5rem; }
#order .order-container { gap: 1.5rem; }
#order .cart-section { background: var(--white); border: 1px solid var(--linen); border-radius: var(--radius); padding: 1.25rem; }
#order .cart-section > .order-step-label { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
#order .cart-section .order-step-title { font-size: 1.15rem; }
#clearCartBtn { margin-left: auto; border: 1px solid var(--linen); background: var(--white); padding: .5rem .75rem; border-radius: .6rem; font-size: .75rem; color: var(--text-muted); }
#clearCartBtn[hidden], #order .order-step-label[hidden], #cartItems [hidden], #orderBoxPreview[hidden] { display: none !important; }
#orderBoxPreview .container-lineup { display: grid; grid-template-columns: 1fr; gap: 1rem; overflow: visible; padding: 0; }
#orderBoxPreview .composition-box { width: auto; min-width: 0; padding: 1rem; border: 1px solid var(--linen); border-radius: var(--radius); background: var(--cream); }
.container-title { margin: 0; color: var(--plum); font: 600 1rem 'DM Sans',sans-serif; }
#orderBoxPreview .container-preview { max-width: 16rem; margin: 1.75rem auto 1rem; min-height: 0; }
#orderBoxPreview .container-slot { pointer-events: none; cursor: default; }
#orderBoxPreview .container-progress { min-height: 0; margin-top: .5rem; font-weight: 600; color: var(--plum); font-size: .8rem; }
.container-contents { margin: .5rem 0 .75rem; font-size: .75rem; line-height: 1.6; color: var(--text-muted); }
.container-actions { display: flex; gap: .5rem; }
.container-edit, .container-remove { min-height: 2.75rem; border: 1px solid var(--linen); background: var(--white); border-radius: .6rem; padding: .5rem 1rem; font: 600 .8rem 'DM Sans',sans-serif; text-decoration: none; color: var(--plum); cursor: pointer; }
.container-remove { color: var(--text-muted); }
#cartEmpty { padding: 1.5rem .25rem; text-align: center; }
#cartEmpty .cart-empty-title { font-size: 1.4rem; }
#cartEmpty .cart-empty-sub { font-size: .85rem; margin: .5rem 0 1rem; }
#cartEmpty .cart-empty-cta { display: inline-flex; align-items: center; min-height: 2.75rem; background: var(--plum); color: var(--white); border: 0; border-radius: .65rem; padding: .6rem 1.2rem; font-size: .85rem; text-decoration: none; }
#order .cart-total { font-size: 1.05rem; }
.field-optional { color: var(--text-muted); font-size: .75rem; font-weight: 400; margin-left: .3rem; }
.early-matcha-request { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--plum); font-weight: 600; text-decoration: none; }
.early-matcha-note { display: block; font-size: .75rem; }

/* Flavor cards and the tray use the same cup illustrations. */
#matchaSection #matchaMilkRow { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
#matchaSection #matchaMilkRow .mx-win { min-height: 2.75rem; border-radius: .65rem; }
#matchaSection .mx-add { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
#matchaSection .mx-btn { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .2rem; padding: .65rem; text-align: center; border-radius: .85rem; }
#matchaSection .mx-btn .mx-mini { width: 3.6rem; height: 5.2rem; }
#matchaSection .mx-btn .mx-mini svg { height: 100%; width: 100%; }
#matchaSection .mx-btn b { font-size: .8rem; line-height: 1.35; }
#matchaSection .mx-btn small { font-size: .8rem; color: var(--text-muted); }
#matchaSection .mx-btn:disabled { opacity: .45; }
#matchaAddRow .mx-add-prompt, #matchaAddRow .mx-cancel { grid-column: 1/-1; }
.box-size-stage .empty-cup, #matchaSection .box-size-stage .empty-cup { display: grid; place-items: center; border: 0; border-radius: 0; box-shadow: none; background: transparent; opacity: .85; }
.box-size-stage .empty-cup svg { display: block; width: 100%; height: 100%; }
#matchaSection .cup-tray .mx-slot.filled { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.box-size-stage .box-container { box-shadow: inset 0 .2rem .4rem var(--linen), 0 .35rem .65rem var(--linen); }

/* Wheel rows snap into a fixed center band, with keyboard and tap equivalents. */
.pickup-wheel-shell { position: relative; border: 1px solid var(--linen); border-radius: .85rem; background: var(--white); overflow: hidden; margin: .5rem 0 .75rem; }
.pickup-wheel-shell::after { content: ''; position: absolute; top: 50%; left: .5rem; right: .5rem; height: 3rem; transform: translateY(-50%); border-block: 1px solid var(--honey-gold); background: color-mix(in srgb, var(--honey-gold) 8%, transparent); border-radius: .4rem; pointer-events: none; }
#dateCardsScroll.pickup-wheel, #matchaDayRow.pickup-wheel, #matchaWindowRow.pickup-wheel { position: relative; display: block !important; height: 9rem; max-height: 9rem; overflow-y: auto; overflow-x: hidden; padding: 3rem .75rem !important; margin: 0; gap: 0; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; mask-image: linear-gradient(transparent,black 28%,black 72%,transparent); }
.pickup-wheel::-webkit-scrollbar { display: none; }
#dateCardsScroll.pickup-wheel > button, #matchaDayRow.pickup-wheel > button, #matchaWindowRow.pickup-wheel > button { display: flex; align-items: center; justify-content: center; gap: .5rem; flex: none; width: 100%; min-width: 0; max-width: none; height: 3rem; min-height: 3rem; padding: .5rem !important; margin: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; transform: none !important; scroll-snap-align: center; color: var(--text-muted); font: 400 .95rem 'DM Sans',sans-serif; }
.pickup-wheel > button[aria-selected="true"] { font-weight: 700 !important; color: var(--plum) !important; }
.pickup-wheel > button:disabled { opacity: .45; }
#dateCardsScroll.pickup-wheel .dc-day, #dateCardsScroll.pickup-wheel .dc-num, #dateCardsScroll.pickup-wheel .dc-mon, #matchaDayRow.pickup-wheel .d-dow, #matchaDayRow.pickup-wheel .d-num { font: inherit; margin: 0; color: inherit; text-transform: none; letter-spacing: normal; }
#dateCardsScroll.pickup-wheel > button > div:not([class]), #dateCardsScroll.pickup-wheel .date-badge-full, #dateCardsScroll.pickup-wheel .date-card-status { display: none; }
#matchaDayRow.pickup-wheel .d-left { font-size: .65rem; margin: 0; }
.pickup-wheel > button:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }
#order .date-scroll-wrap { margin: 0; }
@media(max-width:640px) { #order .cart-section { position: static; padding: 1rem; } #order .section-title { font-size: 2rem; } }
#orderBoxPreview .container-preview.many-slots { grid-template-columns: repeat(4,minmax(0,1fr)); }
#orderBoxPreview .container-slot { aspect-ratio: 1; min-height: 0; min-width: 0; height: auto; }
#orderBoxPreview .cup-preview .container-slot { aspect-ratio: .7; border: 0; background: transparent; border-radius: 0; }
#orderBoxPreview .cup-preview .container-slot svg { max-height: none; height: 100%; }
#orderBoxPreview .container-preview { box-shadow: inset 0 .15rem .25rem var(--linen), 0 .2rem .6rem var(--linen); }
.pickup-wheel .date-card::after, .pickup-wheel .date-card::before { display: none; }
#matchaSection > .builder-header { display: none; }
#matchaAddRow .mx-add-prompt { grid-column: 1/-1; font-size: .85rem; color: var(--plum); text-align: left; }
.early-matcha-request { border: 1px solid var(--linen); background: var(--white); border-radius: .6rem; padding: .45rem .65rem; margin-block: .6rem .35rem; font-size: .78rem; }

#orderBoxPreview .cup-preview.single-cup { grid-template-columns: 1fr; width: 7rem; }
#orderBoxPreview .cup-preview.two-column { max-width: 12rem; }
/* A shared flavor list, with each recipe packed in its own box. */
#productBuilderTabs [hidden], #savoryBuilderPanel { display: none !important; }
#productBuilderTabs .om-grid { display: flex; justify-content: flex-end; }
#productBuilderTabs .om-btn { flex: none; width: auto; min-height: 2.75rem; padding: .55rem .9rem; background: var(--cream); border: 1px solid var(--linen); border-radius: .6rem; font-size: .8rem; }
#boxBuilder .box-size-carousel[hidden], .active-box-nav[hidden], .cinnamon-discount[hidden], .shared-savory-dips[hidden] { display: none !important; }
.active-box-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0; margin-bottom: .75rem; }
.active-box-choice { min-height: 2.75rem; padding: .5rem .8rem; border: 1px solid var(--linen); border-radius: .6rem; background: var(--white); color: var(--plum); font: 600 .78rem 'DM Sans',sans-serif; }
.active-box-choice[aria-pressed=true] { border-color: var(--honey-gold-dark); background: var(--cream); }
.shared-savory-flavors { width: 100%; padding: 0 0 1.25rem !important; margin-bottom: 1rem; border-bottom: 1px solid var(--linen); }
.shared-savory-flavors h4 { font: 400 1.45rem 'Recoleta',Georgia,serif; font-variant-ligatures: none; color: var(--plum); margin: 0 0 .45rem; }
.shared-savory-flavors > p { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin: .35rem 0 .75rem; }
.shared-savory-list { padding: 0; display: grid; gap: .5rem; }
.shared-savory-list .flavor-btn { width: 100%; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .7rem; text-align: left; }
.shared-savory-list .flavor-art { width: 3rem; height: 3rem; flex: 0 0 3rem; margin: 0; }
.shared-savory-list .flavor-info { flex: 1; padding: 0; min-width: 0; }
.shared-savory-list .flavor-name { display: block; font-size: .88rem; line-height: 1.35; }
.shared-savory-list .flavor-short-desc { display: block; font-size: .72rem; margin-top: .3rem; }
.savory-flavor-price { font-size: .8rem; font-weight: 700; color: var(--plum); }
.shared-halal-option { display: flex; gap: .65rem; align-items: center; min-height: 2.75rem; font-size: .75rem; line-height: 1.5; margin-top: .5rem; color: var(--ink); cursor: pointer; }
.shared-halal-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--honey-gold-dark); flex: none; }
.shared-savory-status:empty { display: none; }
.shared-savory-dips { padding: .75rem 0 0 !important; }
.shared-savory-dips h5 { font: 600 .9rem 'DM Sans',sans-serif; margin: 0 0 .5rem; color: var(--plum); }
.shared-savory-dips p { font-size: .75rem; line-height: 1.5; color: var(--text-muted); margin-block: .5rem; }
.shared-dip-choices { display: flex; gap: .5rem; padding: 0; }
.shared-dip-choice { flex: 1; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--linen); background: var(--white); color: var(--ink); border-radius: .6rem; font: 500 .75rem 'DM Sans',sans-serif; }
.shared-dip-choice[aria-pressed=true] { border-color: var(--honey-gold-dark); background: var(--cream); }
.shared-dip-extras { padding: 0; }
.shared-dip-row { padding: .3rem 0; display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--ink); }
.shared-dip-row > span { flex: 1; }
.shared-dip-row button { width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--linen); border-radius: .6rem; background: var(--white); color: var(--plum); font-size: 1rem; }
.shared-dip-row button:disabled { opacity: .35; }
.shared-dip-row output { min-width: 1rem; text-align: center; }
.savory-live-box .box-container { border-radius: .6rem; }
.savory-live-box .roll-slot { font: 1.5rem 'DM Sans',sans-serif; color: var(--gold-text); padding: .1rem; }
.savory-live-box .roll-slot.filled .roll-svg { animation: rollDrop .35s ease both; }
#boxBuilder.editing-savory .builder-header, #boxBuilder.editing-savory .quick-fill-row, #boxBuilder.editing-savory #quickFillBtn { display: none !important; }
.cinnamon-discount { max-width: 28rem; padding: .75rem 0 !important; margin: 0 auto 1rem; border-block: 1px solid var(--linen); }
.cinnamon-discount p { font-size: .75rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.discount-size { min-height: 2.75rem; margin-top: .5rem; padding: .5rem .85rem; border: 1px solid var(--honey-gold-dark); border-radius: .6rem; color: var(--plum); background: var(--cream); font: 600 .75rem 'DM Sans',sans-serif; }
@media(prefers-reduced-motion:reduce) { .savory-live-box .roll-slot.filled .roll-svg { animation: none; } }
#dateCardsScroll.pickup-wheel > button[hidden] { display: none !important; }

.box-size-rail { touch-action: pan-y; cursor: grab; scroll-behavior: auto; }
.box-size-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.box-size-nav { border: 1px solid var(--honey-gold); border-radius: 2rem; padding: .25rem; background: var(--cream); box-shadow: 0 0 1rem color-mix(in srgb,var(--honey-gold) 22%,transparent); }
.box-size-nav p { position: relative; overflow: hidden; padding: .65rem .2rem; color: var(--ink); font-weight: 600; }
.box-size-nav p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.85) 50%,transparent 75%); transform: translateX(-130%); animation: swipe-shine 4s ease-in-out infinite; pointer-events: none; }
.box-size-arrow { background: var(--honey-gold-light); border-color: transparent; }
@keyframes swipe-shine { 45%,100% { transform: translateX(130%); } }
@media(prefers-reduced-motion:reduce) { .box-size-nav p::after { animation: none; display: none; } }

#boxBuilder .box-visual[hidden] { display: none !important; }