:root {
    --deep-purple: #2d1b4e;
    --light-purple: #f3f0f9;
    --accent-teal: #14b8a6;
    --dark-slate: #1e293b;
    --text-reg: #475569;
    --bg-light: #ffffff;
    --font-ui: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--light-purple); color: var(--dark-slate); font-family: var(--font-ui); line-height: 1.6; }
.boxed { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
.top-bar { background-color: var(--deep-purple); padding: 30px 0; text-align: center; }
.logo-title { color: #fff; font-size: 1.5rem; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }

/* Product Split View */
.main-area { padding: 40px 0; }
.split-view { display: flex; gap: 40px; background: var(--bg-light); border-radius: 12px; padding: 30px; box-shadow: 0 10px 25px rgba(45,27,78,0.08); }
.visuals { width: 45%; }
.specs { width: 55%; }

/* Gallery CSS Logic */
.visuals input[type="radio"] { display: none; }
.stage { position: relative; width: 100%; aspect-ratio: 1/1; background: #f8fafc; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.view img { max-width: 100%; max-height: 100%; object-fit: contain; }

#img1:checked ~ .stage #v1,
#img2:checked ~ .stage #v2,
#img3:checked ~ .stage #v3,
#img4:checked ~ .stage #v4 { opacity: 1; pointer-events: auto; z-index: 10; }

.ctrl { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--bg-light); color: var(--deep-purple); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; z-index: 20; user-select: none; font-weight: bold; }
.stage:hover .ctrl { opacity: 1; }
.ctrl:hover { background: var(--deep-purple); color: #fff; border-color: var(--deep-purple); }
.c-prev { left: 15px; } .c-next { right: 15px; }

.thumb-strip { display: flex; gap: 10px; margin-top: 15px; justify-content: center; }
.t-btn { width: 70px; height: 70px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; background: var(--bg-light); border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: 0.2s; }
.t-btn img { max-width: 80%; max-height: 80%; object-fit: contain; }
.t-btn:hover { opacity: 1; }

#img1:checked ~ .thumb-strip .t-btn[for="img1"],
#img2:checked ~ .thumb-strip .t-btn[for="img2"],
#img3:checked ~ .thumb-strip .t-btn[for="img3"],
#img4:checked ~ .thumb-strip .t-btn[for="img4"] { border-color: var(--accent-teal); opacity: 1; box-shadow: 0 0 0 1px var(--accent-teal); }

/* Specs */
.main-headline { font-size: 1.8rem; font-weight: 700; color: var(--deep-purple); margin-bottom: 25px; line-height: 1.3; }
.specs-content h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-teal); margin-bottom: 15px; }
.specs-list { list-style: none; padding-left: 0; }
.specs-list li { position: relative; padding-left: 20px; margin-bottom: 12px; color: var(--text-reg); font-size: 0.95rem; }
.specs-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--deep-purple); border-radius: 50%; }
.specs-list li strong { color: var(--dark-slate); }
.health-note { margin-top: 20px; padding: 15px 20px; background: var(--light-purple); border-radius: 8px; border-left: 4px solid var(--deep-purple); font-size: 0.9rem; color: var(--deep-purple); font-weight: 500; }

/* CTA */
.cta-center { text-align: center; margin: 60px 0; }
.btn-purchase { display: inline-block; background: var(--accent-teal); color: #fff; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; padding: 20px 60px; border-radius: 50px; text-decoration: none; box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3); transition: 0.3s; letter-spacing: 1px; }
.btn-purchase:hover { background: var(--deep-purple); box-shadow: 0 8px 20px rgba(45, 27, 78, 0.3); transform: translateY(-3px); }

/* Reviews Stacked Modern */
.module-title { font-size: 1.8rem; text-align: center; color: var(--deep-purple); margin-bottom: 40px; }
.reviews-stack { display: flex; flex-direction: column; gap: 30px; }
.review-panel { background: var(--bg-light); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; }
.r-head { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; }
.r-avatar { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.r-info { flex: 1; }
.r-name { font-size: 1.1rem; font-weight: 700; color: var(--dark-slate); }
.r-rating { color: #f59e0b; font-size: 1.2rem; margin-top: 5px; }
.r-title { color: var(--deep-purple); font-size: 1rem; font-weight: 700; margin-left: 10px; }
.r-verified { font-size: 0.8rem; color: var(--accent-teal); font-weight: 700; text-transform: uppercase; margin-top: 5px; }
.r-body p { color: var(--text-reg); font-size: 0.95rem; }
.r-photos { display: flex; gap: 15px; margin-top: 20px; }
.r-photos img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }

/* Footer */
.base-footer { background: var(--deep-purple); color: #cbd5e1; padding: 50px 0; text-align: center; }
.base-footer h3 { color: #fff; font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 20px; }
.f-links { margin-bottom: 20px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.f-links a { color: var(--accent-teal); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
.f-links a:hover { color: #fff; }
.f-copy { font-size: 0.8rem; }

/* Responsive */
@media (max-width: 900px) {
    .split-view { flex-direction: column; padding: 25px; }
    .visuals, .specs { width: 100%; }
}
@media (max-width: 600px) {
    .r-head { flex-direction: column; text-align: center; }
    .r-title { display: block; margin-left: 0; margin-top: 5px; }
    .btn-purchase { width: 100%; padding: 18px 20px; font-size: 1.1rem; }
}