/* ==========================================================
   FROME MODEL CENTRE
   HOMEPAGE MASTER CSS
   Magento 2 / Amasty Jet Theme
   ========================================================== */


/* ==========================================================
   1. HEADER / LOGO
   ========================================================== */

.logo{
    margin:0 !important;
}

.logo img,
.header .logo img{
    width:190px !important;
    max-width:190px !important;
    height:auto !important;
    max-height:none !important;
}

.page-header .header.content{
    padding:10px 0 !important;
    min-height:90px !important;
    display:flex !important;
    align-items:center !important;
}


/* ==========================================================
   2. SEARCH
   ========================================================== */

.block-search,
.amsearch-wrapper-block{
    margin-top:-12px !important;
    align-self:center !important;
}

.amsearch-wrapper-block,
.amsearch-wrapper-block .amsearch-form-block,
.amsearch-wrapper-block .amsearch-input-wrapper{
    width:600px !important;
    max-width:600px !important;
    min-width:600px !important;
}

.amsearch-wrapper-block .amsearch-input{
    width:100% !important;
    height:46px !important;
    font-size:15px !important;
    border:2px solid #d8d8d8 !important;
    padding:0 50px 0 15px !important;
    box-sizing:border-box !important;
}

.amsearch-wrapper-block .amsearch-button.-loupe{
    width:46px !important;
    height:46px !important;
}


/* ==========================================================
   3. MAIN NAVIGATION / PAGE SPACING
   ========================================================== */

.navigation,
.nav-sections{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.page-main,
.columns,
.column.main{
    padding-top:0 !important;
    margin-top:0 !important;
}


/* ==========================================================
   4. TRUST BAR
   ========================================================== */

.fmc-trust-bar{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    width:100vw;

    margin:-12px 0 14px calc(50% - 50vw) !important;

    padding:13px 35px;

    background:#fffaf4;

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

    box-sizing:border-box;

    gap:24px;
}

.fmc-trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.fmc-trust-item i{
    font-size:46px;
    color:#a52a2a;

    width:50px;

    text-align:center;
    line-height:1;
}

.fmc-title{
    font-size:17px;
    font-weight:800;

    color:#111;

    line-height:1.15;
}

.fmc-subtitle{
    font-size:14px;

    color:#222;

    line-height:1.2;
}

.fmc-stars{
    color:#f5b400;

    font-size:15px;

    letter-spacing:1px;

    margin-top:4px;
}


/* ==========================================================
   5. AMASTY HERO SLIDER
   ========================================================== */

.ambanner-slider-container,
.ambanner-slider-wrap{
    width:98% !important;
    max-width:1400px !important;

    /*
       HERO POSITION

       -35px = current position

       Less negative moves banner DOWN.
       Example: -20px

       More negative moves banner UP.
       Example: -50px
    */

    margin:-35px auto 25px !important;
}


/* Hero slider structure */

.ambanner-slider-container .slick-list,
.ambanner-slider-wrap .slick-list,
.ambanner-slider-container .slick-track,
.ambanner-slider-wrap .slick-track,
.ambanner-slider-container .slick-slide,
.ambanner-slider-wrap .slick-slide,
.ambanner-item-block{
    overflow:hidden !important;
}


/* Hero images */

.ambanner-slider-container img,
.ambanner-slider-wrap img,
.ambanner-slider-container .slick-slide img,
.ambanner-slider-wrap .slick-slide img{
    width:100% !important;

    height:auto !important;

    max-width:100% !important;

    display:block !important;
}


/* Hide Amasty text layers because text is in banner artwork */

.ambanner-title,
.ambanner-description,
.ambanner-content,
.ambanner-button,
.ambanner-text{
    display:none !important;
}


/* ==========================================================
   6. SHOP BY CATEGORY
   ========================================================== */

.fmc-home-title{
    text-align:center;

    font-size:26px;
    font-weight:800;

    margin:18px 0 18px;

    color:#222;
}

.fmc-cat-grid{
    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));

    gap:12px;

    width:100%;
    max-width:100%;

    margin:15px 0 30px;
}

.fmc-cat-box{
    display:block;

    background:#fff;

    border:1px solid #e5e5e5;

    text-decoration:none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    min-width:0;

    overflow:hidden;
}

.fmc-cat-box:hover{
    transform:translateY(-3px);

    box-shadow:0 7px 20px rgba(0,0,0,.09);

    border-color:#d7d7d7;
}

.fmc-cat-box img{
    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;
}

.fmc-cat-box:hover img{
    transform:scale(1.025);
}

.fmc-cat-content{
    padding:10px 8px;

    text-align:center;
}

.fmc-cat-title{
    display:block;

    font-size:14px;
    font-weight:800;

    color:#222;

    margin-bottom:4px;

    line-height:1.2;

    text-transform:uppercase;
}

.fmc-cat-link{
    font-size:12px;
    font-weight:700;

    color:#8c2230;

    letter-spacing:.4px;

    text-transform:uppercase;

    transition:color .2s ease;
}

.fmc-cat-box:hover .fmc-cat-link{
    color:#5f111c;
}


/* ==========================================================
   7. HOMEPAGE PRODUCT WIDGETS
   New Releases / Future Releases
   ========================================================== */

/*
   Confirmed Amasty/Magento structure:

   .block.am-widget.widget-product-grid

   ol.products.list.items.product-items

   li.item.product.product-item
*/


body.cms-index-index .block.am-widget.widget-product-grid{
    width:100% !important;

    max-width:1220px !important;

    margin:0 auto 32px !important;

    text-align:left !important;
}


/* Product horizontal row */

body.cms-index-index
.block.am-widget.widget-product-grid
ol.products.list.items.product-items{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:14px !important;

    width:100% !important;

    margin:0 auto !important;

    padding:0 10px 14px !important;

    box-sizing:border-box !important;

    scroll-snap-type:x proximity;

    scrollbar-width:none !important;
}


/* Hide scrollbar */

body.cms-index-index
.block.am-widget.widget-product-grid
ol.products.list.items.product-items::-webkit-scrollbar{

    display:none !important;
}


/* Product cards */

body.cms-index-index
.block.am-widget.widget-product-grid
ol.products.list.items.product-items > li.product-item{

    flex:0 0 220px !important;

    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;

    float:none !important;

    margin:0 !important;

    background:#fff !important;

    border:1px solid #ececec !important;

    box-sizing:border-box !important;

    scroll-snap-align:start;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* Product card hover */

body.cms-index-index
.block.am-widget.widget-product-grid
ol.products.list.items.product-items > li.product-item:hover{

    transform:translateY(-3px);

    border-color:#ddd !important;

    box-shadow:0 6px 18px rgba(0,0,0,.08);
}


/* Product card inner */

body.cms-index-index
.block.am-widget.widget-product-grid
.product-item-info{

    width:100% !important;

    padding:12px !important;

    box-sizing:border-box !important;

    text-align:left !important;
}


/*
   IMPORTANT

   Do NOT force .product-image-wrapper dimensions.

   That was causing Magento product images to
   disappear or become huge.
*/


body.cms-index-index
.block.am-widget.widget-product-grid
.product-item-photo{

    display:block !important;

    margin-bottom:10px !important;
}


/* Product names */

body.cms-index-index
.block.am-widget.widget-product-grid
.product-item-name{

    font-size:13px !important;

    font-weight:600 !important;

    line-height:1.35 !important;

    margin:8px 0 !important;

    color:#222 !important;
}


body.cms-index-index
.block.am-widget.widget-product-grid
.product-item-link{

    color:#222 !important;

    text-decoration:none !important;
}


body.cms-index-index
.block.am-widget.widget-product-grid
.product-item-link:hover{

    color:#8c2230 !important;
}


/* Product prices */

body.cms-index-index
.block.am-widget.widget-product-grid
.price-box{

    margin:5px 0 0 !important;
}


body.cms-index-index
.block.am-widget.widget-product-grid
.price{

    color:#111 !important;

    font-size:16px !important;

    font-weight:800 !important;
}


/* Wishlist */

body.cms-index-index
.block.am-widget.widget-product-grid
.action.towishlist{

    color:#777 !important;
}


body.cms-index-index
.block.am-widget.widget-product-grid
.action.towishlist:hover{

    color:#8c2230 !important;
}


/* ==========================================================
   8. REMOVE COMPARE
   ========================================================== */

body.cms-index-index .action.tocompare,
body.cms-index-index .product-item .tocompare,
body.cms-index-index .product-item-actions .action.tocompare,
body.cms-index-index .compare,
body.cms-index-index .block-compare{

    display:none !important;
}


/* ==========================================================
   9. ADD TO CART
   ========================================================== */

body.cms-index-index
.block.am-widget.widget-product-grid
.action.tocart{

    background:#8c2230 !important;

    border:1px solid #8c2230 !important;

    color:#fff !important;

    font-weight:700 !important;

    border-radius:0 !important;

    transition:.2s ease;
}


body.cms-index-index
.block.am-widget.widget-product-grid
.action.tocart:hover{

    background:#6f1824 !important;

    border-color:#6f1824 !important;
}


/* ==========================================================
   10. SECTION HEADERS
   New Releases / Future Releases
   Heading + View All on same line
   ========================================================== */

.home-section-header{
    width:100%;

    max-width:1220px;

    margin:32px auto 16px;

    padding:0 0 10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-sizing:border-box;

    border-bottom:1px solid #dedede;
}


.home-section-header h2{
    margin:0 !important;

    color:#222;

    font-size:32px !important;

    font-weight:700 !important;

    line-height:1.15;

    letter-spacing:0;
}


.home-section-header a{
    margin-left:auto;

    color:#8c2230;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:color .2s ease;
}


.home-section-header a:hover{
    color:#111;

    text-decoration:none;
}


/* ==========================================================
   11. HIDE DUPLICATE PRODUCT WIDGET TITLE
   ========================================================== */

/*
   If you use the custom .home-section-header,
   leave the Magento widget title blank.

   This is a backup rule for accidental duplicate headings.
*/

.home-section-header + div
.block.am-widget.widget-product-grid > .block-title{

    display:none !important;
}


/* ==========================================================
   12. TABLET
   ========================================================== */

@media(max-width:1024px){

    .fmc-cat-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    ol.products.list.items.product-items > li.product-item{

        flex-basis:200px !important;

        width:200px !important;
        min-width:200px !important;
        max-width:200px !important;
    }


    .home-section-header h2{
        font-size:28px !important;
    }

}


/* ==========================================================
   13. MOBILE
   ========================================================== */

@media(max-width:768px){


    /* ------------------------------------------------------
       MOBILE HEADER
       ------------------------------------------------------ */

    .logo{
        margin:0 !important;

        text-align:center !important;
    }


    .logo img,
    .header .logo img{

        width:180px !important;

        max-width:180px !important;

        height:auto !important;
    }


    .page-header .header.content{

        min-height:auto !important;

        padding:12px 15px !important;

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

        box-sizing:border-box !important;
    }


    /* ------------------------------------------------------
       MOBILE SEARCH
       ------------------------------------------------------ */

    .amsearch-wrapper-block,
    .amsearch-wrapper-block .amsearch-form-block,
    .amsearch-wrapper-block .amsearch-input-wrapper{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;
    }


    .block-search,
    .amsearch-wrapper-block{

        margin-top:12px !important;
    }


    .amsearch-wrapper-block .amsearch-input{

        height:46px !important;

        font-size:15px !important;
    }


    /* ------------------------------------------------------
       MOBILE TRUST BAR
       ------------------------------------------------------ */

    .fmc-trust-bar{

        grid-template-columns:repeat(2,minmax(0,1fr));

        padding:14px 14px;

        gap:18px 12px;

        margin:0 0 16px calc(50% - 50vw) !important;
    }


    .fmc-trust-item{

        justify-content:flex-start;

        gap:9px;
    }


    .fmc-trust-item i{

        font-size:31px;

        width:34px;

        flex:0 0 34px;
    }


    .fmc-title{

        font-size:13px;
    }


    .fmc-subtitle{

        font-size:11px;
    }


    .fmc-stars{

        font-size:11px;
    }


    /* ------------------------------------------------------
       MOBILE HERO
       ------------------------------------------------------ */

    .ambanner-slider-container,
    .ambanner-slider-wrap{

        width:100% !important;

        max-width:100% !important;

        margin:0 auto 18px !important;
    }


    .ambanner-slider-container img,
    .ambanner-slider-wrap img,
    .ambanner-slider-container .slick-slide img,
    .ambanner-slider-wrap .slick-slide img{

        width:100% !important;

        height:auto !important;

        object-fit:contain !important;

        display:block !important;
    }


    /* ------------------------------------------------------
       MOBILE CATEGORY SECTION
       ------------------------------------------------------ */

    .fmc-home-title{

        font-size:22px;

        margin:18px 0 14px;
    }


    .fmc-cat-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:10px;

        margin:12px 0 24px;
    }


    .fmc-cat-box img{

        height:145px;
    }


    .fmc-cat-content{

        padding:9px 5px;
    }


    .fmc-cat-title{

        font-size:12px;
    }


    .fmc-cat-link{

        font-size:10px;
    }


    /* ------------------------------------------------------
       MOBILE SECTION HEADERS
       ------------------------------------------------------ */

    .home-section-header{

        width:calc(100% - 24px);

        margin:25px auto 12px;

        padding-bottom:8px;

        align-items:center;
    }


    .home-section-header h2{

        font-size:22px !important;

        line-height:1.2;
    }


    .home-section-header a{

        font-size:11px;

        margin-left:12px;
    }


    /* ------------------------------------------------------
       MOBILE PRODUCT SLIDERS
       ------------------------------------------------------ */

    body.cms-index-index
    .block.am-widget.widget-product-grid{

        width:100% !important;

        margin-bottom:25px !important;
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    ol.products.list.items.product-items{

        gap:10px !important;

        padding:0 12px 12px !important;
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    ol.products.list.items.product-items > li.product-item{

        flex:0 0 165px !important;

        width:165px !important;

        min-width:165px !important;

        max-width:165px !important;
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    .product-item-info{

        padding:9px !important;
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    .product-item-name{

        font-size:12px !important;

        line-height:1.3 !important;
    }


    body.cms-index-index
    .block.am-widget.widget-product-grid
    .price{

        font-size:14px !important;
    }

}


/* ==========================================================
   END — FROME MODEL CENTRE
   
   /* ==========================================================
   FMC MOBILE HEADER FIX
   KEEP AT VERY BOTTOM OF CSS
   ========================================================== */

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

    /* Remove huge header height / whitespace */
    .page-header{
        margin:0 !important;
        padding:0 !important;
        min-height:0 !important;
    }

    .page-header .header.content{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        justify-content:space-between !important;
        min-height:0 !important;
        height:auto !important;
        padding:12px 15px 8px !important;
        margin:0 !important;
    }

    /* Logo - much smaller on mobile */
    .logo{
        display:block !important;
        float:none !important;
        width:auto !important;
        max-width:none !important;
        margin:0 auto 10px !important;
        text-align:center !important;
    }

    .logo img,
    .header .logo img{
        width:155px !important;
        max-width:155px !important;
        height:auto !important;
        max-height:none !important;
        margin:0 auto !important;
    }

    /* Mobile menu icon */
    .nav-toggle{
        top:18px !important;
        left:15px !important;
        margin:0 !important;
    }

    /* Search */
    .block-search,
    .amsearch-wrapper-block{
        position:relative !important;
        float:none !important;
        clear:both !important;

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

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

    .amsearch-wrapper-block,
    .amsearch-wrapper-block .amsearch-form-block,
    .amsearch-wrapper-block .amsearch-input-wrapper{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .amsearch-wrapper-block .amsearch-input{
        width:100% !important;
        height:44px !important;
        box-sizing:border-box !important;
    }

    /* Header icons - remove excessive vertical space */
    .header.content .header.links,
    .header.content .minicart-wrapper,
    .header.content .wishlist{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }

    .minicart-wrapper{
        margin-top:0 !important;
    }

    /* Remove unnecessary gaps before trust bar */
    .nav-sections{
        margin-bottom:0 !important;
    }

    .page-main,
    .columns,
    .column.main{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    /* Trust bar - compact 2 x 2 */
    .fmc-trust-bar{
        width:100% !important;
        margin:0 !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:14px 10px !important;

        padding:16px 14px !important;

        box-sizing:border-box !important;
    }

    .fmc-trust-item{
        justify-content:flex-start !important;
        align-items:center !important;
        gap:9px !important;
        min-width:0 !important;
    }

    .fmc-trust-item i{
        font-size:29px !important;
        width:34px !important;
        flex:0 0 34px !important;
    }

    .fmc-title{
        font-size:13px !important;
        line-height:1.1 !important;
    }

    .fmc-subtitle{
        font-size:11px !important;
        line-height:1.15 !important;
    }

    .fmc-stars{
        font-size:11px !important;
        margin-top:2px !important;
    }

    /* Hero - don't let desktop negative margin affect mobile */
    .ambanner-slider-container,
    .ambanner-slider-wrap{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto 15px !important;
        padding:0 !important;
    }

    .ambanner-slider-container img,
    .ambanner-slider-wrap img{
        width:100% !important;
        height:auto !important;
        display:block !important;
    }
}


/* ==========================================================
   FMC MOBILE HEADER — CONFIRMED WORKING JETTHEME ORDER
   ========================================================== */

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

    .page-header .header.content{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        justify-content:space-between !important;
    }

    /* Correct Amasty hamburger classes:
       ammenu-button -hamburger -trigger */
    .page-header .ammenu-button.-hamburger.-trigger{
        order:1 !important;
    }

    .page-header .logo.ammenu-logo{
        order:2 !important;
    }

    .page-header .amtheme-icons-container{
        order:3 !important;
    }

    .page-header .amsearch-wrapper-block{
        order:4 !important;
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    /* Keep basket in normal JetTheme flex flow */
    .page-header .minicart-wrapper.amtheme-header-icon{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        float:none !important;
    }
}


/* ==========================================================
   END — FROME MODEL CENTRE CUSTOM CSS
   ========================================================== */


/* ==========================================================
   FMC MOBILE HEADER — TIGHTENED SPACING
   ========================================================== */

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

    .page-header .header.content{
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

    .page-header .logo.ammenu-logo{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }

    .page-header .logo.ammenu-logo img{
        width:135px !important;
        max-width:135px !important;
    }

    .page-header .amsearch-wrapper-block{
        margin-top:6px !important;
    }
}