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

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

        /* Colors */
        --primary__color: #000000;
        --primary__color__lighter: #272727;
        --primary__color__secondary: #88AF96;
        --primary__color__tertiary: #CBD5CC;

        --neutral__color__darker: #000000;
        --neutral__color__dark: #272727;
        --neutral__color: #bcbec0;
        --neutral__color__light: #d1d3d4;
        --neutral__color__lighter: #f2f2f2;
        --neutral__color__lightest: #fafafa;

        --active__color: var(--primary__color__secondary);
        --error__color: #F40101;

        /* Typography */
        --text__color: var(--neutral__color__darker);

        /* Links */
        --link__color: var(--text__color);
        --link__hover__color: var(--primary__color__secondary);

        /* Headings */
        --heading__font-weight__base: bold;
        --heading__text-transform__base: uppercase;

        /* Page Titles */
        --page-title__font-weight: var(--font-weight__bold);
        --page-title__text-transform: uppercase;

        /*  Borders & Shadows */
        --border-color__base: var(--neutral__color__light);
        --border-radius__base: 0;
        --box-shadow__base: none;

        /* Icons */
        --icon-font__color: var(--primary__color);
        --icon-font__hover__color: var(--primary__color__secondary);
        --icon-font__active__color: var(--primary__color__secondary);

        /* Button - Default */
        --button__background: var(--color-white);
        --button__border: 2px solid var(--neutral__color);
        --button__color: var(--neutral__color__darker);
        --button__padding: 7px 15px;

        --button__hover__background: var(--neutral__color);

        /* Button - Primary */
        --button-primary__background: var(--color-white);
        --button-primary__border: 2px solid var(--primary__color__secondary);
        --button-primary__color: var(--primary__color__secondary);
        --button-primary__text-transform: uppercase;

        --button-primary__hover__background: var(--primary__color__secondary);
        --button-primary__hover__border: 2px solid var(--primary__color__secondary);
        --button-primary__hover__color: var(--color-white);

        /* Forms */
        --form-element-input__height: 35px;
    }


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

    .announcement.wrapper {
        /* Annoucement Bar */
        --announcement__background: var(--primary__color__tertiary);
        --announcement__color: var(--primary__color);
        --announcement__font-weight: var(--font-weight__semibold);
        --announcement__padding: var(--indent__s) 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__l) var(--indent__base);

        --header-icon-font__size: 35px;
        --header-desktop-icon-font__size: 45px;

        /* Header - Ordering */
        --header-logo__order: 2;
        --header-search__order: 4;
        --header-left__order: 1;
        --header-right__order: 3;

        --header-logo-desktop__order: 1;
        --header-search-desktop__order: 3;
        --header-left-desktop__order: 2;
        --header-right-desktop__order: 4;

        /* Header - Logo */
        --header-logo__flex: 1;
        --header-logo__justify-content: flex-start;
        --header-logo__max-width: 240px;
        --header-logo__padding: 0;

        --header-logo-desktop__flex: 1;
        --header-logo-desktop__justify-content: flex-start;
        --header-logo-desktop__max-width: 500px;
        --header-logo-desktop__padding: 0;

        /* Header - Search */
        --header-search__flex: 1;
        --header-search__justify-content: center;
        --header-search__margin: var(--indent__s) -10px 0;

        --header-search-desktop__flex: 1;
        --header-search-desktop__justify-content: center;
        --header-search-desktop__margin: 0;

        /* Header - Left Container (Desktop) */
        --header-left__flex: unset;
        --header-left__justify-content: flex-start;

        --header-left-desktop__flex: unset;
        --header-left-desktop__justify-content: flex-end;

        /* Header - Right Container (Desktop) */
        --header-right__flex: unset;
        --header-right__justify-content: flex-end;

        --header-right-desktop__flex: unset;
        --header-right-desktop__justify-content: center;

        /* Header - Fixed */
        --header-fixed-desktop__border-bottom: 1px solid var(--neutral__color__light);
        --header-fixed-desktop__padding: var(--indent__s) var(--indent__base);
    }

    body.scroll-up .sections.nav-sections {
        display: none;
    }

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

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

    .block-search {
        --search-global-button__color: var(--primary__color);
        --search-global-button__border-radius: 0;
        --search-global-button__padding: 0 var(--indent__s) 0 0;

        --search-global-input__background: var(--color-white);
        --search-global-input__border: 1px solid var(--neutral__color__light);
        --search-global-input-desktop__border: 1px solid var(--neutral__color__light);
        --search-global-input__height: 56px;

        --search-global-processing__border-color: var(--primary__color__secondary);
        --search-global-processing__border-width: 2px;
        --search-global-processing__right: 20px;
        --search-global-processing__top: 16px;
        --search-global-processing__size: 23px;

        --search-global-content-desktop__background: var(--color-white);
        --search-global-content__background: var(--primary__color__tertiary);
        --search-global-content__padding: var(--indent__s);
    }

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

    .minicart-wrapper {
        --minicart-qty__background: var(--primary__color__secondary);
    }

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

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

    .nav-sections {
        --navigation-logo__max-width: 250px;
        --navigation-logo__margin: -40px 0 0;

        --navigation-container-desktop__border: 1px solid var(--neutral__color);
        --navigation-container-desktop__border-width: 1px 0;
    }

    .navigation {
        --navigation-level0-item__text-transform: uppercase;
        --navigation-level0-item__border: 1px solid var(--neutral__color__light);
        --navigation-level0-item__active__border: 1px solid var(--neutral__color__light);

        --navigation-desktop__font-size: var(--font-size__l);
        --navigation-desktop__font-weight: var(--font-weight__bold);
        --navigation-desktop__text-align: left;

        --navigation-desktop-level0-item__line-height: 70px;
        --navigation-desktop-level0-item__padding: 0 var(--indent__base);
        --navigation-desktop-level0-item__text-transform: uppercase;
        --navigation-desktop-level0-item-arrow__right: 0px;
    }

    .submenu {
        --submenu-desktop__background: var(--neutral__color__lighter);
        --submenu-desktop__border-color: var(--neutral__color__lighter);
        --submenu-desktop__padding: var(--indent__base);

        --submenu-desktop-item__padding: 8px var(--indent__s);
        --submenu-desktop-item__margin: 0 var(--indent__xs);
        --submenu-desktop-item__text-transform: uppercase;

        --submenu-desktop-item__hover__background: var(--neutral__color__lightest);
        --submenu-desktop-item__active__background: var(--neutral__color__lightest);
    }


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

    footer .list-inline {
        --link__color: var(--color-white);
    }

    /*  Payment Logos  */
    .block.payment-logos {
        --icon-font__color: var(--color-white);
        --icon-font__hover__color: var(--color-white);
        --icon-font__active__color: var(--color-white);
    }

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


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

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

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

    .product-item {
        --product-item__background: var(--color-white);
    }

    .product-item-name {
        --product-name__text-transform: uppercase;
    }

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

    /*  Filter / Layered Navigation  */
    .block.filter {
        --filter-block__border-width: 1px;
        --filter-subtitle__padding: var(--indent__s) var(--indent__base);
        padding: 0 !important;
        border-color: var(--border-color__base) !important;
    }

    /*  Toolbar  */
    .toolbar {
        --toolbar__border-width: 1px;
        --toolbar__padding: 0 var(--indent__base);
    }

    /*  Pager  */
    .pages {
        --pager__border: 1px solid var(--primary__color__secondary);
        --pager__hover__border: var(--pager__border);

        --pager-current__background: var(--primary__color__secondary);
        --pager-current__color: var(--color-white);

        --pager-action__border-radius: 100%;
    }

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

    /*  Image Gallery  */
    .product.media {
        --gallery-arrow__background-color: transparent;
        --gallery-arrow__color: var(--primary__color__secondary);
    }

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

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

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

    .block.widget,
    .block-products-list,
    .block.related,
    .block.crosssell {
        --widget-block-title__border: 0;
        --widget-block-title__font-size: var(--font-size__xl);
        --widget-block-title__font-weight: var(--font-weight__regular);
        --widget-block-title__padding: var(--indent__l) 0 var(--indent__base);
        --widget-block-title__justify-content: center;
        --widget-block-title__text-align: center;
        --widget-block-title__text-transform: uppercase;
    }

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

    .sidebar {
        --sidebar-block__border-width: 1px;
        --sidebar-block__padding: var(--indent__base);
    }


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

    .featured-categories-list {
        --featured-categories-list-item__background-color: var(--color-white);
        --featured-categories-list-item__border: 1px solid var(--border-color__base);
        --featured-categories-list-item__align-items: flex-start;

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


    .featured-categories-grid {
        --featured-categories-grid-desktop-large__columns: 6;

        --featured-categories-grid-item__border: 0;
        --featured-categories-grid-item-image-desktop__width: 80%;

        --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;
    }

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

    .footer-newsletter h3 {
        text-transform: none;
        font-size: var(--font-size__xl);
    }

    .block.newsletter {
        --newsletter__padding: 0;

        --newsletter-block-title__font-size:  var(--font-size__xl);
        --newsletter-block-title__font-weight: var(--font-weight__regular);
        --newsletter-block-title__margin: 0;
        --newsletter-block-title__padding: 0;

        --newsletter-button__background: var(--primary__color__tertiary);
        --newsletter-button__border: 2px solid var(--color-white);
        --newsletter-button__color: var(--text__color);

        --newsletter-input__border: 0;
        --newsletter-input__height: 50px;
        --newsletter-desktop__max-width: 100%;
    }

/* ==========================================================================
    Custom Styles
    ========================================================================== */

    .yotpo-yotpo-is-enabled div.yotpo.bottomLine.bottomline-position {
        margin: 10px 10px 10px 0;
    }

    /* Page Builder - Responsive Columns */
    @media only screen and (max-width: 768px) {
        .pagebuilder-column.col-sm-6 {
            flex-basis: 50%;
        }

        .pagebuilder-column.col-sm-4 {
            flex-basis: 33.3333333%;
        }
    }

    @media only screen and (max-width: 480px) {
        .pagebuilder-column.col-xs-6 {
            flex-basis: 50%;
        }
    }

    @media only screen and (max-width: 320px) {
        .pagebuilder-column {
            flex-basis: 100% !important;
        }

        .pagebuilder-column.col-xxs-6 {
            flex-basis: 50%;
        }
    }