@charset "UTF-8";
/* COLOR VARIABLES
============================================= */
/* BASE */
/* GREY */
/* BLUE */
/* AZURE */
/* ORANGE */
/* YELLOW */
/* ============================================= */
/*$marginMenu: 150px;*/
/* COLORS
============================================= */
/* BG IMAGES
============================================= */
/* FLEXBOX
============================================= */
/* GRID
============================================= */
/* BOX SHADOW
============================================= */
/* OPACITY
============================================= */
/* TRANSITION
============================================= */
/* TRANSFORM
============================================= */
/* BORDER RADIUS
============================================= */
/* TEXT TRANSFORM
============================================= */
/* FONT
============================================= */
/* MANROPE
   =============================================
   font-display: optional e NON swap.

   Con "swap" il browser disegna subito col font di sistema e poi sostituisce
   Manrope quando arriva: la sostituzione e' per definizione un ricalcolo delle
   larghezze. Sul menu si vedeva come un guizzo — la riga di voci e' larga 18px
   in piu' col font vero, e avendo justify-content:center ogni voce si spostava
   di ~9px.

   Con "optional" il browser da al font ~100ms: se e' pronto lo usa da subito,
   se non lo e' tiene il fallback per QUESTA visita e non sostituisce piu'.
   In nessuno dei due casi il layout si muove.

   Perche' funziona bene qui: i woff2 sono self-hosted e pesano 14KB l'uno, e
   sono precaricati in _css.php (400, 500, 700), quindi la finestra dei 100ms
   la rispettano praticamente sempre.

   Il compromesso, da sapere: alla primissima visita con cache vuota e rete
   lenta la pagina puo' restare col font di sistema fino alla navigazione
   successiva. E' il prezzo di non avere spostamenti.
   ============================================= */
/* manrope-regular - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("/library/fonts/manrope-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  src: url("/library/fonts/manrope-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  src: url("/library/fonts/manrope-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  src: url("/library/fonts/manrope-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  src: url("/library/fonts/manrope-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* SCROLLBAR
============================================= */
/* Barra di scroll sottile, aspetto simile a quella di macOS.
   Va dichiarata due volte: `scrollbar-width`/`scrollbar-color` e' lo standard
   (Firefox e Chromium 121+), i pseudo-elementi ::-webkit-scrollbar coprono
   Safari e i Chromium precedenti. Dove valgono entrambi vincono i pseudo.

   NON usarlo con un selettore universale: i ::-webkit-scrollbar hanno la
   precedenza su `scrollbar-width: none`, quindi farebbero ricomparire le barre
   nascoste di proposito (.filtri-shop, .menu-container, ecc.). */
.subcat-desc {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.subcat-desc h2 {
  flex: 0 0 35%;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
}
.subcat-desc p {
  font-size: 14px;
  line-height: 24px;
}

section.strip.two-boxes-container {
  /*gap: $margin40;*/
  /*box-sizing: border-box;
  margin-bottom: $margin130;*/
}
section.strip.two-boxes-container .two-boxes.products-list {
  gap: clamp(20px, 1.5vw, 40px);
}
section.strip.two-boxes-container .two-boxes.products-list article {
  /*width: calc(33.33333% - 2px - $margin40 * 2 / 3);*/
  width: calc(50% - clamp(20px, 1.5vw, 40px) * 2 / 2);
  background-color: #F7F7F7;
  gap: 20px;
  padding: 20px;
  /*border: 1px solid $grey-100;*/
  /*a {
    flex: 0 0 calc(50% - ($gap30/2));
    width: calc(50% - ($gap30/2));

    picture {
      aspect-ratio: 2/1;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }*/
  /*.txt {
    flex: 0 0 calc(50% - ($gap30/2));
    width: calc(50% - ($gap30/2));

    h2 {
      font-size: $h3FontSize;
      line-height: 130%;
    }
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .actions {
      @include flex();
      justify-content: flex-start;
      gap: 10px;

      .btn {
        flex: 0 0 auto;
        width: auto;
        margin: 10px 0 0 0;
      }
    }
  }*/
}
section.strip.two-boxes-container .two-boxes.products-list article a:not(.btn) {
  width: 100%;
}
section.strip.two-boxes-container .two-boxes.products-list article picture {
  aspect-ratio: 2/1;
  height: unset;
}
section.strip.two-boxes-container .two-boxes.products-list article picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.strip.two-boxes-container .two-boxes.products-list article h3 {
  color: #262626;
  font-size: clamp(20px, 2.2vw, 24px);
  text-align: left;
  width: 100%;
}
section.strip.two-boxes-container .two-boxes.products-list article p {
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
  text-align: left;
  width: 100%;
}
section.strip.two-boxes-container .two-boxes.products-list article .actions {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px 8px;
}
section.strip.two-boxes-container .two-boxes.products-list article .actions .btn {
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
@media all and (max-width: 1335px) {
  section.strip.two-boxes-container .two-boxes.products-list article .actions .btn {
    flex-grow: 1;
  }
}
@media all and (max-width: 1023px) {
  section.strip.two-boxes-container .two-boxes.products-list {
    flex-direction: row;
  }
  section.strip.two-boxes-container .two-boxes.products-list article {
    width: calc(50% - clamp(20px, 1.5vw, 30px) / 2);
  }
}
@media all and (max-width: 568px) {
  section.strip.two-boxes-container .two-boxes.products-list article {
    width: 100%;
  }
}

/*# sourceMappingURL=catalogue.css.map */