/* 
 * css/custom/product.css
 * Stili personalizzati pagina prodotto
 * 
 * @package ItticiSurgelati
 * @version 1.0.0
 */

/* ============================================
   VARIABILI 
   ============================================ */
:root {
    --product-primary       : #ff5f1f;
    --product-primary-dark  : #e85317;
    --product-text-dark     : #182931;
    --product-text-light    : #4b5b63;
    --product-bg-light      : #f8f8f8;
    --product-border        : rgba(24, 41, 49, 0.08);


}

/* ============================================
   WRAPPER PAGINA PRODOTTO
   ============================================ */
.flat-single-product.flat-spacing-3 {
    padding-top     : 32px !important;
    padding-bottom  : 32px !important;
}

/* ============================================
   ROW PRINCIPALE
   ============================================ */
.flat-single-product .tf-main-product .row {
    align-items     : flex-start !important;
    row-gap         : 24px !important;
}

/* ============================================
   COLONNA IMMAGINE
   ============================================ */
.flat-single-product .tf-product-media-wrap {
    position        : relative !important;
    top             : 0 !important;
}

.flat-single-product .flat-wrap-media-product {
    background      : #fff !important;
    border-radius   : 20px !important;
    overflow        : hidden !important;
    box-shadow      : 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.flat-single-product .tf-product-media-main {
    border-radius   : 20px !important;
    overflow        : hidden !important;
}

.flat-single-product .tf-product-media-main .swiper-slide {
    background      : var(--product-bg-light) !important;
}

.flat-single-product .tf-product-media-main .item {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    min-height      : 520px !important;
    padding         : 16px !important;
    background      : var(--product-bg-light) !important;
}

.flat-single-product .tf-product-media-main .item img {
    display         : block !important;
    width           : 100% !important;
    max-width       : 100% !important;
    height          : auto !important;
    max-height      : 540px !important;
    object-fit      : contain !important;
    object-position : center !important;
}

/* ============================================
   COLONNA INFO
   ============================================ */
.flat-single-product .tf-product-info-wrap {
    position        : relative !important;
}

.flat-single-product .tf-product-info-list {
    background      : #fff !important;
    border-radius   : 20px !important;
    padding         : 8px 8px 8px 0 !important;
}

/* ============================================
   NOME PRODOTTO
   ============================================ */
.flat-single-product .product-info-name {
    margin          : 0 0 12px 0 !important;
    font-size       : 34px !important;
    font-weight     : 300 !important;
    line-height     : 1.12 !important;
    color           : var(--product-text-dark) !important;
    letter-spacing  : -0.02em !important;
}

/* ============================================
   META INFO
   ============================================ */
.flat-single-product .product-info-meta {
    margin-bottom   : 10px !important;
    min-height      : 0 !important;
}

/* ============================================
   BLOCCO PREZZO
   ============================================ */
.flat-single-product .tf-product-heading {
    margin-bottom   : 20px !important;
}

.flat-single-product .product-info-price.price-wrap {
    display         : flex !important;
    align-items     : baseline !important;
    flex-wrap       : wrap !important;
    gap             : 8px !important;
    margin          : 0 !important;
}

.flat-single-product .price-new.price-on-sale {
    display         : inline-flex !important;
    align-items     : baseline !important;
    gap             : 6px !important;
    margin          : 0 !important;
    font-size       : 64px !important;
    font-weight     : 400 !important;
    line-height     : 1 !important;
    color           : var(--product-primary) !important;
}

.flat-single-product .price-unit {
    font-size       : 22px !important;
    font-weight     : 400 !important;
    line-height     : 1.1 !important;
    color           : var(--product-text-dark) !important;
}

/* ============================================
   UNITÀ DI MISURA ALTERNATIVE
   ============================================ */
.product-alt-units {
    display         : flex;
    flex-direction  : column;
    gap             : 4px;
}

.product-alt-unit-item {
    display         : flex;
    align-items     : baseline;
    gap             : 12px;
    padding         : 0px 0;
    border-bottom   : 0px solid var(--product-border);
}

.product-alt-unit-item:last-child {
    border-bottom   : none;
}

/* Label con larghezza fissa per allineamento */
.product-alt-unit-label {
    font-size       : 18px;
    font-weight     : 500;
    color           : var(--product-text-dark);
    min-width       : 100px;      /* Larghezza fissa per allineare i valori */
    flex-shrink     : 0;          /* Impedisce che la label si restringa */
}

/* Valore che segue la label senza spazi eccessivi */
.product-alt-unit-value {
    font-size       : 24px;
    font-weight     : 500;
    color           : var(--product-primary);
    display         : inline-flex;
    align-items     : baseline;
    gap             : 4px;
    flex-wrap       : wrap;
}

/* Stili per i componenti del valore */
.product-alt-unit-approx {
    color           : #666;
    font-size       : 16px;
    font-weight     : 400;
    margin-right    : 2px;
}

.product-alt-unit-weight {
    font-size       : 20px;
    color           : var(--product-primary);
    font-weight     : 500;
}

.product-alt-unit-unit {
    color           : #666;
    font-size       : 14px;
    margin-left     : 2px;
    font-weight     : 400;
}

/* ============================================
   RESPONSIVE PER UNITÀ DI MISURA
   ============================================ */
@media (max-width: 767px) {
    .product-alt-unit-label {
        min-width       : 110px;
        font-size       : 16px;
    }
    
    .product-alt-unit-value {
        font-size       : 18px;
    }
    
    .product-alt-unit-weight {
        font-size       : 18px;
    }
}

@media (max-width: 575px) {
    .product-alt-unit-item {
        flex-direction  : column;
        gap             : 4px;
        align-items     : flex-start;
    }
    
    .product-alt-unit-label {
        min-width       : auto;
        font-size       : 15px;
    }
    
    .product-alt-unit-value {
        font-size       : 16px;
    }
    
    .product-alt-unit-weight {
        font-size       : 16px;
    }
}



/* ============================================
   PRODUCT MESSAGE PANEL
   ============================================ */
.product-message-panel {
    margin-top      : 20px;
    margin-bottom   : 18px;
    border-bottom   : 1px solid var(--product-border);
}

.product-message-text {
    font-size       : 21px;
    line-height     : 1.0;
    color           : var(--product-text-light);
}

/* ============================================
   PURCHASE PANEL
   ============================================ */
.product-purchase-panel {
    margin-top      : 10px !important;
    padding         : 0px !important;
    background      : rgba(24, 41, 49, 0.05) !important;
    border-radius   : 18px !important;
    border          : 0px solid var(--product-border) !important;
}

/* ============================================
   QUANTITY AREA
   ============================================ */
.product-quantity-area {
    margin-top      : 10px;
    display         : flex;
    flex-direction  : column;
    gap             : 8px;
}

/* QUANTITY ROW (unificata) */
.product-quantity-row {
    display              : grid;
    grid-template-columns: 1fr 100px 80px;
    align-items          : center;
    gap                  : 10px;
    padding              : 6px 10px;
    border               : 1px solid var(--product-border);
    border-radius        : 10px;
    background           : #fff;
    transition           : all 0.2s ease;
}

/* riga attiva */
.product-quantity-row.is-active {
    border-color    : var(--product-primary);
    background      : rgba(255, 95, 31, 0.06);
}

/* RADIO + LABEL */
.product-quantity-select {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    font-size       : 21px;
    font-weight     : 400;
    color           : var(--product-text-dark);
}

.product-quantity-select input[type="radio"] {
    accent-color    : var(--product-primary);
}

.product-quantity-label {
    white-space     : nowrap;
}

/* CONTROLLO QUANTITÀ */
.product-quantity-control {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    flex-wrap       : nowrap;
    flex-shrink     : 0;
    white-space     : nowrap;
}

/* INPUT QUANTITÀ */
.product-quantity-input {
    width           : 100px;
    height          : 36px;
    padding         : 6px 8px;
    border          : 1px solid rgba(0, 0, 0, 0.45);
    border-radius   : 6px;
    text-align      : right;
    font-size       : 24px;
    font-weight     : 400;
    transition      : border-color 0.2s ease;
}

.product-quantity-input:focus {
    outline         : none;
    border-color    : var(--product-primary);
}

/* rimuove spinner browser */
.product-quantity-input::-webkit-inner-spin-button,
.product-quantity-input::-webkit-outer-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}


/* ============================================
   BUTTONS QUANTITA' + -
   ============================================ */
.qty-btn {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 36px !important;
    height          : 36px !important;
    min-width       : 36px !important;
    min-height      : 36px !important;
    border          : 1px solid rgba(0, 0, 0, 0.15) !important;
    background      : #fff !important;
    border-radius   : 6px !important;
    cursor          : pointer !important;
    transition      : all 0.2s ease !important;
    padding         : 0 !important;
    margin          : 0 !important;
}

/* SVG all'interno dei pulsanti */
.qty-btn svg {
    width           : 18px !important;
    height          : 18px !important;
    min-width       : 18px !important;
    min-height      : 18px !important;
    display         : block !important;
    stroke          : currentColor !important;
    stroke-width    : 2px !important;
    fill            : none !important;
    pointer-events  : none !important;
}

.qty-btn:hover {
    background      : var(--product-primary) !important;
    border-color    : var(--product-primary) !important;
    color           : #fff !important;
}

.qty-btn:hover svg {
    stroke          : #fff !important;
}

/* Disabled state */
.qty-btn:disabled {
    opacity         : 0.45 !important;
    cursor          : not-allowed !important;
    background      : #f5f5f5 !important;
}

.qty-btn:disabled svg {
    stroke          : #999 !important;
}



/* ============================================
   TOTAL PANEL
   ============================================ */
.product-total-panel {
    margin-top      : 20px;
    padding         : 15px 20px;
    background      : #fff;
    border-radius   : 12px;
    border          : 1px solid var(--product-border);
    display         : flex;
    justify-content : flex-end;
}

.product-total-row {
    display         : inline-flex;
    align-items     : baseline;
    gap             : 15px;
    background      : #f8f9fa;
    padding         : 10px 25px;
    border-radius   : 50px;
}

.product-total-label_Kg {
    font-size       : 16px;
    font-weight     : 400;
    color           : var(--product-text-light);
}

.product-total-value_KG {
    font-size       : 24px;
    font-weight     : 500;
    color           : var(--product-text-dark);
    margin-right    : 15px;
}

.product-total-label {
    font-size       : 18px;
    font-weight     : 400;
    color           : var(--product-text-light);
}

.product-total-value {
    font-size       : 28px;
    font-weight     : 500;
    color           : var(--product-primary);
    line-height     : 1;
}

/* ============================================
   PURCHASE ACTIONS
   ============================================ */
.product-purchase-actions {
    margin-top      : 30px;
    display         : flex;
    justify-content : flex-end;
}

/* ADD TO CART BUTTON */
.product-add-cart-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    width           : 300px;
    height          : 50px;
    padding         : 0 16px;
    font-size       : 20px;
    font-weight     : 400;
    color           : #fff;
    background      : var(--product-primary);
    border          : none;
    border-radius   : 30px;
    cursor          : pointer;
    transition      : all 0.25s ease;
}

.product-add-cart-btn:hover {
    background      : var(--product-primary-dark);
}

.product-add-cart-btn i {
    font-size       : 20px;
    transition      : transform 0.2s ease;
}

.product-add-cart-btn:hover i {
    transform       : translateX(4px);
}

/** .......................................... */ 



/* ============================================
   SEZIONE TAB INFO AGGIUNTIVE
   ============================================ */
.container {
    border-bottom: 0px solid blue !important;
}

.flat-spacing-3 {
    border-bottom: 0px solid red !important;
}

.menu-tab.menu-tab-1 {
    border-bottom: 0px solid green !important;
}


.flat-animate-tab.tab-style-1 {
    margin-top      : 12px !important;
    border-bottom: none !important;

}
.menu-tab.menu-tab-1 {
    display         : flex !important;
    flex-wrap       : wrap !important;
    gap             : 10px !important;
    margin          : 0 0 24px 0 !important;
    padding         : 0 !important;
    list-style      : none !important;
}
.menu-tab.menu-tab-1 .nav-tab-item {
    margin          : 0 !important;
}
.menu-tab.menu-tab-1 .tab-link {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    padding         : 10px 16px !important;
    border-radius   : 28px !important;
    text-decoration : none !important;
    transition      : all 0.2s ease !important;


}
.menu-tab.menu-tab-1 .nav-tab-item:first-child .tab-link {
    padding-left: 16px !important; /* stesso padding degli altri */
}
.menu-tab.menu-tab-1 .tab-link.active,
.menu-tab.menu-tab-1 .tab-link:hover {
    background      : var(--product-primary) !important;
    color           : #fff !important;
}

.tab-content {
    background      : #fff !important;
    border-radius   : 20px !important;
    padding         : 24px !important;
    /** box-shadow      : 0 8px 24px rgba(0, 0, 0, 0.06) !important; */ 
}

/* ============================================
   ETICHETTA - INFO PRODOTTO
   ============================================ */

/* Contenitore righe */
.etichetta-container .row {
    border-bottom   : 1px solid var(--product-border) !important;;
    padding-top     : 5px !important;
    padding-bottom  : 5px !important;;
    margin-bottom   : 0 !important;;
}

/* Rimuove bordo all'ultima riga */
.etichetta-container .row:last-child {
    border-bottom: none !important;
}

/* Label (descrizione) */
.etichetta-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--product-text-dark);
}

/* Valore */
.etichetta-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--product-text-light);
}

/* Miglioramenti visivi per paragrafi dentro il valore */
.etichetta-value p:last-child {
    margin-bottom: 0;
}

/* ============================================
   ETICHETTA - RESPONSIVE MOBILE
   ============================================ */

@media (max-width: 768px) {
    .etichetta-container .row {
        margin-bottom: 8px;
        padding-bottom: 12px;
    }
    
    .etichetta-label {
        margin-bottom: 4px;
        font-size: 18px;
    }
    
    .etichetta-value {
        font-size: 14px;
    }
}










/* TAB INTERNE */
.menu-tab.menu-tab-2 {
    display         : flex !important;
    flex-wrap       : wrap !important;
    gap             : 8px !important;
    margin          : 0 0 20px 0 !important;
    padding         : 0 !important;
    list-style      : none !important;
}

.menu-tab.menu-tab-2 .tab-link {
    display         : inline-block !important;
    padding         : 8px 14px !important;
    border-radius   : 28px !important;
    background      : #f4f5f6 !important;
    color           : var(--product-text-dark) !important;
    text-decoration : none !important;
}

.menu-tab.menu-tab-2 .tab-link.active,
.menu-tab.menu-tab-2 .tab-link:hover {
    background      : var(--product-text-dark) !important;
    color           : #fff !important;
}

/* CONTENUTO DESCRITTIVO */
.tab-faqs-descriptions ul {
    margin          : 0 !important;
    padding         : 0 !important;
    list-style      : none !important;
    display         : grid !important;
    gap             : 16px !important;
}

.tab-faqs-descriptions li {
    padding         : 16px 0 !important;
    border-bottom   : 1px solid var(--product-border) !important;
}

.tab-faqs-descriptions li:last-child {
    border-bottom   : none !important;
}

.tab-faqs-descriptions .title {
    margin-bottom   : 6px !important;
}



/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet (max 991px) */
@media (max-width: 991px) {
    .flat-single-product .tf-product-media-main .item {
        min-height  : 420px !important;
    }
    
    .flat-single-product .product-info-name {
        font-size   : 28px !important;
    }
    
    .flat-single-product .price-new.price-on-sale {
        font-size   : 36px !important;
    }
    
    .flat-single-product .price-unit {
        font-size   : 18px !important;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .flat-single-product.flat-spacing-3 {
        padding-top     : 20px !important;
        padding-bottom  : 20px !important;
    }
    
    .flat-single-product .flat-wrap-media-product,
    .flat-single-product .tf-product-media-main,
    .flat-single-product .tf-product-info-list,
    .tab-content {
        border-radius   : 14px !important;
    }
    
    .flat-single-product .tf-product-media-main .item {
        min-height      : 300px !important;
        padding         : 12px !important;
    }
    
    .flat-single-product .product-info-name {
        font-size       : 24px !important;
        margin-bottom   : 10px !important;
    }
    
    .flat-single-product .price-new.price-on-sale {
        font-size       : 30px !important;
    }
    
    .flat-single-product .price-unit {
        font-size       : 16px !important;
    }
    
    .menu-tab.menu-tab-1 {
        gap             : 8px !important;
    }
    
    .menu-tab.menu-tab-1 .tab-link {
        padding         : 8px 12px !important;
        font-size       : 14px !important;
    }
    
    .tab-content {
        padding         : 18px !important;
    }
    
    .product-total-row {
        gap             : 10px;
        padding         : 8px 15px;
    }
    
    .product-total-value_KG {
        font-size       : 18px;
    }
    
    .product-total-value {
        font-size       : 24px;
    }
}

/* Mobile piccolo (max 575px) */
@media (max-width: 575px) {
    .flat-single-product .tf-product-media-main .item {
        min-height      : 240px !important;
    }
    
    .flat-single-product .product-info-name {
        font-size       : 21px !important;
        line-height     : 1.15 !important;
    }
    
    .flat-single-product .price-new.price-on-sale {
        font-size       : 26px !important;
    }
    
    .flat-single-product .price-unit {
        font-size       : 14px !important;
    }
    
    .product-total-panel {
        padding         : 12px 15px;
    }
    
    .product-total-row {
        padding         : 8px 20px;
        gap             : 10px;
    }
    
    .product-total-label {
        font-size       : 16px;
    }
    
    .product-total-value {
        font-size       : 21px;
    }
}