/* Bartoli Angular Listing (robust) – Flatsome child
Scope: ONLY inside #htmlOfPage (output of [bartoli_angular])
Layout: 4 columns desktop, 2 columns <=1024px
*/

/* 0) Ensure Angular view area isn't constrained */
#htmlOfPage { width: 100%; }
#htmlOfPage [ng-view] { display: block; width: 100%; }

/* 1) Pick ANY container that directly contains the repeated items and grid it */
#htmlOfPage :is(div, section, ul, main, article):has(> [ng-repeat]),
#htmlOfPage :is(div, section, ul, main, article):has(> [data-ng-repeat]) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* 2) Items (the ng-repeat children) look like cards but very light */
#htmlOfPage [ng-repeat],
#htmlOfPage [data-ng-repeat] {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 3) Title clamp */
#htmlOfPage h1, #htmlOfPage h2, #htmlOfPage h3, #htmlOfPage h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* 4) Responsive: 2 columns on tablet+mobile */
@media (max-width: 1024px) {
  #htmlOfPage :is(div, section, ul, main, article):has(> [ng-repeat]),
  #htmlOfPage :is(div, section, ul, main, article):has(> [data-ng-repeat]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* === Card prodotti: bordi arrotondati + bordo standard === */
#htmlOfPage [ng-repeat],
#htmlOfPage [data-ng-repeat] {
  border-radius: 12px;                  /* qui cambi il raggio degli angoli */
  border: 1px solid rgba(0, 0, 0, 0.08);/* qui cambi colore/spessore bordo */
  overflow: hidden;                     /* taglia immagine agli angoli tondi */
  background: #ffffff;                  /* sfondo card */
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* Hover “BasWorld style” leggero */
#htmlOfPage [ng-repeat]:hover,
#htmlOfPage [data-ng-repeat]:hover {
  border-color: #0a7cff;                /* colore bordo in hover */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Override bordo container Ricambi */
#sezioneElencoRicambi .row[id^="div_"] {
  border-radius: 12px !important;                 /* stessi angoli delle card */
  border: 1px solid rgba(0, 0, 0, 0.08) !important; /* stesso colore bordo */
  overflow: hidden !important;
}
/* ===========================================================
   Card prodotti – bordo + angoli arrotondati
   Si applica a tutti gli elementi Angular con ng-repeat/dir-paginate
   =========================================================== */
#htmlOfPage [ng-repeat],
#htmlOfPage [data-ng-repeat],
#htmlOfPage [dir-paginate],
#htmlOfPage [data-dir-paginate] {
  border-radius: 12px;                       /* <-- RAGGIO ANGOLI */
  border: 1px solid rgba(0, 0, 0, 0.08);     /* <-- COLORE/SPESSORE BORDO */
  background: #ffffff;                       /* sfondo card */
  overflow: hidden;                          /* taglia l’immagine sugli angoli tondi */
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

/* Hover “BasWorld style” leggero */
#htmlOfPage [ng-repeat]:hover,
#htmlOfPage [data-ng-repeat]:hover,
#htmlOfPage [dir-paginate]:hover,
#htmlOfPage [data-dir-paginate]:hover {
  border-color: #0a7cff;                     /* <-- COLORE BORDO IN HOVER */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);/* ombra card */
  transform: translateY(-2px);               /* piccolo sollevamento */
}
/* ===========================================================
   CARD UNIVERSALE ANGULAR (Usati, Nuovi, Ricambi)
   =========================================================== */

/* Questo è il contenitore vero della card */
#htmlOfPage div.row[style*="margin: 5px"],
#htmlOfPage div.row[style*="margin-bottom: 20px"],
#htmlOfPage div.row[style*="border: 1px"] {
    border-radius: 12px !important;              /* angoli arrotondati */
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* bordo uniforme */
    overflow: hidden !important;                 /* taglia immagine sulle curve */
    background: #ffffff !important;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* Hover stile BasWorld */
#htmlOfPage div.row[style*="margin: 5px"]:hover,
#htmlOfPage div.row[style*="margin-bottom: 20px"]:hover,
#htmlOfPage div.row[style*="border: 1px"]:hover {
    border-color: #0a7cff !important;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}