/*
--------------------------------------------------------------------------------------------------------
    CUSTOM CSS for MC-STOREFRONT Maropost Theme
    Written by Cameron

    This CSS file is split into five categories:
        - Fonts
        - Navigation
        - Product Hubs
        - Product Pages
        - Misc
--------------------------------------------------------------------------------------------------------



/*==================================================================================================================================
    Begin CSS CATEGORY: Fonts
==================================================================================================================================*/
/* Open-source Google Font 'Play' by Jonas Hecksher. Used on Yamaha pages. */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
/* Open-source Google Font 'Quantico' by MADTyre. Used on KTM pages. */
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* 
    Use this font-family attribute to fallback to known fonts, if these fonts don't load:
    font-family: "Play", "Muli", Helvetica, Arial, sans-serif
    font-family: "Quantico", Helvetica, Arial, sans-serif
*/



/*==================================================================================================================================
    Begin CSS CATEGORY: Navigation
==================================================================================================================================*/

/*************************************************************************
    === CATEGORY: Navigation ===
    === SECTION: Multi-Level Menu (ML-MENU) ===
        - Multilevel Nav Menu for mobile displays
        - Credit for original to George Martsoukos: https://webdesign.tutsplus.com/tutorials/cms-38817
*************************************************************************/
:root {
    --ml-menu-bg: #ffffff;
    --ml-link-color: #292929;
    --ml-caret-color: #9b9b9b;
    --ml-border-color: lightgrey;
}

.ml-menu {
    font-size: 18px;
    line-height: 1.2;
}

/* --------------------------------------------------
    ML-MENU: Links & Icons
-------------------------------------------------- */
.ml-menu a, .ml-menu a:hover,
.ml-menu a:active, .ml-menu a:visited {
    text-decoration: none;
    position: relative;
    width: 100%;
    color: var(--ml-link-color);
}

.ml-menu .back-one-level::before {
    font-size: 16px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f060";
    padding-right: 6px;
    color: var(--ml-caret-color);
}

/* --------------------------------------------------
    ML-MENU: Visibility & Screen Transitions
-------------------------------------------------- */
@media (max-width: 767px) {
    .ml-menu {
        display: block;
        position: fixed;
        height: 100%;
        width: 300px;
        overflow-x: hidden;
        z-index: 999;
        top: 0;
        left: -100%;
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
}

@media (max-width: 360px) { /* Thinner than 270px is unsupported */
    .ml-menu.is-visible {
        display: block;
        width: 240px;
        left: 0%;
    }
}
@media (min-width: 361px) and (max-width: 767px) { /* XS to S */
    .ml-menu.is-visible {
        display: block;
        width: 300px;
        left: 0%;
    }
}
@media (min-width: 768px) { /* Hide on M */
    .ml-menu {
        display: none;
    }
}

/* --------------------------------------------------
    ML-MENU: List Styles
-------------------------------------------------- */
ul.ml-menu__menu,
ul.ml-menu__submenu {
    list-style: none;
    padding-left: 0;
}

ul.ml-menu__menu li,
ul.ml-menu__submenu li {
    display: flex; /* Carets will be pushed to the right & centered */
    align-items: center;
}

ul.ml-menu__menu li a,
ul.ml-menu__submenu li a {
    padding: 12px 30px;
    max-height: 100%;
    display: flex;
    align-items: center;
}
ul.ml-menu__menu li a img,
ul.ml-menu__submenu li a img { /* Images (for genuine brands) */
    max-width: 100%;
    height: 25px;
}
ul.ml-menu__menu li hr, /* Overwrite blank categories (assigned in Maropost backend - for spacing in menus) */
ul.ml-menu__submenu li hr {
    margin: 0;
    height: 1px;
    background-color: var(--ml-border-color);
    width: 100%;
    border: 0;
}

.ml-menu i.fa-angle-right {
    margin-left: auto;
    font-size: 18px;
    color: var(--ml-caret-color);
    pointer-events: none;
}

.ml-menu a.filter-remove i.fa-check-square,
.ml-menu a.filter i.fa-square {
    padding-right: 6px;
}

/* --------------------------------------------------
    ML-MENU: Menu Headers
        - Account & business name / subcategory & back buttons
-------------------------------------------------- */
.ml-menu div.ml-menu__header {
    background-color: var(--ml-link-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100px;
}

.ml-menu div.ml-menu__header span {
    padding: 10px;
    font-size: 16px;
}

.ml-menu div.ml-menu__header * {
    color: var(--ml-menu-bg);
    padding: 0;
}

.ml-menu div.ml-menu__header .ml-menu__header__pinright {
    text-align: right;
}

.ml-menu div.ml-menu__header .ml-menu__header__title {
    font-weight: 800;
    font-size: 20px;
    margin-top: auto;
}
/* ml-menu-searchsort Overrides */
.ml-menu button.form-control {
    text-align: left;
    color: var(--ml-link-color);
    padding: 12px 30px;
    height: auto;
    line-height: 1.2;
}

/* --------------------------------------------------
    ML-MENU: Other
-------------------------------------------------- */
.ml-menu button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
}

.ml-menu .list-title {
    font-size: 21px;
    font-weight: 600;
    padding-bottom: 5px;
    display: block;
}

.ml-menu .list-wrapper {
    height: 100%;
    overflow-y: auto;
    background: var(--ml-menu-bg);
}

.ml-menu .list-wrapper:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(100%);
    backface-visibility: hidden;
    transition: transform 0.35s;
}

.ml-menu .list-wrapper:not(:first-child).is-visible {
    transform: none;
}

/* ml-menu can potentially support infinite sub-menus...
    - But this CSS needs to be manually updated to support more than 5
    - Programming in extra was not required at the time this feature was made */
.ml-menu .list-wrapper:nth-child(1) .level-2,
.ml-menu .list-wrapper:nth-child(2) .level-3,
.ml-menu .list-wrapper:nth-child(3) .level-4,
.ml-menu .list-wrapper:nth-child(4) .level-5,
.ml-menu .list-wrapper:nth-child(5) .level-6 {
    display: none;
}

.ml-menu .back-one-level {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}

/* --------------------------------------------------
    ML-MENU: Overlay Styles. Hide on >= MD viewports.
-------------------------------------------------- */
@media (max-width: 767px) {
    nav .overlay-wrapper { /* Click blocker, render above everything except ml-menu */
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
        z-index: 998;
    }

    nav .overlay-wrapper.overlay-active {
        display: block;
    }

    body.overlay-active {
        overflow: hidden;
        width: 100%;
    }

    body.overlay-active::before {
        opacity: 1;
        visibility: visible;
    }

    body::before { /* Black faded background, render above everything except click blocker & ml-menu */
        content: '';
        background: rgba(26, 26, 26, 0.8);
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        opacity: 0;
        visibility: hidden;
        z-index: 997;
    }
}

/* --------------------------------------------------
    ML-MENU: Navbar for 'Genuine Brands'
        - Display as images in boxes, instead of words in rectangles (unlike typical categories)
-------------------------------------------------- */
ul.ml-menu__genuine-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px;
    margin: 0 auto;
    margin-bottom: 16px;
    width: 90%;
}
ul.ml-menu__genuine-grid li {
    outline: 2px rgb(71, 71, 71) solid;
    background-color: white;
    flex: 0 0 50%;
    margin-top: 2px;
}
ul.ml-menu__genuine-grid li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: 50px;
}
ul.ml-menu__genuine-grid li a img {
    padding: 4px !important;
    max-width: 90%;
    max-height: 50px;
    height: auto;
    pointer-events: none;
}
ul.ml-menu__genuine-grid i.fa-angle-right {
    padding-right: 8px;
    font-size: 12px;
    pointer-events: none;
}


/*************************************************************************
    === CATEGORY: Navigation ===
    === SECTION: Genuine Brands Navbar ===
        - Shows special brands in large white rectangles. Gives a unique navbar on desktop and mobile
*************************************************************************/
ul.navbar-nav--genuine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
    ul.navbar-nav--genuine {
        grid-template-columns: 0 0 16%;
    }
}
ul.navbar-nav--genuine li {
    background-color: white;
    flex: 0 0 15%;
    box-sizing: border-box;
}
ul.navbar-nav--genuine .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: 66px;
}
ul.navbar-nav--genuine .dropdown-toggle img {
    padding: 4px !important;
    max-width: 90%;
    max-height: 66px;
    height: auto;
}
ul.navbar-nav--genuine .dropdown-toggle::after {
    border: 0; /* Don't display ▾ chevron */
    margin: 0;
}

/*************************************************************************
    === CATEGORY: Navigation ===
    === SECTION: Sticky Navbar on mobile ===
        - Only apply on SM or smaller viewports
        - Ensures the customer always has access to 'Filter' ml-menu, 'In Stock' Toggle, 'Sort' ml-menu
*************************************************************************/
@media (max-width: 767px) {
    /* Added to the navbar with JS when it reaches its scroll position */
    .sticky-mainnav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 11;
    }

    .sticky-filternav {
        position: sticky;
        top: 80px;
        z-index: 10;
    }
    
    /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
    .sticky-mainnav-padding {
        padding-top: 105px !important; /* Stickies (Menu Nav) above (All Page Content) */
    }
    .sticky-filternav-padding {
        padding-top: 0px; /* NOT NEEDED ANYMORE - Stickies (Filter/Sort Nav) above (Thumbnails) until (End of Thumbnails) */
    }

    .nMobileNav {
        background-color: var(--mobileNavBg);
        height: 80px;
    }

    /* Hide the 'Search' button until the menu nav is stickied */
    .nMobileNav .show-when-sticky {
        display: none !important;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
    }
    .nMobileNav.sticky-mainnav .show-when-sticky {
        display: block !important;
        opacity: 1;
    }

    .sort_container {
        background-color: white;
        padding: 5px 0;
        box-shadow: 0px 15px 15px white;
    }
    .sort_container hr {
        width: 100%;
        margin: 0;
    }
}

/*************************************************************************
    === CATEGORY: Navigation ===
    === SECTION: Category/Search Result Pages ===
*************************************************************************/
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 0px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
    padding: 15px;
}
.panel-default {
        border-color: #ddd;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: -1px;
    border-bottom-left-radius: -1px;
}
#mcs-searchresult-instockswitch {
    text-align: center;
}
#mcs-searchresult-instockswitch > a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
}
#mcs-searchresult-instockswitch > a > span {
    padding-left: 5px;
}

/* Sidebar Flex Container (Used for Colour/Size Swatches) */
ul.mcs-sidebar__flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
    margin: 10px auto;
    list-style: none;
    width: 90%;
}
li.mcs-sidebar__flex-item {
    padding: 4px;
}
li.mcs-sidebar__flex-item > a:before {
    content: '';
}
li.mcs-sidebar__flex-item > a {
    display: block;
    border-radius: 15px;
    border: 2px solid lightgray;
    width: 30px;
    height: 30px;
    background-size: contain;
}
li.mcs-sidebar__flex-item.mcs--option-remove > a {
    border: 2px solid red;
}

.mcs-filter__colour--mlmenu {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 5px;
    border: 2px solid lightgray;
    background-size: contain;
}




/*==================================================================================================================================
    Begin CSS CATEGORY: Product Hubs
==================================================================================================================================*/

/*************************************************************************
    === CATEGORY: Product Hubs ===
    === SECTION: HUB ===
        - Used for brands that have Google Ads. A unique landing page tailored to each brand.
*************************************************************************/
.mcs-hub__header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.mcs-hub__header .text-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}
.mcs-hub__header h1 {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 32px;
}
.mcs-hub__header p {
    font-weight: bold;
    font-style: italic;
    font-size: 16px;
}
#mcs-hub__highlights {
    margin: 0 auto;
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* For the 'Featured Products' row, on LG viewports specifically, thumbnails will go from 1x4 to 1x3 with 1 remaining at the bottom.
        To fix, simply force the LG viewport to fit 1x4. */
    #mcs-hub__highlights article {
        max-width: 25%;
    }
}


/*************************************************************************
    === CATEGORY: Product Hubs ===
    === SECTION: GENUINE HUB ===
        - Used for genuine brands. These could be reached by clicking on their logo in the navbar, or through Google Ads.
*************************************************************************/

/* --------------------------------------------------
    GENUINE HUB - QUICK ACCESS BUTTONS
        - Buttons have text hovering above an image
        - Buttons are displayed in the description area in a centered row
            - ...unless they are marked as 'hoveringbtns' which will position themselves (with arbitrary position data) atop the page's hero image
-------------------------------------------------- */
.mcs-ghub__btn {
    /* Match bootstrap 'col-6', but use 'margin:1%' in each direction */
    position: relative;
    width: 100%;

    flex: 0 0 48%;
    margin: 1% 1%;
}
@media (min-width: 992px) {
    /* Match bootstrap 'col-lg-3', but use 'margin:1%' in each direction */
    .mcs-ghub__btn {
        flex: 0 0 23%;
    }
}
.mcs-ghub__btn img {
    position: relative;
    border-radius: 15px;
    width: 100%;
    z-index: 3; /* Above hero-images */
}
.mcs-ghub__btn figure {
    /* Position in center of img*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
}
.mcs-ghub__btn figure h3 {
    font-size: 20px;
    margin: 0;
    width: 80%;
    font-weight: unset; /* Allow `a.ghub__btn` custom styling in Maropost backend to effect font weight */
    z-index: 4; /* Above btn img */
    font-family: inherit; /* Maropost's backend is used to assign a font-family to this button. Check the hub_genuine template for more info */
    color: white;
}
.mcs-ghub__btns--under-hero {
    justify-content: center;
    position: relative;
    top: -80px;
    margin-bottom: -60px; /* Try to match this with the 'top' attribute, but +20px. Reduces the whitespace before the rest of the page begins. */
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* On md viewports only, the parent will be made more narrow so buttons are made smaller. */
    .mcs-ghub__btns--under-hero {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Button - If placed in HeroFrame */
.mcs-ghub__btns--hover-over-hero .mcs-ghub__herobtn {
    width: 300px;
    position: absolute;
    /* Override default button appearance */
    flex: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}
.mcs-ghub__btns--under-hero .mcs-ghub__herobtn {
    display: none;
    left: 0 !important;
    top: 0 !important; /* These !important's are required to overwrite the style="" tags that're populated by Maropost's Advert B@SE tag */
}
/* HeroBtn display override. If invalid pos is provided, force the button to render near the Description instead. */
.mcs-ghub__btns--hover-over-hero .mcs-ghub__herobtn.mcs-ghub__herobtn--invalid-pos {
    display: none;
}
.mcs-ghub__btns--under-hero .mcs-ghub__herobtn.mcs-ghub__herobtn--invalid-pos {
    display: block;
}
/* HeroBtn display override. If a valid pos is provdided, the button should disappear from Hero area when in a mobile viewport. */
@media (max-width: 767px) {
    .mcs-ghub__btns--under-hero .mcs-ghub__herobtn {
        display: block;
    }
    .mcs-ghub__btns--hover-over-hero .mcs-ghub__herobtn {
        display: none;
    }
}
/* Tiny phone screens override. Reduce padding for buttons, tell container to extend past normal margin, tell h3's to reduce fontsize. */
@media (max-width: 420px) {
    .mcs-ghub__btns--under-hero {
        margin-left: -50vw;
        margin-right: -50vw;
        left: 50%;
        right: 50%;
        width: 100vw;
    }
    .mcs-ghub__btn {
        padding-left: 5px;
        padding-right: 5px;
    }
    .mcs-ghub__btn figure h3 {
        font-size: 18px;
    }
}
@media (max-width: 340px) {
    .mcs-ghub__btn figure h3 {
        font-size: 16px;
    }
}

/* --------------------------------------------------
    GENUINE HUB - PROMO TILE & MODALS
        - Tiles that show promos available for customers to peruse
        - When a tile is clicked, a modal opens that contains more info & an enquiry link
-------------------------------------------------- */
.mcs-ghub__promo-tile {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0.25rem 0.25rem;
}
@media (min-width: 768px) {
    .mcs-ghub__promo-tile {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
/* Remove button styling */
.mcs-ghub__promo-btn--open, .mcs-ghub__promo-btn--close {
    background: none;
    border: none;
}
.mcs-ghub__promo-tile img {
    width: 100%;
}
/* Brand Promo Modal (original code from W3S - https://www.w3schools.com/howto/howto_css_modals.asp) */
.mcs-ghub__promo-modal {
    display: none;
    position: fixed;
    z-index: 50; /* Sit on top of just about everything */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Brand Promo Modal - Content */
/* Note: <iframe> content styling is set inside the <iframe>. Check the software which populates these tiles & modals. */
.mcs-ghub__promo-modal__content {
    background-color: #fefefe;
    margin: auto; /* centered hor/ver when modal is flex */
    padding: 20px;
    border: 1px solid #888;
    width: 95%;
    height: 80%
}
@media (min-width: 768px) {
    .mcs-ghub__promo-modal__content {
        width: 600px;
    }
}
@media (min-width: 992px) {
    .mcs-ghub__promo-modal__content {
        width: 800px;
    }
}
.mcs-ghub__promo-modal__content h3 {
    word-break: break-word;
    text-align: center;
    height: 5%;
}
.mcs-ghub__promo-modal__content iframe {
    width: 100%;
    height: 86%;
    border: 2px solid gainsboro;
}
.mcs-ghub__promo-modal__content div.enquirebtn-container {
    height: 8%;
    display: flex;
    align-items: start;
    justify-content: center;
}
.mcs-ghub__promo-modal__content div.enquirebtn-container .btn {
    height: fit-content;
}
/* Brand Promo Modal - Close Button */
.mcs-ghub__promo-btn--close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.mcs-ghub__promo-btn--close:hover,
.mcs-ghub__promo-btn--close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    outline: none;
} 

/* --------------------------------------------------
    GENUINE HUB - HERO IMAGE
        - Credit to Hao Wu on Stack Overflow for general idea - https://stackoverflow.com/questions/74896145/
        - Credit to Una Kravets for Hero Image extending beyond bounds of parent div - https://gomakethings.com/how-to-break-an-image-out-of-its-parent-container-with-css/
-------------------------------------------------- */
/* Hero Image Frame */
.mcs-ghub__heroframe {
    display:flex;
    justify-content: center;
    overflow: hidden;

    position: relative;
    height: 600px; /* Hero images for this page must be 1920px by 600px */
    top: -30px;

    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    max-width: 100vw;
}
.mcs-ghub__heroframe > img {
    height: 100%;
    flex-shrink: 0;
}
/* Hero Image Frame - Narrow (only shows on mobile viewports) */
.mcs-ghub__heroframe--narrow {
    height: auto;
}
.mcs-ghub__heroframe--narrow > img {
    width: 100%;
    height: auto;
}
/* Hero Image floating buttons */
.mcs-ghub__btns--hover-over-hero {
    position: absolute;
    top: 0;
    left: 50%;
}
/* Hero Image gradient that goes over the bottom portion. Thanks to 'ata' on StackOverflow https://stackoverflow.com/a/42694967 */
.mcs-ghub__heroframe__gradient {
    background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%,
    rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
    margin-top: -150px;  /* Must be the same */
    height: 150px;       /* Must be the same */
    /* Center & position image */
    position: relative;
    top: -30px;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    max-width: 100vw;
}

/* --------------------------------------------------
    GENUINE HUB: Other formatting
-------------------------------------------------- */
img.mcs-ghub__title-img {
    display: block;
    margin: 0 auto;
    max-width: 50%;
    /* Fallback alt text formatting */
    text-align: center;
    font-size: xx-large;
}
hr.mcs-ghub__underline {
    margin: 0 0 0.5rem 0;
    border-top: 3px solid black;
}
.mcs-ghub__bikethumb {
    text-align: center;
}
.mcs-ghub__bikethumb a.btn {
    background-color: lightgrey;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: 1rem;
}




/*==================================================================================================================================
    Begin CSS CATEGORY: Product Pages
==================================================================================================================================*/

/*************************************************************************
    === CATEGORY: Product Pages ===
    === SECTION: NEW BIKES ===
        - Product pages for motorcycle listings
*************************************************************************/
.bike-top-name {
    font-size: 30px !important;
}

.bike-top-name, .bike-top-subtitle, .bike-colour-subtitle {
    margin-top: 2%;
    text-align: center;
    font-weight: bold;
}
.bike-top-subtitle {
    margin-top: 0;
    margin-bottom: 1%;
}

@media screen and (min-width: 481px) {
    .bike-main-image {
        width: 60%;
        margin: 30px auto;
    }

    .bike-main-image .main-image {
        max-height: 400px;
    }
    
    .buying-option-table {
        width: 40%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px)    {
    .bike-main-image {
        width: 100%;
        margin: 15px auto;
    }

    .bike-main-image .main-image {
        max-height: 200px;
    }

    .zoom {
        pointer-events: none;
    }
    h1 {
        font-size: 28px;
    }
    
    .buying-option-table {
        width: 80%;
        margin: 0 auto;
    }
}

.bike_new_header_price {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    text-align: center;
    width: 100%;
}

.bike_new_header_price_item * {
    margin: 0;
}

#accordionFinance p {
    text-align: justify;
}

.bike_new_enquirybtn_container {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.bike_new_enquirybtn {
    padding-top: 5px;
    padding-bottom: 5px;
}
.bike_new_enquirybtn > a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



/*************************************************************************
    === CATEGORY: Product Pages ===
    === SECTION: GENERIC LISTINGS - Descriptions/Spec Tables ===
        - Product pages for motorcycle listings
*************************************************************************/
/* --------------------------------------------------
    GENERIC LISTINGS: Title/Description
-------------------------------------------------- */
.product-title {
    margin-bottom: 5px;
}
.product-subtitle {
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 15px;
}
.product-desc {
    font-family: verdana, geneva, sans-serif;
    font-size: 14px;
}
.product-desc p {
    text-align: justify;
}
/* Free Shipping (products) and Finance (bikes) text. Separates description from title area & changes colour.*/
.product-desc-freeship {
    color: #EE2D37;
    margin-bottom: 20px;
}
.product-desc-finance-price {
    color: #EE2D37;
    margin-bottom: 20px;
}
/* Reduce margins of Headings above Paragraphs */
.product-desc h3, h4, h5, h6 {
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 0;
}
.product-desc h3 {
    margin-top: 30px;
}
/* Consistent table layouts */
.product-desc table,
.product-desc td {
    border: 1px solid black;
}
.product-desc td, th {
    padding: 4px; 
}
.product-desc th {
    font-weight: bold;
    text-align: right;
}
/* Other */
.product-desc a {
    color:#3498db;
    text-decoration: underline;
}
.product-price {
    font-weight: bold;
}

/* Products can manually have an indent style applied, which changes depending on screen size. */
@media screen and (max-width: 1199px) {
    .desc-indent {
        margin-left: 20px;
    }
}

@media screen and (min-width: 1200px) {
    .desc-indent {
        margin-left: 40px;
    }
}

/* --------------------------------------------------
    GENERIC LISTINGS: Product Specifications Styling
        - Table is to be 600px wide, centered horizontally
-------------------------------------------------- */
.product-specs {
    font-family: Helvetica, geneva, sans-serif;
    font-size: 17px;
    margin-left: auto;
    margin-right: auto;
    width:  95%;
}
.product-specs table {
    border: 1px solid #e5e5e5;
    text-align: left;
    width:  100%;
}
/* Every row alternates colour. */
.product-specs tr:nth-of-type(odd) {
    background-color:#e5e5e5
}
.product-specs tr:nth-of-type(even) {
    background-color:#cfcfcf
}
/* Tables have 'heading | content' layout. Add slight padding, and bring either side's text to middle.*/
.product-specs th {
    padding-right: 8px;
    text-align: right;
    width: 15%;
}
.product-specs td {
    padding: 10px;
    padding-left: 8px;
}
/* Headings are used for multiple spec tables */
.product-specs h3 {
    color: #cd2029;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.product-specs a {
    color:#3498db;
    text-decoration: underline;
}

    

/*************************************************************************
    === CATEGORY: Product Pages ===
    === SECTION: COLOUR SWATCH ===

    Used in 4 places, but their layout is the same:
        ┌─────────────────────────────────────────────────┐         ┌─────────────┐
        │                  swatch-holder                  │         │ swatch_item │
        │ ┌─────────────────────────────────────────────┐ │         │ ┌─────────┐ │
        │ │                   swatch                    │ │         │ │  span   │ │
        │ │ ┌─────────────┬─────────────┬─────────────┐ │ │         │ │ ┌─────┐ │ │
        │ │ │ swatch_item │ swatch_item │ swatch_item │ │ │         │ │ │ img │ │ │
        │ │ └─────────────┴─────────────┴─────────────┘ │ │         │ │ └─────┘ │ │
        │ └─────────────────────────────────────────────┘ │         │ └─────────┘ │
        └─────────────────────────────────────────────────┘         └─────────────┘

    Locations used:
        - NewBike Thumbnail - Beside Image (--bikethumb-widescreen)
        - NewBike Thumbnail - Beneath Image (--bikethumb-thinscreen)
        - NewBike/Product Listings (--listing)
        - Product Thumbnail (--prodthumb)
*************************************************************************/
/* Swatch Holder - Outermost container for the Colour Swatch. Bike thumbnail swatch changes position depending on screen width. */
    @media screen and (max-width: 1199px) {
        .mcs-swatch-holder--bikethumb-widescreen {
            display: none;
        }
    }
    @media screen and (min-width: 1200px) {
        .mcs-swatch-holder--bikethumb-thinscreen {
            display: none;
        }
    }

/* Swatch - Container for Swatch Items */
    .mcs-swatch {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 5px -5px;
    }

/* --------------------------------------------------
    COLOUR SWATCH: Swatch Item
        - Defaults to Circle with Red Border
-------------------------------------------------- */
.mcs-swatch__item {
    margin: 0 5px;
    height: 44px;
    width: 44px;
    box-sizing: border-box;
    box-shadow: 0 0 0 0px transparent;
    border-radius:50%;
    -webkit-border-radius:50%;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: box-shadow .08s linear;
    position: relative;
    border:none; /* Remove default button border */
    background-color: transparent;
}
.mcs-swatch__item:focus {
    outline: none;
}
.mcs-swatch__item:focus-visible {
    box-shadow: 0 0 0 2px rgba(237, 44, 55, 0.3);
}
.mcs-swatch__item:hover {
    box-shadow: 0 0 0 2px rgba(237, 44, 55, 0.3);
}
.mcs-swatch__item.js-swatch-selected, .mcs-swatch__item._itmspec_selected {
    box-shadow: 0 0 0 3px rgba(237, 44, 55, 1.0);
}
.mcs-swatch__item > span {
    cursor: pointer;
    position: relative;
    border-radius: 50%;
}
.mcs-swatch__item > span > img {
    width: 100%;
}

/* --------------------------------------------------
    COLOUR SWATCH: Swatch Holder & Final Items Per Swatch
-------------------------------------------------- */
/* Swatch Holder/Items (changed attributes for ProdThumbs) */
.mcs-swatch-holder--prodthumb {
    height: 29px;
}
.mcs-swatch-holder--prodthumb .mcs-swatch > .mcs-swatch__item {
    height: 24px;
    border-radius: 5%;
    flex: 0 0 14%;
    padding: 0px;
}
.mcs-swatch-holder--prodthumb .mcs-swatch > .mcs-swatch__item > span {
    height: 24px;
    width: 24px;
}
/* Final swatch item in a ProdThumb (with 4 swatch items) has different formatting */
.mcs-swatch-holder--prodthumb .mcs-swatch > .mcs-swatch__item:nth-child(5):hover
    {
    box-shadow: 0 0 0 0px transparent;
    outline: 0;
}
.mcs-swatch-holder--prodthumb .mcs-swatch > .mcs-swatch__item:nth-child(5) > span {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px lightgray;
}
.mcs-swatch-holder--prodthumb .mcs-swatch > .mcs-swatch__item:nth-child(5) a {
    text-decoration: none;
    color: dimgray;
}
/* Swatch Holder (changed attributes for Listings swatches) */
.mcs-swatch-holder--bikelisting {
    justify-content: center;
}
.mcs-swatch-holder--bikelisting .mcs-swatch,
.mcs-swatch-holder--listing .mcs-swatch {
    margin: 10px -5px;
    width: 100%;
    row-gap: 20px;
}

/* --------------------------------------------------
    COLOUR SWATCH: Override - Render mcs-swatch__items as boxes
        - These boxes have square borders and resize to fit their content
-------------------------------------------------- */
.mcs-swatch--display-as-boxes {
    justify-content: left;
    margin: 0 0 10px 0;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item {
    border-radius: 0%;
    box-shadow: 0 0 0 2px rgb(177, 177, 177);
    background-color: white;
    font-size: 10px; /* Image Alt fontsize */
    height: 40px;
    margin: 0 14px;
    min-width: 40px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item .mcs-swatch-largelabel {
    font-size: 19px;
    font-weight: bold;
    margin: 0 6px;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item img {
    width: 36px;
    height: 36px;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item svg {
    width: 100%;
    height: 100%;
    position: absolute;
    stroke: rgb(170, 170, 170);
    stroke-width: 2;
    transition: stroke 0.08s linear, stroke-width 0.08s linear;
    display: none;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item:hover,
.mcs-swatch--display-as-boxes > .mcs-swatch__item._itmspec_selected {
    box-shadow: 0 0 0 3px rgb(218, 31, 31);
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item:hover > svg,
.mcs-swatch--display-as-boxes > .mcs-swatch__item._itmspec_selected > svg {
    stroke: rgb(218, 31, 31);
    stroke-width: 3;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item:focus {
    outline: none;
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item:focus-visible {
    box-shadow: 0 0 0 3px rgba(237, 44, 55, 0.5);
}
.mcs-swatch--display-as-boxes > .mcs-swatch__item:focus-visible > svg {
    stroke: rgba(237, 44, 55, 0.5);
    stroke-width: 3;
}

/* --------------------------------------------------
    COLOUR SWATCH: In-Stock Indicators
        - We use JS to determine which variations of a product are in-stock, then apply these styles to do things like rendering an 'X' over a sold-out colour
        - The states named 'mcs-stock-indicator--preorder' and 'mcs-stock-indicator--instock' currently don't do anything
-------------------------------------------------- */
.mcs-stock-indicator--hidden_notavailable {
    display: none !important;
}
.mcs-stock-indicator--nostock {
    display: flex !important;
}
.mcs-stock-indicator--nostock svg {
    display: flex !important;
}
    
/* --------------------------------------------------
    COLOUR SWATCH: Misc styles
-------------------------------------------------- */
.mcs-swatch-js-warning {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    color: red;
    width: 100%;
}
.mcs-swatch-js-warning > span {
    width: fit-content;
    margin: 0 auto;
}
#mcs-swatch---primary-swatch ._itmspec_listitm {
    display: flex !important; /* Override Maropost's logic to hide ItemSpecifics, if this swatch holds the primary ItemSpecific (e.g. NEVER let colours disappear) */
}




/*==================================================================================================================================
    Begin CSS CATEGORY: Misc
==================================================================================================================================*/

/*************************************************************************
    === CATEGORY: Misc ===
    === SECTION: MISC ===
        - Changes that can't (or haven't yet) been categorised
*************************************************************************/
:root {
    --mobileNavBg: rgba(44, 44, 44, 1)
}

/* When opening certain modals, stop the body element from scrolling */
body.mcs-stopscrolling {
    height: 100%;
    overflow: hidden;
}

/* On pages with Extra Options, disallow users from continuing without filling out the form. */
#cartWarn {
    text-align:center;
    display:none;
    color:red;
    padding-bottom: 1.25rem;
}

/* Staging theme banners */
#staging-debug {
    display: block;
    font-size: 12px
}
#staging-debug-sml {
    display: block;
    font-size: 9px;
    line-height: 1.5;
    color: #333;
}

/* Newsletter banner */
#newsletter-sub-ad {
    background-color: #e8213b;
    text-align: center;
    margin: auto 0;
}
#newsletter-sub-ad h4, #newsletter-sub-ad p, #newsletter-sub-ad label {
    margin: 0;
    white-space: normal;
}
#newsletter-sub-ad .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0;
}
@media (max-width: 575px) {
    #newsletter-sub-ad #subscribe-box {
        padding-top: 10px;
    }
}

/* Override for Sizing Chart Brand images to only fill a small area */
.size-chart-brands img {
    display: block;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Override for footer to center text at a lower screen size than usual */
@media (max-width: 991.98px) {
    .wrapper-footer {
        text-align: center;
    }
    
    .list-social {
        justify-content: center !important;
    }
}

/* A mild zoom effect when hovering over tiles/buttons. Apply to <a> or <button> elements. */
.mcs-hoverzoom {
    pointer-events: auto;
    transition: transform .5s ease;
    transform: scale(1.00);
}
.mcs-hoverzoom:hover, .mcs-hoverzoom:focus {
    transform: scale(1.05);
    outline: none;
}

/* --------------------------------------------------
    MISC: Override for Collapsing Search Filter
-------------------------------------------------- */
/* Remove hyperlink underlines on filter parents */
div.searchfilter-parent > a {
    text-decoration: none;
}
/* Add a chevron which flips when a filter parent is collapsed/uncollapsed. */
div.searchfilter-parent > a > h3:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    float: right;
    color: grey;
}
div.searchfilter-parent > a.collapsed > h3:after {
    content: "\f077";
}
/* Add an extra border to the first filter child */
div.searchfilter-child > a.filter:first-child {
    border-top: 1px solid #ddd !important;
}
/* Remove padding from child filters. Borders will be shifted as well. Apply padding to the actual text instead. */
div.searchfilter-child {
    list-style: none;
    padding-left: 0;
}
div.searchfilter-child > a {
    padding-left: 30px;
}

/* --------------------------------------------------
    MISC: Various Overrides
-------------------------------------------------- */
/* Override for Mobile Nav Bar: Wide <a> tags, clicking anywhere will follow the link, instead of just clicking text/icon */
a.nToggleMenu.wide {
    display: block;
}

/* Overrides for Desktop Nav Bar */
ul.navbar-nav {
    justify-content: center; /* Main navbar shouldn't be aligned to the left */
}
ul.dropdown-menu > .dropdown-hover::before { /* Add carets to categories with subcategories */
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    padding-right: 6px;
}
ul.dropdown-menu > li > a.dropdown-item { /* Padding for carets to fit */
    padding-right: 20px;
    padding-right: 2rem;
}
ul.dropdown-menu > li > hr { /* Add dividers where there are blank categories */
    margin: 5px 0;
    height: 1px;
    background-color: var(--ml-border-color);
    width: 100%;
    border: 0;
}

/* Override for footer - section titles should not have word wrap. (Eg. "<Trolley Emoji> Shopping" should not take up two lines) */
.wrapper-footer h4 {
    white-space: nowrap;
}

/* Override for zoomed images - force a white background to avoid transparent product/bike images showing through the zoomed version */
.zoomImg {
    background-color:#fff;
}

/* Thumbnail price - make bold. Some styles are overwritten if it's a New Bike thumbnail - check the template file. */
.mcs-thumb-price {
    position: relative;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
}
.mcs-thumb-brand {
    font-weight: bold;
    margin-bottom: 0.2em;
    font-size: 16px;
}

/* Desktop nav bar - If a subcategory menu will render too far to the right, JavaScript will tell it to render to the left instead */
.dropdown-menu-horizontal.mcs-invert-dropdown {
    left: auto;
    right: 100%;
}

/* Accessibility tab-navigation changes */
img.logo, img.product-image, img.product-image-small {
    display: block;
}

/* --------------------------------------------------
    MISC: Coloured banners (curved-edge message boxes)
        - From https://wpsites.net/genesis-tutorials/rounded-corners-content-boxes/
-------------------------------------------------- */
.mcs-banner-blue, .mcs-banner-grey, .mcs-banner-green,
.mcs-banner-lightgrey, .mcs-banner-red, .mcs-banner-yellow {
    margin:0 0 25px;
    overflow:hidden;
    padding:20px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.mcs-banner-blue {
    background-color:#d8ecf7;
    border:1px solid #afcde3;
}
.mcs-banner-grey {
    background-color:#e2e2e2;
    border:1px solid #bdbdbd;
}
.mcs-banner-green {
    background-color:#d9edc2;
    border:1px solid #b2ce96;
}
.mcs-banner-lightgrey {
    background-color:#F5F5F5;
    border:1px solid #DDDDDD;
}
.mcs-banner-red {
    background-color:#f9dbdb;
    border:1px solid #e9b3b3;
}
.mcs-banner-yellow {
    background-color:#fef5c4;
    border:1px solid #fadf98;
}


