.acr-page { max-width: 1140px; margin: 0 auto; }

.acr-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: #eaf3fb;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.acr-login__testo {
  margin: 0;
  flex: 1 1 320px;
  color: #0b4f87;
  font-size: .9rem;
  line-height: 1.45;
}
.acr-login__btn { flex: 0 0 auto; white-space: nowrap; }

.acr-sezione { margin-bottom: 36px; }
/* Badge: distinguono le due origini dentro un'unica griglia, cosi' i
   suggeriti riempiono le colonne rimaste invece di aprire una sezione
   nuova con mezza riga vuota. */
.acr-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
  white-space: nowrap;
}
.acr-badge--gia  { background: #0f69b2; color: #fff; }
.acr-badge--sugg { background: #efe8db; color: #6c5c3f; }

.acr-card > .acr-badge,
.acr-listing .product-miniature > .acr-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}

/* le miniature del tema sono in posizione statica: serve il contesto
   per posizionare il badge */
.acr-listing .product-miniature { position: relative; }
.acr-listing .row { margin-left: -8px; margin-right: -8px; }

.acr-griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.acr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 105, 178, .12);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.acr-card:hover {
  border-color: rgba(15, 105, 178, .3);
  box-shadow: 0 8px 22px rgba(15, 105, 178, .12);
}

.acr-card__img { display: block; background: #fff; padding: 12px; }
.acr-card__img img { display: block; width: 100%; height: 150px; object-fit: contain; }

.acr-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 14px;
  flex: 1 1 auto;
}

.acr-card__nome {
  color: #232733;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.acr-card__nome:hover { color: #0f69b2; }

.acr-card__prezzo {
  margin: 0;
  color: #0f69b2;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acr-card__unita,
.acr-card__iva { font-size: .7rem; font-weight: 400; color: #6c7280; }
.acr-card__multiplo,
.acr-card__volte { margin: 0; font-size: .78rem; color: #6c7280; }

.acr-card__btn { margin-top: auto; text-align: center; }
.acr-card__btn.is-loading { opacity: .6; pointer-events: none; }
.acr-card__btn.is-done { background: #1d9e75 !important; border-color: #1d9e75 !important; }

.acr-vuoto { color: #6c7280; margin-bottom: 30px; }

.acr-azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(15, 105, 178, .15);
  flex-wrap: wrap;
}
.acr-indietro { color: #6c7280; }
.acr-indietro:hover { color: #0f69b2; }
.acr-continua { min-width: 220px; text-align: center; }

@media (max-width: 991px) {
  .acr-griglia { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  /* il container del tema su mobile non ha padding laterale:
     senza questo il contenuto va a filo schermo.
     Il titolo pagina sta fuori dal mio template, quindi lo raggiungo
     dal body con :has() invece di duplicarlo. */
  .acr-page { padding: 0 15px; }
  body:has(.acr-page) .page-header,
  body:has(.acr-page) #content-wrapper > .page-header { padding: 0 15px; }

  .acr-griglia { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  .acr-login { padding: 12px 14px; gap: 12px; }
  .acr-login__testo { font-size: .84rem; flex: 1 1 100%; }
  .acr-login__btn { width: 100%; text-align: center; }

  .acr-azioni {
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .acr-indietro { font-size: .85rem; }
  .acr-continua { min-width: 0; flex: 1 1 auto; }

  /* immagini piu' basse: su schermo stretto la card diventava altissima
     e si vedeva un prodotto per schermata */
  .acr-card__img { padding: 8px; }
  .acr-card__img img { height: 110px; }
  .acr-card__body { padding: 0 10px 10px; gap: 4px; }
  .acr-card__nome { font-size: .8rem; min-height: 2.1em; }
  .acr-card__prezzo { font-size: .95rem; }
  .acr-card__iva { font-size: .64rem; }
  .acr-badge { font-size: .62rem; padding: 2px 7px; }
  .acr-card > .acr-badge { top: 7px; left: 7px; }
  .acr-card__btn { font-size: .78rem; padding: 8px 6px; }
}

@media (max-width: 400px) {
  .acr-card__img img { height: 92px; }
  .acr-card__nome { font-size: .76rem; }
  .acr-card__btn { font-size: .72rem; }
}