/* LE STAR V71 — En-tête mobile : 2 lignes en haut, 1 ligne au défilement.
   Reprend les formulaires/boutons PHP existants (recherche, compte, panier, menu).
   Portée strictement mobile : aucun changement sur ordinateur. */
@media (max-width: 767px) {
  /* Corrige les colonnes plus larges que l'écran, sans zoom déformant. */
  html, body { max-width: 100%; overflow-x: clip; }
  .site-shell, .site-shell > main, .main-header { min-width: 0; max-width: 100%; }
  .main-header { width: 100%; overflow: visible; }
  .main-header .container {
    box-sizing: border-box;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px);
    margin-inline: auto !important;
  }

  /* Affichage normal : 1ère ligne logo + compte + panier + menu,
     2ème ligne recherche pleine largeur. */
  .main-header .masthead {
    display: grid !important;
    grid-template-columns: minmax(78px, 1fr) auto auto !important;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 0 10px !important;
  }
  .main-header .masthead > .brand {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    justify-self: start;
    align-items: center;
  }
  .main-header .masthead > .brand img {
    width: clamp(82px, 26vw, 115px) !important;
    height: auto !important;
    max-height: 47px !important;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .main-header .masthead > .quick-actions {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 4px !important;
    min-width: 0;
  }
  .main-header .masthead .quick-action,
  .main-header .masthead .quick-action.cart-toggle {
    display: inline-flex !important;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    width: 39px;
    min-width: 39px !important;
    min-height: 44px;
    height: 44px;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .main-header .masthead .quick-action > span { display: none !important; }
  .main-header .masthead .quick-action .icon { width: 26px; height: 26px; }
  .main-header .masthead .quick-action.cart-toggle .icon { width: 27px; height: 27px; }
  .main-header .masthead .quick-action .cart-badge {
    top: -1px;
    right: 0;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    box-shadow: none;
  }
  .main-header .masthead > .mobile-menu-toggle {
    display: inline-flex !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 7px;
    background: var(--orange, #ff6a00) !important;
    color: #fff !important;
  }
  .main-header .masthead > .mobile-menu-toggle span { display: none !important; }
  .main-header .masthead > .mobile-menu-toggle .icon { width: 25px; height: 25px; }
  .main-header .masthead > .searchbar {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0;
    width: 100%;
    height: 44px !important;
    margin: 0 !important;
  }
  .main-header .masthead > .searchbar input { min-width: 0; font-size: 14px; }
  .main-header .masthead > .searchbar button { flex: 0 0 49px; width: 49px; }

  /* Cacher entièrement le bandeau normal pendant la réduction. */
  .main-header.is-sticky .masthead { display: none !important; }

  /* En-tête compact : même ordre, sur une ligne, aucun élément supprimé. */
  .main-header.is-sticky .sticky-utility { display: block !important; }
  .main-header .sticky-utility .sticky-utility-inner {
    display: grid !important;
    grid-template-columns: clamp(65px, 20vw, 86px) minmax(0, 1fr) auto !important;
    align-items: center;
    column-gap: 5px !important;
    min-width: 0;
    height: 58px !important;
    padding: 0 !important;
  }
  .main-header .sticky-utility .sticky-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
  }
  .main-header .sticky-utility .sticky-brand img {
    display: block;
    width: 100% !important;
    max-width: 86px;
    max-height: 38px;
    height: auto;
    object-fit: contain;
    object-position: left center;
  }
  .main-header .sticky-utility .sticky-search {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    height: 37px !important;
    margin: 0 !important;
    border-radius: 19px;
  }
  .main-header .sticky-utility .sticky-search > .search-icon { display: none !important; }
  .main-header .sticky-utility .sticky-search input {
    min-width: 0;
    width: 100%;
    padding: 0 4px 0 9px !important;
    font-size: 11px !important;
    text-overflow: ellipsis;
  }
  .main-header .sticky-utility .sticky-search button {
    flex: 0 0 33px;
    width: 33px !important;
    min-width: 33px;
    height: 100%;
    border-radius: 0 19px 19px 0;
  }
  .main-header .sticky-utility .sticky-search button .icon { width: 18px; height: 18px; }
  .main-header .sticky-utility .sticky-actions {
    display: flex !important;
    align-items: center;
    gap: 1px !important;
    min-width: 0;
    justify-content: flex-end;
  }
  .main-header .sticky-utility .sticky-action {
    flex: 0 0 33px;
    width: 33px;
    min-width: 33px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .main-header .sticky-utility .sticky-action span,
  .main-header .sticky-utility .sticky-menu-toggle span { display: none !important; }
  .main-header .sticky-utility .sticky-action .icon { width: 23px; height: 23px; }
  .main-header .sticky-utility .sticky-action .cart-badge {
    top: 0;
    left: auto;
    right: -2px;
    min-width: 17px;
    height: 17px;
  }
  .main-header .sticky-utility .sticky-menu-toggle {
    flex: 0 0 35px;
    display: inline-flex !important;
    width: 35px;
    min-width: 35px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--orange, #ff6a00);
    color: white;
  }
  .main-header .sticky-utility .sticky-menu-toggle .icon { width: 23px; height: 23px; }
  .main-header .sticky-utility .product-search-suggestions,
  .main-header .masthead .product-search-suggestions { z-index: 500; }
}
@media (max-width: 360px) {
  .main-header .masthead { column-gap: 5px !important; }
  .main-header .masthead > .brand img { width: 84px !important; }
  .main-header .sticky-utility .sticky-utility-inner {
    grid-template-columns: 67px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }
  .main-header .sticky-utility .sticky-action { width: 31px; flex-basis: 31px; min-width: 31px; }
  .main-header .sticky-utility .sticky-menu-toggle { width: 34px; min-width: 34px; flex-basis: 34px; }
  .main-header .sticky-utility .sticky-search button { width: 30px !important; flex-basis: 30px; min-width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-header, .main-header * { scroll-behavior: auto !important; }
}