/* categories.css — styles partagés pour toutes les pages de catégorie */
:root{
  /* variables attendues dans styles.css global (fallbacks si absent) */
  --corail: #ff6b6b;
  --texte-fonce: #222;
}

/* wrapper commun pour la zone produits */
.categories-wrapper,
.accessoireete-products {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.25rem 1rem 0;
}

.count-display {
  margin: 0.25rem 0 1rem;
  font-size: 1.05rem;
  color: var(--texte-fonce);
  font-weight: 500;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.product-card{
  position: relative;
  box-sizing: border-box;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

.prod-img{ width:100%; height:200px; object-fit:cover; border-radius:8px; margin-bottom:.75rem; }
.product-title{ font-size:1.05rem; font-weight:600; margin:0.4rem 0; color:var(--texte-fonce); line-height:1.25; flex-grow:1; }

.product-price-box{ margin:0.5rem 0; }
.old-price{ text-decoration: line-through; color:#9b9b9b; margin-right:.5rem; font-size:.92rem; }
.new-price{ font-weight:700; color:var(--corail); font-size:1.15rem; }

.color-options{ display:flex; gap:.5rem; margin:.6rem 0; flex-wrap:wrap; }
.color-swatch{ width:24px; height:24px; display:inline-block; border-radius:50%; border:2px solid #fff; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,0.12); transition:transform .15s ease; }
.color-swatch:hover{ transform:scale(1.08); }

.btn-group.vertical-buttons{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }
.btn-corail{ background:var(--corail); color:#fff; border:none; padding:.75rem 1rem; border-radius:6px; cursor:pointer; font-size:.95rem; font-weight:600; text-align:center; }
.btn-corail:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,107,71,0.18); }

.product-link{ text-decoration:none; color:inherit; display:block; }
.color-picker{ margin:.5rem 0; }
.color-option{ display:inline-block; }
.error-message{ display:none; color:#b00020; margin-top:.35rem; font-size:.85rem; }





/* caches pour SEO / accessibilité */
.sr-only, .category-title.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* masque aussi l'intro encadrée (visuellement) */
.category-intro {
  display: none !important;
}

/* si le conteneur a un fond/encadrement, on le masque aussi */
.category-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}






/* responsive tweaks */
@media (max-width:900px){
  .prod-img{ height:160px; }
  .products-grid{ gap:1rem; }
}
@media (max-width:520px){
  .prod-img{ height:140px; }
  .products-grid{ grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
}