/* DSilc Stairlift Colours — front end
   Everything is scoped under .dsilc-sc so it cannot clash with the theme. */

.dsilc-sc{
  --dsilc-accent:#E4212F;
  --dsilc-navy:#0F2136;
  --dsilc-line:#DDE4EC;
  --dsilc-mist:#F7F9FB;
  --dsilc-muted:#54677A;
  --dsilc-ratio:700/851;
  color:var(--dsilc-navy);
  line-height:1.7;
}
.dsilc-sc *,
.dsilc-sc *::before,
.dsilc-sc *::after{box-sizing:border-box}

.dsilc-sc__grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(28px,3.5vw,56px);
  align-items:start;
}

/* ---------- stage ---------- */
.dsilc-sc__stage{
  position:relative;
  background:#fff;
  border:1px solid var(--dsilc-line);
  padding:clamp(18px,2vw,28px);
}
.dsilc-sc__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--dsilc-ratio);
  object-fit:contain;
  background:var(--dsilc-mist);
  transition:opacity .18s ease;
}
.dsilc-sc__img.is-swapping{opacity:0}

.dsilc-sc__cap{
  position:absolute;
  left:clamp(18px,2vw,28px);
  bottom:clamp(18px,2vw,28px);
  background:var(--dsilc-navy);
  color:#fff;
  padding:13px 19px;
}
.dsilc-sc__name{
  display:block;
  font-weight:800;
  font-size:18px;
  line-height:1.2;
  color:#fff;
}
.dsilc-sc__type{
  display:block;
  font-size:12.5px;
  color:#B9CADA;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- swatch panel ---------- */
.dsilc-sc__group{margin:0 0 26px}
.dsilc-sc__group h3{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dsilc-navy);
  margin:0 0 14px;
}
.dsilc-sc__group.is-rail{
  border-top:1px solid var(--dsilc-line);
  padding-top:24px;
}

.dsilc-sc__row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.dsilc-sc__sw{
  width:78px;
  text-align:center;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  font:inherit;
  line-height:1.35;
  color:inherit;
}
.dsilc-sc__sw.is-static{cursor:default}

.dsilc-sc__chip{
  display:block;
  width:50px;
  height:50px;
  border-radius:50%;
  margin:0 auto 8px;
  box-shadow:0 0 0 1px rgba(15,33,54,.18), inset 0 -6px 12px rgba(0,0,0,.10);
  transition:transform .16s ease, box-shadow .16s ease;
}
.dsilc-sc__sw:not(.is-static):hover .dsilc-sc__chip{transform:scale(1.08)}
.dsilc-sc__sw[aria-pressed="true"] .dsilc-sc__chip{
  box-shadow:0 0 0 2px var(--dsilc-accent), inset 0 -6px 12px rgba(0,0,0,.10);
}

.dsilc-sc__label{
  display:block;
  font-size:13.5px;
  color:var(--dsilc-muted);
}
.dsilc-sc__label small{
  display:block;
  font-size:12px;
  color:#8A9AA8;
}
.dsilc-sc__sw[aria-pressed="true"] .dsilc-sc__label{
  color:var(--dsilc-navy);
  font-weight:600;
}

.dsilc-sc__sw:focus-visible{
  outline:3px solid var(--dsilc-accent);
  outline-offset:4px;
  border-radius:6px;
}

.dsilc-sc__note{
  font-size:15px;
  color:var(--dsilc-muted);
  margin:22px 0 0;
  border-left:3px solid var(--dsilc-accent);
  padding-left:16px;
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .dsilc-sc__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .dsilc-sc__sw{width:70px}
  .dsilc-sc__chip{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .dsilc-sc__img,
  .dsilc-sc__chip{transition:none}
}