/* Bholder Pantone design, 2026-10-04. All rules are scoped to this page or Shadow DOM. */
.bh-pantone-page { --bh-pt-ink:#202939; --bh-pt-muted:#586780; --bh-pt-accent:#6850a5; --bh-pt-line:#e0e3ed; --bh-pt-tint:#f6f5fb; background:#f5f5fa; border-radius:24px; padding:20px; margin:0 0 32px; color:var(--bh-pt-ink); font-size:15px; font-weight:400; line-height:1.65; }
.bh-pantone-page, .bh-pantone-page * { box-sizing:border-box; }
.bh-pantone-page .bh-pt-card { background:#fff; border:1px solid var(--bh-pt-line); border-radius:20px; padding:28px; margin:0 0 20px; }
.bh-pantone-page .bh-pt-card:last-child { margin-bottom:0; }
.bh-pantone-page p { margin:0 0 14px; text-align:left; }
.bh-pantone-page p:last-child { margin-bottom:0; }
.bh-pantone-page h2 { margin:0 0 18px; font-size:24px; line-height:1.35; font-weight:700; color:var(--bh-pt-ink); }
.bh-pantone-page h3 { margin:0 0 10px; font-size:18px; line-height:1.4; font-weight:700; color:var(--bh-pt-ink); }
.bh-pantone-page a { color:var(--bh-pt-accent); text-decoration:underline; text-underline-offset:3px; }
.bh-pantone-page a:hover { color:#483078; }
.bh-pantone-page a:focus-visible { outline:2px solid var(--bh-pt-accent); outline-offset:4px; border-radius:2px; }
.bh-pantone-page .bh-pt-badge { display:inline-block; padding:5px 10px; border-radius:7px; background:#f0ecf8; color:var(--bh-pt-accent); font-size:13px; line-height:1.5; font-weight:700; margin-bottom:16px; }
.bh-pantone-page .bh-pt-intro { font-size:17px; line-height:1.5; font-weight:600; color:var(--bh-pt-ink); }
.bh-pantone-page .bh-pt-lead { color:var(--bh-pt-muted); }
.bh-pantone-page .bh-pt-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; padding:0; list-style:none; }
.bh-pantone-page .bh-pt-step { display:flex; align-items:flex-start; gap:14px; padding:18px; border:1px solid #eceaf3; background:var(--bh-pt-tint); border-radius:12px; }
/* The store's layout.css adds a counter bubble to every ol li. Keep only our 01–03. */
.bh-pantone-page .bh-pt-steps > .bh-pt-step::before { content:none; display:none; counter-increment:none; }
.bh-pantone-page .bh-pt-step-number { color:var(--bh-pt-accent); font-size:27px; line-height:1.2; font-weight:700; }
.bh-pantone-page .bh-pt-step strong { display:block; margin:0 0 5px; font-size:15px; line-height:1.4; }
.bh-pantone-page .bh-pt-step p { color:var(--bh-pt-muted); font-size:13px; line-height:1.5; }
.bh-pantone-page .bh-pt-nav { display:flex; flex-wrap:wrap; gap:12px 24px; border-top:1px solid var(--bh-pt-line); padding-top:18px; font-size:14px; }
/* Leave space for the store's sticky navigation plus a comfortable gap. */
.bh-pantone-page [id] { scroll-margin-top:80px; }
.bh-pantone-page .bh-pt-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:20px 0; }
.bh-pantone-page .bh-pt-two > div + div { border-left:1px solid var(--bh-pt-line); padding-left:24px; }
.bh-pantone-page .bh-pt-models { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 0; }
.bh-pantone-page .bh-pt-models a { display:block; padding:16px; border:1px solid #eceaf3; border-radius:10px; background:var(--bh-pt-tint); text-decoration:none; }
.bh-pantone-page .bh-pt-models strong { display:block; margin-bottom:3px; }
.bh-pantone-page .bh-pt-models span { display:block; color:var(--bh-pt-muted); font-size:13px; }
.bh-pantone-page .bh-pt-note { padding:16px 18px; border-left:3px solid var(--bh-pt-accent); border-radius:0 10px 10px 0; background:#f0ecf8; font-size:14px; }
.bh-pantone-page .bh-pt-legal { color:var(--bh-pt-muted); font-size:14px; }
.bh-pantone-page .bh-pt-legal h2 { font-size:20px; }
.bh-pantone-page .bh-pt-divider { border:0; border-top:1px solid var(--bh-pt-line); margin:24px 0; }
@media (max-width:800px) {
 .bh-pantone-page .bh-pt-steps { grid-template-columns:1fr; }
 .bh-pantone-page .bh-pt-step { padding:14px 16px; }
}
@media (max-width:600px) {
 .bh-pantone-page { padding:10px; border-radius:18px; font-size:15px; }
 .bh-pantone-page .bh-pt-card { padding:20px 16px; border-radius:14px; margin-bottom:14px; }
 .bh-pantone-page h2 { font-size:21px; }
 .bh-pantone-page .bh-pt-intro { font-size:16px; }
 .bh-pantone-page .bh-pt-two,.bh-pantone-page .bh-pt-models { grid-template-columns:1fr; gap:16px; }
 .bh-pantone-page .bh-pt-two > div + div { border-left:0; padding-left:0; }
}
/* Outside Shadow DOM, :host rules do not match any elements on the store. */
:host { font-family:'Open Sans',Arial,sans-serif; font-size:15px; line-height:1.5; container-type:inline-size; --ptc-color-bg:#fff; --ptc-color-fg:#202939; --ptc-color-accent:#f0ecf8; --ptc-color-border:#e0e3ed; --ptc-color-muted:#586780; --ptc-color-surface:#f6f5fb; --ptc-color-shell:#fff; --ptc-color-shell-border:#e0e3ed; --ptc-shell-shadow:none; --ptc-action:#6850a5; }
:host([data-theme="dark"]) { --ptc-color-bg:#17202e; --ptc-color-fg:#edf0f7; --ptc-color-accent:#302846; --ptc-color-border:#394359; --ptc-color-muted:#bbc4d8; --ptc-color-surface:#1d2638; --ptc-color-shell:#111927; --ptc-color-shell-border:#394359; --ptc-action:#c2acf4; }
:host .root { padding:28px; margin:0 0 20px; border-radius:20px; box-shadow:none; }
:host .widget-header { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-right:50px; margin:0 0 24px; }
:host .h { color:var(--ptc-color-fg); font-size:28px; line-height:1.3; font-weight:700; }
:host .dataset-badge { display:inline-block; padding:6px 12px; border-radius:999px; background:var(--ptc-color-accent); color:var(--ptc-action); font-size:13px; line-height:1.5; font-weight:600; }
:host .theme-btn { width:38px; height:38px; top:26px; right:26px; box-shadow:none; }
:host .theme-ico { font-size:24px; line-height:1; }
:host .panel { margin-top:14px; padding:20px; background:var(--ptc-color-surface); border:1px solid var(--ptc-color-border); border-radius:12px; }
:host .panel h3 { font-size:18px; line-height:1.4; font-weight:700; margin:0; color:var(--ptc-color-fg); overflow-wrap:anywhere; }
:host .row { gap:12px; margin:12px 0; }
:host .row.mt-0 { margin-top:0; }
:host .input, :host .num { min-height:44px; padding:10px 12px; border-radius:8px; font:inherit; font-size:15px; line-height:1.4; background:var(--ptc-color-bg); color:var(--ptc-color-fg); }
:host .input:focus-visible, :host .num:focus-visible, :host button:focus-visible { outline:2px solid var(--ptc-action); outline-offset:3px; }
:host .search-field { position:relative; }
:host .search-field::before { content:''; position:absolute; left:16px; width:13px; height:13px; border:1.6px solid var(--ptc-color-muted); border-radius:50%; pointer-events:none; }
:host .search-field::after { content:''; position:absolute; left:28px; top:28px; width:6px; height:1.6px; background:var(--ptc-color-muted); transform:rotate(45deg); pointer-events:none; }
:host .search-field .input { padding-left:42px; min-height:48px; }
:host .compare-hint { margin:0; font-size:13px; line-height:1.5; }
:host .grid { gap:14px; margin:16px 0; }
:host .channel-field { display:block; min-width:0; }
:host .channel-label { display:block; margin-bottom:6px; color:var(--ptc-color-muted); font-size:13px; font-weight:600; }
:host .match-options { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 24px; }
:host .option-field { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ptc-color-muted); }
:host .option-field .num { width:76px; min-height:40px; }
:host .results-panel { padding:0; border:0; background:transparent; margin-top:24px; }
:host .results-panel > .row { margin:0 0 14px; }
:host .results-panel > .row h3 { font-size:22px; }
:host .small { font-size:13px; line-height:1.5; }
:host .list { gap:14px; }
:host .item { gap:18px; padding:16px; border-radius:12px; box-shadow:none; background:var(--ptc-color-bg); }
:host .item:hover { transform:none; box-shadow:none; border-color:var(--ptc-color-border); }
:host .sw { flex-basis:100px; width:100px; min-height:112px; box-shadow:none; border-radius:10px; }
:host .code { font-size:17px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
:host .code-copy { gap:12px; max-width:100%; }
:host .copy-status, :host .value-copy { display:inline-flex; align-items:center; justify-content:center; opacity:1; color:var(--ptc-color-muted); font-size:18px; line-height:1; flex:0 0 18px; }
:host .copy-mark { width:18px; height:18px; }
:host .result-heading { margin-bottom:12px; }
:host .color-values { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); gap:8px; }
:host .color-value { min-height:56px; padding:10px 34px 10px 12px; background:var(--ptc-color-surface); }
:host .value-label { color:var(--ptc-color-muted); font-size:12px; font-weight:500; letter-spacing:0; }
:host .value-text { color:var(--ptc-color-fg); font-size:14px; font-weight:600; line-height:1.5; overflow:visible; white-space:normal; text-overflow:clip; overflow-wrap:anywhere; }
:host .value-copy { top:12px; right:10px; }
:host .color-value:hover { background:var(--ptc-color-accent); border-color:var(--ptc-action); }
:host .compare-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); }
:host .compare-list .sw { width:100%; height:170px; min-height:170px; margin-bottom:14px; }
:host .compare-list .code-copy { flex:0 1 auto; }
:host .compare-list .color-values { grid-template-columns:1fr; }
:host .compare-list .color-value { display:grid; grid-template-columns:48px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:10px 12px; min-height:44px; }
:host .compare-list .value-label { margin:0; }
:host .compare-list .value-copy { position:static; }
:host .results-note { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; margin:16px 0 0; border-radius:8px; background:var(--ptc-color-accent); color:var(--ptc-action); font-size:13px; line-height:1.6; }
:host .note-icon { background:var(--ptc-action); color:var(--ptc-color-bg); border:0; width:20px; height:20px; flex-basis:20px; margin-top:1px; }
:host .compare-missing { margin:10px 0; padding:12px; }
:host .delta-badge { color:var(--ptc-color-muted); font-size:12px; }
:host .err { font-size:14px; color:#ac2137; }
:host([data-theme="dark"]) .err { color:#ffabb8; }
:host .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; }
@container (max-width:850px) {
 :host .color-values { grid-template-columns:1fr; }
 :host .color-value { display:grid; grid-template-columns:48px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:10px 12px; }
 :host .value-label { margin:0; }
 :host .value-copy { position:static; }
}
@container (max-width:600px) {
 :host .root { padding:20px 16px; margin-bottom:14px; border-radius:14px; }
 :host .widget-header { align-items:flex-start; margin-bottom:20px; gap:12px; }
 :host .h { font-size:23px; }
 :host .dataset-badge { padding:5px 9px; font-size:12px; }
 :host .theme-btn { top:18px; right:16px; width:34px; height:34px; }
 :host .panel { padding:16px 12px; }
 :host .panel h3 { font-size:17px; }
 :host .results-panel { padding:0; }
 :host .results-panel > .row h3 { font-size:19px; }
 :host .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 :host .match-options { justify-content:flex-start; gap:10px 16px; }
 :host .option-field { gap:6px; }
 :host .option-field .num { width:64px; }
 :host .item { display:block; padding:12px; }
 :host .sw { width:100%; height:110px; min-height:110px; margin-bottom:14px; }
 :host .compare-list .sw { height:140px; min-height:140px; }
 :host .results-note { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
 :host .item, :host .color-value { transition:none; }
}