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

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

        /* Colors */
        --primary__qmnetwork__color: #E50278;
        --primary__annualpass__color: #802a8d;
        --primary__cobbandco__color: #009F93;
        --primary__rail__color: #EB273F;
        --primary__mtq__color: #48C3D3;

        --primary__color: var(--primary__qmnetwork__color);
        --primary__color__secondary: var(--primary__qmnetwork__color);

        --neutral__color__darkest: #000000;
        --neutral__color__darker: #272727;
        --neutral__color__dark: #707070;
        --neutral__color: #BCBEC0;
        --neutral__color__light: #D1D3D4;
        --neutral__color__lighter: #F2F2F2;
        --neutral__color__lightest: #f8f8f8;

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

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

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

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

        /* 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: 0 1px 3px 1px rgba(0, 0, 0, 0.12);

        /* Icons */
        --icon-font__color: var(--neutral__color__darker);
        --icon-font__hover__color: var(--neutral__color__dark);
        --icon-font__active__color: var(--neutral__color__dark);

        /* Button - Default */
        --button__background: var(--neutral__color__light);
        --button__border: 0;
        --button__box-shadow: var(--box-shadow__base);
        --button__font-weight: var(--font-weight__regular);

        --button__hover__background: var(--neutral__color__lighter);

        /* Button - Primary */
        --button-primary__background: var(--neutral__color__dark);
        --button-primary__border: 1px solid var(--neutral__color__dark);
        --button-primary__color: var(--color-white);

        --button-primary__hover__background: var(--neutral__color__lightest);
        --button-primary__hover__border: 1px solid var(--neutral__color__light);
        --button-primary__hover__color: var(--text__color);
    }

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

    .announcement.wrapper {
        --announcement__background: var(--neutral__color__darker);
        --announcement__color: var(--color-white);

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

    header {
        /* Header - Globals */
        --page-header__background-color: var(--neutral__color__darkest);
        --header__background-color: var(--neutral__color__darkest);
        --header__color: var(--color-white);
        --header__line-height: 50px;
        --header__padding: var(--indent__base) var(--indent__base) 0;
        --header-desktop__padding: var(--indent__xl) var(--indent__base);

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

        /* 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: 2;
        --header-left-desktop__order: 3;
        --header-right-desktop__order: 4;

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

        --header-logo-desktop__flex: 0.6;
        --header-logo-desktop__justify-content: flex-start;
        --header-logo-desktop__max-width: 210px;
        --header-logo-desktop__padding: 0;

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

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

        /* Header - Left Container */
        --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 */
        --header-right__flex: 1;
        --header-right__justify-content: flex-end;

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

        /* Header - Fixed */
        --header-fixed__padding: var(--indent__base) var(--indent__base) 0;
        --header-fixed-desktop__padding: var(--indent__base);
    }

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

        /* Page Titles */
        --page-title__color: var(--color-white);
        --page-title__font-weight: var(--font-weight__regular);

        /* Icons */
        --icon-font__color: var(--color-white);
        --icon-font__hover__color: var(--color-white);
        --icon-font__active__color: var(--color-white);
    }

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

    .block-search {
        --search-global__color: var(--neutral__color__darkest);

        --search-global-button__color: var(--neutral__color__darkest);
        --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__darkest);
        --search-global-input-desktop__border: 1px solid var(--neutral__color__darkest);
        --search-global-input__height: 45px;

        --search-global-processing__border-color: var(--neutral__color__darkest);
        --search-global-processing__border-width: 2px;
        --search-global-processing__right: 20px;
        --search-global-processing__top: 12px;
        --search-global-processing__size: 20px;

        --search-global-content-desktop__background: var(--neutral__color__darker);
        --search-global-content__background: var(--neutral__color__darker);
        --search-global-content__padding: var(--indent__s) var(--indent__base);
    }

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

    .account-menu-wrapper {
        --account-links__color: var(--color-white);
        --account-links-desktop__font-size: inherit;

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

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

    .minicart-wrapper {
        --minicart-qty__border-radius: 0;

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

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

    .contact-link {
        --contact-phone__display: flex;
        --contact-phone__display-desktop: flex;
        --contact-phone__color: var(--color-white);

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

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

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

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

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

        --navigation-close-icon__color: var(--color-white);

        --navigation-container__padding: 0;
        --navigation-container__background:  var(--neutral__color__darkest);
        --navigation-container-desktop__background: var(--neutral__color__darker);
    }

    .navigation {
        --navigation__background: var(--neutral__color__darker);

        --navigation-level0-item__background: var(--neutral__color__darker);
        --navigation-level0-item__border: 1px solid var(--neutral__color__dark);
        --navigation-level0-item__color: var(--color-white);
        --navigation-level0-item__font-size: var(--font-size__base);
        --navigation-level0-item__font-weight: var(--font-weight__regular);
        --navigation-level0-item__text-transform: uppercase;

        --navigation-level0-item__active__background: var(--neutral__color__dark);
        --navigation-level0-item__active__border: 1px solid var(--neutral__color__dark);
        --navigation-level0-item__active__color: var(--color-white);

        --navigation-level0-item-arrow__color: var(--color-white);

        --navigation-desktop__font-size: var(--font-size__base);
        --navigation-desktop__font-weight: var(--font-weight__regular);
        --navigation-desktop__text-align: left;

        --navigation-desktop-level0-item__color: var(--color-white);
        --navigation-desktop-level0-item__line-height: 50px;
        --navigation-desktop-level0-item__padding: 0 var(--indent__l);
        --navigation-desktop-level0-item__text-transform: uppercase;

        --navigation-desktop-level0-item-arrow__color: var(--color-white);
        --navigation-desktop-level0-item-arrow__right: 5px;

        --navigation-desktop-level0-item__hover__background: var(--neutral__color__dark);
        --navigation-desktop-level0-item__hover__color: var(--color-white);
    }

    .submenu {
        --submenu-desktop__padding: var(--indent__base);

        --submenu-item__border: 1px solid var(--border-color__base);

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


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

    footer {
        --footer__background-color: var(--neutral__color__light);
        --footer__text-transform: normal;

        --list-inline-item__separator: 1px solid var(--text__color);
    }

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


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

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

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

    .product-item {
        --product-item__background: var(--color-white);
        --product-item__border: 1px solid var(--border-color__base);
        --product-item__box-shadow: var(--box-shadow__base);
        --product-item__margin: 0 0 var(--indent__s);
        --product-item__padding: var(--indent__s);
    }

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

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

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

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

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

        --pager-current__background: var(--primary__color);
        --pager-current__border: 1px solid var(--primary__color);
        --pager-current__color: var(--color-white);
    }

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

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

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

/* ==========================================================================
    Cart / Checkout
    ========================================================================== */

    .checkout-header {
        --icon-font__color: var(--color-white);
        --icon-font__hover__color: var(--color-white);
        --icon-font__active__color: var(--color-white);
        --page-title__color: var(--color-white);
    }

/* ==========================================================================
    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.crosssell {
        --widget-block-title__border: 0;
        --widget-block-title__font-size: var(--font-size__xl);
        --widget-block-title__font-weight: var(--font-weight__bold);
        --widget-block-title__padding: var(--indent__s);
        --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__box-shadow: var(--box-shadow__base);
        --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__box-shadow: var(--box-shadow__base);
        --featured-categories-list-item__align-items: flex-start;
        --featured-categories-list-item__padding: var(--indent__l);

        --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 {
        --featured-categories-grid-desktop-large__columns: 5;

        --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-input__border: 0;
        --newsletter-input__height: 50px;
        --newsletter-desktop__max-width: 100%;
    }

/* ==========================================================================
    QM Annual Pass (Custom CSS
    ========================================================================== */

    .annual-pass-landing .container {
        box-shadow: var(--box-shadow__base);
        margin-bottom: var(--indent__xl);
    }

    .annual-pass-landing img {
        display: unset;
    }

    .annual-pass-landing text-center {
        text-align: center;
    }

    .annual-pass-landing .action.primary {
        margin-top: var(--indent__l);
        padding: var(--indent__s) var(--indent__base);
        display: block;
    }

    .annual-pass-landing .box-title {
        color: var(--color-white);
        background-color: var(--primary__annualpass__color);
        padding: var(--indent__s) var(--indent__l);
        text-transform: uppercase;
        margin-top: 0;
    }

    .annual-pass-landing .box-content {
        padding: var(--indent__base) var(--indent__l);
    }

    .annual-pass-landing .box-content strong {
        font-size: var(--font-size__l);
        text-transform: uppercase;
    }

    .annual-pass-landing .box-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .annual-pass-landing .box-content ul.pricing li {
        margin-bottom: var(--indent__base);
    }

    .annual-pass-landing .icon-tick {
        border: 3px solid var(--primary__annualpass__color);
        border-radius: 100%;
        margin-right: var(--indent__base);
        min-width: 40px;
        min-height: 40px;
        text-align: center;
    }

    .annual-pass-landing .icon-tick:before {
        font-size: 20px;
        line-height: 35px;
    }

    .annual-pass-landing.cobbandco {
        --primary__annualpass__color: var(--primary__cobbandco__color);
    }

    .annual-pass-landing.railmuseum {
        --primary__annualpass__color: var(--primary__rail__color);
    }

    .annual-pass-landing.mtq {
        --primary__annualpass__color: var(--primary__mtq__color);
    }

    .action.annual-pass-member-button {
        display: inline-block;
        text-decoration: none;
        background-image: none;
        background: var(--button__background);
        border: var(--button__border);
        border-radius: var(--button__border-radius);
        box-shadow: var(--button__box-shadow);
        color: var(--button__color);
        cursor: pointer;
        font-family: var(--button__font-family);
        font-weight: var(--button__font-weight);
        margin: 20px 0 10px;
        padding: var(--button__padding);
        text-transform: var(--button__text-transform);
        font-size: var(--button__font-size);
        line-height: var(--button__line-height);
        box-sizing: border-box;
        vertical-align: middle;
    }

    .product-options-wrapper .fieldset-product-options-inner .legend {
        font-weight: normal;
    }