/**
 * Front-end layout for product views.
 */
.sp-container { max-width: 72rem; margin-left: auto; margin-right: auto; padding: 1.5rem 1rem; }
.sp-breadcrumb { font-size: 0.875rem; margin-bottom: 1rem; color: #555; }
.sp-bc-sep { margin: 0 0.35rem; opacity: 0.6; }
.sp-title { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.2; margin: 0 0 0.75rem; }
.sp-hero { margin-bottom: 2rem; }
.sp-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: #eef2ff; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.sp-lead { font-size: 1.05rem; color: #444; max-width: 48rem; }
.sp-quick-stats { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.sp-quick-stats li { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.sp-section { margin-bottom: 2.5rem; }
.sp-section-title { font-size: 1.25rem; margin: 0 0 1rem; }
.sp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
.sp-gallery-img { width: 100%; height: auto; border-radius: 0.35rem; border: 1px solid #e5e7eb; }
.sp-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sp-features h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.sp-spec-table { width: 100%; border-collapse: collapse; }
.sp-spec-table th, .sp-spec-table td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.sp-spec-table th { width: 32%; background: #f9fafb; font-weight: 600; }
.sp-cta { background: #0f172a; color: #fff; padding: 1.5rem; border-radius: 0.5rem; }
.sp-cta .sp-section-title { color: #fff; }
.sp-button { display: inline-block; background: #fff; color: #0f172a; padding: 0.5rem 1rem; border-radius: 0.35rem; text-decoration: none; font-weight: 600; }
.sp-product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sp-product-card a { text-decoration: none; color: inherit; display: block; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; background: #fff; }
.sp-product-card img { width: 100%; height: auto; display: block; }
.sp-card-title { font-size: 1rem; margin: 0.75rem; }
.sp-card-excerpt { margin: 0 0.75rem 0.75rem; font-size: 0.875rem; color: #555; }
.sp-entry-content { font-size: 1rem; line-height: 1.6; }