:root {
    --logo-size: 60px;
    --header-offset: 132px;
    --header-height:92px;
    --header-search-height:24px;
    --header-margin: 30px; 
    --header-icon-size:20px;
    --header-notice-height: 40px;
    --submenu-width: 280px;
    --submenu-height: 212px; 
    --submenu-offset: 147px;
    --submenu-padding: 16px;

    /* Minicart */
    --minicart-width: 400px;
  
    --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
    --transition-border: 0.3s ease-out border-color;
    --transition-color: 0.3s ease-out color;
    --transition-transform: 0.3s ease-out transform;
    --transition-backdrop-filter: 0.3s ease-out backdrop-filter;
}

/* Move to main CSS */
.f-40 { font-size: 40px; }

/* Structure */
body { padding-top:var(--header-offset) !important; }
.content { margin-top: 0 !important; }

/* Header */
.header { left: 0; right: 0; top:0 !important; z-index: 2; -webkit-user-select: none; user-select: none; }
.header-container { padding: 16px var(--container-padding); height: var(--header-height); }
.header svg { width: 100%; height: 100%; }
.header-logo, .header-logo a { width: var(--logo-size); height: var(--logo-size);  }
.header-logo { margin-right: var(--header-margin); color: var(--black); }

/* 40 Years */
.header-logo.is-40-years { width: 201px; height: 60px; border-right: 1px solid var(--light-grey); padding-right: 30px; margin: auto 30px auto 0; display:flex; }
.header-logo.is-40-years a { width:170px; height:42px; margin:auto 0; }

/* Menu : Primary */
.menu-primary { grid-gap: var(--header-margin); margin-right: var(--header-margin); }
.menu-primary .icon-arrow-right { width: 16px; height: 16px; position: absolute; top: 0; right: 0; bottom: 0; margin: auto 0; color: inherit; transition: var(--transition-transform); }
.menu-primary-item { margin:auto 0; }
.button-show-menu { display: none; }

/* Menu : Secondary */
.menu-secondary { grid-gap: 24px; }
.menu-secondary-item { margin:auto 0; }
.menu-secondary-item svg, .menu-secondary-item-count { width: var(--header-icon-size); height: var(--header-icon-size); margin: auto auto 4px auto; }
.menu-secondary-item-count { background:var(--grey); color:var(--white); text-align: center; line-height: var(--header-icon-size); font-size: 10px; border-radius: 50%; }
.menu-secondary-item.is-active { color:var(--black); }
.menu-secondary-item:hover .menu-secondary-item-count { background:var(--black); color:var(--white); }
.menu-secondary-item:hover .topbadge { color:var(--white) !important; }

/* Menu : Submenu */
.menu-submenu-page, .menu-submenu { position: fixed; background: var(--white); top: var(--submenu-offset); display: none; color: var(--grey); }
.menu-submenu-page-inner { width:100%; }
.menu-submenu { min-width: var(--submenu-width); overflow: auto; border-left: 1px solid var(--light-grey); padding: 10px 0; min-height: var(--submenu-height); }
.menu-submenu-item { padding: 0 var(--submenu-padding); line-height: 24px; }
.menu-submenu-item a { display: flex; position: relative; }
.menu-submenu-item .icon-logo { width: 24px; height: 24px; margin: auto 0 auto auto; }
.menu-submenu-item.has-submenu .icon-logo { margin-right:24px; }
.menu-submenu::-webkit-scrollbar { width: 12px; }
.menu-submenu::-webkit-scrollbar-thumb { background: var(--black); border-left:8px solid #FFF; }
.menu-submenu::-webkit-scrollbar-track { background: var(--white); }

/* Menu : Submenu : Page */
.menu-submenu-page { left:var(--container-padding); right: var(--container-padding); grid-gap:16px; padding: 16px; }
.menu-submenu-page .swiper { padding: 0; max-width:calc(100vw - 128px); min-width:100%; }
.menu-submenu-page .swiper-journal { max-width:calc(calc(100vw - 128px) * 0.8); min-width:80%; }
.menu-submenu-page-link { aspect-ratio: 4/3; background: var(--light-grey); overflow:hidden; } 
.menu-submenu-page-link span { bottom: 0; left: 0; right: 0; line-height: normal; padding: 11px 16px; color: #FFF; }
.menu-submenu-page-link img { height: 100%; width: 100%; object-fit: cover; }
.menu-submenu-page-link strong { display: block; }
.menu-submenu-page .swiper-slide { aspect-ratio: 4/3; }
.menu-submenu-page .swiper-button-next,
.menu-submenu-page .swiper-button-prev { top: 0; margin: auto 0; height: 44px; width: 44px; background: #FFF; padding: 16px; } 
.menu-submenu-page .swiper-button-next { right:0; }
.menu-submenu-page .swiper-button-prev { left:0; }
.menu-submenu-page .swiper-button-disabled { opacity: 0; }
.menu-submenu-page .swiper-button-next:after, .menu-submenu-page .swiper-button-prev:after { font-size: 16px; }

/* Menu : Submenu : Journal Categories */
.menu-submenu-page-categories { min-width: calc(calc(100% - 64px) * 0.2); margin-top: -6px; }
.menu-submenu-page-categories .menu-submenu-item { padding-left: 0; padding-right: 0; }

/* Menu : State */
.menu-primary-item.is-active > a, .menu-submenu-item.is-active > a  { color: var(--black); }
.menu-primary-item.is-active > .menu-submenu, .menu-submenu-item.is-active > .menu-submenu { display: block; }
.menu-submenu-item.is-active > a .icon-arrow-right { transform: rotate(180deg);} 
.menu-primary-item.is-active > .menu-submenu-page { display: flex; z-index: 1;}
.show-menu .button-chat { visibility:hidden; pointer-events:none;}

/* Search */
.header-search { margin: auto auto auto 0; height: var(--header-search-height); flex:1; max-width: 220px; }
.header-search form { height:100%; }
.header-search-input { line-height: var(--header-search-height); height: 100%; background: transparent; padding: 0; text-indent: 24px; color: currentColor; font-weight: bold; font-size:20px; }
.header-search-button { width: var(--header-search-height); height: var(--header-search-height); top:0; left: 4px; background-color: transparent; color:inherit; transition: var(--transition-color);}
.header-search-button svg { width: 16px; height:16px; margin: auto auto auto 0; }

/* Notice */
.header-notice { border-bottom: 1px solid transparent; width: 100%; line-height: var(--header-notice-height); padding: 0 var(--container-padding); }
.header-notice a { display: inline-block; }
.header-notice .underline  { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--light-grey); }
.header-notice-messages.swiper { min-height: 0; min-width: 0; height: var(--header-notice-height); margin:0 auto 0 0; text-align: left; }
.header-notice-message a { margin-left: 12px; }
.header-professionals { margin-left: 10px; padding-right: 0; }
.header-notice.is-white { background:var(--white); color:#6e6e6e; border-bottom-color:var(--light-grey); }
.header-notice.is-light-grey { background:#c8c8c8; color:var(--black); }
.header-notice.is-mid-grey { background:#6e6e6e; color:var(--white); }
.header-notice.is-dark-grey { background:#3c3c3c; color:var(--white); }
.header-notice.is-black { background:var(--black); color:var(--white); }

/* Mask */
.header-mask { top:0; bottom: 0; left: 0; right: 0; background-color:rgba(0,0,0,0.25); z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition-fade), var(--transition-backdrop-filter) }
.header-mask.is-active { pointer-events: all; opacity: 1; visibility: visible;}

/* Mobile Minimal */
.menu-mobile-secondary { display: none; }

/* Homepage  */
body.template-index { padding-top:0 !important; }

/* Homepage : Transparent Header */
.has-transparent-header .header { background-color: transparent; }
.has-transparent-header .header .menu-secondary-item-count { color:var(--white); }
.has-transparent-header .header .menu-secondary-item:hover .topbadge { color:#FFF !important; }
.has-transparent-header .menu-secondary-item .topbadge { color:#FFF !important; }

/* Homepage : Transparent Header : White */
.has-transparent-header .header.is-white { color: var(--white); }
.has-transparent-header .header.is-white .header-logo { color: var(--white); }
.has-transparent-header .header.is-white .menu-secondary .topbadge { color:#000 !important; }
.has-transparent-header .header.is-white .menu-secondary-item-count { background:var(--white); color:var(--black); }
.has-transparent-header .header.is-white .menu-secondary-item:hover .menu-secondary-item-count { background:var(--black); color:var(--white); }

/* Homepage : Transparent Header : Black */
.has-transparent-header .header.is-black { color:var(--black); }
.has-transparent-header .header.is-black .header-logo.is-40-years { border-color:var(--black); }
.has-transparent-header .header.is-black .menu-secondary-item-count { background:var(--black); color:var(--white); }

/* ==========================================================================
	Wishlist
   ========================================================================== */
.topbadge { width: 20px !important; height: 20px !important; display: inline-block; padding: 0 !important; line-height: 20px; vertical-align: top; }
.menu-secondary .topbadge { line-height:20px !important; background:transparent !important; color:#FFF !important; font-size:10px !important; border-radius:0!important; left: 0 !important; right: 0 !important; margin: auto !important; position:absolute !important; }

/* ==========================================================================
	Mini Cart
   ========================================================================== */
.header-minicart { max-width: var(--minicart-width); top: var(--submenu-offset); right: var(--container-padding); left: var(--container-padding); z-index: 1; padding: var(--submenu-padding); display:none; margin-left:auto; }
.header-minicart.is-visible { display:block; }
.minicart-header { margin-bottom:var(--submenu-padding); }
.minicart-footer { padding-top:var(--submenu-padding); }
.minicart-footer .button { width:100%; text-align:center; }
.minicart-scroll { max-height: 322px; overflow: auto; -webkit-overflow-scrolling:touch; }
.minicart-item p { margin-bottom:0; }
.minicart-item td { border-bottom:1px solid #c7c7c7; padding-bottom:16px; padding-top:8px; position:relative; }
.minicart-item:first-child td { padding-top:0; }
.minicart-item:last-child td { padding-bottom:8px; border-bottom:0; }
.minicart-image { width:180px; vertical-align:top; }
.minicart-product { vertical-align:top; padding-left:8px; line-height:1; position: relative; }
.minicart-product-title { color:#000000; }
.minicart-product-options, .minicart-price, .minicart-giftwrap { color:#6e6e6e; }
.minicart-remove { width:16px; height:16px; border-radius:50%; background:#000; margin-top:8px; display: block; } 
.minicart-remove svg { width:8px; height:8px; margin:4px; color:#FFF; }
.minicart-table { padding-bottom:8px; width:100%; }
.minicart-empty { display:none; }
.minicart-giftwrap { margin-top:8px; }
.minicart-giftwrap svg { margin-bottom:-1px; fill:currentcolor; } 
.is-empty .minicart-table { display:none; }
.is-empty .minicart-empty { display:block; }
.is-empty .minicart-footer { opacity:0.5; pointer-events:none; }
.button-minicart-close { width:44px; height:44px; margin:-7px -15px auto auto;}

/* ==========================================================================
	Localisation
   ========================================================================== */
.header-localisation { max-width: var(--minicart-width); top: var(--submenu-offset); right: var(--container-padding); left: var(--container-padding); z-index: 1; padding: 9px var(--submenu-padding) var(--submenu-padding) var(--submenu-padding); margin-left:auto; }
.localisation-header { margin-bottom:var(--submenu-padding); }
.localisation-scroll { max-height: 322px; overflow: auto; -webkit-overflow-scrolling: touch; line-height:2; }
.localisation-scroll::-webkit-scrollbar { width: 4px; }
.localisation-scroll::-webkit-scrollbar-track { background:#FFF; }
.localisation-scroll::-webkit-scrollbar-thumb { background-color: #000; }
.button-localisation-close { width:44px; height:44px; margin:0px -15px auto auto;}
.menu-secondary-item-region { text-align:center; }

/* Search */
.localisation-search { background: #FFF; padding: 0; text-indent: 0; margin: 0; height: 43px; line-height: 43px; color:var(--black); }
.localisation-search::placeholder { color:var(--grey); }

/* ==========================================================================
	Search Results
   ========================================================================== */
.layout-predictive-search-results { top: var(--submenu-offset); right: var(--container-padding); left: var(--container-padding); z-index: 1; padding: var(--submenu-padding); }
.predictive-search-results-collections { flex-wrap: wrap; margin-bottom:16px; }
.predictive-search-results-collection { margin-right:16px; margin-top:16px; align-items: center; }
.predictive-search-results-collection-image { width:40px; min-width:40px; height:40px; border-radius:50%; overflow:hidden; margin-right:8px; }
.predictive-search-results-collection-image img { height:100%; object-fit:cover; }
.predictive-search-results-view-all { display: block; width: 100%; text-align: left; padding: 16px 0 0 0; margin-top: 16px; }

@media (hover: hover) { 

    /* Header Notice */
    .header a { transition: var(--transition-color); }
    .header a:hover { color:var(--black); }
    .header .is-black a:hover { color:var(--white); }
  
    /* Submenu : Page */
    .menu-submenu-page-link img { transition: var(--transition-transform); }
    .menu-submenu-page-link:hover img { transform: scale(1.1); }
}

@media screen and (min-width:1023px) {
    /* Desktop */
    .button-show-menu { display: none; }
}

@media screen and (min-width:1024px) and (max-width:1440px) {
    /* Menu : Submenu : Journal Categories */
    .menu-submenu-page-categories { min-width: calc(calc(100% - 64px) * 0.25); }
    .menu-submenu-page .swiper-journal { max-width:75%; min-width:75%; }
}

@media screen and (min-width:661px) and (max-width:1240px) {
  /* Predictive Search */
  .predictive-search-results-products { grid-template-columns: repeat(4, 1fr); }
  .predictive-search-results-products .product:nth-of-type(5), .predictive-search-results-products .product:nth-of-type(6) { display:none; }
}

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

    :root {
        --header-offset: 187px;
        --header-height:146px;
        --container-padding: 32px;
        --submenu-width: calc(calc(100% - 64px) / 3 );
        --submenu-offset: 203px;
    }

    /* Header */
    .header-container { flex-wrap: wrap; }

    /* Menu */
    .menu-primary {order: 4; width: 100%; height: 37px; margin-right: 0; margin-top: 16px; font-size: 20px; }
   
    /* Menu : Submenu : Journal Categories */
    .menu-submenu-page-categories { min-width: calc(calc(100% - 64px) * 0.333); }
    .menu-submenu-page .swiper-journal { max-width:66.666%; min-width:66.666%; }
}

@media screen and (min-width:660px) {

    /* Header Notice */
    .header-notice-message span, .header-notice-message a { padding: 0 20px 0 0; }

    /* Header */
    .header-mobile-divider  { display: none; }
    .menu-secondary-item-search { display: none; }

    /* Homepage : Transparent Header : White */
    .has-transparent-header .header.is-white .menu-primary-item > a { color:var(--white); }
    .has-transparent-header .header.is-white .menu-primary-item > a:hover { color:var(--black); }
    .has-transparent-header .header.is-white .menu-secondary { color: var(--white); }
    
    /* Menu : Primary */
    .menu-primary-item > a svg { display: none; }

    /* Submenu */
    .menu-submenu-item-back { display: none; }
    .menu-submenu { left:var(--container-padding); } 
    .menu-submenu .menu-submenu { left:calc(var(--submenu-width) * 1 + var(--container-padding)); }
    .menu-submenu .menu-submenu .menu-submenu { left:calc(var(--submenu-width) * 2 + var(--container-padding)); }
    .menu-submenu-page-inner-height { display:flex; width: 100%; }
  
    /* Mobile Minimal */
    .mobile-minimal .menu-primary-item > a > svg { display: none ;}

}
@media screen and (max-width:660px) {
    :root {
        --header-offset:137px;
        --header-height:92px;
        --header-notice-height:45px;
        --container-padding: 20px;
        --submenu-height : 369px;
        --submenu-offset: calc(var(--header-offset) + 16px);
    }

    /* Move to main styles */
    .f-40 { font-size:30px; }

    /* Menu */
    .menu-primary { position: fixed; display: none; flex-direction: column; background: #FFF; color:var(--grey); height: auto; margin: 0; left: var(--container-padding); right: var(--container-padding); top:  var(--submenu-offset); grid-gap: 0; width: auto; padding:7px 16px 16px 16px;}
    .menu-primary-item { margin: 0; line-height: 1.75; }
    .menu-primary-item > a {  display: block; position: relative ;}
    .button-show-menu {  order: 0; margin: auto 0 auto 0; font-size: 14px; display: inline-flex; height: var(--header-search-height); line-height: var(--header-search-height);}
    .button-show-menu span { width: 20px; height: 10px; margin: auto 8px auto 0; font-size: 0; position: relative; }
    .button-show-menu span:before, .button-show-menu span:after { content:''; height: 2px; background-color: var(--grey); width: 20px; position:absolute; left:0; transition: var(--transition-transform); }
    .button-show-menu span:before { top:0; }
    .button-show-menu span:after { bottom: 0; }
    .show-menu { position:fixed; top:0; left:0; right:0; }
    .show-menu .button-show-menu span:before { transform: rotate(45deg) translate(3px, 2.5px); }
    .show-menu .button-show-menu span:after { transform: rotate(-45deg) translate(3px, -2.5px); }

    /* Menu : Secondary */
    .menu-secondary { margin-left: auto; grid-gap:16px; font-size: 0; }
    .menu-secondary-item svg,
    .menu-secondary-item-count { margin-bottom: 0;}
    .menu-secondary-item-account,
    .menu-secondary-item-wishlist,
    .menu-secondary .menu-secondary-item-region  { display: none; }

    /* Menu : Secondary : Mobile */
    .menu-mobile-secondary { display: flex; padding: 0; flex-direction: column; line-height: 1.75; border-top: 1px solid var(--light-grey); margin: 16px 0; padding-top: 16px; }
    .menu-mobile-secondary-item { display:flex; }
    .menu-mobile-secondary-item svg { margin:auto 8px auto 0; width: 30px; height: 30px; }
    .menu-mobile-secondary:last-of-type { margin:0; }
    .menu-mobile-secondary .topbadge { min-width: 20px; min-height: 20px; display: inline-block; line-height: 20px; margin: auto 0 auto auto; }

    /* Menu : Submenu */
    .menu-submenu { left: var(--container-padding); right:var(--container-padding); z-index: 1; top: var(--submenu-offset); bottom:0; padding: 7px 16px 16px 16px; border:0; font-size:20px; }
    .menu-submenu-item {  padding: 0; line-height: 1.75; }
    .menu-submenu-item-back { border-bottom: 1px solid var(--light-grey); font-size: 20px; margin: 0 0 20px 0; padding: 0; }
    .menu-submenu-item-back button {font-size: 20px; display: flex; position: relative; padding-bottom: 17px; width: 100%; text-align: left; font-weight: bold; line-height: 1.75; }
    .menu-submenu-item-back .icon-arrow-right { right: 0; left: auto; transform: rotate(180deg);  margin-top: 0 !important; top:9px !important; }

    /* Menu : Submenu : Page */
    .menu-submenu-page { flex-direction: column; padding-top:7px; min-height: var(--submenu-height); max-height:calc( 100% - 170px); }
    .menu-submenu-page .swiper { max-width: 100%; }
    .menu-submenu-page-inner { overflow:scroll; flex-direction:column; }
  
    /* Menu : Submenu : Journal */
    .menu-submenu-page .swiper-journal { margin-top:16px; }
    .menu-submenu-page-journal { min-height:none; }
    .menu-submenu-page-categories { font-size:20px; }
  
    /* Menu : State */
    .show-menu .menu-primary { display:flex; }
    .show-search .header-search { display: block; }

    /* Header */
    .header-logo { left: 0; right: 0; position: absolute; margin: auto; top:0; bottom: 0; }

    /* 40 Years */
    .header-logo.is-40-years { width: 170px; height: 42px; border-right:0; padding-right: 0; margin: auto; }
  
    /* Header Notice */
    .header-notice .header-professionals, .header-notice .header-shop { display: none; }
    .header-notice-messages.swiper { margin: auto; text-align: center; }
  
    /* Header Search */
    .header-search { order: 4; margin-right: 0; font-size: 14px; display: none; top: var(--header-offset); position: fixed; left: 0; padding: 0 var(--container-padding) 8px var(--container-padding); height: 48px; background: #FFF; right: 0; min-width: 100%; display: none; }
    .header-search-button { left:8px; top: 8px; }
    .header-search-input[type=text] { padding: 0 16px 0 8px; background: var(--light-grey); color: var(--grey); }
    .has-transparent-header .header-search { background:transparent; color:var(--grey); }
    .has-transparent-header .button-show-menu span:before, 
    .has-transparent-header .button-show-menu span:after { background:currentColor; }

    /* Predictive Search */
    .layout-predictive-search-results { top:201px; bottom:16px; overflow:auto; z-index:100; }
    .predictive-search-results-products { grid-template-columns: repeat(1, 1fr); }
    .predictive-search-results-products .product { display:grid; grid-template-columns: 40% auto; grid-gap:16px; }
    .predictive-search-results-products .collection-swatches { display:none; }
    .predictive-search-results-products .product-roundels { display:none; }
    .predictive-search-results-products .image-container { margin-bottom:0; }

    /* Header Localisation */
    .header-localisation { max-width:none; }
    .menu-secondary-item-region { text-align: left; }
}