/**
 * Custom CSS Jupiter Child
 */

/* =========================================================
   1) Card prodotti WooCommerce: altezza uniforme
      e bottone "Scegli" allineato in basso.
   ========================================================= */

@media (min-width: 768px) {


    /* Il contenitore dei prodotti diventa un flex layout */
    ul.products {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch; /* tutte le card alte uguali nella riga */
    }

    /* Ogni prodotto diventa un flex item che contiene la card */
    ul.products li.product {
        display: flex;
    }

    /* Wrapper interno della card: colonna che riempie tutta l'altezza */
    ul.products li.product .mk-product-warp {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* La categoria sta sopra, con un po' di margine */
    ul.products li.product .mk-product-warp .product-main-category {
        margin-top: 0.5em;
    }

    /* Spinge in basso i controlli finali:
       - bottone WooCommerce ("Scegli")
       - blocco YITH Request a Quote
    */
    ul.products li.product .mk-product-warp a.button.add_to_cart_button,
    ul.products li.product .mk-product-warp .yith-ywraq-add-to-quote {
        margin-top: auto;
    }
}

/* Struttura e stile del bottone "Scegli" (se non li hai già) */
ul.products li.product .mk-product-warp a.button.add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;

    font-size: 1em;
    word-break: break-word;
    padding: 1rem 2rem;
    margin-top: 1rem;
    text-decoration: none;
    cursor: pointer;

    background-color: var(--ywraq_layout_button_bg_color, #0066b4);
    border: 1px solid var(--ywraq_layout_button_border_color, #0066b4);
    color: var(--ywraq_layout_button_color, #ffffff);
}

ul.products li.product .mk-product-warp a.button.add_to_cart_button:hover {
    background-color: var(--ywraq_layout_button_bg_color_hover, #044a80);
    border-color: var(--ywraq_layout_button_border_color_hover, #044a80);
    color: var(--ywraq_layout_button_color_hover, #ffffff);
}


/* =========================================================
   1.b) Bottone "Scegli" con stile allineato al RAQ
   ========================================================= */

/* Struttura base: icona + testo affiancati */
ul.products li.product .mk-product-warp a.button.add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;              /* spazio tra icona e testo */
    text-align: center;

    /* Cloniamo lo stile del bottone RAQ usando le sue CSS variables */
    font-size: 1em;
    word-break: break-word;
    padding: 1rem 2rem;
    margin-top: 1rem;
    text-decoration: none;
    cursor: pointer;

    background-color: var(--ywraq_layout_button_bg_color, #0066b4);
    border: 1px solid var(--ywraq_layout_button_border_color, #0066b4);
    color: var(--ywraq_layout_button_color, #ffffff);
}

/* Hover del bottone "Scegli" */
ul.products li.product .mk-product-warp a.button.add_to_cart_button:hover {
    background-color: var(--ywraq_layout_button_bg_color_hover, #044a80);
    border-color: var(--ywraq_layout_button_border_color_hover, #044a80);
    color: var(--ywraq_layout_button_color_hover, #ffffff);
}

/* Nel markup che mi hai passato il testo è dentro .button-text */
ul.products li.product .mk-product-warp a.button.add_to_cart_button .button-text {
    display: inline-block;
}

/* =========================================================
   1.c) Bottone "RAQ" in fondo alla card
   ========================================================= */

@media (min-width: 768px) {

    /* Spinge in fondo il blocco YITH RAQ dentro la card */
    ul.products li.product .mk-product-warp .yith-ywraq-add-to-quote {
        margin-top: auto;
    }

    /* Idem per il bottone WooCommerce */
    ul.products li.product .mk-product-warp a.button.add_to_cart_button {
        margin-top: auto;
    }
}

/* =========================================================
   2) Pulsanti personalizzati nello shop
      ("Spese di spedizione" / "Vai al preventivo")
   ========================================================= */

.custom-shop-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    margin: 15px 0;
}

/* Stile dei pulsanti (shop + singolo prodotto) */
.custom-shop-buttons a.button {
    background-color: #7e5953;
    color: #ffffff;
    border: 1px solid #7e5953;
    text-decoration: none;
}

/* Hover */
.custom-shop-buttons a.button:hover {
    background-color: #75534d; /* leggermente più scuro */
    border-color: #75534d;
    color: #ffffff;
}

/* Pulsante CF7 con stile identico ai bottoni dello shop */
input.custom-shop-button[type="submit"] {
    background-color: #7e5953;
    color: #ffffff !important;
    border: 1px solid #7e5953;
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 0; /* oppure quello che usa il tema */
}

/* Hover */
input.custom-shop-button[type="submit"]:hover {
    background-color: #75534d; /* leggermente più scuro */
    border-color: #75534d;
    color: #ffffff !important;
}

/* Mobile: bottoni uno sotto l’altro full-width */
@media (max-width: 767px) {
    .custom-shop-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-shop-buttons a.button {
        width: 100%;
        text-align: center;
    }
}

/* margine extra nel singolo prodotto */
.single-product .custom-single-product-buttons {
    margin-top: 20px;
}


/* (eventuali stili extra per distinguere i bottoni) */
/*
.custom-shop-buttons a.custom-btn-ship {}
.custom-shop-buttons a.custom-btn-quote {}
*/



.cf7-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cf7-col {
    flex: 1 1 calc(50% - 10px);
}

.cf7-col-full {
    flex: 1 1 100%;
}





/* Tabs */
.muvi-tablist.light{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.muvi-tab{appearance:none;border:1px solid #ccc;background:#f8f8f8;color:#222;padding:8px 12px;border-radius:6px;font-size:14px;cursor:pointer;pointer-events:auto;position:relative;z-index:2}
.muvi-tab.is-active{background:#e9f2ff;border-color:#6aa8ff}
.muvi-panel{display:none;margin-top:8px}
.muvi-panel.is-active{display:block}

/* Title note from first row of XLSX */
.muvi-title-note{font-weight:600;text-transform:none;text-align:left;margin:0 0 6px 0;padding:0;color:#333;border:0;background:transparent;}

/* Module */
.muvi-shipping-module{max-width:760px;margin:1.5rem auto;font-size:16px;line-height:1.4;color:#222;font-family:inherit;text-align:center;position:relative;z-index:1}
.muvi-shipping-selector{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem;position:relative;z-index:2}
.muvi-label{font-size:15px;margin-bottom:.5rem;color:#333}
.muvi-select{min-width:260px;max-width:100%;font-size:15px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;background:#fff;pointer-events:auto;position:relative;z-index:3}

/* Table */
.muvi-table-wrapper{overflow-x:auto}
.muvi-dynamic-table{border-collapse:collapse;width:100%;min-width:360px;text-align:center;font-size:15px}
.muvi-dynamic-table th,.muvi-dynamic-table td{border:1px solid #ddd;padding:8px 10px;white-space:nowrap}
.muvi-dynamic-table thead th{background:#f5f5f5;font-weight:600;color:#000}
.muvi-dynamic-table tbody tr:nth-child(even){background:#fafafa}
.muvi-dynamic-table tbody tr:hover{background:#f0f0f0}