/*
Theme Name:   Astra Child
Theme URI:    https://calsots.com/
Template:     astra
Author:       Albert Gomez
Author URI:   https://calsots.com/
Description:  Tema fill d'Astra per al projecte Calsots. Conté les personalitzacions de disseny, estils i funcions especifiques de la botiga sense modificar el tema pare, de manera que les actualitzacions d'Astra no afectin als canvis propis.
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
Tags:         e-commerce, woocommerce, custom-colors, custom-menu, translation-ready
*/

/* ============================================================
   FITXA DE PRODUCTE — TITOL, PREU
   Forcem amb !important perque Astra Pro Addon dynamic CSS
   no sempre regenera correctament aquestes regles.
   ============================================================ */

.single-product div.product .entry-title.product_title,
.single-product .summary > .product_title.entry-title,
.single-product .product_title.entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--ast-global-color-3, #111) !important;
    margin: 0 0 0.5em !important;
    padding: 0 !important;
}

@media (max-width: 992px) {
    .single-product div.product .entry-title.product_title,
    .single-product .product_title.entry-title {
        font-size: 30px !important;
    }
}

@media (max-width: 768px) {
    .single-product div.product .entry-title.product_title,
    .single-product .product_title.entry-title {
        font-size: 28px !important;
    }
}

/* Preu — verd fosc, weight 700, 28 px desktop */
.single-product div.product p.price,
.single-product .summary p.price,
.single-product .summary .price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--ast-global-color-1, #2f5929) !important;
    line-height: 1.2 !important;
    margin: 0 0 0.4em !important;
}
.single-product div.product p.price .woocommerce-Price-amount,
.single-product .summary p.price .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

/* Preu al sticky add-to-cart bar — mateix verd, més petit */
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price.price,
.ast-sticky-add-to-cart .price .woocommerce-Price-amount {
    color: var(--ast-global-color-1, #2f5929) !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .single-product div.product p.price,
    .single-product .summary p.price {
        font-size: 22px !important;
    }
}

/* Producte variable: amagar el rang inicial. El preu es mostrara
   nomes quan el client esculli una variació (.single_variation .price). */
.single-product div.product.product-type-variable > .summary > p.price,
.single-product div.product-type-variable .summary > p.price {
    display: none !important;
}

/* Short description */
.single-product .woocommerce-product-details__short-description {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ast-global-color-3, #333);
    margin-bottom: 1em;
}
@media (max-width: 768px) {
    .single-product .woocommerce-product-details__short-description {
        font-size: 16px;
    }
}

/* ============================================================
   ESTATS D'ESTOC
   ============================================================ */

.single-product .summary .stock,
.single-product .entry-summary .stock,
.single-product div.product .stock {
    font-size: 14px;
    line-height: 1.4;
    margin: 0.25em 0 1em;
}
.single-product .stock.in-stock {
    color: #444;
    font-weight: 600;
}
.single-product .stock.in-stock.low-stock {
    color: #c45500;
    font-weight: 700;
}
.single-product .stock.out-of-stock {
    color: #a00f0f;
    font-weight: 700;
}

/* ============================================================
   PÀGINA DE CISTELLA
   ============================================================ */

/* Astra Pro checkout-step navigation (Cistella / Pagament / Finalitzada) */
#ast-checkout-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 1em 0 2em !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

#ast-checkout-wrap > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #777;
    font-size: 14px;
    line-height: 1.3;
    padding: 6px 4px;
    transition: color 0.18s;
}

#ast-checkout-wrap > a.ast-current {
    color: var(--ast-global-color-1, #2f5929);
}

#ast-checkout-wrap > a.ast-disable-click {
    color: #aaa;
    cursor: default;
    pointer-events: none;
}

#ast-checkout-wrap .ast-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e5e5;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

#ast-checkout-wrap > a.ast-current .ast-step-number {
    background: var(--ast-global-color-0, #5a9800);
    color: #fff;
}

#ast-checkout-wrap > a > p {
    margin: 0 !important;
    font-size: 14px;
    font-weight: 500;
}

#ast-checkout-wrap > span svg {
    width: 12px;
    height: 12px;
    fill: #ccc;
}

@media (max-width: 600px) {
    #ast-checkout-wrap {
        gap: 4px;
    }
    #ast-checkout-wrap > a > p {
        font-size: 12px;
    }
    #ast-checkout-wrap .ast-step-number {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
}

/* H1 visible a totes les pàgines i posts singles (Astra Pro Page Headers
   o algun plugin amaga l'entry-title per defecte; el forcem).
   Mides: 36/32/28 (desktop/tablet/mobile) per mantenir jerarquia clara
   sobre H2 (28/26/24) i H3 (22/21/20). */
body.page .entry-header:not(.ast-header-without-markup),
body.single .entry-header:not(.ast-header-without-markup),
.woocommerce-cart .entry-header:not(.ast-header-without-markup),
.woocommerce-checkout .entry-header:not(.ast-header-without-markup) {
    display: block !important;
    margin: 0 0 1em !important;
    padding: 0 !important;
}
body.page .entry-title,
body.single .entry-title,
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.5em !important;
    color: var(--ast-global-color-3, #222) !important;
}
@media (max-width: 992px) {
    body.page .entry-title,
    body.single .entry-title,
    .woocommerce-cart .entry-header .entry-title,
    .woocommerce-checkout .entry-header .entry-title {
        font-size: 32px !important;
    }
}
@media (max-width: 768px) {
    body.page .entry-title,
    body.single .entry-title,
    .woocommerce-cart .entry-header .entry-title,
    .woocommerce-checkout .entry-header .entry-title {
        font-size: 28px !important;
    }
}

/* Cart empty */
.wc-empty-cart-message .cart-empty {
    font-size: 16px;
    padding: 20px;
    background: #f4f7ec;
    border: 1px solid #c7e2a3;
    border-left: 4px solid var(--ast-global-color-0, #5a9800);
    border-radius: 6px;
    color: #2f5929;
    text-align: center;
}

.return-to-shop {
    text-align: center;
    margin: 1.5em 0;
}
.return-to-shop a.button.wc-backward {
    font-size: 15px !important;
}

/* ===== TAULA DEL CARRET ===== */

.woocommerce-cart-form table.shop_table.cart {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin: 0 0 2em !important;
    width: 100% !important;
}

.woocommerce-cart-form table.shop_table.cart thead th {
    background: #fafafa;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

.woocommerce-cart-form table.shop_table.cart tbody td {
    padding: 18px 16px !important;
    border-top: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
    font-size: 15px;
}

.woocommerce-cart-form table.shop_table.cart tr:first-of-type td {
    border-top: 0 !important;
}

/* Botó remove (×) */
.woocommerce-cart-form .product-remove a.remove {
    width: 28px;
    height: 28px;
    line-height: 26px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #888 !important;
    font-size: 18px !important;
    text-align: center;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
.woocommerce-cart-form .product-remove a.remove:hover {
    background: #c44;
    color: #fff !important;
}

/* Thumbnail */
.woocommerce-cart-form .product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 6px;
}

/* Nom de producte */
.woocommerce-cart-form .product-name {
    font-weight: 600;
}
.woocommerce-cart-form .product-name a {
    color: var(--ast-global-color-3, #222);
    text-decoration: none;
}
.woocommerce-cart-form .product-name a:hover {
    color: var(--ast-global-color-1, #2f5929);
}

/* Preu / subtotal */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
    color: #444;
    font-weight: 500;
    text-align: right !important;
}
.woocommerce-cart-form .product-subtotal {
    font-weight: 700;
    color: var(--ast-global-color-1, #2f5929);
}

/* Qty input al carret */
.woocommerce-cart-form .product-quantity .quantity {
    display: inline-flex !important;
    align-items: stretch;
    border: 1.5px solid #d4d4d4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.woocommerce-cart-form .product-quantity .quantity input.qty {
    width: 56px !important;
    height: 38px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Coupon + update cart */
.woocommerce-cart-form td.actions {
    background: #fafafa;
    padding: 16px !important;
}
.woocommerce-cart-form .coupon {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.woocommerce-cart-form .coupon input.input-text {
    padding: 9px 12px !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    width: 200px;
}
.woocommerce-cart-form .coupon button[name="apply_coupon"] {
    font-size: 14px !important;
    padding: 9px 18px !important;
    background: transparent !important;
    color: var(--ast-global-color-1, #2f5929) !important;
    border: 1px solid var(--ast-global-color-1, #2f5929) !important;
    border-radius: 4px !important;
}
.woocommerce-cart-form .coupon button[name="apply_coupon"]:hover {
    background: var(--ast-global-color-1, #2f5929) !important;
    color: #fff !important;
}
.woocommerce-cart-form button[name="update_cart"] {
    float: right;
    font-size: 14px !important;
    padding: 9px 18px !important;
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
}
.woocommerce-cart-form button[name="update_cart"]:not(:disabled):hover {
    background: #f0f0f0 !important;
    color: #222 !important;
}

/* ===== CART COLLATERALS (totals) ===== */

.cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 1em;
}

.cart-collaterals .cart_totals {
    width: 100%;
    max-width: 420px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 22px 24px;
}

.cart-collaterals .cart_totals h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 0.8em !important;
    color: var(--ast-global-color-3, #222);
    padding-bottom: 0.6em;
    border-bottom: 1px solid #e8e8e8;
}

.cart-collaterals .cart_totals table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
}

.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td {
    border: 0 !important;
    padding: 10px 0 !important;
    font-size: 15px;
    color: #444;
}

.cart-collaterals .cart_totals table th {
    font-weight: 500;
    text-align: left;
}

.cart-collaterals .cart_totals table td {
    text-align: right;
    color: #222;
    font-weight: 500;
}

.cart-collaterals .cart_totals .cart-subtotal,
.cart-collaterals .cart_totals .tax-rate {
    border-bottom: 1px solid #f0f0f0;
}

.cart-collaterals .cart_totals .order-total th,
.cart-collaterals .cart_totals .order-total td {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ast-global-color-1, #2f5929) !important;
    padding-top: 14px !important;
    border-top: 2px solid #e8e8e8 !important;
}

.cart-collaterals .wc-proceed-to-checkout {
    margin-top: 1.2em !important;
    padding: 0 !important;
}

.cart-collaterals .wc-proceed-to-checkout .button.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--ast-global-color-0, #5a9800) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: background 0.15s;
}
.cart-collaterals .wc-proceed-to-checkout .button.checkout-button:hover {
    background: var(--ast-global-color-1, #2f5929) !important;
}

/* ===== Simplificacions visuals ===== */

/* 1. Hi ha 2 cupons al carret (WC al bottom de la taula + Astra Pro als totals).
   Amaguem el de WC (a la fila .actions del cart-form) i deixem l'Astra (millor UX). */
.woocommerce-cart-form td.actions .coupon {
    display: none !important;
}
.woocommerce-cart-form td.actions {
    text-align: right;
    background: transparent !important;
    padding: 8px 0 !important;
    border: 0 !important;
}

/* 2. Sufix "EUR" duplicat (apareix al costat del total, redundant amb el símbol €) */
.cart_totals .order-total td strong > span:first-child + * {
    display: none !important; /* qualsevol text adjacent al span de preu */
}
.cart_totals .order-total td strong {
    font-size: inherit;
}
/* Fallback: amagar text-only nodes via :after no es pot — usem regla de pseudo */

/* 3. Etiqueta "(IVA incl.)" dins el subtotal: massa freqüent. Deixar només al total. */
.woocommerce-cart-form .product-subtotal small.tax_label,
.cart_totals .cart-subtotal td small.tax_label {
    display: none;
}

/* 4. Shipping calculator: hi ha tot el formulari obert per defecte. Compactem. */
.cart_totals .shipping-calculator-form {
    margin-top: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}
.cart_totals .shipping-calculator-form .form-row {
    margin: 0 0 10px;
}
.cart_totals .shipping-calculator-form label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    display: block;
    margin-bottom: 4px;
}
.cart_totals .shipping-calculator-form input[type="text"],
.cart_totals .shipping-calculator-form select {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background: #fff;
}
.cart_totals .shipping-calculator-form button[name="calc_shipping"] {
    font-size: 13px !important;
    padding: 8px 14px !important;
    background: var(--ast-global-color-1, #2f5929) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
}
.cart_totals .shipping-calculator-button {
    font-size: 13px;
    color: var(--ast-global-color-1, #2f5929);
    text-decoration: underline;
}
.cart_totals .woocommerce-shipping-destination {
    font-size: 13px;
    color: #666;
    margin: 6px 0;
}

/* 5. Astra Pro coupon dins els totals — disseny més net */
.cart_totals #ast-checkout-coupon {
    margin-top: 1em;
    padding: 12px;
    background: #fff;
    border: 1px dashed #d4d4d4;
    border-radius: 6px;
}
.cart_totals #ast-coupon-trigger {
    margin: 0 !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ast-global-color-1, #2f5929);
}
.cart_totals #ast-checkout-coupon .coupon {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.cart_totals #ast-checkout-coupon .coupon .ast-coupon-label {
    display: none;
}
.cart_totals #ast-checkout-coupon .coupon input {
    flex: 1 1 auto;
    padding: 8px 10px !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}
.cart_totals #ast-checkout-coupon .coupon a.button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    background: var(--ast-global-color-1, #2f5929) !important;
    color: #fff !important;
    border-radius: 4px !important;
    border: none !important;
}

/* 6. Stripe Express Checkout dins els totals: spacing menor */
.cart_totals #wc-stripe-express-checkout-element {
    margin-top: 0.8em !important;
}

/* 7. Caixa única d'imatge buida d'Astra (.ast-product-image.ast-disable-image) */
.woocommerce-cart-form .ast-product-image.ast-disable-image {
    display: contents;
}

/* ===== CROSS-SELLS A LA CISTELLA ===== */

.cart-collaterals .cross-sells {
    width: 100%;
    margin-top: 2.5em;
}
.cart-collaterals .cross-sells > h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 0 1em !important;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
    .woocommerce-cart-form table.shop_table.cart thead {
        display: none;
    }
    .woocommerce-cart-form table.shop_table.cart tbody tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        padding: 12px;
    }
    .woocommerce-cart-form table.shop_table.cart tbody td {
        display: block !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 14px;
    }
    .woocommerce-cart-form table.shop_table.cart tbody td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        color: #555;
        margin-right: 6px;
    }
    .woocommerce-cart-form .product-remove::before,
    .woocommerce-cart-form .product-thumbnail::before {
        display: none;
    }
    .woocommerce-cart-form .product-thumbnail img {
        width: 80px !important;
        height: 80px !important;
    }
    .woocommerce-cart-form .product-price,
    .woocommerce-cart-form .product-subtotal {
        text-align: left !important;
    }
    .woocommerce-cart-form td.actions {
        display: block !important;
    }
    .woocommerce-cart-form .coupon {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }
    .woocommerce-cart-form .coupon input.input-text {
        flex: 1 1 auto;
        width: auto !important;
    }
    .woocommerce-cart-form button[name="update_cart"] {
        float: none;
        width: 100%;
    }
    .cart-collaterals {
        flex-direction: column;
    }
    .cart-collaterals .cart_totals {
        max-width: 100%;
    }
}

/* ============================================================
   AVISOS WOOCOMMERCE
   El missatge "afegit a la cistella" s'amaga: el client ja veu
   la cistella si vol. WC necessita generar la notícia internament
   per fer el redirect post-add (Post/Redirect/Get) i evitar
   l'avís del navegador en refrescar.
   ============================================================ */

.woocommerce-notices-wrapper .woocommerce-message {
    display: none !important;
}

.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    position: relative;
    background: #ffffff;
    border: 1px solid #d6e3c2;
    border-left: 4px solid var(--ast-global-color-0, #5a9800);
    color: #1f2d1c;
    padding: 16px 18px 16px 56px;
    border-radius: 6px;
    margin: 0 0 1.5em;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-info {
    border-color: #c7dcec;
    border-left-color: #2c79b8;
    color: #1c3e60;
}

.woocommerce-notices-wrapper .woocommerce-error {
    border-color: #ecc7c7;
    border-left-color: #c44;
    color: #6e1f1f;
    animation: none;
}

/* Icona en cercle (les variants només canvien el contingut/color) */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}
.woocommerce-notices-wrapper .woocommerce-message::before {
    content: "✓";
    background: var(--ast-global-color-0, #5a9800);
}
.woocommerce-notices-wrapper .woocommerce-info::before {
    content: "i";
    font-style: italic;
    background: #2c79b8;
}
.woocommerce-notices-wrapper .woocommerce-error::before {
    content: "!";
    background: #c44;
}

/* Botó "Veure la cistella" dins el missatge — solid verd, compacte */
.woocommerce-notices-wrapper .button.wc-forward {
    display: inline-block;
    margin-left: auto;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--ast-global-color-0, #5a9800) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    transition: background 0.2s;
}
.woocommerce-notices-wrapper .button.wc-forward:hover {
    background: var(--ast-global-color-1, #2f5929) !important;
    color: #fff !important;
}

/* Mòbil: el missatge i el botó queden apilats */
@media (max-width: 480px) {
    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-info,
    .woocommerce-notices-wrapper .woocommerce-error {
        font-size: 14px;
        padding: 14px 14px 14px 50px;
    }
    .woocommerce-notices-wrapper .button.wc-forward {
        margin-left: 0;
        margin-top: 6px;
        flex: 1 1 100%;
        text-align: center;
    }
}


/* ============================================================
   STRIPE LINK BUTTON — ocultar "Pay with", deixar només el logo
   ============================================================ */

.LinkButton-genericText {
    display: none !important;
}

/* ============================================================
   TABS DE PRODUCTE — disseny net, subratllat verd a l'actiu.
   Selectors amb especificitat WC (.woocommerce div.product) +
   !important per guanyar al CSS per defecte de WooCommerce.
   ============================================================ */

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 1.5em 0 0 !important;
    padding: 0 !important;
    border-bottom: 2px solid #e5e5e5 !important;
    overflow: visible !important;
    background: none !important;
}

/* Treure pseudo-elements decoratius del WC */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::after,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs::after {
    display: none !important;
}

/* Cada li: sense fons, sense border, sense rounded */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
    position: relative !important;
}

/* Treure els pseudo-elements del fons que dibuixen tabs estil pestanya */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::after,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Enllaç de cada pestanya */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
    display: inline-block !important;
    padding: 12px 22px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 0 -2px 0 !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: color 0.2s, border-color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
    color: var(--ast-global-color-0, #5a9800) !important;
    border-bottom-color: rgba(90, 152, 0, 0.4) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
    color: var(--ast-global-color-1, #2f5929) !important;
    border-bottom-color: var(--ast-global-color-0, #5a9800) !important;
}

/* Panel de contingut sota les pestanyes (padding superior reduït) */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 0.6em 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* Reduir l'espai superior del wrapper de tabs */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 1em !important;
    padding-top: 0 !important;
}

/* H2/H3 dins els panels (descripcio, additional info, reviews) */
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 0.6em !important;
    line-height: 1.3;
}
.woocommerce div.product .woocommerce-tabs .panel h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 1.4em 0 0.5em !important;
    line-height: 1.3;
    color: var(--ast-global-color-1, #2f5929);
}
.woocommerce div.product .woocommerce-tabs .panel h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 1em 0 0.4em !important;
}

@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs .panel h2 {
        font-size: 17px !important;
    }
    .woocommerce div.product .woocommerce-tabs .panel h3 {
        font-size: 16px !important;
    }
}

/* Cos del panel Descripció: paràgrafs, llistes, èmfasi */
.woocommerce-Tabs-panel--description {
    font-size: 16px;
    line-height: 1.65;
    color: #333;
}

.woocommerce-Tabs-panel--description > *:first-child {
    margin-top: 0;
}

.woocommerce-Tabs-panel--description p {
    margin: 0 0 1em;
}

.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.woocommerce-Tabs-panel--description ul {
    list-style: disc;
}

.woocommerce-Tabs-panel--description ol {
    list-style: decimal;
}

.woocommerce-Tabs-panel--description li {
    margin-bottom: 0.5em;
    line-height: 1.55;
}

.woocommerce-Tabs-panel--description li:last-child {
    margin-bottom: 0;
}

.woocommerce-Tabs-panel--description strong,
.woocommerce-Tabs-panel--description b {
    font-weight: 700;
    color: #1a1a1a;
}

.woocommerce-Tabs-panel--description em,
.woocommerce-Tabs-panel--description i {
    font-style: italic;
}

.woocommerce-Tabs-panel--description a {
    color: var(--ast-global-color-1, #2f5929);
    text-decoration: underline;
}
.woocommerce-Tabs-panel--description a:hover {
    color: var(--ast-global-color-0, #5a9800);
}

@media (max-width: 768px) {
    .woocommerce-Tabs-panel--description {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Títols de seccions "Productes relacionats" / "Vendes creuades" / "Upsells" */
.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .cross-sells > h2,
.single-product section.related > h2,
.single-product section.up-sells > h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 1em !important;
}

@media (max-width: 768px) {
    .single-product .related.products > h2,
    .single-product .upsells.products > h2,
    .single-product .cross-sells > h2,
    .single-product section.related > h2,
    .single-product section.up-sells > h2 {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
    body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   VARIATION SWATCHES (plugin Variation Swatches Woo)
   Botons de selecció de variacio (mides, envasos, etc.)
   ============================================================ */

.cfvsw-swatches-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}

.cfvsw-swatches-container .cfvsw-swatches-option {
    min-width: 56px !important;
    min-height: 40px !important;
    border-radius: 6px !important;
    border: 1.5px solid #d0d0d0 !important;
    background: #fff;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.cfvsw-swatches-container .cfvsw-swatch-inner {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1;
    white-space: nowrap;
}

.cfvsw-swatches-container .cfvsw-swatches-option:hover {
    border-color: var(--ast-global-color-0, #5a9800) !important;
    color: var(--ast-global-color-1, #2f5929);
    box-shadow: 0 2px 6px rgba(90, 152, 0, 0.12);
}

.cfvsw-swatches-container .cfvsw-selected-swatch {
    border-color: var(--ast-global-color-0, #5a9800) !important;
    background: var(--ast-global-color-0, #5a9800) !important;
}
.cfvsw-swatches-container .cfvsw-selected-swatch .cfvsw-swatch-inner {
    color: #fff;
}

.cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-disabled,
.cfvsw-swatches-container .cfvsw-swatches-option[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Etiqueta de l'atribut a la taula de variacions */
.woocommerce div.product table.variations th.label {
    font-weight: 600;
    color: var(--ast-global-color-3, #222);
    padding-right: 14px;
}
.woocommerce div.product table.variations td.value {
    padding: 6px 0;
}
.woocommerce div.product .reset_variations {
    font-size: 13px;
    color: #666;
    margin-left: 10px;
    text-decoration: underline;
}

/* ============================================================
   TEXT DECORATIU SOTA EL LOOP (botiga + arxius categoria)
   ============================================================ */

.calsots-archive-after-text {
    margin: 3em 0 1em;
    padding: 2em 0 0;
    border-top: 1px solid #e8e8e8;
    width: 100%;
    max-width: none;
}

.calsots-archive-after-text p {
    max-width: 100%;
}

.calsots-archive-after-text p {
    font-size: 16px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 1em;
}

.calsots-archive-after-text h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ast-global-color-1, #2f5929) !important;
    margin: 1.6em 0 0.5em !important;
    line-height: 1.3 !important;
}

.calsots-archive-after-text h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ast-global-color-3, #222) !important;
    margin: 1.2em 0 0.4em !important;
    line-height: 1.3 !important;
}

.calsots-archive-after-text > h2:first-child,
.calsots-archive-after-text > h3:first-child,
.calsots-archive-after-text > p:first-child {
    margin-top: 0 !important;
}

.calsots-archive-after-text strong {
    color: var(--ast-global-color-1, #2f5929);
    font-weight: 600;
}

.calsots-archive-after-text a {
    color: var(--ast-global-color-1, #2f5929);
    text-decoration: underline;
}
.calsots-archive-after-text a:hover {
    color: var(--ast-global-color-0, #5a9800);
}

@media (max-width: 768px) {
    .calsots-archive-after-text {
        margin: 2em 0 1em;
        padding: 1.5em 0 0;
    }
    .calsots-archive-after-text p {
        font-size: 15px;
    }
}

/* ============================================================
   BOTIGA — amagar la barra "X resultats" + ordenació
   ============================================================ */

.ast-shop-toolbar-container,
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* ============================================================
   CATEGORY CARDS — separades visualment dels productes via PHP
   (les categories es renderitzen en un <ul> propi separat).
   El selector és la classe ".calsots-categories-grid" que el
   filter del child theme afegeix al <ul> de categories.
   ============================================================ */

.calsots-categories-grid {
    list-style: none !important;
    margin: 0 0 48px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.calsots-categories-grid li.product-category {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    float: none !important;
}

/* Amagar imatge placeholder i comptador */
.calsots-categories-grid li.product-category img,
.calsots-categories-grid li.product-category .count,
.calsots-categories-grid li.product-category mark.count {
    display: none !important;
}

/* Card — title a l'esquerra, fletxa fixada a la dreta perquè quedi
   alineada entre cards independentment de la llargada del títol. */
.calsots-categories-grid li.product-category > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 72px;
    padding: 16px 20px !important;
    background: #f4f7ec;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none !important;
    color: var(--ast-global-color-1, #2f5929) !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
}

/* Icon SVG al costat esquerre del card */
.calsots-categories-grid .calsots-category-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--ast-global-color-0, #5a9800);
    transition: color 0.18s ease, transform 0.18s ease;
}

/* Símbol fletxa "›" al costat dret del card (lleu desplaçament al hover) */
.calsots-categories-grid li.product-category > a::after {
    content: "›";
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--ast-global-color-0, #5a9800);
    transition: transform 0.18s ease, color 0.18s ease;
    display: inline-block;
}

.calsots-categories-grid li.product-category > a:hover::after,
.calsots-categories-grid li.product-category > a:focus::after {
    color: #fff;
    transform: translateX(4px);
}

.calsots-categories-grid li.product-category > a:hover .calsots-category-icon,
.calsots-categories-grid li.product-category > a:focus .calsots-category-icon {
    color: #fff;
}

.calsots-categories-grid li.product-category > a:hover,
.calsots-categories-grid li.product-category > a:focus {
    background: var(--ast-global-color-0, #5a9800);
    color: #fff !important;
    border-color: var(--ast-global-color-0, #5a9800);
}

.calsots-categories-grid li.product-category .woocommerce-loop-category__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: inherit !important;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    flex: 1 1 auto;
}

/* Hover: força el text del títol a blanc */
.calsots-categories-grid li.product-category > a:hover .woocommerce-loop-category__title,
.calsots-categories-grid li.product-category > a:focus .woocommerce-loop-category__title {
    color: #fff !important;
}

@media (max-width: 768px) {
    .calsots-categories-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .calsots-categories-grid li.product-category > a {
        min-height: 60px;
        padding: 14px 16px !important;
    }
    .calsots-categories-grid li.product-category .woocommerce-loop-category__title {
        font-size: 15px !important;
    }
}

/* ============================================================
   GALERIA DE PRODUCTE — multi-imatge amb thumbnails neta
   ============================================================ */

/* Imatge principal: cantonades arrodonides i border subtil */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .wp-post-image {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    border-radius: 8px;
    overflow: hidden;
}

/* Lupa de zoom (la icona del cercador) */
.single-product .woocommerce-product-gallery__trigger {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    text-indent: 0;
    top: 12px !important;
    right: 12px !important;
    padding: 0 !important;
    transition: background 0.2s, transform 0.2s;
}
.single-product .woocommerce-product-gallery__trigger:hover {
    background: var(--ast-global-color-0, #5a9800);
    transform: scale(1.05);
}

/* Thumbnails — disseny custom (CSS només; els clics s'asseguren via JS) */

.single-product .ast-single-product-thumbnails .woocommerce-product-gallery-thumbnails__wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image {
    width: calc(25% - 8px) !important;
    max-width: 90px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    float: none !important;
}

.single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
}

.single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image:hover {
    border-color: rgba(90, 152, 0, 0.55);
    transform: translateY(-1px);
}

.single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image.flex-active-slide {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 0 0 1px rgba(90, 152, 0, 0.3);
}

@media (max-width: 768px) {
    .single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image {
        width: calc(20% - 8px) !important;
        max-width: 70px;
    }
}

/* Tambe la galeria default WC (per si no es genera el div d'Astra) */
.single-product .flex-control-thumbs li {
    width: calc(25% - 8px) !important;
    margin: 0 8px 8px 0 !important;
}
.single-product .flex-control-thumbs img {
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    opacity: 1;
}

@media (max-width: 768px) {
    .single-product .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image {
        width: calc(20% - 8px) !important;
        max-width: 70px;
    }
}

/* ============================================================
   BREADCRUMB de WC (single product, archive, shop)
   ============================================================ */

nav.woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #888 !important;
    margin: 1.2em 0 1.6em !important;
    padding: 0 !important;
    font-weight: 500 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* L'header de WC al voltant del breadcrumb — afegir aire */
.woocommerce-products-header {
    margin: 0 0 0.5em;
    padding: 0;
}
.woocommerce-products-header:empty {
    display: none;
}

nav.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
    color: var(--ast-global-color-1, #2f5929) !important;
    text-decoration: none !important;
    transition: color 0.15s, border-color 0.15s;
    border-bottom: 1px solid transparent;
    font-weight: 500;
}

nav.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--ast-global-color-0, #5a9800) !important;
    border-bottom-color: currentColor;
}

/* ============================================================
   QUANTITY SELECTOR — caixa unificada amb +/-, sense spinners
   ============================================================ */

.single-product .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d4d4d4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-right: 10px;
    vertical-align: middle;
}

.single-product .quantity:focus-within {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 0 0 3px rgba(90, 152, 0, 0.15);
}

/* Botons +/- (Astra Pro) */
.single-product .quantity .ast-qty-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: none;
    transition: background 0.15s, color 0.15s;
}
.single-product .quantity .ast-qty-placeholder:hover {
    background: var(--ast-global-color-0, #5a9800);
    color: #fff;
}
.single-product .quantity .ast-qty-placeholder:active {
    background: var(--ast-global-color-1, #2f5929);
}

/* Input central, sense border, text centrat */
.single-product .quantity input.qty,
.single-product .quantity input[type="number"] {
    width: 56px !important;
    height: 42px !important;
    padding: 0 4px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222 !important;
    -moz-appearance: textfield;
    appearance: textfield;
    box-shadow: none !important;
}
.single-product .quantity input.qty:focus,
.single-product .quantity input[type="number"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Amagar les fletxes natives del navegador */
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input[type="number"]::-webkit-outer-spin-button,
.single-product .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   MOBILE: CTA add-to-cart creix per dominar
   ============================================================ */

@media (max-width: 768px) {
    .single-product form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: stretch;
    }
    .single-product form.cart .quantity {
        flex: 0 0 auto;
        margin-right: 0;
    }
    .single-product form.cart .single_add_to_cart_button {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ============================================================
   FORMULARI DE VALORACIONS — disseny minim, sense caixa
   ============================================================ */

#reviews #respond.comment-respond {
    margin-top: 1.5em;
}

#reviews .comment-reply-title,
#reviews #reply-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 0.6em !important;
    display: block !important;
    color: var(--ast-global-color-3, #222);
}

#reviews #cancel-comment-reply-link {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
    color: var(--ast-global-color-1, #2f5929);
}

/* Grid: nom + email costat a costat, la resta full-width */
#reviews .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin: 0;
}

#reviews .comment-form > .comment-notes,
#reviews .comment-form > .comment-form-rating,
#reviews .comment-form > .comment-form-comment,
#reviews .comment-form > .comment-form-cookies-consent,
#reviews .comment-form > .form-submit {
    grid-column: 1 / -1;
    margin: 0;
}

#reviews .comment-form > .comment-form-author,
#reviews .comment-form > .comment-form-email {
    margin: 0;
}

/* Akismet i hidden fields fora del grid */
#reviews .comment-form > p[style*="display: none"],
#reviews .comment-form > p[style*="display:none"],
#reviews .comment-form > .akismet-fields-container {
    display: none !important;
}

/* Nota superior: text gris fi, sense caixa */
#reviews .comment-notes {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 0.4em !important;
}
#reviews .comment-notes .required {
    color: #c44;
}

/* Labels: petits i en negreta */
#reviews .comment-form label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
    color: #444;
}
#reviews .comment-form .required {
    color: #c44;
}

/* Inputs / textarea */
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form input[type="url"],
#reviews .comment-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
#reviews .comment-form input:focus,
#reviews .comment-form textarea:focus {
    border-color: var(--ast-global-color-0, #5a9800);
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 152, 0, 0.18);
}
#reviews .comment-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Stars rating — discret, sense fons */
#reviews .comment-form-rating > label {
    margin-bottom: 0;
}
#reviews p.stars {
    margin: 4px 0 0 !important;
    line-height: 1;
}
#reviews p.stars a {
    font-size: 0;
    transition: color 0.15s;
}
#reviews p.stars a::before {
    font-size: 18px;
    color: #ccc;
}
#reviews p.stars:hover a::before,
#reviews p.stars a:hover ~ a::before {
    color: #ccc;
}
#reviews p.stars a:hover::before,
#reviews p.stars a.active::before,
#reviews p.stars.selected a.active::before,
#reviews p.stars.selected a:not(.active)::before {
    color: #f0ab00;
}
#reviews p.stars.selected a.active ~ a::before {
    color: #ccc;
}

/* Checkbox cookies */
#reviews .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #777;
    margin-top: 4px !important;
}
#reviews .comment-form-cookies-consent input[type="checkbox"] {
    margin: 3px 0 0;
    flex-shrink: 0;
}
#reviews .comment-form-cookies-consent label {
    display: inline;
    font-weight: 400;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: inherit;
}

/* Botó submit */
#reviews .form-submit {
    text-align: left;
    margin-top: 4px !important;
}
#reviews .form-submit input[type="submit"],
#reviews .form-submit input.submit {
    background: var(--ast-global-color-0, #5a9800) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.15s;
}
#reviews .form-submit input[type="submit"]:hover,
#reviews .form-submit input.submit:hover {
    background: var(--ast-global-color-1, #2f5929) !important;
}

@media (max-width: 600px) {
    #reviews .comment-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =================================================================
   TEMPORADA TANCADA — missatge a fitxa de producte i botiga
   ================================================================= */
.calsots-offseason-unavailable {
    background: #fff8e1;
    border-left: 4px solid var(--ast-global-color-0, #5a9800);
    padding: 14px 18px;
    color: #5a3e00;
    font-size: 15px;
    margin: 16px 0;
    border-radius: 4px;
}

/* Pop-up de temporada — modal centrat amb overlay fosc. Configurable des
   del Customizer (Aparença → Personalitza → Missatge de temporada). */
.calsots-offseason-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: cs-offseason-fade 0.25s ease both;
}
.calsots-offseason-popup[hidden] { display: none; }
@keyframes cs-offseason-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.calsots-offseason-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 19, 3, 0.65);
    cursor: pointer;
}
.calsots-offseason-popup__dialog {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px 28px 28px;
    animation: cs-offseason-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes cs-offseason-pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.calsots-offseason-popup__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    color: #555;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}
.calsots-offseason-popup__close:hover,
.calsots-offseason-popup__close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #2F5929;
    outline: none;
}
.calsots-offseason-popup__title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: #2F5929;
    line-height: 1.25;
    padding-right: 32px;
}
.calsots-offseason-popup__body {
    color: #333;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 22px;
}
.calsots-offseason-popup__body p { margin: 0 0 12px; }
.calsots-offseason-popup__body p:last-child { margin-bottom: 0; }
.calsots-offseason-popup__body a {
    color: #2F5929;
    text-decoration: underline;
}
.calsots-offseason-popup__btn {
    display: inline-block;
    background: #2F5929;
    color: #FFFFFF;
    border: 0;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.calsots-offseason-popup__btn:hover,
.calsots-offseason-popup__btn:focus-visible {
    background: #244520;
    transform: translateY(-1px);
    outline: none;
}
body.calsots-offseason-popup-open {
    overflow: hidden;
}
@media (max-width: 480px) {
    .calsots-offseason-popup__dialog { padding: 28px 20px 22px; }
    .calsots-offseason-popup__title { font-size: 19px; }
    .calsots-offseason-popup__body { font-size: 14px; }
}

/* =================================================================
   Taules Gutenberg — headers alineats a l'esquerra (per defecte el
   navegador els centra, que no és el que esperem en taules de dades)
   ================================================================= */
.wp-block-table th {
    text-align: left;
}

/* =================================================================
   Separadors Gutenberg — amplada completa (per defecte 100px centrats)
   ================================================================= */
hr.wp-block-separator:not(.is-style-dots),
.entry-content hr.wp-block-separator:not(.is-style-dots) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =================================================================
   Llegibilitat de text a pàgines normals (no shop, no Elementor):
   font del cos més gran (17px vs 16px global) i line-height més folgat
   ================================================================= */
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content p,
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content li,
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content td,
body.single .entry-content p,
body.single .entry-content li,
body.single .entry-content td {
    font-size: 17px;
    line-height: 1.7;
}

/* Espai vertical entre seccions: H2/H3 amb prou marge superior per
   separar-se visualment del contingut previ (especialment després
   de blocs <details> o llistes). */
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content h2,
body.single .entry-content h2 {
    margin-top: 1.2em;
}
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content h3,
body.single .entry-content h3 {
    margin-top: 1em;
}
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content > h2:first-child,
body.page:not(.elementor-page):not(.woocommerce-page) .entry-content > h3:first-child,
body.single .entry-content > h2:first-child,
body.single .entry-content > h3:first-child {
    margin-top: 0;
}

/* =================================================================
   Pàgina de contacte — cards horizontals + columnes
   ================================================================= */
.calsots-contact-lead {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: var(--ast-global-color-3, #222);
    margin-bottom: 1.5em !important;
}
.calsots-contact-columns {
    margin-top: 1em;
}
/* WP limita els fills d'.entry-content (constrained) al --content-size,
   que a Astra és més estret que la columna sencera. Pugem la variable
   només per a la pàgina /contacte/ perquè tots els blocs (paràgrafs i
   columnes) ocupin tota l'amplada disponible. */
body.page-id-1313 .entry-content,
body.page-id-1711 .entry-content {
    --wp--style--global--content-size: 100%;
}
/* Astra afegeix padding lateral a TOTS els .wp-block-columns via
   --wp--custom--ast-default-block-*-padding. Això fa que la primera
   columna comenci més a la dreta que el títol H1 (que no té aquest
   padding). El neutralitzem per a la pàgina de contacte. */
body.page-id-1313 .calsots-contact-columns,
body.page-id-1711 .calsots-contact-columns {
    padding: 0 !important;
    align-items: stretch !important; /* mateixa altura entre columnes */
}
/* Forcem 50/50 (sobreescriu el flex-basis 38/62 inline del HTML) */
body.page-id-1313 .calsots-contact-columns > .wp-block-column,
body.page-id-1711 .calsots-contact-columns > .wp-block-column {
    flex: 1 1 50% !important;
    display: flex;
    flex-direction: column;
}
/* La columna esquerra distribueix les cards verticalment per ocupar
   tota l'altura disponible (la del formulari de la dreta). */
body.page-id-1313 .calsots-contact-columns > .wp-block-column:first-child > .calsots-contact-card,
body.page-id-1711 .calsots-contact-columns > .wp-block-column:first-child > .calsots-contact-card {
    flex: 1;
}
body.page-id-1313 .calsots-contact-columns > .wp-block-column:first-child > .calsots-contact-card:not(:last-child),
body.page-id-1711 .calsots-contact-columns > .wp-block-column:first-child > .calsots-contact-card:not(:last-child) {
    margin-bottom: 16px;
}

/* Compactar el formulari de SureForms (per defecte té massa espai
   entre Nom / Email / Missatge). Sobreescric les CSS variables. */
body.page-id-1313 .srfm-form-container-96,
body.page-id-1711 .srfm-form-container-96 {
    --srfm-row-gap-between-blocks: 10px !important;
    --srfm-input-field-margin-top: 0 !important;
    --srfm-input-field-margin-bottom: 0 !important;
}

/* =================================================================
   /blog/ — imatges destacades omplint la part superior del card.
   El card d'Astra té padding 3em (desktop) / 2em (tablet) / 1em (mobile);
   la imatge "trenca" aquest padding amb negative margins per anar de
   banda a banda i de dalt a dalt.
   ================================================================= */
body.blog .ast-article-post {
    padding-top: 0 !important;
    overflow: hidden;
}
body.blog .ast-article-post .post-thumb,
body.blog .ast-article-post .post-thumb-img-content {
    width: calc(100% + 6em);
    margin: 0 -3em 1.5em -3em;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: transparent;
    display: block;
}
body.blog .ast-article-post .post-thumb a,
body.blog .ast-article-post .post-thumb-img-content a {
    display: block;
    width: 100%;
    height: 100%;
}
body.blog .ast-article-post .post-thumb img,
body.blog .ast-article-post .post-thumb-img-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
}
@media (max-width: 1200px) {
    body.blog .ast-article-post .post-thumb,
    body.blog .ast-article-post .post-thumb-img-content {
        width: calc(100% + 4em);
        margin-left: -2em;
        margin-right: -2em;
    }
}
@media (max-width: 768px) {
    body.blog .ast-article-post .post-thumb,
    body.blog .ast-article-post .post-thumb-img-content {
        width: calc(100% + 2em);
        margin-left: -1em;
        margin-right: -1em;
    }
}

/* "Llegir article →" CTA dels cards del blog */
body.blog .ast-article-post .read-more,
body.blog .ast-article-post .ast-read-more,
body.blog .ast-article-post .more-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ast-global-color-0, #5a9800) !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s ease;
}
body.blog .ast-article-post .read-more:hover,
body.blog .ast-article-post .ast-read-more:hover,
body.blog .ast-article-post .more-link:hover {
    border-bottom-color: var(--ast-global-color-0, #5a9800);
}

/* Mida de títol dels cards del blog */
body.blog .ast-article-post .entry-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
}
body.blog .ast-article-post .entry-title a {
    color: var(--ast-global-color-3, #222) !important;
}
@media (max-width: 768px) {
    body.blog .ast-article-post .entry-title {
        font-size: 20px !important;
    }
}

/* =================================================================
   Imatges en single posts: ocupar tota l'amplada del contingut
   per evitar franges blanques al voltant d'imatges petites.
   ================================================================= */
body.single-post .entry-content .wp-block-image,
body.single-post .entry-content .wp-block-image > figure {
    width: 100%;
}
body.single-post .entry-content .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =================================================================
   Fitxa de recepta — bloc dificultat / temps / persones / etc.
   ================================================================= */
.calsots-recipe-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 18px 20px;
    margin: 1.5em 0;
    background: var(--ast-global-color-7, #f0f7e8);
    border-radius: 8px;
    border-left: 4px solid var(--ast-global-color-0, #5a9800);
}
.calsots-recipe-meta__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.calsots-recipe-meta__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ast-global-color-2, #777);
    font-weight: 600;
}
.calsots-recipe-meta__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--ast-global-color-3, #222);
}

/* =================================================================
   Cards de tècniques (post Com cuinar els calçots)
   ================================================================= */
.calsots-techniques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 1.5em 0 2em;
}
.calsots-tech-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}
.calsots-tech-card:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.calsots-tech-card__num {
    width: 32px;
    height: 32px;
    background: var(--ast-global-color-0, #5a9800);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.calsots-tech-card__title {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--ast-global-color-3, #222) !important;
}
.calsots-tech-card__desc {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--ast-global-color-2, #555) !important;
}
.calsots-tech-card__cta {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ast-global-color-0, #5a9800);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calsots-tech-card:hover .calsots-tech-card__cta {
    text-decoration: underline;
}

/* Cards de recursos relacionats (al final del post) */
.calsots-resources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 1.5em 0 1em;
}
.calsots-resource-card {
    display: block;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 3px solid var(--ast-global-color-0, #5a9800);
    border-radius: 6px;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.calsots-resource-card:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}
.calsots-resource-card__title {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--ast-global-color-3, #222) !important;
}
.calsots-resource-card:hover .calsots-resource-card__title {
    color: var(--ast-global-color-0, #5a9800) !important;
}
.calsots-resource-card__desc {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--ast-global-color-2, #666) !important;
}

/* =================================================================
   Calculadora de calçots — bloc HTML/JS dins del post
   ================================================================= */
.calsots-calc {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 24px;
    margin: 1.5em 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.calsots-calc__group {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 14px 18px 18px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.calsots-calc__group legend {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ast-global-color-2, #555);
    padding: 0 6px;
}
.calsots-calc__group label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--ast-global-color-2, #555);
    flex: 1 1 140px;
}
.calsots-calc__group input[type=number] {
    width: 100%;
    padding: 10px 12px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: var(--ast-global-color-3, #222);
}
.calsots-calc__group input[type=number]:focus {
    outline: none;
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 0 0 3px rgba(90, 152, 0, 0.15);
}
.calsots-calc__hint {
    flex: 1 1 100%;
    margin: 0 !important;
    font-size: 13px;
    color: var(--ast-global-color-2, #888);
}
.calsots-calc__result {
    background: var(--ast-global-color-7, #f0f7e8);
    border-radius: 8px;
    padding: 22px 24px;
    text-align: center;
}
.calsots-calc__total {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--ast-global-color-0, #5a9800);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}
.calsots-calc__total small {
    font-size: 18px;
    font-weight: 600;
    color: var(--ast-global-color-3, #222);
    text-transform: lowercase;
}
.calsots-calc__feixos {
    margin: 12px 0 0 !important;
    font-size: 16px;
    color: var(--ast-global-color-3, #222);
}
.calsots-calc__feixos em {
    color: var(--ast-global-color-2, #777);
    font-style: normal;
    font-size: 14px;
    display: block;
    margin-top: 4px;
}

/* === Bloc productes recomanats sota la calculadora === */
.calsots-calc-shop {
    margin-top: 1.5em;
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
}
.calsots-calc-shop__title {
    margin: 0 0 6px !important;
    font-size: 20px !important;
    font-weight: 700;
}
.calsots-calc-shop__intro {
    margin: 0 0 18px !important;
    color: var(--ast-global-color-2, #555);
    font-size: 14px;
}
.calsots-calc-shop__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.calsots-calc-shop__item {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}
.calsots-calc-shop__thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.calsots-calc-shop__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.calsots-calc-shop__name {
    color: var(--ast-global-color-3, #222) !important;
    font-weight: 600;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.3;
}
.calsots-calc-shop__name:hover {
    color: var(--ast-global-color-0, #5a9800) !important;
}
.calsots-calc-shop__price {
    font-size: 12px;
    color: var(--ast-global-color-2, #777);
}
.calsots-calc-shop__qty label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--ast-global-color-2, #777);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calsots-calc-shop__qty input {
    width: 70px;
    padding: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: var(--ast-global-color-3, #222);
}
.calsots-calc-shop__qty input:focus {
    outline: none;
    border-color: var(--ast-global-color-0, #5a9800);
}
.calsots-calc-shop__line {
    font-weight: 700;
    font-size: 15px;
    color: var(--ast-global-color-3, #222);
    min-width: 80px;
    text-align: right;
}
.calsots-calc-shop__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.calsots-calc-shop__subtotal {
    font-size: 16px;
    color: var(--ast-global-color-3, #222);
}
.calsots-calc-shop__subtotal strong {
    font-size: 22px;
    color: var(--ast-global-color-0, #5a9800);
    margin-left: 8px;
}
.calsots-calc-shop__btn {
    background: var(--ast-global-color-0, #5a9800);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.calsots-calc-shop__btn:hover:not(:disabled) {
    background: var(--ast-global-color-1, #2f5929);
}
.calsots-calc-shop__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.calsots-calc-shop__msg {
    flex: 1 1 100%;
    margin: 0 !important;
    font-size: 14px;
}
.calsots-calc-shop__msg.is-success { color: var(--ast-global-color-0, #5a9800); font-weight: 600; }
.calsots-calc-shop__msg.is-error   { color: #c45500; font-weight: 600; }

@media (max-width: 600px) {
    .calsots-calc-shop__item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .calsots-calc-shop__thumb { grid-row: 1 / 3; }
    .calsots-calc-shop__info { grid-column: 2; }
    .calsots-calc-shop__qty { grid-column: 2; justify-self: start; }
    .calsots-calc-shop__line { grid-column: 2; text-align: left; }
}

/* =================================================================
   Articles relacionats — sota el contingut del single post
   ================================================================= */
body.single-post .ast-single-related-posts-container {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid #eaeaea;
}
body.single-post .ast-related-posts-title-section {
    margin-bottom: 0.8em;
}
body.single-post .ast-related-posts-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--ast-global-color-0, #5a9800);
    display: inline-block;
    color: var(--ast-global-color-3, #222) !important;
}
/* Grid responsive de cards */
body.single-post .ast-related-posts-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
body.single-post .ast-related-post {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
}
body.single-post .ast-related-post:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
body.single-post .ast-related-post-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Imatge: aspect 16/9, omple el costat de dalt */
body.single-post .ast-related-post-featured-section {
    margin: 0 !important;
}
body.single-post .ast-related-post-featured-section .post-thumb-img-content {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
    margin: 0 !important;
}
body.single-post .ast-related-post-featured-section .post-thumb-img-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}
/* Header amb el títol i meta */
body.single-post .ast-related-post .related-entry-header {
    padding: 16px 22px 18px !important;
    margin: 0 !important;
    flex: 1;
    display: block !important;
}
body.single-post .ast-related-post-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
}
body.single-post .ast-related-post .entry-meta {
    margin: 0 !important;
    padding-top: 4px;
}
body.single-post .ast-related-post-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.single-post .ast-related-post-title a {
    color: var(--ast-global-color-3, #222) !important;
    text-decoration: none !important;
}
body.single-post .ast-related-post:hover .ast-related-post-title a {
    color: var(--ast-global-color-0, #5a9800) !important;
}
body.single-post .ast-related-post .entry-meta {
    font-size: 13px !important;
    color: var(--ast-global-color-2, #777) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
body.single-post .ast-related-post .entry-meta a {
    color: var(--ast-global-color-2, #777) !important;
    text-decoration: none !important;
}
body.single-post .ast-related-post .entry-content {
    display: none !important;
}

/* =================================================================
   Sidebar de single posts — widgets compactes amb llista de productes
   ================================================================= */
body.single-post #secondary {
    font-size: 15px;
    line-height: 1.5;
}
/* Astra dona 2em padding + 2em margin + bg blanc a cada widget. Ho
   neutralitzem per a que heading i productes es vegin com una unitat. */
body.single-post #secondary .widget {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}
body.single-post #secondary aside.widget + aside.widget {
    margin-top: 4px !important;
}

/* Heading dels widgets amb personalitat */
body.single-post #secondary .wp-block-heading {
    font-size: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ast-global-color-2, #555) !important;
    margin: 0 0 1em !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ast-global-color-0, #5a9800);
}

/* Productes WC dins la sidebar — mode card vertical */
body.single-post #secondary .woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
body.single-post #secondary .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    display: block !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: left !important;
    float: none !important;
    clear: none !important;
    overflow: hidden;
}
body.single-post #secondary .woocommerce ul.products li.product:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Thumbnail a sobre, ocupa tota l'amplada del card. Proporció 4:3
   per no dominar excessivament la card respecte al text inferior. */
body.single-post #secondary .astra-shop-thumbnail-wrap {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f7f7f7;
}
body.single-post #secondary .astra-shop-thumbnail-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}
body.single-post #secondary .astra-shop-thumbnail-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block;
}

/* Amagar elements innecessaris dins la sidebar */
body.single-post #secondary .ast-on-card-button,
body.single-post #secondary .ast-card-action-tooltip,
body.single-post #secondary .ahfb-svg-iconset,
body.single-post #secondary .ast-shop-product-out-of-stock,
body.single-post #secondary .button.add_to_cart_button,
body.single-post #secondary .added_to_cart,
body.single-post #secondary .ast-woocommerce-loop-quick-view,
body.single-post #secondary .star-rating,
body.single-post #secondary .ast-product-category,
body.single-post #secondary .ast-woo-product-category {
    display: none !important;
}

/* Cos del producte (títol + preu) sota la imatge */
body.single-post #secondary .astra-shop-summary-wrap {
    padding: 12px 14px 14px !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}
body.single-post #secondary .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
    color: var(--ast-global-color-3, #222) !important;
    padding: 0 !important;
    /* Truncar a 2 línies */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.single-post #secondary .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--ast-global-color-0, #5a9800) !important;
}
body.single-post #secondary .woocommerce ul.products li.product .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ast-global-color-3, #222) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
body.single-post #secondary .woocommerce ul.products li.product .price del {
    color: var(--ast-global-color-2, #888) !important;
    font-weight: 400;
    margin-right: 4px;
}
body.single-post #secondary .woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* Sticky sidebar perquè acompanyi l'scroll en posts llargs */
@media (min-width: 922px) {
    body.single-post #secondary .sidebar-main {
        position: sticky;
        top: 100px;
    }
}

/* Xarxes socials */
.calsots-social-heading {
    margin-top: 3.5em !important;
    text-align: center;
}
.calsots-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 1em 0 2em;
}
.calsots-social__link {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ast-global-color-7, #f0f7e8);
    color: var(--ast-global-color-0, #5a9800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.calsots-social__link:hover,
.calsots-social__link:focus-visible {
    background: var(--ast-global-color-0, #5a9800);
    color: #fff;
    transform: translateY(-2px);
}
.calsots-social__link svg {
    width: 24px;
    height: 24px;
    display: block;
}
/* Apilar columnes a partir de 992px (per defecte WP ho fa a 781px;
   a tablet les nostres dues columnes quedaven massa estretes) */
@media (max-width: 992px) {
    .calsots-contact-columns {
        flex-wrap: wrap !important;
    }
    .calsots-contact-columns > .wp-block-column {
        flex-basis: 100% !important;
    }
}
.calsots-contact-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px 28px;
    margin: 0 0 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.calsots-contact-card:hover {
    border-color: var(--ast-global-color-0, #5a9800);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.calsots-contact-card--static {
    cursor: default;
}
.calsots-contact-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ast-global-color-7, #f0f7e8);
    border-radius: 10px;
    color: var(--ast-global-color-0, #5a9800);
}
.calsots-contact-card__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}
.calsots-contact-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.calsots-contact-card__title {
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ast-global-color-2, #777) !important;
    line-height: 1.4 !important;
}
.calsots-contact-card__main {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.35 !important;
    color: var(--ast-global-color-3, #222) !important;
    word-break: break-word;
}
a.calsots-contact-card:hover .calsots-contact-card__main {
    color: var(--ast-global-color-0, #5a9800) !important;
}
.calsots-contact-card__note {
    display: none !important;
}

/* =====================================================================
   Prevenció d'overflow horitzontal a tablet/mobile.
   El carrousel UAEL dels productes destacats té overflow-x:auto amb
   ~2500px de width interior. En alguns navegadors mòbils el touch swipe
   horitzontal es propaga al document si l'html no té overflow-x:hidden,
   provocant un desplaçament lateral del body. Forcem hidden a html i
   afegim overscroll-behavior per aturar la propagació.
   ===================================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
    overscroll-behavior-x: none;
}
@media (max-width: 1023px) {
    body.home .uael-woocommerce ul.products {
        overscroll-behavior-x: contain;
    }
}

/* =====================================================================
   Sticky add-to-cart bar (Astra) — neteja per evitar confusió a l'usuari.
   Per defecte mostra: imatge + nom + preu + qty selector + estoc detallat
   + botó. La info d'estoc és redundant (ja és a la fitxa) i el placeholder
   de Stripe Express buit ocupa espai. També garantim padding/spacing
   coherents.
   ===================================================================== */
.ast-sticky-add-to-cart .ast-stock-detail,
.ast-sticky-add-to-cart #wc-stripe-express-checkout-element {
    display: none !important;
}
.ast-sticky-add-to-cart {
    padding: 12px 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.ast-sticky-add-to-cart .ast-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
}
.ast-sticky-add-to-cart-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* permet text-overflow ellipsis */
}
.ast-sticky-add-to-cart-title-wrap img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}
.ast-sticky-add-to-cart-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ast-sticky-add-to-cart-action-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0;
}
.ast-sticky-add-to-cart-action-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2F5929 !important;
}
.ast-sticky-add-to-cart .quantity {
    margin: 0 !important;
}
.ast-sticky-add-to-cart .button.alt,
.ast-sticky-add-to-cart .single_add_to_cart_button,
.ast-sticky-add-to-cart .single_link_to_cart_button {
    margin: 0 !important;
    padding: 10px 22px !important;
}

/* Tablet + mobile: garantir que la imatge sigui visible i que el form
   (productes simples) no expandeixi el botó a tota l'amplada.
   Astra amaga la img i deixa el form en block per defecte. */
@media (max-width: 1023px) {
    .ast-sticky-add-to-cart-title-wrap img {
        display: block !important;
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        min-width: 48px !important;
    }
    /* Form de productes simples: no expandir, només wrap natural */
    .ast-sticky-add-to-cart form.cart {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        width: auto !important;
        flex-wrap: nowrap !important;
    }
    .ast-sticky-add-to-cart-action-wrap {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .ast-sticky-add-to-cart-title-wrap {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden;
    }
    .ast-sticky-add-to-cart-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
}

/* Mobile: layout compactat — només [imatge + nom] | [botó]
   El qty selector i el preu s'amaguen a mobile per estalviar espai i
   evitar que el sticky es parteixi en 2 línies. El client pot triar la
   qty a la fitxa principal. */
@media (max-width: 767px) {
    .ast-sticky-add-to-cart {
        padding: 8px 0 !important;
    }
    .ast-sticky-add-to-cart .ast-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Astra amaga la imatge a mobile per defecte — la tornem a mostrar.
       flex-shrink: 0 evita que el flex parent la comprimeixi a 0px. */
    .ast-sticky-add-to-cart-title-wrap img {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        min-width: 40px !important;
    }
    /* titleWrap: ocupa l'espai restant. min-width: 0 perquè el text
       amb white-space:nowrap pugui comprimir-se via ellipsis sense
       empènyer el botó fora del viewport. */
    .ast-sticky-add-to-cart-title-wrap {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 10px !important;
        overflow: hidden;
    }
    .ast-sticky-add-to-cart-title {
        font-size: 14px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Amaga preu, qty i estoc detail a mobile per cabre tot en 1 línia */
    .ast-sticky-add-to-cart-action-price,
    .ast-sticky-add-to-cart .quantity,
    .ast-sticky-add-to-cart-action-wrap p.ast-stock-detail {
        display: none !important;
    }
    .ast-sticky-add-to-cart-action-wrap {
        flex: 0 0 auto !important;
    }
    .ast-sticky-add-to-cart .button.alt,
    .ast-sticky-add-to-cart .single_add_to_cart_button,
    .ast-sticky-add-to-cart .single_link_to_cart_button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }
}

/* Botó del sticky a tablet+mobile — millor presentació visual:
   icona de carret SVG + text, padding generós, ombra subtle.
   La icona és un SVG inline en background-image. */
@media (max-width: 1023px) {
    .ast-sticky-add-to-cart .single_add_to_cart_button,
    .ast-sticky-add-to-cart .single_link_to_cart_button,
    .ast-sticky-add-to-cart .button.alt {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 22px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 12px rgba(47, 89, 41, 0.25) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    }
    /* Icona de carret inline (SVG en background) */
    .ast-sticky-add-to-cart .single_add_to_cart_button::before,
    .ast-sticky-add-to-cart .single_link_to_cart_button::before,
    .ast-sticky-add-to-cart .button.alt::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'><path d='M7 4h-2l-3 7v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-9l-3-7h-2l3 7h-16zm5 11v-3m4 3v-3m-8 3v-3'/></svg>");
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .ast-sticky-add-to-cart .single_add_to_cart_button:hover,
    .ast-sticky-add-to-cart .single_link_to_cart_button:hover,
    .ast-sticky-add-to-cart .button.alt:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(47, 89, 41, 0.35) !important;
        background-color: #244520 !important;
    }
}

/* Mobile petit (< 480px): substituïm el text llarg "Afegeix a la
   cistella" pel breu "Afegeix" només dins l'sticky, perquè cap el botó
   amb la imatge i el nom del producte. Es manté el text complet a la
   resta de viewports. Fem servir font-size: 0 + pseudo-element ::after. */
@media (max-width: 480px) {
    .ast-sticky-add-to-cart .single_add_to_cart_button,
    .ast-sticky-add-to-cart .single_link_to_cart_button,
    .ast-sticky-add-to-cart .button.alt {
        font-size: 0 !important;
        padding: 12px 18px !important;
    }
    /* Substituïm el text amb un pseudo-element ::after (la ::before té
       la icona de carret). */
    .ast-sticky-add-to-cart .single_add_to_cart_button::after,
    .ast-sticky-add-to-cart .single_link_to_cart_button::after,
    .ast-sticky-add-to-cart .button.alt::after {
        content: "Afegeix";
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* Variable (no bundle): "Opcions" en lloc de "Afegeix" */
    .ast-sticky-add-to-cart [class*="single_link_to_cart_button"][href*="#product-"]:not([href*="-1385"]):not([href*="-1389"]):not([href*="-1392"]):not([href*="-1395"])::after {
        content: "Opcions";
    }
}

/* =================================================================
   Bloc <details> de Gutenberg — accordion per a FAQs i similars.
   Per defecte el browser només pinta una fletxa nua, queda lleig.
   ================================================================= */
.wp-block-details {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 0 12px;
    background: #fff;
    transition: border-color 0.15s ease;
}
.wp-block-details:hover {
    border-color: var(--ast-global-color-0, #5a9800);
}
.wp-block-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ast-global-color-3, #222);
    padding: 2px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
    outline: none;
}
.wp-block-details summary::-webkit-details-marker {
    display: none;
}
.wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--ast-global-color-0, #5a9800);
    line-height: 1;
    transition: transform 0.2s ease;
}
.wp-block-details[open] summary::after {
    content: "−";
}
.wp-block-details summary:hover {
    color: var(--ast-global-color-0, #5a9800);
}
.wp-block-details[open] summary {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.wp-block-details > *:not(summary) {
    margin-top: 0;
}
.wp-block-details p:last-child,
.wp-block-details ul:last-child,
.wp-block-details ol:last-child {
    margin-bottom: 0;
}

/* Home hero — text-shadow to keep H1/subtítol readable over the photo
   after lowering the overlay opacity from 0.7 to 0.5. The "halo" gives a
   local dark fallback even on lighter image areas. */
body.home .elementor-element-b35b910 .uael-infobox-title,
body.home .elementor-element-b35b910 .uael-infobox-text {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Home featured products — convert the 1-column layout (used on tablet
   and mobile) into a horizontal scroll-snap carousel. CSS-only: no JS,
   uses native swipe gestures. A small "peek" of the next product (~10%)
   communicates that the row is scrollable. */
@media (max-width: 1024px) {
    body.home .elementor-element-b8b1950 ul.products {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        scroll-padding-inline: 0;
        padding: 0 0 8px 0;
        margin: 0;
        list-style: none;
    }
    body.home .elementor-element-b8b1950 ul.products::before,
    body.home .elementor-element-b8b1950 ul.products::after {
        display: none;
    }
    body.home .elementor-element-b8b1950 ul.products > li {
        flex: 0 0 calc(90% - 8px);
        scroll-snap-align: start;
        width: auto !important;
        margin: 0 !important;
        max-width: none;
    }
    body.home .elementor-element-b8b1950 ul.products::-webkit-scrollbar {
        height: 4px;
    }
    body.home .elementor-element-b8b1950 ul.products::-webkit-scrollbar-thumb {
        background: rgba(47, 89, 41, 0.3);
        border-radius: 2px;
    }
}
/* Tablet: show 2 cards at a time (with slim peek of 3rd) instead of 1.
   874px-wide single card felt very empty. */
@media (min-width: 768px) and (max-width: 1024px) {
    body.home .elementor-element-b8b1950 ul.products > li {
        flex: 0 0 calc(48% - 8px);
    }
}
/* Carousel indicator: 6 small dots painted via radial-gradient below the
   product list on tablet/mobile. Static (no active-state) — purpose is to
   hint "there are more items, swipe horizontally". The peek + scrollbar
   already do most of the heavy lifting; the dots reinforce. */
@media (max-width: 1024px) {
    body.home .elementor-element-b8b1950 .uael-woo-products-inner::after {
        content: '';
        display: block;
        width: 84px;
        height: 8px;
        margin: 14px auto 0;
        background: radial-gradient(circle 3px, #2F5929 50%, transparent 50%) 0 50% / 14px 100% repeat-x;
        opacity: 0.45;
    }
}

/* Smooth-scroll for in-page anchors (e.g. hero CTA -> #productes-destacats).
   scroll-margin-top keeps the section header visible below any sticky bar. */
html {
    scroll-behavior: smooth;
}
#productes-destacats {
    scroll-margin-top: 24px;
}

/* Hero CTA — lift+shadow on hover, matching the product cards' tactile feel.
   Slightly stronger shadow than the cards to keep the button perceptible
   over the dark hero background. */
body.home .elementor-element-b4b8a2e .elementor-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
body.home .elementor-element-b4b8a2e .elementor-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.18);
}

/* "Tot sobre els calçots" topic grid — 8 cards linking to the evergreen
   content pages. Layout: 4×2 desktop, 2×4 tablet+mobile.
   Each card: FA icon (in a soft circle bg) + H3 below, hover lift+shadow. */
body.home .calsots-topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) {
    body.home .calsots-topics {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
body.home .calsots-topic {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    overflow: hidden;
}
body.home .calsots-topic:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(47, 89, 41, 0.10), 0 6px 8px rgba(47, 89, 41, 0.06);
}
body.home .calsots-topic > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
    color: #1a1a1a;
    text-decoration: none;
    min-height: 140px;
    transition: color 0.2s ease;
}
/* Tablet: switch to horizontal (icon left, H3 right) so the wider 472px
   cards don't feel padded with empty space. */
@media (min-width: 768px) and (max-width: 1024px) {
    body.home .calsots-topic > a {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 18px;
        padding: 18px 22px;
        min-height: 104px;
    }
    body.home .calsots-topic__icon {
        flex: 0 0 auto;
    }
}
body.home .calsots-topic__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FAF7F2;
    color: #2F5929;
    font-size: 24px;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
body.home .calsots-topic:hover .calsots-topic__icon {
    background: #2F5929;
    color: #fff;
    transform: scale(1.08);
}
body.home .calsots-topic h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}
@media (max-width: 480px) {
    body.home .calsots-topic > a {
        min-height: 140px;
        padding: 24px 14px;
        gap: 12px;
    }
    body.home .calsots-topic__icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    body.home .calsots-topic h3 {
        font-size: 15px;
    }
}

/* "Aprèn i cuina" — 2 image-cards side-by-side (Blog + Receptes).
   Each card: full-bleed image, dark gradient at bottom, H3 + CTA hint
   on top. Hover: image zoom + slight lift. Stack on mobile. */
body.home .aprencuina-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 767px) {
    body.home .aprencuina-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
body.home .aprencuina-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}
body.home .aprencuina-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
body.home .aprencuina-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
body.home .aprencuina-card:hover .aprencuina-card__img {
    transform: scale(1.05);
}
body.home .aprencuina-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 19, 3, 0.85) 0%,
        rgba(10, 19, 3, 0.45) 35%,
        rgba(10, 19, 3, 0.05) 65%,
        transparent 100%);
    z-index: 1;
}
body.home .aprencuina-card__content {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 28px;
    z-index: 2;
    color: #fff;
    display: block;
}
body.home .aprencuina-card__content h3 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.home .aprencuina-card__cta {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@media (max-width: 1024px) {
    body.home .aprencuina-card__content {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }
    body.home .aprencuina-card__content h3 {
        font-size: 22px;
    }
}
@media (max-width: 480px) {
    body.home .aprencuina-card__content h3 {
        font-size: 20px;
    }
    body.home .aprencuina-card__cta {
        font-size: 14px;
    }
}

/* Fix overlap "Aprèn i cuina" → "Avantatges":
   Elementor flex-column de l'`.e-con-inner` calcula malament l'alçada
   del widget HTML que conté el grid de cards (li dóna 16px enlloc de
   l'alçada del seu contingut real). La secció queda més curta del que
   hauria i la següent s'encavalca.
   Solució: convertir aquesta secció de flex-column a flow normal
   (display: block) — així el contingut s'apila naturalment i les
   alçades es propaguen com toca. */
body.home .elementor-element-a7c9b01,
body.home .elementor-element-a7c9b01 > .e-con-inner {
    display: block !important;
}
/* Substituïm el flex-gap (que ara no aplica) per margin-top a l'HTML
   widget perquè la separació entre heading i grid es mantingui visual. */
body.home .elementor-element-a7c9b01 > .e-con-inner > .elementor-element-a7c9b03 {
    margin-top: 40px;
}
@media (max-width: 1024px) {
    body.home .elementor-element-a7c9b01 > .e-con-inner > .elementor-element-a7c9b03 {
        margin-top: 32px;
    }
}
@media (max-width: 767px) {
    body.home .elementor-element-a7c9b01 > .e-con-inner > .elementor-element-a7c9b03 {
        margin-top: 24px;
    }
}

/* Home featured products — desktop layout: grid with 24px gap (the UAEL
   skin packs cards edge-to-edge with no breathing room).
   IMPORTANT: WC adds ::before/::after pseudos with `display: table`
   (clearfix) to ul.products. Inside a CSS grid those pseudos count as
   grid items and occupy 2 extra cells, shifting all cards by one column.
   We neutralize them. */
@media (min-width: 1025px) {
    body.home .elementor-element-b8b1950 ul.products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    body.home .elementor-element-b8b1950 ul.products::before,
    body.home .elementor-element-b8b1950 ul.products::after {
        display: none;
    }
    body.home .elementor-element-b8b1950 ul.products > li {
        width: auto !important;
        margin: 0 !important;
        max-width: none;
    }
}

/* Home featured products — card visual treatment (applies on all devices).
   Subtle elevation, soft hover lift, fixed summary padding, and price in the
   brand secondary green so it passes WCAG AA on white (8.2:1). */
body.home .elementor-element-b8b1950 ul.products > li {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
body.home .elementor-element-b8b1950 ul.products > li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.05);
}
/* The grid-franko skin renders summary padding as "16px 3.2px" on this site
   (asymmetric, hugs the side of the card). Force a uniform 16px. */
body.home .elementor-element-b8b1950 .uael-woo-products-summary-wrap {
    padding: 16px !important;
}
/* Price was rendered in #77A464 ~ 3.4:1 contrast on white (FAIL AA). Switch
   to brand secondary so it both pops more and passes contrast. */
body.home .elementor-element-b8b1950 .price,
body.home .elementor-element-b8b1950 .price .woocommerce-Price-amount,
body.home .elementor-element-b8b1950 .price .woocommerce-Price-currencySymbol {
    color: #2F5929 !important;
}

/* Hide quick-view + cart-icon overlay on home product cards. The cart icon
   linked to the product page (not actually adding to cart), the tooltip was
   "Quick View" untranslated, and on touch devices the hover-only pattern is
   broken. The card itself is already a link to the product page. */
body.home .elementor-element-b8b1950 .uael-product-actions {
    display: none !important;
}

/* Product title: switch to neutral dark so the brand green is reserved for
   the price (clearer visual hierarchy). Tighten line-height for short
   product names and bump size on desktop. */
body.home .elementor-element-b8b1950 .uael-loop-product__link .woocommerce-loop-product__title {
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    font-size: 17px !important;
}
@media (max-width: 1024px) {
    body.home .elementor-element-b8b1950 .uael-loop-product__link .woocommerce-loop-product__title {
        font-size: 16px !important;
    }
}

/* Price: bigger than the title so it carries the visual weight (price is
   the key info on a product card). */
body.home .elementor-element-b8b1950 .price {
    font-size: 18px !important;
    line-height: 1.4 !important;
}
@media (max-width: 767px) {
    body.home .elementor-element-b8b1950 .price {
        font-size: 17px !important;
    }
}

/* =================================================================
   /EL-MEU-COMPTE/ — login form (logged-out) i shell de la pàgina.
   Astra activa "modern Woo account view" (cartea bonica per defecte)
   però amaga els labels i força MAJÚSCULES al botó. Aquí:
   - Centrem H1 i form
   - Mostrem els labels sobre cada input (millor a11y / UX)
   - Treiem majúscules del botó "Entra" + hover lift
   - Brand color al link "Heu perdut..."
   ================================================================= */
body.woocommerce-account .entry-title {
    text-align: center;
    margin-bottom: 28px;
}
body.woocommerce-account .woocommerce {
    max-width: 480px;
    margin: 0 auto;
}
body.woocommerce-account.logged-in .woocommerce {
    max-width: none;
}
body.woocommerce-account .woocommerce-form-login {
    background: #fff;
    border: 1px solid #ece8e0;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.woocommerce-account .woocommerce-form-login h2 {
    text-align: center;
    margin: 0 0 24px;
    font-size: 22px;
    color: #2F5929;
}
body.woocommerce-account .woocommerce-form-login .form-row,
body.woocommerce-account .woocommerce-form-login .woocommerce-form-row {
    margin-bottom: 16px;
}
body.woocommerce-account .woocommerce-form-login label:not(.woocommerce-form__label-for-checkbox) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: static !important;
    clip: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
}
body.woocommerce-account .woocommerce-form-login label .required {
    color: #c0392b;
    margin-left: 2px;
}
/* Hide the small "Obligatori" / "Required" text appended after the asterisk
   — keep just the * for compactness. */
body.woocommerce-account .woocommerce-form-login label .optional,
body.woocommerce-account .woocommerce-form-login label > .screen-reader-text {
    display: none;
}
body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="email"],
body.woocommerce-account .woocommerce-form-login input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d6d2cb;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.woocommerce-account .woocommerce-form-login input:focus {
    border-color: #2F5929;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 89, 41, 0.15);
}
body.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 22px;
    font-size: 14px;
    cursor: pointer;
}
body.woocommerce-account .woocommerce-form-login button.button {
    text-transform: none !important;
    background: #2F5929 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 14px 24px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.woocommerce-account .woocommerce-form-login button.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(47, 89, 41, 0.25);
    background: #244520 !important;
}
body.woocommerce-account .woocommerce-LostPassword {
    text-align: center;
    margin-top: 16px;
}
body.woocommerce-account .woocommerce-LostPassword a {
    color: #2F5929;
    font-weight: 500;
    text-decoration: none;
}
body.woocommerce-account .woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* Logged-in dashboard: harmonitzem el menu lateral i les cards de
   contingut amb la resta del site (sense canviar Astra modern, només
   refinant detalls). */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
    border-radius: 8px;
    overflow: hidden;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:hover {
    color: #2F5929;
}
body.woocommerce-account.logged-in .woocommerce-Button.button {
    text-transform: none !important;
}

/* =====================================================================
   Footer redisseny — 4 columnes (brand · explora · compra · legal),
   max 1200px, dark green background, accent verd al hover.
   ===================================================================== */
.cs-footer {
    background: #2F5929;
    color: #E8E8E5;
    width: 100%;
}
.cs-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 24px;
}
/* Desktop ample (≥1248 = 1200 grid + 24 gutter cada costat): treiem el
   padding lateral perquè el grid ocupi els 1200px exactes, igual que
   l'inner. */
@media (min-width: 1248px) {
    .cs-footer__inner { padding-left: 0; padding-right: 0; }
}
.cs-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}
@media (max-width: 1023px) {
    .cs-footer__inner { padding: 48px 24px 20px; }
    .cs-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
}
@media (max-width: 599px) {
    .cs-footer__inner { padding: 40px 20px 16px; }
    .cs-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Columna brand (logo + tagline + socials) */
.cs-footer__brand .cs-footer__logo {
    display: inline-block;
    margin-bottom: 0;
}
.cs-footer__brand .cs-footer__logo img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 100%;
}
@media (max-width: 1023px) {
    .cs-footer__brand .cs-footer__logo img { height: 48px; }
}
@media (max-width: 599px) {
    .cs-footer__brand .cs-footer__logo img { height: 44px; }
}
.cs-footer__tagline {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    line-height: 1.5;
    white-space: nowrap;
}
@media (max-width: 1023px) {
    /* tablet/mobile: més marge a la columna brand, podem pujar mida */
    .cs-footer__tagline { font-size: 0.85rem; }
}
@media (max-width: 359px) {
    .cs-footer__tagline { font-size: 0.78rem; }
}
.cs-footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.cs-footer__socials li { margin: 0; }
.cs-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cs-footer__socials a:hover,
.cs-footer__socials a:focus-visible {
    background: #5A9800;
    color: #FFFFFF;
    transform: translateY(-2px);
}
.cs-footer__socials svg {
    width: 18px;
    height: 18px;
}

/* Capçaleres de columna */
.cs-footer__heading {
    margin: 0 0 18px;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Llistes d'enllaços */
.cs-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-footer__links li { margin: 0; }
.cs-footer__links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.18s ease, padding-left 0.2s ease;
    display: inline-block;
}
.cs-footer__links a:hover,
.cs-footer__links a:focus-visible {
    color: #FFFFFF;
    padding-left: 4px;
}

/* Bottom bar (copyright) */
.cs-footer__bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.cs-footer__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
@media (max-width: 599px) {
    .cs-footer__bottom { margin-top: 28px; padding-top: 16px; }
    .cs-footer__copy { font-size: 0.8rem; }
}

/* Anul·lar padding/marges del wrapper Elementor del footer perquè el
   nostre fons ocupi tot l'ample. */
footer#colophon .elementor-section,
footer#colophon .e-con,
footer#colophon .elementor-widget-html,
footer#colophon .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
footer#colophon { background: #2F5929; }

/* =====================================================================
   Bundles (packs) — amagar el div .bundle_error i deixar només el preu
   final a la fitxa. El plugin WC Product Bundles desplega .bundle_error
   via JS quan hi ha problemes de validació, però amb tots els items
   amagats i quantitats fixes no aporta res — només distreu.
   ===================================================================== */
body.single-product .product-type-bundle .bundle_error,
.bundled_product_summary_error,
.bundled_item_data_error {
    display: none !important;
}
/* Si hi ha cap fallback HTML amb del/ins de WC al preu, l'estilem net */
body.single-product .product-type-bundle .price del { display: none; }
body.single-product .product-type-bundle .price ins {
    text-decoration: none;
    background: transparent;
}
/* Bundles: amagar qualsevol badge "Sale!"/"Oferta" (UAEL flash container i
   .onsale de WC) a tots els contextos — fitxa, /botiga/, home destacats. */
.product-type-bundle .uael-flash-container,
.product-type-bundle .uael-onsale,
.product-type-bundle .onsale,
li.product-type-bundle .onsale,
.uael-product-grid .product-type-bundle .uael-flash-container,
.products .product-type-bundle .uael-flash-container,
.products .product-type-bundle .onsale {
    display: none !important;
}

/* Botó "Afegeix a la cistella" del bundle: el JS de PB li posa la
   classe `disabled` (visual) per fals positiu de validació quan els
   ítems estan amagats i les variations pre-seleccionades. Anul·lem
   l'estil disabled — el botó funciona igual perquè la classe és només
   visual, no l'attribut HTML disabled. */
.product-type-bundle .bundle_add_to_cart_button.disabled,
.product-type-bundle .single_add_to_cart_button.disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* =====================================================================
   COHERÈNCIA GLOBAL — botons WC i page titles
   =====================================================================
   La home defineix la jerarquia visual del site. La resta de pàgines
   tenia inconsistències:
   - Tots els botons "Afegeix a la cistella", "Continua comprant",
     "Torna a la botiga"... usaven verd primari #5A9800 que té contrast
     3.54:1 sobre blanc — falla WCAG AA. Els unifiquem a #2F5929 (brand
     secondary, AA-passing 8.13:1).
   - La home fa servir `--page-title-display:none` (via Elementor) per
     amagar el seu page title (té hero propi). Aquesta regla apareix a
     :root i s'aplica globalment. Forcem que TOTES les altres pàgines
     mostrin el seu page title (H1) per accessibilitat i SEO.
   ===================================================================== */
body:not(.home) {
    --page-title-display: block !important;
}

/* Botons WC — color brand secondary AA-passing */
.woocommerce a.button:not(.calsots-offseason-disabled-btn),
.woocommerce button.button:not(.calsots-offseason-disabled-btn),
.woocommerce input.button:not(.calsots-offseason-disabled-btn),
.woocommerce .button:not(.calsots-offseason-disabled-btn),
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions_row .wc-block-components-button,
.woocommerce-cart-form button[name="apply_coupon"],
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-page button.button.alt,
.woocommerce a.checkout-button,
.woocommerce a.added_to_cart,
.single_add_to_cart_button,
.bundle_add_to_cart_button,
button.single_add_to_cart_button {
    background-color: #2F5929 !important;
    color: #FFFFFF !important;
    border-color: #2F5929 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__actions_row .wc-block-components-button:hover,
.woocommerce-cart-form button[name="apply_coupon"]:hover,
.woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce a.checkout-button:hover,
.woocommerce a.added_to_cart:hover,
.single_add_to_cart_button:hover,
.bundle_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
    background-color: #244520 !important;
    color: #FFFFFF !important;
}
/* Excepció: el botó offseason-disabled manté el seu gris */
.calsots-offseason-disabled-btn {
    /* (la regla específica més avall ja l'estilitza) */
}

/* Botó del checkout desactivat fora de temporada — visualment clar que
   no es pot prémer, sense semblar trencat. */
.calsots-offseason-disabled-btn {
    background: #b8c6b3 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    border: 0;
    padding: 14px 28px;
    font-weight: 600;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
.calsots-offseason-disabled-btn:hover,
.calsots-offseason-disabled-btn:focus {
    background: #b8c6b3 !important;
    color: #ffffff !important;
    transform: none !important;
}

/* =====================================================================
   Language switcher al header (Polylang via [calsots_lang_switcher]).
   Dues banderes en línia amb hover/current state. Apareix abans dels
   icones d'account+cart al primary_right.
   ===================================================================== */
/* Lang switcher: text 'CA' / 'ES' separats per pipe, sempre a la
   mateixa línia. Item actual: bold + color destacat; l'altre: enllaç
   discret amb hover. Mida i estructura idèntica entre llengües. */
.calsots-lang-switcher {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1;
}
.calsots-lang-switcher li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}
.calsots-lang-switcher li::before {
    display: none !important;
}
.calsots-lang-switcher li + li::before {
    display: inline-block !important;
    content: "/";
    margin: 0 8px;
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
}
.calsots-lang-switcher li a {
    display: inline-block;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
    font-weight: 500;
    color: var(--ast-global-color-3, #6b6b6b) !important;
    transition: color 0.18s ease;
    line-height: 1;
}
.calsots-lang-switcher li a:hover,
.calsots-lang-switcher li a:focus-visible {
    color: var(--ast-global-color-0, #5a9800) !important;
}
.calsots-lang-switcher li.current-lang a {
    color: var(--ast-global-color-1, #2f5929) !important;
    font-weight: 700;
    cursor: default;
}
/* Polylang afegeix un <img> de bandera dins del <a> quan show_flags=1.
   Amb show_flags=0 ja no s'imprimeix; defensa per si torna a aparèixer. */
.calsots-lang-switcher li img {
    display: none !important;
}

/* =====================================================================
   Header — alineació vertical d'icones (account + cart).
   El wrapper del cart té estructura `<a>` + outline border que el fa
   ~41px d'alt; l'account és un SVG de 24px. Amb el flex center del
   parent, els seus glyphs queden a alçades diferents. Forcem els dos
   wrappers a tenir la mateixa alçada i centrar el seu contingut.
   ===================================================================== */
.ast-builder-layout-element .ast-header-account-wrap,
.ast-builder-layout-element .ast-site-header-cart,
.ast-builder-layout-element .ast-site-header-cart .ast-cart-menu-wrap,
.ast-builder-layout-element .ast-site-header-cart .ast-addon-cart-wrap {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ast-builder-layout-element .ast-header-account-wrap a,
.ast-builder-layout-element .ast-header-account-wrap svg,
.ast-builder-layout-element .ast-site-header-cart .astra-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* =====================================================================
   DESKTOP HEADER — més espai entre el lang switcher (CA/ES) i
   l'icon d'account perquè el switcher no quedi enganxat als icons.
   ===================================================================== */
@media (min-width: 769px) {
    #ast-desktop-header .site-header-primary-section-right > .ast-header-account {
        margin-left: 14px;
    }
}

/* =====================================================================
   MOBILE HEADER — tot en una sola fila:
     LOGO + CA/ES + 👤 account + 🛒 cart + ☰ menu-trigger
   ===================================================================== */
@media (max-width: 768px) {
    /* Grid row: alinear vertical i mai trencar línia */
    .ast-mobile-header-wrap .ast-builder-grid-row {
        align-items: center;
        flex-wrap: nowrap;
    }
    /* Primary row — paddings compactes */
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-wrap .site-primary-header-wrap {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 12px !important;
        padding-right: 10px !important;
    }
    /* Columna esquerra (logo): nomes la mida del logo (no grow) */
    .ast-mobile-header-wrap .site-header-primary-section-left {
        flex: 0 0 auto;
    }
    /* Columna dreta: ocupa la resta i distribueix [switcher | ...spacer... | account cart trigger] */
    .ast-mobile-header-wrap .site-header-primary-section-right {
        flex: 1 1 auto;
        gap: 14px;
        align-items: center;
        flex-wrap: nowrap;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-builder-layout-element {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto;
    }
    /* Switcher (1r child): MOLT a prop del logo (4px), i margin-right auto
       que empeny account+cart+trigger cap a la dreta */
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-html-3 {
        margin-left: 4px !important;
        margin-right: auto !important;
    }
    /* Account (2n child): espai extra abans (separat del switcher) */
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-account {
        margin-left: 14px !important;
    }
    /* Trigger (últim child): MOLT més espai abans (separat del cart) */
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-builder-layout-element:last-child {
        margin-left: 22px !important;
    }
    /* Logo: una mica més gran (160px) */
    .ast-mobile-header-wrap .site-branding img.custom-logo {
        max-width: 160px !important;
        max-height: 38px !important;
        width: auto !important;
        height: auto !important;
    }
    /* Lang switcher: text compacte */
    .ast-mobile-header-wrap .ast-header-html-3 .calsots-lang-switcher {
        font-size: 12px;
    }
    .ast-mobile-header-wrap .ast-header-html-3 .calsots-lang-switcher li + li::before {
        margin: 0 5px;
    }
    /* Account icon: SVG 22x22 */
    .ast-mobile-header-wrap .ast-header-account-wrap .ast-header-account-type-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    /* Cart icon: outline compacte */
    .ast-mobile-header-wrap .ast-site-header-cart .ast-addon-cart-wrap {
        padding: 0.25em !important;
    }
    .ast-mobile-header-wrap .ast-icon-shopping-bag svg,
    .ast-mobile-header-wrap .ast-icon-shopping-cart svg,
    .ast-mobile-header-wrap .ast-icon-shopping-basket svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* Menu trigger: 36x36 i sense padding extra */
    .ast-mobile-header-wrap .ast-builder-menu-toggle-icon .menu-toggle,
    .ast-mobile-header-wrap .menu-toggle {
        padding: 6px !important;
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    /* Mantenim l'espai entre icons, només compactem padding i logo */
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-wrap .site-primary-header-wrap {
        padding-left: 10px !important;
        padding-right: 8px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right {
        gap: 12px;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-html-3 {
        margin-left: 4px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-account {
        margin-left: 12px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-builder-layout-element:last-child {
        margin-left: 18px !important;
    }
    .ast-mobile-header-wrap .site-branding img.custom-logo {
        max-width: 140px !important;
        max-height: 34px !important;
    }
    .ast-mobile-header-wrap .ast-header-account-wrap .ast-header-account-type-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 360px) {
    /* iPhone SE: padding mínim però mantenim espais entre icons llegibles */
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-wrap .site-primary-header-wrap {
        padding-left: 8px !important;
        padding-right: 6px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right {
        gap: 9px;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-html-3 {
        margin-left: 3px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-header-account {
        margin-left: 9px !important;
    }
    .ast-mobile-header-wrap .site-header-primary-section-right > .ast-builder-layout-element:last-child {
        margin-left: 14px !important;
    }
    .ast-mobile-header-wrap .site-branding img.custom-logo {
        max-width: 115px !important;
    }
    .ast-mobile-header-wrap .ast-header-html-3 .calsots-lang-switcher {
        font-size: 11px;
    }
    .ast-mobile-header-wrap .ast-icon-shopping-bag svg,
    .ast-mobile-header-wrap .ast-icon-shopping-cart svg,
    .ast-mobile-header-wrap .ast-icon-shopping-basket svg {
        width: 18px !important;
        height: 18px !important;
    }
    .ast-mobile-header-wrap .ast-header-account-wrap .ast-header-account-type-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .ast-mobile-header-wrap .ast-builder-menu-toggle-icon .menu-toggle {
        min-width: 32px;
        min-height: 32px;
        padding: 4px !important;
    }
}

/* =====================================================================
   PRODUCT NAVIGATION (square-outline) — Astra Pro mostra fletxes
   prev/next a sobre el producte. En mobile pot quedar mal alineat
   o sortir-se de la card.
   ===================================================================== */
.ast-product-navigation-wrapper.square-outline {
    z-index: 5;
}
.ast-product-navigation-wrapper.square-outline .product-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ast-product-navigation-wrapper.square-outline .product-links > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ast-border-color, #e0e0e0);
    border-radius: 4px;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ast-product-navigation-wrapper.square-outline .product-links > a:hover {
    background: var(--ast-global-color-0, #5a9800);
    border-color: var(--ast-global-color-0, #5a9800);
    color: #fff;
}
.ast-product-navigation-wrapper.square-outline .product-links > a.ast-disable {
    opacity: 0.4;
    pointer-events: none;
}
.ast-product-navigation-wrapper.square-outline .product-links > a svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .ast-product-navigation-wrapper.square-outline .product-links > a {
        width: 32px;
        height: 32px;
    }
    .ast-product-navigation-wrapper.square-outline .product-links > a svg {
        width: 12px;
        height: 12px;
    }
    /* Ocultar el preview hover (imatge + títol del producte adjacent)
       en mobile per no causar overflow horitzontal. */
    .ast-product-navigation-wrapper.square-outline .ast-navigation-product-preview {
        display: none !important;
    }
}