/* Colour band and page sections (Core 1.10.0): the colour-name page design for paint, library and concept colour pages.
   One text colour per band (--cx-ink, APCA); small text on its own backing (--cx-chip); a solid main button (--cx-btn). */
.pcke-page:has(.pcke-cx-hero) .pcke-page-header h1{display:none}
.pcke-page:has(.pcke-cx-hero) .pcke-page-header{padding-bottom:0}
.pcke-detail:has(.pcke-cx-hero){--cx-card-shadow:0 1px 2px rgba(17,17,19,.06),0 8px 24px -14px rgba(17,17,19,.28)}
html[data-theme="dark"] .pcke-detail:has(.pcke-cx-hero){--cx-card-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 10px 26px -16px rgba(0,0,0,.7)}
.pcke-cx-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 48px;align-items:center;padding:clamp(28px,4vw,56px) 0 0;margin:6px 0 0;color:var(--cx-ink)}
.pcke-cx-hero::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--cx)}
.pcke-cx-hero::after{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:radial-gradient(60% 90% at 85% 10%,rgba(255,255,255,.14),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(0,0,0,.10),transparent 70%);pointer-events:none}
.pcke-cx-hero:has(details[open]){z-index:30}
.pcke-cx-hero__copy{min-width:0}
.pcke-cx-hero__eyebrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pcke-cx-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:5px 14px 5px 6px;border-radius:999px;background:var(--cx-chip);border:1px solid var(--cx-chip-line);color:inherit;font-weight:700;font-size:14px;text-decoration:none}
.pcke-cx-pill img{display:block;height:30px;width:auto;max-width:130px;padding:4px 10px;border-radius:999px;background:#fff;object-fit:contain}
.pcke-cx-pill i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--cx-chip-line)}
html body .pcke-cx-hero a.pcke-cx-pill,html body .pcke-cx-hero a.pcke-cx-pill:hover,html body .pcke-cx-hero a.pcke-cx-pill:focus{color:var(--cx-ink)}
.pcke-cx-hero__name{font-family:"PCKE Poppins",var(--pcke-font);font-weight:800;font-size:clamp(44px,6.2vw,88px);line-height:1;letter-spacing:-.035em;margin:18px 0 14px;overflow-wrap:anywhere}
.pcke-cx-hero .pcke-cx-hero__name,html[data-theme="dark"] .pcke-cx-hero .pcke-cx-hero__name{color:var(--cx-title,var(--cx-ink))}
/* supporting text large and semibold, so it reads on any colour the band picks */
.pcke-cx-hero__desc{font-size:clamp(18px,1.5vw,20px);font-weight:600;line-height:1.5;margin:0 0 6px;max-width:640px}
.pcke-cx-codes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 22px;padding:0}
.pcke-cx-codes button{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:9px 14px;border:1px solid var(--cx-chip-line);border-radius:12px;background:var(--cx-chip);color:inherit;font:inherit;cursor:pointer;transition:transform .15s}
.pcke-cx-codes button:hover{transform:translateY(-1px)}
.pcke-cx-codes small{font-size:11px;font-weight:800;letter-spacing:.08em}
.pcke-cx-codes b{font:700 14px var(--pcke-mono)}
.pcke-cx-hero__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
html body .pcke-cx-hero .pcke-cx-hero__acts .pcke-button{min-height:46px;border-radius:999px;background:var(--cx-chip);border:1px solid var(--cx-chip-line);color:var(--cx-ink)}
html body .pcke-cx-hero .pcke-cx-hero__acts .pcke-button.pcke-cx-main,html[data-theme="dark"] body .pcke-cx-hero .pcke-cx-hero__acts .pcke-button.pcke-cx-main{background:var(--cx-btn);border-color:var(--cx-btn);color:var(--cx-btn-ink)}
html body .pcke-cx-hero .pcke-cx-hero__acts .pcke-button:hover{transform:translateY(-2px)}
html body .pcke-cx-hero .pcke-cx-hero__acts .pcke-button[aria-pressed="true"]{background:var(--cx-btn);color:var(--cx-btn-ink)}
.pcke-cx-hero__acts .pcke-text-button,html body .pcke-cx-hero .pcke-cx-hero__acts a.pcke-text-button:hover{color:var(--cx-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* paint chips */
.pcke-cx-hero__fan{position:relative;height:clamp(300px,30vw,400px);display:flex;justify-content:center;align-items:flex-end}
.pcke-cx-chip{position:absolute;bottom:0;display:flex;flex-direction:column;width:clamp(150px,15vw,200px);border-radius:14px;background:#fff;color:#18233A;box-shadow:0 26px 50px -22px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.08);text-decoration:none;transform-origin:50% 120%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
html body .pcke-cx-hero a.pcke-cx-chip,html body .pcke-cx-hero a.pcke-cx-chip:hover,html body .pcke-cx-hero a.pcke-cx-chip:focus{color:#18233A}
html body .pcke-cx-hero a.pcke-cx-chip:hover .pcke-cx-chip__meta b{text-decoration:underline;text-underline-offset:3px}
.pcke-cx-chip__paint{position:relative;display:block;margin:9px 9px 0;height:clamp(170px,17vw,230px);border-radius:8px 8px 4px 4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pcke-cx-chip__paint i{position:absolute;right:10px;bottom:8px;font:700 9px/1 var(--pcke-font);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--cx-ink);opacity:.75}
.pcke-cx-chip__meta{display:flex;flex-direction:column;gap:1px;padding:10px 14px 14px}
.pcke-cx-chip__meta small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.pcke-cx-chip__meta b{font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcke-cx-chip__meta code{font-size:12px;color:#536078}
.pcke-cx-chip.is-lite{transform:translateX(-46%) rotate(-11deg)}
.pcke-cx-chip.is-dark{transform:translateX(46%) rotate(11deg)}
.pcke-cx-chip.is-dark .pcke-cx-chip__meta{align-items:flex-end;text-align:right}
.pcke-cx-chip.is-main{z-index:2;transform:translateY(-14px)}
.pcke-cx-hero__fan:hover .pcke-cx-chip.is-lite{transform:translateX(-58%) rotate(-15deg)}
.pcke-cx-hero__fan:hover .pcke-cx-chip.is-dark{transform:translateX(58%) rotate(15deg)}
a.pcke-cx-chip:hover{z-index:3}
/* the brand's own shades, light to dark */
.pcke-cx-ladder{grid-column:1/-1;display:flex;align-items:stretch;gap:4px;margin:30px 0 0;padding:12px 0 22px}
.pcke-cx-ladder__end{align-self:center;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:0 8px;flex:none}
.pcke-cx-ladder__step{flex:1;min-width:0;height:54px;border:0;border-radius:10px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0 0 6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);text-decoration:none;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.pcke-cx-ladder__step span{font:600 10px var(--pcke-mono);opacity:0;transition:opacity .15s}
.pcke-cx-ladder__step:hover,.pcke-cx-ladder__step:focus-visible{transform:translateY(-4px)}
.pcke-cx-ladder__step:hover span,.pcke-cx-ladder__step:focus-visible span,.pcke-cx-ladder__step.is-me span{opacity:1}
.pcke-cx-ladder__step.is-me{flex:1.6;height:70px;margin-top:-16px;box-shadow:0 0 0 3px var(--cx-ink),0 12px 24px -10px rgba(0,0,0,.5)}
/* jump bar */
.pcke-cx-bar{position:sticky;top:72px;z-index:20;display:flex;align-items:center;gap:18px;margin:0 calc(50% - 50vw) 8px;padding:10px max(var(--pcke-gutter),calc(50vw - var(--pcke-width) / 2 + var(--pcke-gutter)));background:var(--pcke-surface-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--pcke-line)}
.pcke-cx-bar__id{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:40px;padding:4px 12px 4px 6px;border:1px solid var(--pcke-line);border-radius:999px;background:var(--pcke-surface);color:var(--pcke-ink);font:inherit;cursor:pointer}
.pcke-cx-bar__id i{width:28px;height:28px;border-radius:50%;background:var(--cx);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pcke-cx-bar__id b{font-size:14px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcke-cx-bar__id code{font-size:12px;color:var(--pcke-muted)}
.pcke-cx-bar ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.pcke-cx-bar ul::-webkit-scrollbar{display:none}
.pcke-cx-bar a{display:block;padding:9px 13px;border-radius:999px;color:var(--pcke-muted);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.pcke-cx-bar a:hover{background:var(--pcke-bg-soft);color:var(--pcke-ink)}
/* sections below the band: one heading size, white cards with soft shadows */
.pcke-detail:has(.pcke-cx-hero) .pcke-detail-section{scroll-margin-top:150px;padding-top:clamp(28px,3vw,40px)}
.pcke-detail:has(.pcke-cx-hero) .pcke-detail-section>h2{font-family:"PCKE Poppins",var(--pcke-font);font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 18px}
.pcke-detail:has(.pcke-cx-hero) .pcke-ns h3{font-family:"PCKE Poppins",var(--pcke-font);font-size:20px;letter-spacing:-.01em}
.pcke-detail:has(.pcke-cx-hero) .pcke-wall-preview .pcke-hero__frame{border-radius:22px;overflow:hidden;box-shadow:var(--cx-card-shadow)}
.pcke-detail:has(.pcke-cx-hero) .pcke-pc{padding:10px 10px 12px;border-radius:20px;background:var(--pcke-surface);box-shadow:var(--cx-card-shadow)}
/* paint details as tiles */
.pcke-cx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.pcke-cx-facts>div{padding:14px 16px;border-radius:20px;background:var(--pcke-surface);box-shadow:var(--cx-card-shadow);min-width:0}
.pcke-cx-facts dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pcke-muted);margin:0 0 6px}
.pcke-cx-facts dd{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.pcke-cx-facts dd small{display:block;color:var(--pcke-muted);font-size:13px;margin-top:2px}
.pcke-cx-facts dd a{font-weight:600}
.pcke-cx-facts .pcke-detail-named i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
@media (max-width:1060px){.pcke-cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.pcke-cx-hero{grid-template-columns:minmax(0,1fr)}.pcke-cx-hero__fan{height:280px;order:3}.pcke-cx-ladder{order:4}}
@media (max-width:640px){.pcke-cx-facts{grid-template-columns:minmax(0,1fr)}.pcke-cx-ladder__end{display:none}.pcke-cx-ladder{gap:2px}.pcke-cx-ladder__step span{display:none}.pcke-cx-chip{width:140px}.pcke-cx-chip__paint{height:150px}.pcke-cx-hero__fan{height:250px}.pcke-cx-chip.is-lite{transform:translateX(-38%) rotate(-9deg)}.pcke-cx-chip.is-dark{transform:translateX(38%) rotate(9deg)}.pcke-cx-bar__id code{display:none}}

/* Three-chip fan (Core 1.12.2 / Creative 1.49.0): wider spread so every name shows, matching card heights, a label that fits
   the paint, and smooth motion: the side chips deal out from behind the middle one on load and ease on hover (no stacking jump). */
.pcke-cx-hero__fan .pcke-cx-chip{width:clamp(150px,14vw,190px);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.pcke-cx-hero__fan .pcke-cx-chip .pcke-cx-chip__meta{height:98px;box-sizing:border-box;justify-content:flex-start;overflow:hidden}
.pcke-cx-hero__fan .pcke-cx-chip__meta b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcke-cx-hero__fan .pcke-cx-chip__meta code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite .pcke-cx-chip__meta{padding-right:38%}
.pcke-cx-hero__fan .pcke-cx-chip.is-dark .pcke-cx-chip__meta{padding-left:38%}
.pcke-cx-hero__fan .pcke-cx-chip__paint i{left:10px;right:10px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite{transform:translateX(-60%) rotate(-9deg)}
.pcke-cx-hero__fan .pcke-cx-chip.is-dark{transform:translateX(60%) rotate(9deg)}
.pcke-cx-hero__fan .pcke-cx-chip.is-main{transform:translateY(-16px)}
.pcke-cx-hero__fan:hover .pcke-cx-chip.is-lite{transform:translateX(-66%) rotate(-11deg)}
.pcke-cx-hero__fan:hover .pcke-cx-chip.is-dark{transform:translateX(66%) rotate(11deg)}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite:hover{transform:translateX(-68%) translateY(-12px) rotate(-12deg)}
.pcke-cx-hero__fan .pcke-cx-chip.is-dark:hover{transform:translateX(68%) translateY(-12px) rotate(12deg)}
.pcke-cx-hero__fan a.pcke-cx-chip:hover{z-index:auto}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite,.pcke-cx-hero__fan .pcke-cx-chip.is-dark{animation:pcke-cx-deal 1.1s cubic-bezier(.22,1,.36,1) .15s backwards}
.pcke-cx-hero__fan .pcke-cx-chip.is-main{animation:pcke-cx-rise .8s cubic-bezier(.22,1,.36,1) backwards}
@keyframes pcke-cx-deal{from{transform:translateY(-16px) rotate(0)}}
@keyframes pcke-cx-rise{from{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){
 .pcke-cx-hero__fan .pcke-cx-chip{width:132px}
 .pcke-cx-hero__fan .pcke-cx-chip.is-lite{transform:translateX(-60%) rotate(-8deg)}
 .pcke-cx-hero__fan .pcke-cx-chip.is-dark{transform:translateX(60%) rotate(8deg)}
 .pcke-cx-hero__fan:hover .pcke-cx-chip.is-lite,.pcke-cx-hero__fan .pcke-cx-chip.is-lite:hover{transform:translateX(-62%) rotate(-9deg)}
 .pcke-cx-hero__fan:hover .pcke-cx-chip.is-dark,.pcke-cx-hero__fan .pcke-cx-chip.is-dark:hover{transform:translateX(62%) rotate(9deg)}
 .pcke-cx-hero__fan .pcke-cx-chip .pcke-cx-chip__meta{padding:8px 10px 10px;height:88px}
 .pcke-cx-hero__fan .pcke-cx-chip.is-lite .pcke-cx-chip__meta{padding-right:38%}
 .pcke-cx-hero__fan .pcke-cx-chip.is-dark .pcke-cx-chip__meta{padding-left:38%}
 .pcke-cx-hero__fan .pcke-cx-chip__paint i{font-size:8px}
 .pcke-cx-hero__fan .pcke-cx-chip__meta b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.pcke-cx-hero__fan .pcke-cx-chip{animation:none!important;transition:none}}

/* Core 1.13.0 / Creative 1.50.0: names on one line; the middle chip links to a shade brought in from the ladder; the shade in
   the middle is outlined on the ladder. */
.pcke-cx-hero__fan .pcke-cx-chip__meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.pcke-cx-hero__fan .pcke-cx-chip .pcke-cx-chip__meta{height:82px}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite .pcke-cx-chip__meta{padding-right:34%}
.pcke-cx-hero__fan .pcke-cx-chip.is-dark .pcke-cx-chip__meta{padding-left:34%}
.pcke-cx-hero__fan .pcke-cx-chip.is-lite{transform:translateX(-62%) rotate(-9deg)}
.pcke-cx-hero__fan .pcke-cx-chip.is-dark{transform:translateX(62%) rotate(9deg)}
.pcke-cx-hero__fan a.pcke-cx-chip{cursor:pointer}
.pcke-cx-hero__fan .pcke-cx-chip.is-main:not([href]){cursor:default}
.pcke-cx-hero__fan .pcke-cx-chip.is-main.is-away .pcke-cx-chip__meta b::after{content:" \2192"}
.pcke-cx-hero__fan .pcke-cx-chip__paint,.pcke-cx-hero__fan .pcke-cx-chip__meta{transition:background-color .35s ease}
.pcke-cx-ladder__step.is-on:not(.is-me){transform:translateY(-6px);box-shadow:0 0 0 2px var(--cx-ink),0 10px 20px -10px rgba(0,0,0,.5)}
.pcke-cx-ladder__step.is-on span{opacity:1}
@media (max-width:640px){
 .pcke-cx-hero__fan .pcke-cx-chip .pcke-cx-chip__meta{height:74px}
 .pcke-cx-hero__fan .pcke-cx-chip.is-lite{transform:translateX(-60%) rotate(-8deg)}
 .pcke-cx-hero__fan .pcke-cx-chip.is-dark{transform:translateX(60%) rotate(8deg)}
}
.pcke-cx-hero__fan .pcke-cx-chip__meta b,.pcke-cx-hero__fan .pcke-cx-chip__meta code,.pcke-cx-hero__fan .pcke-cx-chip__meta small{max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}