/* Bento cake designer: preview beside controls on desktop, preview on top + bottom price bar on phones. */
.bd-page{--bd-ivory:#fdf8f2;--bd-plum:#4f3163;--bd-purple:#7d52a8;--bd-purple-dark:#653f8c;--bd-ink:#3a2840;--bd-muted:#78658a;--bd-line:#ebe2f0;--bd-soft:#f4edf9;
  background:var(--bd-ivory);color:var(--bd-ink);font-family:'DM Sans',sans-serif}
.bd-wrap{max-width:1280px;margin:0 auto;padding:88px 24px 40px}
.bd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bd-back{border:0;background:none;color:var(--bd-plum);font:600 .9rem 'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;padding:8px 6px;cursor:pointer;min-height:44px}
.bd-head h1{font:600 clamp(1.3rem,2.4vw,1.8rem) 'DM Sans',sans-serif;color:var(--bd-plum);margin:0;flex:1;letter-spacing:-.01em}
.bd-tools{display:flex;gap:6px}
.bd-tool{border:1px solid var(--bd-line);background:#fff;color:var(--bd-plum);border-radius:10px;min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 .82rem 'DM Sans',sans-serif;cursor:pointer}
.bd-tool:disabled{opacity:.4;cursor:not-allowed}
.bd-tool .ui-icon{width:18px;height:18px}
.bd-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:22px;align-items:start}
.bd-stage{position:sticky;top:86px;background:#fff;border:1px solid var(--bd-line);border-radius:20px;overflow:hidden}
.bd-canvas-box{position:relative;aspect-ratio:1/1;max-height:calc(100vh - 170px);width:100%;background:radial-gradient(circle at 50% 42%,#fff 0,#f6eefb 70%);touch-action:none;cursor:grab}
.bd-canvas-box:active{cursor:grabbing}
.bd-canvas-box canvas{display:block;width:100%!important;height:100%!important;outline:none}
.bd-canvas-box canvas:focus-visible{outline:3px solid #9a76bc;outline-offset:-3px}
.bd-skeleton{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.bd-skeleton span{width:46%;aspect-ratio:1/.62;border-radius:50%/34%;background:#eee6f3;position:relative;overflow:hidden}
.bd-skeleton span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff9,transparent);animation:ui-shimmer 1.3s ease-in-out infinite}
.bd-topview{position:absolute;inset:0;display:grid;place-items:center;padding:8%}
.bd-topview svg{width:100%;height:100%;max-width:520px}
.bd-stage-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--bd-line);flex-wrap:wrap}
.bd-seg{display:inline-flex;background:var(--bd-soft);border-radius:999px;padding:3px}
.bd-seg button{border:0;background:none;border-radius:999px;padding:7px 16px;font:600 .82rem 'DM Sans',sans-serif;color:#7c6390;cursor:pointer;min-height:44px}
.bd-seg button[aria-pressed="true"]{background:#fff;color:var(--bd-plum);box-shadow:0 1px 3px rgba(70,40,90,.15)}
.bd-hint{font-size:.76rem;color:var(--bd-muted);margin:0;padding:0 12px 10px}
.bd-stage-msg{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--bd-line);border-radius:12px;padding:10px 12px;font-size:.84rem;color:var(--bd-ink)}

.bd-panel{background:#fff;border:1px solid var(--bd-line);border-radius:20px;display:flex;flex-direction:column;min-width:0}
.bd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px;border-bottom:1px solid var(--bd-line)}
.bd-step{border:0;background:none;border-radius:12px;padding:8px 4px;font:600 .8rem 'DM Sans',sans-serif;color:var(--bd-muted);cursor:pointer;display:grid;justify-items:center;gap:3px;min-height:52px}
.bd-step b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bd-soft);font-size:.75rem;color:var(--bd-plum)}
.bd-step[aria-selected="true"]{background:var(--bd-soft);color:var(--bd-plum)}
.bd-step[aria-selected="true"] b{background:var(--bd-purple);color:#fff}
.bd-body{padding:16px 18px 8px;min-height:360px}
.bd-group{border:0;margin:0 0 20px;padding:0;min-width:0}
.bd-group>legend,.bd-label{font:700 .8rem 'DM Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--bd-plum);margin-bottom:10px;padding:0;display:flex;justify-content:space-between;width:100%}
.bd-group>legend small,.bd-label small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--bd-muted)}
.bd-note{font-size:.8rem;color:var(--bd-muted);margin:-4px 0 10px}
.bd-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bd-card{border:1.5px solid var(--bd-line);background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer;display:grid;gap:2px;min-height:64px;font:inherit;color:inherit}
.bd-card strong{font-size:.95rem;color:var(--bd-plum)}
.bd-card span{font-size:.8rem;color:var(--bd-muted)}
.bd-card[aria-checked="true"],.bd-card[aria-pressed="true"]{border-color:var(--bd-purple);background:#faf5fe;box-shadow:0 0 0 3px rgba(125,82,168,.12)}
.bd-card:disabled{opacity:.45;cursor:not-allowed}
.bd-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.bd-swatch{width:100%;aspect-ratio:1;min-height:44px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d9cde3;cursor:pointer;position:relative;padding:0}
.bd-swatch[aria-checked="true"]{box-shadow:0 0 0 3px var(--bd-purple)}
.bd-swatch[aria-checked="true"]::after{content:"";position:absolute;inset:32% 30% 38%;border:solid #fff;border-width:0 0 3px 3px;transform:rotate(-45deg);filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.bd-swatch-name{font-size:.82rem;color:var(--bd-muted);margin:8px 0 0}
.bd-chips{display:flex;flex-wrap:wrap;gap:8px}
.bd-chip{border:1.5px solid var(--bd-line);background:#fff;border-radius:999px;padding:9px 14px;font:600 .84rem 'DM Sans',sans-serif;color:var(--bd-ink);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.bd-chip small{font-weight:500;color:var(--bd-muted)}
.bd-chip[aria-pressed="true"],.bd-chip[aria-checked="true"]{border-color:var(--bd-purple);background:#faf5fe;color:var(--bd-plum)}
.bd-chip:disabled{opacity:.45;cursor:not-allowed}
.bd-textarea{width:100%;border:1.5px solid #dccde8;border-radius:14px;padding:12px 14px;font:500 1.05rem/1.4 'DM Sans',sans-serif;color:var(--bd-ink);resize:none;min-height:96px;background:#fff}
.bd-textarea:focus{outline:none;border-color:var(--bd-purple);box-shadow:0 0 0 3px rgba(125,82,168,.15)}
.bd-counter{display:flex;justify-content:space-between;font-size:.78rem;color:var(--bd-muted);margin:6px 0 12px}
.bd-counter.is-over{color:#a73345}
.bd-input{border:1.5px solid #dccde8;border-radius:10px;padding:10px 12px;font:600 1rem 'DM Sans',sans-serif;width:120px;min-height:44px}
.bd-summary{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--bd-line);border-radius:14px}
.bd-summary li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bd-line);font-size:.9rem}
.bd-summary li:last-child{border-bottom:0}
.bd-summary li span:first-child{color:var(--bd-muted)}
.bd-summary li strong{text-align:right;color:var(--bd-ink);overflow-wrap:anywhere;white-space:pre-line}
.bd-qty{display:inline-flex;align-items:center;border:1px solid var(--bd-line);border-radius:12px;overflow:hidden}
.bd-qty button{border:0;background:#fff;width:44px;height:44px;font-size:1.2rem;color:var(--bd-plum);cursor:pointer}
.bd-qty output{min-width:40px;text-align:center;font-weight:700}
.bd-theme{border:1px dashed #d8c7e6;border-radius:14px;padding:12px 14px;font-size:.86rem;color:var(--bd-muted);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.bd-link{border:0;background:none;color:var(--bd-purple);font:700 .86rem 'DM Sans',sans-serif;cursor:pointer;padding:8px 0;min-height:44px}
.bd-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--bd-line);border-radius:0 0 20px 20px;padding:12px 16px;display:flex;align-items:center;gap:12px}
.bd-price{flex:1;min-width:0}
.bd-price strong{display:block;font:700 1.35rem 'DM Sans',sans-serif;color:var(--bd-plum)}
.bd-price span{font-size:.76rem;color:var(--bd-muted)}
.bd-price span.is-error{color:#a73345}
.bd-primary{border:0;border-radius:12px;background:var(--bd-purple);color:#fff;font:700 .98rem 'DM Sans',sans-serif;padding:0 20px;min-height:48px;cursor:pointer;white-space:nowrap}
.bd-primary:hover{background:var(--bd-purple-dark)}
.bd-primary:disabled{background:#d9cfe2;color:#8c7c99;cursor:not-allowed}
.bd-secondary{border:1px solid #d8c7e6;background:#fff;border-radius:12px;color:var(--bd-plum);font:600 .9rem 'DM Sans',sans-serif;padding:0 14px;min-height:48px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bd-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bd-preset{border:1.5px solid var(--bd-line);background:#fff;border-radius:14px;padding:10px 12px;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;font:inherit;color:inherit;min-height:64px}
.bd-preset:hover{border-color:#cdb6e3;background:#fcf8ff}
.bd-preset strong{font-size:.88rem;color:var(--bd-plum)}
.bd-preset>span:last-child{font-size:.74rem;color:var(--bd-muted);grid-column:2}
.bd-preset-cake{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--f);box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 0 0 3px var(--r),0 0 0 4px #e6dbef;display:grid;place-items:center}
.bd-preset-cake i{width:18px;height:4px;border-radius:3px;background:var(--l);box-shadow:0 6px 0 var(--l)}
.bd-swatch-group{font-size:.72rem;font-weight:700;color:var(--bd-muted);margin:10px 0 6px;letter-spacing:.03em}
.bd-swatch-group:first-child{margin-top:0}
.bd-swatch-name b{color:var(--bd-plum)}
.bd-warning{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff7e3;color:#6c4a09;border-radius:12px;padding:8px 12px;font-size:.84rem;margin-bottom:12px}
.bd-warning .ui-icon{width:18px;height:18px;flex:none}
.bd-warning span{flex:1;min-width:160px}
.bd-cams button{padding:7px 12px}
.bd-price{border:0;background:none;text-align:left;padding:4px 6px;margin:-4px -6px;border-radius:10px;cursor:pointer;font:inherit;color:inherit}
.bd-price:hover{background:var(--bd-soft)}
.bd-price span::after{content:" · details";color:var(--bd-purple);font-weight:600}
.bd-foot{position:relative}
.bd-breakdown{position:absolute;left:12px;bottom:calc(100% + 8px);width:min(340px,calc(100% - 24px));background:#fff;border:1px solid var(--bd-line);border-radius:16px;box-shadow:0 18px 40px rgba(60,30,80,.18);padding:14px 16px;z-index:30}
.bd-breakdown-title{font:700 .78rem 'DM Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--bd-plum);margin:0 0 8px}
.bd-breakdown ul{list-style:none;margin:0 0 8px;padding:0}
.bd-breakdown li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.88rem;border-bottom:1px dashed var(--bd-line)}
.bd-breakdown li.is-total{border-bottom:0;font-weight:700;color:var(--bd-plum);padding-top:8px}
.bd-breakdown .bd-note{margin:0}
@media (max-width:900px){.bd-breakdown{position:fixed;left:10px;right:10px;width:auto;bottom:calc(96px + env(safe-area-inset-bottom))}.bd-cams button{padding:7px 10px}}
@media (prefers-reduced-motion:reduce){.bd-price span::after{content:" · details"}}
/* Keep the site's chat bubble clear of the designer's price bar and Add to cart button. */
body[data-customer-page="bento"] #customer-chat-toggle,body[data-customer-page="bento"] .lcw-tray{bottom:92px!important}
.bd-cams[hidden],.bd-breakdown[hidden],.bd-topview[hidden],.bd-skeleton[hidden],.bd-stage-msg[hidden],.bd-foot [hidden],.bd-tool[hidden]{display:none!important}
.bd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cart-item-edit{border:0;background:none;color:#7d52a8;font:700 .78rem 'DM Sans',sans-serif;padding:4px 0;cursor:pointer;text-decoration:underline}
.pd-design{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 4px;border:1.5px dashed #c8b2dc;background:#faf5fe;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;color:#4f3163;min-height:56px}
.pd-design strong{display:block;font-size:.95rem}
.pd-design span{font-size:.8rem;color:#78658a}

@media (max-width:900px){
  body[data-customer-page="bento"] .customer-mobile-nav{display:none}
  .bd-wrap{padding:72px 0 0}
  .bd-head{padding:0 12px;margin-bottom:8px}
  .bd-head{flex-wrap:nowrap;gap:6px}
  .bd-head h1{font-size:1.1rem;white-space:nowrap}
  .bd-back .bd-back-text{display:none}
  body[data-customer-page="bento"] #customer-chat-toggle{display:none!important}
  .bd-tool span{display:none}
  .bd-layout{grid-template-columns:1fr;gap:0}
  .bd-stage{position:sticky;top:64px;z-index:5;border-radius:0;border-left:0;border-right:0}
  .bd-canvas-box{aspect-ratio:auto;height:min(34vh,300px)}
  .bd-stage-bar{padding:6px 10px}
  .bd-hint{display:none}
  .bd-panel{border-radius:0;border:0}
  .bd-body{padding:14px 14px 8px;min-height:0}
  .bd-foot{position:fixed;left:0;right:0;bottom:0;z-index:220;border-radius:0;padding:10px 14px max(10px,env(safe-area-inset-bottom));box-shadow:0 -8px 20px rgba(60,30,80,.08)}
  .bd-page.is-typing .bd-foot{display:none}
  .bd-panel{padding-bottom:84px}
  .bd-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){.bd-step{font-size:.72rem}.bd-primary{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.bd-skeleton span::after{animation:none}}

/* Packing animation + finish panel */
#page-bento.is-packing .bd-steps, #page-bento.is-packing .bd-foot, #page-bento.is-packing .bd-tools, #page-bento.is-packing .bd-stage-bar, #page-bento.is-packing .bd-hint { display: none; }
.bd-packed { display: grid; justify-items: center; gap: 10px; padding: 28px 8px; text-align: center; }
.bd-packed h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--plum, #5c3d6e); }
.bd-packed .bd-note { max-width: 36ch; margin: 0; }
.bd-packed-icon { font-size: 2.4rem; animation: bd-pop .5s ease-out; }
.bd-packed-price { margin: 4px 0 6px; font-size: .95rem; color: #5b4a66; }
.bd-packed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bd-packed-actions button { min-height: 44px; }
@keyframes bd-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bd-packed-icon { animation: none; } }

/* Tap-to-edit + Surprise me */
.bd-pick-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); padding: 5px 10px; border-radius: 999px; background: rgba(36, 26, 56, .86); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.bd-pick-tip[hidden] { display: none; }
.bd-flash { animation: bd-flash 1.1s ease-out; border-radius: 12px; }
@keyframes bd-flash { 0%, 35% { box-shadow: 0 0 0 3px #9272db, 0 0 0 9px rgba(146, 114, 219, .25); } 100% { box-shadow: 0 0 0 0 rgba(146, 114, 219, 0); } }
.bd-surprise-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.bd-surprise { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px dashed #9272db; border-radius: 999px; background: #f7f2ff; color: #5b3a96; font: inherit; font-weight: 700; cursor: pointer; }
.bd-surprise:hover { background: #efe6ff; }
.bd-surprise:focus-visible { outline: 3px solid #9272db; outline-offset: 2px; }
.bd-dice { display: inline-block; font-size: 1.25rem; }
.bd-surprise.is-rolling .bd-dice { animation: bd-roll .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes bd-roll { from { transform: rotate(0) scale(1); } 50% { transform: rotate(400deg) scale(1.35); } to { transform: rotate(720deg) scale(1); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .bd-flash { animation: none; outline: 3px solid #9272db; } }

/* Arrange mode */
.bd-arrange[aria-pressed="true"] { background: #7551aa; color: #fff; border-color: #7551aa; }
.bd-arrange-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; padding: 9px 12px; border-radius: 12px; background: #f3ecfd; color: #4e3a6b; font-size: 13px; }
.bd-arrange-bar[hidden] { display: none; }
.bd-arrange-bar span { flex: 1 1 200px; }
#page-bento.is-arranging .bd-canvas-box { box-shadow: inset 0 0 0 3px #b9a2e6; border-radius: 16px; }

/* Scene picker (top-left of the 3D preview) */
.bd-scenes { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .82); box-shadow: 0 2px 10px rgba(60, 30, 90, .12); backdrop-filter: blur(6px); }
.bd-scenes button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: #5b4a66; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.bd-scenes button[aria-pressed="true"] { background: #7551aa; color: #fff; }
.bd-scenes button:focus-visible { outline: 3px solid #9272db; outline-offset: 1px; }
.bd-scenes.is-loading button[aria-pressed="true"] { opacity: .7; }
.bd-canvas-box:has(.bd-topview:not([hidden])) .bd-scenes, #page-bento.is-packing .bd-scenes { display: none; }
@media (max-width: 900px) { .bd-scenes button { min-height: 30px; padding: 4px 10px; } }


/* Pick buttons + sheets (font, lettering colour) */
.bd-panel { position: relative; }
.bd-pick-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sample cta" "meta cta"; align-items: center; gap: 2px 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1.5px solid #e5ddec; border-radius: 14px; background: #fff; color: #3d2a52; text-align: left; font: inherit; cursor: pointer; }
.bd-pick-open:hover:not(:disabled) { border-color: #b9a2e6; background: #fcfaff; }
.bd-pick-open:focus-visible { outline: 3px solid #9272db; outline-offset: 2px; }
.bd-pick-open:disabled { opacity: .55; cursor: not-allowed; }
.bd-pick-current { grid-area: sample; font-size: 24px; line-height: 1.25; color: #4f3163; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-pick-meta { grid-area: meta; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.bd-pick-meta small { color: #7a6a86; font-size: 12px; }
.bd-pick-cta { grid-area: cta; padding: 7px 14px; border-radius: 999px; background: #f1e9fd; color: #5b3a96; font-weight: 700; font-size: 13px; }
.bd-sheet { position: absolute; inset: 0 0 auto 0; height: min(100%, calc(100vh - 120px)); min-height: 360px; z-index: 6; display: flex; flex-direction: column; background: #fff; border-radius: inherit; box-shadow: 0 10px 40px rgba(60, 30, 90, .18); animation: bd-sheet-in .18s ease-out; }
.bd-sheet[hidden] { display: none; }
.bd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.bd-sheet h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #4f3163; }
.bd-sheet-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f4eff9; color: #4f3163; font-size: 22px; cursor: pointer; }
.bd-font-groups { display: flex; gap: 6px; padding: 4px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.bd-font-groups button { flex: none; min-height: 36px; padding: 6px 14px; border: 1.5px solid #e5ddec; border-radius: 999px; background: #fff; color: #5b4a66; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bd-font-groups button[aria-pressed="true"] { background: #7551aa; border-color: #7551aa; color: #fff; }
.bd-sheet-tip { margin: 2px 16px 8px; color: #6e5d7c; font-size: 12.5px; }
.bd-font-list { flex: 1; overflow-y: auto; padding: 2px 16px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; }
.bd-font-item { display: grid; gap: 4px; min-height: 76px; padding: 10px 12px; border: 1.5px solid #ece4f3; border-radius: 14px; background: #fff; color: #3d2a52; text-align: left; font: inherit; cursor: pointer; }
.bd-font-item:hover { border-color: #c9b5ec; }
.bd-font-item[aria-checked="true"] { border-color: #7551aa; background: #f7f2ff; box-shadow: 0 0 0 2px rgba(117, 81, 170, .2); }
.bd-font-item:focus-visible { outline: 3px solid #9272db; outline-offset: 2px; }
.bd-font-sample { font-size: 26px; line-height: 1.2; color: #4f3163; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-font-name { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; }
.bd-font-name small { color: #8a7a96; font-weight: 500; }
.bd-sheet-foot { padding: 10px 16px 14px; border-top: 1px solid #f0eaf6; display: flex; justify-content: flex-end; }
.bd-sheet-foot .bd-primary { min-width: 120px; }
@keyframes bd-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .bd-sheet { position: fixed; inset: auto 0 0 0; height: min(62vh, 560px); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: bd-sheet-up; }
  .bd-font-list { grid-template-columns: 1fr 1fr; }
  .bd-font-sample { font-size: 22px; }
  #page-bento.is-sheet .bd-foot { visibility: hidden; }
}
@keyframes bd-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-sheet { animation: none; } }

/* Lettering colour sheet */
.bd-pick-current .bd-lc-chip { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(60, 30, 90, .15); font-size: 20px; vertical-align: middle; }
.bd-pick-current:has(.bd-lc-chip) { font-family: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; }
.bd-read { font-weight: 700; }
.bd-read::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.bd-read.is-good { color: #2e7d32; } .bd-read.is-ok { color: #8a6a12; } .bd-read.is-low { color: #c0392b; }
.bd-lc-preview { margin: 4px 16px 6px; padding: 18px 12px; border-radius: 14px; text-align: center; box-shadow: inset 0 0 0 1px rgba(60, 30, 90, .12); }
.bd-lc-preview span { font-size: 30px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bd-sheet-scroll { flex: 1; overflow-y: auto; padding: 4px 16px 12px; }
.bd-swatch.is-low::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 2px #fff; }

/* Compact colours */
.bd-swatch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.bd-swatch-row .bd-swatch-name { margin: 0; }
.bd-more-colors { min-height: 36px; padding: 6px 12px; border: 1.5px dashed #c9b5ec; border-radius: 999px; background: #fbf8ff; color: #5b3a96; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.bd-more-colors:focus-visible { outline: 3px solid #9272db; outline-offset: 2px; }

/* Step check marks + Review checklist */
.bd-step.is-done b { background: #3fa66b; color: #fff; }
.bd-check { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff8ec; border: 1px solid #f1dcb5; }
.bd-check > p { margin: 0 0 6px; font-weight: 700; color: #6b4e14; }
.bd-check > p small { font-weight: 500; color: #8a7350; }
.bd-check-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed #f1dcb5; font-size: 14px; }
.bd-check-item:first-of-type { border-top: 0; }
.bd-check.is-ready { display: flex; gap: 8px; align-items: center; background: #eef8f0; border-color: #bfe2c6; color: #2e7d32; font-weight: 600; }

/* Phones: compact floating preview while scrolling the options */
.bd-expand { position: absolute; z-index: 3; right: 10px; bottom: 10px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(36, 26, 56, .78); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.bd-expand[hidden] { display: none; }
@media (max-width: 900px) {
  .bd-canvas-box { transition: height .22s ease; }
  #page-bento.is-compact .bd-canvas-box { height: 132px; }
  #page-bento.is-compact .bd-stage-bar, #page-bento.is-compact .bd-scenes { display: none; }
  #page-bento.is-compact .bd-stage { box-shadow: 0 8px 20px rgba(60, 30, 90, .14); }
  .bd-check-item { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .bd-canvas-box { transition: none; } }

/* A color with an extra price (set by Admin) carries a small "+₱2" tag. */
.bd-swatch.has-price{position:relative}
.bd-swatch.has-price::after{content:attr(data-price);position:absolute;right:-6px;bottom:-6px;padding:0 4px;border-radius:8px;background:#fff;border:1px solid #d6c3ef;color:#5c3d6e;font-size:10px;font-weight:700;line-height:15px;white-space:nowrap;pointer-events:none}
.bd-msg-error{margin:-6px 0 12px;padding:8px 10px;border-radius:9px;background:#fdf0f2;color:#a73345;font-size:.8rem;line-height:1.4}
.bd-msg-error[hidden]{display:none}
#bd-message[aria-invalid=true]{border-color:#c7465f;box-shadow:0 0 0 3px rgba(199,70,95,.12)}
/* ---- Inspiration photos on the Review step (phase 55; shared by all designers) ---- */
.insp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,96px));gap:8px;margin:2px 0 10px}
.insp-pic{position:relative;margin:0;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--bd-line,#e6dcf3);background:#f6f1fb}
.insp-pic img{width:100%;height:100%;object-fit:cover;display:block}
.insp-remove{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(36,26,56,.75);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.insp-add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px dashed #cdb9f0;border-radius:12px;background:#fbf8ff;color:var(--bd-purple,#6033dd);font:700 .86rem 'DM Sans',sans-serif;cursor:pointer}
.insp-add:hover{background:#f3edfc}.insp-add:focus-within{outline:3px solid #b9a1f0;outline-offset:2px}
.insp-add.is-busy{opacity:.7;cursor:progress}
.insp-error{margin:8px 0 0;color:#a3324b;font-size:.82rem}
.insp .bd-label{flex-wrap:wrap;gap:2px 10px;box-sizing:border-box}
.insp .bd-label small{white-space:nowrap}

/* cake pops: number of pieces */
.dd-count{display:inline-flex;align-items:center;gap:6px}
.dd-count button{width:44px;height:44px;border:1.5px solid #ded3ec;border-radius:12px;background:#fff;color:#5a32b8;font-size:1.2rem;cursor:pointer}
.dd-count button:disabled{opacity:.4;cursor:not-allowed}
.dd-count input{width:84px;height:44px;border:1.5px solid #ded3ec;border-radius:12px;text-align:center;font:700 1rem 'DM Sans',sans-serif}

/* Studio backdrop: lavender wall fading to a deeper floor, soft spotlight behind the treat, shadowed edges
   (Bakery / Party scenes paint their own background over this) */
.bd-canvas-box{background:
  radial-gradient(ellipse 55% 38% at 50% 44%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#ece2f7 0%,#e4d7f3 45%,#cfbce7 70%,#c2acdf 100%)}
.bd-canvas-box::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 70px rgba(70,40,110,.28),inset 0 -30px 50px rgba(70,40,110,.18)}
.bd-stage{box-shadow:0 18px 40px rgba(70,40,110,.16),0 2px 6px rgba(70,40,110,.08)}
html[data-theme=dark] .bd-canvas-box{background:
  radial-gradient(ellipse 55% 38% at 50% 44%,rgba(190,160,235,.22) 0,rgba(190,160,235,0) 70%),
  linear-gradient(180deg,#3a2c4c 0%,#34274a 45%,#281d3a 70%,#211830 100%)}
html[data-theme=dark] .bd-canvas-box::after{box-shadow:inset 0 0 80px rgba(0,0,0,.55),inset 0 -30px 50px rgba(0,0,0,.35)}
html[data-theme=dark] .bd-stage{box-shadow:0 18px 40px rgba(0,0,0,.5)}