/* ---------------------------------------------------------------------------
   Gli archivi del negozio
   ---------------------------------------------------------------------------
   Le pagine di categoria le disegnava il tema Envo, che con il passaggio a
   Bricks non è più attivo: le schede avevano perso bordo, titolo in
   sovrimpressione e animazione al passaggio del mouse, e la colonna delle
   categorie era sparita.

   Tutti i valori qui sotto sono misurati sul sito in produzione, che gira
   ancora con Envo.
   --------------------------------------------------------------------------- */

/* La griglia: fuori è il contenitore di Bootstrap, dentro due colonne di 2/3
   e 1/3 che sotto i 992 px si impilano. Il riempimento di 15 px per colonna
   è quello che in Envo veniva dalle classi col-md. */
.negozio-archivio {
    width: 100%;
    margin-inline: auto;
    padding: 0;
    font-family: "Open Sans Condensed", "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #000;
}

@media (min-width: 768px) {
    .negozio-archivio { max-width: 750px; }
}

@media (min-width: 992px) {
    .negozio-archivio { max-width: 970px; }
}

@media (min-width: 1200px) {
    .negozio-archivio { max-width: 1170px; }
}

.negozio-principale,
.negozio-colonna {
    width: 100%;
    padding: 0 15px;
}

/* Le due colonne affiancate: sono flottanti come in Bootstrap, perche' con i
   riquadri flessibili le due percentuali arrotondate arrivano a sfiorare la
   larghezza della riga e la colonna finisce sotto. */
@media (min-width: 992px) {
    .negozio-principale { float: left; width: 66.66666667%; }
    .negozio-colonna    { float: left; width: 33.33333333%; }
}

.negozio-archivio::after {
    content: "";
    display: table;
    clear: both;
}

/* Senza colonna laterale il contenuto prende tutta la larghezza. */
.negozio-archivio.senza-colonna .negozio-principale {
    width: 100%;
}

/* Envo stringe di poco tutti i titoli. Senza questo i nomi delle categorie
   piu' lunghi vanno a capo una riga prima e coprono meta' immagine. */
.negozio-archivio h1,
.negozio-archivio h2,
.negozio-archivio h3,
.negozio-archivio h4,
.negozio-archivio h5,
.negozio-archivio h6 {
    letter-spacing: -.02em;
    word-wrap: break-word;
}

/* Bricks centra il titolo dell'archivio; in Envo e' allineato a sinistra
   insieme alla descrizione della categoria. */
.negozio-archivio .bricks-archive-title-wrapper {
    text-align: left;
}

.negozio-archivio .bricks-archive-title-wrapper .title {
    margin: 20px 0 10px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    color: #000;
}

.negozio-archivio .term-description {
    margin: 0;
    padding: 0;
}

/* ------------------------------- le schede ------------------------------- */

/* Bricks dispone i prodotti con una griglia; in Envo sono riquadri
   affiancati, e la differenza si vede perché il titolo va in sovrimpressione
   sul fondo della scheda. */
.negozio-archivio ul.products {
    display: block;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.negozio-archivio ul.products::after {
    content: "";
    display: table;
    clear: both;
}

.negozio-archivio ul.products li.product {
    display: list-item;
    position: relative;
    float: left;
    width: 30.75%;
    /* Il margine sotto è 2.992em di WooCommerce; quello sopra lo aggiunge
       Envo. Con il carattere a 18 px fanno 53,856 px e 15 px. */
    margin: 15px 3.8% 2.992em 0;
    /* Envo lascia 8 px dentro la scheda di un prodotto e nessuno dentro
       quella di una categoria, dove l'immagine arriva al bordo. */
    padding: 8px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    text-align: center;
    transition: all .3s ease;
}

.negozio-archivio ul.products li.product.product-category {
    padding: 0;
}

/* Ogni riga riparte sotto tutte le schede precedenti. Senza, l'animazione
   al passaggio del mouse cambia di qualche pixel l'altezza delle schede: con
   il mouse veloce tre schede della stessa riga sono a meta' transizione con
   altezze diverse, e la prima della riga dopo si incastra sotto la piu' corta
   finendo in colonna centrale. WooCommerce lo evita con la stessa regola. */
.negozio-archivio ul.products li.product.first {
    clear: both;
}

.negozio-archivio ul.products li.product.last {
    margin-right: 0;
}

/* Sotto i 768 px WooCommerce passa a due colonne larghe 48 per cento, una a
   sinistra e una a destra. Il margine sopra resta quello di Envo. */
@media only screen and (max-width: 768px) {
    .negozio-archivio ul.products li.product {
        width: 48%;
        clear: both;
        margin: 15px 0 2.992em;
    }

    .negozio-archivio ul.products li.product:nth-child(2n) {
        float: right;
        clear: none;
    }
}

.negozio-archivio ul.products li.product a {
    color: #000;
    text-decoration: none;
}

/* Il riquadro della categoria e' un blocco in linea: lo spazio che la riga di
   testo lascia sotto l'immagine fa parte dell'altezza della scheda. */
.negozio-archivio ul.products li.product.product-category > a {
    display: inline-block;
    width: 100%;
}

.negozio-archivio ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    width: 100%;
    margin: 0;
}

.negozio-archivio ul.products li.product a img {
    display: block;
    width: 100%;
    height: auto;
    /* Envo alza l'immagine di 20 px, ma il CSS aggiuntivo del sito riporta i
       margini a zero: a riposo la scheda è compatta. */
    margin: 0;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .75);
    transition: all .3s ease;
}

/* L'animazione: l'immagine sale di 25 px e l'ombra si allarga, in tre decimi
   di secondo. Il titolo resta agganciato al fondo della scheda. */
.negozio-archivio ul.products li.product:hover a img {
    margin-top: -25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, .75);
}

.negozio-archivio .woocommerce-loop-category__title {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.negozio-archivio .woocommerce-loop-category__title:hover {
    background: #222;
}

/* Il numero fra parentesi: senza azzerare il riempimento che gli mette
   Bricks il titolo guadagna 12 px e va a capo una riga prima. */
.negozio-archivio .woocommerce-loop-category__title .count {
    padding: 0;
    background: transparent;
    color: #fff;
}

/* Il titolo di un prodotto invece sta sotto l'immagine, nero su bianco. */
.negozio-archivio .woocommerce-loop-product__title {
    position: static;
    margin: 0;
    padding: 9px 0;
    background: none;
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.negozio-archivio ul.products li.product a.button {
    display: inline-block;
    margin: 5px 0 15px;
    padding: 10px 20px;
    border: 1px solid #767676;
    border-radius: 3px;
    background-color: transparent;
    box-shadow: none;
    color: #767676;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.negozio-archivio .woocommerce-result-count {
    margin: 0 0 18px;
    font-size: 18px;
    color: #000;
}

/* ---------------------------- colonna laterale ---------------------------- */

.negozio-colonna .widget {
    position: relative;
    margin: 0 0 20px;
    padding: 0;
    word-wrap: break-word;
    hyphens: auto;
}

/* Il titolo del riquadro sta in mezzo a una riga che lo attraversa: la riga è
   lo pseudo-elemento, il fondo bianco del titolo la interrompe. */
.negozio-colonna .widget-title {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    margin: 10px 0;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
}

.negozio-colonna .widget-title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e2e2e2;
}

.negozio-colonna .widget-title h3 {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    background-color: #fff;
    border: 1px solid transparent;
    color: #404040;
    font-size: 18px;
    font-weight: 300;
    line-height: 18px;
    transition: border-color .7s ease;
}

.negozio-colonna .widget:hover .widget-title h3 {
    border-color: #e2e2e2;
}

.negozio-colonna .widget ul {
    margin: 0 0 10px;
    padding-left: 0;
    list-style-type: none;
}

.negozio-colonna .widget li > ul {
    margin: 0;
    padding-left: 15px;
}

.negozio-colonna .widget ul li {
    margin: 4px 0 0;
    padding: 0 0 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.negozio-colonna .widget ul li:last-child {
    border-bottom: none;
}

.negozio-colonna .widget a {
    color: #000;
    text-decoration: none;
}