/* ==========================================================
   IMATGES RESPONSIVE (unificat)
   ========================================================== */
.img-res,.img-responsive,.contenidor-pagina img{display:block;max-width:100%;height:auto;margin:0 auto;}

/* ==========================================================
   CARRO
   ========================================================== */
#carroContenidor{max-width:950px;width:100%;margin:0 auto;}
#carroContenidor table{width:100%;table-layout:fixed;}

/* ==========================================================
   GUIA ELEMENTS EMPRESA
   ========================================================== */
.mcca-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;max-width:630px;margin:0 auto;padding:20px;box-sizing:border-box;}
.mcca-producte{border:1px solid #ccc;padding:10px;background:#fff;text-align:center;transition:transform .2s,box-shadow .2s;}
.mcca-producte img{width:150px;height:150px;object-fit:cover;display:block;margin:0 auto 10px;}
.mcca-producte p{font-size:13px;color:#333;line-height:1.3;margin:0;}
.mcca-producte:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(0,0,0,.1);border-color:#999;}

/* ==========================================================
   PÀGINA / LAYOUT
   ========================================================== */
.contenidor-pagina{max-width:950px;width:100%;margin:0 auto;padding:0 10px;}
.contenidor-1046{max-width:1046px;margin:0 auto;padding:10px;box-sizing:border-box;}
.fons-blanc{background:#fff;}
.linia-global{display:flex;flex-wrap:wrap;gap:20px;box-sizing:border-box;max-width:100%;overflow-x:hidden;}
.columna-esquerra{flex:1 1 0;min-width:0;}
.columna-dreta{width:165px;flex-shrink:0;}
.area-contingut{flex:1 1 auto;min-width:0;}
.area-lateral{width:180px;flex-shrink:0;}
.nomostrar-en-mobil{display:block;}

/* ==========================================================
   CART MÒBIL (off-canvas)
   ========================================================== */
.cart-toggle-icon{background-color:rgba(192,0,0,.8)!important;}

@media (min-width:769px){
  .cart-toggle-icon,.close-cart{display:none!important;}
  #cart-panel{position:static!important;transform:none!important;width:auto!important;height:auto!important;box-shadow:none!important;}
}

/* ==========================================================
   COLUMNES TEXT
   ========================================================== */
.dos-columnes-text,.tres-columnes-text,.cinc-columnes-text{display:flex;flex-wrap:wrap;gap:20px;margin:0 auto;}
.dos-columnes-text{max-width:900px;}
.tres-columnes-text{max-width:1200px;}
.cinc-columnes-text{max-width:1400px;}
.dos-columnes-text .columna{flex:1 1 45%;}
.tres-columnes-text .columna{flex:1 1 30%;min-width:280px;}
.cinc-columnes-text .columna{flex:1 1 18%;min-width:220px;}

/* ==========================================================
   RESPONSIVE (768px)
   ========================================================== */
@media (max-width:768px){

  /* Carro: apilar */
  #carroContenidor tr,#carroContenidor td{display:block;width:100%!important;}
  #carroContenidor td{padding:10px 0;}
  #carroContenidor table{display:block;width:100%;overflow-x:auto;}

  /* MCCA: 1 columna + centrats */
  .mcca-grid{grid-template-columns:1fr;}
  .mcca-producte{max-width:320px;margin:0 auto;width:100%;box-sizing:border-box;}
  .mcca-producte img{width:100%;max-width:150px;height:auto;margin:0 auto 10px;}

  /* Layout */
  .nomostrar-en-mobil{display:none;}
  .linia-global{flex-direction:column;gap:0;}

  /* Peu */
  .llista_inferior{flex-direction:column;gap:10px;}
  .fons_ul{width:100%;min-height:unset;padding-top:0!important;}

  /* Cart mòbil */
  #cart-panel{position:fixed;top:0;right:0;width:80%;max-width:300px;height:100%;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s;z-index:2000;}
  #cart-panel:target{transform:translateX(0);}

  e:url('/ic/carro.svg');background-repeat:no-repeat;background-position:center;background-size:contain;z-index:2100;border-radius:50%;}
  .close-cart{display:block;position:absolute;top:10px;right:10px;font-size:1.5em;text-decoration:none;color:#333;z-index:2200;}

  /* Columnes text */
  .dos-columnes-text .columna,.tres-columnes-text .columna,.cinc-columnes-text .columna{flex:1 1 100%;}
}