/************************************ BOAT DETAIL PAGE REDESIGN (DEMO) ****************************************/
/*
    Scope   : views/themes/Material/boat_detail.hbs (the live VDP, /:detail(...)/:id route) and
              boat_detail_redesign_demo.hbs (/boat-detail-redesign-demo/:id). Loaded only by those two
              routes. Every selector is prefixed .bd- and sits under .bd-page or .bd-legacy-modals
              (plus html.bd-grid-open, set only by the gallery grid), so nothing here can reach
              another template.
    Source  : Ported verbatim from the "BOAT DETAIL PAGE REDESIGN" block in the staging branch's
              public/assets/css/style.css (Figma "Listings Redesign Brainstorm 8.26").
    Grid    : Figma content is 1118px inside a 1180px frame. .bd-container maxes at 1140px with 15px
              padding for 1110px of content, which lines up with the site header in layout.hbs.
    Build   : standalone file, NOT part of the gulp CSS bundle. Loaded directly by the demo route so
              editing it needs no build step and cannot affect dist/css/styles.min.css.
    Media queries for this section live at the END of this section, not at the end of the file.
*/

/* ============================================================================
   0. TOKENS AND PAGE SHELL
   ========================================================================== */
.bd-page{
    /* Brand */
    --bd-navy: #002468;
    --bd-red: #b41933;
    /* Text */
    --bd-ink: #14171f;
    --bd-body: #39414f;
    --bd-body-2: #2a3140;
    --bd-muted: #8a93a6;
    --bd-muted-2: #5b6478;
    --bd-link: #667085;
    --bd-placeholder: #757575;
    /* Surfaces */
    --bd-surface: #f4f6fa;
    --bd-surface-2: #f6f8fc;
    --bd-badge: #eaf0fb;
    --bd-save: #fbe9ec;
    /* Lines */
    --bd-border: #e4e7ee;
    --bd-hairline: #eef1f6;
    --bd-input: #d5dbe6;
    /* On navy */
    --bd-navy-cap: #c8d4ef;
    --bd-navy-eye: #9fb2e6;

    background: #fff;
    color: var(--bd-body);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 19px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* layout.hbs renders {{{body}}} inside a zero padding column, so this page owns its gutter. */
.bd-page .bd-container{
    /* Figma has no max-width: the 1180px frame carries 1118px of content between
       31px gutters, so the page runs the full width of the viewport. */
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 31px;
}

/* Local resets. The global sheet styles bare headings and lists site wide; neutralise that here so
   the type scale below is the only thing in play. */
.bd-page h1,
.bd-page h2,
.bd-page h3,
.bd-page h4,
.bd-page p,
.bd-page ul,
.bd-page ol{
    margin: 0;
    padding: 0;
    font-family: inherit;
}

.bd-page ul,
.bd-page ol{
    list-style: none;
}

.bd-page a{
    text-decoration: none;
    color: inherit;
}

.bd-page a:hover,
.bd-page a:focus{
    text-decoration: none;
}

.bd-page img{
    max-width: 100%;
}

.bd-page *,
.bd-page *::before,
.bd-page *::after{
    box-sizing: border-box;
}

.bd-page svg{
    display: block;
    flex: none;
}

/* Shared eyebrow label: 11px uppercase, sits above every card and column heading. */
.bd-page .bd-eyebrow{
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: var(--bd-muted);
}

.bd-page .bd-eyebrow--red{
    color: var(--bd-red);
    letter-spacing: 1.76px;
}

/* Desktop / mobile visibility. Replaces the old .dsktopShow / .mobShow pair. */
.bd-page .bd-desktop-only{
    display: block;
}

.bd-page .bd-mobile-only{
    display: none;
}

/* ============================================================================
   1. STICKY HEADER BAR
   Figma: 1178x96, 30px side padding, 1px bottom border. Badges, stock number and the
   title on the left; price stack and the red call button on the right.
   ========================================================================== */
.bd-page .bd-topbar{
    position: sticky;
    /* layout.hbs adds Bootstrap's .fixed-top to .nav_fix on scroll, so this bar has to
       sit under the site header rather than at the very top. The template keeps
       --bd-header-h in sync with the real header height. */
    top: var(--bd-header-h, 0px);
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--bd-border);
}

.bd-page .bd-topbar__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.bd-page .bd-topbar__meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 11px;
    margin-bottom: 9px;
}

/* Condition and availability badges: ~40% larger to match the enlarged type scale. */
.bd-page .bd-badge{
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 5.5px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bd-page .bd-badge--condition{
    background: var(--bd-red);
    color: #fff;
}

.bd-page .bd-badge--stock{
    background: var(--bd-badge);
    color: var(--bd-navy);
}

.bd-page .bd-topbar__stock{
    font-size: 16.5px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-muted);
}

.bd-page .bd-topbar__title{
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.24px;
    color: var(--bd-navy);
}

.bd-page .bd-topbar__right{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.bd-page .bd-topbar__prices{
    position: relative;
    text-align: right;
}

.bd-page .bd-topbar__price{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-ink);
}

/* "Sale Price" / "Ask Price" beside the headline figure in the sticky header and
   the mobile title. Empty (Call For Pricing) tags are hidden. */
.bd-page .bd-price-tag{
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bd-muted);
    white-space: nowrap;
}

.bd-page .bd-price-tag:empty{
    display: none;
}

.bd-page .bd-mtitle__prices .bd-price-tag{
    flex-basis: 100%;
}

.bd-page .bd-topbar__mo{
    margin-top: 16px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: rgba(57, 65, 79, 0.8);
}

/* ============================================================================
   2. BUTTONS
   ========================================================================== */
.bd-page .bd-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Solid red call to action. Header call button is 217x41; the form submit is full width. */
.bd-page .bd-btn--primary{
    height: 57px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--bd-red);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.bd-page .bd-btn--primary:hover,
.bd-page .bd-btn--primary:focus{
    background: #97142a;
    color: #fff;
}

.bd-page .bd-btn--block{
    display: flex;
    width: 100%;
}

/* ============================================================================
   3. GALLERY ROW
   Figma: 88px thumb rail, 12px gap, 634x476 stage, 24px gap, 360px info rail.
   Thumbs stretch to the stage height so both columns always finish flush.
   ========================================================================== */
.bd-page .bd-gallery{
    display: flex;
    align-items: stretch;
    padding-top: 24px;
}

.bd-page .bd-gallery__thumbs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 7.8712%;
    width: 7.8712%;
    margin-right: 1.0733%;
}

.bd-page .bd-thumb{
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--bd-surface);
}

.bd-page .bd-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-page .bd-thumb.is-active{
    border-color: var(--bd-red);
}

/* The fifth tile carries the "+N more photos" overlay. */
/* Only five thumbnails are shown. The fifth carries the "+N more photos" overlay and
   stands in for every remaining image; the rest stay in the DOM so the Fancybox
   gallery01 group still holds the complete set. */
.bd-page .bd-gallery__thumbs .bd-thumb:nth-child(n+6) {
    display: none;
}

.bd-page .bd-gallery__thumbs .bd-thumb:nth-child(5) .bd-thumb__overlay {
    display: flex;
}

.bd-page .bd-thumb__overlay{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;   /* revealed only on the fifth thumbnail, see below */
    align-items: center;
    justify-content: center;
    background: rgba(0, 36, 104, 0.66);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.bd-page .bd-gallery__stage{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 2.1467%;
}

.bd-page .bd-gallery__stage-img{
    display: block;
    width: 100%;
    aspect-ratio: 634 / 476;
    object-fit: cover;
    border-radius: 16px;
    background: #dfe4ee;
}

/* Fallback for engines without aspect-ratio. */
@supports not (aspect-ratio: 1 / 1){
    .bd-page .bd-gallery__stage-img{
        height: 476px;
    }
}

/* Watch Videos / View All Photos pills, laid over the stage and the mobile hero. */
.bd-page .bd-gallery__btns{
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.bd-page .bd-media-btns{
    display: flex;
    align-items: center;
    gap: 8px;
}

.bd-page .bd-media-btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 10px rgba(11, 18, 32, .18);
    color: var(--bd-navy);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.bd-page .bd-media-btn:hover,
.bd-page .bd-media-btn:focus-visible{
    background: #fff;
    color: var(--bd-red);
}

.bd-page .bd-media-btn svg{
    width: 16px;
    height: 16px;
}

/* --- 3b. Grid view, every photo at once ----------------------------------- */
html.bd-grid-open,
html.bd-grid-open body{
    overflow: hidden;
}

/* A photo opened from the grid has to show over it (Fancybox's own default is 1050). */
html.bd-grid-open .fancybox__container{
    --fancybox-zIndex: 7000;
    z-index: 7000;
}

.bd-page .bd-grid{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Over the site header: the global sheet unsets .fixed-top's position, so the
       header's nav.navBar (z-index 6000) stacks against the page and used to cover
       the "Exit Gallery" bar on phones. Fancybox is lifted over this in turn below. */
    z-index: 6500;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.bd-page .bd-grid[hidden]{
    display: none;
}

.bd-page .bd-grid__bar{
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    padding-top: calc(14px + env(safe-area-inset-top));   /* clear a phone's status bar */
    background: #fff;
    border-bottom: 1px solid var(--bd-border);
}

.bd-page .bd-grid__exit{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-ink);
    cursor: pointer;
}

.bd-page .bd-grid__exit svg{
    width: 14px;
    height: 14px;
}

.bd-page .bd-grid__title{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-grid__count{
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--bd-muted);
}

.bd-page .bd-grid__tiles{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px 32px;
}

.bd-page .bd-grid__tile{
    display: block;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bd-surface);
    cursor: zoom-in;
}

/* The lead photo spans the full row, as on the live gallery view. */
.bd-page .bd-grid__tile:first-child{
    grid-column: 1 / -1;
}

.bd-page .bd-grid__tile img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity .15s ease;
}

.bd-page .bd-grid__tile:first-child img{
    aspect-ratio: 16 / 7;
}

.bd-page .bd-grid__tile:hover img{
    opacity: .88;
}

.bd-page .bd-gallery__rail{
    flex: 0 0 32.2004%;
    width: 32.2004%;
    align-self: flex-start;
}

/* ============================================================================
   4. RIGHT RAIL CARDS
   Bordered 13px radius cards with 21px padding. Card one is price, card two is specs.
   ========================================================================== */
.bd-page .bd-card{
    border: 1px solid var(--bd-border);
    border-radius: 18px;
    padding: 21px;
    background: #fff;
}

.bd-page .bd-card + .bd-card{
    margin-top: 19px;
}

.bd-page .bd-card__title{
    margin-bottom: 15px;
}

/* --- 4a. Price and payment ------------------------------------------------ */
.bd-page .bd-price__row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.bd-page .bd-price__label{
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    color: var(--bd-muted);
}

.bd-page .bd-price__was{
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--bd-muted-2);
    text-decoration: line-through;
}

.bd-page .bd-price__discount{
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-red);
}

/* Sale price sits on its own rule separated row. */
.bd-page .bd-price__sale{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    padding-top: 17px;
    border-top: 1px solid var(--bd-hairline);
}

.bd-page .bd-price__sale-label{
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-ink);
}

.bd-page .bd-price__sale-value{
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-navy);
}

/* Monthly payment pill: 318x60, 9px radius, centred two line stack. */
.bd-page .bd-payment{
    position: relative;
    margin-top: 12px;
    padding: 11px 12px 10px;
    border-radius: 12px;
    background: var(--bd-surface-2);
    text-align: center;
}

.bd-page .bd-payment__figure{
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--bd-muted-2);
}

/* Disclaimer toggle. Reuses the legacy .toggleDisclaimer hook from custom.js, so only
   ONE .disclaimer-modal may be rendered per page. See section 12. */
.bd-page .bd-disclaimer-toggle{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: var(--bd-placeholder);
    cursor: pointer;
}

.bd-page .bd-disclaimer-toggle svg{
    width: 8px;
    height: 5px;
    color: rgba(0, 0, 0, .6);
}

/* --- 4b. At a glance ------------------------------------------------------ */
.bd-page .bd-glance{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
}

.bd-page .bd-glance__value{
    font-size: 25px;
    line-height: 25px;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-glance__label{
    margin-top: 4px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bd-muted);
}

/* ============================================================================
   5. TAKE THE NEXT STEP  (+ SALES PROFESSIONAL on the pre-owned variant)
   Figma: 1118x185 bordered card, 25px padding, six 349x50 buttons in a 3x2 grid.
   When a consultant exists the card narrows and the consultant card sits beside it.
   ========================================================================== */
.bd-page .bd-next{
    display: flex;
    align-items: stretch;
    gap: 2.1467%;
    margin-top: 28px;
}

.bd-page .bd-next__actions{
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--bd-border);
    border-radius: 18px;
    padding: 24px 25px 23px;
}

.bd-page .bd-next__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 16px;
}

.bd-page .bd-next__links{
    display: flex;
    align-items: center;
    gap: 24px;
}

.bd-page .bd-next__link{
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-link);
}

.bd-page .bd-next__link:hover{
    color: var(--bd-navy);
}

.bd-page .bd-actions{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9839%;
}

.bd-page .bd-action{
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 8px 17px;
    border: 1px solid var(--bd-border);
    border-radius: 12px;
    background: var(--bd-surface);
    color: var(--bd-navy);
    font-family: inherit;
    font-size: 18px;
    line-height: 22.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
    margin-bottom: 8px;
}

.bd-page .bd-action:hover,
.bd-page .bd-action:focus{
    background: #e9eef8;
    border-color: #cdd7e8;
    color: var(--bd-navy);
}

/* No focus ring left behind after a mouse click; keyboard focus still shows one. */
.bd-page .bd-action:focus:not(:focus-visible){
    outline: none;
}

.bd-page .bd-action svg{
    width: 18px;
    height: 18px;
    color: currentColor;
}


/* --- 5b. Sales professional card, pre-owned variant ---------------------- */
.bd-page .bd-pro{
    flex: 0 0 32.2004%;
    width: 32.2004%;
    border: 1px solid var(--bd-border);
    border-radius: 18px;
    padding: 24px 25px;
}

.bd-page .bd-pro__body{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.bd-page .bd-pro__avatar{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bd-surface);
    color: var(--bd-muted);
}

.bd-page .bd-pro__avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-page .bd-pro__name{
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
    color: var(--bd-navy);
}

/* Sized so a typical address (name@strongsmarine.com) stays on one line; a very
   long one still wraps rather than overflowing. */
.bd-page .bd-pro__email{
    display: block;
    margin-top: 6px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--bd-ink);
    overflow-wrap: anywhere;
}

.bd-page .bd-pro__phone{
    margin-top: 3px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--bd-red);
}

/* ============================================================================
   6. TABS AND ACCORDION PANELS
   One markup block. Above 992px the heads render as a tab strip and only the active
   panel shows. At 991px and below the tab strip hides and the heads become accordion
   rows. Two independent state classes so switching breakpoint never leaves a dead
   panel: .is-active drives tabs, .is-open drives accordions.
   ========================================================================== */
.bd-page .bd-panels{
    margin-top: 32px;
}

.bd-page .bd-tabbar{
    display: flex;
    align-items: stretch;
    gap: 6px;
    border-bottom: 1px solid var(--bd-border);
}

.bd-page .bd-tab{
    padding: 13px 20px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    color: var(--bd-muted);
    cursor: pointer;
}

.bd-page .bd-tab:hover{
    color: var(--bd-navy);
}

.bd-page .bd-tab.is-active{
    color: var(--bd-navy);
    border-bottom-color: var(--bd-red);
}

/* The accordion head is hidden on desktop; it becomes the row control on mobile. */
.bd-page .bd-panel-head{
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 17px 0;
    border: 0;
    border-bottom: 1px solid var(--bd-hairline);
    background: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bd-red);
    cursor: pointer;
}

.bd-page .bd-panel-head .bd-chev{
    width: 12px;
    height: 12px;
    color: var(--bd-navy);
    transition: transform .2s ease;
}

.bd-page .bd-panel.is-open > .bd-panel-head .bd-chev{
    transform: rotate(180deg);
}

.bd-page .bd-panel{
    display: none;
}

.bd-page .bd-panel.is-active{
    display: block;
}

.bd-page .bd-panel-body{
    padding-top: 26px;
}

/* ============================================================================
   7. PANEL CONTENT
   Left column 563px of prose and spec rows, 44px gutter, right column 511px of chips.
   ========================================================================== */
.bd-page .bd-cols{
    display: grid;
    grid-template-columns: minmax(0, 563fr) minmax(0, 511fr);
    gap: 3.9356%;
    align-items: start;
}

.bd-page .bd-block + .bd-block{
    margin-top: 30px;
}

.bd-page .bd-block__title{
    margin-bottom: 14px;
}

/* --- 7a. Dealer insights prose ------------------------------------------- */
.bd-page .bd-prose,
.bd-page .bd-prose p,
.bd-page .bd-prose li,
.bd-page .bd-prose span,
.bd-page .bd-prose div{
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    color: var(--bd-body);
}

.bd-page .bd-prose p + p{
    margin-top: 14px;
}

.bd-page .bd-prose ul{
    margin: 12px 0;
    padding-left: 20px;
    list-style: disc;
}

.bd-page .bd-prose ul li{
    list-style: disc;
}

.bd-page .bd-prose strong,
.bd-page .bd-prose b{
    font-weight: 700;
}

/* --- 7b. Specification rows ---------------------------------------------- */
/* Two columns on desktop so each label sits close to its value instead of at
   opposite ends of the full page width. One column again at 991px and below. */
.bd-page .bd-specs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    max-width: 1040px;
}

.bd-page .bd-spec{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bd-hairline);
}

.bd-page .bd-spec__label{
    flex: none;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--bd-muted-2);
}

.bd-page .bd-spec__value{
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--bd-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- 7c. Equipped option chips ------------------------------------------- */
.bd-page .bd-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bd-page .bd-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid var(--bd-border);
    border-radius: 999px;
    background: var(--bd-surface);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: var(--bd-body-2);
}

.bd-page .bd-chip::before{
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 3.5px;
    background: var(--bd-red);
}

/* --- 7d. Awards, carried over from the previous page --------------------- */
.bd-page .bd-awards{
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
}

.bd-page .bd-award{
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 260px;
}

.bd-page .bd-award img{
    flex: none;
    width: 74px;
    height: auto;
}

.bd-page .bd-award span{
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--bd-body-2);
}

/* --- 7e. Key features, two column list carried over ---------------------- */
.bd-page .bd-features{
    columns: 2;
    column-gap: 30px;
}

.bd-page .bd-features li{
    break-inside: avoid;
    padding: 5px 0 5px 15px;
    position: relative;
    font-size: 19px;
    line-height: 26.5px;
    font-weight: 400;
    color: var(--bd-body);
}

.bd-page .bd-features li::before{
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 3.5px;
    background: var(--bd-red);
}

/* --- 7f. Co-brokerage disclaimer note ------------------------------------ */
.bd-page .bd-note{
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bd-surface-2);
    font-size: 16px;
    line-height: 26.5px;
    font-weight: 400;
    color: var(--bd-muted-2);
}

/* ============================================================================
   8. WHY BUY BAND
   Full bleed navy, 4x2 grid of 271x131 translucent cards.
   ========================================================================== */
.bd-page .bd-why{
    margin-top: 46px;
    padding: 44px 0 48px;
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-why__head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.bd-page .bd-why__eyebrow{
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    color: var(--bd-navy-eye);
}

.bd-page .bd-why__title{
    margin-top: 12px;
    font-size: 40px;
    line-height: 45px;
    font-weight: 700;
    letter-spacing: -0.28px;
    color: #fff;
}

.bd-page .bd-why__cta{
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 59px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--bd-red);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    transition: background-color .18s ease;
}

.bd-page .bd-why__cta:hover{
    background: #97142a;
    color: #fff;
}

.bd-page .bd-why__cta svg{
    width: 16px;
    height: 16px;
}

.bd-page .bd-why__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6100%;
}

.bd-page .bd-why__card{
    min-height: 131px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    margin-bottom: 12px;
}

.bd-page .bd-why__icon{
    width: 26px;
    height: 26px;
    margin-bottom: 16px;
    color: var(--bd-red);
}

.bd-page .bd-why__stat{
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

.bd-page .bd-why__caption{
    margin-top: 8px;
    font-size: 16.5px;
    line-height: 25px;
    font-weight: 700;
    color: var(--bd-navy-cap);
}

/* Total Care Commitment: a full width card under the grid, same chrome as the
   cards above, with its copy and a button to the Total Care page. */
.bd-page .bd-why__care{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}

.bd-page .bd-why__care .bd-why__icon{
    flex: none;
    align-self: flex-start;
    margin-bottom: 0;
}

.bd-page .bd-why__care-text{
    flex: 1 1 auto;
    min-width: 0;
}

.bd-page .bd-why__care-copy{
    margin-top: 8px;
    font-size: 16.5px;
    line-height: 25px;
    font-weight: 600;
    color: var(--bd-navy-cap);
}

/* ============================================================================
   9. INQUIRE CARD
   1118x282 bordered card, 14px radius, 300px navy panel on the left and the HubSpot
   embed on the right. HubSpot owns the field markup, so it is restyled, never replaced.
   The .hs-* class names below are HubSpot's and must not be renamed.
   ========================================================================== */
.bd-page .bd-inquire-section{
    position: relative;
    padding: 40px 0 44px;
    border-bottom: 1px solid var(--bd-hairline);
}

.bd-page .bd-inquire{
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bd-border);
    border-radius: 19.5px;
    overflow: hidden;
}

.bd-page .bd-inquire__aside{
    flex: 0 0 26.8336%;
    width: 26.8336%;
    padding: 34px 28px;
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-inquire__title{
    font-size: 29.5px;
    line-height: 36.5px;
    font-weight: 700;
    color: #fff;
}

.bd-page .bd-inquire__sub{
    margin-top: 12px;
    font-size: 19px;
    line-height: 32px;
    font-weight: 400;
    color: var(--bd-navy-cap);
}

.bd-page .bd-inquire__phone{
    display: inline-block;
    margin-top: 20px;
    font-size: 22.5px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

.bd-page .bd-inquire__form{
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
}

.bd-page .bd-inquire__form .hbspt-form,
.bd-page .bd-inquire__form .hbspt-form form{
    width: 100% !important;
}

.bd-page .bd-inquire__form .hbspt-form form{
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    text-align: left !important;
}


/* ============================================================================
   10. SIMILAR BOATS
   Light band, three 364x96 cards with a 92x70 thumbnail.
   ========================================================================== */
.bd-page .bd-similar{
    padding: 30px 0 36px;
    background: var(--bd-surface-2);
    border-top: 1px solid var(--bd-hairline);
}

.bd-page .bd-similar__title{
    margin-bottom: 18px;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-similar__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1628%;
}

.bd-page .bd-similar__card{
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 96px;
    padding: 12px;
    border: 1px solid var(--bd-border);
    border-radius: 15.5px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.bd-page .bd-similar__card:hover{
    border-color: #cdd7e8;
    box-shadow: 0 4px 14px rgba(0, 36, 104, .08);
}

.bd-page .bd-similar__thumb{
    flex: none;
    width: 92px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--bd-surface);
}

.bd-page .bd-similar__name{
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-similar__price{
    display: block;
    margin-top: 4px;
    font-size: 19.5px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-ink);
}

.bd-page .bd-similar__meta{
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-muted);
}

/* --- 10b. Event promo card, carried over from the previous page ---------- */
.bd-page .bd-event{
    display: block;
    margin-top: 19px;
    border: 1px solid var(--bd-border);
    border-radius: 16px;
    overflow: hidden;
}

.bd-page .bd-event img{
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================================
   11. MOBILE CHROME
   Declared here so the rules read together. Everything in this block is hidden by
   default and switched on in the 991px media query at the end of the section.
   ========================================================================== */

/* Sticky navy bar: back chevron, truncated title, share. */
.bd-page .bd-mobilebar{
    display: none;
    position: sticky;
    top: var(--bd-header-h, 0px);
    z-index: 70;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 8px 16px;
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-mobilebar__title{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 19.5px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
}

.bd-page .bd-mobilebar svg{
    width: 20px;
    height: 20px;
    color: #fff;
}

/* Swipeable hero. CSS scroll snap rather than a carousel plugin, so there is no
   init order dependency on the vendor bundle. */
.bd-page .bd-mhero{
    display: none;
    position: relative;
}

.bd-page .bd-mhero__track{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bd-page .bd-mhero__track::-webkit-scrollbar{
    display: none;
}

.bd-page .bd-mhero__slide{
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.bd-page .bd-mhero__slide img{
    display: block;
    width: 100%;
    height: 236px;
    object-fit: cover;
}

.bd-page .bd-mhero__badges{
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 7px;
}

.bd-page .bd-mhero__badges .bd-badge{
    height: 27px;
    font-size: 12.5px;
    letter-spacing: .9px;
}

.bd-page .bd-mhero__badges .bd-badge--stock{
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-mhero__btns{
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.bd-page .bd-mhero__btns .bd-media-btn{
    height: 32px;
    padding: 0 11px;
    gap: 6px;
    font-size: 14px;
}

.bd-page .bd-mhero__dots{
    position: absolute;
    left: 12px;
    bottom: 19px;
    display: flex;
    gap: 6px;
}

.bd-page .bd-mhero__dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
}

.bd-page .bd-mhero__dot.is-active{
    background: #fff;
}

/* Mobile title block. */
.bd-page .bd-mtitle{
    display: none;
    position: relative;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--bd-hairline);
}

.bd-page .bd-mtitle__meta{
    font-size: 14.5px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-muted);
}

.bd-page .bd-mtitle__h1{
    margin-top: 10px;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-mtitle__prices{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.bd-page .bd-mtitle__price{
    font-size: 36.5px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-ink);
}

.bd-page .bd-mtitle__was{
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--bd-muted);
    text-decoration: line-through;
}

.bd-page .bd-mtitle__row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
}

.bd-page .bd-save-chip{
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--bd-save);
    color: var(--bd-red);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

.bd-page .bd-mtitle__mo{
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-muted-2);
}

.bd-page .bd-mtitle__disclaimer{
    margin-left: auto;
}

/* Mobile spec tiles: three across, light fill. */
.bd-page .bd-mtiles{
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 0 20px;
    border-bottom: 1px solid var(--bd-hairline);
}

.bd-page .bd-mtile{
    padding: 9px 6px;
    border-radius: 14px;
    background: var(--bd-surface-2);
    text-align: center;
}

.bd-page .bd-mtile__value{
    font-size: 22.5px;
    line-height: 22.5px;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-mtile__label{
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: .72px;
    text-transform: uppercase;
    color: var(--bd-muted);
}

/* Print PDF / Share row above the Dealer Insights accordion (mobile only). */
.bd-page .bd-sharebar{
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bd-hairline);
}

.bd-page .bd-sharebar__link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: var(--bd-navy);
    cursor: pointer;
}

.bd-page .bd-sharebar__link svg{
    width: 17px;
    height: 17px;
}

/* Fixed bottom action bar. Replaces the old .mob-sticky-bar. The boat's year,
   make and model sit in a strip above the call and Sea-Trial buttons. */
.bd-page .bd-mobile-bar{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    flex-direction: column;
    gap: 8px;
    padding: 9px 16px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--bd-border);
    box-shadow: 0 -4px 16px rgba(0, 36, 104, .09);
}

.bd-page .bd-mobile-bar__boat{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bd-page .bd-mobile-bar__name{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--bd-navy);
}

.bd-page .bd-mobile-bar__price{
    flex: none;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--bd-ink);
}

.bd-page .bd-mobile-bar__actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-page .bd-mobile-bar__call{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-mobile-bar__call svg{
    width: 20px;
    height: 20px;
}

.bd-page .bd-mobile-bar__cta{
    flex: 1 1 auto;
    height: 56px;
    border-radius: 14px;
    font-size: 18px;
    letter-spacing: .52px;
}

/* Lead form modal. Bootstrap drives open/close; only the dialog is restyled. */
/* The global sheet centres every .modal with top:50% + translateY(-50%),
   height:fit-content and overflow:hidden. A form taller than the screen then runs
   off both edges and cannot be scrolled, so the submit button is unreachable. This
   modal is put back to a full screen, scrollable layer instead. */
.bd-page .bd-form-modal.modal{
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Top aligned, not centred: the modal itself scrolls, so a long form is always
   reachable end to end (see the note on the markup). */
.bd-page .bd-form-modal .modal-dialog{
    max-width: 620px;
    margin: 48px auto;
}

@media screen and (max-width: 660px){
    .bd-page .bd-form-modal .modal-dialog{
        margin: 16px;
    }
}

.bd-page .bd-form-modal__body iframe{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

.bd-page .bd-form-modal .modal-content{
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.bd-page .bd-form-modal__head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bd-navy);
    color: #fff;
}

.bd-page .bd-form-modal__title{
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.bd-page .bd-form-modal__boat{
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--bd-navy-cap);
}

.bd-page .bd-form-modal__close{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}

.bd-page .bd-form-modal__close svg{
    width: 13px;
    height: 13px;
}

.bd-page .bd-form-modal__body{
    min-height: 220px;
    padding: 22px 24px 8px;
}

/* ============================================================================
   12. HOOKS KEPT FROM THE PREVIOUS TEMPLATE
   The rewrite drops the old mobile gallery modal, the .disclaimer-modal popover and
   the inline-styled calculator wrapper, so their rules are gone with them. The one
   hook still rendered inside .bd-page is the scroll anchor.
   ========================================================================== */

/* Offset for the "Chat with a Sales Consultant" jump to #dealer-form, so the sticky
   header does not cover the form heading. */
.bd-page .scroll-down {
    position: absolute;
    top: -100px;
    visibility: hidden;
}

/************* MEDIA QUERIES ******************/

/* ---------------------------------------------------------------------------
   MQ 1200px - the fixed 360px rail starts to crowd the stage, so soften it.
   ------------------------------------------------------------------------- */
@media screen and (max-width:1200px){
    /* Widths are proportional to the Figma content box at every size, so nothing here
       overrides the grid. This only stops the action labels cramping. */
    .bd-page .bd-action{
        padding: 8px 14px;
        gap: 9px;
    }
}

/* ---------------------------------------------------------------------------
   MQ 991px - the layout break. The desktop header and gallery are replaced by the
   mobile bar, hero, title block and spec tiles; tabs become an accordion; the fixed
   bottom action bar appears.
   ------------------------------------------------------------------------- */
@media screen and (max-width:991px){
    .bd-page .bd-desktop-only{
        display: none;
    }

    .bd-page .bd-mobile-only{
        display: block;
    }

    /* Mobile chrome on. */
    .bd-page .bd-mobilebar{
        display: flex;
    }

    .bd-page .bd-mhero{
        display: block;
        margin-left: -31px;
        margin-right: -31px;
    }

    .bd-page .bd-mtitle{
        display: block;
    }

    .bd-page .bd-mtiles{
        display: grid;
    }

    .bd-page .bd-mobile-bar{
        display: flex;
    }

    /* Desktop chrome off. */
    .bd-page .bd-topbar{
        display: none;
    }

    .bd-page .bd-gallery{
        display: none;
    }

    /* Keep the fixed bottom bar from covering the end of the page. */
    .bd-page{
        padding-bottom: 116px;
    }

    /* Actions become a 2 up grid with no card chrome. */
    .bd-page .bd-next{
        display: block;
        margin-top: 0;
    }

    .bd-page .bd-next__actions{
        padding: 16px 0 20px;
        border: 0;
        border-bottom: 1px solid var(--bd-hairline);
        border-radius: 0;
    }

    .bd-page .bd-next__head{
        display: none;
    }

    .bd-page .bd-actions{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .bd-page .bd-action{
        min-height: 54px;
        font-size: 16px;
        line-height: 19.5px;
    }

    .bd-page .bd-action svg{
        width: 16px;
        height: 16px;
    }

    .bd-page .bd-grid__bar{
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .bd-page .bd-grid__title{
        font-size: 15px;
    }

    .bd-page .bd-grid__count{
        display: none;
    }

    .bd-page .bd-grid__tiles{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 16px 24px;
    }

    .bd-page .bd-grid__tile:first-child img{
        aspect-ratio: 16 / 10;
    }

    .bd-page .bd-specs{
        grid-template-columns: minmax(0, 1fr);
    }

    .bd-page .bd-pro{
        flex-basis: auto;
        width: 100%;
        margin-top: 18px;
        padding: 20px 0 0;
        border: 0;
        border-top: 1px solid var(--bd-hairline);
        border-radius: 0;
    }

    /* Tabs off, accordion on. .is-active is deliberately ignored here. */
    .bd-page .bd-tabbar{
        display: none;
    }

    .bd-page .bd-panels{
        margin-top: 0;
    }

    .bd-page .bd-panel{
        display: block;
    }

    .bd-page .bd-panel-head{
        display: flex;
    }

    .bd-page .bd-panel-body{
        display: none;
        padding-top: 18px;
        padding-bottom: 6px;
    }

    .bd-page .bd-panel.is-open > .bd-panel-body{
        display: block;
    }

    /* On mobile the Overview panel is the "Dealer Insights" accordion row, open on
       load and collapsible like "Equipped Options" and "Full Specs". It hides the spec
       rows and chips that the other two panels already own. On desktop the Overview
       tab still shows everything. */
    .bd-page .bd-panel--overview.is-open > .bd-panel-body{
        padding-top: 8px;
    }

    .bd-page .bd-panel--overview .bd-block--specs,
    .bd-page .bd-panel--overview .bd-col--options{
        display: none;
    }

    .bd-page .bd-cols{
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .bd-page .bd-prose,
.bd-page .bd-prose p,
.bd-page .bd-prose li,
.bd-page .bd-prose span,
.bd-page .bd-prose div{
        font-size: 13.5px;
        line-height: 22px;
    }

    .bd-page .bd-features{
        columns: 1;
    }

    /* Trust band: two up cards, stacked head. */
    .bd-page .bd-why{
        margin-top: 0;
        padding: 26px 0 30px;
    }

    .bd-page .bd-why__head{
        display: block;
        margin-bottom: 20px;
    }

    .bd-page .bd-why__eyebrow{
        font-size: 14px;
        letter-spacing: 1.6px;
    }

    .bd-page .bd-why__title{
        margin-top: 8px;
        font-size: 25px;
        line-height: 32px;
    }

    .bd-page .bd-why__cta{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
        font-size: 16px;
        letter-spacing: .48px;
    }

    .bd-page .bd-why__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bd-page .bd-why__card{
        min-height: 96px;
        padding: 14px;
        border-radius: 14px;
    }

    .bd-page .bd-why__icon{
        width: 20px;
        height: 20px;
        margin-bottom: 10px;
    }

    .bd-page .bd-why__stat{
        font-size: 22.5px;
    }

    .bd-page .bd-why__caption{
        margin-top: 6px;
        font-size: 14.5px;
        line-height: 21px;
    }

    /* Total Care stacks: icon and copy, then a full width button. */
    .bd-page .bd-why__care{
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 16px 14px;
        border-radius: 14px;
    }

    .bd-page .bd-why__care-text{
        flex-basis: calc(100% - 34px);
    }

    .bd-page .bd-why__care .bd-why__icon{
        width: 20px;
        height: 20px;
    }

    .bd-page .bd-why__care-copy{
        font-size: 14.5px;
        line-height: 21px;
    }

    .bd-page .bd-why__care-cta{
        margin-top: 4px;
    }

    /* Sales professional: smaller contact lines so the email address fits on one line. */
    .bd-page .bd-pro__body{
        gap: 14px;
    }

    .bd-page .bd-pro__avatar{
        width: 78px;
        height: 78px;
    }

    .bd-page .bd-pro__name{
        font-size: 22px;
        line-height: 26px;
    }

    .bd-page .bd-pro__email{
        margin-top: 4px;
        font-size: 14px;
        line-height: 20px;
    }

    .bd-page .bd-pro__phone{
        font-size: 14px;
        line-height: 20px;
    }

    /* Inquire card stacks; the navy panel becomes a plain heading strip. */
    .bd-page .bd-inquire-section{
        padding: 24px 0 26px;
    }

    .bd-page .bd-inquire{
        display: block;
        border: 0;
        border-radius: 0;
    }

    .bd-page .bd-inquire__aside{
        flex-basis: auto;
        width: auto;
        padding: 0 0 16px;
        background: none;
        color: var(--bd-navy);
    }

    .bd-page .bd-inquire__title{
        font-size: 28px;
        line-height: 28px;
        color: var(--bd-navy);
    }

    .bd-page .bd-inquire__sub{
        color: var(--bd-muted);
    }

    .bd-page .bd-inquire__phone{
        color: var(--bd-red);
    }

    /* Similar boats stack full width. */
    .bd-page .bd-similar{
        padding: 22px 0 28px;
    }

    .bd-page .bd-similar__title{
        font-size: 28px;
    }

    .bd-page .bd-similar__grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bd-page .bd-similar__card{
        min-height: 86px;
    }

    .bd-page .bd-similar__thumb{
        width: 84px;
        height: 64px;
    }
}

/* ---------------------------------------------------------------------------
   MQ 767px - phone proper. The hero goes full bleed and the action grid tightens.
   ------------------------------------------------------------------------- */
@media screen and (max-width:767px){
    .bd-page .bd-container{
        padding: 0 16px;
    }

    /* Pull the hero out of the container gutter so it bleeds edge to edge. */
    .bd-page .bd-mhero{
        margin-left: -16px;
        margin-right: -16px;
    }

    .bd-page .bd-mtiles{
        gap: 8px;
    }

    .bd-page .bd-mtile__value{
        font-size: 21px;
    }

    .bd-page .bd-action{
        gap: 9px;
        padding: 8px 12px;
    }

    .bd-page .bd-why__caption{
        font-size: 14px;
    }

    .bd-page .bd-note{
        padding: 14px;
    }
}

/* ---------------------------------------------------------------------------
   MQ 576px - small phones. Spec tiles drop to two columns.
   ------------------------------------------------------------------------- */
@media screen and (max-width:576px){
    /* No type overrides here. Figma's mobile frame is 402px wide, which falls inside
       this range, so the title, price, spec rows and chips must keep the sizes the
       design specifies. Only spacing is adjusted. */
    .bd-page .bd-spec{
        gap: 14px;
    }

    .bd-page .bd-chip{
        padding: 5px 12px;
    }
}

/* ---------------------------------------------------------------------------
   MQ 430px - narrowest supported width. Single column wherever it still matters.
   ------------------------------------------------------------------------- */
@media screen and (max-width:430px){
    .bd-page .bd-mobile-bar__cta{
        font-size: 16px;
    }

    .bd-page .bd-similar__card{
        gap: 12px;
        padding: 10px;
    }

    .bd-page .bd-mtitle__disclaimer{
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   MQ 359px - below every Figma frame. Only here does the design give up its
   multi column phone layout.
   ------------------------------------------------------------------------- */
@media screen and (max-width:359px) {
    .bd-page .bd-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .bd-page .bd-why__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bd-page .bd-mtiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================================
   13. PRESERVED MODAL STYLING
   ========================================================================== */

/* ---- Ported from the template's former inline <style> block. These rules style
       the preserved payment calculator, share modal and disclaimer modal. They are
       scoped to .bd-legacy-modals because several selectors (.modal, .modal-header,
       .fa, .blue_btn, .form-group) are global and were only page scoped by virtue of
       having been inline. Do not unscope them. ---- */
.bd-legacy-modals .blue_btn {
    font-family: "Open Sans", sans-serif !important;
}

.bd-legacy-modals .fa {
    font: normal normal normal 19.5px / 1 FontAwesome !important;
}

.bd-legacy-modals .form_script .hs_submit {
    text-align: center !important;
    max-width: 500px;
}

/* --- 13a. Shared frame for the share and disclaimer modals ----------------
   Same look as the lead form modal: navy head, 18px radius, Open Sans. Colours
   are literal because these modals sit outside .bd-page and its tokens. */
.bd-legacy-modals #contactModal_email .modal-dialog,
.bd-legacy-modals #disclaimerModal .modal-dialog {
    max-width: 520px;
}

.bd-legacy-modals .bd-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 18, 32, .28);
    font-family: "Open Sans", Arial, sans-serif;
}

.bd-legacy-modals .bd-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #002468;
    color: #fff;
}

.bd-legacy-modals .bd-modal__title {
    margin: 0;
    font-family: inherit;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

.bd-legacy-modals .bd-modal__sub {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: #c8d4ef;
}

.bd-legacy-modals .bd-modal__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}

.bd-legacy-modals .bd-modal__close:hover {
    background: rgba(255, 255, 255, .24);
}

.bd-legacy-modals .bd-modal__close svg {
    display: block;
    width: 13px;
    height: 13px;
}

.bd-legacy-modals .bd-modal__body {
    padding: 22px 24px 24px;
    background: #fff;
}

/* Share modal. */
.bd-legacy-modals .shareModalHeading {
    margin: 0 0 10px !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #8a93a6;
}

/* The global sheet centres these items, which leaves the button shorter than the
   field; stretch both to the full 50px. */
.bd-legacy-modals .copyLinkWrapper {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    border: 1px solid #d5dbe6;
    border-radius: 12px;
    overflow: hidden;
}

.bd-legacy-modals .copyLinkWrapper input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f4f6fa;
    box-shadow: none !important;
    outline: none;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    color: #39414f;
    text-align: left;
}

.bd-legacy-modals .copyShareLinkBtn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: #002468;
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease;
}

.bd-legacy-modals .copyShareLinkBtn:hover {
    background: #b41933;
}

.bd-legacy-modals .shareIconsWrapper {
    margin-top: 22px;
}

.bd-legacy-modals .shareIconsContainer {
    display: flex;
    gap: 10px;
}

.bd-legacy-modals .shareIcons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid #e4e7ee;
    border-radius: 50%;
    background: #f4f6fa;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.bd-legacy-modals .shareIcons i.fa {
    font-size: 19px !important;
    color: #002468;
}

.bd-legacy-modals .shareIcons:hover {
    background: #002468;
    border-color: #002468;
}

.bd-legacy-modals .shareIcons:hover i.fa {
    color: #fff;
}

/* Disclaimer modal. */
.bd-legacy-modals .disclaimer-text {
    margin: 0 !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #39414f;
}

/* --- 13b. Payment calculator ---------------------------------------------
   The live pages' calculator, shown and hidden by custom.js (.open-calc /
   .close-modal toggle display and .show). It has no Bootstrap backdrop, so the
   page dimming is a full screen spread shadow that fades in with .show. */
.bd-legacy-modals .custom-modal-box {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 50000;
    display: none;
    width: calc(100% - 32px);
    max-width: 760px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    transform: translate(-50%, -100%);
    transition: transform .5s ease, box-shadow .3s ease;
    box-shadow: 0 24px 60px rgba(11, 18, 32, .28), 0 0 0 100vmax rgba(11, 18, 32, 0);
    font-family: "Open Sans", Arial, sans-serif;
}

.bd-legacy-modals .custom-modal-box.show {
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 60px rgba(11, 18, 32, .28), 0 0 0 100vmax rgba(11, 18, 32, .55);
}

.bd-legacy-modals .modal-content-box {
    display: flex;
    flex-wrap: wrap;
}

.bd-legacy-modals .modal-content-col {
    width: 50%;
}

.bd-legacy-modals .modal-white-sec {
    padding: 30px 32px 28px;
    background: #fff;
}

.bd-legacy-modals .bd-calc__title {
    margin: 0 0 4px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: #002468;
}

.bd-legacy-modals .modal-white-sec .form-group {
    margin: 14px 0 0 !important;
}

.bd-legacy-modals .modal-white-sec .popup_label {
    display: block;
    margin: 0 0 6px !important;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
    color: #39414f;
}

.bd-legacy-modals .modal-white-sec .popup_input {
    width: 100% !important;
    height: 46px;
    padding: 0 14px !important;
    border: 1px solid #d5dbe6 !important;
    border-radius: 10px !important;
    background: #fff;
    box-shadow: none !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    color: #14171f;
}

/* Unit shown inside the Term ("months") and Interest Rate ("%") fields. */
.bd-legacy-modals .bd-calc__unit {
    position: relative;
}

.bd-legacy-modals .bd-calc__unit::after {
    content: attr(data-unit);
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #8a93a6;
    pointer-events: none;
}

.bd-legacy-modals .bd-calc__unit .popup_input {
    padding-right: 76px !important;
}

.bd-legacy-modals .modal-white-sec .popup_input:focus {
    outline: none;
    border-color: #002468 !important;
}

.bd-legacy-modals .calculate-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 28px 92px;
    background: #002468;
    color: #fff;
    text-align: center;
}

.bd-legacy-modals .est-modal-heading {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-transform: none;
    color: #c8d4ef !important;
}

.bd-legacy-modals #monthly_payment_text2 {
    margin-top: 14px !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 38px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.bd-legacy-modals #monthly_payment_text2 span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #c8d4ef;
}

/* Prompt shown until custom.js writes the first result. */
.bd-legacy-modals #monthly_payment_text2:empty::before {
    content: "Enter a purchase price and down payment to see your estimate.";
    display: block;
    max-width: 240px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    color: #c8d4ef;
}

.bd-legacy-modals .close-btn-1 {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 34px;
    font-weight: 700;
    cursor: pointer;
}

.bd-legacy-modals .close-btn-2 {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 9px 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.bd-legacy-modals .close-btn-1:hover,
.bd-legacy-modals .close-btn-2:hover {
    background: rgba(255, 255, 255, .22);
}

@media screen and (max-width: 576px) {
    .bd-legacy-modals .custom-modal-box {
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    .bd-legacy-modals .modal-content-col {
        width: 100%;
    }

    .bd-legacy-modals .modal-white-sec {
        padding: 24px 20px 22px;
    }

    .bd-legacy-modals .calculate-box {
        padding: 28px 20px 80px;
    }

    /* Stacked, the white half has no close control of its own; "Close" stays. */
    .bd-legacy-modals .close-btn-1 {
        display: none;
    }

    .bd-legacy-modals .close-btn-2 {
        bottom: 22px;
    }

    .bd-legacy-modals #monthly_payment_text2 {
        font-size: 32px !important;
    }

    .bd-legacy-modals .bd-modal__head,
    .bd-legacy-modals .bd-modal__body {
        padding-left: 20px;
        padding-right: 20px;
    }
}



/************************************ BOAT DETAIL PAGE REDESIGN ENDS HERE ****************************************/