:root{--font-sans:Arial,sans-serif;/* Colors corporatius */--green:#7AA945;--green-hover:#567a31;--red:#c9302c;/* vermell principal unificat */--red-hover:#a82624;/* una mica més fosc per hover */--radius-btn:8px;/* tots els botons normals */--radius-cta:12px;/* botons grans / compra */--shadow-sm:0 2px 8px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.15);--shadow-lg:0 6px 16px rgba(0,0,0,.2);--t:.3s ease;}

/* ==========================================================
   FILA PREU + BOTÓ
   ========================================================== */
.fila-preu-boto{display:flex;align-items:center;gap:12px;margin-top:10px;}

/* ==========================================================
   BOTÓ COMPRAR PETIT (verd)
   ========================================================== */
.boto-comprar{display:inline-flex;align-items:center;justify-content:center;height:45px;padding:0 12px;gap:6px;background-color:var(--green);color:#fff;font:700 14px var(--font-sans);text-decoration:none;border-radius:var(--radius-btn);cursor:pointer;transition:background-color var(--t);}
.boto-comprar:hover{background-color:var(--green-hover);}
.boto-comprar:visited,.boto-comprar:active{color:#fff;}

/* ==========================================================
   BOTÓ TELÈFON (vermell unificat)
   ========================================================== */
.boto-telefon{display:inline-flex;align-items:center;justify-content:center;background-color:var(--red);color:#fff;padding:14px 30px;border-radius:var(--radius-btn);font:700 18px var(--font-sans);text-decoration:none;border:0;box-sizing:border-box;max-width:360px;margin:0 auto;transition:background-color var(--t);}
.boto-telefon:hover{background-color:var(--red-hover);}
.boto-telefon .phone-icon{margin-right:10px;}

/* ==========================================================
   BOTÓ GRAN COMPRA (CTA)
   ========================================================== */
.boto-compra{text-align:center;margin-top:20px;}
.boto{border:0;color:#fff;cursor:pointer;display:inline-block;font-size:26px;font-weight:700;text-transform:uppercase;padding:16px 37px;border-radius:var(--radius-cta);background:linear-gradient(135deg,#6ab04c,#58a034);box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t),background var(--t);}
.boto span{display:block;margin-top:5px;font-size:16px;font-weight:400;text-transform:none;}
.boto:hover{background:linear-gradient(135deg,#58a034,#4e9030);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.boto:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.2);}

/* ==========================================================
   BOTONS VERMELLS DE NAVEGACIÓ / PAGINACIÓ
   ========================================================== */
.boto-nav-red{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;background-color:var(--red);color:#fff;font:700 14px var(--font-sans);text-decoration:none;border-radius:var(--radius-btn);border:0;cursor:pointer;transition:background-color var(--t),box-shadow var(--t);}
.boto-nav-red:hover{background-color:var(--red-hover);box-shadow:0 2px 6px rgba(0,0,0,.2);}
.boto-nav-red:visited,.boto-nav-red:active{color:#fff;}

/* ==========================================================
   BOTÓ CARRO (verd petit)
   ========================================================== */
.boto-carro-ico{width:34px;height:34px;padding:0;border-radius:var(--radius-btn);display:inline-flex;align-items:center;justify-content:center;background:var(--green);text-decoration:none;}
.boto-carro-ico .carro-ico{width:28px;height:28px;display:block;background:url("https://www.microgamma.com/ic/carro.svg") no-repeat center / contain;filter:brightness(0) invert(1);}

/* =========================
   CARRETÓ FLOTANT (UNIFICAT)
   ========================= */

/* Base (icona) */
.cart-toggle-icon{background-image:url('/ic/carro.svg');background-repeat:no-repeat;background-position:center;background-size:26px 26px;}

/* DESKTOP: amagat */
@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;}}

/* MÒBIL */
@media (max-width:768px){
#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);}
.cart-toggle-icon{display:block !important;position:fixed;top:36px;/* ← 20px amunt (abans 80px) */right:11px;width:40px;height:40px;background-color:red !important;border-radius:50%;z-index:2100;box-shadow:0 6px 16px rgba(0,0,0,.18);}
.close-cart{display:block;position:absolute;top:10px;right:10px;font-size:1.5em;text-decoration:none;color:#333;z-index:2200;}
}

/* ==========================================================
   WHATSAPP / FLOATS
   ========================================================== */
.whatsapp-float{position:fixed;bottom:70px;right:10px;z-index:1000;cursor:pointer;transition:transform var(--t);}
.whatsapp-float img{width:60px;height:60px;border-radius:50%;box-shadow:none;background:none;}
.whatsapp-float:hover{transform:scale(1.1);}
.text-float{position:fixed;top:20px;left:20px;z-index:1000;background:#fff;padding:10px;box-shadow:var(--shadow-sm);}

/* ==========================================================
   EXTRA MÒBIL
   ========================================================== */
@media (max-width:480px){.boto-telefon{font-size:16px;width:90%;padding:12px 20px;}}