/* ==========================================================================
   Motomarine v3 - Boat single
   .cs-bsingle__gallery   the gallery stack atom (gallery.css) at 4/3 with a
                          --product variant: white bordered stage for cut-out motor photos
   .cs-buybox             sidebar: badges, title, price block, finance line, spec strip,
                          phone + share, quote form (.cs-quote-box)
   .cs-quote-box--column  the form as its own column in the three column layout
   .cs-single-block       stack of .cs-panel content boxes with a .cs-panel__head
   .cs-spec-table         key / value rows;  .cs-colors swatch rows;  .cs-calc payment calculator
   ========================================================================== */

/* ---------- Gallery ---------- */
.cs-bsingle__gallery .cs-gallery-stack__main img {
    aspect-ratio: 4 / 3;
}
.cs-bsingle__gallery--product .cs-gallery-stack__main {
    border: 1px solid var(--border);
    background: var(--white);
}

/* ---------- Buy box ---------- */
.cs-buybox {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cs-buybox h1 {
    margin-bottom: 16px;
    font-size: 28px;
    line-height: 1.2;
}
.cs-buybox__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 12px;
}
.cs-buybox__stock {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
}
.cs-buybox__label {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
}
.cs-buybox__pricing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 12px 15px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 0;
}
.cs-buybox__price strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--secondary);
}
.cs-buybox__msrp {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}
.cs-buybox__msrp-row {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.cs-buybox__msrp s {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    text-decoration-thickness: 1px;
}
.cs-buybox__save {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 0;
    background: rgba(4, 120, 87, .1);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #047857;
}
/* Inline price row (Boat detail): label, price, MSRP and save chip on one line */
.cs-buybox__pricing--inline {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 15px;
}
.cs-buybox__pricing--inline .cs-buybox__price {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cs-buybox__pricing--inline .cs-buybox__label {
    margin-bottom: 0;
}
.cs-buybox__pricing--inline .cs-buybox__price strong {
    font-size: 24px;
}
.cs-buybox__pricing--inline .cs-buybox__msrp {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.cs-buybox__finance {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}
.cs-buybox__finance span {
    flex: 1 1 auto;
}
.cs-buybox__finance strong {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--heading);
}
.cs-buybox__finance .cs-btn-link {
    font-size: 13px;
}
.cs-buybox__specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    list-style: none;
}
.cs-buybox__specs li {
    padding: 8px 14px;
    border-left: 1px solid var(--border);
}
.cs-buybox__specs li:first-child {
    border-left: 0;
}
.cs-buybox__specs li span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    color: var(--body);
}
.cs-buybox__specs li strong {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--heading);
}
.cs-buybox__contact {
    margin: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cs-buybox__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}
.cs-buybox__phone:hover {
    color: var(--primary-hover);
}
.cs-buybox__share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
}
.cs-buybox__share .cs-social a {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* Inline contact row (Boat detail): phone left, share right */
.cs-buybox__contact--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 4px 0;
}
.cs-buybox__contact--inline .cs-buybox__phone {
    padding: 6px 0;
}
.cs-buybox__contact--inline .cs-buybox__share {
    padding: 6px 0;
    border-top: 0;
}
.cs-buybox__contact--inline .cs-buybox__share span {
    display: none;
}

/* Contact dealership button: phones and tablets only, opens #quoteModal with the buy box form moved inside */
.cs-buybox__popup {
    display: none;
}
.cs-modal .cs-quote-box {
    padding: 0;
    background: transparent;
}
.cs-modal .cs-quote-box .cs-btn-row .cs-btn {
    width: 100%;
    min-width: 0;
}

/* Quote form inside the buy box */
.cs-quote-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px;
    background: var(--light-bg);
    border-radius: 0;
}
.cs-quote-box .cs-field:has(.cs-textarea) {
    display: flex;
    flex: 1 1 auto;
}
.cs-quote-box h3,
.cs-quote-box .h3 {
    margin-bottom: 12px;
    font-size: 20px;
}
.cs-quote-box .cs-field {
    margin-bottom: 12px;
}
form.cs-quote-box .row.g-3 {
    --bs-gutter-y: 12px;
    margin-bottom: 12px;
}
.cs-quote-box .row .cs-field {
    margin-bottom: 0;
}
.cs-quote-box .cs-input {
    height: 42px;
    font-size: 14px;
}
.cs-quote-box .cs-textarea {
    flex: 1 1 auto;
    min-height: 66px;
    padding: 10px 16px;
    font-size: 14px;
}
.cs-quote-box .cs-btn-row {
    margin-top: 0;
}

/* Three column layout: the quote form is its own column and fills the height */
.cs-quote-box--column {
    height: auto;
}
.cs-quote-box--column .cs-field:has(.cs-textarea) {
    flex: 0 0 auto;
}
.cs-quote-box--column .cs-textarea {
    min-height: 106px;
}
.cs-quote-box--column .cs-btn-row .cs-btn {
    width: 100%;
    min-width: 0;
}

/* ---------- Content panels ---------- */
.cs-single-block {
    margin-top: 24px;
}
/* Services band: full width gray section with white link cards */
.cs-single-services a.cs-teaser {
    color: var(--muted);
}
.cs-single-services a.cs-teaser .cs-btn-link {
    margin-top: 18px;
}
.cs-single-block .cs-panel + .cs-panel,
.cs-single-block > .row + .cs-panel,
.cs-single-block .cs-panel + .row {
    margin-top: 24px;
}
.cs-single-block .row > [class*="col-"] > .cs-panel {
    height: 100%;
}
.cs-panel__head {
    margin-bottom: 20px;
}
.cs-panel__head h3,
.cs-panel__head .h3 {
    margin: 0;
    font-size: 26px;
}
.cs-panel__head .head-label {
    margin-bottom: 6px;
}
.cs-panel .cs-list {
    margin: 0;
}
.cs-spec-note {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--body);
}
#calc,
#calc3 {
    scroll-margin-top: 110px;
}

/* Spec table */
.cs-spec-table__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 16px;
    font-size: 14px;
}
.cs-spec-table__row:nth-child(odd) {
    background: var(--bg-light);
}
.cs-spec-table__row .k {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
}
.cs-spec-table__row .v {
    font-family: var(--font-heading);
    font-weight: 600;
    text-align: right;
    color: var(--heading);
}
.bg-dark .cs-spec-table__row:nth-child(odd),
.cs-panel--dark .cs-spec-table__row:nth-child(odd) {
    background: rgba(255, 255, 255, .04);
}
.bg-dark .cs-spec-table__row .v,
.cs-panel--dark .cs-spec-table__row .v {
    color: var(--white);
}

/* Colors: two columns, wide swatches, two-tone rows */
.cs-colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}
.cs-colors__col + .cs-colors__col {
    padding-left: 48px;
    border-left: 1px solid var(--border);
}
.cs-colors--single {
    grid-template-columns: 1fr;
}
.cs-colors__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
}
.cs-colors__col .cs-colors__row:last-child {
    border-bottom: 0;
}
.cs-colors__sws {
    display: flex;
    gap: 10px;
    width: 100px;
}
.cs-colors__sw {
    flex: 1 1 0;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: 0;
}

/* Embed titles (the .cs-embed wrapper lives in video.css) */
.cs-embed-title {
    margin-bottom: 12px;
}

/* Payment calculator */
.cs-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.cs-calc__loan {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--secondary);
}
.cs-calc__result {
    padding: 32px;
    background: var(--heading);
    border-radius: 0;
    color: var(--white);
}
.cs-calc__result h5,
.cs-calc__result .h5 {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .7);
}
.cs-calc__amount {
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}
.cs-calc__result p {
    margin-bottom: 22px;
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .cs-buybox {
        height: auto;
    }
    .cs-single-block .cs-panel {
        padding: 22px 24px;
    }
    .cs-single-block {
        margin-top: 20px;
    }
    .cs-single-block .cs-panel + .cs-panel,
    .cs-single-block > .row + .cs-panel,
    .cs-single-block .cs-panel + .row {
        margin-top: 20px;
    }
    .cs-panel__head {
        margin-bottom: 16px;
    }
    .cs-panel__head h3,
    .cs-panel__head .h3 {
        font-size: 22px;
    }
    .cs-calc {
        gap: 20px;
    }
    /* The form hides in place and opens in the popup instead */
    .cs-buybox .cs-quote-box,
    .cs-bsingle__formcol {
        display: none;
    }
    .cs-buybox__popup {
        display: inline-flex;
    }
    /* Phone and share share one row on small screens, every style */
    .cs-buybox__contact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-bottom: 16px;
        padding: 4px 0;
    }
    .cs-buybox__contact .cs-buybox__phone,
    .cs-buybox__contact .cs-buybox__share {
        padding: 6px 0;
        border-top: 0;
    }
    .cs-buybox__contact .cs-buybox__share span {
        display: none;
    }
    .cs-quote-box .cs-textarea {
        min-height: 90px;
    }
    .cs-colors {
        gap: 0 32px;
    }
    .cs-colors__col + .cs-colors__col {
        padding-left: 32px;
    }
    .cs-calc {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .cs-colors {
        grid-template-columns: 1fr;
    }
    .cs-colors__col + .cs-colors__col {
        padding-left: 0;
        border-left: 0;
    }
    .cs-colors__col .cs-colors__row:last-child {
        border-bottom: 1px solid var(--border);
    }
    .cs-colors__col:last-child .cs-colors__row:last-child {
        border-bottom: 0;
    }
}
@media (max-width: 575px) {
    /* Tighter buy box on phones */
    .cs-buybox h1 {
        margin-bottom: 12px;
        font-size: 22px;
    }
    .cs-buybox__badges {
        margin-bottom: 10px;
    }
    .cs-buybox__pricing {
        align-items: flex-end;
        gap: 4px 12px;
        padding: 10px 12px;
    }
    .cs-buybox__price strong {
        font-size: 22px;
    }
    .cs-buybox__msrp {
        gap: 4px;
    }
    .cs-buybox__msrp-row {
        font-size: 12px;
    }
    .cs-buybox__msrp s {
        font-size: 13px;
    }
    .cs-buybox__save {
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
    }
    /* The inline row falls back to the same stacked card as the other styles */
    .cs-buybox__pricing--inline {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 4px 12px;
        padding: 10px 12px;
    }
    .cs-buybox__pricing--inline .cs-buybox__msrp {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .cs-buybox__pricing--inline .cs-buybox__price {
        display: block;
    }
    .cs-buybox__pricing--inline .cs-buybox__label {
        margin-bottom: 2px;
    }
    .cs-buybox__pricing--inline .cs-buybox__price strong {
        font-size: 22px;
    }
    .cs-buybox__finance {
        margin-top: 10px;
        font-size: 13px;
    }
    .cs-buybox__specs {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 8px;
    }
    .cs-buybox__specs li {
        padding: 5px 8px;
    }
    .cs-buybox__specs li span {
        margin-bottom: 0;
        font-size: 11px;
    }
    .cs-buybox__specs li strong {
        font-size: 13px;
    }
    .cs-buybox__contact {
        margin: 12px 0;
    }
    .cs-buybox__phone {
        font-size: 15px;
    }
    .cs-buybox__share .cs-social a {
        width: 30px;
        height: 30px;
    }
    .cs-quote-box {
        padding: 16px;
    }
    /* Overall rhythm on phones: tighter section, gaps, panels and rows */
    .cs-bsingle__top {
        --bs-gutter-y: 16px;
    }
    .cs-bsingle__gallery .cs-gallery-stack__thumbs {
        margin-top: 8px;
    }
    .cs-panel__head .head-label,
    .cs-buybox__label {
        font-size: 11px;
        letter-spacing: .5px;
    }
    .cs-single-block .cs-panel {
        padding: 18px 18px 20px;
    }
    .cs-single-block {
        margin-top: 16px;
    }
    .cs-single-block .cs-panel + .cs-panel,
    .cs-single-block > .row + .cs-panel,
    .cs-single-block .cs-panel + .row {
        margin-top: 16px;
    }
    .cs-single-block .row.g-4 {
        --bs-gutter-y: 16px;
    }
    .cs-panel__head {
        margin-bottom: 14px;
    }
    .cs-panel__head h3,
    .cs-panel__head .h3 {
        font-size: 20px;
    }
    .cs-panel__head .head-label {
        margin-bottom: 4px;
    }
    /* Long spec names and values fight over one line on a phone, so stack them */
    .cs-spec-table__row {
        display: block;
        padding: 10px 12px;
        font-size: 13px;
    }
    .cs-spec-table__row .k {
        display: block;
        margin-bottom: 2px;
    }
    .cs-spec-table__row .v {
        display: block;
        text-align: left;
    }
    .cs-colors__row {
        padding: 9px 0;
        font-size: 13px;
    }
    .cs-colors__sw {
        height: 30px;
    }
    .cs-spec-note {
        margin-top: 14px;
        font-size: 12px;
    }
    .cs-calc {
        gap: 16px;
    }
    .cs-calc__loan {
        font-size: 20px;
    }
    .cs-calc__result {
        padding: 20px;
    }
    .cs-calc__result p {
        margin-bottom: 16px;
        font-size: 13px;
    }
    .cs-calc__amount {
        margin-bottom: 10px;
        font-size: 32px;
    }
    .cs-single-services {
        padding: 36px 0;
    }
    .cs-single-services .cs-teaser--boxed {
        padding: 28px 24px;
    }
}

/* ==========================================================================
   v5 · Modern boat single
   Light hairline panels, pill badges in the buy box, a two-tone phone line,
   the quote box on white fields with a red focus ring, and a ruled eyebrow
   on the related headings.
   ========================================================================== */
.cs-bsingle .cs-panel,
.cs-single-block.cs-panel,
.cs-panel.cs-single-block {
    border-color: var(--border-light);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-buybox__badges .cs-badge,
.cs-buybox__stock {
    border-radius: 40px;
    padding-right: 10px;
    padding-left: 10px;
}
.cs-buybox__save {
    border-radius: 40px;
}
.cs-quote-box {
    border-color: var(--border-light);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-quote-box .cs-input,
.cs-quote-box .cs-textarea,
.cs-calc .cs-input {
    border-color: var(--border);
    background-color: var(--white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-quote-box .cs-input:focus,
.cs-quote-box .cs-textarea:focus,
.cs-calc .cs-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08);
}
.cs-calc__result {
    position: relative;
    overflow: hidden;
}
.cs-calc__result::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background-image: radial-gradient(rgba(255, 255, 255, .2) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
    mask-image: linear-gradient(225deg, #000, transparent 70%);
    pointer-events: none;
}
.cs-calc__result > * {
    position: relative;
}
.cs-colors__sw {
    border-radius: 4px;
}
.bg-dark .cs-bsingle .cs-panel,
.bg-dark .cs-quote-box {
    box-shadow: none;
}


/* ==========================================================================
   v5 · Boat single, full pass
   Buy box: pill stock number, a white price card with corner dots, a
   finance line with a calculator chip, quick facts with icons, a phone
   block with a soft icon chip and round share buttons. Quote form: white
   card, icon fields, a trust note. Lower panels: ruled spec table in two
   columns and round color swatches.
   ========================================================================== */

/* --- Buy box --- */
.cs-bsingle .cs-buybox h1 {
    margin-bottom: 18px;
    font-size: 30px;
    letter-spacing: -.3px;
}
.cs-bsingle .cs-buybox__badges .cs-badge {
    height: 24px;
    padding: 0 10px;
    border-radius: 40px;
    font-size: 10px;
    line-height: 24px;
}
.cs-bsingle .cs-buybox__stock {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 40px;
    font-size: 10px;
    letter-spacing: .8px;
}
.cs-bsingle .cs-buybox__pricing {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-bsingle .cs-buybox__pricing::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background-image: radial-gradient(rgba(41, 64, 111, .18) 1.5px, transparent 1.6px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
    mask-image: linear-gradient(225deg, #000, transparent 70%);
    pointer-events: none;
}
.cs-bsingle .cs-buybox__pricing > * {
    position: relative;
}
.cs-bsingle .cs-buybox__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}
.cs-bsingle .cs-buybox__price strong {
    font-size: 36px;
    letter-spacing: -.5px;
    color: var(--heading);
}
.cs-bsingle .cs-buybox__pricing--inline .cs-buybox__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.cs-bsingle .cs-buybox__pricing--inline .cs-buybox__price strong {
    font-size: 32px;
}
.cs-bsingle .cs-buybox__save {
    height: 26px;
    padding: 0 12px;
    border-radius: 40px;
}
/* --- Quote form: white card, icon fields, trust note --- */
.cs-bsingle .cs-quote-box {
    position: relative;
    padding: 24px;
    border: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: rgba(15, 23, 43, .06) 0 4px 16px 0;
}
.cs-bsingle .cs-quote-box h3,
.cs-bsingle .cs-quote-box .h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.cs-bsingle .cs-quote-box h3::before,
.cs-bsingle .cs-quote-box .h3::before {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .15);
}
.cs-quote-box.cs-form--icons .cs-input-group .cs-input,
.cs-quote-box.cs-form--icons .cs-input-group .cs-textarea {
    height: 46px;
    padding-left: 56px;
    font-size: 14px;
}
.cs-quote-box.cs-form--icons .cs-input-group::before {
    top: 13px;
    left: 44px;
}
.cs-quote-box.cs-form--icons .cs-input-group i {
    left: 16px;
    font-size: 15px;
}
.cs-quote-box.cs-form--icons .cs-input-group--textarea {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}
.cs-quote-box.cs-form--icons .cs-input-group .cs-textarea {
    height: auto;
    min-height: 84px;
    padding-top: 12px;
    color: var(--body);
}
.cs-quote-box.cs-form--icons .cs-input-group--textarea i {
    top: 14px;
}
.cs-quote-box.cs-form--icons .cs-input-group--textarea::before {
    top: 12px;
}
.cs-quote-box.cs-form--icons .cs-field,
.cs-quote-box.cs-form--icons .cs-field + .cs-field,
.cs-quote-box.cs-form--icons .row + .cs-field {
    margin-top: 0;
    margin-bottom: 12px;
}
.cs-quote-box.cs-form--icons .row.g-3 {
    --bs-gutter-y: 12px;
    margin-bottom: 12px;
}
.cs-quote-box.cs-form--icons .row .cs-field {
    margin-bottom: 0;
}
.cs-quote-box .cs-btn-row {
    margin-top: 4px;
}
.cs-quote-box__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}
.cs-quote-box__note i {
    font-size: 14px;
    color: #047857;
}
.cs-modal .cs-quote-box {
    border: 0;
    box-shadow: none;
}

/* --- Lower panels --- */
.cs-bsingle .cs-spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}
.cs-bsingle .cs-spec-table__row,
.cs-bsingle .cs-spec-table__row:nth-child(odd) {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-light);
    background: none;
}
.cs-bsingle .cs-spec-table__row .k {
    font-size: 11px;
    letter-spacing: 1px;
}
.cs-bsingle .cs-colors__sws {
    width: auto;
    gap: 8px;
}
.cs-bsingle .cs-colors__sw {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-strong), rgba(15, 23, 43, .12) 0 2px 6px 0;
}
.cs-bsingle .cs-colors__row {
    padding: 11px 0;
    border-bottom-color: var(--border-light);
    font-weight: 500;
    color: var(--heading);
}
.cs-bsingle .cs-colors__col + .cs-colors__col {
    border-left-color: var(--border-light);
}

/* --- Dark panels and sections --- */
.bg-dark .cs-bsingle .cs-buybox__pricing,
.bg-dark .cs-bsingle .cs-quote-box {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
}
.cs-panel--dark .cs-spec-table__row,
.bg-dark .cs-bsingle .cs-spec-table__row {
    border-bottom-color: rgba(255, 255, 255, .1);
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .cs-bsingle .cs-spec-table {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575px) {
    .cs-bsingle .cs-buybox h1 {
        font-size: 24px;
    }
    .cs-bsingle .cs-buybox__price strong,
    .cs-bsingle .cs-buybox__pricing--inline .cs-buybox__price strong {
        font-size: 28px;
    }
    .cs-bsingle .cs-quote-box {
        padding: 18px;
    }
}

/* Buy box height: back to the original rhythm so it lines up with the gallery */
.cs-bsingle .cs-buybox h1 {
    margin-bottom: 16px;
    font-size: 28px;
}
.cs-bsingle .cs-buybox__pricing,
.cs-bsingle .cs-buybox__pricing--inline {
    padding: 12px 18px;
}
.cs-bsingle .cs-buybox__pricing--inline .cs-buybox__price {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.cs-bsingle .cs-buybox__pricing--inline .cs-buybox__price strong {
    font-size: 26px;
}
.cs-bsingle .cs-buybox__price strong {
    font-size: 32px;
}
.cs-bsingle .cs-quote-box {
    padding: 16px;
}
.cs-bsingle .cs-quote-box h3,
.cs-bsingle .cs-quote-box .h3 {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;
}
.cs-quote-box.cs-form--icons .cs-input-group .cs-input {
    height: 42px;
}
.cs-quote-box.cs-form--icons .cs-input-group::before {
    top: 11px;
}
.cs-quote-box.cs-form--icons .cs-input-group .cs-textarea {
    min-height: 66px;
    padding-top: 10px;
}
.cs-quote-box.cs-form--icons .cs-input-group--textarea i {
    top: 12px;
}
.cs-quote-box.cs-form--icons .cs-input-group--textarea::before {
    top: 10px;
}
.cs-quote-box .cs-btn-row {
    margin-top: 0;
}
.cs-quote-box__note {
    margin-top: 10px;
}

/* Tighter rhythm for the lower panels */
.cs-bsingle .cs-single-block {
    margin-top: 20px;
}
.cs-bsingle .cs-single-block .cs-panel {
    padding: 24px 26px;
}
.cs-bsingle .cs-single-block .cs-panel + .cs-panel,
.cs-bsingle .cs-single-block > .row + .cs-panel,
.cs-bsingle .cs-single-block .cs-panel + .row {
    margin-top: 20px;
}
.cs-bsingle .cs-single-block .row.g-4 {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}
.cs-bsingle .cs-panel__head {
    margin-bottom: 14px;
}
.cs-bsingle .cs-panel__head h3,
.cs-bsingle .cs-panel__head .h3 {
    font-size: 22px;
}
.cs-bsingle .cs-panel__head .head-label {
    margin-bottom: 4px;
}
.cs-bsingle .cs-spec-table__row,
.cs-bsingle .cs-spec-table__row:nth-child(odd) {
    padding: 11px 0;
}
/* Colors: two columns inside the panel so it matches the spec table height */
.cs-bsingle .cs-colors--single .cs-colors__col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
.cs-bsingle .cs-colors--single .cs-colors__col .cs-colors__row:last-child {
    border-bottom: 1px solid var(--border-light);
}
.cs-bsingle .cs-colors__row {
    padding: 9px 0;
    font-size: 13px;
}
.cs-bsingle .cs-colors__sw {
    width: 26px;
    height: 26px;
}
.cs-bsingle .cs-panel .cs-list li + li {
    margin-top: 6px;
}
.cs-bsingle .cs-spec-note {
    margin-top: 14px;
}
.cs-bsingle .cs-embed-title {
    margin-bottom: 10px;
}
@media (max-width: 575px) {
    .cs-bsingle .cs-single-block .cs-panel {
        padding: 20px 18px;
    }
    .cs-bsingle .cs-colors--single .cs-colors__col {
        grid-template-columns: 1fr;
    }
}
/* A row after a panel: its columns already carry the 20px gutter on top */
.cs-bsingle .cs-single-block .cs-panel + .row {
    margin-top: 0;
}

/* Panel heads: icon chip and title on one line, hairline under */
.cs-panel__head--icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.cs-bsingle .cs-panel__head--icon {
    margin-bottom: 16px;
}
.cs-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--primary);
    background: var(--primary-tint-10);
}
.cs-panel__head--icon h3,
.cs-panel__head--icon .h3,
.cs-bsingle .cs-panel__head--icon h3,
.cs-bsingle .cs-panel__head--icon .h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}
.cs-panel--dark .cs-panel__head--icon,
.bg-dark .cs-panel__head--icon {
    border-bottom-color: rgba(255, 255, 255, .1);
}
.cs-panel--dark .cs-panel__icon,
.bg-dark .cs-panel__icon {
    color: var(--white);
    background: var(--primary);
}

/* Calculator: four fields in a 2 x 2 grid, loan amount and button on one
   foot row, result box as tall as the fields */
.cs-bsingle .cs-calc {
    align-items: stretch;
    gap: 24px;
}
.cs-bsingle .cs-calc .row.g-3 {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
    margin-bottom: 0;
}
.cs-bsingle .cs-calc .cs-field {
    margin-bottom: 0;
}
.cs-bsingle .cs-calc .cs-label {
    margin-bottom: 6px;
    font-size: 11px;
}
.cs-bsingle .cs-calc .cs-input {
    height: 46px;
}
.cs-calc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.cs-calc__loanbox .cs-label {
    margin-bottom: 2px;
}
.cs-bsingle .cs-calc__loan {
    font-size: 20px;
    line-height: 1.2;
}
.cs-bsingle .cs-calc__result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 28px;
}
.cs-bsingle .cs-calc__result p {
    margin-bottom: 18px;
}
.bg-dark .cs-calc__foot,
.cs-panel--dark .cs-calc__foot {
    border-top-color: rgba(255, 255, 255, .1);
}
@media (max-width: 575px) {
    .cs-calc__foot {
        flex-direction: column;
        align-items: stretch;
    }
    .cs-calc__foot .cs-btn {
        width: 100%;
    }
}

/* Panel heads: title with a short red bar under it, no eyebrow, no icon */
.cs-panel__head--line {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: 0;
}
.cs-bsingle .cs-panel__head--line {
    margin-bottom: 18px;
}
.cs-panel__head--line h3,
.cs-panel__head--line .h3,
.cs-bsingle .cs-panel__head--line h3,
.cs-bsingle .cs-panel__head--line .h3 {
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    font-size: 21px;
    line-height: 1.25;
}
.cs-panel__head--line h3::after,
.cs-panel__head--line .h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: var(--primary);
}

/* Panel heads: a card header. Plain title, hairline running edge to edge */
.cs-panel__head--line h3::after,
.cs-panel__head--line .h3::after {
    content: none;
}
.cs-panel__head--line,
.cs-bsingle .cs-panel__head--line {
    margin: -24px -26px 20px;
    padding: 18px 26px;
    border-bottom: 1px solid var(--border-light);
}
.cs-panel__head--line h3,
.cs-panel__head--line .h3,
.cs-bsingle .cs-panel__head--line h3,
.cs-bsingle .cs-panel__head--line .h3 {
    padding-bottom: 0;
    font-size: 19px;
}
.cs-panel--dark .cs-panel__head--line,
.bg-dark .cs-panel__head--line {
    border-bottom-color: rgba(255, 255, 255, .1);
}
@media (max-width: 575px) {
    .cs-panel__head--line,
    .cs-bsingle .cs-panel__head--line {
        margin: -20px -18px 18px;
        padding: 16px 18px;
    }
}

/* Motor specifications: a grid of cells, label over value, hairlines */
.cs-spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
}
.cs-spec-grid__cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.cs-spec-grid__cell .k {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--muted);
}
.cs-spec-grid__cell .v {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading);
}
.cs-panel--dark .cs-spec-grid,
.cs-panel--dark .cs-spec-grid__cell,
.bg-dark .cs-spec-grid,
.bg-dark .cs-spec-grid__cell {
    border-color: rgba(255, 255, 255, .1);
}
.cs-panel--dark .cs-spec-grid__cell .v,
.bg-dark .cs-spec-grid__cell .v {
    color: var(--white);
}
@media (max-width: 991px) {
    .cs-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .cs-spec-grid__cell {
        padding: 12px;
    }
    .cs-spec-grid__cell .v {
        font-size: 14px;
    }
}

/* Motor specifications, simple border style: two columns of rows, label
   left, value right, one hairline under each row */
.cs-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border: 0;
}
.cs-spec-grid__cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
}
.cs-spec-grid__cell .k {
    flex: 0 0 auto;
    max-width: 50%;
}
.cs-spec-grid__cell .v {
    font-size: 14px;
    text-align: right;
}
@media (max-width: 991px) {
    .cs-spec-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575px) {
    .cs-spec-grid__cell {
        padding: 11px 0;
    }
}

/* Card header accent: a red bar on the panel edge beside the title */
.cs-panel__head--line {
    position: relative;
}
.cs-panel__head--line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    width: 3px;
    height: 24px;
    background: var(--primary);
    transform: translateY(-50%);
}
/* Quote box fields carry their own 12px bottom margin, so the row keeps its
   negative top margin and the gap stays 12px */
.cs-quote-box.cs-form--icons .cs-field + .row {
    margin-top: -12px;
}