/* ==========================================================================
   GLAMWEL LABORATOIRES - Variantes de page
   Regles transverses ajoutees apres la maquette d'origine (site.css reste
   l'extraction fidele de celle-ci).
   ========================================================================== */

/* Pages sans hero sombre : le header doit demarrer opaque, sinon le logo
   blanc devient invisible sur le fond ivoire. */
.page-solid-header .site-header {
  border-color: var(--line);
  background: rgba(247, 244, 238, .96);
  color: var(--black);
  backdrop-filter: blur(14px);
}

.page-solid-header .header-logo { filter: none; }

/* Navigation principale alimentee par la base. La typographie et les
   espacements de la maquette sont conserves tels quels ; on ajoute seulement
   un garde-fou : chaque libelle reste sur une ligne, et si le menu depasse sa
   colonne il defile au lieu de passer sous le logo centre.
   Le nombre d'entrees se regle dans page_home_menu_categorie. */
.desktop-nav a { white-space: nowrap; }

@media (min-width: 1120px) {
  .desktop-nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .desktop-nav::-webkit-scrollbar { display: none; }
}

/* Le menu mobile aussi : un libelle long ne doit pas coller a son numero. */
.mobile-nav > a { gap: 18px; }

/* Le nombre de colonnes du pied de page vient de la base : la grille s'y
   adapte au lieu d'etre figee a trois. Avec trois colonnes, on retrouve
   exactement la valeur de la maquette (2.2fr 1fr 1fr 1fr). */
@media (min-width: 1120px) {
  .footer-top { grid-template-columns: 2.2fr repeat(var(--footer-columns, 3), 1fr); }
}

/* Retour du formulaire newsletter, sur le fond noir de la section. */
.newsletter-message.is-success { color: var(--gold-light); }
.newsletter-message.is-error { color: #e6a79f; }

/* Selecteur de quantite - partage par la fiche produit et le panier. */
.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}

.quantity-step {
  display: grid;
  width: 40px;
  height: 46px;
  place-items: center;
  color: #6f685f;
  font-size: 15px;
  line-height: 1;
  transition: background 250ms ease, color 250ms ease;
}

.quantity-step:hover { background: var(--black); color: var(--white); }

.quantity-input {
  width: 46px;
  height: 46px;
  border: 0;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  outline: none;
  appearance: textfield;
  background: transparent;
  color: var(--black);
  font-size: 13px;
  text-align: center;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}