/* ================================================================
   boats.za.net 2026 — main stylesheet
   Mobile-first, responsive, dark maritime theme
   Fonts loaded via Google Fonts in Site.Master
   ================================================================ */

/* ---------------------------------------------------------------
   CSS custom properties
--------------------------------------------------------------- */
:root {
    --ink:       #0a0e12;
    --ink2:      #131920;
    --ink3:      #1c2530;
    --steel:     #2a3845;
    --steel2:    #3a4e60;
    --horizon:   #c8830a;
    --horizon2:  #e89f20;
    --wake:      #1a7fa0;
    --text:      #e2e8ed;
    --text2:     #b0c4d4;
    --muted:     #7a9ab0;
    --border:    rgba(255,255,255,0.08);
    --border2:   rgba(255,255,255,0.14);
    --radius:    6px;
    --radius-lg: 10px;
}

/* ---------------------------------------------------------------
   Reset & base
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--ink);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--horizon); text-decoration: none; }
a:hover { color: var(--horizon2); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: #fff;
}

/* ---------------------------------------------------------------
   Layout wrapper
--------------------------------------------------------------- */
.site-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------
   Site header
--------------------------------------------------------------- */
.site-header {
    background: var(--ink);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.header-bg-img {
    position: absolute;
    inset: 0;
    background: url('/IMG/top.webp') center/cover no-repeat;
    filter: brightness(0.35);
    z-index: 0;
}

.header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,14,18,0.97) 30%, rgba(10,14,18,0.45));
    z-index: 1;
}

.header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Logo */
.logo-wrap { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon {
    width: 32px; height: 32px;
    border: 2px solid var(--horizon);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.logo-icon svg { width: 17px; height: 17px; fill: var(--horizon); }
.logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.09em; color: #fff; line-height: 1; }
.logo-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.18em; color: var(--horizon); text-transform: uppercase; }

/* Header search */
.header-search {
    flex: 1;
    max-width: 340px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-search input {
    background: none; border: none; outline: none;
    color: var(--text); font-family: 'Barlow', sans-serif; font-size: 14px; width: 100%;
}
.header-search input::placeholder { color: var(--muted); }
.header-search svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }

/* Hamburger — mobile only */
.hamburger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--text); transition: all .2s; }

/* ---------------------------------------------------------------
   Top navigation bar (desktop)
--------------------------------------------------------------- */
.site-topnav {
    background: var(--ink3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.site-topnav::-webkit-scrollbar { display: none; }

.site-topnav a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.site-topnav a:hover,
.site-topnav a.active { color: var(--horizon); border-bottom-color: var(--horizon); }

/* ---------------------------------------------------------------
   Breadcrumb
--------------------------------------------------------------- */
.breadcrumb {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    max-width: 1280px;
    margin: 0 auto;
}
.breadcrumb a { font-size: 13px; color: var(--muted); }
.breadcrumb a:hover { color: var(--horizon); }
.breadcrumb .bc-sep { font-size: 10px; color: var(--steel2); }
.breadcrumb .bc-current { font-size: 13px; color: var(--text); }

/* ---------------------------------------------------------------
   Left sidebar navigation (the old clsMenu style — preserved
   for semantic compatibility with the menu builder)
--------------------------------------------------------------- */
table.NavTop { width: 100%; border-collapse: collapse; }

td.clsMenu1, td.clsMenu1Active {
    padding: 0;
}
td.clsMenu2 { padding: 0; }

a.clsMenuA1 {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--text);
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
}
a.clsMenuA1:hover { color: var(--horizon); }
td.clsMenu1Active a.clsMenuA1 { color: var(--horizon); }

a.clsMenuA2 {
    display: block;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: var(--muted);
    padding: 9px 16px 9px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color .15s, background .15s;
}
a.clsMenuA2:hover { color: var(--horizon); background: rgba(255,255,255,0.03); }

/* ---------------------------------------------------------------
   Desktop two-column content layout
--------------------------------------------------------------- */
.content-layout {
    display: flex;
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    align-items: flex-start;
}

.content-sidebar {
    flex: none;
    width: 220px;
    border-right: 1px solid var(--border);
    background: var(--ink2);
    min-height: 400px;
}

.content-main {
    flex: 1;
    min-width: 0;
    background: var(--ink2);
}

/* ---------------------------------------------------------------
   Hero section (homepage)
--------------------------------------------------------------- */
.site-hero {
    position: relative;
    overflow: hidden;
    height: 220px;
}
.site-hero .hero-bg {
    position: absolute; inset: 0;
    background: url('/IMG/top.webp') center/cover no-repeat;
    filter: brightness(0.38);
}
.site-hero .hero-ov {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,14,18,0.94) 0%, rgba(10,14,18,0.2) 100%);
}
.site-hero .hero-content {
    position: relative; z-index: 1;
    padding: 0 20px 24px;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--horizon); margin-bottom: 7px;
}
.hero-title { font-size: 42px; color: #fff; margin-bottom: 4px; }
.hero-subtitle { font-size: 16px; color: var(--muted); font-weight: 400; }

/* Homepage search bar */
.home-search {
    padding: 12px 16px;
    background: var(--ink3);
    border-bottom: 1px solid var(--border);
}
.home-search-inner {
    max-width: 640px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 9px 18px;
    display: flex; align-items: center; gap: 10px;
}
.home-search-inner input {
    background: none; border: none; outline: none;
    color: var(--text); font-family: 'Barlow', sans-serif;
    font-size: 15px; width: 100%;
}
.home-search-inner input::placeholder { color: var(--muted); }
.home-search-inner svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }

/* ---------------------------------------------------------------
   Section label
--------------------------------------------------------------- */
.section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------
   Category grid (homepage)
--------------------------------------------------------------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card {
    background: var(--ink2);
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    transition: background .15s;
}
.cat-card:hover { background: var(--ink3); }
.cat-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--text); margin-bottom: 2px;
}
.cat-card-count { font-size: 13px; color: var(--muted); }
.cat-bar { width: 100%; height: 2px; background: var(--steel); margin-top: 8px; border-radius: 1px; overflow: hidden; }
.cat-fill { height: 100%; background: var(--horizon); border-radius: 1px; }

/* ---------------------------------------------------------------
   Make page header
--------------------------------------------------------------- */
.make-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.make-logo {
    width: 54px; height: 54px;
    background: var(--ink3); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.make-logo svg { width: 26px; height: 26px; fill: var(--horizon); }
.make-name { font-size: 26px; color: #fff; line-height: 1; margin-bottom: 3px; }
.make-meta { font-size: 13px; color: var(--muted); }
.make-badge {
    display: inline-block;
    background: rgba(200,131,10,0.1);
    border: 1px solid rgba(200,131,10,0.25);
    color: var(--horizon);
    font-size: 10px; font-family: 'Barlow Condensed', sans-serif;
    padding: 2px 7px; border-radius: 3px; margin-top: 5px;
}

/* ---------------------------------------------------------------
   Model list rows
--------------------------------------------------------------- */
.model-list { display: flex; flex-direction: column; }
.model-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .15s;
}
.model-row:hover { background: rgba(255,255,255,0.03); }
.model-thumb {
    width: 60px; height: 44px;
    background: var(--steel); border-radius: var(--radius);
    overflow: hidden; flex: none;
}
.model-thumb img { width: 100%; height: 100%; object-fit: cover; }
.model-info { flex: 1; min-width: 0; }
.model-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-detail { font-size: 11px; color: var(--muted); margin-top: 1px; }
.model-arrow { color: var(--steel2); font-size: 16px; }

/* Model grid (2-col on wider screens) */
.model-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border);
}
@media (min-width: 640px) { .model-grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------
   Flex card grid — used on size page (make cards) and
   make page (model cards). Images shown at full 4:3 ratio.
   The old 60px thumbnail list is replaced with proper cards.
--------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    padding: 0;
}
@media (min-width: 480px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(5, 1fr); } }

.card-item {
    background: var(--ink2);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: background .15s;
    overflow: hidden;
}
.card-item:hover { background: var(--ink3); }

/* Image area — fixed 4:3 aspect, never distorts the image */
.card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--ink3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}
.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* contain keeps logos sharp, no cropping */
    object-position: center;
    padding: 8px;          /* small breathing room around logos */
    transition: transform .2s;
}
.card-item:hover .card-img-wrap img { transform: scale(1.04); }

/* For boat photos (model page) use cover not contain */
.card-img-wrap.card-photo img {
    object-fit: cover;
    padding: 0;
}

/* Card body */
.card-body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
    line-height: 1.3;
}
.card-detail {
    font-size: 13px;
    color: var(--muted);
}
.card-arrow {
    font-size: 12px;
    color: var(--horizon);
    margin-top: auto;
    padding-top: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Spec page
--------------------------------------------------------------- */
.spec-hero {
    position: relative;
    background: var(--ink3);
    overflow: hidden;
    /* Height driven by image, not forced */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}
.spec-hero-img {
    /* Never stretch past natural width. On large screens a 230px image
       stays 230px — it does not fill the container. */
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 420px;   /* cap runaway tall images */
    object-fit: contain; /* show the whole image, no cropping */
    opacity: 0.9;
}
.spec-hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(10,14,18,0.85), transparent);
    padding: 16px 16px 12px;
    pointer-events: none;
}
.spec-hero-make {
    font-size: 11px; color: var(--horizon);
    font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
}
.spec-hero-name { font-size: 24px; color: #fff; line-height: 1; }

.spec-actions {
    display: flex; gap: 7px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap; align-items: center;
}
.spec-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif; font-size: 12px;
    padding: 5px 11px; border-radius: var(--radius); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.spec-btn:hover { border-color: var(--horizon); color: var(--horizon); }

.spec-tag {
    display: inline-block;
    background: rgba(26,127,160,0.14);
    border: 1px solid rgba(26,127,160,0.28);
    color: #5bb8d4;
    font-size: 10px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;
    padding: 2px 7px; border-radius: 3px;
}

.spec-group { border-bottom: 1px solid var(--border); }
.spec-group-header {
    padding: 8px 16px;
    background: rgba(255,255,255,0.02);
    display: flex; align-items: center;
}
.spec-group-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--horizon);
}

.spec-rows { }
.spec-row {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.spec-row:last-child { border-bottom: none; }
.spec-key { font-size: 13px; color: var(--muted); flex: 0 0 46%; padding-right: 8px; }
.spec-val { font-size: 13px; color: var(--text); font-weight: 500; }

/* Desktop: 2-col spec rows */
@media (min-width: 768px) {
    .spec-rows { display: grid; grid-template-columns: 1fr 1fr; }
    .spec-row { border-right: 1px solid rgba(255,255,255,0.04); }
    .spec-row:nth-child(even) { border-right: none; }
}

/* ---------------------------------------------------------------
   Sidebar content blocks
--------------------------------------------------------------- */
.sb-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sb-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.sb-link {
    display: block; font-size: 14px; color: var(--wake);
    padding: 3px 0; text-decoration: none;
}
.sb-link:hover { color: var(--horizon); }

/* ---------------------------------------------------------------
   AdSense slots
--------------------------------------------------------------- */
.ad-slot { width: 100%; overflow: hidden; }
.ad-leaderboard {
    padding: 8px 16px;
    background: rgba(200,131,10,0.04);
    border-top: 1px solid rgba(200,131,10,0.15);
    border-bottom: 1px solid rgba(200,131,10,0.15);
    text-align: center;
}
.ad-incontent {
    padding: 8px 16px;
    background: rgba(200,131,10,0.04);
    border-top: 1px solid rgba(200,131,10,0.12);
    border-bottom: 1px solid rgba(200,131,10,0.12);
    text-align: center;
}
.ad-sidebar-slot {
    margin: 14px;
    background: rgba(200,131,10,0.04);
    border: 1px solid rgba(200,131,10,0.15);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}
.ad-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); display: block; margin-bottom: 6px;
}

/* ---------------------------------------------------------------
   Bottom mobile navigation
--------------------------------------------------------------- */
.bottom-nav {
    display: flex;
    background: var(--ink3);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    z-index: 100;
}
.bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 8px 4px; gap: 3px;
    text-decoration: none; cursor: pointer;
}
.bn-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.bn-icon svg { width: 18px; height: 18px; fill: var(--steel2); transition: fill .15s; }
.bn-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--steel2); transition: color .15s;
}
.bn-item.active .bn-icon svg { fill: var(--horizon); }
.bn-item.active .bn-label { color: var(--horizon); }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer {
    background: var(--ink3);
    border-top: 1px solid var(--border);
    padding: 24px 16px;
    text-align: center;
}
.site-footer p { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--horizon); }

/* ---------------------------------------------------------------
   Stat cards (homepage sidebar)
--------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.stat-card {
    background: var(--ink3); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
}
.stat-number { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #fff; line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------
   404 / error page
--------------------------------------------------------------- */
.error-page { padding: 48px 16px; text-align: center; max-width: 480px; margin: 0 auto; }
.error-code { font-family: 'Bebas Neue', sans-serif; font-size: 96px; color: var(--horizon); line-height: 1; }
.error-msg { font-size: 18px; color: var(--text); margin: 8px 0 16px; }
.error-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.btn-home {
    display: inline-block;
    background: var(--horizon); color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 10px 24px; border-radius: var(--radius);
    text-decoration: none; transition: background .15s;
}
.btn-home:hover { background: var(--horizon2); color: #fff; }

/* ---------------------------------------------------------------
   Responsive overrides
--------------------------------------------------------------- */
@media (max-width: 767px) {
    .content-sidebar { display: none; }
    .header-search { display: none; }
    .site-topnav { display: none; }
    .hamburger { display: flex; }
    .site-hero { height: 190px; }
    .hero-title { font-size: 34px; }
}

@media (min-width: 768px) {
    .hamburger { display: none; }
    .bottom-nav { display: none; }
    .content-sidebar { display: block; }
    .header-search { display: flex; }
    .site-topnav { display: flex; }
    .make-header { padding: 20px; }
    .spec-actions { padding: 10px 20px; }
    .spec-group-header { padding: 8px 20px; }
    .spec-row { padding: 9px 20px; }
    .section-label { padding: 10px 20px 8px; }
    .breadcrumb { padding: 8px 20px; }
}

@media (min-width: 1024px) {
    .header-inner { padding: 12px 24px; }
    .hero-title { font-size: 48px; }
    .site-hero { height: 240px; }
    .content-sidebar { width: 240px; }
}

/* ---------------------------------------------------------------
   Legacy canonical bridge footer
   Shown while BOAT_OLD_MENU_PAGES has rows.
   Disappears automatically when table is emptied.
--------------------------------------------------------------- */
.legacy-footer {
    background: var(--ink);
    border-top: 2px solid rgba(200,131,10,0.2);
    padding: 24px 16px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.legacy-footer-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(200,131,10,0.5);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.legacy-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
}
@media (min-width: 640px)  { .legacy-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .legacy-footer-grid { grid-template-columns: repeat(6, 1fr); } }

.legacy-footer-group { }

.legacy-footer-heading {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(200,131,10,0.7);
    text-decoration: none;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
}
.legacy-footer-heading:hover { color: var(--horizon); }

.legacy-footer-makes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legacy-footer-makes li { margin-bottom: 2px; }

.legacy-footer-makes a {
    font-size: 12px;
    color: var(--steel2);
    text-decoration: none;
    line-height: 1.6;
    transition: color .15s;
}
.legacy-footer-makes a:hover { color: var(--muted); }

.home-section-copy {
    padding: 12px 16px 0;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------
   Compare cards — shown on spec page below related boats
--------------------------------------------------------------- */
.compare-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
}

.compare-card {
    text-decoration: none;
    display: block;
    background: var(--ink2);
    transition: background .15s;
}
.compare-card:hover { background: var(--ink3); }

.compare-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
}

.compare-thumb {
    width: 72px; height: 52px;
    border-radius: var(--radius);
    background: var(--steel);
    overflow: hidden; flex: none;
}
.compare-thumb img { width: 100%; height: 100%; object-fit: cover; }

.compare-card-body { flex: 1; min-width: 0; }

.compare-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--text); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.compare-card-sub {
    font-size: 11px; color: var(--muted); margin-top: 1px;
}

.compare-card-cta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; color: var(--horizon);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 4px;
}

@media (min-width: 640px) {
    .compare-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.home-live-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    background: transparent;
    padding: 14px 16px 24px;
}

.home-live-grid .card-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.home-live-grid .card-item:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.home-live-grid .card-body {
    padding: 13px 15px 15px;
    gap: 4px;
}

.home-live-grid .card-title {
    font-size: 18px;
    line-height: 1.2;
}

.home-live-grid .card-detail {
    font-size: 13px;
}

@media (min-width: 640px) {
    .home-live-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .home-live-grid { grid-template-columns: repeat(3, 1fr); }
}