/* Card Shell */
.spc-card{
  border: var(--spc-border,1px solid #e5e7eb);
  border-radius: 6px;
  background:#fff;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-width: 56rem;
  margin: 0 auto 4rem auto;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@media (min-width: 640px){ .spc-card{ padding: 32px; } }

/* Header */
.spc-header{ display:flex; flex-direction:column; gap:16px; margin-bottom: 16px; }
@media (min-width: 768px){
  .spc-header{ flex-direction:row; }
  .spc-media{ width:50%; order:1; }
  .spc-body{ width:50%; order:2; padding-left: 24px; }
}
.spc-img{ width:100%; aspect-ratio:16/9; object-fit:contain; border:1px solid #d1d5db; background:#fff; }
.spc-credit{ color:#6b7280; }

/* Title / Badge */
.spc-badge{ color: var(--spc-accent,#ef4444); font-weight:700; font-size:14px; }
.spc-title{ margin: 6px 0 8px; font-weight:700; line-height:1.1; font-size:28px; }
@media (min-width:768px){ .spc-title{ font-size:32px; } }
.spc-title-link{ color:#111827; text-decoration:none; }
.spc-title-link:hover{ color: var(--spc-accent,#ef4444); }

/* Rating */
.spc-rating{ display:flex; align-items:center; gap:12px; color: var(--spc-accent,#ef4444); font-weight:700; }
.spc-rating-visual{ display:inline-flex; gap:6px; line-height:1; }
.spc-rating-label{ color:#ef4444; font-weight:700; }

/* Accordion */
.spc-accordion{ border-top: var(--spc-divider,1px solid #e5e7eb); }
.spc-section{ border-bottom: var(--spc-divider,1px solid #e5e7eb); }
.spc-trigger{ width:100%; background:transparent; border:0; display:flex; align-items:center; justify-content:space-between; text-align:left; padding: 16px 0; cursor:pointer; }
.spc-trigger h3{ margin:0; font-weight:700; }
.spc-chevron{ color: var(--spc-accent,#ef4444); transition: transform .2s ease; }
.spc-trigger[aria-expanded="true"] .spc-chevron{ transform: rotate(180deg); }
.spc-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.spc-panel-inner{ padding: 0 0 16px 0; }
.spc-panel-inner p{ margin: 0 0 12px 0; }
.spc-panel-inner ul{ margin: 0; padding-left: 1.25rem; }
.spc-panel-inner li{ margin: .25rem 0; }

/* Specs layout */
.spc-specs > div{ display:flex; justify-content:space-between; gap:24px; padding:12px 0; border-bottom: 1px solid #e5e7eb; }
.spc-specs > div:last-child{ border-bottom:none; }
.spc-specs .spc-spec-key{ flex:1; font-weight:700; padding:0 8px; }
.spc-specs .spc-spec-val{ flex:1; padding:0 8px; }

/* CTA */
.spc-cta-wrap{ display:flex; justify-content:center; padding:24px 0; border-bottom: 1px solid #e5e7eb; }
.spc-cta{ display:inline-block; min-width: 14rem; text-align:center; font-weight:800; padding: 12px 18px; border-radius: 8px; background:#111827; color:#fff; text-decoration:none; }
.spc-cta-shadow{ box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.18); }
.spc-cta:hover{ filter:brightness(.97); }

/* Learn more */
.spc-learn{ text-align:center; padding: 16px 0 8px; }
.spc-learn-label{ margin-top: 16px; font-size: 12px; color:#6b7280; font-weight:700; letter-spacing:.04em; }
.spc-learn-link{ display:inline-block; margin-top:6px; color: var(--spc-accent,#ef4444); font-weight:700; text-decoration: underline; }

/* Editor helpers */
.spc-section-editor{ border:1px dashed #e5e7eb; padding:12px; border-radius:8px; margin:8px 0; background:#fafafa; }
.spc-section-editor-title{ font-weight:700; margin-bottom:8px; }