/* ==========================================================================
  CUSTOM CSS COMPLETO FABIANA BOENTE - OTTIMIZZATO e ORDINATO (2024-02-05)
  ========================================================================== */

/* ==========================================================================
  PERSONALIZZAZIONI BASE (APPLICATE a TUTTO il SITO)
  ========================================================================== */

/* Personalizzazione BODY (Font) */
body {
  font-family: Avenir, sans-serif; /* Font PRINCIPALE (Avenir) con fallback generico */
  font-weight: 300;                /* Peso del font (leggero: 300) */
}

/* Background Generale #wrapper */
#wrapper {
  background: rgb(255, 250, 252);    /* Colore background generale */
}

/* Personalizzazione LINKS (Colori e Decorazione) */
a {
  color: rgb(170, 147, 155);       /* Colore LINK PRINCIPALE */
  text-decoration: none;            /* RIMUOVI sottolineatura LINK predefinita */
}

a:focus,
a:hover {
  color: rgb(170, 147, 155);       /* Colore LINK HOVER (stesso colore di base) */
  text-decoration: underline;       /* AGGIUNGI sottolineatura LINK HOVER */
}


/* Background descrizione categoria (pagina categoria) */
.card {
    background-color: transparent;
}

.card-block
 {
padding: 0rem 0rem 0rem;
}

/* ==========================================================================
  PERSONALIZZAZIONI HEADER
  ========================================================================== */

/* Background HEADER */
#header {
  background: rgb(252, 247, 249) !important; /* Sfondo HEADER */
}

/* Colori LINK HEADER (HOVER) */
#header a:hover,
.language-selector a:hover,
#header .top-menu a[data-depth="0"]:hover {
  color: rgb(202, 179, 187);       /* Colore LINK HOVER HEADER */
}

/* Colore BACKGROUND CARRELLO VUOTO */
#header .header-nav .blockcart {
  background: transparent;
}

/* Background HEADER-MENU (sezione superiore dell'header) */
#header .header-top {
  background: #fff;
}

/* Background CARRELLO ATTIVO (quando ci sono prodotti) */
#header .header-nav .cart-preview.active {
  background: rgb(202, 179, 187);
}

/* Colore MENU LINGUA DROPDOWN ATTIVO (HOVER) */
/* Questo selettore è ampio, assicurati che non crei conflitti indesiderati */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type=submit] .search:hover,
.top-menu .sub-menu a:hover { /* Questo è specifico per il sottomenu, vedi sotto */
  color: rgb(202, 179, 187);
}

/* ==========================================================================
  PERSONALIZZAZIONE MENU PRINCIPALE
  ========================================================================== */

/* Stile LINK MENU PRINCIPALE (Primo Livello) */
.top-menu a[data-depth="0"] {
  font-weight: 300;
}

/* Stile ELEMENTI DROPDOWN MENU (Sottomenu) */
.dropdown-item {
  font-weight: 300;
  color: #5c5c5c;
}

/* Colore LINK DROPDOWN MENU (Sottomenu) - HOVER - DESKTOP */
#_desktop_top_menu .sub-menu .dropdown-item:hover {
  color: rgb(202, 179, 187);
}

/* Colore LINK DROPDOWN MENU (Sottomenu) - HOVER - MOBILE */
#mobile_top_menu_wrapper .top-menu .sub-menu .dropdown-item:hover {
  color: rgb(202, 179, 187);
}

/* ==========================================================================
  PERSONALIZZAZIONE HOME PAGE (Elementi Generali)
  ========================================================================== */

/* Colore LINK "VISUALIZZA TUTTI I PRODOTTI" (Blocchi Vetrina/Promozioni) */
#products .all-product-link,
.featured-products .all-product-link,
.product-accessories .all-product-link {
  color: rgb(202, 179, 187);
}

/* Colore TITOLI BLOCCHI PRODOTTI (Vetrina/Promozioni) */
#products .products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title {
  color: rgb(172, 145, 154);
}

/* Colore Titoli Account nel Footer (My Account) */
#block_myaccount_infos .myaccount-title a {
  color: rgb(172, 145, 154);
}


/* ==========================================================================
  PERSONALIZZAZIONE BANNER
  ========================================================================== */
/* Contenitore principale del Banner */
        .banner-container {
            position: relative;
            width: 100%;
        }

        /* Stile per il banner principale con immagine di sfondo */
        .hero-banner {
            background-image: url('https://fabianaboente.com/img/cms/banners/BANNER_BOENTE_3x2_2.jpeg');
            height: 75vh;
            max-height: 600px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        /* Overlay per migliorare la leggibilità del testo */
        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3); /* Equivalente a bg-black bg-opacity-30 */
        }

        /* Contenuto testuale del banner */
        .banner-content {
            position: relative;
            z-index: 10;
            padding: 2rem; /* Equivalente a p-8 */
            color: white;
        }

        /* Titolo principale */
        .banner-title {
            font-family: 'Playfair Display', serif;
            font-weight: 500; /* Equivalente a font-medium */
            margin-bottom: 1rem; /* Equivalente a mb-4 */
            letter-spacing: 0.025em; /* Equivalente a tracking-wide */
            line-height: 1.25; /* Equivalente a leading-tight */
            font-size: 3rem; /* Equivalente a text-4xl */
        }

        /* Sottotitolo */
        .banner-subtitle {
            font-weight: 300; /* Equivalente a font-light */
            margin-bottom: 2rem; /* Equivalente a mb-8 */
            font-size: 1.125rem; /* Equivalente a text-lg */
            color: #fff; /* Testo bianco */
        }

        /* Bottone */
        .explore-button {
            display: inline-block;
            background-color: white; /* Equivalente a bg-white */
            color: #2d3748; /* Equivalente a text-gray-800 */
            font-weight: 500; /* Equivalente a font-medium */
            padding: 0.75rem 2rem; /* Equivalente a py-3 px-8 */
            border-radius: 9999px; /* Equivalente a rounded-full */
            font-size: 0.875rem; /* Equivalente a text-sm */
            text-transform: uppercase;
            letter-spacing: 0.05em; /* Equivalente a tracking-wider */
            text-decoration: none;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalente a shadow-lg */
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .explore-button:hover {
            background-color: #e2e8f0; /* Equivalente a hover:bg-gray-200 */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Equivalente a hover:shadow-xl */
        }
        
        /* Stili per la sezione di esempio sottostante */
        .content-section {
            padding: 2rem;
            text-align: center;
            max-width: 1280px; /* Emulazione di 'container' */
            margin-left: auto;
            margin-right: auto;
        }

        .content-title {
            font-size: 1.5rem; /* Equivalente a text-2xl */
            font-weight: 300; /* Equivalente a font-light */
            color: #fff; /* Equivalente a text-gray-700 */
        }

        /* Stili responsive */
        @media (min-width: 768px) { /* Breakpoint md */
            .banner-title {
                font-size: 3.75rem; /* Equivalente a md:text-6xl */
            }
            .banner-subtitle {
                font-size: 1.25rem; /* Equivalente a md:text-xl */
            }
        }
        @media (min-width: 1024px) { /* Breakpoint lg */
            .banner-title {
                font-size: 4.5rem; /* Equivalente a lg:text-7xl */
            }
        }



/* ==========================================================================
  PERSONALIZZAZIONE FOOTER
  ========================================================================== */

/* Colore TITOLI MENU FOOTER (Catalogo, Informazioni, Negozio) */
.footer-container .h3,
.footer-container .h4 {
  color: rgb(172, 145, 154);
}

/* Colore HOVER MENU FOOTER */
.account-list a:hover,
.block_newsletter form button[type=submit] .search:hover,
.footer-container li a:hover {
  color: rgb(202, 179, 187);
}

/* ==========================================================================
  PERSONALIZZAZIONE MENU LATERALE CATEGORIE (Blocco Categorie Sidebar)
  ========================================================================== */

/* Titolo Blocco Categorie (H6) */
.block-categories .h6 {
  font-size: 1.1rem;
  font-weight: 300;
}

/* Link Categorie di PRIMO LIVELLO (Sottomenu Laterale) */
.block-categories .category-sub-menu li[data-depth="0"]>a {
  font-size: 0.95rem;
  font-weight: 300;
}

/* Colore HOVER LINK Categorie Laterali (e Icone Collapse/Expand, Label Carrello) */
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover {
  color: rgb(202, 179, 187);
}

/* Dimensione ICONE Material Icons (Generale) */
.material-icons {
  font-size: 0.95rem;
}

/* ==========================================================================
  PERSONALIZZAZIONE BOX SOTTOCATEGORIE (Visualizzazione Automatica - se riattivata)
  ========================================================================== */
/* Selettore .card è molto generico, assicurati che non ci siano conflitti */
#subcategories .card { 
  background-color: transparent;
}

/* Bordo IMMAGINI Sottocategorie (Visualizzazione Automatica) - HOVER */
#subcategories ul li:hover .subcategory-image a {
  padding: 7px;
  border: 3px solid rgb(202, 179, 187);
}

/* ==========================================================================
  PERSONALIZZAZIONE PAGINA CATEGORIE (griglia prodotti, not found, etc...)
  ========================================================================== */

/* SFONDO Nome Prodotto e Prezzo (Sotto Immagine Miniatura) */
.product-miniature .product-description {
  background: rgb(255, 250, 252);
}

/* Bordi ARROTONDATI Immagine Miniatura Prodotto */
.product-miniature .thumbnail-container .product-thumbnail img {
  border-radius: 5px;
}

/* Sfondo ANTEPRIMA RAPIDA (Quick View) con transizione su Immagine Miniatura */
.product-miniature .highlighted-informations {
  background: rgb(255, 250, 252);
}

/* Colore PAGINAZIONE ATTIVA (Prodotti Pagina Categoria) */
.pagination .current a {
  color: rgb(202, 179, 187);
}

/* Visibilità blocco nessun prodotto nella categoria (invisibile) */
#products .page-not-found {
    display: none;
}

/* ==========================================================================
  PERSONALIZZAZIONE PAGINA PRODOTTI
  ========================================================================== */

/* Sfondo TRASPARENTE Tabella Descrizione/Informazioni Prodotto */
.tabs {
  background: rgba(255, 255, 255, 0%);
}

/* Colore BORDO INFERIORE Bottoni Tabella Descrizione/Informazioni */
.tabs .nav-tabs {
  border-bottom: rgb(244, 239, 240) 2px solid;
}

/* Colore BORDO INFERIORE ATTIVO Tabella Descrizione/Informazioni */
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border-bottom: rgb(202, 179, 187) 3px solid;
}

/* Colore TESTO ATTIVO Tabella Descrizione/Informazioni */
.tabs .nav-tabs .nav-link.active {
  color: rgb(202, 179, 187);
}

/* Colore PREZZO PRODOTTI */
.product-price {
  color: rgb(152, 133, 139);
}

/* Colore BOTTONE "AGGIUNGI AL CARRELLO" */
.btn-primary,
.btn-primary:hover {
  background-color: rgb(202, 179, 187);
  border-color: rgb(202, 179, 187); /* Aggiunto per coerenza */
}

/* ==========================================================================
  PERSONALIZZAZIONE IMMAGINE CATEGORIA (Pagina Categoria - Immagine Principale)
  ========================================================================== */
.block-category .block-category-inner .category-cover img {
  width: 180px; /* Potrebbe essere meglio usare max-width: 100%; e height: auto; per responsività */
  height: 180px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #ccc;
}

/* ==========================================================================
  PERSONALIZZAZIONE MINIATURE PRODOTTI (Generale - FLAGS e THUMB HOVER)
  ========================================================================== */

/* Stile TESTO "Product Flags" (Es. "Sconto", "Novità") */
.product-miniature .product-flags li.product-flag {
  font-weight: 300;
}

/* Stile SFONDO "Product Flags" */
.product-flags li.product-flag {
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  background: #D6BCC5; /* Rosa Antico */
}

/* Stile BORDO "Thumb Hover" (Galleria Immagini Prodotto) */
.product-images>li.thumb-container .thumb.selected,
.product-images>li.thumb-container .thumb:hover {
  border: #D6BCC5 3px solid; /* Rosa Antico */
}

/* ==========================================================================
  PERSONALIZZAZIONE POP-UP PRODOTTO AGGIUNTO AL CARRELLO
  ========================================================================== */
#blockcart-modal .product-name {
  color: rgb(202, 179, 187);
}

/* ==========================================================================
  PERSONALIZZAZIONE MODULO CUSTOM TEXT HOME PAGE (Generale)
  ========================================================================== */
#custom-text {
  background: transparent;
  padding: 0.15rem;
 
}

  #custom-text .page-content.page-cms ul, #custom-text p, .page-content.page-cms #custom-text ul {
    font-size: 1.1rem;
    font-weight: 300;
    color: #232323;
}

/* ==========================================================================
  PERSONALIZZAZIONE IMMAGINI PAGINE CMS e DESCRIZIONI CATEGORIA
  ========================================================================== */

/* Stile IMMAGINI GENERICHE in .cms-block e .cms-box (es. Pagina "Chi Siamo" nella homepage) */
.cms-block img,
.cms-box img {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #ccc;
}

/* IMMAGINI RESPONSIVE nelle DESCRIZIONI CATEGORIA (Editor HTML) */
.cat_desc .rte img {
  max-width: 100% !important; /* Forza larghezza massima */
  height: auto !important;    /* Mantiene proporzioni */
  display: block;
  margin-left: auto;         /* Centra (opzionale) */
  margin-right: auto;        /* Centra (opzionale) */
  border-radius: 5px;
  box-shadow: 2px 2px 5px #ccc;
  margin-top: 15px;         /* Spazio sopra immagine nella descrizione */
  margin-bottom: 15px;        /* Spazio sotto immagine nella descrizione */
}

/* ==========================================================================
  CUSTOM CSS HOMEPAGE - STRUTTURA a TRE SEZIONI
  ========================================================================== */

/* Contenitore PRINCIPALE Homepage (sezione esterna al modulo Custom Text, se presente) */
/* Se .homepage-wrapper è il div più esterno del tuo modulo Custom Text, gli stili qui sono ridondanti
   rispetto a #custom-text se vuoi uno sfondo trasparente. Altrimenti, puoi usarlo. */
.homepage-wrapper {
  background-color: transparent; /* Assicurati che questo sia coerente con #custom-text */
  padding: 30px 0;
  overflow: hidden;
  text-align: center;
}

/* SEZIONE #1: BOX "CHI SIAMO" (RIDOTTO) */
#homepage-about-us .cms-block.home-about-us-2cols {
  background-color: transparent;
  padding: 30px;
  border-radius: 7px;
  margin-bottom: 50px;
  box-shadow: 3px 3px 7px #ccc;
  text-align: center;
}

#homepage-about-us .cms-block.home-about-us-2cols h2.page-subheading {
  font-size: 2em;
  color: #232323;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

#homepage-about-us .cms-block.home-about-us-2cols img.img-responsive {
  max-width: 250px;
  margin-bottom: 25px;
  border-radius: 50%;
  border: 7px solid #f6f6f6;
}

#homepage-about-us .cms-block.home-about-us-2cols p.text-center { /* Classe .text-center è di Bootstrap, usala o definisci qui */
  font-size: 1.1em;
  color: #7a7a7a;
  line-height: 1.8em;
  margin-bottom: 25px;
  font-weight: 500;
}

#homepage-about-us .cms-block.home-about-us-2cols a.btn-primary, /* Modificato da btn-secondary per coerenza con l'HTML fornito */
#homepage-about-us .cms-block.home-about-us-2cols a.btn-secondary { /* Aggiunto per sicurezza se usi btn-secondary */
  padding: 12px 30px;
  font-size: 1em;
  font-weight: 700;
}

/* SEZIONE #2 e #3 (CATALOGO e STILI) - Contenitore Griglia Comune */
.cms-block.homepage-section-2cols { /* Contenitore per le sezioni a 2 colonne */
  background-color: transparent;
  padding: 30px 0px; /* Aggiunto padding laterale per distanziare dal bordo .homepage-wrapper */
  border-radius: 0;
  margin-bottom: 30px; /* Ridotto rispetto a #homepage-about-us per coerenza */
  overflow: hidden;
  text-align: left; /* Allineamento a sinistra per il testo interno */
}

/* Stili per il testo introduttivo e liste nelle sezioni Catalogo e Stili */
.cms-block.homepage-section-2cols .collection-text h2.page-subheading,
.cms-block.homepage-section-2cols .collection-text h3.page-subheading {
  font-size: 1.1em; /* Unificato H2 e H3 per queste sezioni */
  color: #232323;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cms-block.homepage-section-2cols .collection-text p.collection-description,
.cms-block.homepage-section-2cols .collection-text ul.category-link-list.with-descriptions {
  font-size: 1.1em;
  color: #5c5c5c;
  margin-bottom: 15px;
}

.cms-block.homepage-section-2cols .collection-text ul.category-link-list.with-descriptions li {
  margin-bottom: 8px;
}

.cms-block.homepage-section-2cols .collection-text ul.category-link-list.with-descriptions li a {
  color: rgb(170, 147, 155); /* Colore link lista */
}
.cms-block.homepage-section-2cols .collection-text ul.category-link-list.with-descriptions li a:hover {
  color: rgb(202, 179, 187); /* Colore hover link lista */
  text-decoration: underline;
}
.cms-block.homepage-section-2cols .collection-text ul.category-link-list.with-descriptions li strong {
  color: #333; /* Colore diverso per il nome categoria in grassetto */
}

.cms-block.homepage-section-2cols .collection-text p.collection-link a.btn-primary,
.cms-block.homepage-section-2cols .collection-text p.collection-link a.btn-secondary {
  padding: 10px 25px;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 15px; /* Spazio sopra il bottone */
  display: inline-block; /* Per applicare margini e padding correttamente */
}

/* Stile per le immagini nelle sezioni Catalogo e Stili */
.cms-block.homepage-section-2cols .collection-image img.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
  box-shadow: 2px 2px 7px #ccc;
}


/* ==========================================================================
  MEDIA QUERIES per BREAKPOINT RESPONSIVE (PRONTE per FUTURE PERSONALIZZAZIONI)
  ========================================================================== */

/* ---------------- SCHERMI EXTRA-PICCOLI (Smartphone MOLTO Piccoli - max-width: 575px) ---------------- */
@media (max-width: 575px) {
  /* Stili per la homepage */
  #homepage-about-us .cms-block.home-about-us-2cols,
  .cms-block.homepage-section-2cols {
    padding: 20px;
  }
  #homepage-about-us .cms-block.home-about-us-2cols h2.page-subheading,
  .cms-block.homepage-section-2cols .collection-text h2.page-subheading,
  .cms-block.homepage-section-2cols .collection-text h3.page-subheading {
    font-size: 1.5em; /* Riduci dimensione titoli */
    letter-spacing: 0.05em;
  }
  #homepage-about-us .cms-block.home-about-us-2cols img.img-responsive {
    max-width: 180px; /* Riduci dimensione logo */
  }
  #homepage-about-us .cms-block.home-about-us-2cols p.text-center {
    font-size: 1em;
    line-height: 1.6em;
  }
  /* Layout a 1 colonna per le sezioni Catalogo e Stili */
  .cms-block.homepage-section-2cols .row .col-xs-12.col-sm-8,
  .cms-block.homepage-section-2cols .row .col-xs-12.col-sm-4 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
  }
  .cms-block.homepage-section-2cols .row .col-xs-12.col-sm-4 .collection-image {
    margin-top: 20px; /* Spazio tra testo e immagine quando sono in colonna */
  }
}

/* ---------------- SCHERMI PICCOLI (Smartphone/Tablet Verticali - min-width: 576px) ---------------- */
@media (min-width: 576px) {
  /* Se necessario, si possono aggiungere qui stili specifici per schermi >576px e <768px */
  /* Al momento, il layout a 2 colonne per .homepage-section-2cols si attiva da sm (576px) in su
     e le altre regole desktop rimangono valide fino a modifiche specifiche qui o in breakpoint maggiori. */
}

/* ---------------- SCHERMI MEDI (Tablet Orizzontali/Desktop Piccoli - min-width: 768px) ---------------- */
@media (min-width: 768px) {
  /* Ripristino/conferma layout a 2 colonne per le sezioni */
  .cms-block.homepage-section-2cols .row .col-sm-8 {
    width: 66.66666667%; /* Bootstrap default per col-sm-8 */
    float: left;
  }
  .cms-block.homepage-section-2cols .row .col-sm-4 {
    width: 33.33333333%; /* Bootstrap default per col-sm-4 */
    float: left;
  }
  /* Assicura che l'immagine nella colonna destra della sezione Catalogo sia corretta */
  #homepage-catalogo .cms-block.homepage-section-2cols .row .col-xs-12.col-sm-8 {
    float: left; /* Testo a sinistra */
  }
  #homepage-catalogo .cms-block.homepage-section-2cols .row .col-xs-12.col-sm-4 {
    float: right; /* Immagine a destra */
    padding-left: 20px; /* Aggiungi spazio se necessario */
    border-left: 1px solid #eee; /* Aggiungi linea separatrice se necessario */
  }
}

/* ---------------- SCHERMI GRANDI (Desktop Standard/Laptop - min-width: 992px) ---------------- */
@media (min-width: 992px) {
  /* Eventuali aggiustamenti per schermi più grandi */
}

/* ---------------- SCHERMI EXTRA-GRANDI (Desktop Larghi/Monitor - min-width: 1200px) ---------------- */
@media (min-width: 1200px) {
  /* Eventuali aggiustamenti per schermi molto grandi */
}