/* color-matcher: scoped styles */
#pk-color-matcher .cm-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
#pk-color-matcher .cm-step>span{width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
#pk-color-matcher .cm-step h2{font-size:clamp(18px,2.1vw,23px);font-weight:900;line-height:1.5}
#pk-color-matcher .cm-step p{color:var(--muted);font-size:14px}
#pk-color-matcher .cm-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px 4px}
#pk-color-matcher .cm-dot{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;border-radius:16px;font-size:12px;font-weight:600;color:var(--ink2);line-height:1.4;transition:.2s}
#pk-color-matcher .cm-dot i{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:.25s;display:block}
#pk-color-matcher .cm-dot:hover i{transform:scale(1.1)}
#pk-color-matcher .cm-dot.on{background:var(--blush);color:var(--ink)}
#pk-color-matcher .cm-dot.on i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rose)}
#pk-color-matcher .cm-custom{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 16px;border:1.5px dashed var(--line);border-radius:18px;cursor:pointer;font-weight:700;font-size:14.5px;width:fit-content;max-width:100%;transition:.25s;color:var(--ink2)}
#pk-color-matcher .cm-custom:hover,#pk-color-matcher .cm-custom.on{border-color:var(--rose);color:var(--ink);background:var(--bg)}
#pk-color-matcher .cm-custom input{width:44px;height:34px;border:0;padding:0;background:none;cursor:pointer}
#pk-color-matcher .cm-custom input::-webkit-color-swatch-wrapper{padding:0}
#pk-color-matcher .cm-custom input::-webkit-color-swatch{border:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#pk-color-matcher .cm-cv{font-family:monospace;font-size:13px;color:var(--muted)}

#pk-color-matcher .cm-out{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
#pk-color-matcher .cm-head{display:flex;gap:22px;align-items:center}
#pk-color-matcher .cm-big{width:132px;height:132px;border-radius:36px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 22px 40px -24px rgba(61,37,50,.6)}
#pk-color-matcher .cm-big span{font-family:monospace;font-size:13px;font-weight:700;opacity:.85}
#pk-color-matcher .cm-hinfo .lbl{font-size:12.5px;font-weight:700;color:var(--rose-d);background:var(--blush);padding:3px 12px;border-radius:99px}
#pk-color-matcher .cm-hinfo h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.4;margin:6px 0}
#pk-color-matcher .cm-tags{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink2);margin-bottom:12px}
#pk-color-matcher .cm-tags b{color:var(--ink)}
#pk-color-matcher .cm-cp{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 14px}

#pk-color-matcher .cm-look{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;margin-top:28px;background:linear-gradient(135deg,#f7efe9,#f3e9e2);border-radius:26px;padding:22px;align-items:center}
#pk-color-matcher .cm-stage{background:#fffaf6;border-radius:20px;padding:14px;box-shadow:inset 0 0 0 1px rgba(61,37,50,.05)}
#pk-color-matcher .cm-stage svg{display:block;width:100%;max-width:330px;margin:auto;height:auto}
#pk-color-matcher .cm-pt{transition:.3s}
#pk-color-matcher .cm-pt path{transition:fill .35s,stroke .35s}
#pk-color-matcher .cm-stage svg:hover .cm-pt:not(.sel){opacity:.92}
#pk-color-matcher .cm-pt.sel{filter:drop-shadow(0 0 6px rgba(199,107,122,.55))}
#pk-color-matcher .cm-ctrl h3{font-size:19px;font-weight:900}
#pk-color-matcher .cm-sub{font-size:13.5px;color:var(--ink2);margin-bottom:12px}
#pk-color-matcher .cm-parts{background:#fff}
#pk-color-matcher .cm-parts button.on{background:var(--plum);color:#fff}
#pk-color-matcher .cm-pool{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#pk-color-matcher .cm-pc{width:34px;height:34px;border-radius:50%;padding:0;transition:.2s}
#pk-color-matcher .cm-pc i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#pk-color-matcher .cm-pc:hover{transform:scale(1.12)}
#pk-color-matcher .cm-pc.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--plum)}
#pk-color-matcher .cm-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;color:var(--ink2);margin-bottom:12px}
#pk-color-matcher .cm-legend span{display:flex;align-items:center;gap:6px}
#pk-color-matcher .cm-legend i{width:14px;height:14px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#pk-color-matcher .cm-legend b{color:var(--ink)}
#pk-color-matcher .cm-verdict .pk-alert{font-size:13.5px;padding:10px 12px;background-color:rgba(255,255,255,.65)}

#pk-color-matcher .cm-sec{margin-top:34px}
#pk-color-matcher .cm-sh{margin-bottom:14px}
#pk-color-matcher .cm-sh small{color:var(--rose);font-size:16px}
#pk-color-matcher .cm-sh h3{font-size:clamp(19px,2.2vw,24px);font-weight:900;line-height:1.5}
#pk-color-matcher .cm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#pk-color-matcher .cm-combo{background:var(--bg);border-radius:22px;padding:18px}
#pk-color-matcher .cm-grid>.cm-combo:last-child:nth-child(odd){grid-column:1/-1}
#pk-color-matcher .cm-combo.feat{background:linear-gradient(135deg,var(--blush),#f8eee8)}
#pk-color-matcher .cm-chead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
#pk-color-matcher .cm-chead h4{font-size:16px;font-weight:800;line-height:1.6}
#pk-color-matcher .cm-try{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--rose-d);background:#fff;padding:6px 12px;border-radius:99px;flex:none;transition:.2s}
#pk-color-matcher .cm-try:hover{background:var(--plum);color:#fff}
#pk-color-matcher .cm-strip{display:flex;height:16px;border-radius:99px;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
#pk-color-matcher .cm-strip i{display:block}
#pk-color-matcher .cm-combo .pk-swatches{gap:10px 8px}
#pk-color-matcher .cm-combo .pk-swatch{width:68px;text-align:center;line-height:1.45}
#pk-color-matcher .cm-combo .pk-swatch i{width:52px;height:52px;border-radius:16px}
#pk-color-matcher .cm-tip{font-size:13.5px;color:var(--ink2);margin-top:12px;padding-top:12px;border-top:1px dashed rgba(61,37,50,.12);line-height:1.9}

#pk-color-matcher .cm-rule{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;margin-top:30px;background:var(--plum);color:#f6ecef;border-radius:24px;padding:22px}
#pk-color-matcher .cm-rule h3{font-size:18px;font-weight:900;color:#fff;margin-bottom:4px}
#pk-color-matcher .cm-rule p{font-size:14px;color:#e6d7dc;line-height:1.9}
#pk-color-matcher .cm-rbar{display:flex;height:120px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
#pk-color-matcher .cm-rbar i{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
#pk-color-matcher .cm-rbar b{font-size:11.5px;background:rgba(255,255,255,.88);color:var(--plum);padding:1px 6px;border-radius:99px;font-weight:800}

@media (max-width:760px){
  #pk-color-matcher .cm-look{grid-template-columns:1fr;padding:14px}
  #pk-color-matcher .cm-stage svg{max-width:260px}
  #pk-color-matcher .cm-grid{grid-template-columns:1fr}
  #pk-color-matcher .cm-rule{grid-template-columns:1fr}
  #pk-color-matcher .cm-rbar{height:64px}
}
@media (max-width:480px){
  #pk-color-matcher .cm-pal{grid-template-columns:repeat(5,1fr);gap:4px 2px}
  #pk-color-matcher .cm-dot{font-size:10.5px;padding:6px 0}
  #pk-color-matcher .cm-dot i{width:34px;height:34px}
  #pk-color-matcher .cm-head{gap:14px}
  #pk-color-matcher .cm-big{width:92px;height:92px;border-radius:26px}
  #pk-color-matcher .cm-combo .pk-swatch{width:calc(25% - 6px)}
  #pk-color-matcher .cm-combo .pk-swatch i{width:46px;height:46px}
  #pk-color-matcher .cm-parts button{padding:8px 13px}
}

/* WordPress port: loading state while the server builds a new palette */
#pk-color-matcher .cm-out{transition:opacity .2s}
#pk-color-matcher .cm-out.cm-busy{opacity:.55;pointer-events:none}
#pk-color-matcher .cm-stage .cm-pt{cursor:pointer}