/*
 * ONYX header 1.3.9
 *
 * CSS-only reflow of the native Classic header. The template keeps the
 * original PrestaShop hooks and markup, so a missing stylesheet falls back
 * to Classic instead of placing module output over the page content.
 */

@media (min-width: 768px) {
  #header {
    display: grid;
    grid-template-columns:
      minmax(24px, 1fr)
      minmax(155px, 205px)
      clamp(22px, 3.2vw, 36px)
      minmax(360px, 680px)
      clamp(28px, 3.8vw, 42px)
      minmax(190px, max-content)
      minmax(24px, 1fr) !important;
    grid-template-areas:
      'banner banner banner banner banner banner banner'
      'topbar topbar topbar topbar topbar topbar topbar'
      '. logo . search . actions .'
      '. menu menu menu menu menu .';
    grid-template-rows: auto auto minmax(86px, auto) auto;
    column-gap: 0;
    align-items: center;
    background: var(--aq-white, #fbfcfc);
  }

  #header > .header-banner {
    grid-area: banner;
  }

  #header > .aq-topbar {
    grid-area: topbar;
    align-self: stretch;
    min-width: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  #header > .aq-topbar .container {
    display: flex;
    align-items: center;
    min-height: 36px;
    width: 100%;
    max-width: none;
    padding-right: 18px;
    padding-left: 18px;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  /* Flatten only the structural Classic wrappers into the shared grid. */
  #header > .header-nav,
  #header > .header-nav > .container,
  #header > .header-nav > .container > .row,
  #header > .header-nav > .container > .row > .hidden-sm-down,
  #header > .header-top,
  #header > .header-top > .container,
  #header > .header-top > .container > .row,
  #header > .header-top > .container > .row > .header-top-right {
    display: contents;
  }

  /* Classic gives the first header-top row a more specific flex rule. */
  #header .header-top > .container > .row:first-of-type {
    display: contents;
  }

  /* The native displayNav1 phone shares the top-bar row. */
  #header > .header-nav > .container > .row > .hidden-sm-down > .col-md-5 {
    grid-row: 2;
    grid-column: 4;
    z-index: 2;
    justify-self: end;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--aq-white, #fbfcfc);
  }

  #header #_desktop_contact_link,
  #header #_desktop_contact_link #contact-link {
    margin: 0;
    padding: 0;
    color: var(--aq-white, #fbfcfc);
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
  }

  #header #_desktop_contact_link a {
    color: var(--aq-white, #fbfcfc);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  #header #_desktop_logo {
    grid-area: logo;
    align-self: center;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #header #_desktop_logo h1 {
    margin: 0;
    line-height: 1;
  }

  #header #_desktop_logo a {
    display: inline-flex;
    align-items: center;
  }

  #header #_desktop_logo .logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 48px;
    margin: 0;
  }

  #header .header-top .header-top-right #search_widget {
    grid-area: search;
    align-self: center;
    justify-self: center;
    float: none;
    clear: none;
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 0;
  }

  #header .header-top .header-top-right #search_widget form {
    min-height: 50px;
    border-color: #879195;
    border-radius: 2px;
    background: #fff;
  }

  #header .header-top .header-top-right #search_widget form input[name='s'] {
    height: 48px;
    padding-left: 1rem;
    font-size: 15px;
  }

  #header .header-top .header-top-right #search_widget form:focus-within {
    border-color: var(--aq-brass, #806537);
    outline: 2px solid rgba(128, 101, 55, .22);
    outline-offset: 1px;
  }

  #header > .header-nav > .container > .row > .hidden-sm-down > .right-nav {
    grid-area: actions;
    display: flex;
    align-self: center;
    align-items: stretch;
    justify-self: end;
    justify-content: flex-end;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #header > .header-nav .right-nav > div {
    float: none;
    width: auto;
  }

  #header > .header-nav .right-nav .user-info,
  #header > .header-nav .right-nav .blockcart,
  #header > .header-nav .right-nav .blockcart .header {
    height: 100%;
  }

  #header > .header-nav .right-nav .user-info {
    margin: 0 !important;
  }

  #header > .header-nav .right-nav .blockcart {
    margin: 0 !important;
    padding: 0 !important;
  }

  #header > .header-nav .right-nav .blockcart .header {
    /* An empty Classic cart has no <a>; align the shared container too. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 50px;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #header > .header-nav .right-nav .user-info a,
  #header > .header-nav .right-nav .blockcart .header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 50px;
    padding: 0 .48rem;
    border-left: 1px solid var(--aq-line, #dce3e2);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #header > .header-nav .right-nav .material-icons,
  #header .header-top .header-top-right #search_widget .material-icons {
    display: inline-block;
    width: 24px;
    overflow: hidden;
    white-space: nowrap;
  }

  #header > .header-nav .right-nav .material-icons {
    margin: 0;
    font-size: 22px;
  }

  #header > .header-nav .right-nav #_desktop_cart,
  #header > .header-nav .right-nav .cart-preview {
    flex: 0 0 124px;
    width: 124px !important;
    min-width: 124px;
    max-width: 124px;
  }

  #header > .header-nav .right-nav .cart-preview {
    background: var(--aq-ink, #252c2f) !important;
    border-radius: 2px;
  }

  #header > .header-nav #_desktop_cart .cart-preview .header a {
    width: 100%;
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
  }

  #header > .header-nav #_desktop_cart .cart-preview .header .shopping-cart {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
  }

  #header > .header-nav #_desktop_cart .cart-preview .header .cart-products-count {
    flex: 0 0 21px;
    width: 21px;
    text-align: left;
  }

  #header > .header-nav #_desktop_cart .cart-preview .header,
  #header > .header-nav #_desktop_cart .cart-preview .header > *,
  #header > .header-nav #_desktop_cart .cart-preview .header a,
  #header > .header-nav #_desktop_cart .cart-preview .header a > * {
    color: var(--aq-white, #fbfcfc) !important;
  }

  /* Classic colors an empty cart icon separately from its label. */
  #header > .header-nav #_desktop_cart .cart-preview .header i.shopping-cart.material-icons {
    color: var(--aq-white, #fbfcfc) !important;
    -webkit-text-fill-color: var(--aq-white, #fbfcfc) !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1);
  }

  #header > .header-nav .right-nav .user-info a:hover,
  #header > .header-nav .right-nav .user-info a:focus-visible {
    background: var(--aq-surface, #edf1f0);
    text-decoration: none;
  }

  #header > .header-nav #_desktop_cart .cart-preview:hover,
  #header > .header-nav #_desktop_cart .cart-preview:focus-within {
    background: var(--aq-brass, #806537) !important;
  }

  #header .header-top .header-top-right #_desktop_top_menu {
    grid-area: menu;
    position: relative !important;
    display: block;
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: .8rem 0 .7rem;
    border-top: 1px solid var(--aq-line, #dce3e2);
  }

  #header .header-top .header-top-right #_desktop_top_menu > .top-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(.65rem, 1.55vw, 1.7rem);
    margin: 0;
  }

  #header .header-top .header-top-right #_desktop_top_menu > .top-menu > li {
    float: none;
    margin: 0;
  }

  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0'] {
    position: relative;
    padding: .55rem .2rem;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
  }

  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0']::after {
    content: '';
    position: absolute;
    right: .2rem;
    bottom: .22rem;
    left: .2rem;
    height: 1px;
    background: var(--aq-brass, #806537);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
  }

  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0']:hover::after,
  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0']:focus-visible::after {
    transform: scaleX(1);
  }

  #header > .header-top > .container > #mobile_top_menu_wrapper,
  #header > .header-nav > .container > .row > .hidden-md-up {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #header {
    grid-template-columns:
      minmax(15px, 1fr)
      minmax(150px, 1fr)
      auto
      minmax(15px, 1fr) !important;
    grid-template-areas:
      'banner banner banner banner'
      'topbar topbar topbar topbar'
      '. logo actions .'
      '. search search .'
      '. menu menu .';
    grid-template-rows: auto auto minmax(76px, auto) auto auto;
    column-gap: 1rem;
  }

  #header > .header-nav > .container > .row > .hidden-sm-down > .col-md-5 {
    grid-row: 2;
    grid-column: 3;
  }

  #header .header-top .header-top-right #search_widget {
    max-width: none;
    margin-bottom: .8rem;
  }

  #header .header-top .header-top-right #_desktop_top_menu > .top-menu {
    gap: 0 .8rem;
  }

  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0'] {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  #header {
    display: block;
  }

  #header .aq-topbar {
    padding: .36rem 0;
  }

  #header .aq-topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    text-align: center;
  }

  #header .header-nav {
    max-height: none;
  }

  #header .header-nav .mobile {
    min-height: 46px;
    padding-top: .2rem;
    padding-bottom: .2rem;
  }

  #header .header-nav .top-logo {
    min-height: 50px;
  }

  #header .header-nav .top-logo .logo {
    width: auto;
    max-width: 150px;
    max-height: 38px;
  }

  #header .header-nav .mobile .cart-preview.active {
    background: transparent !important;
  }

  #header .header-nav #_mobile_cart .cart-preview.active a,
  #header .header-nav #_mobile_cart .cart-preview.active .shopping-cart,
  #header .header-nav #_mobile_cart .cart-preview.active .cart-products-count {
    color: var(--aq-ink, #252c2f) !important;
  }

  #header .header-top {
    padding: 0 0 .75rem;
  }

  #header .header-top .header-top-right #search_widget {
    width: 100%;
    max-width: none;
    margin: .65rem 0 0;
    padding: 0;
  }

  #header .header-top .header-top-right #search_widget form {
    min-height: 46px;
    border-radius: 2px;
  }

  #header .header-top .header-top-right #search_widget form input[name='s'] {
    height: 44px;
    font-size: 16px;
  }

  #header .header-top .header-top-right #search_widget .material-icons,
  #header .header-nav .mobile .material-icons {
    display: inline-block;
    width: 24px;
    overflow: hidden;
    white-space: nowrap;
  }

  #header #mobile_top_menu_wrapper {
    margin-top: .85rem;
    border-top: 1px solid var(--aq-line, #dce3e2);
  }
}

@media (prefers-reduced-motion: reduce) {
  #header .header-top .header-top-right #_desktop_top_menu .top-menu a[data-depth='0']::after {
    transition: none;
  }
}