/* ==========================================================
   MARCA: CAPÇALERA + SELECTOR
   ========================================================== */

/* Si encara queda legacy .elem en alguna pàgina, que no trenqui layouts moderns */
.elem{float:none;width:auto;height:auto;border:0;padding:0}

.material-icons{cursor:pointer}
img[src=""]{background-size:cover}

.marca-header{
  max-width:1050px;
  margin:0 auto 30px;
  padding:0 15px;
  display:grid;
  gap:16px;
  justify-items:center;
}

.marca-logo img{
  max-width:100%;
  height:auto;
  display:block;
}

.marca-filtre{
  width:min(420px,100%);
  background:#f1f1f1;
  border-radius:10px;
  padding:12px 16px;
  text-align:center;
}

.marca-filtre label{
  display:block;
  font:400 14px/1.2 Arial,sans-serif;
  color:#666;
  margin:0 0 6px;
}

.marca-filtre select{
  width:100%;
  padding:8px 12px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:14px;
  background:#fff;
  cursor:pointer;
}

/* Select2 (si s'activa) */
.marca-filtre .select2-container{width:100% !important}
.select2-dropdown{z-index:999999 !important}


/* ==========================================================
   RESULTATS: VISTA LLISTA / QUADRADA (sense JS)
   ========================================================== */

.resultats{max-width:1200px;margin:0 auto;padding:10px}

/* Radios invisibles (inputs van fora de .vista-controls) */
#vista-llista,#vista-grid{position:absolute;opacity:0;pointer-events:none}

/* Toggle */
.vista-controls{
  display:inline-flex;
  gap:8px;
  padding:8px;
  border-radius:12px;
  background:#f2f2f2;
  margin:10px 0 16px;
}
.vista-btn{
  cursor:pointer;
  padding:8px 12px;
  border-radius:10px;
  font:600 14px/1.2 Arial,sans-serif;
  background:#fff;
  border:1px solid #d7d7d7;
}

/* Botó actiu */
#vista-llista:checked ~ .vista-controls label[for="vista-llista"],
#vista-grid:checked  ~ .vista-controls label[for="vista-grid"]{
  border-color:#999;
}

/* Layout base */
.resultats-wrap{
  display:grid;
  gap:12px;
  grid-template-columns:1fr; /* Llista: 1 per fila */
}

/* Quadrada: 5 / 3 / 2 */
#vista-grid:checked ~ .resultats-wrap{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media (max-width:900px){
  #vista-grid:checked ~ .resultats-wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  #vista-grid:checked ~ .resultats-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Card producte */
.card-producte{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:12px;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:14px;
  overflow:hidden;
  align-content:start; /* alçada més estable */
}

/* En quadrada: card vertical */
#vista-grid:checked ~ .resultats-wrap .card-producte{
  grid-template-columns:1fr;
}

/* Imatge */
.card-img{
  position:relative;
  display:block;
  background:#fafafa;
}
#vista-grid:checked ~ .resultats-wrap .card-img{aspect-ratio:1/1}
.card-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:8px;
}
.img-placeholder{display:block;min-height:90px}

/* Promo */
.badge-promo{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:#ffefef;
  border:1px solid #ffcccc;
  color:#b30000;
  font:700 12px/1 Arial,sans-serif;
  padding:6px 8px;
  border-radius:999px;
}

/* Textos i zones */
.card-info{
  padding:10px 12px 12px;
  display:grid;
  gap:10px;
  grid-auto-rows:min-content;
}

.ref{font:700 13px/1.2 Arial,sans-serif;color:#333;text-decoration:none}
.titol{font:400 14px/1.3 Arial,sans-serif;color:#111;text-decoration:none}

.card-meta,.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ficha{
  font:400 13px/1.2 Arial,sans-serif;
  color:#333;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.preu{font:700 14px/1.2 Arial,sans-serif;white-space:nowrap}
.stock{font:400 13px/1.2 Arial,sans-serif;color:#333}

/* Botó sempre a baix */
.card-bottom{margin-top:auto}

/* Compacte a mòbil en llista */
@media (max-width:520px){
  .card-producte{grid-template-columns:90px 1fr}
  .preu{font-size:13px}
}