/* Professional/mobile-first packing UX. Overrides older broad packing selectors only here. */
html body #page-pos{--pro-stroke:#f0bdd4;--pro-ink:#774362;--pro-hot:#e84b96}
/* Soft focus behind the gameplay while retaining the illustrated shop atmosphere. */
html body:has(#page-pos.active)::before{
 background:linear-gradient(130deg,rgba(255,245,250,.67),rgba(255,249,252,.72)),url('./assets/my-little-cashier-background.webp') center/cover fixed no-repeat!important;
}
/* Five small useful clickable checkpoints, not an extra tall hero. */
html body #page-pos #packingStation>.mlc-pro-stepper{
 width:100%;border:1px solid var(--pro-stroke);border-radius:16px;
 background:rgba(255,251,253,.97);padding:10px 12px;
 box-shadow:0 5px 16px #b7467511;
}
html body #page-pos .mlc-pro-stepheader{
 display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;
 font-size:clamp(13px,1.1vw,17px);color:var(--pro-ink);margin-bottom:9px;
}
html body #page-pos #mlcProStepSummary{font-size:clamp(12px,1vw,15px);color:#a65c82}
html body #page-pos .mlc-pro-steplist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;min-width:0}
html body #page-pos .mlc-pro-step{
 border:1px solid #f0d2e0!important;border-radius:12px!important;
 padding:6px 2px!important;min-width:0!important;min-height:49px!important;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 background:#fff3f9!important;color:#945878!important;box-shadow:none!important;
 font-size:clamp(11px,1vw,14px)!important;font-weight:850;line-height:1.1;
}
html body #page-pos .mlc-pro-stepicon{font-size:18px;line-height:1.15}
html body #page-pos .mlc-pro-step.is-done{background:#e8f7ee!important;color:#307a53!important;border-color:#b2dfc3!important}
html body #page-pos .mlc-pro-step.is-current{background:#ffdbeb!important;color:#a22b69!important;border-color:#ef90b9!important;box-shadow:inset 0 0 0 1px #ef90b9!important}
html body #page-pos .mlc-pro-step:focus-visible,
html body #page-pos .mlc-pro-tab:focus-visible{outline:3px solid #e74b93;outline-offset:2px}
/* The 12+ original buttons are now organized in three small, switchable panes. */
html body #page-pos #packingStation>.packing-options.mlc-pro-tools{
 display:block!important;grid-template-columns:none!important;grid-column:auto!important;
 width:100%;min-width:0;margin:0!important;padding:12px!important;
 border:1px solid var(--pro-stroke)!important;border-radius:17px!important;
 background:rgba(255,250,252,.97)!important;box-shadow:0 6px 18px #b7467510;
}
html body #page-pos .mlc-pro-tools-title{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;color:#873c68;font-size:clamp(15px,1.3vw,20px);margin-bottom:9px}
html body #page-pos .mlc-pro-tools-title span{font-size:clamp(12px,1vw,15px);color:#a9698c}
html body #page-pos .mlc-pro-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}
html body #page-pos #packingStation .mlc-pro-tab{
 background:#fff4f9!important;color:#945577!important;border:1px solid #edc1d6!important;
 border-radius:12px!important;padding:9px 4px!important;
 min-height:45px!important;box-shadow:none!important;
 font-size:clamp(12px,1vw,17px)!important;line-height:1.15!important;
 white-space:nowrap!important;overflow-wrap:normal!important;
}
html body #page-pos #packingStation .mlc-pro-tab.is-active{
 background:linear-gradient(110deg,#f45e9d,#ed76ae)!important;
 color:white!important;border-color:#df5595!important;box-shadow:0 3px 0 #d96c9e44!important;
}
html body #page-pos #packingStation .mlc-pro-pane{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
 min-width:0;
}
html body #page-pos #packingStation .mlc-pro-pane[hidden]{display:none!important}
html body #page-pos #packingStation .mlc-pro-pane>button:not(.mlc-pro-tab){
 min-height:48px!important;padding:10px 8px!important;
 font-size:clamp(13px,1.1vw,17px)!important;line-height:1.17!important;
 border:1px solid #f0bdd4!important;border-radius:12px!important;
 background:#ffedf5!important;color:#91456b!important;
 box-shadow:0 2px 0 #e8b1cb!important;
 white-space:normal!important;overflow-wrap:anywhere!important;
}
html body #page-pos #packingStation .mlc-pro-pane>button.is-added{background:#e7f8ed!important;border-color:#afdfc1!important;color:#256b48!important}
html body #page-pos #packingStation .mlc-pro-pane>.packing-single-size,
html body #page-pos #packingStation .mlc-pro-pane>label:has(#shippingAddressInput),
html body #page-pos #packingStation .mlc-pro-pane>.mlc-free-gifts{grid-column:1/-1!important;min-width:0;margin:0!important}
html body #page-pos #packingStation .mlc-pro-pane>label:has(#shippingAddressInput){display:grid!important;gap:7px!important;background:#fff5fa;border:1px solid #f1c9da;border-radius:12px;padding:12px!important;color:#8a4b6e;font-size:15px}
html body #page-pos #packingStation #shippingAddressInput{width:100%;min-width:0;max-width:100%}
html body #page-pos #packingStation .mlc-pro-pane>#dispatchPackingButton{
 grid-column:1/-1!important;min-height:52px!important;color:white!important;
 background:linear-gradient(110deg,#fc70ad,#dd4389)!important;
 border-color:#dc5e98!important;font-weight:900;
}
html body #page-pos #packingStation .mlc-pro-pane>.mlc-free-gifts{padding:11px!important}
html body #page-pos #packingStation .mlc-free-gift-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html body #page-pos #packingStation .mlc-free-gifts h4{font-size:clamp(20px,1.9vw,25px)}
html body #page-pos #packingStation .mlc-free-gifts p{font-size:clamp(14px,1.25vw,18px);line-height:1.3}
html body #page-pos #packingStation .mlc-free-gift-card span{font-size:clamp(13px,1.05vw,17px)}
html body #page-pos #packingStation .mlc-free-gift-card img{height:67px}
html body #page-pos #packingStation .mlc-free-gift-footer{font-size:clamp(13px,1.1vw,16px)}
html body #page-pos #packingStation .packing-tools{min-height:45px!important;padding:9px 12px!important;border:1px solid var(--pro-stroke)!important;border-radius:14px!important;background:rgba(255,251,253,.96)!important;}
html body #page-pos #packingStation>.packing-tools #packingStatus{font-size:clamp(13px,1.2vw,17px)!important;line-height:1.25!important;flex:1 1 155px;min-width:0}
html body #page-pos #packingStation>.packing-tools .secondary-btn{font-size:clamp(12px,1vw,15px)!important;padding:7px 10px!important;min-height:36px!important;line-height:1.2!important;flex:0 0 auto;max-width:100%;}
/* High-priority tablet layout: fill width and avoid the narrow packing panel with a large empty side. */
@media (min-width:800px) and (max-width:1179px){
 html body #page-pos .pos-grid.mlc-responsive-pos-grid{grid-template-columns:minmax(220px,.7fr) minmax(0,1.5fr)!important;width:100%!important}
 html body #page-pos #packingStation>.packing-box-stage{max-width:none!important;aspect-ratio:1.24 / 1!important}
 html body #page-pos #packingStation{align-items:stretch!important}
}
@media (min-width:1180px){
 html body #page-pos .pos-grid.mlc-responsive-pos-grid{grid-template-columns:minmax(240px,.8fr) minmax(385px,1.45fr) minmax(290px,.85fr)!important}
 html body #page-pos #packingStation>.packing-box-stage{aspect-ratio:1.23/1!important}
}
@media(max-width:799px){
 html body #page-pos #packingStation>.packing-box-stage{max-width:600px!important}
 html body #page-pos .mlc-pro-stepheader{font-size:16px}
 html body #page-pos .mlc-pro-step{min-height:48px!important}
}
@media(max-width:460px){
 html body #page-pos #packingStation>.packing-options.mlc-pro-tools{padding:10px!important}
 html body #page-pos .mlc-pro-tabs{gap:5px}
 html body #page-pos #packingStation .mlc-pro-tab{font-size:12px!important;padding:8px 2px!important}
 html body #page-pos .mlc-pro-step{font-size:11px!important;padding:5px 2px!important}
 html body #page-pos #packingStation .mlc-free-gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 html body #page-pos #packingStation .mlc-pro-pane>button:not(.mlc-pro-tab){font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){html body #page-pos .mlc-pro-step,html body #page-pos .mlc-pro-tab{transition:none!important}}