Beschrijving

/* Design System & CSS Variables */
.product-detail-container {
–primary: #1e293b; /* Slate dark */
–primary-hover: #0f172a; /* Deeper slate */
–accent: #ef4444; /* Automotive Red for badges */
–text-main: #0f172a;
–text-sub: #475569;
–bg-body: #ffffff;
–bg-card: #f8fafc;
–border-color: #e2e8f0;

–radius-md: 8px;
–radius-lg: 12px;
–shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
–shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

–spacing-section: clamp(2rem, 5vw, 4rem);

max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
color: var(–text-main);
background: var(–bg-body);

/* Global text break to prevent overflow */
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.6;
}

.product-detail-container *,
.product-detail-container *::before,
.product-detail-container *::after {
box-sizing: border-box;
}

/* Typography System (Large Types) */
.product-detail-container h1 {
font-size: clamp(32px, 4vw, 44px);
font-weight: 800;
line-height: 1.2;
margin: 0 0 1rem 0;
color: var(–primary);
}

.product-detail-container h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
line-height: 1.3;
margin: 0 0 1rem 0;
color: var(–primary);
}

.product-detail-container h3 {
font-size: clamp(20px, 2.5vw, 24px);
font-weight: 600;
margin: 0 0 0.75rem 0;
}

.product-detail-container p {
font-size: clamp(18px, 2vw, 20px);
color: var(–text-sub);
margin: 0 0 1rem 0;
}

/* Media Protocol: Scheme B (Card-based, Father-Son Separation) */
.pd-media-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(–bg-card);
border-radius: var(–radius-lg);
border: 1px dashed #cbd5e1;
}

.pd-media-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}

.pd-placeholder-text {
font-size: 18px;
font-weight: 600;
color: #94a3b8;
text-align: center;
padding: 1rem;
z-index: 1;
}

/* Layout: Sections */
.pd-section {
margin-bottom: var(–spacing-section);
}

/* Hero Section */
.pd-hero {
display: flex;
flex-direction: column;
gap: 2rem;
padding-top: var(–spacing-section);
}

.pd-hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
}

.pd-badges {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}

.pd-badge {
display: inline-block;
background: var(–bg-card);
color: var(–text-main);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
border: 1px solid var(–border-color);
}

.pd-badge.accent {
background: var(–accent);
color: #fff;
border-color: var(–accent);
}

/* Features Layout (Z-Pattern Desktop, Strict Stack Mobile) */
.pd-feature-item {
display: flex;
flex-direction: column; /* Mobile Default: Media top, Copy bottom */
gap: 2rem;
margin-bottom: var(–spacing-section);
}

.pd-feature-media,
.pd-feature-copy {
width: 100%;
}

.pd-feature-copy {
display: flex;
flex-direction: column;
justify-content: center;
}

/* Specs Table */
.pd-specs-table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}

.pd-specs-table th,
.pd-specs-table td {
padding: 1rem 1.5rem;
text-align: left;
font-size: clamp(16px, 1.5vw, 18px);
}

.pd-specs-table th {
background: var(–bg-card);
font-weight: 600;
color: var(–primary);
border-bottom: 2px solid var(–border-color);
}

.pd-specs-table tr {
border-bottom: 1px solid var(–border-color);
}

/* FAQ Section */
.pd-faq-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.pd-faq-item {
background: var(–bg-card);
padding: 1.5rem;
border-radius: var(–radius-md);
}

.pd-faq-item h3 {
color: var(–primary);
margin-bottom: 0.5rem;
}

.pd-faq-item p {
margin-bottom: 0;
}

/* Desktop Enhancements (min-width: 768px) */
@media (min-width: 768px) {
.pd-hero {
flex-direction: row;
align-items: center;
}

.pd-hero > * {
flex: 1;
}

/* Z-Pattern for Features */
.pd-feature-item {
flex-direction: row;
align-items: center;
gap: 4rem;
}

.pd-feature-item.reverse {
flex-direction: row-reverse;
}

.pd-feature-media,
.pd-feature-copy {
flex: 1;
}
}

/* Mobile Enhancements (max-width: 767px) */
@media (max-width: 767px) {
/* Mobile Table Strategy: Card-based, No Horizontal Scroll */
.pd-specs-table,
.pd-specs-table thead,
.pd-specs-table tbody,
.pd-specs-table tr,
.pd-specs-table th,
.pd-specs-table td {
display: block;
width: 100%;
}

.pd-specs-table thead {
display: none;
}

.pd-specs-table tr {
background: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: var(–radius-md);
margin-bottom: 1rem;
padding: 0.5rem;
}

.pd-specs-table td {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
padding: 0.75rem;
text-align: right;
}

.pd-specs-table td:last-child {
border-bottom: none;
}

.pd-specs-table td::before {
content: attr(data-label);
font-weight: 600;
color: var(–primary);
text-align: left;
padding-right: 1rem;
}
}