/*
Custom Css
*/
.btn-darkred {
    background-color: #B0DFE5; /* dark red */
    color: #543E31;
    border: none;
}
.btn-darkred:hover {
    background-color: #543E31;
}

.category-img-fix {
    width: 160px;
    height: 160px;
    object-fit: contain; /* shows entire image */
    background-color: white;
    padding: 5px;
}

.zoom-out {
    transform: scale(0.25);  /* adjust to desired zoom-out level */
}

.fixed-img {
    height: 250px;          /* or any height you prefer */
    object-fit: cover;      /* crop to fill the box */
    width: 100%;            /* full width of the card */
}

 .img-scaled {
            object-fit: cover;
            transform: scale(0.8);
        }

.img-contain {
    object-fit: contain;
    background-color: #f8f9fa; /* Light gray background to fill empty space */
}

.scaled-img {
    height: 250px;
    object-fit: contain;   /* no crop, image fits inside box */
    width: 100%;
    background-color: #fff; /* optional, to handle transparency or space */
}


/* Pallini */
.product-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 6px;
}

.product-dots .dot {
  height: 10px;
  width: 10px;
  background-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.product-dots .dot.active {
  background-color: #543E31; /* colore attivo */
}


    /* Force all product images inside cards to same size */
.product-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;      /* fixed height for all cards */
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* or 'cover' if you want them cropped */
    display: none;
    background-color: #fff; /* avoids transparency issues */
}

.product-image-container img.active {
    display: block;
}


.card-body a.h3 {
  display: block;
  min-height: 4.5em;   /* spazio per 2 righe circa */
  line-height: 1.2em;  /* regola altezza delle righe */
  text-align: center;  /* centra il testo */
  overflow: hidden;    /* nasconde testo troppo lungo */
}

.card-body p {
  text-align: center;  /* centra il prezzo */
}

.card-body ul {
  justify-content: center !important; /* centra le stelline */
}

/* Navbar con sfondo marrone scuro */
.navbar-main-brown {
    background-color: #543E31 !important;
}

/* Navbar con sfondo azzurro chiaro */
.navbar-main-blue {
    background-color: #B0DFE5 !important;
}

.bg-custom-brown {
    background-color: #543E31 !important;
}

.bg-custom-blue {
    background-color: #B0DFE5 !important;
    color: #000 !important; /* testo nero su sfondo chiaro */
}

.text-custom-dark {
    color: #543E31 !important;
}

.text-custom-light {
    color: #B0DFE5 !important;
}

/* Frecce */ 

.product-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between; /* una a sinistra, una a destra */
  transform: translateY(-50%); /* centra verticalmente */
  padding: 0 10px; /* distanzia un po' dai bordi */
  pointer-events: none; /* evita che blocchi click sull’immagine */
}

.product-arrows .arrow {
  pointer-events: auto; /* ma le frecce restano cliccabili */
  font-size: 28px;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

.product-arrows .arrow:hover {
  color: #543E31;
}

/* Desktop: mostra frecce solo in hover */
@media (min-width: 368px) {
  .product-arrows {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .product-image-container:hover .product-arrows {
    opacity: 1;
  }
}

/* Mobile: frecce sempre visibili */
@media (max-width: 168px) {
  .product-arrows {
    top: auto;         /* rimuove il top centrato */
    bottom: 8px;       /* stessa altezza dei puntini */
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    gap: 160px;         /* spazio tra le frecce */
    opacity: 1;        /* sempre visibili su mobile */
 
  }
}