/* =========================================================
   La Cimbali Supera — product page styles
   Scoped with the .sp- prefix so nothing leaks into style.css
   ========================================================= */

:root {
  --sp-red: #ed1c24;
  --sp-red-deep: #7a0c10;
  --sp-ink: #0a0a0a;
  --sp-graphite: #1d1b1f;
  --sp-steel: #b9b8bc;
  --sp-mist: #f4f4f5;
  --sp-line: rgba(255, 255, 255, 0.12);
}

.sp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-radius: 0;
  line-height: 1.2;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sp-btn i { font-size: 1.1rem; }
.sp-btn-red { background: var(--sp-red); color: #fff; }
.sp-btn-red:hover { background: #c9121a; color: #fff; }
.sp-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.sp-btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.06); }
.sp-btn-dark { background: var(--sp-ink); color: #fff; }
.sp-btn-dark:hover { background: var(--sp-red); color: #fff; }
.sp-btn:focus-visible,
.sp-toggle button:focus-visible,
.sp-specs-more summary:focus-visible {
  outline: 2px solid var(--sp-red) !important;
  outline-offset: 3px;
}

/* =========================================================
   HERO
   ========================================================= */
.sp-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 55% 70% at 72% 58%, rgba(237, 28, 36, 0.28), transparent 65%),
    linear-gradient(180deg, #000 0%, var(--sp-graphite) 100%);
  padding: 4rem 0 0;
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 2rem;
  min-height: 640px;
}
.sp-hero-copy { padding-bottom: 4rem; }

.sp-kicker {
  color: var(--sp-steel);
  font-size: 0.95rem;
  font-weight: 300;
  margin: 0 0 1.75rem;
}
.sp-kicker strong { color: #fff; font-weight: 500; }

.sp-title { margin: 0 0 1.25rem; line-height: 1; }
.sp-title img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
.sp-tagline {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 200;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  color: #fff;
}
.sp-lead {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 2.25rem;
}
.sp-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Stage (machine + glow) */
.sp-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
}
.sp-machine {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 640 / 1230;
}
.sp-machine::before {               /* backlight halo */
  content: "";
  position: absolute;
  inset: 18% -35% 10%;
  background: radial-gradient(closest-side, rgba(237, 28, 36, 0.55), rgba(237, 28, 36, 0) 70%);
  filter: blur(10px);
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sp-machine::after {                /* floor reflection */
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -10px;
  height: 36px;
  background: radial-gradient(closest-side, rgba(237, 28, 36, 0.45), transparent);
  z-index: 0;
}
.sp-machine picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.sp-machine picture img { width: 100%; height: 100%; object-fit: contain; }
.sp-machine picture[aria-hidden="true"] { opacity: 0; }
.sp-machine.is-pulsing::before { animation: sp-pulse 0.9s ease; }

@keyframes sp-pulse {
  0% { opacity: 0.85; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* Load sequence — the single orchestrated moment */
.sp-hero.is-ready .sp-machine { animation: sp-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sp-hero.is-ready .sp-machine::before { animation: sp-bloom 1.6s ease both 0.3s; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes sp-bloom { from { opacity: 0; transform: scale(0.7); } to { opacity: 0.85; transform: scale(1); } }

/* Configuration switch */
.sp-config {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  margin: 2rem 0 0;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--sp-line);
}
.sp-config-label {
  font-size: 0.85rem;
  color: var(--sp-steel);
  margin: 0 0 0.75rem;
}
.sp-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px;
  gap: 4px;
}
.sp-toggle button {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 0;
  padding: 0.7rem 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.sp-toggle button:hover { color: #fff; }
.sp-toggle button[aria-pressed="true"] { background: var(--sp-red); color: #fff; }
.sp-config-note {
  min-height: 3.2em;
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* Performance rail */
.sp-rail {
  position: relative;
  border-top: 1px solid var(--sp-line);
  background: rgba(0, 0, 0, 0.35);
}
.sp-rail-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
}
.sp-rail-item {
  padding: 1.75rem 1rem;
  border-left: 1px solid var(--sp-line);
}
.sp-rail-item:first-child { border-left: 0; padding-left: 0; }
.sp-rail-num {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 200;
  line-height: 1;
  color: #fff;
}
.sp-rail-num small { font-size: 0.45em; font-weight: 400; margin-left: 0.15em; color: var(--sp-steel); }
.sp-rail-txt {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--sp-steel);
}

/* =========================================================
   INTRO + FEATURES (light, uses site .pro-dtl-cover pattern)
   ========================================================= */
.sp-intro {
  max-width: 46rem;
  margin: -1.5rem auto 4rem;
  text-align: center;
  color: var(--bk-grade-550, #333);
  font-size: 1.1rem;
  line-height: 1.8;
}
.sp-feature .pro-dtl-img { overflow: hidden; background: #000; }
.sp-feature .pro-dtl-img img { aspect-ratio: 16 / 10; object-fit: cover; }
.sp-feature .pro-dtl-con p { line-height: 1.8; }
.sp-feature .pro-dtl-con ul {
  margin: 0 0 1.5rem;
  padding: 0;
}
.sp-feature .pro-dtl-con li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  line-height: 1.6;
}
.sp-feature .pro-dtl-con li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--sp-red);
}
.sp-model-note {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--bk-grade-400, #707070);
  border-left: 2px solid var(--sp-red);
  padding-left: 0.75rem;
}

/* =========================================================
   MILK (dark)
   ========================================================= */
.sp-dark {
  color: #fff;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(237, 28, 36, 0.18), transparent 70%),
    var(--sp-ink);
}
.sp-sec-head { max-width: 44rem; margin: 0 0 3rem; }
.sp-sec-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.sp-sec-head p { margin: 0; line-height: 1.8; font-weight: 300; }
.sp-dark .sp-sec-head p { color: rgba(255, 255, 255, 0.7); }

.sp-milk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.sp-milk-item figure { margin: 0 0 1.25rem; overflow: hidden; }
.sp-milk-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sp-milk-item h3 { font-size: 1.2rem; font-weight: 500; margin: 0 0 0.6rem; }
.sp-milk-item p { color: rgba(255, 255, 255, 0.7); font-weight: 300; line-height: 1.75; margin: 0; }
.sp-milk-foot {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sp-line);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  line-height: 1.8;
  max-width: 52rem;
}
.sp-milk-foot strong { color: #fff; font-weight: 500; }

/* =========================================================
   MODELS + SPEC TABLE
   ========================================================= */
.sp-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.sp-model {
  padding: 2rem;
  border: 1px solid var(--bk-grade-150, #d6d6d6);
  border-top: 3px solid var(--sp-ink);
}
.sp-model.is-top { border-top-color: var(--sp-red); }
.sp-model h3 { font-size: 1.6rem; font-weight: 300; margin: 0 0 0.35rem; }
.sp-model h3 span { font-weight: 600; }
.sp-model .sp-model-for { color: var(--bk-grade-400, #707070); margin: 0 0 1.25rem; font-size: 0.95rem; }
.sp-model ul { margin: 0; padding: 0; }
.sp-model li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bk-grade-100, #eaeaea);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sp-model li:last-child { border-bottom: 0; }

.sp-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.sp-table thead th {
  background: var(--sp-ink);
  color: #fff;
  font-weight: 500;
  padding: 1rem 1.25rem;
  text-align: center;
}
.sp-table thead th:first-child { text-align: left; font-weight: 300; color: var(--sp-steel); }
.sp-table tbody th[colspan] {
  background: var(--sp-mist);
  color: var(--sp-ink);
  font-weight: 600;
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-top: 12px solid #fff;
}
.sp-table td,
.sp-table tbody th[scope="row"] {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--bk-grade-100, #eaeaea);
  vertical-align: middle;
}
.sp-table tbody th[scope="row"] { font-weight: 400; color: #333; text-align: left; }
.sp-table td { text-align: center; color: var(--sp-ink); }
.sp-table .sp-yes { color: var(--sp-red); font-size: 1.2rem; }
.sp-table .sp-no { color: var(--bk-grade-250, #adadad); }
.sp-table-foot { margin: 1rem 0 0; font-size: 0.85rem; color: var(--bk-grade-400, #707070); }

.sp-specs-more {
  margin-top: 2.5rem;
  border: 1px solid var(--bk-grade-150, #d6d6d6);
}
.sp-specs-more summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-specs-more summary::-webkit-details-marker { display: none; }
.sp-specs-more summary i { transition: transform 0.25s ease; color: var(--sp-red); }
.sp-specs-more[open] summary i { transform: rotate(45deg); }
.sp-specs-more .sp-specs-body { padding: 0 1.25rem 1.5rem; }
.sp-kv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}
.sp-kv dt { font-size: 0.85rem; color: var(--bk-grade-400, #707070); font-weight: 400; margin-bottom: 0.25rem; }
.sp-kv dd { margin: 0; font-weight: 500; line-height: 1.5; }

/* =========================================================
   VENUES
   ========================================================= */
.sp-venues {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.sp-venue { position: relative; margin: 0; overflow: hidden; background: #000; }
.sp-venue img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  opacity: 0.88;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.sp-venue:hover img { transform: scale(1.04); opacity: 1; }
.sp-venue figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
}
.sp-venue figcaption strong { display: block; font-weight: 500; font-size: 1.05rem; }
.sp-venue figcaption span { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); margin-top: 0.25rem; line-height: 1.5; }

/* =========================================================
   SERVICE STRIP + CTA
   ========================================================= */
.sp-service {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
  padding: 3rem 0;
  border-top: 1px solid var(--bk-grade-150, #d6d6d6);
  border-bottom: 1px solid var(--bk-grade-150, #d6d6d6);
}
.sp-service h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; line-height: 1.25; margin: 0; }
.sp-service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin: 0 0 1.5rem; }
.sp-service-list h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem; }
.sp-service-list p { margin: 0; color: #555; line-height: 1.7; font-size: 0.95rem; }
.sp-service-link { color: var(--sp-ink); font-weight: 500; border-bottom: 1px solid var(--sp-red); padding-bottom: 2px; }
.sp-service-link:hover { color: var(--sp-red); }

.sp-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 45% 90% at 85% 50%, rgba(237, 28, 36, 0.35), transparent 70%),
    var(--sp-ink);
}
.sp-cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2rem;
  align-items: center;
}
.sp-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 200; line-height: 1.2; margin: 0 0 1rem; }
.sp-cta p { color: rgba(255, 255, 255, 0.72); font-weight: 300; line-height: 1.8; margin: 0; max-width: 36rem; }
.sp-cta-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.sp-cta-actions .sp-btn { justify-content: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .sp-rail-list { grid-template-columns: repeat(3, 1fr); }
  .sp-rail-item:nth-child(4) { border-left: 0; padding-left: 0; }
  .sp-rail-item:nth-child(n+4) { border-top: 1px solid var(--sp-line); }
}
@media (max-width: 991.98px) {
  .sp-hero { padding-top: 2.5rem; }
  .sp-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .sp-hero-copy { padding-bottom: 0; text-align: center; }
  .sp-title img { margin: 0 auto; max-width: 340px; }
  .sp-lead { margin-left: auto; margin-right: auto; }
  .sp-hero-actions { justify-content: center; }
  .sp-machine { width: min(72%, 320px); }
  .sp-config { max-width: 420px; }
  .sp-milk-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-milk-item { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.5rem; align-items: center; }
  .sp-milk-item figure { margin: 0; }
  .sp-models { grid-template-columns: 1fr; }
  .sp-kv { grid-template-columns: 1fr 1fr; }
  .sp-service { grid-template-columns: 1fr; gap: 1.5rem; }
  .sp-cta-grid { grid-template-columns: 1fr; }
  .sp-cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .sp-rail-list { grid-template-columns: 1fr 1fr; }
  .sp-rail-item { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--sp-line); }
  .sp-rail-item:nth-child(-n+2) { border-top: 0; }
  .sp-milk-item { grid-template-columns: 1fr; }
  .sp-venues { grid-template-columns: 1fr; }
  .sp-venue img { aspect-ratio: 16 / 10; }
  .sp-service-list { grid-template-columns: 1fr; }
  .sp-kv { grid-template-columns: 1fr; }
  .sp-model { padding: 1.5rem; }
  .sp-hero-actions .sp-btn, .sp-cta-actions .sp-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-hero.is-ready .sp-machine,
  .sp-hero.is-ready .sp-machine::before,
  .sp-machine.is-pulsing::before { animation: none !important; }
  .sp-machine picture, .sp-venue img { transition: none; }
}

/* ---------- Configurator prompt ---------- */
.sp-configurator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 1.5rem 2rem;
  margin: 0 0 3rem;
  background: var(--sp-mist);
  border-left: 3px solid var(--sp-red);
}
.sp-configurator h3 { font-size: 1.2rem; font-weight: 500; margin: 0 0 0.35rem; }
.sp-configurator p { margin: 0; color: #555; line-height: 1.7; max-width: 44rem; }
.sp-configurator .sp-btn { flex-shrink: 0; }

/* ---------- Optional 360 video ---------- */
.sp-video { background: #000; margin-bottom: 4rem; }
.sp-video video { display: block; width: 100%; max-height: 80vh; object-fit: cover; }

@media (max-width: 767.98px) {
  .sp-configurator { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
}

/* ---------- Film section (after hero) ---------- */
.sp-film {
  background: var(--sp-ink);
  color: #fff;
  padding: 4.5rem 0 5rem;
}
.sp-film-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-bottom: 1.75rem;
}
.sp-film-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 200; margin: 0; }
.sp-film-head p { margin: 0; color: rgba(255, 255, 255, 0.6); font-weight: 300; }
.sp-film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sp-line), 0 30px 80px -30px rgba(237, 28, 36, 0.45);
}
.sp-film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.sp-film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
.sp-film-start {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #fff;
  font-weight: 500;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent);
}
.sp-film-start:hover { color: #fff; }
.sp-film-start-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sp-red);
  font-size: 2.4rem;
  transition: transform 0.25s ease;
}
.sp-film-start-ico i { margin-left: 4px; }
.sp-film-start:hover .sp-film-start-ico { transform: scale(1.06); }
.sp-film-start:focus-visible { outline: 2px solid var(--sp-red); outline-offset: -6px; }
.sp-film-frame.is-playing .sp-film-start,
.sp-film-frame.is-playing .sp-film-poster { display: none; }
.sp-film-sound {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.sp-film-sound i { color: var(--sp-red); font-size: 1.1rem; transition: color 0.25s ease; }
.sp-film-sound:hover { background: var(--sp-red); border-color: var(--sp-red); }
.sp-film-sound:hover i { color: #fff; }
.sp-film-sound:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.sp-film-sound[hidden] { display: none; }
.sp-table-foot a { color: var(--sp-ink); border-bottom: 1px solid var(--sp-red); margin-left: 0.25rem; }

@media (max-width: 575.98px) {
  .sp-film { padding: 3rem 0 3.5rem; }
  .sp-film-start-ico { width: 64px; height: 64px; font-size: 1.9rem; }
}

/* ---------- At a glance ---------- */
.sp-glance {
  max-width: 64rem;
  margin: -1.5rem auto 4.5rem;
  border-top: 2px solid var(--sp-ink);
}
.sp-glance-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 0 0.25rem;
}
.sp-glance-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  margin: 0;
}
.sp-glance-list > div {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bk-grade-100, #eaeaea);
}
.sp-glance-list dt { font-size: 0.8rem; font-weight: 400; color: var(--bk-grade-400, #707070); margin-bottom: 0.2rem; }
.sp-glance-list dd { margin: 0; font-weight: 500; line-height: 1.45; color: var(--sp-ink); }

/* ---------- FAQ ---------- */
.sp-faq { max-width: 56rem; margin: 0 auto; border-top: 1px solid var(--bk-grade-150, #d6d6d6); }
.sp-faq-item { border-bottom: 1px solid var(--bk-grade-150, #d6d6d6); }
.sp-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary h3 { font-size: 1.05rem; font-weight: 500; margin: 0; line-height: 1.5; color: var(--sp-ink); }
.sp-faq-item summary i { color: var(--sp-red); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.25s ease; }
.sp-faq-item[open] summary i { transform: rotate(45deg); }
.sp-faq-item summary:hover h3 { color: var(--sp-red); }
.sp-faq-item summary:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 4px; }
.sp-faq-item p { margin: 0 0 1.5rem; max-width: 46rem; color: #444; line-height: 1.8; }

@media (max-width: 991.98px) {
  .sp-glance-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .sp-glance-list { grid-template-columns: 1fr; }
}

/* width/height attributes are set for layout stability; let CSS keep the ratio */
.sp-feature .pro-dtl-img img,
.sp-milk-item img,
.sp-venue img { height: auto; }