/* Design Your Own studio and bubble wrap add-ons — My Little Cashier */
#page-design .mlc-design-hero{background:linear-gradient(120deg,#ffe0efed,#fff3fbed,#e8fff6e8)}
.mlc-design-hero-emoji{font-size:clamp(34px,5vw,64px)}
.mlc-design-layout{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);gap:16px;align-items:start}
.mlc-design-controls,.mlc-design-workspace{min-width:0;display:flex;flex-direction:column;gap:14px}
.mlc-design-control-title{font-weight:1000;font-size:19px;color:#a34275}
.mlc-design-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mlc-design-mode button{border:1px solid #ffc6e0;border-radius:14px;background:#fff1f8;color:#a34976;padding:12px 10px;font-weight:900}
.mlc-design-mode button.active{background:linear-gradient(125deg,#ee64a5,#f28cbd);color:white;border-color:#e6529e;box-shadow:0 3px 0 #c94783}
.mlc-design-label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:900;color:#89506d;margin:0}
.mlc-design-label input:not([type=color]):not([type=range]),.mlc-design-label textarea{background:#fffafd;border:1.5px solid #efd0df;border-radius:13px;width:100%;padding:11px 12px;line-height:1.35;color:#69435a;outline:none;resize:vertical}
.mlc-design-label input:focus,.mlc-design-label textarea:focus{border-color:#ef83b8;box-shadow:0 0 0 3px #ffcee250}
.mlc-design-label input[type=color]{height:45px;max-width:125px;width:100%;background:#fff6fb;border:1px solid #f7c6df;border-radius:12px;padding:5px;cursor:pointer}
.mlc-design-label input[type=range]{accent-color:#ec5f9d;max-width:100%}
.mlc-design-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.mlc-design-stickers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.mlc-design-stickers button{min-height:44px;border-radius:13px;background:#fff6fb;border:1px solid #f6d0e2;font-size:24px;padding:5px;display:grid;place-items:center}
.mlc-design-stickers button:hover{transform:translateY(-2px);background:#ffe4f1}
.mlc-design-small-btn{border:1px solid #efcddd;background:#fff4f9;color:#a34575;border-radius:13px;min-height:44px;padding:9px;font-weight:900;font-size:12px}
.mlc-design-uploads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mlc-design-uploads label{border:1.5px dashed #efa3c9;border-radius:14px;background:#fff7fa;color:#a04476;padding:12px 8px;font-weight:900;font-size:12px;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.mlc-design-uploads input{display:block;width:100%;min-width:0;margin-top:8px;font-weight:500;font-size:11px;color:#98506f}
.mlc-design-hint{color:#9c7086;font-size:12px;line-height:1.5;margin:0}
.mlc-design-topline{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mlc-design-topline h3{color:#87415e}
.mlc-design-topline span{border-radius:99px;background:#fff1f8;color:#a6507c;font-size:11px;font-weight:900;padding:8px 12px;border:1px solid #f7d6e6}
.mlc-design-canvas-wrap{display:grid;place-items:center;padding:clamp(12px,2.4vw,23px);border:2px dashed #f2b6d3;border-radius:20px;background-color:#fff8fc;background-image:linear-gradient(45deg,#f9e5ed 25%,transparent 25%),linear-gradient(-45deg,#f9e5ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f9e5ed 75%),linear-gradient(-45deg,transparent 75%,#f9e5ed 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
#mlcDesignCanvas{display:block;width:min(100%,520px);height:auto;max-height:58vh;object-fit:contain;border-radius:13px;box-shadow:0 12px 24px #b34c7b27;touch-action:none;cursor:grab;background:#fff}
#mlcDesignCanvas:active{cursor:grabbing}
.mlc-design-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mlc-design-actions button{background:#ffedf6;color:#9d3d73;border:1px solid #f1b9d4;border-radius:13px;font-weight:900;font-size:13px;padding:12px 9px;min-width:0}
.mlc-design-actions button.mlc-design-primary{background:linear-gradient(125deg,#ed5e9f,#ff93c1);color:white;border-color:#e6529e;box-shadow:0 3px 0 #cf538e}
.mlc-design-saved{border-top:1px dashed #f4bdd5;padding-top:14px;display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:start}
.mlc-design-saved h3{font-size:16px;color:#9f4673;margin:0 0 6px}.mlc-design-saved p{font-size:11px;color:#a2768d;margin:0}
.mlc-design-saved-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mlc-design-saved-box{background:#fff6fb;border:1px solid #f3d0e1;border-radius:15px;padding:9px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#8d4d70;font-size:11px;font-weight:900;min-width:0}
.mlc-design-saved-box img{width:100%;height:90px;object-fit:contain;display:none}
.mlc-design-saved-box small{color:#9d7186;font-size:10px;font-weight:700}
/* Bubble overlays go above products but under personalised card and seal */
.packing-bubble-wrap{position:absolute;z-index:5;pointer-events:none;left:17%;top:37%;width:68%;height:52%;object-fit:fill;opacity:0;transform:scale(.88) rotate(-2deg);transition:opacity .25s,transform .35s;filter:drop-shadow(0 2px 5px #6663);border-radius:7px}
.packing-box-stage.has-bubble-wrap .packing-bubble-wrap{opacity:.84;transform:scale(1) rotate(0deg)}
.packing-box-stage.is-sealed .packing-bubble-wrap{opacity:.22}
.mlc-custom-card-pack,.mlc-custom-sticker-pack{position:absolute;display:none;z-index:6;pointer-events:none;object-fit:contain;filter:drop-shadow(0 5px 4px #77425544);transform:rotate(-8deg);max-height:125px;max-width:125px}
.mlc-custom-card-pack{width:32%;height:30%;top:49%;right:14%}
.mlc-custom-sticker-pack{width:20%;height:21%;top:40%;left:18%;transform:rotate(10deg)}
.packing-box-stage.has-custom-card .mlc-custom-card-pack,.packing-box-stage.has-custom-sticker .mlc-custom-sticker-pack{display:block;animation:mlcDesignDrop .28s ease-out both}
.packing-box-stage.is-sealed .mlc-custom-card-pack,.packing-box-stage.is-sealed .mlc-custom-sticker-pack{opacity:.1}
@keyframes mlcDesignDrop{from{opacity:0;translate:0 -16px;scale:.78}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:980px){.mlc-design-layout{grid-template-columns:1fr}.mlc-design-controls{order:2}.mlc-design-workspace{order:1}}
@media(max-width:600px){.mlc-design-layout{gap:10px}.mlc-design-controls,.mlc-design-workspace{gap:11px;padding:12px!important}.mlc-design-stickers{grid-template-columns:repeat(4,minmax(0,1fr))}.mlc-design-uploads{grid-template-columns:1fr}.mlc-design-saved{grid-template-columns:1fr}.mlc-design-actions button{font-size:12px;padding:11px 7px}.mlc-design-hero-emoji{display:none}}
@media(prefers-reduced-motion:reduce){.packing-box-stage.has-bubble-wrap .packing-bubble-wrap,.packing-box-stage.has-custom-card .mlc-custom-card-pack,.packing-box-stage.has-custom-sticker .mlc-custom-sticker-pack{animation:none;transition:none}}
/* Keep all fields and touch controls within narrow phone viewports. */
#page-design,#page-design *{box-sizing:border-box}
.mlc-design-topline{flex-wrap:wrap}
.mlc-design-topline span{max-width:100%;white-space:normal}

/* Custom jewel-pink clipart collection: accessible image buttons, not emoji stickers. */
.mlc-design-stickers.mlc-design-picture-stickers {grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.mlc-design-picture-stickers .mlc-clipart-choice {display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:space-between;min-width:0;min-height:100px;padding:6px 4px;border:1.5px solid #f7c4da;border-radius:13px;background:linear-gradient(160deg,#fff8fc,#ffebf6);color:#924767;box-shadow:0 3px 8px #ee8ab121;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;font-size:12px}
.mlc-design-picture-stickers .mlc-clipart-choice img {display:block;width:100%;max-width:88px;height:75px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #c76d9926)}
.mlc-design-picture-stickers .mlc-clipart-choice span {font-size:11px;line-height:1.18;letter-spacing:0;min-height:26px;font-weight:800;text-align:center;overflow-wrap:anywhere}
.mlc-design-picture-stickers .mlc-clipart-choice:is(:hover,:focus-visible) {transform:translateY(-2px);border-color:#f085af;background:#ffe8f2;box-shadow:0 4px 12px #ed70a548}
.mlc-design-picture-stickers .mlc-clipart-choice:active {transform:translateY(1px)}
@media(max-width:420px){.mlc-design-stickers.mlc-design-picture-stickers{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mlc-design-picture-stickers .mlc-clipart-choice{min-height:94px}}
@media(prefers-reduced-motion:reduce){.mlc-design-picture-stickers .mlc-clipart-choice{transition:none}}