.pmhp { --pmhp-ink:#152c3c; --pmhp-blue:#123f5b; --pmhp-line:#dce3e7; color:var(--pmhp-ink); font:var(--pmhp-body-weight,400) var(--pmhp-font-size,14px)/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-family:var(--pmhp-font-family,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); max-width:1280px; margin:24px auto; padding:0 12px; isolation:isolate; overflow-wrap:anywhere; }
.pmhp *, .pmhp *::before, .pmhp *::after { box-sizing:border-box; }
.pmhp [hidden] { display:none !important; }
.pmhp h2, .pmhp h3, .pmhp p { font-family:inherit; color:inherit; padding:0; letter-spacing:normal; text-transform:none; }
.pmhp h2 { font-size:var(--pmhp-title-size,36px); font-weight:var(--pmhp-heading-weight,700); line-height:1.15; margin:0 0 8px; }
.pmhp h3 { font-size:var(--pmhp-heading-size,16px); font-weight:var(--pmhp-heading-weight,700); line-height:1.3; margin:0 0 12px; }
.pmhp p { margin:0; }
.pmhp button, .pmhp input { font:inherit; line-height:1.4; border-radius:7px; box-shadow:none; margin:0; letter-spacing:normal; text-transform:none; }
.pmhp button { font-size:var(--pmhp-button-size,14px); cursor:pointer; background:#fff; color:var(--pmhp-ink); border:1px solid var(--pmhp-line); padding:9px 10px; min-height:42px; height:auto; }
.pmhp button:disabled { cursor:default; color:#56616a; background:#f5f7f8; }
.pmhp button:not(:disabled):hover { border-color:var(--pmhp-blue); background:#f1f6f8; }
.pmhp button[aria-pressed="true"] { outline:2px solid var(--pmhp-blue); outline-offset:1px; }
.pmhp button:focus-visible, .pmhp input:focus-visible { outline:3px solid #007e9b; outline-offset:3px; }
.pmhp-header { display:flex; align-items:center; gap:20px; justify-content:space-between; margin-bottom:22px; }
.pmhp .pmhp-brand { font-size:var(--pmhp-brand-size,10px); font-weight:var(--pmhp-heading-weight,700); letter-spacing:2px; color:#56756d; margin-bottom:9px; }
.pmhp-header > div > p:last-child { color:#64727c; }
.pmhp .pmhp-reset { background:var(--pmhp-blue); color:white; border:2px solid var(--pmhp-blue); padding:12px 16px; font-weight:var(--pmhp-heading-weight,700); flex-shrink:0; }
.pmhp .pmhp-reset:hover { background:#205773; color:white; }
.pmhp-layout { display:grid; grid-template-columns:430px minmax(0,1fr); align-items:start; gap:18px; }
.pmhp-sidebar, .pmhp-main { min-width:0; }
.pmhp-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.pmhp-panel { padding:16px; border:1px solid var(--pmhp-line); border-radius:12px; background:#fff; margin-bottom:12px; }
.pmhp-surfaces { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pmhp-surfaces button { font-size:var(--pmhp-status-size,12px); padding:9px 4px; }
.pmhp-surfaces button[aria-pressed="true"] { background:var(--pmhp-blue); color:#fff; outline:none; }
.pmhp .pmhp-popular { margin-top:22px; }
.pmhp-palette { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 10px; }
.pmhp .pmhp-palette button { padding:0 0 3px; border:0; background:transparent; min-width:0; border-radius:5px; font-size:var(--pmhp-palette-size,10px); text-align:center; }
.pmhp-palette button > span:last-child { display:block; padding-top:4px; }
.pmhp-swatch { display:block; height:43px; border:1px solid #00000014; border-radius:6px; }
.pmhp-custom { margin-top:18px; padding-top:15px; border-top:1px solid var(--pmhp-line); }
.pmhp-custom > label { display:flex; gap:8px; align-items:center; font-weight:var(--pmhp-heading-weight,700); margin-bottom:9px; }
.pmhp-custom-chip, .pmhp-selection-chip { width:22px; height:22px; border-radius:50%; border:1px solid #6e7b853d; display:inline-block; flex-shrink:0; }
.pmhp-custom-inputs { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
.pmhp input[type="text"] { width:100%; min-width:0; height:41px; border:1px solid #adbcc6; background:#fff; color:var(--pmhp-ink); padding:8px 10px; }
.pmhp input[type="text"][aria-invalid="true"] { border:2px solid #a02727; }
.pmhp input[type="color"] { width:44px; min-width:44px; height:41px; padding:3px; border:1px solid #adbcc6; background:#fff; cursor:pointer; }
.pmhp .pmhp-help { font-size:var(--pmhp-help-size,11px); color:#5a6972; margin-top:7px; min-height:33px; }
.pmhp-rooms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pmhp .pmhp-rooms button { padding:3px; min-width:0; border:0; font-size:var(--pmhp-room-size,10px); background:transparent; }
.pmhp-rooms img, .pmhp-room-placeholder { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:5px; background:#edf1f2; margin-bottom:5px; }
.pmhp-room-placeholder { display:grid; place-items:center; font-size:9px; color:#667680; }
.pmhp-rooms small { display:block; font-size:9px; color:#667680; }
.pmhp-preview { background:#f0f3f2; border:1px solid var(--pmhp-line); border-radius:12px; overflow:hidden; min-height:240px; }
.pmhp-empty { min-height:420px; padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pmhp-empty p { color:#64727c; max-width:390px; }
.pmhp-empty-icon { font-size:54px; font-weight:300; color:#7c938a; margin-bottom:16px; }
.pmhp-stage { position:relative; max-height:520px; width:100%; }
.pmhp-stage canvas { display:block; width:100%; height:100%; object-fit:contain; }
.pmhp-stage .pmhp-after { position:absolute; inset:0; }
.pmhp-divider { position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 3px #0008; pointer-events:none; }
.pmhp-compare { display:flex; align-items:center; gap:12px; padding:8px 0 0; border-bottom:0; font-size:12px; }
.pmhp-compare label { white-space:normal; }
.pmhp input[type="range"] { min-width:30px; width:100%; height:28px; padding:0; background:transparent; accent-color:var(--pmhp-blue); }
.pmhp-compare output { flex-shrink:0; font-size:10px; min-width:134px; text-align:right; }
.pmhp-selections { display:flex; flex-wrap:wrap; gap:9px 18px; padding:15px 0; }
.pmhp-selections > span { display:flex; align-items:center; gap:6px; font-size:11px; }
.pmhp-selection-chip { width:16px; height:16px; }
.pmhp .pmhp-status { font-size:12px; color:#37544d; min-height:36px; }
.pmhp .pmhp-note { font-size:11px; color:#64727c; margin-top:10px; }
@media (max-width:760px) {
  .pmhp { margin:16px auto; }
  .pmhp-header { align-items:flex-start; flex-direction:column; gap:14px; }
  .pmhp .pmhp-reset { width:100%; }
  .pmhp-layout { grid-template-columns:1fr; gap:14px; }
  .pmhp-main { grid-row:1; }
  .pmhp-empty { min-height:240px; padding:24px; }
  .pmhp-preview { min-height:0; }
  .pmhp-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .pmhp-palette { gap:10px; }
  .pmhp-compare { flex-wrap:wrap; gap:6px 10px; }
  .pmhp-compare input { flex:1; }
  .pmhp-compare output { width:100%; text-align:right; }
}
@media (max-width:520px) {
  .pmhp-sidebar { display:grid; }
  .pmhp-panel { padding:14px; }
  .pmhp-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pmhp-swatch { height:44px; }
  .pmhp-rooms { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pmhp-surfaces button { font-size:14px; min-height:44px; }
  .pmhp-stage { max-height:380px; }
}

.pmhp .pmhp-review { color:#704d19; background:#fff3d8; border:1px solid #e8c98d; border-radius:7px; padding:9px 12px; margin-top:10px; font-size:12px; }

/* Colour palette and room chooser share the control area. */
.pmhp-sidebar .pmhp-popular { margin-top:0; }
.pmhp-room-panel .pmhp-rooms img, .pmhp-room-panel .pmhp-room-placeholder { height:52px; aspect-ratio:auto; object-fit:cover; }
.pmhp-sidebar .pmhp-panel { padding:12px; margin-bottom:0; }
@media (min-width:761px) and (max-width:1000px) {
  .pmhp-layout { grid-template-columns:1fr; }
  .pmhp-main { grid-row:1; }
  .pmhp-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .pmhp-sidebar { gap:8px; }
  .pmhp-sidebar .pmhp-panel { padding:9px; }
  .pmhp-palette { gap:10px 7px; }
  .pmhp-room-panel .pmhp-rooms { gap:10px 7px; }
  .pmhp input[type="text"] { font-size:12px; padding:8px 5px; }
}

@media (max-width:520px) { .pmhp h2 { font-size:min(var(--pmhp-title-size,36px),9vw); } }

.pmhp .pmhp-visually-hidden { position:absolute !important; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }