/* =========================================
= SOUS-COMPOSANT — HEADER MOBILE (.nl-header--bar--mobile)
= Barre basse du header : burger | logo | panier.
= Markup : header-mobile.php · enqueue : inc-header-mobile.php
=
= Masquée par défaut, affichée sous 64rem. Les classes .nl-header--bar,
= --nav-*, --brand, --menu et le bouton panier sont PARTAGÉES avec la barre
= desktop : leurs styles de base restent dans header/header.css. Tout ce qui
= est ici les SURCHARGE, en préfixant par .nl-header--bar--mobile — ce fichier
= se charge après header.css, l'ordre est donc le bon.
========================================= */
.nl-header--bar--mobile {
  display: none;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  height: 3rem;
}

@media (max-width: 64rem) {
  /* La barre mobile prend le relais (le masquage de la barre desktop est dans
     header-desktop/header-desktop.css, celui de .nl-mega dans mega-menu.css). */
  .nl-header--bar--mobile {
    display: grid;
  }

  /* Logo mobile : taille adaptée */
  .nl-header--bar--mobile .nl-header--brand img {
    max-width: 8rem;
    object-fit: contain;
  }

  /* Boutons icône (burger + panier) : fond primary, contenu secondary */
  .nl-header--bar--mobile .nl-header--menu-burger > button,
  .nl-header--bar--mobile .nl-header--menu-cart > button[data-cart-open] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--primary);
    color: var(--secondary);
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }

  /* Annule le survol du bouton panier desktop (fond transparent + décalage) */
  .nl-header--bar--mobile .nl-header--menu-cart > button[data-cart-open]:hover {
    background: var(--primary);
    color: var(--secondary);
    transform: none;
  }

  /* Bouton panier mobile : l'icône « sac » (nouli_cart_bag_icon) au lieu du
     chiffre, à la même taille que le burger d'en face pour que les deux
     boutons soient identiques. Le compteur est toujours là, en .sr-only : rien
     ici ne doit le redimensionner, sinon il redeviendrait visible. */
  .nl-header--bar--mobile .nl-header--menu-cart .nl-cart-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}