.lcs-colour-fan{max-width:980px;margin:0 auto;padding:16px}
.lcs-fan-header{margin:0 0 12px 0}
.lcs-fan-title{margin:0;font-size:clamp(20px,3vw,28px);line-height:1.2}
.lcs-fan-subtitle{margin:6px 0 0 0;opacity:.75}

.lcs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.lcs-swatch{
  position:relative;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  min-height:110px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
.lcs-swatch:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.lcs-swatch:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:2px}
.lcs-swatch.is-missing{background:repeating-linear-gradient(45deg,#f1f1f1,#f1f1f1 10px,#fafafa 10px,#fafafa 20px);cursor:default}
.lcs-swatch.is-missing:hover{transform:none;box-shadow:none}

.lcs-swatch-label{font-weight:600;font-size:14px;mix-blend-mode:normal}
.lcs-swatch-hex{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;opacity:.9}

.lcs-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  z-index:99999;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Slides view (mobile-first, swipe) */
.lcs-slides{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:12px;
  padding:8px 2px 14px 2px;
  -webkit-overflow-scrolling:touch;
}
.lcs-slide{
  flex:0 0 92%;
  max-width:520px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  scroll-snap-align:start;
}
@media (min-width: 900px){
  .lcs-slide{flex-basis:520px}
}