/*
 * Presentation layer that restores the look of the previous (PrestaShop 1.7)
 * Classic theme on top of the PrestaShop 8.2 theme.
 *
 * Only cosmetics live here. Templates, hooks and module behaviour stay untouched,
 * so everything introduced by 8.2 keeps working.
 *
 * Loaded after theme.css and custom.css, so it must never repeat a declaration
 * that custom.css already owns (#wrapper and .footer-container shadows, footer
 * and header backgrounds, and so on).
 */

/* ----------------------------------------------------------------------
 * Typography
 * 8.2 replaced "Noto Sans" with "Manrope" and bumped the base heading sizes.
 * -------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/noto-sans/NotoSans-Regular.woff2) format("woff2"),
       url(../fonts/noto-sans/NotoSans-Regular.woff) format("woff"),
       url(../fonts/noto-sans/NotoSans-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/noto-sans/NotoSans-Bold.woff2) format("woff2"),
       url(../fonts/noto-sans/NotoSans-Bold.woff) format("woff"),
       url(../fonts/noto-sans/NotoSans-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/noto-sans/NotoSans-Italic.woff2) format("woff2"),
       url(../fonts/noto-sans/NotoSans-Italic.woff) format("woff"),
       url(../fonts/noto-sans/NotoSans-Italic.ttf) format("truetype");
}
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 700;
  src: url(../fonts/noto-sans/NotoSans-BoldItalic.woff2) format("woff2"),
       url(../fonts/noto-sans/NotoSans-BoldItalic.woff) format("woff"),
       url(../fonts/noto-sans/NotoSans-BoldItalic.ttf) format("truetype");
}

body {
  font-family: "Noto Sans", sans-serif;
}

h2,
.h2 {
  font-size: 1.25rem;
}

/* ----------------------------------------------------------------------
 * Header
 * 8.2 turns the logo/search row into a flex container and removes the gap
 * under the top bar. That squashes the logo column and pushes the main menu
 * into the right hand half, so it wraps into a stack.
 * -------------------------------------------------------------------- */
@media (min-width: 768px) {
  #header .header-nav {
    margin-bottom: 30px;
  }
}

/* 8.2 puts a drop shadow on the whole header. With the menu overlapping the
 * bottom edge of the header that shadow cuts straight through the menu items. */
#header {
  -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.11);
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.11);
}

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

#header .header-top > .container > .row:first-of-type {
  display: block;
}

#header #_desktop_logo h1 {
  margin-bottom: 0.5rem;
}

#header .header-top .menu {
  margin-bottom: 0.375rem;
}

.top-menu[data-depth="0"] {
  margin-bottom: 1rem;
}

.top-menu a[data-depth="0"] {
  padding: 0.1875rem 0.625rem 0.375rem;
}

/* The category fly-out is absolutely positioned against the header container.
 * The fixed offset in custom.css was measured against the old header box, so
 * anchor it to the container instead: 100% is the container bottom and the
 * extra 14px is the amount the menu block pulls itself below that edge. */
.header-top .sub-menu {
  top: calc(100% + 14px) !important;
}

@media (max-width: 1199px) {
  #header .header-nav {
    max-height: inherit;
  }

  #header .header-nav .search-widget {
    float: none;
    width: 15.63rem;
  }
}

@media (max-width: 767px) {
  .dropdown-item,
  .menu {
    padding-left: 0;
  }

  #header .header-nav .right-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #header .header-nav .user-info {
    margin-left: 0;
    text-align: left;
  }

  #header .header-nav .blockcart {
    background: inherit;
    margin-left: 0;
  }

  #header .header-nav .top-logo {
    padding-top: 11px;
  }
}

/* ----------------------------------------------------------------------
 * Cards and controls
 * 8.2 flattened the design by dropping the raised box shadows.
 * -------------------------------------------------------------------- */
#left-column .block_newsletter,
#pagenotfound .page-not-found,
#product #block-reassurance,
#products .page-not-found,
#search_filters,
#search_filters_brands,
#search_filters_suppliers,
.active_filters .filter-block,
.block-categories,
.card,
.page-addresses .address,
.page-authentication #content,
.page-customer-account #content,
.page-my-account #content .links a span.link-item,
.page-order-detail .box,
.product-cover img,
.product-miniature .thumbnail-container,
.radio-label,
.tabs,
body#checkout #header .header-nav,
body#checkout section.checkout-step {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.brands-sort .select-title,
.btn-primary,
.btn-secondary,
.bootstrap-touchspin,
.pagination .page-list,
.product-flags li.product-flag,
.product-variants > .product-variants-item select,
.products-sort-order .select-title,
.social-sharing li,
.suppliers-sort .select-title {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.btn-tertiary {
  box-shadow: 0.0625rem 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.1);
}

.btn-tertiary:hover {
  box-shadow: 0.0625rem 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.2);
}

.carousel {
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.15);
}

.product-miniature .highlighted-informations {
  box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.2);
}

.btn.disabled,
.btn:disabled {
  background: #7a7a7a;
  color: #232323;
  opacity: 0.65;
}

/* ----------------------------------------------------------------------
 * Titles
 * -------------------------------------------------------------------- */
#products .products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title {
  font-weight: 700;
  margin: 0 0 1.5rem;
}

#products .all-product-link,
.featured-products .all-product-link,
.product-accessories .all-product-link {
  font-weight: 700;
}

#custom-text h2 {
  font-size: 1.563rem;
  font-weight: 700;
}

#custom-text p {
  font-size: 1.1em;
}

.footer-container .h3,
.footer-container .h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

#search_filters > .h6,
#search_filters_brands > .h6,
#search_filters_suppliers > .h6,
.block-categories .h6 {
  font-size: 0.9375rem;
  font-weight: 700;
}

.block-category h1 {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}