/* Top Shelf Yacht Sales theme.
 *
 * Every value here was measured off the live GoDaddy site with computed
 * styles on 2026-08-08 — none of it is eyeballed. Fonts are the same three
 * families the live site loads from Google, self-hosted as variable woff2
 * (one file per family covers every weight we use).
 */

@font-face {
    font-family: 'Josefin Sans';
    src: url("../fonts/JosefinSans-var.c39a5d04d267.woff2") format('woff2-variations');
    font-weight: 100 700;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url("../fonts/Raleway-var.5032e93bbe3d.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url("../fonts/Bitter-var.96cf871a3942.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ts-black: #000;
    --ts-dark: #161616;
    --ts-white: #fff;
    --ts-text-on-dark: #f7f7f7;
    --ts-overlay: rgba(240, 240, 240, .8);
    --ts-accent: #0978e5;
    --ts-accent-hover: #076cce;
    /* The search row uses the same blue as the buttons — measured off the
       Premium Value Inventory button, which is plain --ts-accent. Referencing
       the token rather than repeating #0978e5 keeps them from drifting apart. */
    --ts-search-row: var(--ts-accent);

    --ts-font-ui: 'Josefin Sans', Arial, sans-serif;
    --ts-font-heading: 'Raleway', arial, sans-serif;
    --ts-font-serif: 'Bitter', Georgia, serif;

    --ts-heading-spacing: 2px;
    --ts-logo-size: 250px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

body.theme-topshelf {
    background: var(--ts-black);
    color: var(--ts-text-on-dark);
    font-family: var(--ts-font-ui);
    margin: 0;
}

.theme-topshelf h1,
.theme-topshelf h2,
.theme-topshelf h3 {
    font-family: var(--ts-font-heading);
    font-weight: 700;
    letter-spacing: var(--ts-heading-spacing);
    color: var(--ts-text-on-dark);
}

.theme-topshelf h1 { font-size: clamp(2rem, 5vw, 54px); }
.theme-topshelf h2 { font-size: clamp(1.5rem, 3vw, 34px); }

.theme-topshelf a { color: inherit; text-decoration: none; }
.theme-topshelf a:hover { color: var(--ts-accent); }

.ts-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ── Header: dark bar with a white logo tile breaking out of it ───────── */

.ts-header {
    background: var(--ts-dark);
    position: relative;
}

.ts-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 300px;
}

.ts-logo-tile {
    background: var(--ts-white);
    width: var(--ts-logo-size);
    height: 265px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    /* The tile hangs below the header bar on the live site */
    margin-bottom: -1.5rem;
}

.ts-logo-tile img { max-width: 100%; height: auto; }

/* Wordmark fallback until the real logo is uploaded — the tile is white, so
   this must not inherit the on-dark text colour. */
.ts-logo-tile span {
    color: var(--ts-black);
    font-family: var(--ts-font-heading);
    font-weight: 700;
    letter-spacing: var(--ts-heading-spacing);
    text-align: center;
    font-size: 1.1rem;
}

.ts-nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    letter-spacing: normal;
}

.ts-nav--right { justify-content: flex-end; }

.ts-nav a { color: var(--ts-text-on-dark); }
.ts-nav a:hover { color: var(--ts-accent); }

/* The live site marks the current page with a leading dash */
/* Live's desktop nav marks the current page with a leading dash, in the
   same white as the rest. (The blue belongs to the hidden mobile menu.) */
.ts-nav__item--active > a::before { content: '– '; }

.ts-nav__toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--ts-text-on-dark);
    font-family: var(--ts-font-ui);
    font-size: 16px;
    cursor: pointer;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.ts-section { padding: 40px 0; }
.ts-section--black { background: var(--ts-black); }
.ts-section--dark { background: var(--ts-dark); }
.ts-section--light { background: var(--ts-white); color: var(--ts-black); }
.ts-section--accent { background: var(--ts-accent); }

.ts-section--light h1,
.ts-section--light h2,
.ts-section--light h3 { color: var(--ts-black); }

.ts-section__title {
    text-align: center;
    margin: 0 0 1.5rem;
}

/* ── Hero: inset video, not full-bleed ────────────────────────────────── */

.ts-hero {
    background: var(--ts-dark);
    padding: 0 0 2rem;
}

.ts-hero__frame {
    position: relative;
    max-width: 1480px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ts-hero__frame iframe,
.ts-hero__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.ts-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 1rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.ts-btn {
    display: inline-block;
    background: var(--ts-accent);
    color: var(--ts-white);
    font-family: var(--ts-font-ui);
    letter-spacing: 1px;
    padding: .75rem 2rem;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
}
.ts-btn:hover { background: var(--ts-accent-hover); color: var(--ts-white); }

.ts-btn--ghost {
    background: transparent;
    border: 1px solid var(--ts-text-on-dark);
}
.ts-btn--ghost:hover { background: var(--ts-accent); border-color: var(--ts-accent); }

/* ── Cards (boats, brokers, reviews) ──────────────────────────────────── */

.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.ts-card { background: var(--ts-dark); }
.ts-section--light .ts-card { background: var(--ts-white); color: var(--ts-black); }

.ts-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.ts-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-card__body { padding: 1rem; }
.ts-card__title { font-size: 1.05rem; margin: 0 0 .35rem; letter-spacing: 1px; }
.ts-card__price { font-family: var(--ts-font-serif); font-size: 1.1rem; margin: 0; }

/* ── Broker cards ─────────────────────────────────────────────────────── */

.ts-broker { text-align: center; }
.ts-broker img { border-radius: 50%; width: 220px; height: 220px; object-fit: cover; }
.ts-broker__quote { font-family: var(--ts-font-serif); font-style: italic; }

/* ── Review strip ─────────────────────────────────────────────────────── */

.ts-review { background: var(--ts-dark); padding: 1.25rem; }
.ts-review__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.ts-review__initial {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--ts-accent); color: var(--ts-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ts-font-heading); font-weight: 700;
}
.ts-review__quote { font-family: var(--ts-font-serif); font-style: italic; margin: 0 0 .5rem; }

/* ── Forms ────────────────────────────────────────────────────────────── */

.ts-form { display: grid; gap: 1rem; max-width: 640px; }
.ts-form label { font-size: .9rem; letter-spacing: 1px; display: block; margin-bottom: .25rem; }
.ts-form input,
.ts-form textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #444;
    background: var(--ts-white);
    color: var(--ts-black);
    font-family: var(--ts-font-ui);
    box-sizing: border-box;
}
.ts-form .errorlist { color: #ff8080; list-style: none; padding: 0; margin: .25rem 0 0; font-size: .85rem; }
.ts-honeypot { position: absolute; left: -9999px; }

.ts-alert { padding: .75rem 1rem; margin-bottom: 1rem; }
.ts-alert--error { background: #4a1010; color: #ffd7d7; }
.ts-alert--success { background: #0f3d1e; color: #d7ffe3; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.ts-footer {
    background: var(--ts-black);
    padding: 2.5rem 0;
    text-align: center;
    font-size: .9rem;
}

.ts-footer__links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1rem; }
.ts-footer__social { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; }

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ts-header__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 0;
        padding: 1rem 0;
        gap: .5rem;
    }
    .ts-logo-tile { order: -1; width: 180px; height: 190px; margin-bottom: 0; }
    .ts-nav { flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
    .ts-nav--right { justify-content: center; }
    .ts-broker img { width: 160px; height: 160px; }
}

/* ── Photo band ───────────────────────────────────────────────────────────
   Full-bleed strip of boat photos between the intro and financing bands.
   One slide is visible at a time; the rest are stacked behind it. */

.ts-photoband {
    position: relative;
    height: clamp(260px, 42vw, 600px);
    overflow: hidden;
    background: var(--ts-black);
}

.ts-photoband__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.ts-photoband__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ts-photoband__slide.is-active { opacity: 1; }

/* ── Showcase carousel ────────────────────────────────────────────────── */

.ts-carousel { position: relative; }

.ts-carousel__track {
    position: relative;
    min-height: clamp(240px, 40vw, 560px);
}

.ts-carousel__slide {
    display: none;
    margin: 0;
    text-align: center;
}
.ts-carousel__slide.is-active { display: block; }
.ts-carousel__slide img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.ts-carousel__slide figcaption {
    margin-top: .75rem;
    font-family: var(--ts-font-serif);
}

.ts-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .55);
    color: var(--ts-white);
    border: 0;
    font-size: 2rem;
    line-height: 1;
    padding: .25rem .75rem;
    cursor: pointer;
}
.ts-carousel__btn:hover { background: var(--ts-accent); }
.ts-carousel__btn--prev { left: 0; }
.ts-carousel__btn--next { right: 0; }

.ts-carousel__count {
    text-align: center;
    margin: .75rem 0 0;
    font-family: var(--ts-font-ui);
}

/* ── Social strip ─────────────────────────────────────────────────────── */

.ts-social {
    background: var(--ts-accent);
    padding: .85rem 0;
}
.ts-social__inner {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    font-family: var(--ts-font-ui);
    letter-spacing: 1px;
}
.ts-social__inner a { color: var(--ts-white); }
.ts-social__inner a:hover { color: var(--ts-dark); }

/* ── Contact cards ────────────────────────────────────────────────────── */

.ts-quote {
    font-family: var(--ts-font-serif);
    font-style: italic;
    max-width: 46rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.ts-quote footer { font-style: normal; margin-top: .5rem; }

.ts-contact__line { text-align: center; margin: .35rem 0; }
.ts-contact__form { display: flex; justify-content: center; margin-top: 1.5rem; }

/* ── Subscribe band ───────────────────────────────────────────────────── */

.ts-subscribe { background: var(--ts-accent-hover); }
.ts-subscribe__form {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.ts-subscribe__form input {
    padding: .65rem .75rem;
    border: 1px solid #444;
    min-width: 16rem;
    font-family: var(--ts-font-ui);
}
.ts-subscribe .ts-btn { background: var(--ts-black); }
.ts-subscribe .ts-btn:hover { background: var(--ts-dark); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ── Spacing calibrated against the live site ─────────────────────────────
   Measured section heights at 1400px: reviews 717px, social strip 89px.
   The defaults came out at 297px and 43px, so both get their real breathing
   room rather than being left visibly tighter than the original. */

.ts-reviews { padding: 64px 0 72px; }
.ts-reviews .ts-review { padding: 2rem 1.5rem; min-height: 15rem; }
.ts-reviews .ts-review__quote { font-size: 1.05rem; line-height: 1.6; }
.ts-reviews .ts-review__initial { width: 3rem; height: 3rem; font-size: 1.1rem; }
.ts-reviews .ts-section__title { margin-bottom: 2.5rem; }

.ts-social { padding: 1.9rem 0; }

/* The intro and financing bands also sit tighter than the original. */
.ts-section--accent { padding: 56px 0; }


/* Band padding measured against the live page (live/ours at 1400px):
   intro 488/280, financing 963/678, subscribe 329/214. These close the gap
   without changing any content. */

.ts-section--black { padding: 64px 0; }
.ts-section--accent { padding: 72px 0; }
.ts-subscribe { padding: 64px 0 72px; }
.ts-subscribe .ts-section__title { margin-bottom: 1rem; }

.ts-section--accent img { max-width: 100%; height: auto; }

/* ── Nav overflow ("More") ────────────────────────────────────────────────
   Mirrors the live site: items that don't fit collapse into a dropdown
   instead of wrapping the nav onto a second line. Above ~1885px nothing
   collapses and the button never appears, which is what the original does. */

.ts-nav--right { flex-wrap: nowrap; overflow: visible; }

/* Nav items must keep their natural width. Left to shrink (the flex default)
   the labels squeeze and wrap instead of overflowing, so the content width
   always equals the container and the overflow menu can never trigger. */
.ts-nav > li { flex: 0 0 auto; white-space: nowrap; }

.ts-nav__more { position: relative; }

.ts-nav__more-btn {
    background: none;
    border: 0;
    color: var(--ts-text-on-dark);
    font-family: var(--ts-font-ui);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}
.ts-nav__more-btn:hover { color: var(--ts-accent); }

.ts-nav__more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .75rem);
    background: var(--ts-dark);
    list-style: none;
    margin: 0;
    padding: .75rem 0;
    min-width: 15rem;
    z-index: 40;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ts-nav__more.is-open .ts-nav__more-menu { display: block; }
.ts-nav__more-menu li { padding: .5rem 1.25rem; white-space: nowrap; }
.ts-nav__more-menu a { color: var(--ts-text-on-dark); }
.ts-nav__more-menu a:hover { color: var(--ts-accent); }

@media (max-width: 900px) {
    /* On mobile the live site uses a stacked menu, so overflow is not wanted. */
    .ts-nav--right { flex-wrap: wrap; }
    .ts-nav__more { display: none; }
}

/* ── Intro and reviews bands: match the live proportions ──────────────────
   Measured at 1400px (live / ours before this block):
     intro   488 / 328   — live sets the copy larger and wider apart
     reviews 717 / 512   — live cards are taller with more internal space */

.ts-intro { padding: 96px 0 104px; }
.ts-intro h2 { margin: 0 0 1.5rem; }
.ts-intro p {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 52rem;
    margin: 0 auto 2.25rem;
}

.ts-reviews { padding: 88px 0 96px; }
.ts-reviews .ts-review { padding: 2.5rem 1.75rem; min-height: 18rem; }
.ts-reviews .ts-grid { gap: 2rem; }

/* ── Contact cards ────────────────────────────────────────────────────────
   The live site inverts the hierarchy you'd expect: "Contact Us" is a small
   21px eyebrow and the broker's name/number is the 36px headline. Matching
   that, because the broker's number is the thing meant to be read first. */

/* Needs to out-specify `.theme-topshelf h2`, which would otherwise force the
   eyebrow back up to the generic heading size. */
.theme-topshelf .ts-contact__eyebrow {
    font-size: 21px;
    text-align: center;
    margin: 0 0 1.5rem;
}

.ts-contact__call,
.ts-contact__brand {
    font-family: var(--ts-font-heading);
    font-weight: 700;
    letter-spacing: var(--ts-heading-spacing);
    font-size: clamp(1.5rem, 3vw, 36px);
    text-align: center;
    margin: 0 0 1.25rem;
    line-height: 1.3;
}

.ts-contact__brand { margin-top: 2rem; }

/* ── "Drop us a line!" disclosure ─────────────────────────────────────── */

.ts-dropline { margin-top: 1.5rem; text-align: center; }

.ts-dropline__toggle {
    background: none;
    border: 0;
    color: var(--ts-text-on-dark);
    font-family: var(--ts-font-heading);
    font-weight: 700;
    letter-spacing: var(--ts-heading-spacing);
    font-size: 24px;
    cursor: pointer;
    padding: .5rem 0;
}
.ts-dropline__toggle:hover { color: var(--ts-accent); }

.ts-dropline__panel { display: flex; justify-content: center; margin-top: 1.5rem; }
.ts-dropline__panel[hidden] { display: none; }

/* Contact bands run taller on the live site than the default section padding
   gives (live 719/622 against 513/483 measured at 1400px). */

.ts-contact { padding: 96px 0 104px; }
.ts-contact .ts-quote { margin: 2rem auto 2.5rem; line-height: 1.8; }
.ts-contact__brand { margin-top: 2.75rem; }
.ts-contact__line { margin: .75rem 0 0; font-size: 1.05rem; }
.ts-dropline { margin-top: 2.5rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Buttons and review cards, measured off the live site 2026-08-09.
   These override the earlier approximations further up the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Buttons are pills, everywhere ────────────────────────────────────────
   Live: radius 48px, Raleway 700, 16px, letter-spacing 2px, padding 8px 40px.
   Blue with white text on dark bands; white with #303030 text on the blue
   subscribe band. */

.theme-topshelf .ts-btn,
.theme-topshelf .ts-dropline__toggle,
.theme-topshelf button[type="submit"] {
    display: inline-block;
    background: var(--ts-accent);
    color: var(--ts-white);
    font-family: var(--ts-font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 8px 40px;
    min-height: 56px;
    border: 0;
    border-radius: 48px;
    cursor: pointer;
    line-height: 40px;
}

.theme-topshelf .ts-btn:hover,
.theme-topshelf .ts-dropline__toggle:hover,
.theme-topshelf button[type="submit"]:hover {
    background: var(--ts-accent-hover);
    color: var(--ts-white);
}

.theme-topshelf .ts-btn--ghost {
    background: transparent;
    border: 1px solid var(--ts-text-on-dark);
}

/* On the blue band the button inverts. */
.theme-topshelf .ts-subscribe .ts-btn,
.theme-topshelf .ts-subscribe button[type="submit"] {
    background: var(--ts-white);
    color: #303030;
}
.theme-topshelf .ts-subscribe .ts-btn:hover,
.theme-topshelf .ts-subscribe button[type="submit"]:hover {
    background: #ececec;
    color: #303030;
}

/* ── Review cards: white, not dark ────────────────────────────────────────
   Live card is 290x419, white, padding 32px, soft shadow, square corners.
   The initial is a large light-grey letter, not an avatar chip, and the
   quote is Josefin Sans rather than an italic serif. */

.theme-topshelf .ts-reviews .ts-section__title { font-size: 42px; }

.theme-topshelf .ts-review {
    background: var(--ts-white);
    color: #1b1b1b;
    padding: 32px 24px;
    border-radius: 0;
    box-shadow: rgba(0, 0, 0, .18) 2px 6px 30px 0;
    text-align: center;
    min-height: 419px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.theme-topshelf .ts-review__head {
    display: block;
    margin-bottom: .5rem;
}

.theme-topshelf .ts-review__initial {
    display: block;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: #cbcbcb;
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 64px;
    line-height: 1.2;
    margin: 0 auto;
}

.theme-topshelf .ts-review__head strong {
    display: block;
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 24px;
    color: #1b1b1b;
}

.theme-topshelf .ts-review__quote {
    font-family: var(--ts-font-ui);
    font-style: normal;
    font-size: 18px;
    line-height: 1.5;
    color: #1b1b1b;
    margin: 1.25rem 0 1rem;
}

.theme-topshelf .ts-review a { color: #0775e0; font-size: 18px; }
.theme-topshelf .ts-review a:hover { color: var(--ts-accent-hover); }

/* Live review cards are a fixed 290px wide and centred, not stretched to fill
   the grid track (ours came out 379px). */
/* align-items: start — grid's default `stretch` was making all three cards as
   tall as the longest quote (449px each). The live cards size individually:
   385/405/405. */
.theme-topshelf .ts-reviews .ts-grid {
    grid-template-columns: repeat(auto-fit, 290px);
    justify-content: center;
    align-items: start;
    gap: 2rem;
}

@media (max-width: 700px) {
    .theme-topshelf .ts-reviews .ts-grid {
        grid-template-columns: minmax(0, 290px);
    }
}


/* ── Subscribe band, measured off the live site ───────────────────────────
   Heading Raleway 700 39px #fff; body Josefin Sans 16px #fff; the field is an
   underline (transparent, white text, 0.5px white bottom rule) with a visible
   label rather than a placeholder; button white on #303030 at 14px. */

.theme-topshelf .ts-subscribe { padding: 72px 0; }
.theme-topshelf .ts-subscribe .ts-section__title {
    font-size: 39px;
    color: var(--ts-white);
    margin-bottom: 1rem;
}
.theme-topshelf .ts-subscribe__body {
    font-family: var(--ts-font-ui);
    font-size: 16px;
    color: var(--ts-white);
    text-align: center;
    max-width: 683px;
    margin: 0 auto 1.5rem;
}

.theme-topshelf .ts-subscribe__form {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    max-width: 683px;
    margin: 0 auto;
}

.theme-topshelf .ts-subscribe__field { flex: 1 1 514px; text-align: left; }

.theme-topshelf .ts-subscribe__field label {
    display: block;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    color: var(--ts-white);
    margin-bottom: .25rem;
}

.theme-topshelf .ts-subscribe__field input {
    width: 100%;
    height: 56px;
    background: transparent;
    color: var(--ts-white);
    font-family: var(--ts-font-ui);
    font-size: 16px;
    border: 0;
    border-bottom: .5px solid var(--ts-white);
    border-radius: 0;
    padding: 8px 8px 8px 0;
    box-sizing: border-box;
}
.theme-topshelf .ts-subscribe__field input:focus {
    outline: none;
    border-bottom-width: 2px;
}

.theme-topshelf .ts-subscribe .ts-btn { font-size: 14px; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   Typography parity pass — every value below was read off the live page
   with computed styles at 1400px. The live site is NOT uniformly Raleway:
   it mixes Bitter and Josefin Sans at weight 400 for whole bands, which is
   what made our version read as heavier and flatter than the original.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: live tracks the headline at 4px, not 2px. */
.theme-topshelf h1 { letter-spacing: 4px; }

/* On-dark heading colour is #e2e2e2 on the intro and contact bands, and pure
   white on financing, reviews and subscribe. We had #f7f7f7 everywhere. */

/* ── Intro band ───────────────────────────────────────────────────────── */
.theme-topshelf .ts-intro { padding: 100px 0; }
.theme-topshelf .ts-intro h2 {
    font-size: 39px;
    color: #e2e2e2;
}

/* ── Financing band: Bitter, weight 400, 4px tracking ─────────────────── */
.theme-topshelf .ts-financing { padding: 100px 0; }
.theme-topshelf .ts-financing .ts-section__title {
    font-family: var(--ts-font-serif);
    font-weight: 400;
    font-size: 64px;
    letter-spacing: 4px;
    color: var(--ts-white);
}
.theme-topshelf .ts-financing__sub {
    font-family: var(--ts-font-serif);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: 4px;
    color: var(--ts-white);
    text-align: center;
    margin: 1.5rem 0 0;
}

/* ── Showcase band ────────────────────────────────────────────────────── */
.theme-topshelf .ts-showcase { padding: 100px 0; }
.theme-topshelf .ts-showcase .ts-section__title {
    font-size: 54px;
    color: rgb(27, 27, 27);
}

/* Carousel arrows: live uses a lighter scrim and no glyph. */
.theme-topshelf .ts-carousel__btn {
    background: rgba(22, 22, 22, .25);
    width: 36px;
    height: 44px;
    font-size: 0;
    padding: 0;
}
.theme-topshelf .ts-carousel__btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border-top: 2px solid var(--ts-white);
    border-right: 2px solid var(--ts-white);
}
.theme-topshelf .ts-carousel__btn--prev::after { transform: rotate(-135deg); }
.theme-topshelf .ts-carousel__btn--next::after { transform: rotate(45deg); }
.theme-topshelf .ts-carousel__btn:hover { background: rgba(22, 22, 22, .5); }

/* ── Reviews band ─────────────────────────────────────────────────────── */
.theme-topshelf .ts-reviews { padding: 56px 0; }
.theme-topshelf .ts-reviews .ts-section__title {
    font-size: 39px;
    color: var(--ts-white);
}
.theme-topshelf .ts-review__head strong { font-size: 22px; }

/* ── Contact bands: Josefin Sans 400, not Raleway 700 ─────────────────── */
.theme-topshelf .ts-contact { padding: 100px 0; }
.theme-topshelf .ts-contact__eyebrow {
    font-size: 19px;
    color: #e2e2e2;
}
.theme-topshelf .ts-contact__call,
.theme-topshelf .ts-contact__brand {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: 2px;
    color: #e2e2e2;
}
.theme-topshelf .ts-contact__line { color: #e2e2e2; }

/* "Drop us a line!" is a 22px Josefin Sans label sitting above the button. */
.theme-topshelf .ts-dropline__label {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    text-align: center;
    margin: 0 0 1rem;
}

/* ── Buttons: live renders them at 14px ───────────────────────────────── */
.theme-topshelf .ts-btn,
.theme-topshelf .ts-dropline__toggle,
.theme-topshelf button[type="submit"] {
    font-size: 14px;
    min-height: 56px;
    line-height: 40px;
}

/* ── Footer: live is a 364px band with 56px padding ───────────────────── */
.theme-topshelf .ts-footer { padding: 56px 0; }

/* Residuals from the parity check against production.
   The CTA came out 72px tall because padding and line-height compounded;
   pinning the box height makes every button land on the live 56px. */

.theme-topshelf .ts-btn,
.theme-topshelf .ts-dropline__toggle,
.theme-topshelf button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-height: 56px;
    padding: 0 40px;
    line-height: 1;
}

.theme-topshelf .ts-social { padding: 2.4rem 0; }   /* live band is 89px */

.theme-topshelf .ts-review__head strong { letter-spacing: 2px; }

/* ── Review card: length and the closing attribution ──────────────────────
   Live cards run 385-405px, sized by their content — our 419px min-height
   was forcing them ~80px taller. Each card also ends with the reviewer's
   name repeated in small grey caps-weight text, which we were not rendering.
   Quote text is 16px, not 18px. */

/* Cards size to their content, as the live ones do. A min-height would only
   reintroduce dead space below the quote: our quotes wrap shorter than theirs,
   so a forced 385px leaves a hole rather than a fuller card. */
.theme-topshelf .ts-review {
    box-sizing: border-box;
    min-height: 0;
    padding: 32px 24px;
}

/* Live sets the 64px initial in a 112px block. This is real measured height,
   not padding for its own sake — it closes part of the card-height gap without
   reintroducing dead space. */
.theme-topshelf .ts-review__initial { line-height: 1.75; }

.theme-topshelf .ts-review__quote {
    font-size: 16px;
    margin: 1rem 0 .75rem;
}

.theme-topshelf .ts-review a { font-size: 16px; }

/* Live sits the name 24px under the link with margin-top:0 — the content fills
   the card. `margin-top: auto` pushed it to the bottom instead, opening a gap
   whenever the quote was shorter than the card's minimum height. */
.theme-topshelf .ts-review__attrib {
    display: block;
    margin-top: 24px;
    padding-top: 0;
    font-family: var(--ts-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: normal;
    color: rgb(145, 145, 145);
}

/* ═══════════════════════════════════════════════════════════════════════
   Inner pages. Every live page is a STACK OF FULL-WIDTH BANDS, not a card
   grid: /inventory is one band per boat, /sold-archive one per past sale.
   All values measured off the live pages at 1400px.
   ═══════════════════════════════════════════════════════════════════════ */

.theme-topshelf .ts-prose {
    max-width: 52rem;
    margin: 0 auto;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    line-height: 1.8;
    color: #e2e2e2;
    text-align: left;
}
.theme-topshelf .ts-prose p { margin: 0 0 1.25rem; }

/* ── Inventory ────────────────────────────────────────────────────────── */
.theme-topshelf .ts-invhero { padding: 100px 0; background: transparent; }
.theme-topshelf .ts-invhero__title {
    font-size: 84px;
    color: var(--ts-white);
    margin: 0 0 2rem;
}

/* Search / filter bar. Not sticky on purpose: the boat bands below are
   full-bleed photography, and a bar floating over them fights the pictures. */
.theme-topshelf .ts-invfilter { padding: 0 0 1rem; background: transparent; }
.theme-topshelf .ts-invfilter__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    background: var(--ts-search-row);
    padding: 1.25rem 1.5rem;
}
.theme-topshelf .ts-invfilter__field { display: flex; flex-direction: column; gap: .35rem; }
.theme-topshelf .ts-invfilter__field--grow { flex: 1 1 260px; }
/* White on black, boxed. The captions sit on the blue row, so "on black" means
   the label carries its own black ground rather than inheriting the row's. */
.theme-topshelf .ts-invfilter__field label {
    align-self: flex-start;
    background: var(--ts-black);
    color: var(--ts-white);
    font-family: var(--ts-font-ui);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: .2rem .55rem;
}
/* All three controls are white on black, so the blue row reads as the frame and
   the fields as the things you touch. */
.theme-topshelf .ts-invfilter__field input,
.theme-topshelf .ts-invfilter__field select {
    font-family: var(--ts-font-ui);
    font-size: 15px;
    padding: .7rem .75rem;
    background: var(--ts-black);
    color: var(--ts-white);
    border: 1px solid #333;
    box-sizing: border-box;
    min-height: 44px;   /* comfortable touch target */
}
.theme-topshelf .ts-invfilter__field input { width: 100%; }
.theme-topshelf .ts-invfilter__field input::placeholder { color: #9a9a9a; }
.theme-topshelf .ts-invfilter__field select { min-width: 11rem; }
.theme-topshelf .ts-invfilter__field input:focus,
.theme-topshelf .ts-invfilter__field select:focus {
    /* White, not the accent: accent blue on the medium-blue row is a 1.5:1
       focus ring, which is no focus ring at all. */
    outline: 2px solid var(--ts-white);
    outline-offset: 1px;
    border-color: var(--ts-white);
}
/* On the blue row the button inverts, exactly as it does on the subscribe band:
   accent blue against medium blue is a 1.5:1 button, which is no button at all.
   Selector shape matches .ts-subscribe's because `button[type="submit"]` in the
   base block outranks a lone class. */
.theme-topshelf .ts-invfilter .ts-btn,
.theme-topshelf .ts-invfilter button[type="submit"] {
    background: var(--ts-white);
    color: var(--ts-black);
}
.theme-topshelf .ts-invfilter .ts-btn:hover,
.theme-topshelf .ts-invfilter button[type="submit"]:hover {
    background: #ececec;
    color: var(--ts-black);
}
.theme-topshelf .ts-invfilter__count {
    font-family: var(--ts-font-ui);
    font-size: 14px;
    letter-spacing: 1px;
    color: #9a9a9a;
    margin: 1rem 0 0;
}
.theme-topshelf .ts-invfilter__clear { color: var(--ts-accent); text-decoration: underline; }
.theme-topshelf .ts-invempty__title { margin: 0 0 1rem; }

@media (max-width: 700px) {
    /* One control per row; a half-width select next to a search box is unusable
       on a phone, and the field labels stop carrying their meaning. */
    .theme-topshelf .ts-invfilter__form { flex-direction: column; align-items: stretch; }
    /* flex-grow now grows along the COLUMN, which stretched the search field to
       fill the leftover height and left a 400px hole above the Make label. */
    .theme-topshelf .ts-invfilter__field--grow { flex: 0 0 auto; }
    .theme-topshelf .ts-invfilter__field select { width: 100%; min-width: 0; }
    .theme-topshelf .ts-invfilter__submit { width: 100%; }
}

.theme-topshelf .ts-boatband { padding: 100px 0; }
.theme-topshelf .ts-boatband__brand {
    font-size: 28px;
    color: #e2e2e2;
    margin: 0 0 1rem;
}
.theme-topshelf .ts-boatband:first-of-type .ts-boatband__brand { font-size: 39px; }
.theme-topshelf .ts-boatband__title {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 1.5rem;
}
.theme-topshelf .ts-boatband__media { display: block; max-width: 1048px; margin: 0 auto; }
.theme-topshelf .ts-boatband__media img { width: 100%; height: auto; display: block; }
.theme-topshelf .ts-boatband__blurb {
    max-width: 52rem;
    margin: 1.5rem auto 0;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    line-height: 1.7;
    color: #e2e2e2;
}
.theme-topshelf .ts-boatband__cta {
    font-family: var(--ts-font-ui);
    font-size: 16px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin-top: 1.25rem;
}

/* ── Broker pages ─────────────────────────────────────────────────────── */
.theme-topshelf .ts-brokerband { padding: 100px 0; }
.theme-topshelf .ts-brokerband__quote {
    font-size: 19px;
    color: #e2e2e2;
    margin: 0 0 2rem;
}
.theme-topshelf .ts-brokerband__sub,
.theme-topshelf .ts-brokerband__heading {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 1.5rem;
}
.theme-topshelf .ts-brokerband__heading { font-family: var(--ts-font-heading); font-weight: 700; font-size: 19px; }
.theme-topshelf .ts-brokerband__contact { font-size: 39px; margin-bottom: 2rem; }
.theme-topshelf .ts-brokerband__buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

.theme-topshelf .ts-brokerphotos {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.theme-topshelf .ts-brokerphotos img { max-width: 500px; height: auto; }

/* ── Sold archive ─────────────────────────────────────────────────────── */
.theme-topshelf .ts-archiveintro { padding: 100px 0; }
.theme-topshelf .ts-archiveintro__title { font-size: 19px; color: #e2e2e2; margin: 0 0 1.5rem; }
.theme-topshelf .ts-archiveintro__media { margin: 0 0 1.5rem; }
.theme-topshelf .ts-archiveintro__media img { max-width: 500px; height: auto; }

.theme-topshelf .ts-archiveband { padding: 100px 0; }
.theme-topshelf .ts-archiveband__title {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 1.5rem;
}
.theme-topshelf .ts-archiveband img { max-width: 1048px; width: 100%; height: auto; }

/* ── Premium Value ────────────────────────────────────────────────────── */
.theme-topshelf .ts-pvhero { padding: 100px 0; }
.theme-topshelf .ts-pvhero__title { font-size: 54px; color: #e2e2e2; margin: 0 0 1.5rem; }
.theme-topshelf .ts-pvhero__sub {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 1.25rem;
}
.theme-topshelf .ts-pvhero__media { margin-top: 2rem; }
.theme-topshelf .ts-pvhero__media img { max-width: 1048px; width: 100%; height: auto; }

.theme-topshelf .ts-pvlist { padding: 100px 0; }
.theme-topshelf .ts-pvlist__heading { font-size: 19px; color: #e2e2e2; margin: 0 0 2.5rem; }
.theme-topshelf .ts-pventry { margin-bottom: 3.5rem; }
.theme-topshelf .ts-pventry__title {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 1rem;
}
.theme-topshelf .ts-pventry img { max-width: 500px; width: 100%; height: auto; }
.theme-topshelf .ts-pventry__line,
.theme-topshelf .ts-pventry__cta {
    font-family: var(--ts-font-ui);
    font-size: 16px;
    color: #e2e2e2;
    margin: .5rem 0 0;
}

.theme-topshelf .ts-pvcontact { padding: 100px 0; }
.theme-topshelf .ts-pvcontact__heading { font-size: 39px; color: #e2e2e2; margin: 0 0 2rem; }

/* ── Financing ────────────────────────────────────────────────────────── */
.theme-topshelf .ts-finhero { padding: 100px 0; }
.theme-topshelf .ts-finhero img { max-width: 1048px; width: 100%; height: auto; }
.theme-topshelf .ts-finagent { padding: 100px 0; }
.theme-topshelf .ts-finagent__title { font-size: 39px; color: var(--ts-text-on-dark); margin: 0 0 1rem; }
.theme-topshelf .ts-finagent__role {
    font-family: var(--ts-font-ui);
    font-size: 16px;
    color: #e2e2e2;
    margin: 0 0 2rem;
}
.theme-topshelf .ts-finapply { padding: 100px 0; }
.theme-topshelf .ts-finapply__frame {
    width: 100%;
    min-height: 2750px;   /* the live application form runs ~2949px tall */
    border: 0;
}

/* ── Boat detail ──────────────────────────────────────────────────────────
   Four bands on the live page: headline over the lead photo, the spec sheet
   on white, a photo carousel with thumbnails, then Call/Email. */

.theme-topshelf .ts-boathero { padding: 100px 0; }
.theme-topshelf .ts-boathero__eyebrow { font-size: 19px; color: #e2e2e2; margin: 0 0 1rem; }
.theme-topshelf .ts-boathero__title {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 2rem;
}
.theme-topshelf .ts-boathero__media img { max-width: 1048px; width: 100%; height: auto; }

.theme-topshelf .ts-boatspecs { padding: 100px 0; }
.theme-topshelf .ts-boatspecs__title { font-size: 19px; color: rgb(27, 27, 27); margin: 0 0 2rem; }
.theme-topshelf .ts-boatspecs__heading {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: rgb(27, 27, 27);
    margin: 2rem 0 1rem;
}
.theme-topshelf .ts-boatspecs__list,
.theme-topshelf .ts-boatspecs__body {
    font-family: var(--ts-font-ui);
    font-size: 16px;
    line-height: 1.7;
    color: rgb(27, 27, 27);
    max-width: 52rem;
}
.theme-topshelf .ts-boatspecs__list { list-style: none; padding: 0; margin: 0; }
.theme-topshelf .ts-boatspecs__body ul { padding-left: 1.25rem; }

/* Features shot beside the Features/Propulsion lists.

   The row only becomes two columns when a photo has actually been chosen —
   with no photo the single column behaves exactly as it did before, so no
   listing gains an empty gutter. */
.theme-topshelf .ts-boatspecs__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.75rem;
}
.theme-topshelf .ts-boatspecs__col {
    flex: 1 1 20rem;
    min-width: 0;
}
.theme-topshelf .ts-boatspecs__shot {
    flex: 0 1 26rem;
    margin: 1.25rem 0 0;
}
.theme-topshelf .ts-boatspecs__shot img {
    width: 100%;
    height: auto;
    display: block;
}

.theme-topshelf .ts-boatspecs__tagline {
    font-family: var(--ts-font-serif);
    font-style: italic;
    font-size: 17px;
    color: rgb(60, 60, 60);
    max-width: 52rem;
    margin: .5rem 0 0;
}
/* Sits on the light spec band, so it takes the accent rather than white. */
.theme-topshelf .ts-boatspecs__flag {
    display: inline-block;
    font-family: var(--ts-font-ui);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ts-white);
    background: var(--ts-accent);
    padding: .25rem .75rem;
    margin: .75rem 0 0;
}

/* ── Gallery carousel ─────────────────────────────────────────────────── */
.theme-topshelf .ts-boatgallery { padding: 100px 0; }
.theme-topshelf .ts-boatgallery__title { font-size: 19px; color: #e2e2e2; margin: 0 0 2rem; text-align: center; }

.theme-topshelf .ts-gallery { max-width: 1043px; margin: 0 auto; outline: none; }
.theme-topshelf .ts-gallery__stage { position: relative; }
.theme-topshelf .ts-gallery__slide { display: none; margin: 0; }
.theme-topshelf .ts-gallery__slide.is-active { display: block; }
.theme-topshelf .ts-gallery__slide img { width: 100%; height: auto; display: block; }

.theme-topshelf .ts-gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 44px;
    background: rgba(22, 22, 22, .25);
    border: 0;
    cursor: pointer;
}
.theme-topshelf .ts-gallery__btn:hover { background: rgba(22, 22, 22, .55); }
.theme-topshelf .ts-gallery__btn--prev { left: 0; }
.theme-topshelf .ts-gallery__btn--next { right: 0; }
.theme-topshelf .ts-gallery__btn::after {
    content: '';
    display: block;
    width: 10px; height: 10px;
    margin: 0 auto;
    border-top: 2px solid var(--ts-white);
    border-right: 2px solid var(--ts-white);
}
.theme-topshelf .ts-gallery__btn--prev::after { transform: rotate(-135deg); }
.theme-topshelf .ts-gallery__btn--next::after { transform: rotate(45deg); }

.theme-topshelf .ts-gallery__count {
    text-align: center;
    font-family: var(--ts-font-ui);
    color: #e2e2e2;
    margin: .75rem 0;
}

.theme-topshelf .ts-gallery__thumbs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}
.theme-topshelf .ts-gallery__thumb {
    flex: 0 0 auto;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.theme-topshelf .ts-gallery__thumb.is-active { border-color: var(--ts-accent); }
.theme-topshelf .ts-gallery__thumb img { display: block; width: 70px; height: 70px; object-fit: cover; }

/* ── The full-screen photo viewer ─────────────────────────────────────────
   Every photo in one scrolling column. The stage picture opens it; the
   thumbnails still just change the stage. */

.theme-topshelf .ts-gallery__slide img { cursor: zoom-in; }

/* The keyboard/screen-reader route to the same action. Sits clear of the
   prev/next controls, which are vertically centred at the stage's edges. */
.theme-topshelf .ts-gallery__expand {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 1;
    border: 0;
    border-radius: 4px;
    padding: .35rem .55rem;
    font-size: 1.1rem;
    line-height: 1;
    color: #fff;
    background: rgba(22, 22, 22, .55);
    cursor: zoom-in;
}
.theme-topshelf .ts-gallery__expand:hover { background: rgba(22, 22, 22, .8); }

.theme-topshelf .ts-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
}
/* [hidden] loses to `display: flex` on specificity alone, and the viewer would
   sit open over the page for ever. */
.theme-topshelf .ts-lightbox[hidden] { display: none; }

.theme-topshelf .ts-lightbox__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    color: #fff;
    background: #161616;
}
.theme-topshelf .ts-lightbox__count { margin: 0; font-size: .9rem; letter-spacing: .04em; }
.theme-topshelf .ts-lightbox__close {
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: .2rem .5rem;
    cursor: pointer;
}
.theme-topshelf .ts-lightbox__close:focus-visible,
.theme-topshelf .ts-lightbox__scroll:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: -2px;
}

.theme-topshelf .ts-lightbox__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    /* A dragged flick on a phone should settle on a photo rather than halfway
       between two, but never trap a slow scroll — hence proximity. */
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: touch;
}
.theme-topshelf .ts-lightbox__item {
    margin: 0 auto 1rem;
    max-width: 1600px;
    scroll-snap-align: center;
}
.theme-topshelf .ts-lightbox__item:last-child { margin-bottom: 0; }
.theme-topshelf .ts-lightbox__item img {
    display: block;
    width: 100%;
    height: auto;
    /* Whole photo, never cropped — the same rule the stage follows, and two
       thirds of this library is portrait or 4:3. */
    max-height: 88vh;
    object-fit: contain;
    margin: 0 auto;
}
.theme-topshelf .ts-lightbox__caption {
    color: #cfcfcf;
    font-size: .85rem;
    text-align: center;
    padding: .5rem 0 0;
}

.theme-topshelf .ts-boatcontact { padding: 100px 0; }

/* ── /list ────────────────────────────────────────────────────────────── */
.theme-topshelf .ts-simplehero { padding: 100px 0; background: transparent; }
.theme-topshelf .ts-simplehero__title {
    font-size: 39px;
    letter-spacing: 2px;
    color: var(--ts-white);
    margin: 0 0 1.5rem;
}

/* ── Contact forms, measured off the live site 2026-08-10 ──────────────────
   Live fields are underlines, not boxes: transparent, one 1px #f7f7f7 bottom
   border, 16px Josefin Sans, and the label sits *inside* the field rather than
   above it (48px tall with 23px of top padding to clear it). */

.theme-topshelf .ts-contact .ts-form,
.theme-topshelf .ts-boatcontact .ts-form {
    display: block;
    max-width: 683px;
    width: 100%;
}
.theme-topshelf .ts-contact .ts-form > div,
.theme-topshelf .ts-boatcontact .ts-form > div {
    position: relative;
    padding-bottom: 24px;
}
.theme-topshelf .ts-contact .ts-form label,
.theme-topshelf .ts-boatcontact .ts-form label {
    position: absolute;
    top: 14px;
    left: 8px;
    margin: 0;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    letter-spacing: normal;
    color: #e2e2e2;
    pointer-events: none;
}
.theme-topshelf .ts-contact .ts-form input,
.theme-topshelf .ts-boatcontact .ts-form input,
.theme-topshelf .ts-contact .ts-form textarea,
.theme-topshelf .ts-boatcontact .ts-form textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f7f7f7;
    border-radius: 0;
    color: #f7f7f7;
    font-family: var(--ts-font-ui);
    font-size: 16px;
    padding: 23px 8px 8px;
}
.theme-topshelf .ts-contact .ts-form input { height: 48px; }
.theme-topshelf .ts-contact .ts-form textarea,
.theme-topshelf .ts-boatcontact .ts-form textarea {
    height: 129px;
    padding-top: 8px;
    resize: vertical;
}
/* The message box carries a placeholder, so it needs no floating label. */
.theme-topshelf .ts-contact .ts-form textarea + .errorlist,
.theme-topshelf .ts-contact .ts-form label[for$="message"],
.theme-topshelf .ts-contact .ts-form label[for$="notes"] { display: none; }
.theme-topshelf .ts-contact .ts-form button[type="submit"] { margin: 0 auto; display: flex; }

/* ── /list ────────────────────────────────────────────────────────────────
   Its contact band opens with the form and puts the call line, quote and brand
   underneath — the reverse of the home page cards — and sets them at 22px
   rather than 32px. */

.theme-topshelf .ts-contact--stacked .ts-contact__eyebrow { margin: 0 0 100px; }
.theme-topshelf .ts-contact--stacked .ts-contact__call,
.theme-topshelf .ts-contact--stacked .ts-contact__brand {
    font-size: 22px;
    margin: 0 0 24px;
    text-align: center;
}
.theme-topshelf .ts-contact--stacked .ts-quote {
    font-family: var(--ts-font-ui);
    font-style: normal;
    font-size: 16px;
    margin: 0 auto 24px;
    line-height: 1.8;
}
.ts-dropline--open { margin: 0; }
.ts-dropline--open .ts-dropline__panel { margin: 0 0 40px; }
.ts-dropline--open .ts-dropline__form { width: 683px; max-width: 100%; text-align: left; }
.ts-dropline--open .ts-dropline__label { text-align: left; margin: 0 0 24px; }

/* ── Header geometry, measured 2026-08-10 ─────────────────────────────────
   Every inner page: a 153px dark bar — 24px of padding around a 105px logo.
   The home page runs the same recipe at 200px (248px total) over a transparent
   bar; that one is still on the earlier approximation and is measured next. */

.theme-topshelf .ts-header__inner { min-height: 0; padding: 24px 0; }
.theme-topshelf .ts-logo-tile {
    background: transparent;
    width: 105px;
    height: 105px;
    padding: 0;
    margin: 0;
}
.theme-topshelf .ts-logo-tile img { width: 105px; height: 105px; }

.theme-topshelf.template-home .ts-header__inner { min-height: 300px; padding: 0; }
.theme-topshelf.template-home .ts-logo-tile {
    background: var(--ts-white);
    width: var(--ts-logo-size);
    height: 265px;
    padding: 1rem;
    margin-bottom: -1.5rem;
}
.theme-topshelf.template-home .ts-logo-tile img { width: auto; height: auto; max-width: 100%; }

/* ── Footer, measured 2026-08-10 ──────────────────────────────────────────
   Live order is social icons, copyright, links, rule — then a "Powered by
   GoDaddy" credit, which is the one thing here we deliberately do not
   reproduce. Icons are 40px squares, not the words. */

.theme-topshelf .ts-footer__social {
    gap: 1rem;
    margin: 0 0 24px;
}
.theme-topshelf .ts-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #e2e2e2;
}
.theme-topshelf .ts-footer__social a:hover { color: var(--ts-accent); }
.theme-topshelf .ts-footer__social svg { width: 23px; height: 23px; fill: currentColor; }
.theme-topshelf .ts-footer__copyright {
    font-size: 14px;
    color: #e2e2e2;
    margin: 0 0 24px;
    text-align: center;
}
.theme-topshelf .ts-footer__links { gap: 0; margin: 0 0 24px; }
.theme-topshelf .ts-footer__links a {
    font-family: var(--ts-font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #e2e2e2;
    padding: 8px 16px;
}
.theme-topshelf .ts-footer__rule {
    width: 50px;
    border: 0;
    border-top: 1px solid #808080;
    margin: 40px auto 24px;
}

/* ── Tracking, measured 2026-08-10 ────────────────────────────────────────
   Only the home page's hero headline is tracked at 4px. Every other H1 —
   broker pages, boat pages, /list, the archive intros — is 2px, which the
   blanket rule above was overriding. */

.theme-topshelf h1 { letter-spacing: 2px; }
.theme-topshelf .ts-hero h1 { letter-spacing: 4px; }

/* ── Contact band buttons run the full column ─────────────────────────────
   Live "Call Kyle"/"Email Kyle" are 683x56 stacked, not shrink-to-fit pills. */

.theme-topshelf .ts-contact a.ts-btn,
.theme-topshelf .ts-boatcontact a.ts-btn,
.theme-topshelf .ts-brokerband__buttons a.ts-btn {
    display: flex;
    /* content-box would add the 40px side padding on top of the 683 */
    box-sizing: border-box;
    width: 683px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ── Broker story band: split, text left, photograph right ────────────────
   Live is a 700px black section beside a full-bleed photo of the same height.
   Without a photo the section runs the full width on its own. */

.ts-brokersplit { display: flex; align-items: stretch; }
.ts-brokersplit .ts-brokerband--split {
    width: 50%;
    padding: 100px 72px;
    box-sizing: border-box;
}
.ts-brokersplit--plain .ts-brokerband--split { width: 100%; }
.ts-brokersplit__photo {
    width: 50%;
    background-size: cover;
    background-position: 50% 16%;
}
.ts-brokerband__col { max-width: 556px; text-align: left; }
.theme-topshelf .ts-brokerband--split .ts-brokerband__quote { margin: 0 0 100px; }
.theme-topshelf .ts-brokerband--split .ts-brokerband__sub { margin: 0 0 24px; }
.theme-topshelf .ts-brokerband--split .ts-prose { margin-bottom: 80px; }

@media (max-width: 900px) {
    .ts-brokersplit { flex-direction: column; }
    .ts-brokersplit .ts-brokerband--split { width: 100%; padding: 64px 24px; }
    .ts-brokersplit__photo { width: 100%; min-height: 320px; }
}

/* ── Broker bio: alternating photo/text rows ──────────────────────────────
   Live pairs each photo with a block of the bio and flips the sides every
   row — photo left, then right, then left. We had all the photos in a strip
   above the whole bio. Columns are 548px inside a 1096px grid. */

.ts-biogrid { max-width: 1096px; margin: 0 auto; }
.ts-biorow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding-bottom: 48px;
}
.ts-biorow__photo { display: flex; justify-content: center; }
.ts-biorow__photo img { width: 500px; height: auto; }
.ts-biorow__text { max-width: 500px; margin: 0 auto; text-align: center; }
.ts-biorow--flip .ts-biorow__photo { order: 2; }

@media (max-width: 900px) {
    .ts-biorow { grid-template-columns: 1fr; gap: 1.5rem; }
    .ts-biorow--flip .ts-biorow__photo { order: 0; }
    .ts-biorow__photo img { width: 100%; max-width: 500px; }
}

/* ── /about ───────────────────────────────────────────────────────────────
   Crew band: three 317px portraits, each with a 22px Josefin name beneath and
   the broker's own quote. The heading is the page's H1 at 19px — small, but
   that is what the live page does. */

.theme-topshelf .ts-crew { padding: 100px 0; }
.theme-topshelf .ts-crew__title {
    font-size: 19px;
    letter-spacing: 2px;
    color: #e2e2e2;
    text-align: center;
    margin: 0 0 100px;
}
.ts-crew__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1096px;
    margin: 0 auto;
}
.ts-crew__member { text-align: center; }
.ts-crew__member img { width: 100%; max-width: 317px; height: auto; }
.theme-topshelf .ts-crew__name {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 24px 0;
}
.theme-topshelf .ts-crew__quote { color: #e2e2e2; margin: 0 0 24px; }
.theme-topshelf .ts-crew__more a { color: #e2e2e2; font-size: 14px; letter-spacing: 2px; }

.theme-topshelf .ts-aboutvideo { padding: 100px 0; }
.theme-topshelf .ts-aboutvideo__title {
    font-size: 54px;
    letter-spacing: 2px;
    color: #e2e2e2;
    text-align: center;
    margin: 0 0 40px;
}
.theme-topshelf .ts-aboutvideo__caption { text-align: center; color: #e2e2e2; margin: 24px 0 0; }

.theme-topshelf .ts-reviews { padding: 56px 0; background: transparent; }
.theme-topshelf .ts-reviews__title {
    font-size: 39px;
    letter-spacing: 2px;
    color: var(--ts-white);
    text-align: center;
    margin: 0 0 24px;
}
.theme-topshelf .ts-reviews__placeholder { text-align: center; color: var(--ts-white); }

@media (max-width: 900px) {
    .ts-crew__grid { grid-template-columns: 1fr; }
}

/* The archive intro carries a 22px Josefin subheading under its H1. */
.theme-topshelf .ts-archiveintro__sub {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 24px 0;
}

/* The boat band on /premium-value-inventory labels itself with the brand at
   19px. The same band on /inventory is 28px — the two pages differ. */
.theme-topshelf .template-premium-value .ts-boatband__brand,
.theme-topshelf.template-premium-value .ts-boatband__brand {
    font-size: 19px;
    letter-spacing: 2px;
    color: #e2e2e2;
}

/* Premium Value cards share the bio rows' two-column shape. */
.theme-topshelf .ts-pvlist__heading { margin: 0 0 100px; }
.ts-biorow.ts-pventry { align-items: center; margin-bottom: 0; }
.theme-topshelf .ts-pventry__title {
    font-family: var(--ts-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
    color: #e2e2e2;
    margin: 0 0 24px;
}

/* Every boat band puts 100px between the brand line and the boat's name. */
.theme-topshelf .ts-boatband__brand { margin: 0 0 100px; line-height: 1.4; }

/* ── Home page header ─────────────────────────────────────────────────────
   Live puts the bar inside the hero: transparent, 248px around a 200px logo,
   sitting on the video rather than above it. */

/* The bar is opaque so the menu never sits on the picture — but the band is drawn
   shorter than the logo, so the tile overhangs it and straddles the top edge of
   the video. Tune the two numbers together: --ts-band is where the video starts,
   and the logo runs from --ts-logo-top to --ts-logo-top + 200. */
.theme-topshelf.template-home .ts-header {
    background: transparent;
    overflow: visible;
}
.theme-topshelf.template-home .ts-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--ts-band-paint, var(--ts-band));
    background: var(--ts-dark);
    z-index: -1;
}
.theme-topshelf.template-home .ts-header__inner { min-height: 0; padding: 24px 0; }
.theme-topshelf.template-home .ts-logo-tile {
    background: transparent;
    width: 200px;
    height: 200px;
    padding: 0;
    margin: 0;
}
.theme-topshelf.template-home .ts-logo-tile img { width: 200px; height: 200px; }

/* ── Home hero geometry, measured 2026-08-10 ──────────────────────────────
   The band is 796px. Inside it the video is 1304 wide by 735 tall, starting at
   y=131 — so the nav bar sits over its top edge and the bottom is clipped. */

.theme-topshelf.template-home .ts-hero {
    /* Read by both the header band and the scrim — declared here because it is
       the common ancestor of the two. */
    --ts-band: 139px;   /* menu-to-video gap: 56px -> 19px (owner request) */
    /* What the opaque band actually PAINTS, which is not the same number.
       --ts-band still sizes the nav row, so changing it would shift the menu;
       this stops the paint at the video's own top edge instead. At 139 the
       band covered the picture's first 8 rows — the thin bar running left and
       right of the logo. Keep in step with .ts-hero__frame's `top`. */
    --ts-band-paint: 131px;
    --ts-logo-top: 24px;
    position: relative;
    height: 796px;
    padding: 0;
    overflow: hidden;
}
.theme-topshelf.template-home .ts-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
}
.theme-topshelf.template-home .ts-hero__frame {
    position: absolute;
    top: 131px;
    left: 48px;
    right: 48px;
    max-width: none;
    height: 735px;
    aspect-ratio: auto;
}

@media (max-width: 900px) {
    .theme-topshelf.template-home .ts-hero { height: auto; }
    .theme-topshelf.template-home .ts-header { position: static; }
    .theme-topshelf.template-home .ts-hero__frame {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* ── Home hero: letterbox, scrim, headline column ─────────────────────────
   The source video is ultra-wide (1304x500 of picture inside the 735px frame),
   so Vimeo letterboxes it and the bars read as part of the dark page — which is
   what puts air between the nav and the picture. `background=1` defeated that by
   scaling the video to fill, which cropped every segment and pushed the picture
   up under the menu.

   The scrim is GONE (2026-08-20, owner request). It was live's — #161616 at
   40% over the visible area — and it was greying the top two-thirds of the
   picture and ending in a hard horizontal edge partway down. Deliberate
   deviation from the live site, not an oversight. If the headline ever needs
   contrast back, give the h1 a text-shadow rather than dimming the whole
   video: the shadow costs the picture nothing. */

.theme-topshelf.template-home .ts-hero__frame iframe {
    object-fit: contain;
    background: var(--ts-dark);
}
/* Live wraps the headline to two lines in a ~725px column. */
.theme-topshelf.template-home .ts-hero__overlay h1 { max-width: 725px; }

/* Gallery photos are letterboxed, never cropped — see boat_detail.html. */
.theme-topshelf .ts-gallery__slide img {
    height: 600px;
    object-fit: contain;
    background: var(--ts-dark);
}

/* ── Home hero: logo straddles the top edge of the video ──────────────────
   The nav links stay centred in the opaque band with clear air beneath them;
   only the logo tile is allowed to overhang into the picture. */

.theme-topshelf.template-home .ts-header__inner {
    min-height: var(--ts-band);
    padding: 0;
    align-items: center;
}
.theme-topshelf.template-home .ts-logo-tile {
    align-self: start;
    margin-top: var(--ts-logo-top);
}
/* The scrim's follow-up override went with the scrim itself. */

@media (max-width: 900px) {
    .theme-topshelf.template-home .ts-header::before { height: 100%; }
    .theme-topshelf.template-home .ts-logo-tile { align-self: center; margin-top: 0; }
}

/* ── Home bands sized to the live page ────────────────────────────────────
   Photo band: live lays six tiles out three across, each 467x300, rather than
   showing one full-bleed shot at a time. Financing image 1048x524, showcase
   slides 1048x590. */

.theme-topshelf .ts-photoband {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    height: auto;
}
.theme-topshelf .ts-photoband__tile { position: relative; aspect-ratio: 467 / 300; }
.theme-topshelf .ts-photoband__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.theme-topshelf .ts-financing img { max-width: 1048px; width: 100%; height: auto; }
.theme-topshelf .ts-carousel__slide img {
    max-width: 1048px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .theme-topshelf .ts-photoband { grid-template-columns: repeat(2, 1fr); }
}