/* layout.css – Ajustes finos de layout/espaciado y variantes de botones */

.hidden{display:none}

/* Header CTA más visible en nav */
.header .buy-btn{
  background:var(--clr-primary);
  font-weight:800;
  padding:.7rem 1rem;
}
.header .buy-btn:hover{background:var(--clr-primary-700)}

/* Footer */
footer .small{font-size:.9rem}

/* Variantes de botones que usamos en tienda */
.btn--block{ display:flex; width:100% }
.btn--sm{ padding:.55rem .85rem; font-size:.95rem }
.btn--lg{ padding:1rem 1.3rem; font-size:1.05rem }

/* Espaciado utilitario */
.mt-0{margin-top:0}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.p-0{padding:0}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}

/* Grid de producto: CTA ocupando 100% en móvil para facilitar taps */
@media (max-width: 640px){
  .product-card .btn{ width:100% }
}

/* ===== PDP utilidades ligeras ===== */
.breadcrumbs{
  display:flex; gap:.5rem; flex-wrap:wrap;
  font-size:.95rem; color:var(--clr-muted);
  margin-bottom:.75rem;
}
.breadcrumbs a{ text-decoration:none; color:inherit }
.breadcrumbs a:hover{ text-decoration:underline }

/* ===== FIX: Evitar superposición en móvil =====
   Oculta el botón "Comprar" del header cuando el ancho es ≤640px.
   El mini-carrito del header sigue disponible y no tapa contenido. */
@media (max-width: 640px){
  .header .buy-btn{ display:none !important; }
}