/* Italianissimo mobile header layout.
 * Kept as a standalone, versioned asset so local browser/PrestaShop CSS caches
 * cannot leave the mobile header on an older layout. */
@media (max-width: 767.98px) {
  .header-bottom__container {
    padding-block: .35rem .5rem;
  }

  .header-bottom__row {
    --bs-gutter-x: .35rem;
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* Reserve the search row before PrestaShop moves its responsive component.
       Without this, the whole page jumps down after DOMContentLoaded. */
    grid-template-rows: 82px minmax(52px, auto) !important;
    margin-inline: 0 !important;
    position: relative !important;
    row-gap: .4rem !important;
  }

  .header-bottom__row > .ps-mainmenu--desktop {
    left: 0 !important;
    padding-inline: 0 .1rem !important;
    position: absolute !important;
    top: 17px !important;
    width: auto !important;
    z-index: 2 !important;
  }

  .header-bottom__row > .header-bottom__logo {
    align-items: center !important;
    display: flex !important;
    height: 82px !important;
    justify-content: center !important;
    left: 50% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    position: absolute !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    z-index: 1 !important;
  }

  .header-bottom__logo .ij-wordmark {
    max-width: 100% !important;
    width: clamp(132px, 34vw, 170px) !important;
  }

  .header-bottom__row > .ij-header-wishlist,
  .header-bottom__row > #_mobile_ps_customersignin,
  .header-bottom__row > #_mobile_ps_shoppingcart {
    align-self: center !important;
    padding-inline: 0 !important;
    position: absolute !important;
    top: 21px !important;
    width: auto !important;
    z-index: 2 !important;
  }

  .header-bottom__row > .ij-header-wishlist {
    left: 64px !important;
    top: 17px !important;
  }

  .header-bottom__row > #_mobile_ps_customersignin {
    right: 64px !important;
    top: 17px !important;
  }

  .header-bottom__row > #_mobile_ps_shoppingcart {
    right: 0 !important;
    top: 17px !important;
  }

  .header-bottom__row > .ij-header-wishlist .ij-wishlist-header-button,
  .header-bottom__row > .ps-mainmenu--desktop .menu-toggle,
  .header-bottom__row > .ij-header-wishlist .ij-wishlist-header-button,
  .header-bottom__row > #_mobile_ps_customersignin .header-block__action-btn,
  .header-bottom__row > #_mobile_ps_shoppingcart .header-block__action-btn {
    background: transparent !important;
    color: #20221d !important;
  }

  .header-bottom__row > #_mobile_ps_shoppingcart .header-block__badge,
  .header-bottom__row > .ij-header-wishlist .ij-wishlist-header-button__count {
    background: #188b55 !important;
    color: #fff !important;
  }

  .header-bottom__row > #_mobile_ps_customersignin .header-block__action-btn,
  .header-bottom__row > #_mobile_ps_shoppingcart .header-block__action-btn {
    display: inline-flex !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .header-bottom__row > .ps-mainmenu--desktop .menu-toggle .material-icons,
  .header-bottom__row > .ij-header-wishlist .ij-wishlist-header-button .material-icons,
  .header-bottom__row > #_mobile_ps_customersignin .header-block__icon,
  .header-bottom__row > #_mobile_ps_shoppingcart .header-block__icon {
    font-size: 2rem !important;
    line-height: 1 !important;
  }

  .header-bottom__row > #_mobile_ps_shoppingcart .header-block__badge {
    min-width: 1.3rem !important;
    height: 1.3rem !important;
    font-size: .72rem !important;
    line-height: 1.3rem !important;
  }

  .header-bottom__row > .ij-header-wishlist .ij-wishlist-header-button__count {
    min-width: 1.3rem !important;
    height: 1.3rem !important;
    font-size: .72rem !important;
    line-height: 1.3rem !important;
  }

  .header-bottom__row > .ij-mobile-search-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    width: 100% !important;
  }

  .ij-mobile-search-row .ps-searchbar__container,
  .ij-mobile-search-row .ps-searchbar,
  .ij-mobile-search-row .ps-searchbar__form {
    width: 100% !important;
  }

  .ij-mobile-search-row .ps-searchbar {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .ij-mobile-search-row .ps-searchbar__form {
    border: 1px solid #188b55 !important;
  }

  .ij-mobile-search-row .ps-searchbar__input {
    min-height: 44px !important;
  }

  .header-bottom__row .header-block__action-btn,
  .header-bottom__row .menu-toggle,
  .header-bottom__row .ij-wishlist-header-button {
    min-height: 40px !important;
    min-width: 40px !important;
  }

  .header-bottom__row > .ps-mainmenu--mobile,
  .header-bottom__row > #_desktop_ps_searchbar,
  .header-bottom__row > #ps_searchbar_result {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 420px) {
  .header-bottom__logo .ij-wordmark {
    width: clamp(118px, 34vw, 136px) !important;
  }

  .header-bottom__row > .ij-header-wishlist {
    left: 48px !important;
  }

  .header-bottom__row > #_mobile_ps_customersignin {
    right: 48px !important;
  }
}
