/* Make It Yours: customization spotlight (index.html + merch.html), added Oct 18 2026 */
.custom-spot{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);border-bottom:1px solid #eadfc4}
.custom-spot .section-head{margin-bottom:1.25rem}
.custom-spot .section-head h2{font-size:clamp(1.9rem,6vw,2.6rem);margin-bottom:.35em}
.custom-spot .cs-lead{color:var(--ink);font-size:1.12rem}
.cs-steps{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.6rem;grid-template-columns:1fr;counter-reset:cs}
.cs-steps li{counter-increment:cs;position:relative;background:var(--navy);color:var(--cream);border-radius:var(--radius);padding:.75rem 1rem .75rem 3.4rem;line-height:1.35;box-shadow:var(--shadow)}
.cs-steps li::before{content:counter(cs);position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--head);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.cs-steps strong{display:block;color:#fff;font-family:var(--head);font-weight:800;font-size:1.05rem}
.cs-steps span{font-size:.92rem}
.cs-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:1fr}
.cs-card{background:var(--paper);border:1px solid #eadfc4;border-top:5px solid var(--gold);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.cs-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-bottom:1px solid #eadfc4}
.cs-card .card-body p{color:var(--muted)}
.cs-card .card-title{font-size:1.25rem}
.cs-opts{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cs-opts li{background:var(--cream);border:1px solid var(--gold-light);color:var(--navy);font-weight:800;font-size:.82rem;line-height:1.2;padding:.3rem .65rem;border-radius:999px}
.cs-card .btn{align-self:stretch}
.cs-styles{display:grid;gap:1.25rem;align-items:center;margin:1.75rem auto 0;background:var(--paper);border:1px solid #eadfc4;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;max-width:52em}
.cs-styles img{width:min(260px,70vw);margin:0 auto;border-radius:8px;border:1px solid #eadfc4}
.cs-styles h3{margin-bottom:.35rem}
.cs-styles p{color:var(--muted)}
.cs-note{color:var(--muted);font-size:.95rem;text-align:center;margin:1.25rem auto 0;max-width:44em}
@media (min-width:600px){
  .cs-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:760px){
  .cs-steps{grid-template-columns:repeat(3,1fr)}
  .cs-styles{grid-template-columns:auto 1fr;padding:1.5rem 2rem;gap:2rem}
  .cs-styles img{width:240px}
}
@media (min-width:1100px){
  .cs-grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .cs-card .card-title{font-size:1.1rem}
  .cs-card .card-body{padding:.9rem .9rem 1rem}
  .cs-card .card-body p{font-size:.95rem}
}