/* ==========================================================
   2026-estils-cataleg-03.css (neteja + unificat)
   ========================================================== */

:root{--max:1200px;--gap:12px;--r:14px;--b:#e3e3e3;--muted:#666;--bgsoft:#f2f2f2;--font:Arial,sans-serif;}

/* petites compatibilitats legacy */
.elem{float:none;width:auto;height:auto;border:0;padding:0;}
.material-icons{cursor:pointer;}
img[src=""]{background-size:cover;}

/* ==========================================================
   RBROUNDBOX (modern, sense gifs)
   ========================================================== */
.rbroundbox{background:#fff;border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin:12px auto;}
.rbtop,.rbbot,.rbtop div,.rbbot div{display:none;}
.rbcontent{margin:0;padding:14px;}
.rbroundbox .i22{margin-left:10px;}

/* ==========================================================
   FILTRES (cerca / marques) — unifica estètica i alçades
   ========================================================== */
.filtres-box26{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;}
.bloc-formulari{display:flex;flex-direction:column;gap:6px;margin:0;text-align:left;height:100%;}
.etiqueta{display:block;margin:0 0 6px 0;min-height:18px;font:600 14px/1.2 var(--font);color:#222;}
.form-inline{display:flex;gap:10px;align-items:center;min-height:38px;}
.form-inline>*{height:38px;box-sizing:border-box;}
.input-modern{height:38px;flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid #d6d6d6;background:#fff;box-sizing:border-box;}
.detall_caixa_groga.input-modern{background-color:#FF9;}
select.input-modern{height:38px;line-height:38px;padding:0 10px;}
.btn-modern{height:38px;padding:0 16px;border-radius:8px;line-height:1;}
.btn-placeholder{display:inline-block;height:38px;width:92px;opacity:0;pointer-events:none;}
@media (max-width:640px){.filtres-box26{grid-template-columns:1fr;}.form-inline{flex-wrap:wrap;}.btn-placeholder{display:none;}.btn-modern{width:100%;}}

/* Select2 (si s’aplica al select de marques) */
.marca-filtre .select2-container{width:100% !important;}
.select2-dropdown{z-index:999999 !important;}
.select2-container .select2-selection--single{height:38px;}
.select2-container .select2-selection--single .select2-selection__rendered{line-height:38px;}
.select2-container .select2-selection--single .select2-selection__arrow{height:38px;}

/* ==========================================================
   MARCA: CAPÇALERA + SELECTOR (pàgina marca.php)
   ========================================================== */
.marca-header{max-width:1050px;margin:0 auto 16px;padding:0 15px;display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;}
.marca-logo img{max-width:100%;height:auto;display:block;max-height:140px;width:auto;}
.marca-filtre{width:min(520px,100%);background:#f1f1f1;border-radius:10px;padding:12px 16px;text-align:center;}
.marca-filtre label{display:block;margin:0 0 6px;font:400 14px/1.2 var(--font);color:var(--muted);opacity:.9;}
.marca-filtre select{width:100%;padding:8px 12px;border-radius:6px;border:1px solid #ccc;font:400 14px/1.2 var(--font);background:#fff;cursor:pointer;}

/* ==========================================================
   RESULTATS: VISTA LLISTA / RETÍCULA
   ========================================================== */
.resultats{max-width:var(--max);margin:0 auto;padding:10px;}
#vista-llista,#vista-grid{position:absolute;opacity:0;pointer-events:none;}
.vista-controls{display:inline-flex;gap:8px;padding:8px;border-radius:12px;background:var(--bgsoft);margin:10px 0 10px;}
.vista-btn{cursor:pointer;padding:8px 12px;border-radius:10px;border:1px solid #d7d7d7;background:#fff;font:600 14px/1.2 var(--font);}
#vista-llista:checked ~ .vista-controls label[for="vista-llista"],#vista-grid:checked ~ .vista-controls label[for="vista-grid"]{border-color:#999;}

/* paginació (mateix estil que resultats.php) */
.resultats-topbar,.resultats-bottombar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 10px;flex-wrap:wrap;}
.paginacio{display:flex;gap:12px;align-items:center;}
.resultats-info{opacity:.85;}
@media (max-width:640px){.resultats-topbar,.resultats-bottombar{justify-content:center;text-align:center;}}

/* grid base (llista) */
.resultats-wrap26{display:grid;gap:14px;grid-template-columns:1fr;align-items:start;}

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

/* ==========================================================
   CARD PRODUCTE
   ========================================================== */
.card-producte{display:grid;grid-template-columns:110px 1fr;gap:var(--gap);background:#fff;border:1px solid var(--b);border-radius:var(--r);overflow:hidden;align-content:start;}
#vista-grid:checked ~ .resultats-wrap .card-producte{grid-template-columns:1fr;align-self:start;}

/* imatge (neteja marcs grisos) */
.card-producte .card-img{position:relative;display:block;background:#fff !important;border:0 !important;box-shadow:none !important;}
#vista-grid:checked ~ .resultats-wrap .card-producte .card-img{aspect-ratio:1/1;}
.card-producte .card-img::before,.card-producte .card-img::after{content:none !important;background:transparent !important;box-shadow:none !important;border:0 !important;}
.card-producte .card-img img{width:100%;height:100%;object-fit:contain;display:block;padding:8px;background:transparent !important;border:0 !important;box-shadow:none !important;}
.card-producte .card-img *{background:transparent !important;box-shadow:none !important;border:0 !important;}
.card-producte .card-img *::before,.card-producte .card-img *::after{background:transparent !important;box-shadow:none !important;border:0 !important;}

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

/* info */
.card-info{padding:10px 12px 12px;display:grid;gap:8px;grid-auto-rows:min-content;}
.ref,.titol,.ficha,.preu,.stock{font-family:var(--font);text-decoration:none;}
.ref{font-weight:700;font-size:13px;line-height:1.2;color:#333;}
.titol{font-weight:400;font-size:14px;line-height:1.25;color:#111;}
.ficha,.stock{font-weight:400;font-size:13px;line-height:1.2;color:#333;}
.preu{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;}

/* files meta/bottom */
.card-meta,.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.card-bottom{margin-top:auto;}

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

/* ==========================================================
   HOVER A LA VISTA RETÍCULA
   ========================================================== */
#vista-grid:checked ~ .resultats-wrap .card-producte{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;}
#vista-grid:checked ~ .resultats-wrap .card-producte:hover{background:#f5f5f5;border-color:#bdbdbd;box-shadow:0 6px 14px rgba(0,0,0,.08);}




/* ==========================================================
   PATCH anti-conflictes + alçades consistents (RETÍCULA)
   Afegir al FINAL de 2026-estils-cataleg-03.css
   ========================================================== */

/* 1) Evita que CSS antic (altres fitxers) imposi absolute/overflow */
.cataleg-ui .card-producte{position:relative;}
.cataleg-ui .card-info{padding-bottom:12px !important;}
.cataleg-ui .card-bottom{position:static !important;right:auto !important;bottom:auto !important;margin:0 !important;}
.cataleg-ui .card-producte{overflow:hidden;} /* manté cantonades rodones */

/* 2) Retícula: totes les files amb la mateixa alçada */
#vista-grid:checked ~ .resultats-wrap{grid-auto-rows:1fr;}
#vista-grid:checked ~ .resultats-wrap .card-producte{height:100%;display:flex;flex-direction:column;}

/* 3) Imatge amb alçada estable (evita cards més altes per imatges “raras”) */
#vista-grid:checked ~ .resultats-wrap .card-img{aspect-ratio:1/1;display:block;}
#vista-grid:checked ~ .resultats-wrap .card-img img{width:100%;height:100%;object-fit:contain;}

/* 4) Zona info: estructura estable (títol + preu + bottom sempre visible) */
#vista-grid:checked ~ .resultats-wrap .card-info{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;}
#vista-grid:checked ~ .resultats-wrap .card-top{min-height:56px;} /* reserva espai per ref + 2 línies */
#vista-grid:checked ~ .resultats-wrap .titol{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* 5) Bottom: fila fixa, no wrap, botó sempre a la dreta */
#vista-grid:checked ~ .resultats-wrap .card-bottom{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;min-height:38px;
}
#vista-grid:checked ~ .resultats-wrap .stock{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;line-height:1.2;
}
#vista-grid:checked ~ .resultats-wrap .boto-carro-ico{margin-left:auto;flex:0 0 auto;}

/* 6) Si algun text especial surt “fora” (ex: PEDIDO ESPECIAL), que no rebenti l’alçada */
#vista-grid:checked ~ .resultats-wrap .card-info *{max-width:100%;}