.hero-buttons{
    display:flex;
    flex-direction:row;
    gap:18px;
    align-items:center;
    justify-content:flex-start;
    margin-top:25px;
}

.hero-buttons .zpelem-button{
    padding:14px 34px;
    border-radius:6px;
    font-size:18px;
    font-weight:600;
    transition:all .3s ease;
}

.hero-buttons .zpelem-button:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.homepage-hero{
    min-height:600px;
}

.homepage-hero .hero-slide{
    min-height:600px;
}

.hero-buttons-right {
    justify-content: flex-end !important;
    padding-right: 5% !important;
}

.hero-buttons-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    padding-left: 0 !important;
    margin-left: -34px !important;
}

/* Featured Brands - Logo Container */
.brand-logo {
    height: 125px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Logo itself */
.brand-logo img {
    width: 145px !important;
    height: 70px !important;
    object-fit: contain !important;
    max-width: 100% !important;
    display: block;
    margin: auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Subtle hover */
.brand-logo:hover img {
    transform: scale(1.04);
    opacity: 0.8;
}

/* Featured Brands button */
.featured-brands-button {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 25px !important;
}

/* Actual Zoho button */
.featured-brands-button .zpelem-button {
    padding: 14px 34px !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 600 !important;

    display: inline-block !important;
    width: auto !important;

    transition: all .3s ease !important;
}

/* Hover */
.featured-brands-button .zpelem-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0,0,0,.25);
}

.shop-intro {
    padding: 55px 30px !important;
    text-align: center !important;
}

/* =========================================
   SHOP CATEGORIES SECTION
   ========================================= */

.shop-categories {
    background: #fff !important;
    padding: 60px 40px 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}


/* =========================================
   SHOP CATEGORY EYEBROW
   ========================================= */

.shop-categories .shop-category-eyebrow {
    width: 100% !important;
    max-width: 100% !important;

    display: block !important;

    text-align: center !important;

    margin: 0 auto 18px auto !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;
    left: auto !important;

    white-space: nowrap !important;
    align-self: center !important;
}

.shop-categories .shop-category-eyebrow * {
    text-align: center !important;
    white-space: nowrap !important;
}


/* =========================================
   CATEGORY CARDS
   ========================================= */

.shop-categories .shop-category-card {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
}


/* =========================================
   FORCE IMAGE CONTAINER TO SQUARE
   ========================================= */

.shop-categories .shop-category-card .zpelem-image {
    width: 100% !important;
    height: 290px !important;

    min-height: 290px !important;
    max-height: 290px !important;

    padding: 0 !important;
    margin: 0 0 25px 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================
   FORCE ALL IMAGE WRAPPERS TO FILL BOX
   ========================================= */

.shop-categories .shop-category-card .zpelem-image > div,
.shop-categories .shop-category-card .zpelem-image figure,
.shop-categories .shop-category-card .zpelem-image a {
    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================
   ACTUAL IMAGE & ISOLATED HOVER
   ========================================= */

.shop-categories img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(1) !important;
    transition: transform 0.45s ease !important;
}

.shop-categories img:hover {
    transform: scale(1.04) !important;
}


/* =========================================
   CATEGORY TITLE
   ========================================= */

.shop-categories .shop-category-card h1,
.shop-categories .shop-category-card h2,
.shop-categories .shop-category-card h3,
.shop-categories .shop-category-card h4 {
    margin: 0 0 15px 0 !important;

    color: #111 !important;

    font-size: 23px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;

    letter-spacing: -0.3px !important;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.shop-categories .shop-category-card p {
    margin: 0 0 22px 0 !important;

    color: #666 !important;

    font-size: 14px !important;
    line-height: 1.7 !important;
}


/* =========================================
   SHOP LINKS
   ========================================= */

.shop-categories .shop-category-card a {
    color: #111 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    letter-spacing: 0.6px !important;

    text-decoration: none !important;

    transition: all 0.25s ease !important;
}

.shop-categories .shop-category-card a:hover {
    color: #555 !important;
    letter-spacing: 1px !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .shop-categories {
        padding: 50px 25px 65px !important;
    }

    .shop-categories .shop-category-card {
        padding: 0 6px !important;
    }

    .shop-categories .shop-category-card .zpelem-image {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .shop-categories {
        padding: 45px 18px 55px !important;
    }

    .shop-categories .shop-category-eyebrow {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;

        white-space: normal !important;
    }

    .shop-categories .shop-category-eyebrow * {
        white-space: normal !important;
    }

    .shop-categories .shop-category-card {
        padding: 0 !important;
        margin-bottom: 45px !important;
    }

    .shop-categories .shop-category-card .zpelem-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 1 / 1 !important;
    }

    .shop-categories img {
        aspect-ratio: 1 / 1 !important;
    }
}

/* ========================================
   FEATURED RIDES — SECTION 3
   ======================================== */

.featured-rides {
    background: #f7f7f5 !important;
    padding: 65px 40px 70px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    font-family: 'Montserrat', sans-serif !important;
}


/* ========================================
   HEADING
   ======================================== */

.featured-title {
    color: #111111 !important;
    font-family: 'Montserrat', sans-serif !important;

    font-size: 38px !important;
    font-weight: 600 !important;

    letter-spacing: -1.2px !important;
    line-height: 1.15 !important;

    text-align: center !important;

    margin: 0 0 12px 0 !important;
    width: 100% !important;
}


/* ========================================
   SUBTITLE
   ======================================== */

.featured-subtitle {
    color: #777777 !important;
    font-family: 'Montserrat', sans-serif !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    letter-spacing: 0.1px !important;
    line-height: 1.6 !important;

    text-align: center !important;

    margin: 0 0 32px 0 !important;
    width: 100% !important;
}


/* ========================================
   PRODUCTS
   Keep Zoho's product layout
   ======================================== */

.featured-products {
    width: 100% !important;
    max-width: 1200px !important;

    margin: 0 auto 28px auto !important;

    font-family: 'Montserrat', sans-serif !important;
    text-align: left !important;
}


/* Keep product content left aligned */

.featured-products * {
    font-family: 'Montserrat', sans-serif !important;
    text-align: left !important;
}


/* ========================================
   PRODUCT IMAGES
   ======================================== */

.featured-products img {
    transition: transform 0.3s ease !important;
}


/* Subtle image hover */

.featured-products img:hover {
    transform: scale(1.025) !important;
}


/* ========================================
   PRODUCT TEXT
   ======================================== */

/* Product brand */

.featured-products small {
    color: #777777 !important;
    font-weight: 400 !important;
}


/* Product names */

.featured-products h3 {
    color: #151515 !important;
    font-weight: 600 !important;
}

/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 768px) {

    .featured-rides {
        padding: 50px 20px 55px !important;
    }

    .featured-title {
        font-size: 30px !important;
    }

    .featured-subtitle {
        font-size: 15px !important;
        margin-bottom: 25px !important;
    }

    .featured-products {
        max-width: 100% !important;
    }

    .featured-button {
        padding: 13px 25px !important;
    }
}

/* =========================================
   BRANDS PAGE — SECTION 1
   ========================================= */

.brands-intro {
    background: #ffffff;
    text-align: center;
    padding: 75px 40px 60px;
}

.brands-intro h1 {
    margin: 0 auto 22px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #151515;
}

.brands-intro p {
    max-width: 1050px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #555555;
}

/* Tablet */
@media (max-width: 991px) {
    .brands-intro {
        padding: 60px 30px 50px;
    }

    .brands-intro h1 {
        font-size: 34px;
    }

    .brands-intro p {
        font-size: 17px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .brands-intro {
        padding: 50px 20px 45px;
    }

    .brands-intro h1 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .brands-intro p {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* =========================================
   PREMIUM BRAND ALPHABET
   ========================================= */

.brand-alphabet {
    width: 100%;
    padding: 28px 20px;
    margin: 20px 0;

    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}

.brand-alphabet-row {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 38px;

    margin: 5px 0;
}

.brand-alphabet-row a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 40px;

    color: #20251f;

    font-family: Inter, Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.4px;

    text-decoration: none;

    transition: all 0.2s ease;
}

.brand-alphabet-row a:hover {
    color: #ffffff;
    background: #20251f;
    padding: 0 8px;
}


/* MOBILE */

@media (max-width: 767px) {

    .brand-alphabet {
        padding: 20px 10px;
    }

    .brand-alphabet-row {
        gap: 8px;
        flex-wrap: wrap;
    }

    .brand-alphabet-row a {
        min-width: 28px;
        height: 34px;
        font-size: 15px;
    }
}

/* ===== SHIMANO COLLECTION BANNER FIX ===== */

/* Outer collection banner */
.theme-category-image-desc-container {
    position: relative !important;

    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* Inner banner */
.theme-category-image-desc-container
.theme-category-image-description-container {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: block !important;

    background: transparent !important;
}


/* ===== TITLE + DESCRIPTION WRAPPER ===== */

.theme-category-name-description {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 170px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: block !important;

    background: transparent !important;
}


/* ===== COLLECTION TITLE ===== */

h1.theme-category-name,
h1.theme-category-name.theme-category-name-with-desc {
    position: absolute !important;

    left: 60px !important;
    top: 28px !important;

    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    width: auto !important;

    font-family: 'Montserrat', sans-serif !important;

    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    color: #1F2933 !important;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
    border: none !important;

    text-align: left !important;

    white-space: nowrap !important;
}


/* ===== COLLECTION DESCRIPTION ===== */

.theme-category-desc {
    position: absolute !important;

    left: 60px !important;
    top: 88px !important;

    width: 1000px !important;
    max-width: calc(100% - 120px) !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Montserrat', sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    color: #667085 !important;

    text-align: left !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   ZOHO STORE — FILTER / NAV STACKING FIX
   ========================================================= */


/* ---------------------------------------------------------
   NORMAL PAGE
   --------------------------------------------------------- */

/* Filter bar stays below navigation */
.theme-filter-container {
    position: relative !important;
    z-index: 100 !important;
}


/* Normal navigation */
.theme-header,
.theme-navigation,
.theme-navigation-bar,
.theme-header-container,
.theme-navigation-container {
    z-index: 5000 !important;
}


/* Normal navigation dropdowns */
.theme-header .dropdown-menu,
.theme-navigation .dropdown-menu,
.theme-navigation-bar .dropdown-menu,
.theme-header [class*="dropdown"],
.theme-navigation [class*="dropdown"] {
    z-index: 99999 !important;
}


/* Social buttons */
[class*="social"] {
    z-index: 3000 !important;
}


/* =========================================================
   ZOHO SHOW MORE FILTER - FINAL STACKING FIX
   ========================================================= */


/* ---------------------------------------------------------
   1. NORMAL FILTER BAR
   --------------------------------------------------------- */

.theme-filter-container {
    z-index: 10 !important;
}


/* ---------------------------------------------------------
   2. WHEN SHOW MORE IS OPEN
   --------------------------------------------------------- */

/* Lower the ENTIRE header stacking context */
body:has(.theme-open-slider-filter) .theme-header,
body:has(.theme-open-slider-filter) .theme-header-container,
body:has(.theme-open-slider-filter) .theme-header-refine-wrapper,
body:has(.theme-open-slider-filter) .theme-navigation,
body:has(.theme-open-slider-filter) .theme-navigation-bar,
body:has(.theme-open-slider-filter) .theme-mobile-header-refine-wrapper {
    z-index: 1 !important;
}


/* Lower navigation dropdowns too */
body:has(.theme-open-slider-filter) .theme-header .dropdown-menu,
body:has(.theme-open-slider-filter) .theme-navigation .dropdown-menu,
body:has(.theme-open-slider-filter) .theme-navigation-bar .dropdown-menu,
body:has(.theme-open-slider-filter) [class*="dropdown"] {
    z-index: 1 !important;
}


/* ---------------------------------------------------------
   3. FILTER OVERLAY
   --------------------------------------------------------- */

body:has(.theme-open-slider-filter) .theme-filter-slider-overlay {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 999999 !important;

    isolation: isolate !important;
}


/* ---------------------------------------------------------
   4. ACTUAL FILTER PANEL
   --------------------------------------------------------- */

body:has(.theme-open-slider-filter) 
.theme-filter-slider-overlay 
.theme-filter-slider-container {

    position: relative !important;

    top: 150px !important;
    right: 0 !important;

    height: 100vh !important;

    z-index: 1000000 !important;

    background: #ffffff !important;

    overflow-y: auto !important;
}


/* ---------------------------------------------------------
   5. FILTER CONTENT
   --------------------------------------------------------- */

body:has(.theme-open-slider-filter)
.theme-filter-slider-container * {
    position: relative;
}


/* Keep filter itself above everything */
body:has(.theme-open-slider-filter)
.theme-filter-slider-container {
    z-index: 1000001 !important;
}


/* ---------------------------------------------------------
   6. SOCIAL BUTTONS GO BEHIND FILTER
   --------------------------------------------------------- */

body:has(.theme-open-slider-filter)
[class*="social"] {
    z-index: 0 !important;
}


/* ---------------------------------------------------------
   7. FILTER CLOSE BUTTON
   --------------------------------------------------------- */

body:has(.theme-open-slider-filter)
.theme-filter-slider-container button,
body:has(.theme-open-slider-filter)
.theme-filter-slider-container [class*="close"] {
    z-index: 1000002 !important;
}

/* =========================================================
   AMBIKA CYCLE STORES
   FINAL MOBILE HERO OVERRIDE
   DO NOT MODIFY DESKTOP CSS
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE OVERFLOW FIX
       ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body * {
        box-sizing: border-box !important;
    }


    /* =====================================================
       ZOHO PAGE / MAIN CONTAINER
       ===================================================== */

    .theme-content-area,
    .theme-content-container,
    .theme-content-area-inner,
    .zpcontent-container,
    .page-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow-x: hidden !important;
    }


    /* =====================================================
       HERO — KEEP INSIDE MOBILE VIEWPORT
       ===================================================== */

    .zpelem-banner,
    .zpelem-slider,
    .theme-slider,
    .theme-banner,
    [class*="slider"],
    [class*="banner"] {

        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: hidden !important;
    }


    /* =====================================================
       HERO ROWS / COLUMNS
       ===================================================== */

    .zpelem-row,
    .zpelem-col,
    .zpelem-col > div,
    .zpcontainer {

        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO HEADING
       ===================================================== */

    .zpelem-heading h1,
    .zpelem-heading h2,
    .zpelem-heading h3,
    .zpelem-heading h4 {

        max-width: calc(100% - 36px) !important;

        margin-left: 18px !important;
        margin-right: 18px !important;

        font-size: 34px !important;
        line-height: 1.04 !important;

        letter-spacing: -0.8px !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO DESCRIPTION
       
       IMPORTANT:
       Zoho uses .zpelem-text / .zptext for text blocks.
       ===================================================== */

    .zpelem-text {
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: visible !important;
    }

    .zpelem-text .zptext,
    .zpelem-text .zptext p {

        display: block !important;

        width: auto !important;
        max-width: calc(100% - 36px) !important;

        margin-left: 18px !important;
        margin-right: 18px !important;

        font-size: 13px !important;
        line-height: 1.5 !important;

        letter-spacing: 0.2px !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Force description text to remain visible */
    .zpelem-text .zptext,
    .zpelem-text .zptext p,
    .zpelem-text .zptext div,
    .zpelem-text .zptext span {

        visibility: visible !important;
    }


    /* =====================================================
       BUTTON ROW
       ===================================================== */

    .zpelem-button {
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /*
       The button container must NOT inherit a huge
       desktop width.
    */

    .zpbutton-container {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       ACTUAL ZOHO BUTTON
       ===================================================== */

    .zpbutton-wrapper {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 46px !important;

        padding: 0 10px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        white-space: normal !important;
    }


    /* =====================================================
       ACTUAL BUTTON TEXT
       ===================================================== */

    .zpbutton-wrapper .zpbutton-content {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.2 !important;

        text-align: center !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       BUTTON ROW — TWO BUTTONS SIDE BY SIDE
       ===================================================== */

    .zpelem-button {

        width: 50% !important;
        max-width: 50% !important;

        padding-left: 4px !important;
        padding-right: 4px !important;

        flex: 0 0 50% !important;

        box-sizing: border-box !important;
    }


    /*
       If Zoho puts both buttons inside the same row,
       make the row a proper 2-column layout.
    */

    .zpelem-button:first-child {
        padding-left: 16px !important;
    }

    .zpelem-button:last-child {
        padding-right: 16px !important;
    }


    /* =====================================================
       HERO BUTTON INNER ELEMENTS
       ===================================================== */

    .zpelem-button .zpbutton-container,
    .zpelem-button .zpbutton-wrapper,
    .zpelem-button .zpbutton-content {

        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       REMOVE DESKTOP TRANSFORMS / POSITIONING
       ===================================================== */

    .zpelem-button,
    .zpbutton-container,
    .zpbutton-wrapper {

        transform: none !important;
    }


    /* =====================================================
       IMAGE / BACKGROUND
       ===================================================== */

    img,
    picture,
    video {

        max-width: 100% !important;
    }


    /* =====================================================
       HERO OVERFLOW — FINAL SAFETY
       ===================================================== */

    .zpelem-box,
    .zpelement,
    .zpbox-container {

        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: hidden !important;
    }

}

/* =========================================================
   AMBIKA CYCLE STORES — MOBILE OVERRIDE PACK v2
   Append this at the VERY END of your Custom CSS.
   Scope: max-width 767px only. Desktop CSS is untouched.
   Order matters: this block must sit after your existing
   mobile block, because several rules win on order, not
   on specificity.
   ========================================================= */

@media only screen and (max-width: 767px) {

/* ---------------------------------------------------------
   1. HERO — SLIDE HEIGHT
   600px on a 380px-wide phone is a full screen of dead
   space under the text. 520 keeps the bike visible without
   pushing the buttons off the fold.
   --------------------------------------------------------- */

.homepage-hero,
.homepage-hero .hero-slide {
    min-height: 520px !important;
    height: auto !important;
}


/* ---------------------------------------------------------
   2. HERO — HEADING
   --------------------------------------------------------- */

.homepage-hero .zpelem-heading h1,
.homepage-hero .zpelem-heading h2,
.homepage-hero .zpelem-heading h3,
.homepage-hero .zpelem-heading h4 {
    max-width: calc(100% - 36px) !important;

    margin: 0 18px 10px 18px !important;
    padding: 0 !important;

    font-size: 32px !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}


/* ---------------------------------------------------------
   3. HERO — DESCRIPTION
   --------------------------------------------------------- */

.homepage-hero .zpelem-text {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.homepage-hero .zpelem-text .zptext,
.homepage-hero .zpelem-text .zptext p {
    display: block !important;

    width: auto !important;
    max-width: calc(100% - 36px) !important;

    margin: 0 18px !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.1px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}


/* ---------------------------------------------------------
   4. HERO — BUTTON ROW
   Neutralises the desktop -34px pull and the 5% right pad,
   then rebuilds the row as a true 2-up flex row.
   --------------------------------------------------------- */

.hero-buttons,
.hero-buttons-left,
.hero-buttons-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 20px 0 0 0 !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;
}


/* Each button = half the row, no fixed 50% + extra padding
   fighting each other. */

.hero-buttons .zpelem-button,
.hero-buttons-left .zpelem-button,
.hero-buttons-right .zpelem-button {
    flex: 1 1 50% !important;

    width: auto !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
}


/* Zoho's inner wrappers must fill the half-column exactly. */

.hero-buttons .zpbutton-container,
.hero-buttons .zpbutton-wrapper,
.hero-buttons-left .zpbutton-container,
.hero-buttons-left .zpbutton-wrapper,
.hero-buttons-right .zpbutton-container,
.hero-buttons-right .zpbutton-wrapper {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}


/* THE ELLIPSIS FIX.
   Your current rule sets overflow:hidden + text-overflow:
   ellipsis on .zpbutton-content, which is what turns
   "Shop Accessories" into "Shop Accessori...". Dropping the
   clip and the padding lets the label fit at 12.5px. */

.hero-buttons .zpbutton-content,
.hero-buttons-left .zpbutton-content,
.hero-buttons-right .zpbutton-content {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;

    text-align: center !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}


/* Kill the hover lift on touch — it leaves the button stuck
   in the raised state after a tap on iOS. */

.hero-buttons .zpelem-button:hover,
.featured-brands-button .zpelem-button:hover {
    transform: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   5. SHOP CATEGORIES — 2-UP GRID
   Your global mobile block forces every column to 100%, so
   the cards stack. This turns the card's direct parent back
   into a wrapping flex row and pins each card to 50%.
   --------------------------------------------------------- */

.shop-categories {
    padding: 40px 12px 45px !important;
}

/* the row that directly holds the cards */
.shop-categories *:has(> .shop-category-card) {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.shop-categories .shop-category-card {
    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 0 26px 0 !important;
    padding: 0 6px !important;

    box-sizing: border-box !important;
}


/* Square image that scales with the half-column instead of
   the hard-coded 290px / full-width aspect-ratio. */

.shop-categories .shop-category-card .zpelem-image {
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

.shop-categories .shop-category-card .zpelem-image > div,
.shop-categories .shop-category-card .zpelem-image figure,
.shop-categories .shop-category-card .zpelem-image a {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.shop-categories .shop-category-card img {
    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    aspect-ratio: auto !important;

    object-fit: cover !important;
    object-position: center !important;
}

/* No hover zoom on touch */
.shop-categories .shop-category-card img:hover {
    transform: none !important;
}


/* Type scale drops to fit a ~170px column */

.shop-categories .shop-category-card h1,
.shop-categories .shop-category-card h2,
.shop-categories .shop-category-card h3,
.shop-categories .shop-category-card h4 {
    margin: 0 0 6px 0 !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
}

.shop-categories .shop-category-card p {
    margin: 0 0 10px 0 !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
}

.shop-categories .shop-category-card a {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.shop-categories .shop-category-card a:hover {
    letter-spacing: 0.5px !important;
}


/* Eyebrow stays centred and wraps */
.shop-categories .shop-category-eyebrow,
.shop-categories .shop-category-eyebrow * {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    left: 0 !important;
}


/* ---------------------------------------------------------
   6. FEATURED BRANDS — 3-UP LOGO GRID
   --------------------------------------------------------- */

*:has(> .brand-logo) {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;
}

.brand-logo {
    flex: 0 0 33.333% !important;

    width: 33.333% !important;
    max-width: 33.333% !important;
    min-width: 0 !important;

    height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 8px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.brand-logo img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;
}

.brand-logo:hover img {
    transform: none !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   7. FEATURED BRANDS — CTA BUTTON
   Your global `.zpelem-button { width: 50% }` mobile rule
   also hits this button, which is why it looks half-width
   and off-centre. Restore it to a normal full-width CTA.
   --------------------------------------------------------- */

.featured-brands-button {
    width: 100% !important;
    margin-top: 22px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.featured-brands-button .zpelem-button {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.featured-brands-button .zpbutton-container,
.featured-brands-button .zpbutton-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

.featured-brands-button .zpbutton-content {
    width: auto !important;
    max-width: 100% !important;

    font-size: 14px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    padding: 0 !important;
}


/* ---------------------------------------------------------
   8. SHOP INTRO
   --------------------------------------------------------- */

.shop-intro {
    padding: 38px 18px !important;
}

}


/* =========================================================
   SMALL PHONES (iPhone SE / 360px Android)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .homepage-hero .zpelem-heading h1,
    .homepage-hero .zpelem-heading h2,
    .homepage-hero .zpelem-heading h3 {
        font-size: 27px !important;
    }

    .homepage-hero .zpelem-text .zptext,
    .homepage-hero .zpelem-text .zptext p {
        font-size: 13px !important;
    }

    .hero-buttons,
    .hero-buttons-left,
    .hero-buttons-right {
        gap: 8px !important;
        padding: 0 12px !important;
    }

    .hero-buttons .zpbutton-content,
    .hero-buttons-left .zpbutton-content,
    .hero-buttons-right .zpbutton-content {
        font-size: 11.5px !important;
    }

    .shop-categories .shop-category-card {
        padding: 0 4px !important;
    }

    .shop-categories .shop-category-card h1,
    .shop-categories .shop-category-card h2,
    .shop-categories .shop-category-card h3,
    .shop-categories .shop-category-card h4 {
        font-size: 14px !important;
    }

    .brand-logo {
        height: 66px !important;
        padding: 8px 6px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v3
   Append AFTER the v2 block. Do not delete v2.
   Everything here is inside a mobile media query.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   A. GUTTER NORMALISATION (the "weird left padding")
   Cause: your original mobile block puts margin-left:18px on
   the <h1>/<p> themselves. That 18px stacks on top of the
   padding Zoho's own row/column already has, so the text sits
   ~40-60px in from the left while the right edge stays put.
   Fix: strip the indent off the text, put ONE gutter on the
   wrapper instead.
   --------------------------------------------------------- */

.homepage-hero .zpelem-row,
.homepage-hero .zpelem-col,
.homepage-hero .zpelem-col > div,
.homepage-hero .zpcontainer,
.homepage-hero .zprow-container {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

/* the single gutter now lives here */
.homepage-hero .zpelem-heading,
.homepage-hero .zpelem-text {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 20px !important;

    box-sizing: border-box !important;
}

.homepage-hero .zpelem-heading h1,
.homepage-hero .zpelem-heading h2,
.homepage-hero .zpelem-heading h3,
.homepage-hero .zpelem-heading h4,
.homepage-hero .zpelem-text .zptext,
.homepage-hero .zpelem-text .zptext p {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---------------------------------------------------------
   B. MOBILE TYPE SCALE
   --------------------------------------------------------- */

/* hero headline */
.homepage-hero .zpelem-heading h1,
.homepage-hero .zpelem-heading h2,
.homepage-hero .zpelem-heading h3,
.homepage-hero .zpelem-heading h4 {
    margin-bottom: 12px !important;

    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.8px !important;
}

/* hero description */
.homepage-hero .zpelem-text .zptext,
.homepage-hero .zpelem-text .zptext p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.1px !important;
}

/* every OTHER heading on the page (BEST SELLING, BICYCLES,
   FEATURED BRANDS...). Your current 34px is what makes
   "BEST SELLING" collide with the View All link. */
.zpelem-heading h1,
.zpelem-heading h2 {
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px !important;
}

.zpelem-heading h3,
.zpelem-heading h4 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.featured-title {
    font-size: 25px !important;
    letter-spacing: -0.4px !important;
}

.featured-subtitle {
    font-size: 13px !important;
    margin-bottom: 22px !important;
}


/* ---------------------------------------------------------
   C. HERO BUTTON ROW — catches slide 1 even without a class
   Targets whatever element is the direct parent of the
   buttons inside the hero, so it works on every slide.
   --------------------------------------------------------- */

.homepage-hero *:has(> .zpelem-button) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 20px 0 0 0 !important;
    padding: 0 20px !important;

    box-sizing: border-box !important;
}

.homepage-hero .zpelem-button {
    flex: 1 1 0 !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.homepage-hero .zpbutton-container,
.homepage-hero .zpbutton-wrapper {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

.homepage-hero .zpbutton-content {
    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;

    text-align: center !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}


/* =========================================================
   D. REUSABLE MOBILE GRID UTILITIES
   Add these classes in the builder (see notes in chat).
   They do NOTHING on desktop — they only exist below 767px.
   ========================================================= */

/* ---- 2 across (shop by category) ---- */

.m-grid-2 {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;
}

.m-grid-2 > *,
.m-grid-2 .m-grid-col {
    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 0 18px 0 !important;
    padding: 0 5px !important;

    box-sizing: border-box !important;
}


/* ---- 3 across (featured brands) ---- */

.m-grid-3 {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;
}

.m-grid-3 > *,
.m-grid-3 .m-grid-col {
    flex: 0 0 33.333% !important;

    width: 33.333% !important;
    max-width: 33.333% !important;
    min-width: 0 !important;

    margin: 0 0 10px 0 !important;
    padding: 0 5px !important;

    box-sizing: border-box !important;
}


/* ---- EQUAL SQUARES for every image inside a grid ----
   This is what kills the "Road Bikes is tall, Gravel is
   taller, Helmets is different again" problem: the source
   images have different aspect ratios, so we crop them all
   to 1:1 instead of letting each one set its own height. */

.m-grid-2 .zpelem-image,
.m-grid-2 .zpelem-image > div,
.m-grid-2 .zpelem-image figure,
.m-grid-2 .zpelem-image a {
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

.m-grid-2 .zpelem-image {
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 10px !important;
}

.m-grid-2 .zpelem-image > div,
.m-grid-2 .zpelem-image figure,
.m-grid-2 .zpelem-image a {
    height: 100% !important;
}

.m-grid-2 img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: cover !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.m-grid-2 img:hover {
    transform: none !important;
}


/* ---- text inside a 2-up card ---- */

.m-grid-2 h1,
.m-grid-2 h2,
.m-grid-2 h3,
.m-grid-2 h4 {
    margin: 0 0 5px 0 !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;

    text-align: left !important;
}

.m-grid-2 p {
    margin: 0 0 8px 0 !important;

    font-size: 11.5px !important;
    line-height: 1.45 !important;

    text-align: left !important;
}

.m-grid-2 a {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
}


/* ---- logos inside a 3-up grid ---- */

.m-grid-3 .zpelem-image,
.m-grid-3 .brand-logo {
    height: 62px !important;
    min-height: 0 !important;
    max-height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 6px 4px !important;

    box-sizing: border-box !important;
}

.m-grid-3 img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .homepage-hero .zpelem-heading h1,
    .homepage-hero .zpelem-heading h2,
    .homepage-hero .zpelem-heading h3,
    .homepage-hero .zpelem-heading h4 {
        font-size: 25px !important;
    }

    .homepage-hero .zpelem-text .zptext,
    .homepage-hero .zpelem-text .zptext p {
        font-size: 12.5px !important;
    }

    .homepage-hero *:has(> .zpelem-button) {
        gap: 8px !important;
        padding: 0 14px !important;
    }

    .homepage-hero .zpbutton-content {
        font-size: 11.5px !important;
    }

    .zpelem-heading h1,
    .zpelem-heading h2 {
        font-size: 22px !important;
    }

    .m-grid-2 h1,
    .m-grid-2 h2,
    .m-grid-2 h3,
    .m-grid-2 h4 {
        font-size: 13px !important;
    }

    .m-grid-3 .zpelem-image,
    .m-grid-3 .brand-logo {
        height: 54px !important;
        max-height: 54px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v4
   Append AFTER v3. Keep v2 and v3 in place.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   A. HERO GUTTER — SPECIFICITY FIX
   v3 bug: the rule that zeroed padding on
   `.homepage-hero .zpelem-col > div` (0,2,1) outranked the
   rule that restored the 20px gutter on
   `.homepage-hero .zpelem-text` (0,2,0). Both were
   !important, so the higher-specificity zero won and the
   text went edge-to-edge. These selectors outrank it.
   --------------------------------------------------------- */

.homepage-hero .zpelem-col > div.zpelem-heading,
.homepage-hero .zpelem-col > div.zpelem-text,
.homepage-hero div.zpelem-heading,
.homepage-hero div.zpelem-text {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 22px !important;
    padding-right: 22px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
}

/* small breathing room above the headline */
.homepage-hero .zpelem-col > div.zpelem-heading,
.homepage-hero div.zpelem-heading {
    padding-top: 14px !important;
}

/* text itself carries no indent — the wrapper does */
.homepage-hero div.zpelem-heading h1,
.homepage-hero div.zpelem-heading h2,
.homepage-hero div.zpelem-heading h3,
.homepage-hero div.zpelem-heading h4,
.homepage-hero div.zpelem-text .zptext,
.homepage-hero div.zpelem-text .zptext p {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}


/* ---------------------------------------------------------
   B. HERO TYPE — 2-line headline, 3-line description
   26px keeps "Ride Further." and "Ride Better." on one line
   each inside a 336px content box (380px viewport - 44px
   gutter). 13px puts the description at ~50 chars/line.
   --------------------------------------------------------- */

.homepage-hero div.zpelem-heading h1,
.homepage-hero div.zpelem-heading h2,
.homepage-hero div.zpelem-heading h3,
.homepage-hero div.zpelem-heading h4 {
    margin-bottom: 14px !important;

    font-size: 26px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.7px !important;
}

.homepage-hero div.zpelem-text .zptext,
.homepage-hero div.zpelem-text .zptext p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.1px !important;
}

/* button row picks up the same 22px gutter */
.homepage-hero *:has(> .zpelem-button) {
    padding-left: 22px !important;
    padding-right: 22px !important;
}


/* =========================================================
   C. FEATURED BRANDS — 2-UP, NO CROPPING
   Use `m-logo-2` on the brands row INSTEAD of `m-grid-2`.
   m-grid-2 shapes its images with object-fit: cover inside a
   1:1 box, which is right for category photos and wrong for
   logos — that's what chopped Cannondale and Safety Labs.
   This grid uses `contain` and a fixed cell height, so wide
   and tall logos both fit whole.
   ========================================================= */

.m-logo-2 {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
}

.m-logo-2 > *,
.m-logo-2 .m-grid-col {
    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 0 6px 0 !important;
    padding: 0 6px !important;

    box-sizing: border-box !important;
}

/* Collapse every wrapper height Zoho and your desktop CSS
   set — this is what was leaving ~150px of dead air between
   logo rows. */
.m-logo-2 .zpelem-image,
.m-logo-2 .brand-logo,
.m-logo-2 .zpelem-image > div,
.m-logo-2 .zpelem-image figure,
.m-logo-2 .zpelem-image a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 84px !important;

    min-height: 84px !important;
    max-height: 84px !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* nested wrappers must not stack their own 84px */
.m-logo-2 .zpelem-image > div,
.m-logo-2 .zpelem-image figure,
.m-logo-2 .zpelem-image a {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
}

/* THE ACTUAL LOGO — contain, never cover.
   Overrides your desktop `.brand-logo img { width:145px;
   height:70px }` by source order. */
.m-logo-2 img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 58px !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
    opacity: 1 !important;
}

.m-logo-2 img:hover {
    transform: none !important;
    opacity: 1 !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .homepage-hero .zpelem-col > div.zpelem-heading,
    .homepage-hero .zpelem-col > div.zpelem-text,
    .homepage-hero div.zpelem-heading,
    .homepage-hero div.zpelem-text {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .homepage-hero div.zpelem-heading h1,
    .homepage-hero div.zpelem-heading h2,
    .homepage-hero div.zpelem-heading h3,
    .homepage-hero div.zpelem-heading h4 {
        font-size: 24px !important;
    }

    .homepage-hero div.zpelem-text .zptext,
    .homepage-hero div.zpelem-text .zptext p {
        font-size: 12.5px !important;
    }

    .homepage-hero *:has(> .zpelem-button) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .m-logo-2 .zpelem-image,
    .m-logo-2 .brand-logo,
    .m-logo-2 .zpelem-image > div,
    .m-logo-2 .zpelem-image figure,
    .m-logo-2 .zpelem-image a {
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px !important;
    }

    .m-logo-2 img {
        max-height: 50px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v5
   Append AFTER v4. Keep v2, v3 and v4 in place.
   Fixes the Shop page "Shop by Category" section.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   A. DISABLE THE v2 GUESS
   v2 used `.shop-categories *:has(> .shop-category-card)` to
   guess which element was the row. On the Shop page it
   matched the wrong element, turned it into a flex container,
   and the heading / description / link became flex items that
   shrank to min-content — which is why the text renders one
   letter per line. Turning that guess off first.
   --------------------------------------------------------- */

.shop-categories *:has(> .shop-category-card) {
    display: block !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.shop-categories .shop-category-card {
    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   B. m-cat-2 — SHOP PAGE CATEGORY GRID (2 across)
   Same pattern that already works on the home page, but it
   also forces every child element back to block / full width
   so nothing inherits flex-item shrinking.
   ========================================================= */

.m-cat-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
}


/* the four columns */
.m-cat-2 > *,
.m-cat-2 .m-grid-col {
    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    height: auto !important;

    display: block !important;

    margin: 0 0 26px 0 !important;
    padding: 0 6px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   EVERYTHING INSIDE A COLUMN GOES BACK TO BLOCK
   This is the rule that kills the one-letter-per-line text.
   --------------------------------------------------------- */

.m-cat-2 .zpelem-image,
.m-cat-2 .zpelem-heading,
.m-cat-2 .zpelem-text,
.m-cat-2 .zpelem-button,
.m-cat-2 .zpelem-link,
.m-cat-2 .zpelem-col,
.m-cat-2 .zpelem-col > div {
    display: block !important;

    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* ---- square image ---- */

.m-cat-2 .zpelem-image {
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    margin-bottom: 12px !important;

    overflow: hidden !important;
}

.m-cat-2 .zpelem-image > div,
.m-cat-2 .zpelem-image figure,
.m-cat-2 .zpelem-image a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

.m-cat-2 img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: cover !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.m-cat-2 img:hover {
    transform: none !important;
}


/* ---- title ---- */

.m-cat-2 h1,
.m-cat-2 h2,
.m-cat-2 h3,
.m-cat-2 h4 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
}


/* ---- description ----
   word-break / overflow-wrap reset to `normal` so a squeezed
   box can never split words mid-character again. */

.m-cat-2 p,
.m-cat-2 .zptext,
.m-cat-2 .zptext p,
.m-cat-2 .zptext div,
.m-cat-2 .zptext span {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1.45 !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}


/* ---- shop link ---- */

.m-cat-2 a {
    display: inline-block !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.3 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* the image link must stay a full-size block */
.m-cat-2 .zpelem-image a {
    display: block !important;
    width: 100% !important;
}

.m-cat-2 a:hover {
    letter-spacing: 0.4px !important;
}


/* ---- section wrapper ---- */

.shop-categories {
    padding: 34px 0 40px !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .m-cat-2 {
        padding: 0 10px !important;
    }

    .m-cat-2 > *,
    .m-cat-2 .m-grid-col {
        padding: 0 5px !important;
        margin-bottom: 22px !important;
    }

    .m-cat-2 h1,
    .m-cat-2 h2,
    .m-cat-2 h3,
    .m-cat-2 h4 {
        font-size: 13px !important;
    }

    .m-cat-2 p,
    .m-cat-2 .zptext,
    .m-cat-2 .zptext p {
        font-size: 11.5px !important;
    }

    .m-cat-2 a {
        font-size: 10px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v6
   Append AFTER v5. Keep v2–v5 in place.
   Corrects two bugs introduced by v5.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   1. THE VISIBLE CSS TEXT
   Zoho injects a per-element <style> block as a direct child
   of the row. v5's `.m-cat-2 > * { display: block }` hit that
   <style> tag too, and a styled-visible <style> element
   renders its own source as page text — hence the
   "[data-element-id=...].zprow{...}" paragraph.
   --------------------------------------------------------- */

.m-cat-2 style,
.m-cat-2 script,
.m-grid-2 style,
.m-grid-2 script,
.m-logo-2 style,
.m-logo-2 script {
    display: none !important;
}


/* ---------------------------------------------------------
   2. COLUMNS BACK TO 50%
   v5 listed `.m-cat-2 .zpelem-col` in the "reset children to
   block/full width" group. Your columns ARE .zpelem-col, and
   that rule sat later in the file than the 50% rule at equal
   specificity — so it won and every column went full width.
   That's the one-card-per-row and the oversized image.
   --------------------------------------------------------- */

.m-cat-2 > div,
.m-cat-2 > .zpelem-col,
.m-cat-2 .m-grid-col,
.m-cat-2 .zpelem-col {
    display: block !important;

    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 0 24px 0 !important;
    padding: 0 6px !important;

    box-sizing: border-box !important;
}


/* If Zoho nests the columns inside one wrapper div, that
   wrapper must stay full width and become the flex row
   instead. Placed after the rule above so it wins for the
   wrapper only. */

.m-cat-2 > div:has(> .m-grid-col),
.m-cat-2 > div:has(> .zpelem-col) {
    display: flex !important;
    flex-wrap: wrap !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   3. THE ROW ITSELF
   `shop-category-card` is on the ROW, so v2's
   `.shop-categories .shop-category-card { flex: 0 0 50% }`
   was shrinking the whole row to half width. Pinning it back.
   --------------------------------------------------------- */

.shop-categories .m-cat-2,
.m-cat-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   4. CARD CONTENTS — block, full width of the 50% column
   (.zpelem-col deliberately NOT in this list any more)
   --------------------------------------------------------- */

.m-cat-2 .zpelem-image,
.m-cat-2 .zpelem-heading,
.m-cat-2 .zpelem-text,
.m-cat-2 .zpelem-button,
.m-cat-2 .zpelem-link {
    display: block !important;

    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* square image inside the half-width column */

.m-cat-2 .zpelem-image {
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    margin-bottom: 11px !important;

    overflow: hidden !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .m-cat-2 > div,
    .m-cat-2 > .zpelem-col,
    .m-cat-2 .m-grid-col,
    .m-cat-2 .zpelem-col {
        padding: 0 5px !important;
        margin-bottom: 20px !important;
    }

    .m-cat-2 > div:has(> .m-grid-col),
    .m-cat-2 > div:has(> .zpelem-col) {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v7
   Append AFTER v6. Keep v2–v6 in place.
   Normalises the four category card headings.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   HEADINGS — ALL FOUR CARDS
   v5 only targeted h1–h4. BIKES and COMPONENTS picked it up;
   ACCESSORIES and APPAREL didn't, which means those two are
   built on a different tag (h5/h6) or carry the size on an
   inner span. Targeting the heading wrapper and everything
   inside it covers every case, and !important outranks any
   inline font-size Zoho wrote onto the element.
   --------------------------------------------------------- */

.m-cat-2 .zpelem-heading,
.m-cat-2 .zpelem-heading *,
.m-cat-2 h1,
.m-cat-2 h2,
.m-cat-2 h3,
.m-cat-2 h4,
.m-cat-2 h5,
.m-cat-2 h6 {
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   VERTICAL RHYTHM
   Collapses the oversized gap between the title and the
   description that Zoho's per-element margins leave behind.
   --------------------------------------------------------- */

.m-cat-2 .zpelem-heading {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.m-cat-2 .zpelem-heading h1,
.m-cat-2 .zpelem-heading h2,
.m-cat-2 .zpelem-heading h3,
.m-cat-2 .zpelem-heading h4,
.m-cat-2 .zpelem-heading h5,
.m-cat-2 .zpelem-heading h6 {
    margin: 0 !important;
    padding: 0 !important;
}

.m-cat-2 .zpelem-text {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.m-cat-2 .zpelem-text .zptext,
.m-cat-2 .zpelem-text .zptext p {
    margin: 0 !important;
    padding: 0 !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .m-cat-2 .zpelem-heading,
    .m-cat-2 .zpelem-heading *,
    .m-cat-2 h1,
    .m-cat-2 h2,
    .m-cat-2 h3,
    .m-cat-2 h4,
    .m-cat-2 h5,
    .m-cat-2 h6 {
        font-size: 13px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v8
   Append AFTER v7. Keep v2–v7 in place.
   Featured Rides / Products widget on mobile.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* never render Zoho's injected <style> blocks as text */
.m-prod-2 style,
.m-prod-2 script {
    display: none !important;
}


/* ---------------------------------------------------------
   1. PRODUCT IMAGES — CONTAIN, NEVER COVER
   Product shots are objects on white. Cropping them to a
   square cuts the wheels off. `contain` letterboxes instead.
   --------------------------------------------------------- */

.m-prod-2 img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
}

.m-prod-2 img:hover {
    transform: none !important;
}

/* consistent image box height so the four cards align */
.m-prod-2 [class*="theme-product-image"],
.m-prod-2 [class*="product-image"] {
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 6px !important;
    margin: 0 0 8px 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   2. CARD TYPOGRAPHY
   --------------------------------------------------------- */

.m-prod-2 [class*="theme-product-name"],
.m-prod-2 [class*="product-name"],
.m-prod-2 [class*="product-title"],
.m-prod-2 h3,
.m-prod-2 h4 {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    margin: 0 0 4px 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.m-prod-2 [class*="theme-product-brand"],
.m-prod-2 [class*="product-brand"],
.m-prod-2 small {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
}

.m-prod-2 [class*="theme-product-price"],
.m-prod-2 [class*="product-price"] {
    font-size: 12px !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    word-break: normal !important;
}


/* ---------------------------------------------------------
   3. LAYOUT — ONLY IF IT ISN'T ALREADY 2-UP
   Zoho's product widget is usually responsive on its own, so
   try the section above first. If it still stacks 1-up, this
   forces two columns.
   --------------------------------------------------------- */

.m-prod-2 [class*="theme-product-list"],
.m-prod-2 [class*="theme-products-container"],
.m-prod-2 [class*="products-list"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 20px 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
}

/* individual cards must not inherit the grid */
.m-prod-2 [class*="theme-product-item"],
.m-prod-2 [class*="product-item"],
.m-prod-2 [class*="product-card"] {
    display: block !important;

    float: none !important;
    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .m-prod-2 [class*="theme-product-name"],
    .m-prod-2 [class*="product-name"],
    .m-prod-2 h3,
    .m-prod-2 h4 {
        font-size: 11.5px !important;
    }

    .m-prod-2 [class*="theme-product-price"],
    .m-prod-2 [class*="product-price"] {
        font-size: 11px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v10
   Append AFTER v9. Keep v2–v9 in place.
   Brands page — "Shop by Brand" section.

   Pick ONE of these on the Row:
     m-brand-1  →  one brand per row
     m-brand-2  →  two brands per row
   Both stack the logo above the name.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   A. STOP THE v2 LEAK
   v2's `*:has(> .brand-logo) { display: flex }` and
   `.brand-logo { width: 33.333% }` were written for the
   homepage strip but were never scoped to it. On this page
   they turn each column into a flex row, putting the logo
   at 33% on the left and the name beside it.
   --------------------------------------------------------- */

.m-brand-1 *:has(> .brand-logo),
.m-brand-2 *:has(> .brand-logo) {
    display: block !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}

.m-brand-1 .brand-logo,
.m-brand-2 .brand-logo {
    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}


/* never render Zoho's injected <style> blocks as text */
.m-brand-1 style,
.m-brand-1 script,
.m-brand-2 style,
.m-brand-2 script {
    display: none !important;
}


/* ---------------------------------------------------------
   B. THE ROW
   --------------------------------------------------------- */

.m-brand-1,
.m-brand-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   C. THE COLUMNS
   --------------------------------------------------------- */

.m-brand-1 > div,
.m-brand-1 .m-grid-col,
.m-brand-1 .zpelem-col {
    display: block !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.m-brand-2 > div,
.m-brand-2 .m-grid-col,
.m-brand-2 .zpelem-col {
    display: block !important;

    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 0 24px 0 !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   D. LOGO BOX — fixed height, contain, never cropped
   --------------------------------------------------------- */

.m-brand-1 .zpelem-image,
.m-brand-2 .zpelem-image,
.m-brand-1 .brand-logo,
.m-brand-2 .brand-logo {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 72px !important;

    min-height: 72px !important;
    max-height: 72px !important;

    aspect-ratio: auto !important;

    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

.m-brand-1 .zpelem-image > div,
.m-brand-1 .zpelem-image figure,
.m-brand-1 .zpelem-image a,
.m-brand-2 .zpelem-image > div,
.m-brand-2 .zpelem-image figure,
.m-brand-2 .zpelem-image a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.m-brand-1 img,
.m-brand-2 img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 56px !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
    opacity: 1 !important;
}

.m-brand-1 img:hover,
.m-brand-2 img:hover {
    transform: none !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   E. BRAND NAME — directly under the logo, centred
   --------------------------------------------------------- */

.m-brand-1 .zpelem-text,
.m-brand-2 .zpelem-text {
    display: block !important;

    flex: none !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.m-brand-1 .zptext,
.m-brand-1 .zptext p,
.m-brand-2 .zptext,
.m-brand-2 .zptext p {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.6px !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

}


/* =========================================================
   SMALL PHONES (<=400px)
   ========================================================= */

@media only screen and (max-width: 400px) {

    .m-brand-1,
    .m-brand-2 {
        padding: 0 12px !important;
    }

    .m-brand-2 > div,
    .m-brand-2 .m-grid-col,
    .m-brand-2 .zpelem-col {
        padding: 0 6px !important;
        margin-bottom: 20px !important;
    }

    .m-brand-1 .zpelem-image,
    .m-brand-2 .zpelem-image,
    .m-brand-1 .brand-logo,
    .m-brand-2 .brand-logo {
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
    }

    .m-brand-1 img,
    .m-brand-2 img {
        max-height: 48px !important;
    }

    .m-brand-1 .zptext,
    .m-brand-1 .zptext p,
    .m-brand-2 .zptext,
    .m-brand-2 .zptext p {
        font-size: 11px !important;
    }
}

/* =========================================================
   AMBIKA — MOBILE PATCH v11
   Append AFTER v10. Keep v2–v10 in place.
   Divider line under each brand row.
   ========================================================= */

@media only screen and (max-width: 767px) {


/* ---------------------------------------------------------
   A. EQUAL-HEIGHT CELLS
   Flex items on the same line stretch to match, so both
   dividers in a row sit at the same y-position. Without this
   a taller logo would leave the two halves of the line
   misaligned by a few pixels.
   --------------------------------------------------------- */

.m-brand-2 {
    align-items: stretch !important;
}


/* ---------------------------------------------------------
   B. THE DIVIDER
   Horizontal padding moves off the column and onto the
   content, so the two 50% borders meet in the middle and
   read as one continuous line instead of two dashes.
   --------------------------------------------------------- */

.m-brand-2 > div,
.m-brand-2 .m-grid-col,
.m-brand-2 .zpelem-col {
    padding: 0 0 24px 0 !important;
    margin: 0 0 24px 0 !important;

    border-bottom: 1px solid #e6e6e6 !important;
}

/* put the side spacing back on the contents */
.m-brand-2 .zpelem-image,
.m-brand-2 .brand-logo,
.m-brand-2 .zpelem-text {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
    
.m-brand-2-last .zpelem-col:nth-last-child(-n + 2) {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------------------------------------------------------
   D. SAME TREATMENT FOR THE 1-UP VARIANT
   --------------------------------------------------------- */

.m-brand-1 > div,
.m-brand-1 .m-grid-col,
.m-brand-1 .zpelem-col {
    padding: 0 0 22px 0 !important;
    margin: 0 0 22px 0 !important;

    border-bottom: 1px solid #e6e6e6 !important;
}

.m-brand-1 > div:last-child,
.m-brand-1 .m-grid-col:last-child,
.m-brand-1 .zpelem-col:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

}

[data-zs-cart-icon] {
    display: none !important;
}


/* =====================================================
   AMBIKA CYCLE STORES — UNDER MAINTENANCE SECTION
   ===================================================== */

.maintenance-section {
    width: 100% !important;
    max-width: 1280px !important;

    margin: 0 auto !important;
    padding: 70px 40px !important;

    box-sizing: border-box !important;
}


/* =====================================================
   CONTENT LAYOUT
   ===================================================== */

.maintenance-section .zpelem-row {
    display: flex !important;
    align-items: center !important;
}


/* =====================================================
   IMAGE
   ===================================================== */

.maintenance-section img {
    width: 100% !important;
    max-width: 100% !important;

    height: 430px !important;

    object-fit: cover !important;
    display: block !important;
}


/* =====================================================
   TEXT SIDE
   ===================================================== */

.maintenance-section .zpelem-col {
    box-sizing: border-box !important;
}


/* Heading */
.maintenance-section h1,
.maintenance-section h2,
.maintenance-section h3 {

    font-family: 'Montserrat', sans-serif !important;

    font-size: 42px !important;
    line-height: 1.1 !important;

    font-weight: 800 !important;

    letter-spacing: -0.8px !important;

    color: #1F2933 !important;

    margin-top: 0 !important;
    margin-bottom: 24px !important;
}


/* Description */
.maintenance-section p {

    font-family: 'Montserrat', sans-serif !important;

    font-size: 16px !important;
    line-height: 1.65 !important;

    font-weight: 400 !important;

    color: #6B7280 !important;

    margin-top: 0 !important;
    margin-bottom: 30px !important;
}


/* =====================================================
   CHAT WITH US BUTTON
   ===================================================== */

.maintenance-section .zpbutton-wrapper {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 190px !important;
    height: 50px !important;

    padding: 0 28px !important;

    box-sizing: border-box !important;
}


.maintenance-section .zpbutton {

    font-family: 'Montserrat', sans-serif !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    color: #ffffff !important;

    background-color: #3F4639 !important;

    border: none !important;
    border-radius: 0 !important;

    transition: all 0.25s ease !important;
}


.maintenance-section .zpbutton:hover {

    background-color: #1F2933 !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media only screen and (max-width: 767px) {

    .maintenance-section {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 40px 18px !important;

        overflow-x: hidden !important;
    }


    /* Stack image and content */
    .maintenance-section .zpelem-row {

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 30px !important;
    }


    .maintenance-section .zpelem-col {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Image */
    .maintenance-section img {

        width: 100% !important;
        height: 280px !important;

        object-fit: cover !important;
    }


    /* Heading */
    .maintenance-section h1,
    .maintenance-section h2,
    .maintenance-section h3 {

        font-size: 30px !important;
        line-height: 1.12 !important;

        letter-spacing: -0.5px !important;

        margin-bottom: 18px !important;

        text-align: center !important;
    }


    /* Description */
    .maintenance-section p {

        font-size: 14px !important;
        line-height: 1.6 !important;

        text-align: center !important;

        margin-bottom: 24px !important;
    }


    /* Button */
    .maintenance-section .zpbutton-wrapper {

        min-width: 165px !important;
        width: auto !important;

        height: 46px !important;

        padding: 0 22px !important;
    }


    .maintenance-section .zpbutton {

        font-size: 13px !important;
    }

}