/* Reuse the live public stylesheet and keep new classifieds rules scoped. */
body { color: #333; }
.live-header h1 { font-size: 2rem; letter-spacing: 0; line-height: 1.3; }
.live-header img { width: auto; height: 56px; }
.main-nav { gap: 1rem; font-size: 1rem; }
.hero.hero--photo { min-height: 0; }
.hero.hero--photo p { color: white; }
.browse { padding: 0 0 32px; }
.browse.detail { padding-top: 12px; }
.cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
.boat-card { border-radius: 8px; color: #333; }
.card-body h3 { font-size: 1.3rem; letter-spacing: 0; }
.section-heading h2 { font-size: 1.5rem; letter-spacing: 0; }
.section-heading select { max-width: 200px; }
.testbar { line-height: 1.5; }
.testbar a { color: #57491e; }
.notice { background: #e0f1f7; }
.detail-grid { gap: 30px; }
.detail .main-photo { height: 340px; }
body.admin-page { background: #f3f4f6; color: #111827; }
.admin-page .site-header { background: #111827; color: #e5e7eb; }
.admin-page .brand small { color: #cbd5e1; }
.admin-page { --blue: #06b6d4; --ink: #111827; }
.admin-page .brand img { width: 90px; }
@media(max-width:700px) {
 .live-header { padding: 1rem; gap: 1rem; }
 .live-header h1 { font-size: 1.2rem; }
 .live-header img { height: 34px; }
 .main-nav { gap: .2rem; font-size: .9rem; justify-content: flex-start; }
 .hero.hero--photo .hero-inner { margin-top: 0; }
 .cards { grid-template-columns: 1fr; }
 .detail .main-photo { height: 280px; }
 .admin-page .brand { letter-spacing: 0; }
}

/* The shared live stylesheet must not reinstate desktop dimensions on phones. */
.live-header{grid-template-columns:minmax(0,1fr) auto;gap:20px}.live-header h1{min-width:0}
.main-nav{width:100%;flex-wrap:wrap}.main-nav a{min-height:44px;display:flex;align-items:center}
.detail .main-photo{height:auto;max-height:520px;object-fit:contain}
.admin-page .brand{min-width:0}.admin-page .brand img{flex-shrink:0}
@media(max-width:980px){.detail-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .live-header{padding:16px;gap:12px}.live-header h1{font-size:clamp(18px,4.8vw,25px)}.live-header img{max-width:70px;height:auto}
 .main-nav{padding:8px;gap:0;font-size:14px}.main-nav a{padding:8px 10px}
 main{margin:16px auto;padding:0 16px}.hero.hero--photo{margin:16px 0 24px;padding:48px 18px;min-height:250px}
 .hero.hero--photo h2{font-size:30px}.hero.hero--photo p{font-size:16px;line-height:1.6}
 .hero.hero--photo .hero-inner{margin-top:0}.browse{padding:0 0 28px}
 .cards{grid-template-columns:minmax(0,1fr)}.detail .main-photo{height:auto;max-height:none}
 .admin-page .brand img{width:64px;height:auto}.admin-page .brand small{font-size:11px}
 .detail .boat-info h1{font-size:28px}.section-heading select{max-width:70%}
}