/*
 * Otopilas visual identity for Hummingbird / PrestaShop 9.
 * Temporary theme-level adaptation prepared for nueva.otopilas.es.
 */
:root {
  --otopilas-yellow: #f7d42d;
  --otopilas-black: #090909;
  --otopilas-blue: #123e70;
  --otopilas-red: #d52f2f;
  --otopilas-green: #538238;
  --otopilas-grey: #f5f6f7;
}

body {
  background: var(--otopilas-grey);
  color: #292929;
  font-family: Arial, "Helvetica Neue", sans-serif;
}

.header-top {
  background: var(--otopilas-yellow) !important;
  border: 0 !important;
  color: #111;
}

.header-top a,
.header-top button,
.header-top .material-icons {
  color: #111 !important;
}

.header-bottom {
  min-height: 92px;
  background: var(--otopilas-black) !important;
  border: 0 !important;
  color: #fff;
}

.header-bottom__logo {
  flex: 0 0 250px;
  max-width: 250px;
}

.header-bottom__logo .logo {
  width: 235px;
  height: auto;
  max-width: 235px !important;
  max-height: 80px !important;
  object-fit: contain;
}

.header-bottom a,
.header-bottom button,
.header-bottom .material-icons,
.ps-mainmenu__tree-link {
  color: #fff !important;
}

/* The mega-menu uses a light panel, so it must not inherit white header text. */
.header-bottom .submenu {
  color: #242424;
  border-top: 3px solid var(--otopilas-yellow);
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}

.header-bottom .submenu a,
.header-bottom .submenu button,
.header-bottom .submenu .menu-item {
  color: #242424 !important;
}

.header-bottom .submenu__left {
  border-right-color: #e1e4e8;
}

.header-bottom .submenu__left-item {
  border-radius: 5px;
  color: #242424 !important;
  font-weight: 700;
}

.header-bottom .submenu__left-item:hover,
.header-bottom .submenu__left-item:focus,
.header-bottom .submenu__left-item[aria-selected="true"] {
  background: var(--otopilas-yellow) !important;
  color: #111 !important;
}

.header-bottom .submenu__right .menu-item {
  padding: .35rem .5rem;
  border-radius: 4px;
}

.header-bottom .submenu__right .menu-item:hover,
.header-bottom .submenu__right .menu-item:focus {
  background: #f1f4f7;
  color: var(--otopilas-blue) !important;
}

/* Categories without a third level work better as compact horizontal menus. */
.ps-mainmenu__tree-item[data-id="category-3"] .submenu__left,
.ps-mainmenu__tree-item[data-id="category-14"] .submenu__left {
  display: grid;
  width: 100%;
  flex: 0 0 100%;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: .75rem;
  padding: 1.25rem 0;
  border-right: 0;
}

.ps-mainmenu__tree-item[data-id="category-14"] .submenu__left {
  grid-template-columns: minmax(220px, 360px);
}

.ps-mainmenu__tree-item[data-id="category-3"] .submenu__right,
.ps-mainmenu__tree-item[data-id="category-14"] .submenu__right {
  display: none;
}

.ps-mainmenu__tree-item[data-id="category-3"] .submenu__left-item,
.ps-mainmenu__tree-item[data-id="category-14"] .submenu__left-item {
  justify-content: center;
  background: #f1f3f5;
  text-align: center;
}

.ps-mainmenu__tree-link {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.ps-mainmenu__tree-link:hover,
.ps-mainmenu__tree-link:focus,
.ps-mainmenu__tree-link[aria-expanded="true"] {
  color: var(--otopilas-yellow) !important;
}

/* Keep the complete desktop navigation on one line at every XL breakpoint. */
@media (min-width: 1200px) {
  .header-bottom__container {
    width: calc(100% - 32px);
    max-width: 1720px;
  }

  .header-bottom__row,
  .ps-mainmenu__tree {
    flex-wrap: nowrap !important;
  }

  .header-bottom__logo {
    flex-basis: clamp(190px, 14vw, 250px);
    max-width: clamp(190px, 14vw, 250px);
  }

  .header-bottom__logo .logo {
    width: clamp(180px, 13vw, 235px);
    max-width: clamp(180px, 13vw, 235px) !important;
  }

  .ps-mainmenu {
    min-width: 0;
  }

  .ps-mainmenu__tree {
    gap: clamp(2px, .35vw, 8px);
  }

  .ps-mainmenu__tree-item {
    flex: 0 0 auto;
  }

  .ps-mainmenu__tree-link {
    padding-right: clamp(4px, .35vw, 8px);
    padding-left: clamp(4px, .35vw, 8px);
    font-size: clamp(.76rem, .72rem + .1vw, .88rem);
    white-space: nowrap;
  }

  .header-bottom__row > .order-2 {
    width: clamp(220px, 18vw, 300px);
    max-width: clamp(220px, 18vw, 300px);
  }

  .header-bottom__row > .order-2 .ps-searchbar,
  .header-bottom__row > .order-2 .ps-searchbar__form {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
  }

  .header-bottom__row > .order-2 .ps-searchbar__input {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }
}

.header-bottom .searchbar__form,
.header-bottom input[type="search"],
.header-bottom input[type="text"] {
  background: #fff !important;
  color: #222 !important;
  border-radius: 4px;
}

.breadcrumb {
  background: transparent;
}

#carousel,
.ps-imageslider {
  background: #071839;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.ps-imageslider img,
.carousel-inner img {
  width: 100%;
  height: auto !important;
  max-height: 500px;
  object-fit: contain;
  background: #071839;
}

.ps-imageslider .carousel-caption,
.ps-imageslider__figcaption,
.carousel .carousel-caption {
  display: none !important;
}

.ps-customtext {
  max-width: none !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.otopilas-home {
  display: grid;
  gap: 2rem;
}

.otopilas-intro {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .07);
  text-align: center;
}

.otopilas-intro__eyebrow {
  display: inline-block;
  margin-bottom: .5rem;
  color: var(--otopilas-blue);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.otopilas-intro h1,
.otopilas-home h2 {
  margin: 0 0 .75rem;
  color: #111;
  font-weight: 800;
}

.otopilas-intro h1 {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
}

.otopilas-intro p {
  max-width: 780px;
  margin: 0 auto;
  color: #555;
  font-size: 1.05rem;
  line-height: 1.65;
}

.otopilas-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.otopilas-benefit {
  min-height: 135px;
  padding: 1.25rem;
  border-radius: 7px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.otopilas-benefit:nth-child(1) { background: var(--otopilas-blue); }
.otopilas-benefit:nth-child(2) { background: var(--otopilas-red); }
.otopilas-benefit:nth-child(3) { background: var(--otopilas-green); }
.otopilas-benefit:nth-child(4) { background: #494949; }

.otopilas-benefit__icon {
  display: block;
  margin-bottom: .65rem;
  font-size: 1.6rem;
}

.otopilas-benefit strong {
  display: block;
  margin-bottom: .3rem;
  font-size: 1rem;
  text-transform: uppercase;
}

.otopilas-benefit span {
  font-size: .9rem;
  line-height: 1.45;
}

.otopilas-categories {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
}

.otopilas-categories__heading {
  margin-bottom: 1.25rem;
  text-align: center;
}

.otopilas-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.otopilas-category {
  display: flex;
  min-height: 145px;
  padding: 1.25rem;
  align-items: flex-end;
  border-radius: 7px;
  background: linear-gradient(135deg, #101010, #2b2b2b);
  color: #fff !important;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.otopilas-category::before {
  content: "";
  position: absolute;
  width: 42px;
  height: 5px;
  margin-bottom: 2.1rem;
  background: var(--otopilas-yellow);
}

.otopilas-category:hover {
  color: var(--otopilas-yellow) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

.otopilas-help {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 1.5rem;
}

.otopilas-associations,
.otopilas-contact {
  padding: 1.75rem;
  border-radius: 8px;
}

.otopilas-associations {
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
}

.otopilas-contact {
  background: var(--otopilas-yellow);
  color: #111;
}

.otopilas-contact a {
  display: inline-block;
  margin-top: .65rem;
  padding: .7rem 1rem;
  border-radius: 4px;
  background: #111;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}

.otopilas-contact a:hover {
  background: var(--otopilas-blue);
}

.featured-products,
.ps-featuredproducts,
.ps-bestsellers,
.ps-newproducts {
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
}

.product-miniature {
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-miniature:hover {
  transform: translateY(-3px);
}

.ps-banner {
  padding: 1.25rem;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}

.ps-banner img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 110px;
  object-fit: contain;
}

.footer {
  background: #0a0a0a !important;
  color: #d8d8d8;
}

.footer a {
  color: #d8d8d8 !important;
}

.footer a:hover {
  color: var(--otopilas-yellow) !important;
}

.footer .h3,
.footer .h4,
.footer .title,
.footer__title {
  color: var(--otopilas-yellow) !important;
  font-weight: 800;
  text-transform: uppercase;
}

.footer .contact-rich .block-contact-title,
.footer .contact-rich {
  color: #fff;
}

@media (max-width: 991.98px) {
  .header-bottom {
    min-height: auto;
  }

  .header-bottom__logo {
    flex-basis: 190px;
    max-width: 190px;
  }

  .header-bottom__logo .logo {
    width: 180px;
  }

  .otopilas-benefits,
  .otopilas-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .otopilas-benefits,
  .otopilas-category-grid,
  .otopilas-help {
    grid-template-columns: 1fr;
  }

  .otopilas-intro,
  .otopilas-categories {
    padding: 1.25rem;
  }
}