/* Shared customer card-studio geometry.
   Keep canvas sizing here so catalogue personalisation, Upload Your Own and
   baby-name cards do not drift into three separate desktop/mobile layouts. */
:root{
  --bt-editor-canvas-bg:linear-gradient(135deg,#d8d3ca,#f3efe7);
  --bt-editor-panel:#fff;
  --bt-editor-card-shadow:0 13px 28px rgba(34,28,19,.24);
  --bt-editor-portrait-max-h:68vh;
  --bt-editor-landscape-max-w:min(74vw,900px);
  --bt-editor-landscape-max-h:68vh;
  --bt-studio-ink:#111;
  --bt-studio-panel:#fff;
  --bt-studio-muted:#5e625f;
  --bt-studio-accent:#ffd735;
  --bt-studio-canvas:var(--bt-editor-canvas-bg);
  --bt-studio-radius:18px;
  --bt-studio-control-width:360px;
  --bt-studio-topbar:64px;
  --bt-studio-shadow:5px 6px 0 var(--bt-studio-ink);
}

/*
  Customer Card Studio foundation
  -------------------------------
  This is intentionally markup-first: existing editors keep their proven
  renderers while each route is migrated onto these roles one at a time.
  Do not attach a route-specific selector here unless that editor has been
  explicitly migrated; it keeps a partial migration visually safe.
*/
.bt-customer-studio{min-height:100dvh;background:var(--bt-studio-canvas);color:var(--bt-studio-ink);font-family:Montserrat,Arial,sans-serif}
.bt-studio-topbar{position:sticky;z-index:50;top:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:var(--bt-studio-topbar);padding:8px clamp(12px,2vw,24px);border-bottom:2px solid var(--bt-studio-ink);background:var(--bt-studio-panel)}
.bt-studio-topbar__brand{display:flex;min-width:0;align-items:center;gap:10px;font-weight:900}.bt-studio-topbar__brand img{display:block;width:auto;height:28px;max-width:150px;object-fit:contain}.bt-studio-topbar__product{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:800}.bt-studio-topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.bt-studio-exit,.bt-studio-action{min-height:38px;padding:8px 11px;border:2px solid var(--bt-studio-ink);border-radius:10px;background:#fff;color:var(--bt-studio-ink);font:800 .75rem/1 Montserrat,Arial,sans-serif;text-decoration:none}.bt-studio-action--primary{background:var(--bt-studio-accent);box-shadow:2px 2px 0 var(--bt-studio-ink)}
.bt-studio-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,var(--bt-studio-control-width));min-height:calc(100dvh - var(--bt-studio-topbar))}
.bt-studio-workspace{display:grid;min-width:0;min-height:0;place-items:center;padding:clamp(12px,2vw,28px);background:var(--bt-studio-canvas)}
.bt-studio-canvas{position:relative;display:grid;min-width:0;max-width:100%;max-height:100%;place-items:center}.bt-studio-canvas>*{max-width:100%;max-height:100%}
.bt-studio-controls{min-width:0;border-left:2px solid var(--bt-studio-ink);background:var(--bt-studio-panel);overflow:auto;overscroll-behavior:contain}
.bt-studio-controls__head{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #d7d7d4;background:var(--bt-studio-panel)}
.bt-studio-controls__title{margin:0;font-size:1rem;line-height:1.1}.bt-studio-controls__body{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
.bt-studio-page-tabs{display:flex;gap:6px;min-width:0;overflow:auto;padding:6px;background:#f1efea;border:2px solid var(--bt-studio-ink);border-radius:12px}.bt-studio-page-tabs button{flex:1 0 auto;min-height:34px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--bt-studio-ink);font:800 .72rem/1 Montserrat,Arial,sans-serif}.bt-studio-page-tabs button[aria-selected="true"],.bt-studio-page-tabs button.is-active{background:#fff;box-shadow:1px 1px 0 rgba(17,17,17,.35)}
.bt-studio-save{color:var(--bt-studio-muted);font-size:.7rem;font-weight:700}.bt-studio-mobile-nav{display:none}

@media(max-width:900px){
  .bt-studio-topbar{min-height:56px;padding:7px max(10px,env(safe-area-inset-left)) 7px max(10px,env(safe-area-inset-right))}.bt-studio-topbar__brand img{height:24px}.bt-studio-topbar__product,.bt-studio-save{display:none}.bt-studio-exit,.bt-studio-action{min-height:34px;padding:7px 8px;font-size:.66rem}
  .bt-studio-shell{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;min-height:calc(100dvh - 56px)}.bt-studio-workspace{padding:8px;min-height:0}.bt-studio-controls{position:fixed;z-index:60;right:0;bottom:0;left:0;max-height:min(58dvh,520px);border:2px solid var(--bt-studio-ink);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -5px 18px rgba(17,17,17,.14);transform:translateY(100%);transition:transform .2s ease}.bt-customer-studio.is-panel-open .bt-studio-controls{transform:translateY(0)}.bt-studio-controls__head{min-height:58px;padding:10px 14px}.bt-studio-mobile-nav{position:sticky;z-index:61;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));border-top:2px solid var(--bt-studio-ink);background:#fff}.bt-studio-mobile-nav button{min-height:42px;border:0;border-radius:8px;background:transparent;color:var(--bt-studio-ink);font:800 .62rem/1.1 Montserrat,Arial,sans-serif}.bt-studio-mobile-nav button.is-active{background:var(--bt-studio-accent)}
}
@media(prefers-reduced-motion:reduce){.bt-studio-controls{transition:none}}

/* The established portfolio editor remains the reference shell. */
body[data-page="personalise"] .mp-editor-main{background:var(--bt-editor-canvas-bg)!important}
body[data-page="personalise"] .mp-card-page{box-shadow:var(--bt-editor-card-shadow)!important}
@media(min-width:1024px){
  body[data-page="personalise"] .mp-front-page,
  body[data-page="personalise"] .mp-back-page{width:min(94%,510px,calc(68dvh * 1772 / 2506))!important;height:auto!important;max-width:none!important;max-height:none!important}
  body[data-page="personalise"] .mp-inside-page{width:min(94%,1020px,calc(68dvh * 3544 / 2506))!important;height:auto!important;max-width:none!important;max-height:none!important}
}
@media(max-width:1023px) and (min-width:768px){
  body[data-page="personalise"] .mp-front-page,
  body[data-page="personalise"] .mp-back-page,
  body[data-page="personalise"] .mp-inside-page{width:min(94%,510px,calc(68dvh * 1772 / 2506))!important;height:auto!important;max-width:none!important;max-height:none!important}
}
@media(max-width:767px){
  body[data-page="personalise"] .mp-front-page,
  body[data-page="personalise"] .mp-back-page,
  body[data-page="personalise"] .mp-inside-page{width:min(calc(100vw - 28px),calc((100dvh - 210px) * 1772 / 2506))!important;height:auto!important;max-width:none!important;max-height:none!important}
}

/* Upload Your Own follows the same canvas-first desktop proportions. */
body[data-page="upload-card"] .upload-stage{background:var(--bt-editor-canvas-bg)}
body[data-page="upload-card"] .custom-page{box-shadow:var(--bt-editor-card-shadow)}
@media(min-width:761px){
  body[data-page="upload-card"] .editor-body{min-height:clamp(620px,calc(100dvh - 155px),820px)}
  body[data-page="upload-card"] .upload-stage{grid-template-rows:minmax(430px,1fr) auto auto;padding:12px}
  body[data-page="upload-card"] .upload-canvas-wrap{padding:10px 14px}
  body[data-page="upload-card"] .custom-front,
  body[data-page="upload-card"] .custom-inside{width:min(100%,calc(min(var(--bt-editor-portrait-max-h),690px) * 5 / 7));height:auto;max-width:none;max-height:none}
  body[data-page="upload-card"] .custom-front[data-orientation="landscape"],
  body[data-page="upload-card"] .custom-inside[data-orientation="landscape"]{width:min(var(--bt-editor-landscape-max-w),calc(68dvh * 7 / 5));height:auto;max-height:none}
}

/* Baby-name editor uses the same canvas/panel proportions, while retaining its
   route-specific controls and letter renderer. */
body[data-page="baby-name-card"] .lab-workspace{background:var(--bt-editor-canvas-bg)}
body[data-page="baby-name-card"] .card-face{box-shadow:var(--bt-editor-card-shadow)}
/* Baby name card: first route migrated to the common studio shell.  The
   letter renderer and its existing controls remain route-owned. */
body[data-page="baby-name-card"] .lab-shell.bt-customer-studio{max-width:none;margin:0;padding:0}
body[data-page="baby-name-card"] .lab-heading.bt-studio-topbar{margin:0}
body[data-page="baby-name-card"] .lab-layout.bt-studio-shell{border:0;border-radius:0;box-shadow:none;overflow:visible;height:calc(100dvh - var(--bt-studio-topbar));min-height:0}
body[data-page="baby-name-card"] .lab-workspace.bt-studio-workspace{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
body[data-page="baby-name-card"] .card-stage.bt-studio-canvas{width:100%;min-width:0;min-height:0;height:100%;flex:1}
body[data-page="baby-name-card"] .lab-controls.bt-studio-controls{padding:0}
body[data-page="baby-name-card"] .bt-studio-controls__body{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
body[data-page="baby-name-card"] .bt-studio-page-tabs{margin-bottom:14px}
body[data-page="baby-name-card"] .baby-quick-editor{position:absolute;z-index:12;bottom:72px;left:clamp(14px,3vw,32px);max-width:calc(100% - 28px);padding:5px;border:2px solid #ddd8d0;background:#fff;box-shadow:3px 3px 0 #d2cdc4}
body[data-page="baby-name-card"] .baby-quick-editor>div{display:grid;grid-template-columns:auto minmax(120px,1fr) 40px 28px;align-items:center;gap:8px;min-width:min(320px,calc(100vw - 54px));padding:3px 5px}
body[data-page="baby-name-card"] .baby-quick-editor>div[hidden]{display:none}
body[data-page="baby-name-card"] .baby-quick-editor span{font-size:1.35rem;color:#766e66}body[data-page="baby-name-card"] .baby-quick-editor input{min-width:0;border:0;background:transparent;color:#111;font:500 1rem Montserrat,Arial,sans-serif;outline:0}
body[data-page="baby-name-card"] .baby-quick-editor button{width:28px;min-height:38px;padding:0;border:0;background:transparent;color:#333;font-size:1.45rem;line-height:1;cursor:pointer}
body[data-page="baby-name-card"] .baby-quick-editor .baby-background-picker-button{display:grid;width:40px;min-height:38px;padding:5px;border:2px solid #111;border-radius:8px;background:#fff;color:#111}
body[data-page="baby-name-card"] .baby-quick-editor .baby-background-picker-button:hover,body[data-page="baby-name-card"] .baby-quick-editor .baby-background-picker-button:focus-visible{background:#ffd93d}
body[data-page="baby-name-card"] .baby-quick-editor .baby-background-picker-button svg{width:26px;height:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}
body[data-page="baby-name-card"] .baby-control-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #ddd7cf}
body[data-page="baby-name-card"] .baby-control-tabs button{min-height:38px;border:1px solid #cfc8bf;border-radius:8px;background:#fff;color:#24211f;font:800 .7rem/1 Montserrat,Arial,sans-serif;cursor:pointer}
body[data-page="baby-name-card"] .baby-control-tabs button.is-active{border-color:#111;background:#ffd93d;box-shadow:2px 2px 0 #111}
body[data-page="baby-name-card"] .preview-tabs{display:none}
body[data-page="baby-name-card"] .bt-studio-mobile-nav{position:fixed;z-index:61;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));border-top:2px solid #111;background:#fff}
body[data-page="baby-name-card"] .bt-studio-mobile-nav button{min-height:42px;border:0;border-radius:8px;background:transparent;color:#111;font:800 .68rem/1.1 Montserrat,Arial,sans-serif}
body[data-page="baby-name-card"] .bt-studio-mobile-nav button.is-active{background:var(--bt-studio-accent)}
@media(min-width:901px){
  body[data-page="baby-name-card"] .lab-layout{grid-template-columns:minmax(0,1fr)}
  body[data-page="baby-name-card"] .card-stage{min-height:0}
  body[data-page="baby-name-card"] .card-face{width:min(100%,900px,calc(68dvh * 2220 / 1559));height:auto;max-height:none}
  body[data-page="baby-name-card"] .lab-controls.bt-studio-controls{position:fixed;z-index:70;top:calc(var(--bt-studio-topbar) + 14px);right:14px;bottom:14px;width:min(380px,calc(100vw - 28px));max-height:none;border:2px solid #111;border-radius:18px;box-shadow:0 8px 28px rgba(17,17,17,.22);background:var(--bt-editor-panel);transform:translateX(calc(100% + 24px));transition:transform .2s ease}
  body[data-page="baby-name-card"] .bt-customer-studio.is-panel-open .lab-controls.bt-studio-controls{transform:translateX(0)}
}

/* Shared mobile rule: the card itself gets the width; controls should not
   shrink it merely to keep desktop sidebars visible. */
@media(max-width:900px){
  body[data-page="baby-name-card"] .lab-layout{grid-template-columns:minmax(0,1fr)}
  body[data-page="upload-card"] .upload-canvas-wrap,
  body[data-page="baby-name-card"] .card-stage{padding-inline:4px}
  body[data-page="baby-name-card"] .card-face{width:min(calc(100vw - 28px),680px,calc((100dvh - 145px) * 2220 / 1559));height:auto;max-height:none}
  body[data-page="baby-name-card"] .lab-workspace{padding:8px}
  body[data-page="baby-name-card"] .bt-studio-mobile-nav{position:fixed}
  body[data-page="baby-name-card"] .lab-controls.bt-studio-controls{max-height:min(64dvh,620px)}
  body[data-page="baby-name-card"] .lab-layout.bt-studio-shell{height:auto;min-height:calc(100dvh - 56px)}
  body[data-page="baby-name-card"] .baby-quick-editor{bottom:68px}
  body[data-page="baby-name-card"] .baby-quick-editor:focus-within{position:fixed;z-index:80;bottom:calc(68px + env(safe-area-inset-bottom));left:12px}
}

/* V.26.09.14.13 — route-specific personalised pricing warning, shared presentation. */
body[data-page="baby-name-card"] .personalised-offer-note{display:grid;gap:.2rem;margin:.2rem 0 .75rem;padding:.65rem .75rem;border:2px solid #111;border-radius:11px;background:#fff4bf;box-shadow:2px 2px 0 #111;color:#111;font:700 .72rem/1.35 Montserrat,Arial,sans-serif}
body[data-page="baby-name-card"] .personalised-offer-note strong{font-size:.78rem}