/*
 * autocell Shop Theme: makes the shop header (NOVA, theme "clear") look
 * like the header of www.autocell.io (public/assets/css/site.css, .s-rail
 * and .s-nav in gitlab.com/autocell/website). Header only; nothing else in
 * the shop is restyled.
 *
 * Breakpoints: NOVA switches to its burger menu below 992px (fixed in the
 * template). Above that the header has less room than the website's,
 * because the shop also shows the account icon, so the nav gets smaller
 * below 1680px and the yellow button only shows from 1680px.
 */

/* Same outer spacing as the website: 4vw, content at most 1600px wide.
   NOVA pads both the header and its container, which doubled the margin. */
#jtl-nav-wrapper {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #eee;
}
#jtl-nav-wrapper > .container-fluid {
  max-width: none;
  margin: 0;
  padding-left: max(4vw, calc((100% - 1600px) / 2));
  padding-right: max(4vw, calc((100% - 1600px) / 2));
}

@media (min-width: 992px) {
  #jtl-nav-wrapper .toggler-logo-wrapper { margin-right: 1.5rem; }
  #jtl-nav-wrapper .navbar-brand { margin-right: 0; }

  #mainNavigation .navbar-nav { gap: 1.2rem; }
  /* NOVA sets a horizontal margin with !important elsewhere. */
  #jtl-nav-wrapper #mainNavigation .navbar-nav > li.nav-item > a.nav-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #mainNavigation .navbar-nav > li > a.nav-link {
    opacity: .75;
    transition: opacity .2s ease;
  }
  #mainNavigation .navbar-nav > li > a.nav-link:hover,
  #mainNavigation .navbar-nav > li > a.nav-link:focus-visible,
  #mainNavigation .navbar-nav > li.ac-kaufen > a.nav-link {
    opacity: 1;
  }

  /* Hover underline as on the website: grows from the left, 4px under the
     text. The link has 24px vertical padding, so 24 - 4 - 1.5 = 18.5px. */
  #mainNavigation .navbar-nav > li > a.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18.5px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  #mainNavigation .navbar-nav > li > a.nav-link:hover::after,
  #mainNavigation .navbar-nav > li > a.nav-link:focus-visible::after {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #mainNavigation .navbar-nav > li > a.nav-link::after { transition: none; }
}

/* Less room than on the website: smaller nav until the full width fits. */
@media (min-width: 992px) and (max-width: 1679.98px) {
  #mainNavigation .navbar-nav { gap: .85rem; }
  #mainNavigation .navbar-nav > li > a.nav-link { font-size: .9rem; }
  #jtl-nav-wrapper .toggler-logo-wrapper { margin-right: 1.1rem; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  #mainNavigation .navbar-nav { gap: .6rem; }
  #mainNavigation .navbar-nav > li > a.nav-link { font-size: .8rem; }
  #jtl-nav-wrapper .toggler-logo-wrapper { margin-right: .8rem; }
}

/* Basket: number of items instead of the price, as on the website
   ("Warenkorb ( N )"). The number comes from ac_shop_theme.js. */
#shop-nav .cart-icon-dropdown-price[data-ac-count] { font-size: 0; }
#shop-nav .cart-icon-dropdown-price[data-ac-count]::before { font-size: .85rem; }
#shop-nav .cart-icon-dropdown-price[data-ac-count]::after {
  content: attr(data-ac-count) " )";
  font-size: .85rem;
}

/* Yellow "System konfigurieren" button, added by ac_shop_theme.js. */
#shop-nav .ac-cta-item {
  display: none;
  align-items: center;
  margin-left: 1.5rem;
}
@media (min-width: 1680px) {
  #shop-nav .ac-cta-item { display: flex; }
}
#shop-nav a.ac-cta {
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.2;
  background: #fbda38;
  color: #161616;
  border-radius: 1.4rem;
  padding: .7rem 1.5rem;
  text-decoration: none;
  white-space: nowrap;
}
#shop-nav a.ac-cta:hover { opacity: .9; color: #161616; }
#shop-nav a.ac-cta:focus-visible { outline: 2px solid #161616; outline-offset: 2px; }