.announcement-wrapper {
    background: linear-gradient(
        90deg,
        #b9141b 0%,
        #e31b23 35%,
        #e31b23 65%,
        #b9141b 100%
    ) !important ;
}


/* =========================================================
   MOTOCITY FLORIDA - BRAND THEME   (store 5303)
   =========================================================
   Converted 2026-08-14 from the hand-written .mc-* mockup
   stylesheet to the storefront brand hooks.

   Reference: dtfAdminv.2\docs\shopping-cart-storefront-brand-hooks.html
              - read "Hook index" and "Status & backlog" first.

   HOW THIS FILE IS ORGANISED
     1. Brand tokens          - the single place to change a colour
     2. Preserved rules       - what was in this file before
     3. Live hooks            - .dtf-* classes the storefront really emits
     4. Unmapped .mc-*        - kept verbatim; no hook exists for these yet

   RULES OF THE ROAD
     - No !important needed. The shared defaults use :where() (zero
       specificity), so a plain class rule here always wins.
       Two exceptions, both noted inline: .dtf-attr-src and .dtf-price-spin.
     - NEVER put display:grid on .dtf-cat-grid or .dtf-home-row - those
       ARE Bootstrap .row elements with col-* children. Style the cards.
     - Hooks are appended to existing bespoke classes, never replacing
       them, so anything you see here co-exists with the platform CSS.
   ========================================================= */


/* =========================================================
   1. BRAND TOKENS
   ========================================================= */

body {
    /* Brand Colors */
    --mc-red: #e31b23;
    --mc-red-dark: #b9141b;
    --mc-black: #0d0d0d;
    --mc-charcoal: #1f1f1f;
    --mc-dark-gray: #2b2b2b;
    --mc-gray: #6b6b6b;
    --mc-light-gray: #f4f4f4;
    --mc-border: #e6e6e6;
    --mc-white: #ffffff;

    /* Typography */
    --mc-font-heading: "Montserrat", Arial, sans-serif;
    --mc-font-body: "Montserrat", Arial, sans-serif;

    /* Layout */
    --mc-radius: 10px;
    --mc-radius-sm: 6px;
    --mc-container: 1320px;

    /* Shadows */
    --mc-shadow-sm: 0 4px 14px rgba(0,0,0,.08);
    --mc-shadow: 0 10px 30px rgba(0,0,0,.12);

    /* Transition */
    --mc-transition: all .25s ease;

    /* ---- Bridge into the names the platform's own emitted CSS reads.
            Setting these three brands the option pills and the price
            spinner automatically - no other rule needed. ---- */
    --dtf-badge:      var(--mc-red);
    --dtf-badge-text: var(--mc-white);
    --df-blue:        var(--mc-red);
}


/* =========================================================
   2. PRESERVED - these were already in this file
   ========================================================= */

/* checkout buttons: */
.checkoutbtn{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }
.checkoutbtn:hover{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }

/* fixed banners: */
#fixedpanelleft{  }
#fixedpanelright{  }
#fixedpanelbottom{  }


/* =========================================================
   3. GLOBAL
   ---------------------------------------------------------
   Deliberately narrow. The original mockup styled bare h1/h2,
   which would have reformatted every product title and every
   admin-authored description on the site.
   ========================================================= */

body {
    font-family: var(--mc-font-body);
    color: var(--mc-charcoal);
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: var(--mc-red);
    transition: var(--mc-transition);
}

a:hover {
    color: var(--mc-red-dark);
}


/* =========================================================
   4. BUTTONS
   ---------------------------------------------------------
   One concept, a different prefix on every page. Grouped so
   they cannot drift apart.
   ========================================================= */

/* --- Primary: add-to-cart, product CTAs, checkout advance --- */
.dtf-cta,
.dtf-prod-cta,
.dtf-cat-cta,
.dtf-subcat-cta,
.dtf-suggested-cta,
.dtf-order-guest-cta,
.dtf-order-login-cta,
.dtf-ship-continue,
.dtf-pay-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--mc-radius-sm);
    border: 2px solid transparent;
    background: var(--mc-red);
    color: var(--mc-white);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    transition: var(--mc-transition);
    cursor: pointer;
}

.dtf-cta:hover,
.dtf-prod-cta:hover,
.dtf-cat-cta:hover,
.dtf-subcat-cta:hover,
.dtf-suggested-cta:hover,
.dtf-order-guest-cta:hover,
.dtf-order-login-cta:hover,
.dtf-ship-continue:hover,
.dtf-pay-submit:hover {
    background: var(--mc-red-dark);
    color: var(--mc-white);
    transform: translateY(-2px);
}

/* --- Outline: secondary / back / read-more --- */
.dtf-prod-cta--readmore,
.dtf-prod-cta--learn,
.dtf-prod-more,
.dtf-cat-empty-cta,
.dtf-order-keepshop,
.dtf-order-guest-back,
.dtf-ship-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--mc-radius-sm);
    border: 2px solid var(--mc-red);
    background: transparent;
    color: var(--mc-red);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    transition: var(--mc-transition);
    cursor: pointer;
}

.dtf-prod-cta--readmore:hover,
.dtf-prod-cta--learn:hover,
.dtf-prod-more:hover,
.dtf-cat-empty-cta:hover,
.dtf-order-keepshop:hover,
.dtf-order-guest-back:hover,
.dtf-ship-back:hover {
    background: var(--mc-red);
    color: var(--mc-white);
}

/* --- Dark: utility actions --- */
.dtf-order-recalc,
.dtf-prod-signin,
.dtf-prod-signin--subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--mc-radius-sm);
    border: 2px solid transparent;
    background: var(--mc-black);
    color: var(--mc-white);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    transition: var(--mc-transition);
}

.dtf-order-recalc:hover,
.dtf-prod-signin:hover,
.dtf-prod-signin--subscribe:hover {
    background: var(--mc-charcoal);
    color: var(--mc-white);
}


/* =========================================================
   5. PRODUCT CARDS  - .dtf-prod-*
   ---------------------------------------------------------
   Cross-page family: emitted by CreateProductList (category)
   AND fncCreateProductList (home). One rule brands both.
   ========================================================= */

.dtf-prod-card {
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    overflow: hidden;
    box-shadow: var(--mc-shadow-sm);
    transition: var(--mc-transition);
}

.dtf-prod-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--mc-shadow);
}

.dtf-prod-thumb {
    display: block;
    background: #fafafa;
    padding: 20px;
}

.dtf-prod-img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: contain;
}

.dtf-prod-img--placeholder {
    opacity: .45;
}

.dtf-prod-name,
.dtf-prod-namelink {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
    margin-bottom: 4px;
}

.dtf-prod-namelink:hover {
    color: var(--mc-red);
}

.dtf-prod-price {
    font-size: 23px;
    font-weight: 800;
    color: var(--mc-black);
    margin-bottom: 15px;
}

.dtf-prod-price--was {
    font-size: 16px;
    font-weight: 600;
    color: var(--mc-gray);
    text-decoration: line-through;
}

.dtf-prod-price--sale {
    color: var(--mc-red);
}

.dtf-prod-noprice {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--mc-gray);
}

.dtf-prod-actions {
    text-align: center;
    padding-bottom: 4px;
}


/* =========================================================
   6. CATEGORY PAGE  - .dtf-cat-*
   ---------------------------------------------------------
   .dtf-cat-grid is the Bootstrap .row - do NOT make it a
   CSS grid, the col-* children will collapse.
   ========================================================= */

.dtf-cat-card {
    background: var(--mc-light-gray);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 22px;
    text-align: center;
    transition: var(--mc-transition);
}

.dtf-cat-card:hover {
    background: var(--mc-white);
    box-shadow: var(--mc-shadow);
    transform: translateY(-5px);
}

.dtf-cat-img {
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 15px;
}

.dtf-cat-name {
    font-family: var(--mc-font-heading);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
    margin-bottom: 3px;
}

.dtf-cat-body {
    font-size: 13px;
    color: var(--mc-gray);
    text-transform: uppercase;
}

.dtf-cat-breadcrumb {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mc-gray);
}

.dtf-cat-desc {
    color: var(--mc-charcoal);
}

.dtf-cat-filters {
    padding: 10px 0;
    border-bottom: 1px solid var(--mc-border);
}

.dtf-cat-empty {
    border-left: 4px solid var(--mc-red);
    background: var(--mc-light-gray);
    padding: 16px;
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
}

/* Pagers - .dtf-cat-pager-* on the category grid,
   .dtf-pager-* on product lists (shared CreateDivPagination). */
.dtf-cat-pager-link,
.dtf-pager-link {
    color: var(--mc-black);
    font-weight: 700;
}

.dtf-cat-pager-link:hover,
.dtf-pager-link:hover {
    color: var(--mc-red);
}


/* =========================================================
   7. PRODUCT DETAIL  - .dtf-sec--* and inner hooks
   ========================================================= */

.dtf-sec {
    margin-bottom: 1.5rem;
}

.dtf-title {
    font-family: var(--mc-font-heading);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
    letter-spacing: -.5px;
    line-height: 1.15;
}

.dtf-item {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--mc-gray);
}

.dtf-price-value {
    font-size: 30px;
    font-weight: 800;
    color: var(--mc-black);
}

.dtf-shortdesc {
    color: var(--mc-charcoal);
}

.dtf-longdesc {
    color: var(--mc-charcoal);
}

.dtf-images {
    background: transparent;
}

/* Tab navigation on the product page */
.dtf-menutabs .nav-link {
    color: var(--mc-gray);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}

.dtf-menutabs .nav-link.active {
    color: var(--mc-black);
    border-bottom: 3px solid var(--mc-red);
}

.dtf-turnaround {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

.dtf-contact {
    border-left: 4px solid var(--mc-red);
}


/* --- Specification table - .dtf-specs-* ---
   NOTE: this family ships three lines of default CSS that swap the
   toggle caption on [aria-expanded]. That is behaviour, not styling.
   Override the look below; do not try to remove it. */

.dtf-specs-title {
    font-family: var(--mc-font-heading);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
}

.dtf-specs-table {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
}

.dtf-specs-row:nth-child(odd) {
    background: var(--mc-light-gray);
}

.dtf-specs-label {
    width: 45%;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--mc-gray);
}

.dtf-specs-value {
    font-weight: 600;
    color: var(--mc-charcoal);
}

.dtf-specs-unit {
    color: var(--mc-gray);
    font-weight: 400;
}

.dtf-specs-toggle {
    background: transparent;
    border: 0;
    color: var(--mc-red);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
}


/* --- Attribute pills - .dtf-attr-* ---
   The fill colour already follows --dtf-badge, set in section 1.
   Only shape is overridden here.
   Do NOT restyle .dtf-attr-src - it hides the real <select>. */

.dtf-attr-badge {
    border-radius: var(--mc-radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

.dtf-attr-badge.on {
    border-color: transparent;
}


/* --- Price spinner ---
   The only place !important is justified: this default is a normal
   0,1,0 class rule injected by JS AFTER this stylesheet, so an equal
   -specificity rule here would lose on load order. */
.dtf-price-spin {
    border-top-color: var(--mc-red) !important;
}

/* =========================================================
   8. PRODUCT DETAIL  
   ---------------------------------------------------------
    
   ========================================================= */

.dtf-contact       { border-left: 4px solid var(--mc-red); text-align: left; }
.dtf-contact-text  { font-weight: 600; }
.dtf-contact-cta   { padding: 13px 24px; font-size: 14px; font-weight: 800;
                     text-transform: uppercase; background: var(--mc-red);
                     color: var(--mc-white); border-radius: var(--mc-radius-sm); }





/* =========================================================
   8. HOME PAGE  - .dtf-home-*
   ---------------------------------------------------------
   .dtf-home-row is the Bootstrap .row - not a CSS grid.
   ========================================================= */

.dtf-home-head {
    text-align: center;
    margin-bottom: 35px;
}

.dtf-home-title {
    font-family: var(--mc-font-heading);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
    line-height: 1.15;
    margin-bottom: 10px;
}

.dtf-home-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--mc-gray);
    text-transform: none;
}

/* Per-block accents. NOTE: the heading text is a plain string from
   the tenant's Custom Label field - there is no <span> inside it, so
   a two-tone word is not possible without typing HTML into that field. */
.dtf-home-head--new .dtf-home-title {
    color: var(--mc-black);
}

.dtf-home-head--best .dtf-home-title {
    color: var(--mc-black);
}

.dtf-home-head--cat .dtf-home-title {
    color: var(--mc-black);
}

.dtf-home-empty-box {
    background: var(--mc-light-gray);
    border-radius: var(--mc-radius);
    padding: 40px 20px;
    text-align: center;
    color: var(--mc-gray);
}


/* =========================================================
   9. "YOU MIGHT ALSO LIKE"  - .dtf-suggested-*
   ========================================================= */

.dtf-suggested-title {
    font-family: var(--mc-font-heading);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--mc-black);
}

.dtf-suggested-card {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    overflow: hidden;
    transition: var(--mc-transition);
}

.dtf-suggested-card:hover {
    box-shadow: var(--mc-shadow);
    transform: translateY(-4px);
}

.dtf-suggested-name {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
}


/* =========================================================
   10. CHECKOUT  - order / shipping / payments / confirm
   ---------------------------------------------------------
   Same concept, four prefixes. Grouped on purpose.
   ========================================================= */

/* --- Summary card --- */
.dtf-order-summary,
.dtf-ship-summary,
.dtf-pay-summary,
.dtf-confirm-summary {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    overflow: hidden;
}

/* --- Card / section titles --- */
.dtf-order-title,
.dtf-ship-summary-title,
.dtf-pay-summary-title,
.dtf-confirm-summary-title,
.dtf-pay-card-title,
.dtf-confirm-card-title {
    font-family: var(--mc-font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .03em;
    color: var(--mc-black);
}

/* --- Card headers --- */
.dtf-order-summary-head,
.dtf-ship-summary-head,
.dtf-pay-summary-head,
.dtf-confirm-summary-head,
.dtf-ship-step-head,
.dtf-pay-method-head {
    background: var(--mc-black);
    color: var(--mc-white);
}

.dtf-order-summary-head .dtf-order-title,
.dtf-ship-summary-head .dtf-ship-summary-title,
.dtf-pay-summary-head .dtf-pay-summary-title,
.dtf-confirm-summary-head .dtf-confirm-summary-title {
    color: var(--mc-white);
}

/* --- Cart lines --- */
.dtf-order-item,
.dtf-ship-item,
.dtf-pay-item,
.dtf-confirm-item {
    border-bottom: 1px solid var(--mc-border);
    padding-top: 12px;
    padding-bottom: 12px;
}

.dtf-order-item-name,
.dtf-ship-item-name,
.dtf-pay-item-name,
.dtf-confirm-item-name {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--mc-black);
}

.dtf-order-item-id,
.dtf-confirm-item-meta {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--mc-gray);
}

/* --- Grand total --- */
.dtf-order-total,
.dtf-ship-total-grand,
.dtf-pay-total-grand,
.dtf-confirm-total-grand {
    border-top: 2px solid var(--mc-red);
    font-size: 20px;
    font-weight: 800;
    color: var(--mc-black);
}

/* --- Free / saving accents --- */
.dtf-ship-total-shipping--free,
.dtf-pay-total-shipping--free,
.dtf-ship-total-save,
.dtf-pay-total-freeship,
.dtf-confirm-total-freeship {
    color: #1a7f4b;
    font-weight: 700;
}

.dtf-ship-total-threshold {
    color: var(--mc-red);
    font-weight: 700;
}

/* --- Alerts --- */
.dtf-ship-alert,
.dtf-pay-alert,
.dtf-confirm-alert,
.dtf-order-error,
.dtf-order-guest-error,
.dtf-order-guest-warn {
    border-left: 4px solid var(--mc-red);
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
}

.dtf-order-minorder {
    border-left: 4px solid var(--mc-red);
    font-weight: 700;
}

/* --- Checkout step bar --- */
.dtf-checkout-steps {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.dtf-checkout-step--current {
    color: var(--mc-red);
    font-weight: 800;
}

.dtf-checkout-step--done {
    color: var(--mc-black);
}

.dtf-checkout-step--todo {
    opacity: .45;
}

.dtf-checkout-sep {
    opacity: .35;
}

/* --- Carrier rates --- */
.dtf-rate-item {
    border-radius: var(--mc-radius-sm);
    transition: var(--mc-transition);
}

.dtf-rate-item.active {
    border-color: var(--mc-red);
    background: rgba(227,27,35,.06);
}

.dtf-rate-price {
    font-weight: 800;
    color: var(--mc-black);
}

.dtf-rate-note--mock {
    color: var(--mc-gray);
    font-style: italic;
}

/* --- Saved addresses / saved cards --- */
.dtf-addr-card,
.dtf-cc-item {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-sm);
}

.dtf-addr-fav {
    color: var(--mc-red);
}

/* --- Confirm page --- */
.dtf-confirm-orderno {
    font-family: var(--mc-font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--mc-red);
}


/* =========================================================
   PROMO BAND - .dtf-promo-*
   Brand tokens with fallbacks, so it also works in a tenant
   that has no --mc-* set.
   ========================================================= */

.dtf-promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 440px;
    overflow: hidden;
    border-radius: var(--mc-radius, 10px);
    color: var(--mc-white, #fff);
    background-color: var(--mc-black, #0d0d0d);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Lighter than the hero scrim - the left third is already mid-dark
   foliage, so it needs help but not blanket-out. */
.dtf-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,.80) 0%,
        rgba(0,0,0,.58) 30%,
        rgba(0,0,0,.22) 55%,
        rgba(0,0,0,0)   80%);
}

.dtf-promo-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--mc-container, 1320px);
    margin: 0 auto;
    padding: 44px 20px;
}

.dtf-promo-content { max-width: 500px; }

.dtf-promo-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid var(--mc-red, #e31b23);
    border-radius: 999px;
    background: rgba(227,27,35,.16);
    color: var(--mc-white, #fff);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dtf-promo-title {
    margin: 0 0 16px;
    font-family: var(--mc-font-heading, "Montserrat", Arial, sans-serif);
    font-size: clamp(32px, 4.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: var(--mc-white, #fff);
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

.dtf-promo-title span { color: var(--mc-red, #e31b23); }

.dtf-promo-text {
    max-width: 430px;
    margin-bottom: 24px;
    font-size: 17px;
    color: #ececec;
}

.dtf-promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border: 2px solid var(--mc-red, #e31b23);
    border-radius: var(--mc-radius-sm, 6px);
    background: var(--mc-red, #e31b23);
    color: var(--mc-white, #fff);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--mc-transition, all .25s ease);
}

.dtf-promo-cta:hover {
    background: var(--mc-red-dark, #b9141b);
    border-color: var(--mc-red-dark, #b9141b);
    color: var(--mc-white, #fff);
    transform: translateY(-2px);
}

/* --- skin: image only ---
   2048x768 (2.67:1). Wider than tall, so at desktop widths `cover` matches
   the width and crops very little. On narrow screens it crops horizontally
   instead - the riders are centred, so `center` keeps them in frame. */
.dtf-promo--scooters {
    background-image: url("/pictures/electric-scooters-moped-wholesale.png");
    background-position: center center;
}

@media (max-width: 991px) {

    .dtf-promo { min-height: 380px; }
    .dtf-promo-content { max-width: 100%; }

    .dtf-promo::before {
        background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.78));
    }
}

@media (max-width: 575px) {

    .dtf-promo { min-height: 340px; border-radius: 0; }
    .dtf-promo-title { font-size: 32px; }
    .dtf-promo-cta { width: 100%; }
}








/* =========================================================
   11. FORM CONTROLS
   ---------------------------------------------------------
   The hooks sit on the field WRAPPER, so these are descendant
   selectors rather than a direct .mc-form-control rename.
   ========================================================= */

.dtf-order-field input,
.dtf-order-field select,
.dtf-order-field textarea,
.dtf-addr-form input,
.dtf-addr-form select,
.dtf-pay-cc-form input,
.dtf-pay-cc-form select,
.dtf-pay-bill-form input,
.dtf-pay-bill-form select,
.dtf-ccedit-form input,
.dtf-ccedit-form select,
.dtf-pay-remarks-input {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d8d8d8;
    border-radius: var(--mc-radius-sm);
    background: #f8f8f8;
    color: var(--mc-charcoal);
    font-family: var(--mc-font-body);
    transition: var(--mc-transition);
}

.dtf-order-field input:focus,
.dtf-order-field select:focus,
.dtf-order-field textarea:focus,
.dtf-addr-form input:focus,
.dtf-addr-form select:focus,
.dtf-pay-cc-form input:focus,
.dtf-pay-cc-form select:focus,
.dtf-pay-bill-form input:focus,
.dtf-pay-bill-form select:focus,
.dtf-ccedit-form input:focus,
.dtf-ccedit-form select:focus,
.dtf-pay-remarks-input:focus {
    outline: none;
    border-color: var(--mc-red);
    background: var(--mc-white);
    box-shadow: 0 0 0 3px rgba(227,27,35,.10);
}


/* =========================================================
   12. SIDE MENU  (category + product detail + order)
   ========================================================= */

.dtf-sidemenu-toggle {
    background: var(--mc-black);
    color: var(--mc-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    border-radius: var(--mc-radius-sm);
}

.dtf-sidemenu-list a {
    color: var(--mc-charcoal);
    font-weight: 600;
}

.dtf-sidemenu-list a:hover {
    color: var(--mc-red);
}


/* =========================================================
   13. RESPONSIVE
   ---------------------------------------------------------
   The card grids are Bootstrap columns and already reflow, so
   only the type scale and the hand-built blocks need help.
   ========================================================= */

@media (max-width: 991px) {

    .dtf-prod-img {
        height: 190px;
    }

    .dtf-cat-img {
        height: 120px;
    }
}

@media (max-width: 575px) {

    .dtf-home-title {
        font-size: 30px;
    }

    .dtf-prod-img {
        height: 200px;
    }

    .dtf-specs-label {
        width: 50%;
    }
}


/* =========================================================
   HERO - .dtf-hero-*
   Self-contained: no dependency on any other block.
   Set the brand colour once, here.
   ========================================================= */

.dtf-hero {
    --dtf-hero-accent: #e31b23;
    --dtf-hero-ink:    #ffffff;

    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    color: var(--dtf-hero-ink);
    background-color: #0d0d0d;      /* shown while the photo loads */
    background-repeat: no-repeat;
    background-size: cover;
}

/* Legibility scrim. Mandatory: at desktop widths the bike spans the FULL
   width of this section (see the note below), so the headline sits on top
   of it no matter where the text is placed. */
.dtf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.74) 32%,
        rgba(0,0,0,.38) 58%,
        rgba(0,0,0,.10) 100%);
}

.dtf-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 20px;
}

.dtf-hero-content { max-width: 560px; }

.dtf-hero-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border: 1px solid var(--dtf-hero-accent);
    border-radius: 999px;
    background: rgba(227,27,35,.14);
    color: var(--dtf-hero-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dtf-hero-title {
    margin: 0 0 18px;
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: var(--dtf-hero-ink);
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.dtf-hero-title span { color: var(--dtf-hero-accent); }

.dtf-hero-text {
    max-width: 470px;
    margin-bottom: 28px;
    font-size: 18px;
    color: #e2e2e2;
}

.dtf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.dtf-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border: 2px solid var(--dtf-hero-accent);
    border-radius: 6px;
    background: var(--dtf-hero-accent);
    color: var(--dtf-hero-ink);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s ease;
}

.dtf-hero-cta:hover { filter: brightness(.88); color: var(--dtf-hero-ink); }

.dtf-hero-cta--ghost {
    background: transparent;
    border-color: rgba(255,255,255,.45);
    color: var(--dtf-hero-ink);
}

.dtf-hero-cta--ghost:hover {
    background: var(--dtf-hero-ink);
    border-color: var(--dtf-hero-ink);
    color: #0d0d0d;
    filter: none;
}

/* --- skin: image only ---
   1024x687 (1.49:1). At desktop widths this section is wider than that,
   so `cover` scales the image to the FULL width and crops top/bottom only.
   That means the X value in background-position does nothing here - only
   the Y matters. 45% favours the bike over the floor. */
.dtf-hero--xmt250 {
    background-image: url("/pictures/shoppingcart/XMT250ccWhite.jpg");
    background-position: center 45%;
}

@media (max-width: 991px) {

    .dtf-hero { min-height: 460px; }
    .dtf-hero-content { max-width: 100%; }

    .dtf-hero::before {
        background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.80));
    }
}

@media (max-width: 575px) {

    .dtf-hero { min-height: 420px; }
    .dtf-hero-title { font-size: 36px; }
    .dtf-hero-actions .dtf-hero-cta { width: 100%; }
}




/* =========================================================
   14. NO HOOK EXISTS - hand-built pages only
   =========================================================
   The storefront renderers do not emit these elements, so there
   is nothing to rename them to. They are kept verbatim so any
   hand-built landing page or designer widget that uses the
   .mc-* markup still renders correctly.

   If/when the header menu family is documented (see the doc's
   Status & backlog, item 5), the topbar/header/nav blocks below
   can move up into section 3.
   ========================================================= */

.mc-container {
    width: 100%;
    max-width: var(--mc-container);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.mc-text-red   { color: var(--mc-red); }
.mc-text-white { color: var(--mc-white); }

.mc-section-title        { text-align: center; margin-bottom: 35px; }
.mc-section-title span   { color: var(--mc-red); }

.mc-section       { padding: 70px 0; }
.mc-section-gray  { background: var(--mc-light-gray); }

.mc-section-dark {
    background: var(--mc-black);
    color: var(--mc-white);
    padding: 70px 0;
}

.mc-section-dark h2,
.mc-section-dark h3 { color: var(--mc-white); }

/* ---- Top promo bar ---- */
.mc-topbar {
    background: var(--mc-red);
    color: var(--mc-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.mc-topbar-inner {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    min-height: 38px;
}

.mc-topbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Header / navigation ---- */
.mc-header {
    background: var(--mc-black);
    color: var(--mc-white);
}

.mc-header-inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-logo img { max-height: 52px; }

.mc-nav {
    display: flex;
    gap: 26px;
    align-items: center;
}

.mc-nav a {
    color: var(--mc-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.mc-nav a:hover,
.mc-nav a.active { color: var(--mc-red); }


/* =========================================================
   PRODUCT LINE-UP - .dtf-lineup-*
   Storefront photo beside a list of what the store sells.
   Brand tokens with fallbacks.
   ========================================================= */

.dtf-lineup {
    padding: 70px 0;
    background: var(--mc-light-gray, #f4f4f4);
}

.dtf-lineup-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: var(--mc-container, 1320px);
    margin: 0 auto;
    padding: 0 20px;
}

/* red corner accent behind the photo */
.dtf-lineup-media { position: relative; }

.dtf-lineup-media::before {
    content: "";
    position: absolute;
    left: -14px;
    bottom: -14px;
    width: 45%;
    height: 55%;
    border-left: 6px solid var(--mc-red, #e31b23);
    border-bottom: 6px solid var(--mc-red, #e31b23);
    border-radius: 0 0 0 var(--mc-radius, 10px);
}

.dtf-lineup-img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mc-radius, 10px);
    box-shadow: var(--mc-shadow, 0 10px 30px rgba(0,0,0,.12));
}

.dtf-lineup-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--mc-red, #e31b23);
    color: var(--mc-white, #fff);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dtf-lineup-title {
    margin: 0 0 14px;
    font-family: var(--mc-font-heading, "Montserrat", Arial, sans-serif);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: var(--mc-black, #0d0d0d);
}

.dtf-lineup-title span { color: var(--mc-red, #e31b23); }

.dtf-lineup-text {
    margin-bottom: 26px;
    font-size: 17px;
    color: var(--mc-gray, #6b6b6b);
}

.dtf-lineup-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtf-lineup-item {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid var(--mc-border, #e6e6e6);
    border-left: 4px solid var(--mc-red, #e31b23);
    border-radius: var(--mc-radius-sm, 6px);
    background: var(--mc-white, #fff);
    color: var(--mc-black, #0d0d0d);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--mc-transition, all .25s ease);
}

.dtf-lineup-item:hover {
    background: var(--mc-black, #0d0d0d);
    border-color: var(--mc-black, #0d0d0d);
    border-left-color: var(--mc-red, #e31b23);
    color: var(--mc-white, #fff);
    transform: translateX(3px);
}

@media (max-width: 991px) {

    .dtf-lineup { padding: 48px 0; }

    .dtf-lineup-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dtf-lineup-media::before { display: none; }
}

@media (max-width: 575px) {

    .dtf-lineup-list { grid-template-columns: 1fr; }
}









/* ---- Hero: split stage ----
   Built for a product photo on a WHITE background (a cutout, not a
   photographic scene). The photo sits on a light "stage" panel so its
   white background melts into the panel, and the headline lives on the
   black band beside it.

   If you later get a TRANSPARENT PNG cutout, drop .mc-hero-stage and
   put the image straight on the black band - and remove the
   mix-blend-mode below, or the scooter will render black. */

.mc-hero--stage {
    background: var(--mc-black);
    color: var(--mc-white);
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.mc-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.mc-hero-content { max-width: 650px; }

.mc-hero-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(227,27,35,.14);
    border: 1px solid var(--mc-red);
    color: var(--mc-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mc-hero--stage h1 {
    font-family: var(--mc-font-heading);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: var(--mc-white);
    margin-bottom: 18px;
}

.mc-hero--stage h1 span { color: var(--mc-red); }

.mc-hero--stage p {
    font-size: 18px;
    max-width: 460px;
    color: #d6d6d6;
    margin-bottom: 28px;
}

.mc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* the outline button needs a light border on the dark panel */
.mc-btn-outline--onDark {
    border-color: rgba(255,255,255,.45);
    color: var(--mc-white);
}

.mc-btn-outline--onDark:hover {
    background: var(--mc-white);
    border-color: var(--mc-white);
    color: var(--mc-black);
}

/* the stage: a light panel the photo's white background melts into */
.mc-hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    border-radius: var(--mc-radius);
    background:
        radial-gradient(ellipse at 50% 55%,
            #ffffff 0%,
            #ffffff 55%,
            #f1f1f1 78%,
            #e7e7e7 100%);
}

/* red floor glow - reads as brand rather than a grey box */
.mc-hero-stage::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 12%;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(227,27,35,.32), transparent 70%);
    filter: blur(6px);
}

.mc-hero-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    /* kills the off-white fringe JPEG compression leaves on a cutout.
       Only works because the stage is light - see the note above. */
    mix-blend-mode: multiply;
}

/* ---- Hero: photographic scene ----
   For a real photo with a subject in it (not a cutout). Use this when
   the image is a scene; use .mc-hero--stage above when it is a product
   cutout on white. The two coexist - pick one per section.

   The scrim below is NOT decoration: white text over water and gravel
   texture is unreadable without it. If you lighten it for a punchier
   photo, check the paragraph, not just the headline.

   Structure is shared: .mc-hero-eyebrow, .mc-hero-actions and
   .mc-btn-outline--onDark are defined once, up in the stage hero. */

.mc-hero--photo {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    color: var(--mc-white);
    background-color: var(--mc-black);   /* shows while the photo loads */
    background-repeat: no-repeat;
    background-size: cover;
}

/* legibility scrim: heavy at the text edge, clear over the subject */
.mc-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.72) 34%,
        rgba(0,0,0,.35) 60%,
        rgba(0,0,0,.10) 100%
    );
}

/* seats the section against the band below it */
.mc-hero--photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55));
}

.mc-hero--photo .mc-container { position: relative; z-index: 2; }

.mc-hero--photo .mc-hero-content { max-width: 560px; }

.mc-hero--photo h1 {
    font-family: var(--mc-font-heading);
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: var(--mc-white);
    margin-bottom: 18px;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.mc-hero--photo h1 span { color: var(--mc-red); }

.mc-hero--photo p {
    font-size: 18px;
    max-width: 470px;
    color: #e2e2e2;
    margin-bottom: 28px;
}

/* --- P6 skin: supplies the image and its framing, nothing else ---
   The source is square (800x800) and the rider sits centre-left, so the
   window is pulled left to push him clear of the headline. A wider crop
   (about 1920x800) would look better and load lighter - if you export
   one, reset background-position to center. */
.mc-hero--p6 {
    background-image: url("/pictures/ebikes_wholesale_direct_fort_lauderdale.jpg");
    background-position: 28% 42%;
}

@media (max-width: 991px) {

    .mc-hero--photo  { min-height: 460px; }
    .mc-hero--p6     { background-position: 40% 40%; }
    .mc-hero--photo .mc-hero-content { max-width: 100%; }

    /* a square source reads better with an even scrim once stacked */
    .mc-hero--photo::before {
        background: linear-gradient(
            180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.78) 100%
        );
    }
}

@media (max-width: 575px) {

    .mc-hero--photo    { min-height: 420px; }
    .mc-hero--photo h1 { font-size: 36px; }
    .mc-hero--p6       { background-position: 46% 38%; }
    .mc-hero--photo .mc-hero-actions .mc-btn { width: 100%; }
}


/* ---- Benefit / trust bar ---- */
.mc-benefits {
    background: var(--mc-black);
    color: var(--mc-white);
}

.mc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.mc-benefit {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid rgba(255,255,255,.15);
}

.mc-benefit:last-child { border-right: 0; }

.mc-benefit-icon {
    font-size: 25px;
    color: var(--mc-red);
}

.mc-benefit strong {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
}

.mc-benefit small { color: #d0d0d0; }

/* ---- Feature / promo banner ---- */
.mc-feature-banner {
    background: var(--mc-black);
    border-radius: var(--mc-radius);
    overflow: hidden;
    color: var(--mc-white);
}

.mc-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mc-feature-item {
    min-height: 260px;
    position: relative;
    padding: 35px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.mc-feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.88),
        rgba(0,0,0,.30)
    );
}

.mc-feature-content {
    position: relative;
    z-index: 2;
    max-width: 330px;
}

.mc-feature-content h3 {
    color: var(--mc-white);
    text-transform: uppercase;
    font-size: 27px;
}

.mc-feature-content p { color: #dddddd; }

/* ---- Service area ---- */
.mc-service-area {
    position: relative;
    color: var(--mc-white);
    text-align: center;
    padding: 70px 20px;
    background:
        linear-gradient(rgba(0,72,120,.65), rgba(0,72,120,.65)),
        url("/images/south-florida.jpg") center / cover no-repeat;
}

.mc-service-area h2 { color: var(--mc-white); }
.mc-service-area p  { font-size: 18px; }

/* ---- Badges ----
   NOTE: this is the mockup's label badge. It is NOT the same thing as
   .dtf-attr-badge (an interactive option pill, styled in section 7).
   The storefront's own HOT / NEW flag is .onsale in dtfshopping.css
   and has no brand hook yet. */
.mc-badge {
    display: inline-block;
    background: var(--mc-red);
    color: var(--mc-white);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.mc-badge-dark { background: var(--mc-black); }

/* ---- Footer ---- */
.mc-footer {
    background: #080808;
    color: #cfcfcf;
    padding: 55px 0 25px;
}

.mc-footer h4 {
    color: var(--mc-white);
    text-transform: uppercase;
    font-size: 15px;
}

.mc-footer a       { color: #cfcfcf; }
.mc-footer a:hover { color: var(--mc-red); }

@media (max-width: 991px) {

    .mc-nav           { display: none; }
    .mc-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-feature-grid  { grid-template-columns: 1fr; }

    /* hero stacks: headline above, scooter below */
    .mc-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mc-hero-stage { min-height: 300px; }
}

@media (max-width: 575px) {

    .mc-topbar-inner {
        gap: 12px;
        flex-wrap: wrap;
        padding: 8px 0;
    }

    .mc-hero--stage      { min-height: 0; }
    .mc-hero--stage h1   { font-size: 38px; }
    .mc-hero-actions .mc-btn { width: 100%; }

    .mc-benefits-grid { grid-template-columns: 1fr; }

    .mc-benefit {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }
}


/* =========================================================
   FINANCING SECTION  -  .dtf-finance-*
   Brand tokens with fallbacks, so it renders correctly even
   in a tenant that has no --mc-* set.
   Buttons target /contactus.asp
   ========================================================= */

.dtf-finance {
    padding: 64px 0 56px;
    background: var(--mc-white, #fff);
    overflow: hidden;
}

.dtf-finance-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    max-width: var(--mc-container, 1320px);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------
   Intro column
   --------------------------------------------------------- */

.dtf-finance-title {
    margin: 0 0 6px;
    font-family: var(--mc-font-heading, "Montserrat", Arial, sans-serif);
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.08;
    color: var(--mc-black, #0d0d0d);
}

/* red, not the navy in the mockup - the brand file has no blue token */
.dtf-finance-sub {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    color: var(--mc-red, #e31b23);
}

.dtf-finance-lead {
    max-width: 46ch;
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--mc-charcoal, #1f1f1f);
}

.dtf-finance-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    border: 2px solid var(--mc-red, #e31b23);
    border-radius: var(--mc-radius-sm, 6px);
    background: var(--mc-red, #e31b23);
    color: var(--mc-white, #fff);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--mc-transition, all .25s ease);
}

.dtf-finance-cta:hover {
    background: var(--mc-red-dark, #b9141b);
    border-color: var(--mc-red-dark, #b9141b);
    color: var(--mc-white, #fff);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Finance partners
   The two logos have different backgrounds - one a solid magenta
   tile, one white - so each sits in an identical bordered tile.
   That is what makes a coloured square and a white wordmark read
   as one row. No grayscale filter: it would mute a partner's own
   brand colour to grey.
   --------------------------------------------------------- */

.dtf-finance-partners {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
}

.dtf-finance-partner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 6px;
    background: var(--mc-white, #fff);
    border: 1px solid var(--mc-border, #e6e6e6);
    border-radius: var(--mc-radius-sm, 6px);
    overflow: hidden;
    transition: var(--mc-transition, all .25s ease);
}

.dtf-finance-partner:hover {
    border-color: var(--mc-red, #e31b23);
    box-shadow: var(--mc-shadow-sm, 0 4px 14px rgba(0,0,0,.08));
    transform: translateY(-2px);
}

.dtf-finance-partner img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}

/* ---------------------------------------------------------
   Product stage, with the diagonal ribbon behind
   --------------------------------------------------------- */

.dtf-finance-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    /* CLIPS THE RIBBON. Without this the ::before below escapes downward and
       paints over the four steps, making them unreadable. */
    overflow: hidden;
    border-radius: var(--mc-radius, 10px);
    background: var(--mc-white, #fff);
}

/* red / white / black skewed ribbon - CSS, so no extra asset and it retunes
   automatically if --mc-red changes.
   Confined to the RIGHT of the media box and clipped by it. It used to be
   height:150% with top:-60px, which put roughly 190px of ribbon below the
   image area, on top of the steps. */
.dtf-finance-media::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    right: -14%;
    width: 56%;
    background: linear-gradient(
        100deg,
        var(--mc-red, #e31b23) 0 44%,
        var(--mc-white, #fff) 44% 54%,
        var(--mc-black, #0d0d0d) 54% 100%);
    transform: skewX(-14deg);
}

.dtf-finance-img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    height: auto;
    /* Sits LEFT of centre, over the white part of the box. multiply only
       erases white against a light backdrop - over the red ribbon it tinted
       the whole scooter red, which is why it looked wrong before.
       Remove this line if you swap in a transparent PNG. */
    margin-right: auto;
    mix-blend-mode: multiply;
}


/* ---------------------------------------------------------
   The four steps
   --------------------------------------------------------- */

.dtf-finance-steps {
    /* relative + z-index so the steps always sit ABOVE the media ribbon,
       whatever it is doing. Belt and braces alongside the clip above. */
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: var(--mc-container, 1320px);
    margin: 48px auto 0;
    padding: 0 20px;
}

.dtf-finance-step {
    border-top: 2px solid var(--mc-red, #e31b23);
    padding-top: 14px;
}

.dtf-finance-stepno {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mc-red, #e31b23);
}

.dtf-finance-stepname {
    margin: 0 0 8px;
    font-family: var(--mc-font-heading, "Montserrat", Arial, sans-serif);
    font-size: 19px;
    font-weight: 800;
    color: var(--mc-black, #0d0d0d);
}

.dtf-finance-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mc-charcoal, #1f1f1f);
}

.dtf-finance-foot {
    position: relative;
    z-index: 2;
    max-width: var(--mc-container, 1320px);
    margin: 34px auto 0;
    padding: 0 20px;
    text-align: right;
}


/* ---------------------------------------------------------
   Financing section - responsive
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .dtf-finance { padding: 44px 0 40px; }

    .dtf-finance-inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .dtf-finance-media { min-height: 300px; }

    .dtf-finance-media::before {
        right: -10%;
        width: 96%;
    }

    .dtf-finance-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }
}

@media (max-width: 575px) {

    .dtf-finance-steps { grid-template-columns: 1fr; }
    .dtf-finance-partners { gap: 12px; }
    .dtf-finance-foot { text-align: center; }
    .dtf-finance-cta { width: 100%; }
}