/* Hanrun Super A-604 product page (templates/products/hanrun-a604.php).
   Loaded only for products whose template is `hanrun-a604`. */

.hr-page { --hr-max: 980px; }
.hr-sec { max-width: var(--hr-max); margin: 0 auto 56px; }
.hr-sec h2 { font-size: 30px; line-height: 1.2; color: var(--sh-navy); margin: 0 0 10px; }
.hr-lead { font-size: 18px; color: #1f2a44; margin: 0 0 20px; max-width: 70ch; }
.hr-copy p { margin: 0 0 12px; max-width: 74ch; }

.hr-brand { width: 260px; max-width: 60%; height: auto; margin: 0 0 14px; display: block; }
.hr-wide { width: 100%; height: auto; border-radius: 14px; margin: 0 0 18px; display: block; }

/* videos: never autoplay — the visitor decides (three of them on one page) */
.hr-video {
    display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 0 0 22px;
    border-radius: 14px; background: #000; object-fit: cover;
}

/* feature cards: image + caption */
.hr-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 26px; }
.hr-feat { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hr-feat img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
    border: 1px solid var(--sh-line); background: #fff; display: block;
}
.hr-feat figcaption { font-size: 14px; line-height: 1.5; color: #445069; }

.hr-list { margin: 0; padding-left: 20px; max-width: 78ch; }
.hr-list li { margin: 0 0 8px; line-height: 1.55; }

/* spec tables, side by side on desktop */
.hr-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; align-items: start; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hr-table th, .hr-table td { border: 1px solid var(--sh-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.hr-table th { background: #f8fafc; color: var(--sh-navy); font-weight: 600; width: 40%; }

.hr-included { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hr-included img { width: 100%; height: auto; display: block; }

.hr-cta {
    max-width: var(--hr-max); margin: 0 auto; text-align: center; background: #f0fdfa;
    border: 1px solid #b8ecd9; border-radius: 16px; padding: 34px 24px;
}
.hr-cta-sub { color: var(--sh-muted); margin: 0 0 4px; }
.hr-cta h2 { font-size: 30px; color: var(--sh-navy); margin: 0 0 18px; }

@media (max-width: 720px) {
    .hr-sec h2, .hr-cta h2 { font-size: 24px; }
    .hr-included { grid-template-columns: 1fr; }
    .hr-feats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}