/* ManaKlade Cover Designer — PDP integration chrome (Phase 5e) */
/* the designer replaces the gallery+info inside .pdp-cols — span the full width, not one column */
body.mk-modern .pdp-designer-cols{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr);gap:40px;align-items:start;}
body.mk-modern .pdp-canvas-col{position:relative;border-radius:var(--r-lg);overflow:hidden;height:660px;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-sm);}
body.mk-modern .pdp-canvas-col .canvas-wrap{position:absolute;inset:0;background:none;}
body.mk-modern .pdp-panel-col{min-width:0;}
body.mk-modern .mk-open-designer{display:flex;align-items:center;gap:10px;width:100%;justify-content:center;cursor:pointer;}
body.mk-modern .mk-open-designer svg{width:18px;height:18px;flex-shrink:0;}
/* designer-entry hint (class reused from the PDP; ensure its icon is constrained) */
body.mk-modern #mk-cover-designer-btn-container .pdp-custom-cta{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted-fg);padding:13px 16px;background:var(--muted);border-radius:var(--r);border:1px solid var(--border);}
body.mk-modern #mk-cover-designer-btn-container .pdp-custom-cta svg{width:18px;height:18px;color:var(--green);flex-shrink:0;}
@media (max-width:1080px){
  body.mk-modern .pdp-designer-cols{grid-template-columns:1fr;gap:28px;}
  body.mk-modern .pdp-canvas-col{height:560px;}
}

/* canvas top bar (face toggle / guides / zoom) — inside .mk-designer */
.mk-designer .dp-canvas-bar{position:absolute;top:14px;left:14px;right:14px;z-index:30;display:flex;align-items:center;gap:10px;pointer-events:none;}
.mk-designer .dp-canvas-bar > *{pointer-events:auto;}
.mk-designer .dp-faces{display:flex;background:#fff;border-radius:var(--radius);padding:3px;gap:2px;box-shadow:var(--shadow-sm);}
.mk-designer .dp-faces button{font-size:13px;font-weight:600;color:var(--muted);padding:7px 16px;border-radius:8px;transition:.14s;}
.mk-designer .dp-faces button.on{background:var(--teal);color:#fff;}
.mk-designer .dp-canvas-bar .spacer{flex:1;}
.mk-designer .dp-canvas-bar .dp-tool{width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.12s;}
.mk-designer .dp-canvas-bar .dp-tool:hover{color:var(--teal);}
body.mk-modern .mk-designer .dp-canvas-bar .dp-tool svg{width:17px !important;height:17px !important;flex:none;}
body.mk-modern .mk-designer .dp-canvas-bar .dp-faces button{white-space:nowrap;}
/* the theme forces a width onto bare <svg> inside the designer — pin the canvas hint icon too */
body.mk-modern .mk-designer .canvas-hint svg{width:15px !important;height:15px !important;flex:none;}
.mk-designer .canvas-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;background:rgba(26,26,26,.82);color:#fff;font-size:12.5px;padding:8px 16px;border-radius:30px;display:flex;gap:8px;align-items:center;}