/* ==========================================================================
   WOOCOMMERCE ARCHIVE CSS (Custom Style)
   ========================================================================== */

/* GRID CONTAINER */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

/* PRODUCT CARD */
.product-card {
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* BADGE OFFERTA (WC dinamico) */
.badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: var(--white);
    font-size: 12px;
    padding: 10px 20px;
    z-index: 10;
    text-transform: uppercase;
    font-weight: bold;
}

/* IMMAGINE PRODOTTO */
.product-image img {
    width: 100%;
    height: auto;
    max-width: 200px;
    margin: 0 auto 15px;
    display: block;
    object-fit: contain;
}

/* TITOLO */
.product-title {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.3;
    font-weight: 300;
}

.product-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.product-title a:hover {
    color: var(--primary-color);
}

/* --- PREZZO DINAMICO WOOCOMMERCE --- */
.product-price {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.product-price del, 
.product-price del .woocommerce-Price-amount {
    color: var(--light-grey) !important;
    font-size: 0.85em;
    text-decoration: line-through;
    font-weight: 400;
}

.product-price ins, 
.product-price ins .woocommerce-Price-amount,
.product-price > .woocommerce-Price-amount {
    color: var(--primary-color) !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

.product-price .amount {
    color: inherit;
}

/* BOTTONI (Convertiti in link <a> per compatibilità AJAX) */
.btn-cart, 
.btn-view {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--light-grey) !important;
    background: var(--white) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-decoration: none !important;
    color: #000 !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.btn-cart:hover, 
.btn-view:hover {
    background: var(--white) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-cart.loading {
    opacity: 0.6;
}

.btn-cart.added::after {
    content: ' \f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 5px;
}

/* RATING (Stelle WooCommerce) */
.rating {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.star-rating {
    font-size: 14px;
    color: var(--primary-color);
    letter-spacing: 2px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* --- BARRA DI ORDINAMENTO --- */
.shop-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 0;
    border-bottom: 1px solid var(--light-grey);
}

.results-count {
    font-size: 0.9rem;
    color: var(--medium-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-ordering select {
    padding: 10px 20px;
    border: 1px solid var(--light-grey);
    background-color: var(--white);
    color: var(--dark-grey);
    font-size: 0.9rem;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s;
}

.woocommerce-ordering select:focus {
    border-color: var(--primary-color);
}

@media (max-width: 600px) {
    .shop-control-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/*--------------------------
SINGLE PRODUCT PAGE
-------------------------*/
/* Stile per il breadcrumb */
.breachpunt {
    margin: 20px 0; /* spazio sopra e sotto */
    font-size: 14px;
}

.breachpunt span {
    padding: 0 5px; /* distanza tra gli elementi */
}

.breachpunt a {
    color: var(--primary-color); /* colore dei link dal colore primario */
    text-decoration: none;
}

.breachpunt a:hover {
    text-decoration: underline; /* effetto hover */
}

/* Box singolo prodotto come griglia */
.box-simgle-product {
    display: grid;
    grid-template-columns: 1fr 1fr; /* due colonne uguali su desktop */
    gap: 20px; /* spazio tra le colonne */
    margin-bottom: 40px; /* spazio sotto il box */
}

/* Immagine e testo al centro della colonna */
.box-simgle-product .single-left,
.box-simgle-product .single-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Responsive: tablet e mobile */
@media (max-width: 1024px) {
    .box-simgle-product {
        grid-template-columns: 1fr; /* una sola colonna */
        gap: 15px;
    }
}

/* Contenitore prezzo */
.box-simgle-product .price {
    font-size: 20px;
    margin: 15px; /* spazio sotto il prezzo */
    display: flex;
    align-items: center; /* allinea del e ins sulla stessa linea */
    gap: 10px; /* spazio tra prezzo tagliato e prezzo scontato */
}

/* Prezzo normale tagliato */
.box-simgle-product .price del {
    color: lightgrey; /* prezzo tagliato */
    text-decoration: line-through;
    padding-right: 5px; /* piccolo padding tra del e ins */
}

/* Prezzo in offerta */
.box-simgle-product .price ins {
    color: var(--primary-color); /* prezzo in evidenza */
    font-weight: bold;
    text-decoration: none;
    padding-left: 5px; /* piccolo padding tra del e ins */
}

/* Prezzo normale senza sconto */
.box-simgle-product .price:not(:has(ins)) {
    color: var(--primary-color);
    font-weight: bold;
}

/* Testo descrittivo prodotto */
.box-simgle-product .description {
    color: var(--medium-grey); /* medium grey */
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px; /* piccolo spazio sopra la descrizione */
}

.box-simgle-product .description p{
    padding: 5px 0;
}

/* Contenitore quantità */
.custom-cart {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px; /* Spazio tra quantity e pulsante */
}

.single_add_to_cart_button{
    padding: 10px 20px !important;
    background-color: var(--withe) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 300 !important;
}

.single_add_to_cart_button:hover{
    border: 1px solid var(--dark-grey) !important;
    color: var(--dark-grey) !important;
}

/* Rimuove le frecce predefinite nei browser moderni */
.woocommerce div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rimuove le frecce in Firefox */
.woocommerce div.quantity input.qty[type="number"] {
    -moz-appearance: textfield;
}

/* Aggiungi stili ai pulsanti + e - */
.woocommerce div.quantity button.plus,
.woocommerce div.quantity button.minus {
    background-color: #333;  /* Imposta il background scuro */
    color: #fff;             /* Imposta il colore del testo a bianco */
    border: 1px solid #333;  /* Bordo dello stesso colore del background */
    padding: 5px 12px;       /* Aggiungi padding per renderli più grandi */
    font-size: 18px;         /* Imposta la dimensione del testo */
    cursor: pointer;        /* Aggiungi il cursore pointer per evidenziarli come cliccabili */
    user-select: none;       /* Disabilita la selezione del testo */
    width: 40px;             /* Imposta una larghezza fissa */
    height: 40px;            /* Imposta un'altezza fissa */
    text-align: center;      /* Allinea il testo al centro */
    display: inline-block;   /* Imposta il display inline-block per fare in modo che i pulsanti siano affiancati */
    vertical-align: middle;  /* Allinea verticalmente */
    margin: 0;               /* Rimuove qualsiasi margine predefinito */
}

.woocommerce div.quantity button.plus:hover,
.woocommerce div.quantity button.minus:hover{
  background-color: #555;
}
/* Imposta lo stile per l'input della quantità */
.woocommerce div.quantity input.qty {
    width: 60px;             /* Imposta la larghezza dell'input */
    height: 40px;            /* Imposta l'altezza dell'input */
    text-align: center;      /* Allinea il testo al centro */
    font-size: 18px;         /* Imposta la dimensione del font */
    border: 1px solid #ccc; /* Bordo grigio chiaro */
    padding: 5px 10px;       /* Aggiungi padding all'interno dell'input */
    display: inline-block;   /* Imposta l'input come inline-block */
    vertical-align: middle;  /* Allinea verticalmente */
}

/* Allinea i pulsanti + e - accanto all'input */
.woocommerce div.quantity button.plus {
    border-radius: 0 4px 4px 0; /* Angoli arrotondati a destra */
}

.woocommerce div.quantity button.minus {
    border-radius: 4px 0 0 4px; /* Angoli arrotondati a sinistra */
}

/* Rimuove spazio tra l'input e i pulsanti */
.woocommerce div.quantity {
    display: flex;            /* Usa flexbox per allineare gli elementi in fila */
    align-items: center;      /* Allinea gli elementi al centro verticalmente */
}

/* Aggiungi un po' di spaziatura tra i pulsanti */
.woocommerce div.quantity button.plus,
.woocommerce div.quantity button.minus {
    margin: 0;  /* Rimuovi margini predefiniti per farli stare attaccati */
}


/* Stile per categorie, tag e marchi */
.product-categories,
.product-tags,
.product-brands {
    margin: 5px 0;             /* Spazio verticale minimo */
    padding: 3px 0;            /* Piccolo padding sopra e sotto */
    font-size: 14px;           /* Dimensione testo leggermente più piccola */
    color: #555;               /* Colore del testo principale (opzionale) */
}

.product-categories a,
.product-tags a,
.product-brands a {
    color: var(--primary-color); /* Usa il colore primario */
    text-decoration: none;       /* Rimuove la sottolineatura */
    padding: 2px 4px;            /* Spazio interno minimo ai link */
    transition: color 0.3s;      /* Transizione colore al passaggio del mouse */
}

.product-categories a:hover,
.product-tags a:hover,
.product-brands a:hover {
    color: darken(var(--primary-color), 10%); /* Leggera scuritura al hover */
}



/*---------------------------
TAB
---------------------------*/
 /* Style the tab */
/* Contenitore pulsanti tab */
.tab {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
}

/* Pulsanti tab */
.tablinks {
    background: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

/* Tab attiva */
.tablinks.active {
    color: #fff;
    background-color: var(--primary-color);
}

/* Hover */
.tablinks:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Contenuti tab */
.tab-content {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    padding: 20px;
    color: var(--medium-grey);
    margin-bottom: 30px;
}

.tab-content h2{
    padding: 10px 0;
}

.tab-content ul{
    list-style: none;
    margin-left: 10px;
}

.tab-content p{
    padding: 5px;
}

.tabcontent {
    display: none; /* Nascondi tutte di default */
}

.tabcontent.active {
    display: block; /* Mostra solo quella attiva */
}

.correlat-product{
    margin: 30px 0;
}

/* GALLERIA */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image {
    position: relative;
    overflow: hidden;
}

.zoom-image {
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.zoom-image:hover {
    transform: scale(1.2);
}

.main-image .zoom-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
    color: var(--medium-grey);
    padding: 5px;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.3s ease;
}



.product-thumbnails {
    display: flex;
    gap: 10px;
}

.product-thumbnails a img {
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.product-thumbnails a img:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.wc-block-components-product-name{
    text-decoration: none;
    font-weight: 700;
    color: var(--primary-color);
}

.wc-block-components-button__text{
    padding: 10px 20px;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

.wc-block-components-button__text:hover{
    background-color: var(--secondary-color) !important;
    text-decoration: none !important;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link){
    background-color: transparent !important;
    border: none !important;
}