/* ══════════════════════════════════════════════════════════════
   Cart — pell del projecte: MUMONA
   Únic CSS del carro que canvia d'un client a un altre. Es carrega
   des d'index.html al final del <body>, després de cart.css,
   cart_drawer.css i checkout.css, per guanyar-los a igual especificitat.
   Identitat Mumona: blanc i negre, cantonades rectes, Helvetica
   (text) / helvetica-bold (èmfasi), SackersGothic (títols), menta
   #b0d1bd com a accent i #52a12b per a "fet/gratis".
   ══════════════════════════════════════════════════════════════ */

:root {
    --mumona-negre: #000;
    --mumona-menta: #b0d1bd;
    --mumona-verd: #52a12b;
    --mumona-gris: #666;
    --mumona-linia: #e0e1e2;

    --cart-radius: 0;
    --cart-border: var(--mumona-linia);
    --cart-muted: var(--mumona-gris);
    --cart-accent: var(--mumona-negre);
    --cart-success: var(--mumona-verd);
    --cart-cream: #f7f7f5;
    --cart-soft: #f5f5f5;
    --bs-primary: var(--mumona-negre);
    --color-border: var(--mumona-linia);
    --color-text: var(--mumona-negre);
    --color-muted: var(--mumona-gris);
    --radius-sm: 0;
}

/* ── Reset de marges ───────────────────────────────────────────
   estils.css de Mumona té "* { margin: 0 auto }": dins els flex
   del carro encongeix i centra qualsevol element sense marge propi.
   :where() deixa l'especificitat a 0, així els marges que defineix
   el CSS del carro continuen manant. */
:where(#cart-drawer, .checkout, .cart-page, .thankyou, .login-popup, .cart-promos-volum__popup, .cart-toast) * {
    margin: 0;
}

/* ── Tipografia ─────────────────────────────────────────────── */
#cart-drawer,
.checkout,
.cart-page,
.thankyou,
.login-popup {
    font-family: Arial, 'helvetica-light', sans-serif;
    color: var(--mumona-negre);
}
#cart-drawer b, #cart-drawer strong,
.checkout b, .checkout strong,
.cart-page b, .cart-page strong,
.cart-drawer-item__name,
.cart-drawer-item__price,
.cart-drawer-total,
.cart-item__name,
.cart-totals__row--total,
.form-section__title {
    font-family: 'helvetica-bold', Arial, sans-serif;
    font-weight: normal;
}
/* Títols amb la tipografia dels encapçalaments del web */
.cart-drawer-header h2,
.checkout__right > h2,
.cart-page__title,
.thankyou__title,
.cart-promos-volum__popup h2 {
    font-family: 'SackersGothicStd-Heavy', 'helvetica-bold', Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cart-drawer-header h2 { font-size: 15px; }
.checkout__right > h2 { font-size: 14px; }
.cart-page__title { font-size: 22px; }

/* ── Botons ─────────────────────────────────────────────────────
   Principal: negre ple; en passar-hi, contorn negre (com "A la cesta"). */
.btn-primary,
.cart-drawer-checkout,
.checkout__pay-btn,
.checkout__mobile-btn,
.cart-promo__submit {
    background: var(--mumona-negre) !important;
    color: #fff !important;
    border: 2px solid var(--mumona-negre) !important;
    border-radius: 0 !important;
    font-family: 'helvetica-bold', Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.btn-primary:hover,
.cart-drawer-checkout:hover,
.checkout__pay-btn:hover,
.checkout__mobile-btn:hover,
.cart-promo__submit:hover {
    background: #fff !important;
    color: var(--mumona-negre) !important;
    opacity: 1;
}
/* Sense la lluentor animada de Shop88 */
.btn-primary::after,
.cart-drawer-checkout::after,
.checkout__pay-btn::after,
.cart-page__checkout::after { display: none; }

.cart-drawer-checkout {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    text-align: center;
}
.btn-link { color: var(--mumona-negre); }

/* Components d'una línia de pack o de promoció de pàgina (php/packs.php):
   llista compacta amb miniatura, sense pics ni imatges a mida completa */
.pack-carro-llista { list-style: none; padding: 0; margin: 6px 0 0 !important; display: flex; flex-direction: column; gap: 6px; }
.pack-carro-item { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--mumona-gris); }
.pack-carro-foto { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; background: #fff; }
.pack-carro-qty { color: var(--mumona-negre); font-family: 'helvetica-bold', Arial, sans-serif; white-space: nowrap; }
/* Resum del checkout: el cos és una graella de 2 columnes; la llista va sota el nom */
.cart-item--compact .pack-carro-llista { grid-column: 1 / -1; }
.cart-item--compact .pack-carro-item { font-size: 11px; }
.cart-item--compact .pack-carro-foto { width: 28px; height: 28px; }

/* Codi promocional sempre visible (promo_desplegable = N): que el placeholder
   "¿Tienes código promocional?" hi càpiga a la columna del resum */
.cart-promo__form.open { border-bottom: 1px solid #ababab; }
.cart-promo__input { padding-left: 10px; padding-right: 10px; font-size: 13px; }
.cart-promo__input::placeholder { font-size: 12px; }
.cart-promo__submit { padding-left: 12px; padding-right: 12px; }

/* Camps i selectors: rectes com al web */
.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout input[type="password"],
.checkout select,
.checkout textarea,
.login-popup input,
.cart-promo__input,
.cart-drawer-qty,
.cart-item__qty,
.cart-page__qty,
.login-popup,
.white-popup {
    border-radius: 0 !important;
}

/* ── Drawer ─────────────────────────────────────────────────────
   Línia en fila: foto petita a l'esquerra, dades a la dreta. */
.cart-drawer-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
}
.cart-drawer-item__img,
.cart-drawer-item__img img {
    width: 80px;
    flex-shrink: 0;
}
.cart-drawer-item__img img { border-radius: 0; background: #fff; }
.cart-drawer-item__name { font-size: 14px; line-height: 1.35; }
.cart-drawer-item__price { font-size: 15px; }
.cart-drawer-item__bottom { justify-content: space-between; align-items: center; }
.cart-drawer-qty { border-color: var(--mumona-negre); }
.cart-drawer-total span:first-child { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.cart-drawer-total__price { font-size: 18px; }

/* Avisos: menta de Mumona en lloc del verd de Shop88 */
#cart-drawer-badge,
#cart-drawer-shipping-badge,
.cart-page__shipping {
    border-radius: 0;
    background: #f2f8f4;
    color: var(--mumona-negre);
    border: 1px solid var(--mumona-menta);
}
#cart-drawer-badge .material-symbols-rounded,
.cart-page__shipping--ok .material-symbols-rounded { color: var(--mumona-verd); }
.cart-page__shipping--ok { background: var(--mumona-menta); border-color: var(--mumona-menta); }

/* ── Checkout ───────────────────────────────────────────────── */
/* La bossa a la dreta de la columna, no sota el logo (logo de Mumona més ample) */
.checkout__cart-link { margin-left: auto; margin-right: 0; }
.checkout__logo img { height: 30px; }
.checkout__cart-badge { background: var(--mumona-negre); }
.checkout__right { background: #f7f7f5; }

/* Resum: totals a tota l'amplada de la columna */
.cart-totals,
.cart-totals__row,
.cart-promo,
.cart-points { width: 100%; }
.cart-totals__row--total { border-top: 1px solid var(--mumona-negre); }
.cart-totals__amount { font-family: 'helvetica-bold', Arial, sans-serif; }

/* Punts CLIP i promos per volum */
.cart-points {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--mumona-menta);
    font-size: 13px;
    line-height: 1.5;
}
.cart-points__title {
    font-family: 'helvetica-bold', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    margin-bottom: 6px;
}
.cart-points p + p { margin-top: 4px; }
.cart-points__apply { margin-top: 10px; width: 100%; padding: 10px; }
.cart-promos-volum__trigger {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: var(--mumona-menta);
    color: #fff;
    border: 0;
    font-family: 'poppinssemibold', 'helvetica-bold', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cart-promos-volum__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cart-promos-volum__table th,
.cart-promos-volum__table td { padding: 8px 6px; border-bottom: 1px solid var(--mumona-linia); text-align: left; }
.cart-promos-volum__table .num { text-align: right; white-space: nowrap; }
.cart-promos-volum__head {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: none; border: 0; border-bottom: 1px solid var(--mumona-negre);
    padding: 10px 0; cursor: pointer; text-align: left;
}
.cart-promos-volum__head b { flex: 1; }
.cart-promos-volum__actions { text-align: right; margin-top: 12px; }
.cart-promos-volum .is-selected { color: #ad1723; }

/* Utilitat de Bootstrap que el carro fa servir (llegendes dels radios) i Mumona no carrega */
.visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* Formes de pagament/transport: sense desbordar la columna amb noms llargs */
.form-radios { min-width: 0; width: 100%; }
.form-radio__name { white-space: normal; }

/* Data d'entrega sota cada transport */
.form-radio__note.data_enviament { font-size: 12px; color: var(--mumona-verd); margin-top: 2px; padding-left: 28px; }

/* Icones de forma de pagament/transport: amplada segons la proporció (màx. 80px). Amb la
   caixa fixa de 80px les icones quadrades (contrareembolso, transferència) no deixaven
   lloc al nom i el radio quedava sol en una fila a sobre. */
.form-radio__img { width: auto; max-width: 80px; }

/* Condicions del recàrrec del contrareembolso sota la forma de pagament, alineades sota el nom */
.form-radio__note.fp_condicions { flex-basis: 100%; margin-left: 28px; font-size: 12px; line-height: 1.4; color: var(--mumona-gris); }

/* El #content de Mumona porta padding: 30px 0; al checkout (sense capçalera) sobra */
body.page-checkout #content { padding: 0; }

@media (max-width: 900px) {
    .checkout__logo img { height: 22px; }

    /* Mòbil: logo centrat amb la bossa a la dreta, i a sota una franja sencera
       "Resumen de tu compra ⌄ ........ total" que obre/tanca el resum */
    .checkout__layout > .checkout__topbar {
        /* Fixa a dalt en fer scroll (logo + franja del resum) */
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px 16px 0;
        border-bottom: none;
    }
    .checkout__cart-link { position: absolute; right: 16px; top: 12px; }
    .checkout__topbar-resum {
        order: 3;
        flex: 0 0 calc(100% + 32px);
        margin: 14px -16px 0 !important;
        padding: 14px 16px;
        justify-content: space-between;
        background: #ecebe7;
        border-top: 1px solid var(--mumona-linia);
        border-bottom: 1px solid var(--mumona-linia);
        font-size: 13px;
        white-space: nowrap;
    }
    /* La validació (valida_form.js) porta el primer camp amb error a dalt: que no quedi sota la franja fixa */
    body.page-checkout input,
    body.page-checkout select,
    body.page-checkout textarea { scroll-margin-top: 120px; }
    .checkout__topbar-resum-label { display: inline-flex; align-items: center; gap: 6px; }
    .checkout__topbar-resum-total { font-family: 'helvetica-bold', Arial, sans-serif; font-size: 15px; }
}

/* Errors de validació: al carro van sota el camp (cart.css, position: static), però
   valida_form.js els deixa height: 100% i el text sense partir. Dins la graella de
   Nombre/Apellidos l'error s'estirava (en mòbil quedava sota el camp següent) i, en
   escriptori, el text llarg eixamplava la columna i treia Apellidos de lloc. */
body.page-checkout .val-errors:not(.val-checks),
body.page-checkout .val-errors:not(.val-checks) > div { height: auto !important; }
body.page-checkout .val-errors > div > p { white-space: normal !important; }
body.page-checkout .form-row > * { min-width: 0; }

/* Drawer per sobre dels flotants de Mumona (teaser de newsletter, avís de galetes z-index 9999) */
#cart-drawer-overlay { z-index: 2147482000; }
#cart-drawer { z-index: 2147482001; }
/* Avisos de Mumona (display_error de js/generic.js, z-index 500 inline): per sobre del drawer */
#displayedError { z-index: 2147482100 !important; }