/* ==================================================
   PIERRES — spécifique à cette famille
================================================== */

/* ========== Filtres couleurs ========== */
.filtre-couleurs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:30px 0;
}

.filtre-couleurs .couleur{
  display:block;
  width:119px;
  height:89px;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  border:2px solid #ccc;
  text-align:center;
  position:relative;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.filtre-couleurs .couleur img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.filtre-couleurs .couleur small{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:.75rem;
  color:#333;
  font-weight:600;
  pointer-events:none;
}

.filtre-couleurs .couleur.active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(251,194,26,.25);
}

.filtre-couleurs .couleur:hover{
  border-color:#999;
}

/* ========== Filtre forme ========== */
.shape-filter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:10px 0 18px;
}

.shape-filter label{
  font-weight:700;
  font-size:1.1rem;
}

#filtre-forme{
  font-size:1.2rem;
  font-weight:600;
  padding:10px 14px;
  min-width:260px;
  border:1px solid #bbb;
  border-radius:8px;
  background:#fff;
  text-align-last:center;
  -moz-text-align-last:center;
}

@media (max-width:768px){
  #filtre-forme{
    font-size:1.1rem;
    min-width:220px;
    padding:8px 12px;
  }
}

/* ========== Titre pierre ========== */
.product-title{
  font-weight:600;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.3;
  margin-top:4px;
  min-height:2.2em;
}

/* ========== Toast centré spécifique pierre ========== */
#msg-hub{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;
  z-index:2000 !important;
}

#msg-stack{
  display:grid !important;
  gap:10px !important;
  width:min(560px, 92vw) !important;
  justify-items:center !important;
}

.msg{
  background:#292929 !important;
  color:#FBC21a !important;
  border:1px solid #1f1f1f !important;
  border-radius:12px !important;
  padding:14px 18px !important;
  font-size:16px !important;
  font-weight:700 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.35) !important;
  pointer-events:auto !important;
}

.msg.is-success,
.msg.is-warn,
.msg.is-error,
.msg.is-info{
  background:#292929 !important;
  color:#FBC21a !important;
  border-color:#1f1f1f !important;
}

.msg-body{
  gap:12px !important;
}

.msg-icon{
  display:none !important;
}

.msg-text{
  color:#FBC21a !important;
}

.msg-close{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#FBC21a !important;
  opacity:.9 !important;
  font-weight:700 !important;
}

.msg-close:hover{
  opacity:1 !important;
}

.msg.enter{
  animation:toastIn .18s ease-out both !important;
}

.msg.leave{
  animation:toastOut .18s ease-in both !important;
}

@keyframes toastIn{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

@keyframes toastOut{
  from{ transform:translateY(0); opacity:1; }
  to{ transform:translateY(8px); opacity:0; }
}

/* ========== Mobile spécifique pierre ========== */
@media (max-width:640px){
  .product-block:not(.vignette){
    width:100%;
    margin:10px 0;
    max-width:480px;
  }

  .product-container{
    gap:12px;
    padding:0 10px;
  }

  .product-block img{
    max-height:140px;
  }

  .buy-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .product-qty{
    flex:1 1 140px;
  }

  .total{
    margin-left:0;
  }

  .shape-filter{
    flex-wrap:wrap;
    gap:8px;
  }

  #filtre-forme{
    width:100%;
    min-width:0;
    text-align-last:left;
  }
}