.color-element-advisor{border-top:1px solid var(--line);gap:clamp(22px,3vw,34px);margin-top:clamp(52px,7vw,92px);padding-top:clamp(34px,5vw,58px);display:grid}.color-element-heading{width:100%}.color-element-heading h2,.color-element-result-intro h3,.color-element-result-heading h3{margin:7px 0 8px}.color-element-heading p,.color-element-result-intro p,.color-element-result-heading p{color:var(--muted);margin:0;line-height:1.65}.color-element-picker{min-width:0}.color-element-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0;display:grid}.color-element-card{border:1px solid var(--line);border-radius:var(--radius-card-sm);background:var(--surface);min-width:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;align-content:start;gap:8px;padding:12px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:grid;box-shadow:0 7px 20px #11223b0b}.color-element-card:hover,.color-element-card:focus-visible{border-color:color-mix(in srgb, var(--brand) 35%, var(--line));outline:none;transform:translateY(-2px);box-shadow:0 12px 26px #11223b17}.color-element-card.is-active{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 5%, var(--surface));box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent), 0 12px 26px #11223b17}.color-element-card-swatches{border-radius:var(--radius-pill);background:var(--element-color-1);border:1px solid #11223b1a;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;height:34px;display:grid;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2e}.color-element-card-swatches>span:first-child{background:var(--element-color-1)}.color-element-card-swatches>span:nth-child(2){background:var(--element-color-2)}.color-element-card-swatches>span:nth-child(3){background:var(--element-color-3)}.color-element-card-swatches>span:nth-child(4){background:var(--element-color-4)}.color-element-card strong{font-size:.98rem;line-height:1.25}.color-element-card>span:last-child{color:var(--muted);font-size:.82rem;line-height:1.4}.color-element-results{gap:clamp(32px,5vw,52px);display:grid}.color-element-result-intro{width:100%}.color-element-result-group{border-top:1px solid var(--line);gap:18px;padding-top:clamp(22px,3vw,30px);display:grid}.color-element-result-heading{justify-content:space-between;align-items:end;gap:18px;display:flex}.color-element-result-heading>div{flex:auto;min-width:0;max-width:none}.color-element-result-heading>span{color:var(--muted);flex:none;font-size:.86rem;font-weight:700}.color-element-advisor .jotun-color-explorer--compact{gap:14px}.color-element-advisor .jotun-color-explorer--compact .jotun-color-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.color-element-more{justify-self:center}html[data-theme=dark] .color-element-card{background:var(--surface);border-color:var(--border)}html[data-theme=dark] .color-element-card.is-active{background:color-mix(in srgb, #b8d2f5 8%, var(--surface))}@media (max-width:1100px){.color-element-advisor .jotun-color-explorer--compact .jotun-color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:760px){.color-element-advisor{gap:20px;margin-top:44px;padding-top:30px}.color-element-picker{display:block;position:relative}.color-element-cards{scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;grid-template-columns:none;grid-auto-columns:minmax(166px,72%);grid-auto-flow:column;padding:2px;overflow-x:auto}.color-element-cards::-webkit-scrollbar{display:none}.color-element-card{scroll-snap-align:start;min-height:130px}.color-element-result-intro,.color-element-result-heading,.color-element-result-heading>div,.color-element-result-heading p{width:100%;max-width:none}.color-element-result-heading{align-items:start;gap:4px;display:grid}.color-element-result-heading>span{padding-top:0}.color-element-advisor .jotun-color-explorer--compact .jotun-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:420px){.color-element-cards{grid-auto-columns:minmax(156px,78%)}.color-element-result-heading{gap:4px;display:grid}}@media (prefers-reduced-motion:reduce){.color-element-card,.color-element-cards{scroll-behavior:auto;transition:none}}