/* ==========================================================================
   Global Styles
   ========================================================================== */

:root {
    /* Layout */
    --layout__max-width: 1500px;

    /* Colors */
    --primary__color: #001348;
    --primary__color__light: #00aeef;
    --primary__color__lighter: #1ab6f1;
    --primary__color__lightest: #4dc6f4;
    --primary__color__secondary: #F08724;
    --primary__color__tertiary: #e02b27;

    --neutral__color: #333333;
    --neutral__color__light: #D8D8D8;
    --neutral__color__lighter: #F2F2F2;
    --neutral__color__lightest: #F8F8F8;

    --active__color: var(--primary__color);
    --error__color: var(--primary__color__tertiary);

    /* Typography */
    --font-weight__semibold: 500;

    /* Links */
    --link__color: var(--primary__color__light);

    /* Headings */
    --heading__text-transform__base: uppercase;

    /* Page Titles */
    --page-title__border-width: 0 0 1px 0;
    --page-title__border-color: var(--primary__color);
    --page-title__font-size: var(--font-size__xl);
    --page-title__font-weight: var(--font-weight__bold);
    --page-title__padding: 0 0 var(--indent__base);
    --page-title__text-transform: uppercase;

    /*  Borders & Shadows */
    --border-color__base: #d1d1d1;
    --border-radius__base: 10px;
    --box-shadow__base: 0 1px 3px 1px rgba(0, 0, 0, 0.1);

    /* Button - Default */
    --button__background: var(--primary__color);
    --button__border: 0;
    --button__box-shadow: var(--box-shadow__base);
    --button__color: var(--color-white);

    --button__hover__background: var(--neutral__color__light);
    --button__hover__color: var(--primary__color);

    /* Button - Primary */
    --button-primary__background: var(--primary__color__secondary);
    --button-primary__border: 0;
    --button-primary__box-shadow: var(--box-shadow__base);
    --button-primary__color: var(--color-white);

    --button-primary__hover__background: var(--primary__color);
    --button-primary__hover__border: 0;

    --button-primary__active__border: 0;

    /* Forms */
    --form-element-input__box-shadow: none;
    --form-element-input__height: 40px;
    --form-element-input__box-shadow: var(--box-shadow__base);

    /* Tables */
    --table__box-shadow: var(--box-shadow__base);
}


/* ==========================================================================
   Header
   ========================================================================== */

.announcement,
.announcement.wrapper {
    /* Annoucement Bar */
    --announcement__background: var(--primary__color);
    --announcement__color: var(--color-white);
    --announcement__border-width: 1px;
    --announcement__border-color: var(--primary__color);
    --announcement__font-weight: var(--font-weight__semibold);
    --announcement__padding: 0;
    --announcement__text-transform: uppercase;
}

header {
    /* Header - Globals */
    --header__line-height: 50px;
    --header__padding: var(--indent__s) var(--indent__s) 0;
    --header-desktop__padding: var(--indent__s) var(--indent__base);

    /* Header - Ordering */
    --header-logo-desktop__order: 1;
    --header-search-desktop__order: 2;
    --header-left-desktop__order: 3;
    --header-right-desktop__order: 4;

    /* Header - Logo */
    --header-logo__padding: 0;

    --header-logo-desktop__flex: unset;
    --header-logo-desktop__justify-content: flex-start;
    --header-logo-desktop__max-width: 230px;
    --header-logo-desktop__padding: 0;

    /* Header - Search */
    --header-search__margin: var(--indent__s) -10px 0;

    --header-search-desktop__flex: 1;
    --header-search-desktop__justify-content: center;
    --header-search-desktop__margin: 0 var(--indent__base);

    /* Header - Left Container */
    --header-left-desktop__flex: unset;
    --header-left-desktop__justify-content: flex-end;

    /* Header - Right Container */
    --header-right-desktop__flex: unset;
    --header-right-desktop__justify-content: center;

    /* Header - Fixed */
    --header-fixed-logo-desktop__max-width: 188px;
}

body.checkout-index-index header {
    --header__padding: var(--indent__s) var(--indent__base);
    --header-desktop__padding: var(--indent__s) var(--indent__base);
}

body.checkout-index-index .page-title {
    border: 0;
}

/* ==========================================================================
   Search
   ========================================================================== */

.block-search {
    --search-global__max-width: 100%;

    --search-global-button__border-radius: 0 var(--border-radius__base) var(--border-radius__base) 0;

    --search-global-input__background: var(--color-white);
    --search-global-input__border: 0;
    --search-global-input-desktop__border: 1px solid var(--primary__color);
    --search-global-input__border-radius: var(--border-radius__base);
    --search-global-input__box-shadow: var(--box-shadow__base);

    --search-global-processing__border-color: var(--primary__color__secondary);

    --search-global-content-desktop__background: var(--color-white);
    --search-global-content__background: var(--primary__color__light);
    --search-global-content__border-radius: 0;
    --search-global-content__padding: var(--indent__s);

    --autocomplete__border-radius: 0 0 var(--border-radius__base) var(--border-radius__base);
    --autocomplete__box-shadow: var(--box-shadow__base);
}

/* ==========================================================================
    Account Links
    ========================================================================== */

.account-menu-wrapper {
    --icon-font__color: var(--primary__color__secondary);
    --icon-font__hover__color: var(--primary__color__secondary);
    --icon-font__active__color: var(--primary__color__secondary);

    --account-links__font-weight: var(--font-weight__semibold);
    --account-links__text-transform: none;
    --account-links-desktop__font-size: inherit;
}

/* ==========================================================================
   Minicart
   ========================================================================== */

.minicart-wrapper {
    --minicart__background: var(--primary__color__secondary);
    --minicart__box-shadow: var(--box-shadow__base);
    --minicart__border-radius: var(--border-radius__base);
    --minicart__padding: 0 var(--indent__s);
    --minicart__margin:  0;
    --minicart-desktop__margin: 0 0 0 var(--indent__s);

    --icon-font__color: var(--color-white);
    --icon-font__hover__color: var(--color-white);
    --icon-font__active__color: var(--color-white);

    --minicart-qty__background: var(--color-white);
    --minicart-qty__border: 1px solid var(--primary__color__secondary);
    --minicart-qty__border-radius: 100%;
    --minicart-qty__color: var(--primary__color);
    --minicart-qty__font-weight: var(--font-weight__bold);
    --minicart-qty__height: 30px;
}

@media only screen and (max-width: 768px) {
    .minicart-wrapper {
        --minicart-qty__position: absolute;
        --minicart-qty__height: 20px;
        --minicart-qty__margin: -40px 0 0 0;
    }
}

/* ==========================================================================
    Contact
    ========================================================================== */

.contact-link {
    --icon-font__color: var(--primary__color__secondary);
    --icon-font__hover__color: var(--primary__color__secondary);
    --icon-font__active__color: var(--primary__color__secondary);

    --contact-phone__display: flex;
    --contact-phone__display-desktop: flex;
    --contact-phone__font-weight: var(--font-weight__semibold);
    --contact-phone-desktop__margin: 0 var(--indent__base) 0 0;
}

/* ==========================================================================
    Main Navigiation
    ========================================================================== */

.nav-toggle {
    --navigation-toggle-icon__margin: 0 var(--indent__s) 0 0;
}

.nav-sections {
    --navigation-container__padding: var(--indent__s) 0;
    --navigation-container-desktop__background: var(--primary__color__light);
    border-bottom: 1px solid var(--primary__color__light);
}

.navigation {
    --navigation-level0-item__text-transform: uppercase;
    --navigation-level0-item__border: 2px solid var(--border-color__base);
    --navigation-level0-item__border-radius: 0;

    --navigation-desktop__font-size: var(--font-size__l);
    --navigation-desktop__font-weight: var(--font-weight__semibold);
    --navigation-desktop__text-align: center;

    --navigation-desktop-level0-item__border-radius: 0;
    --navigation-desktop-level0-item__line-height: 50px;
    --navigation-desktop-level0-item__padding: 0 var(--indent__l);
    --navigation-desktop-level0-item__text-transform: uppercase;

    /*  Default  */
    --navigation-desktop-level0-item__color: var(--color-white);

    --navigation-desktop-level0-item-arrow__color:  var(--color-white);
    --navigation-desktop-level0-item-arrow__font-size: 20px;
    --navigation-desktop-level0-item-arrow__right: 10px;

    --navigation-desktop-level0-item__separator: 1px solid var(--primary__color__lightest);

    /*  Hover  */
    --navigation-desktop-level0-item__hover__background: #009dd7;
    --navigation-desktop-level0-item__hover__color: var(--navigation-desktop-level0-item__color);

    /*  Active  */
    --navigation-desktop-level0-item__active__background: var(--navigation-desktop-level0-item__hover__background);
    --navigation-desktop-level0-item__active__color: var(--navigation-desktop-level0-item__color);
}

.submenu {
    --submenu-desktop__border-width: 1px;
    --submenu-desktop__border-radius: var(--border-radius__base);
    --submenu-desktop__padding: var(--indent__s);
    --submenu-desktop__font-weight: var(--font-weight__regular);
    --submenu-desktop__min-width: 250px;

    --submenu-desktop-megamenu__columns: 5;
    --submenu-desktop-megamenu__column-rule: 1px solid var(--neutral__color__lighter);
    --submenu-desktop-megamenu__column-gap: 10px;

    --submenu-desktop-item__padding: 5px 10px;
    --submenu-desktop-item__margin: 0;
    --submenu-desktop-item__text-transform: none;

    --submenu-desktop-item-parent__background-color: transparent;
    --submenu-desktop-item-parent__font-size: var(--font-size__base);
    --submenu-desktop-item-parent__font-weight: var(--font-weight__semibold);
    --submenu-desktop-item-parent__margin: 0 5px;

    --submenu-desktop-item-parent-arrow__font-size: 24px;
    --submenu-desktop-item-parent-arrow__line-height: 24px;
    --submenu-desktop-item-parent-arrow__right: 10px;

    --submenu-desktop-item__hover__background: var(--neutral__color__lightest);
    --submenu-desktop-item__hover__color: var(--primary__color__light);

    --submenu-desktop-item__active__background: var(--neutral__color__lightest);
    --submenu-desktop-item__active__border-color: var(--primary__color__light);
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    --footer__color: var(--color-white);
    --footer__background-color: #eee;

    --heading__color__base: var(--color-white);

    --icon-font__color: var(--color-white);
    --icon-font__hover__color: var(--primary__color);
    --icon-font__active__color: var(--primary__color);

    --link__color: var(--color-white);
    --link__visited__color: var(--color-white);
    --link__hover__color: var(--color-white);
    --link__active__color: var(--color-white);
}

footer .list {

}

.bottom {
    --footer__color: white;
}

.bottom .list {
    --link__color: white;
    --link__visited__color: white;
    --link__hover__color: white;
    --link__active__color: white;
}

.widget.block.payment-logos {
    --icon-font__color: var(--primary__color);
    --icon-font__hover__color: var(--primary__color);
    --icon-font__active__color: var(--primary__color);
}

/*  Copyright  */
.copyright {
    --copyright__color: var(--color-white);
}


/* ==========================================================================
   Catalogue
   ========================================================================== */

/* Products Item(s)
========================================================================== */

.products-grid {
    --product-grid__text-align: left;
    --product-item-details__justify-items: start;
}

.price-box {
    --product-price__color: var(--error__color);
}

.product-item {
    --product-image__border: 1px solid var(--neutral__color__light);
    --product-image__border-radius: var(--border-radius__base);
    --product-image__box-shadow: var(--box-shadow__base);
}

.product-image-wrapper {
    background-color: var(--color-white);
    border-radius: var(--border-radius__base);
}

body.catalog-product-view .page-bottom .block.related,
body.catalog-product-view .page-bottom .block.upsell {
    max-width: var(--layout__max-width);
}

.page-bottom,
body.catalog-product-view .page-bottom {
    --page-bottom__background: var(--neutral__color__lighter);
}

/* Names
========================================================================== */

.product-item-name {
    --product-name__font-size: 16px;
    --product-name__font-weight: var(--font-weight__semibold);
}

/* Prices
========================================================================== */

.special-price,
.minimal-price {
    --price-special__color: var(--error__color);
}

/* Category View
========================================================================== */

/*  Filter / Layered Navigation  */
.block.filter {
    --filter-block__border-width: 1px;
    --filter-block__box-shadow: var(--box-shadow__base);

    --filter-subtitle__font-size: 16px;
    --filter-subtitle__padding: var(--indent__s) var(--indent__base);
    --filter-subtitle__border-width: 0 0 2px;
    --filter-subtitle__text-transform: uppercase;

    --filter-options-title__border-width: 0 0 2px;
    --filter-options-title__text-transform: uppercase;

    --filter-slider__background-color: var(--primary__color);
}

/*  Pager  */
.pages {
    --pager__border: 1px solid var(--primary__color);
    --pager-current__border: 1px solid var(--primary__color);
    --pager-current__background: var(--primary__color);
}

/* Product View
========================================================================== */

/*  Image Gallery  */
.product.media {
    --gallery__border: 0;

    --gallery-arrow__background-color: transparent;
    --gallery-arrow__color: var(--primary__color__secondary);
}

/*  Sections (Tabs / Accordion)  */
.data.items {
    --tab-content__box-shadow: var(--box-shadow__base);
    --accordion__box-shadow: var(--box-shadow__base);
}


@media screen and (min-width: 1024px) {
    .page-layout-1column .product.media {
        width: 50%;
    }
}

/* ==========================================================================
   Customer / Account
   ========================================================================== */

.block.block-collapsible-nav {
    --collapsible-nav-title__box-shadow: var(--box-shadow__base);
}

/* ==========================================================================
   Content (CMS)
   ========================================================================== */

.breadcrumbs {
    --breadcrumbs__text-transform: uppercase;
}

/* ==========================================================================
   Widgets (Blocks)
   ========================================================================== */

.block.widget,
.block-products-list,
.block.related,
.block.upsell,
.block.crosssell {
    --widget-block-title__border: 0;
    --widget-block-title__font-weight: var(--font-weight__bold);
    --widget-block-title__padding: var(--indent__s) 0;
    --widget-block-title__text-align: center;
    --widget-block-title__text-transform: uppercase;

    --widget-block-title-line-before__border-top: none;
    --widget-block-title-line-before__flex: unset;
    --widget-block-title-line-before__margin: 0;

    --widget-block-title-line-after__border-top: 1px solid var(--primary__color);
    --widget-block-title-line-after__flex: 1;
    --widget-block-title-line-after__margin: 0 0 0 40px;
}

/* ==========================================================================
    Sidebar (Blocks)
    ========================================================================== */

.sidebar {
    --sidebar-block__border-width: 1px;
    --sidebar-block__box-shadow: var(--box-shadow__base);
    --sidebar-block__border-color: var(--border-color__base);
    --sidebar-block__padding: var(--indent__base);
}


/* ==========================================================================
    Featured Categories (Module)
    ========================================================================== */

.featured-categories-list {
    /*  List Layout */
    --featured-categories-list-desktop__columns: 4;
    --featured-categories-list-desktop-large__columns: 4;

    --featured-categories-list-item__border: 0;
    --featured-categories-list-item__box-shadow: var(--box-shadow__base);
    --featured-categories-list-item__align-items: flex-start;

    --featured-categories-list-item-image__order: 1;
    --featured-categories-list-item-details__order: 2;

    --featured-categories-list-item-name__font-weight: var(--font-weight__bold);
    --featured-categories-list-item-name__text-transform: uppercase;
}


.featured-categories-grid {
    /*  Grid Layout */
    --featured-categories-grid-desktop-large__columns: 6;

    --featured-categories-grid-item-name__background-color: transparent;
    --featured-categories-grid-item__border: 0;
    --featured-categories-grid-item__margin: 0;

    --featured-categories-grid-item-image__border: 1px solid var(--border-color__base);
    --featured-categories-grid-item-image-desktop__width: 100%;

    --featured-categories-grid-item-name__font-size: var(--font-size__l);
    --featured-categories-grid-item-name__font-weight: var(--font-weight__bold);
    --featured-categories-grid-item-name__text-transform: uppercase;
}

.featured-categories-grid .actions {
    display: none;
}


/* ==========================================================================
    Advanced Newsletter (Module)
    ========================================================================== */

.widget.block.newsletter {
    --newsletter-input__height: 45px;
    --newsletter-block-title__text-transform: uppercase;
    --newsletter-block-title__font-size: var(--font-size__xl);
    --newsletter-block-title__padding: 10px 0;
    --newsletter-form__justify-content: flex-start;
}

/* ==========================================================================
    Search Results
    ========================================================================== */

.catalogsearch-result-index .search.results .block {
    margin-bottom: 0;
}

.catalogsearch-result-index .search.results dl {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.catalogsearch-result-index .search.results dt {
    padding: 10px 0;
    margin-right: var(--indent__base);
    margin-bottom: var(--indent__base);
}

.catalogsearch-result-index .search.results dd {
    margin-right: var(--indent__base);
    margin-bottom: var(--indent__base);
}

.catalogsearch-result-index .search.results dd a {
    color: var(--text__color);
    background-color: var(--neutral__color__light);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: var(--border-radius__base);
}

.catalogsearch-result-index .search.results dd a:hover {
    background-color: var(--primary__color__light);
    color: var(--color-white);
    text-decoration: none;
}

/* ==========================================================================
    Page Builder - Responsive Columns
    ========================================================================== */

@media only screen and (max-width: 979px) {
    .pagebuilder-column-group.sm-6 .pagebuilder-column {
        flex-basis: 50%;
        width: 50%;
    }

    .pagebuilder-column-line {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 579px) {
    .pagebuilder-column-group.sm-6 .pagebuilder-column {
        flex-basis: 100%;
        width: 100%;
    }
}

.catalog-category-view.page-layout-1column .sidebar.sidebar-additional {
    display: none;
}

/* ==========================================================================
    Motackle - Custom Styling
    ========================================================================== */

/* Announcement */
.announcement-item {
    --link__color: var(--color-white);
    --link__visited__color: var(--color-white);
    --link__hover__color: var(--color-white);
    --link__active__color: var(--color-white);
    --link__text-decoration: none;

    --icon-font__color: var(--color-white);
    --icon-font__hover__color: var(--color-white);
    --icon-font__active__color: var(--color-white);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--indent__s) var(--indent__base);
}

.announcement-item p {
    margin-bottom: 0;
    font-family: var(--heading__font-family__base);
    font-size: var(--font-size__base);
    text-transform: uppercase;
    color: var(--color-white);
}

.announcement-item:before {
    margin-right: var(--indent__s);
    --icon-font__size: 30px;
}

.announcement-item.icon-guarantee:before {
    font-size: 50px !important;
    line-height: 30px;
}

[data-content-type=html] {
    word-wrap: unset;
}

@media screen and (max-width: 768px) {
    .hidden-md { display: none !important; }
}

/* Navigation */
@media screen and (min-width: 1024px) {
    .navigation .level1 > a {
        font-weight: 500;
        font-size: 16px !important;
    }
}

/*  Homepage  */
.cms-index-index .home-container {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.12);
    margin-bottom: -20px;
}

.cms-index-index .home-widget-title {
    background-color: var(--primary__color__secondary);
    text-align: center;
    padding: var(--indent__s) var(--indent__base);
    box-shadow: var(--box-shadow__base);
    margin-bottom: var(--indent__xl);
}

.cms-index-index .home-widget-title h3 {
    font-size: var(--font-size__xl);
}

.cms-index-index .category-banner h3 {
    font-size: 30px;
}

.cms-index-index .category-banner .pagebuilder-poster-content {
    color: white;
}

.cms-index-index .category-banner .pagebuilder-overlay:not(:hover) {
    background-color: rgb(0, 19, 72, 0.15) !important;
}

.cms-index-index .category-banner .pagebuilder-overlay:not(:hover) h3 {
    text-shadow: 1px 2px 5px #001348;
}

.cms-index-index .category-banner .pagebuilder-overlay:not(:hover) .pagebuilder-banner-button,
.cms-index-index .category-banner .pagebuilder-overlay:not(:hover) p {
    display: none !important;
}

/* Checkout */
@media screen and (max-width: 768px) {
    .checkout-payment-method .opc-payment .payment-methods {
        margin: 0;
    }
}