/* MT-07 Cluster Mount story page. Scoped under .mt07; shared styles are in product-story.css. */

/* Hero: the product photo is light, so lean on the shared dark gradient and frame the parts higher up. */
/* .story img sets height:auto, which beats .hero-img; restore full cover so the photo fills the hero on phones. */
.mt07 .hero-img { height: 100%; object-position: 50% 30%; }
.mt07 .hero .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.mt07 .hero .eyebrow .ph { font-weight: 500; }

/* "Which one do I need?" */
.mt07 .step-title { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.01em; margin: 48px 0 18px; }
.mt07 .step-title span { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 17px; }

.mt07 .gens { display: grid; gap: 14px; }
@media (min-width: 760px) { .mt07 .gens { grid-template-columns: repeat(3, 1fr); } }
.mt07 .gen { padding: 20px 22px; }
.mt07 .gen b { display: block; font-size: 22px; letter-spacing: -.01em; }
.mt07 .gen p { margin: 6px 0 0; color: var(--muted); }
.mt07 .gen-ask { border-style: dashed; }
.mt07 .gen a, .mt07 .unsure a, .mt07 .specs a, .mt07 details a { color: var(--accent-text); }

.mt07 .styles { display: grid; gap: 18px; }
@media (min-width: 760px) { .mt07 .styles { grid-template-columns: repeat(2, 1fr); } }
.mt07 .style { overflow: hidden; display: flex; flex-direction: column; }
.mt07 .style figure { margin: 0; background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.mt07 .style figure img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.mt07 .style-copy { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mt07 .style h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 10px; }
.mt07 .style p { margin: 0 0 8px; color: var(--muted); }
.mt07 .style .if b { color: var(--text); }
.mt07 .style .note { font-size: 14px; color: var(--accent-text); }
.mt07 .style .pick { margin-top: auto; padding-top: 10px; align-self: flex-start; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.mt07 .style .pick:hover { text-decoration: underline; }
.mt07 .unsure { margin: 28px 0 0; color: var(--muted); }

/* What you get: the photo card */
.mt07 .media-card img { width: 100%; }
.mt07 .install { margin-top: 24px; }

/* Brief highlight on the buy box after "Choose this" */
.mt07 .buy-box { transition: box-shadow .4s; }
.mt07 .buy-box.picked { box-shadow: 0 0 0 2px var(--accent); }