/*
|--------------------------------------------------------------------------
| MOZGO LAYOUT STABLE
|--------------------------------------------------------------------------
|
| Layout aprovado após as fases de alinhamento.
|
| Ordem preservada:
| 1. mozgo-content-shell.css
| 2. mozgo-ui-final.css
|
|--------------------------------------------------------------------------
*/

/* ===== SOURCE: mozgo-content-shell.css ===== */
/*
|--------------------------------------------------------------------------
| MozGo Phase 10
| Explicit Content Shell
|--------------------------------------------------------------------------
*/

:root {
    --mozgo-content-max: 1360px;
    --mozgo-content-side: 16px;
}


/*
 * Only elements explicitly marked mozgo-content-shell
 * are affected.
 *
 * We no longer modify every Bootstrap .container.
 */
.mozgo-content-shell {
    box-sizing: border-box !important;

    width: calc(
        100% - var(--mozgo-content-side) - var(--mozgo-content-side)
    ) !important;

    max-width: var(--mozgo-content-max) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/*
 * Preserve normal Bootstrap inner gutter.
 */
.mozgo-content-shell.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/*
 * Header:
 * restore normal Bootstrap row/column geometry.
 */
.header-main
.mozgo-content-shell
> .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}


.header-main
.mozgo-content-shell
> .row
> [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/*
 * Dynamic homepage unified section is not a Bootstrap
 * container, so give it the same 15px visual rail.
 */
.home-categories
> #mozgo-unified-products-section.mozgo-content-shell {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/*
 * Grid itself fills the shell.
 */
#mozgo-unified-products-section
#mozgo-unified-products-grid {
    width: 100% !important;

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

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


/*
 * The source container can render asynchronously,
 * but it must occupy the same horizontal rail.
 */
.home-categories
> #home_categories.mozgo-content-shell {
    max-width: var(--mozgo-content-max) !important;
}


/*
 * Mobile.
 */
@media (max-width: 767px) {
    :root {
        --mozgo-content-side: 10px;
    }

    .mozgo-content-shell {
        width: calc(100% - 20px) !important;
    }
}


/* MOZGO PHASE 10 END */


/* ============================================================
   MOZGO PHASE 10.1
   SAME WIDTH: HEADER + PAGE CONTENT
   ============================================================ */

@media (min-width: 992px) {

    html body
    .header-main
    > .container.mozgo-content-shell,

    html body
    .top-categories
    > .container.mozgo-content-shell,

    html body
    .home-categories
    > .mozgo-content-shell,

    html body
    .category-listing-page
    > .container.mozgo-content-shell,

    html body
    .product-detail-page
    > .container.mozgo-content-shell {

        box-sizing: border-box !important;

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

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* MOZGO PHASE 10.1 END */


/* ============================================================
   MOZGO PHASE 10.2
   ONE SHELL SYSTEM
   ============================================================ */

@media (min-width: 992px) {

    /*
     * Header, Explore and page content now use
     * exactly the same shell.
     */
    html body
    .header-main
    > .container.mozgo-content-shell,

    html body
    .top-categories
    > .container.mozgo-content-shell,

    html body
    .home-categories
    > #home_categories.mozgo-content-shell,

    html body
    .category-listing-page
    > .container.mozgo-content-shell,

    html body
    .product-detail-page
    > .container.mozgo-content-shell {

        box-sizing: border-box !important;

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

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

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /*
     * Standard Bootstrap row geometry in the header.
     */
    html body
    .header-main
    > .mozgo-content-shell
    > .row {

        margin-left: -15px !important;
        margin-right: -15px !important;
    }


    html body
    .header-main
    > .mozgo-content-shell
    > .row
    > [class*="col-"] {

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /*
     * Product section fills its parent.
     * No extra centering or width calculation.
     */
    html body
    #home_categories
    > #mozgo-unified-products-section {

        box-sizing: border-box !important;

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

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

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    html body
    #mozgo-unified-products-grid {

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

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


/* MOZGO PHASE 10.2 END */


/* ============================================================
   MOZGO PHASE 10.2.1
   HOMEPAGE DYNAMIC PRODUCTS SHELL
   ============================================================ */

@media (min-width: 992px) {

    /*
     * Important:
     * the unified products section is a DIRECT CHILD of
     * .home-categories and a SIBLING of #home_categories.
     */
    html body
    .home-categories
    > #mozgo-unified-products-section.mozgo-content-shell {

        box-sizing: border-box !important;

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

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

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

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    html body
    .home-categories
    > #mozgo-unified-products-section
    .mozgo-unified-heading {

        width: 100% !important;

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

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


    html body
    .home-categories
    > #mozgo-unified-products-section
    #mozgo-unified-products-grid {

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

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


/* MOZGO PHASE 10.2.1 END */


/* ============================================================
   MOZGO — COMPACT DESKTOP HEADER
   Only the header width is changed.
   Page content remains untouched.
   ============================================================ */

@media (min-width: 1200px) {

    html body
    .header-main
    > .container.mozgo-content-shell {

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

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* MOZGO COMPACT HEADER END */

/* ===== SOURCE: mozgo-ui-final.css ===== */
/*
|--------------------------------------------------------------------------
| MozGo - Final UI tuning
|--------------------------------------------------------------------------
*/


/* ============================================================
   1. PRODUCT DETAIL ALIGNMENT
   ============================================================ */

@media (min-width: 992px) {

    /*
     * The product page still has one extra Bootstrap gutter
     * inside .car-detail-inner.
     *
     * Cancel only that gutter.
     */
    html body
    .product-detail-page
    .car-detail-inner {

        margin-left: -15px !important;
        margin-right: -15px !important;
    }


    /*
     * Keep the main product, guarantees, store information,
     * more-from-store and related content on the same rail.
     */
    html body
    .product-detail-page
    .car-del-top-section,

    html body
    .product-detail-page
    .rental-detailed-ratings-and-reviews,

    html body
    .product-detail-page
    #mozgo-store-below {

        max-width: 100% !important;
    }
}


/* ============================================================
   2. HOME - REDUCE EMPTY SPACE BETWEEN CATEGORIES / PRODUCTS
   ============================================================ */

html body
section.top-categories {

    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}


html body
section.top-categories
#append_categories {

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


html body
section.home-categories {

    margin-top: 0 !important;
    padding-top: 18px !important;
}


html body
section.home-categories
> #mozgo-unified-products-section {

    margin-top: 0 !important;
}


/*
 * Avoid legacy Bootstrap spacing increasing the gap again.
 */
html body
.home-categories
.category-content {

    margin-top: 0 !important;
}


/* MOZGO FINAL UI TUNING END */


/* ============================================================
   MOZGO - HOME CATEGORY / PRODUCTS GAP
   ============================================================ */

@media (min-width: 992px) {

    /*
     * Aproximar "Produtos para si" das categorias.
     */
    html body
    .home-categories
    > #mozgo-unified-products-section {

        margin-top: -70px !important;
    }

}


/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

    html body
    .home-categories
    > #mozgo-unified-products-section {

        margin-top: -35px !important;
    }

}


/* Mobile */
@media (max-width: 767px) {

    html body
    .home-categories
    > #mozgo-unified-products-section {

        margin-top: -10px !important;
    }

}


/* ============================================================
   MOZGO - PRODUCT DETAIL FINAL ALIGNMENT
   Header = Product page = 1300px
   ============================================================ */

@media (min-width: 1200px) {

    html body
    .product-detail-page
    > .container.mozgo-content-shell {

        box-sizing: border-box !important;

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

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

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}


/* Keep inner product content natural */
html body
.product-detail-page
.car-detail-inner {

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


/* MOZGO PRODUCT DETAIL FINAL ALIGNMENT END */

@media (min-width: 992px) {

    html body
    .product-detail-page
    .car-detail-inner {

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

}


/* ============================================================
   MOZGO FINAL ALIGNMENT
   Stores + Product Detail lower sections
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * HOME - Todas as lojas
     */
    html body
    .all-stores
    > .container.mozgo-content-shell {

        box-sizing: border-box !important;

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

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

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /*
     * PRODUCT DETAIL
     * Outer rail identical to Header.
     */
    html body
    .product-detail-page
    > .container.mozgo-content-shell {

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

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * Stop accumulated inner offsets.
     */
    html body
    .product-detail-page
    .car-detail-inner {

        box-sizing: border-box !important;

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

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

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


    /*
     * Reviews / Store / Related products
     */
    html body
    .product-detail-page
    .rental-detailed-ratings-and-reviews,

    html body
    .product-detail-page
    #mozgo-store-below,

    html body
    .product-detail-page
    #related_products {

        box-sizing: border-box !important;

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

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

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

}


/* MOZGO FINAL ALIGNMENT END */


/* ============================================================
   MOZGO FINAL HOME STORES RAIL
   Products = 1360px, Stores = 1360px
   ============================================================ */

@media (min-width: 1200px) {

    html body
    .all-stores
    > .container.mozgo-content-shell {

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

        margin-left: auto !important;
        margin-right: auto !important;
    }

}

/* MOZGO FINAL HOME STORES RAIL END */