/**
 * ZD Carro Moderno - estilos del front.
 *
 * Todas las medidas y colores salen de las variables --zdcp-* que emite el
 * modulo en la cabecera, para que se configuren desde el back office.
 *
 * @author    Z Digital
 * @copyright 2026 Z Digital
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

/* ====================================================================== */
/* Base                                                                   */
/* ====================================================================== */

.zdcp {
    padding: 8px 0 48px;
    color: var(--zdcp-text, #111827);
    background: var(--zdcp-page-bg, transparent);
    font-family: var(--zdcp-font, inherit);
    font-size: var(--zdcp-font-size, 15px);
    line-height: 1.45;
    position: relative;
    box-sizing: border-box;
}

/* Con "medida propia" el modulo centra su propio contenedor; con el ancho del
   tema no toca nada y se adapta al contenedor de la tienda. */
.zdcp--w-custom {
    max-width: var(--zdcp-max-width, 1320px);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.zdcp *,
.zdcp *::before,
.zdcp *::after {
    box-sizing: border-box;
}

.zdcp svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.zdcp a {
    color: inherit;
    text-decoration: none;
}

.zdcp img {
    max-width: 100%;
    height: auto;
}

.zdcp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.zdcp .zdcp-title {
    margin: 0;
    font-size: var(--zdcp-title-size, 32px);
    line-height: 1.15;
    font-weight: 800;
    color: var(--zdcp-text, #111827);
}

.zdcp-count {
    font-size: .55em;
    font-weight: 600;
    color: var(--zdcp-muted, #6b7280);
    margin-left: 6px;
}

.zdcp-continue {
    color: var(--zdcp-text, #111827);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .95em;
}

.zdcp-continue:hover {
    opacity: .7;
}

.zdcp-notice {
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-radius, 8px);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .93em;
}

/* ---------------------------------------------------------------------- */
/* Envio gratis y entrega                                                 */
/* ---------------------------------------------------------------------- */

.zdcp-free {
    margin: 0 0 14px;
}

.zdcp-free-text {
    font-size: .92em;
    margin-bottom: 6px;
    font-weight: 600;
}

.zdcp-free-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--zdcp-progress-bg, #ede9ea);
    overflow: hidden;
}

.zdcp-free-bar > span {
    display: block;
    height: 100%;
    background: var(--zdcp-progress, #7a1029);
    border-radius: 999px;
    transition: width .35s ease;
}

.zdcp-free.is-done .zdcp-free-bar > span {
    width: 100% !important;
}

.zdcp-delivery {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-radius, 8px);
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: .92em;
}

.zdcp-delivery svg {
    color: var(--zdcp-muted, #6b7280);
}

/* ====================================================================== */
/* Rejilla principal                                                      */
/* ====================================================================== */

.zdcp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 34px;
    align-items: start;
}

.zdcp--sum-left .zdcp-grid {
    grid-template-columns: 380px minmax(0, 1fr);
}

.zdcp--sum-left .zdcp-main {
    order: 2;
}

.zdcp--sum-left .zdcp-aside {
    order: 1;
}

.zdcp--sticky .zdcp-aside {
    position: sticky;
    top: 20px;
}

.zdcp-main {
    min-width: 0;
}

/* ====================================================================== */
/* Lineas del carro                                                       */
/* ====================================================================== */

.zdcp-thead,
.zdcp-line {
    display: grid;
    grid-template-columns: var(--zdcp-img-size, 96px) minmax(0, 1fr) 110px 132px 110px 42px;
    gap: 16px;
    align-items: center;
}

.zdcp-thead {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--zdcp-border, #e5e7eb);
    font-size: .82em;
    letter-spacing: .02em;
    color: var(--zdcp-muted, #6b7280);
    text-transform: uppercase;
}

.zdcp-th--price,
.zdcp-th--qty {
    text-align: center;
}

.zdcp-th--total {
    text-align: right;
}

.zdcp-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zdcp-line {
    padding: 18px 0;
    border-bottom: 1px solid var(--zdcp-border, #e5e7eb);
    position: relative;
}

.zdcp-line.is-busy {
    opacity: .45;
    pointer-events: none;
}

.zdcp-line-media {
    width: var(--zdcp-img-size, 96px);
    height: var(--zdcp-img-size, 96px);
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-card-radius, 12px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zdcp-line-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.zdcp-line-info {
    min-width: 0;
}

.zdcp-line-name {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.zdcp-line-name:hover {
    text-decoration: underline;
}

.zdcp-line-attrs,
.zdcp-line-sku,
.zdcp-line-custom {
    font-size: .86em;
    color: var(--zdcp-muted, #6b7280);
    margin-bottom: 3px;
}

.zdcp-line-attrs b {
    font-weight: 600;
    color: var(--zdcp-text, #111827);
}

.zdcp-sep {
    margin: 0 6px;
    font-style: normal;
    opacity: .5;
}

.zdcp-line-stock {
    font-size: .84em;
    margin-top: 4px;
    font-weight: 600;
}

.zdcp-line-stock.is-low {
    color: #b45309;
}

.zdcp-line-stock.is-out {
    color: var(--zdcp-sale, #c8102e);
}

.zdcp-gift-tag {
    display: inline-block;
    font-size: .76em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--zdcp-badge-bg, #3ddbd0);
    color: var(--zdcp-badge-text, #0b3b38);
    border-radius: 4px;
    padding: 2px 6px;
    margin-bottom: 4px;
}

.zdcp-price {
    font-weight: 700;
    color: var(--zdcp-price, #111827);
}

.zdcp-price--sale {
    color: var(--zdcp-sale, #c8102e);
}

.zdcp-price-old {
    margin-left: 6px;
    color: var(--zdcp-old, #9ca3af);
    text-decoration: line-through;
    font-size: .9em;
}

.zdcp-each {
    color: var(--zdcp-muted, #6b7280);
    font-size: .86em;
    margin-left: 4px;
}

.zdcp-line-unit {
    display: none;
}

.zdcp-line-price {
    text-align: center;
}

.zdcp-line-total {
    text-align: right;
    font-weight: 700;
}

.zdcp-line-actions {
    text-align: right;
}

/* Selector de cantidad */
.zdcp-line-qty {
    display: flex;
    justify-content: center;
}

.zdcp-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: var(--zdcp-radius, 8px);
    overflow: hidden;
    background: var(--zdcp-card-bg, #fff);
}

.zdcp-qty-btn {
    width: 34px;
    height: 38px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.zdcp-qty-btn:hover {
    background: var(--zdcp-soft, #f5f5f5);
}

.zdcp-qty-btn[disabled] {
    opacity: .35;
    cursor: default;
}

.zdcp-qty-input {
    width: 46px;
    height: 38px;
    border: 0;
    border-left: 1px solid var(--zdcp-border, #e5e7eb);
    border-right: 1px solid var(--zdcp-border, #e5e7eb);
    text-align: center;
    font: inherit;
    color: inherit;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.zdcp-qty-input::-webkit-outer-spin-button,
.zdcp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.zdcp-qty-static {
    color: var(--zdcp-muted, #6b7280);
}

.zdcp-remove {
    border: 0;
    background: transparent;
    color: var(--zdcp-muted, #6b7280);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--zdcp-radius, 8px);
    line-height: 0;
}

.zdcp-remove:hover {
    color: var(--zdcp-sale, #c8102e);
    background: var(--zdcp-soft, #f5f5f5);
}

.zdcp-remove-label {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* Modelo 2: tabla                                                        */
/* ---------------------------------------------------------------------- */

.zdcp--m2 .zdcp-grid {
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 28px;
}

.zdcp--m2.zdcp--sum-left .zdcp-grid {
    grid-template-columns: 344px minmax(0, 1fr);
}

/* Miniatura mas pequena y columnas ajustadas: el nombre del producto es lo
   que mas espacio necesita, sobre todo con referencias largas. */
.zdcp--m2 .zdcp-thead,
.zdcp--m2 .zdcp-line {
    grid-template-columns: 76px minmax(0, 1fr) 104px 124px 108px 34px;
    gap: 14px;
}

.zdcp--m2 .zdcp-line-media {
    width: 76px;
    height: 76px;
}

.zdcp--m2 .zdcp-line-name {
    font-size: .96em;
}

.zdcp-line-price,
.zdcp-line-total {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Modelo 1: compacto                                                     */
/* ---------------------------------------------------------------------- */

.zdcp--m1 .zdcp-line {
    grid-template-columns: var(--zdcp-img-size, 96px) minmax(0, 1fr) auto;
    align-items: start;
    padding: 16px 0;
}

.zdcp--m1 .zdcp-line-price {
    display: none;
}

.zdcp--m1 .zdcp-line-unit {
    display: block;
    margin-top: 6px;
}

.zdcp--m1 .zdcp-line-qty {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 10px;
}

.zdcp--m1 .zdcp-line-total {
    grid-column: 3;
    grid-row: 1;
}

.zdcp--m1 .zdcp-line-actions {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
}

.zdcp--m1 .zdcp-grid {
    grid-template-columns: minmax(0, 1fr) 372px;
}

.zdcp--m1.zdcp--sum-left .zdcp-grid {
    grid-template-columns: 372px minmax(0, 1fr);
}


/* ---------------------------------------------------------------------- */
/* Modelo 3: moderno (lineas en tarjeta, controles redondeados)           */
/* ---------------------------------------------------------------------- */

.zdcp--m3 .zdcp-head {
    margin-bottom: 22px;
}

.zdcp--m3 .zdcp-thead {
    display: none;
}

.zdcp--m3 .zdcp-lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zdcp--m3 .zdcp-line {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: calc(var(--zdcp-card-radius, 12px) + 4px);
    background: var(--zdcp-card-bg, #fff);
    box-shadow: var(--zdcp-card-shadow, none);
}

.zdcp--m3 .zdcp-line-media {
    width: 104px;
    height: 104px;
    border-radius: var(--zdcp-card-radius, 12px);
}

.zdcp--m3 .zdcp-line-name {
    font-size: 1.02em;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Las combinaciones se leen mejor como etiquetas que como una lista. */
.zdcp--m3 .zdcp-line-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.zdcp--m3 .zdcp-line-attrs span {
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .82em;
}

.zdcp--m3 .zdcp-sep {
    display: none;
}

.zdcp--m3 .zdcp-line-price {
    display: none;
}

.zdcp--m3 .zdcp-line-unit {
    display: block;
    margin-top: 2px;
}

.zdcp--m3 .zdcp-line-qty {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 12px;
}

.zdcp--m3 .zdcp-line-total {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.08em;
}

.zdcp--m3 .zdcp-line-actions {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
}

.zdcp--m3 .zdcp-qty {
    border-radius: 999px;
    padding: 0 4px;
}

.zdcp--m3 .zdcp-qty-btn {
    width: 32px;
    height: 36px;
    border-radius: 999px;
}

.zdcp--m3 .zdcp-qty-input {
    border: 0;
    width: 42px;
}

/* Quitar como enlace de texto, que es lo habitual en las tiendas modernas. */
.zdcp--m3 .zdcp-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
    font-size: .86em;
    color: var(--zdcp-muted, #6b7280);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zdcp--m3 .zdcp-remove:hover {
    background: transparent;
}

.zdcp--m3 .zdcp-remove svg {
    width: 15px;
    height: 15px;
}

.zdcp--m3 .zdcp-remove-label {
    display: inline;
}

/* Bloques suaves y botones en pildora */
.zdcp--m3 .zdcp-free {
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-card-radius, 12px);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.zdcp--m3 .zdcp-free-bar {
    height: 6px;
}

.zdcp--m3 .zdcp-delivery {
    border-radius: 999px;
    padding: 10px 18px;
}

.zdcp--m3 .zdcp-summary {
    border: 0;
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: calc(var(--zdcp-card-radius, 12px) + 8px);
    padding: 26px;
}

.zdcp--m3 .zdcp-summary-title {
    font-size: 1.22em;
    margin-bottom: 6px;
}

.zdcp--m3 .zdcp-acc {
    border-bottom-color: rgba(0, 0, 0, .08);
}

.zdcp--m3 .zdcp-input,
.zdcp--m3 .zdcp-field select,
.zdcp--m3 .zdcp-field input {
    border-radius: 999px;
    border-color: transparent;
    background: var(--zdcp-card-bg, #fff);
}

.zdcp--m3 .zdcp-textarea {
    border-radius: var(--zdcp-card-radius, 12px);
    border-color: transparent;
    background: var(--zdcp-card-bg, #fff);
}

.zdcp--m3 .zdcp-btn {
    border-radius: 999px;
}

.zdcp--m3 .zdcp-btn--block {
    padding: 15px 18px;
    font-size: 1.02em;
}

.zdcp--m3 .zdcp-total {
    font-size: 1.35em;
}

.zdcp--m3 .zdcp-card-media {
    border-radius: calc(var(--zdcp-card-radius, 12px) + 4px);
}

.zdcp--m3 .zdcp-nav {
    width: 36px;
    height: 36px;
}

/* ====================================================================== */
/* Resumen del pedido                                                     */
/* ====================================================================== */

.zdcp-summary {
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: var(--zdcp-card-radius, 12px);
    background: var(--zdcp-card-bg, #fff);
    padding: 22px;
    box-shadow: var(--zdcp-card-shadow, none);
}

.zdcp--m2 .zdcp-summary {
    background: var(--zdcp-soft, #f5f5f5);
    border-color: transparent;
}

.zdcp-summary-title {
    font-size: 1.15em;
    font-weight: 800;
    margin-bottom: 14px;
}

/* Aspecto del resumen elegido en el back office (gana al del modelo). */
.zdcp .zdcp-summary--border {
    border: 1px solid var(--zdcp-border, #e5e7eb);
    background: var(--zdcp-card-bg, #fff);
    border-radius: var(--zdcp-card-radius, 12px);
    padding: 22px;
}

.zdcp .zdcp-summary--soft {
    border: 0;
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-card-radius, 12px);
    padding: 22px;
}

.zdcp .zdcp-summary--round {
    border: 0;
    background: var(--zdcp-card-bg, #fff);
    border-radius: var(--zdcp-sum-radius, 22px);
    padding: 26px;
    box-shadow: 0 14px 40px rgba(16, 24, 40, .10);
}

.zdcp .zdcp-summary--plain {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Acordeones */
.zdcp-acc {
    border-bottom: 1px solid var(--zdcp-border, #e5e7eb);
}

.zdcp-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.zdcp-acc-head svg {
    transition: transform .2s ease;
    color: var(--zdcp-muted, #6b7280);
}

.zdcp-acc.is-open .zdcp-acc-head svg {
    transform: rotate(180deg);
}

.zdcp-acc-body {
    display: none;
    padding: 0 0 16px;
}

.zdcp-acc.is-open .zdcp-acc-body {
    display: block;
}

.zdcp-input,
.zdcp-textarea,
.zdcp-field select,
.zdcp-field input {
    width: 100%;
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: var(--zdcp-radius, 8px);
    padding: 10px 12px;
    font: inherit;
    color: inherit;
    background: var(--zdcp-card-bg, #fff);
}

.zdcp-textarea {
    resize: vertical;
    margin-bottom: 8px;
}

.zdcp-coupon {
    display: flex;
    gap: 8px;
}

.zdcp-coupon .zdcp-btn {
    flex: 0 0 auto;
}

.zdcp-msg {
    font-size: .86em;
    margin-top: 6px;
    display: none;
}

.zdcp-msg.is-error {
    display: block;
    color: var(--zdcp-sale, #c8102e);
}

.zdcp-msg.is-ok {
    display: block;
    color: #15803d;
}

.zdcp-vouchers {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.zdcp-vouchers li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9em;
    padding: 6px 0;
}

.zdcp-voucher-name {
    flex: 1 1 auto;
    min-width: 0;
}

.zdcp-voucher-value {
    font-weight: 700;
}

.zdcp-voucher-del {
    border: 0;
    background: transparent;
    color: var(--zdcp-muted, #6b7280);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
}

.zdcp-voucher-del:hover {
    color: var(--zdcp-sale, #c8102e);
}

/* Totales */
.zdcp-subtotals {
    padding: 14px 0 0;
}

.zdcp-subtotal {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: .95em;
}

.zdcp-subtotal--discounts {
    color: var(--zdcp-sale, #c8102e);
}

.zdcp-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--zdcp-border, #e5e7eb);
    font-size: 1.25em;
    font-weight: 800;
}

.zdcp-taxnote {
    color: var(--zdcp-muted, #6b7280);
    font-size: .85em;
    margin: 6px 0 14px;
}

.zdcp-alert {
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--zdcp-radius, 8px);
    padding: 10px 12px;
    font-size: .88em;
    margin-bottom: 12px;
}

.zdcp-summary-continue {
    display: block;
    text-align: center;
    margin-top: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .92em;
}

/* Medios de pago */
.zdcp-payments {
    margin-top: 16px;
}

.zdcp-payments-label {
    font-size: .84em;
    color: var(--zdcp-muted, #6b7280);
    margin-bottom: 8px;
}

.zdcp-payments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zdcp-payments--center .zdcp-payments-list,
.zdcp-payments--center .zdcp-payments-label {
    justify-content: center;
    text-align: center;
}

.zdcp-payments--right .zdcp-payments-list,
.zdcp-payments--right .zdcp-payments-label {
    justify-content: flex-end;
    text-align: right;
}

.zdcp-payments img {
    height: var(--zdcp-pay-height, 26px);
    width: auto;
}

.zdcp-payments.has-border img {
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: 4px;
    padding: 2px 5px;
    background: #fff;
}

.zdcp-payments.is-gray img {
    filter: grayscale(1);
    opacity: .8;
}

/* ====================================================================== */
/* Botones                                                                */
/* ====================================================================== */

.zdcp .zdcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--zdcp-radius, 8px);
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    text-align: center;
}

.zdcp .zdcp-btn--primary {
    background: var(--zdcp-btn-bg, #111827);
    color: var(--zdcp-btn-text, #fff);
}

.zdcp .zdcp-btn--primary:hover {
    background: var(--zdcp-btn-hover, #000);
}

.zdcp .zdcp-btn--dark {
    background: var(--zdcp-btn-bg, #111827);
    color: var(--zdcp-btn-text, #fff);
}

.zdcp .zdcp-btn--ghost {
    background: var(--zdcp-btn2-bg, #fff);
    color: var(--zdcp-btn2-text, #111827);
    border-color: var(--zdcp-border, #e5e7eb);
}

.zdcp .zdcp-btn--ghost:hover {
    border-color: var(--zdcp-btn2-text, #111827);
}

.zdcp .zdcp-btn--sm {
    padding: 9px 14px;
    font-size: .92em;
}

.zdcp .zdcp-btn--block {
    display: flex;
    width: 100%;
}

.zdcp .zdcp-btn.is-disabled,
.zdcp .zdcp-btn[disabled] {
    opacity: .55;
    pointer-events: none;
}

.zdcp-lock {
    width: 15px;
    height: 15px;
}

/* ====================================================================== */
/* Calculadora de envio                                                   */
/* ====================================================================== */

.zdcp-shipcalc-under {
    margin: 26px 0 6px;
    padding: 18px;
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: var(--zdcp-card-radius, 12px);
}

.zdcp-shipcalc-title {
    display: none;
}

.zdcp-shipcalc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.zdcp-field {
    display: block;
    min-width: 0;
}

.zdcp-field > span {
    display: block;
    font-size: .84em;
    color: var(--zdcp-muted, #6b7280);
    margin-bottom: 5px;
}

.zdcp-shipcalc-result {
    margin-top: 12px;
    font-size: .92em;
}

.zdcp-carrier {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--zdcp-border, #e5e7eb);
}

.zdcp-carrier:last-child {
    border-bottom: 0;
}

.zdcp-carrier-delay {
    color: var(--zdcp-muted, #6b7280);
    font-size: .9em;
}

/* ====================================================================== */
/* Compra impulsiva                                                       */
/* ====================================================================== */

.zdcp-upsell {
    margin: 30px 0 0;
    position: relative;
}

.zdcp-upsell--full {
    margin-top: 54px;
    padding-top: 34px;
    border-top: 1px solid var(--zdcp-border, #e5e7eb);
}

.zdcp-upsell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.zdcp .zdcp-block-title {
    margin: 0;
    font-size: 1.15em;
    font-weight: 800;
}

.zdcp-upsell--full .zdcp-block-title {
    font-size: 1.6em;
}

.zdcp-upsell-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zdcp-upsell-all {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .9em;
    margin-right: 6px;
}

.zdcp-nav {
    width: 32px;
    height: 32px;
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: 50%;
    background: var(--zdcp-card-bg, #fff);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.zdcp-nav:hover {
    background: var(--zdcp-soft, #f5f5f5);
}

.zdcp-nav[disabled] {
    opacity: .3;
    cursor: default;
}

/* Carrusel */
.zdcp-upsell--carousel .zdcp-upsell-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.zdcp-upsell--carousel .zdcp-upsell-track::-webkit-scrollbar {
    display: none;
}

.zdcp-upsell--carousel .zdcp-upsell-track > * {
    flex: 0 0 calc((100% - (var(--zdcp-cols, 4) - 1) * 16px) / var(--zdcp-cols, 4));
    scroll-snap-align: start;
    min-width: 0;
}

/* Parrilla */
.zdcp-upsell--grid .zdcp-upsell-track {
    display: grid;
    grid-template-columns: repeat(var(--zdcp-cols, 4), minmax(0, 1fr));
    gap: 16px;
}

.zdcp-upsell--u1 {
    --zdcp-cols: var(--zdcp-u1-cols, 2);
}

.zdcp-upsell--u2 {
    --zdcp-cols: var(--zdcp-u2-cols, 5);
}

/* Tarjetas */
.zdcp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--zdcp-card-bg, #fff);
    border-radius: var(--zdcp-card-radius, 12px);
    box-shadow: var(--zdcp-card-shadow, none);
}

.zdcp-card.is-out {
    opacity: .7;
}

.zdcp-card-media {
    position: relative;
    display: block;
    background: var(--zdcp-soft, #f5f5f5);
    border-radius: var(--zdcp-card-radius, 12px);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.zdcp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.zdcp-card:hover .zdcp-card-media img {
    transform: scale(1.04);
}

.zdcp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: .74em;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 7px;
    border-radius: 4px;
}

.zdcp-badge--new {
    background: var(--zdcp-badge-bg, #3ddbd0);
    color: var(--zdcp-badge-text, #0b3b38);
}

.zdcp-badge--sale {
    background: var(--zdcp-sale-bg, #7a1029);
    color: var(--zdcp-sale-text, #fff);
}

/* Nada de height:100% aqui: una altura explicita anula el estirado del flex
   y las tarjetas quedan de distinto alto. El estirado por defecto ya vale. */
.zdcp-upsell-track .zdcp-card {
    align-self: stretch;
}

.zdcp-card-body {
    padding: 10px 2px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.zdcp-card-brand {
    font-size: .8em;
    color: var(--zdcp-muted, #6b7280);
}

.zdcp-card-name {
    font-weight: 700;
    font-size: .95em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zdcp-card-name:hover {
    text-decoration: underline;
}

.zdcp-card-desc {
    font-size: .85em;
    color: var(--zdcp-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zdcp-card-price {
    margin-top: 2px;
}

.zdcp-card-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* El precio siempre pegado al boton, aunque los nombres midan distinto. */
.zdcp-card-price {
    margin-top: auto;
    padding-top: 4px;
}

.zdcp-card-price + .zdcp-card-btn {
    margin-top: 8px;
}

.zdcp-card-oos {
    margin-top: 8px;
    font-size: .85em;
    color: var(--zdcp-sale, #c8102e);
}

/* Ficha del tema: se deja intacta, solo se neutralizan las clases de columna
   de Bootstrap que algunos temas dejan dentro de la miniatura. */
.zdcp-theme-item {
    min-width: 0;
    display: flex;
}

.zdcp-theme-item > * {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.zdcp-theme-item [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.zdcp-upsell--theme .zdcp-upsell-track {
    align-items: stretch;
}

/* Tarjeta con marco: la imagen respira dentro de la caja y el texto no toca
   el borde, que es lo que estropeaba la fila de sugerencias. */
.zdcp-upsell--boxed .zdcp-card {
    border: 1px solid var(--zdcp-border, #e5e7eb);
    border-radius: var(--zdcp-card-radius, 12px);
    overflow: hidden;
    background: var(--zdcp-card-bg, #fff);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.zdcp-upsell--boxed .zdcp-card:hover {
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .12);
    transform: translateY(-3px);
}

.zdcp-upsell--boxed .zdcp-card-media {
    border-radius: 0;
    padding: 12px;
    background: var(--zdcp-soft, #f5f5f5);
}

.zdcp-upsell--boxed .zdcp-card-body {
    padding: 12px 14px 14px;
}

.zdcp-upsell--boxed.zdcp-upsell--row .zdcp-card {
    padding: 10px;
}

.zdcp-upsell--boxed.zdcp-upsell--row .zdcp-card-media {
    padding: 6px;
    border-radius: var(--zdcp-card-radius, 12px);
}

.zdcp-upsell--boxed.zdcp-upsell--row .zdcp-card-body {
    padding: 0;
}

/* Boton de la tarjeta a ancho completo */
.zdcp .zdcp-card-btn.zdcp-btn--block {
    width: 100%;
    align-self: stretch;
    justify-content: center;
}

/* La marca, en mayusculas pequenas: separa mejor marca de nombre. */
.zdcp-card-brand {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .74em;
}

/* Ficha en fila (imagen a la izquierda) */
.zdcp-upsell--row .zdcp-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: var(--zdcp-soft, #f5f5f5);
    padding: 10px;
}

.zdcp-upsell--row .zdcp-card-media {
    width: 74px;
    flex: 0 0 74px;
    aspect-ratio: 1 / 1;
    background: transparent;
}

.zdcp-upsell--row .zdcp-card-body {
    padding: 0;
}

/* ====================================================================== */
/* Carro vacio, cargando                                                  */
/* ====================================================================== */

.zdcp-empty {
    text-align: center;
    padding: 48px 20px 40px;
}

.zdcp-empty-icon {
    width: 54px;
    height: 54px;
    color: var(--zdcp-muted, #6b7280);
    margin-bottom: 14px;
}

.zdcp-empty .zdcp-title {
    margin-bottom: 8px;
}

.zdcp-empty-text {
    color: var(--zdcp-muted, #6b7280);
    margin: 0 0 20px;
}

.zdcp-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    z-index: 5;
}

.zdcp.is-loading .zdcp-loading {
    display: flex;
}

.zdcp-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--zdcp-border, #e5e7eb);
    border-top-color: var(--zdcp-btn-bg, #111827);
    animation: zdcp-spin .7s linear infinite;
}

@keyframes zdcp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ====================================================================== */
/* Responsive                                                             */
/* ====================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .zdcp--m2 .zdcp-thead {
        display: none;
    }

    .zdcp--m2 .zdcp-line {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        align-items: start;
    }

    .zdcp--m2 .zdcp-line-price {
        display: none;
    }

    .zdcp--m2 .zdcp-line-unit {
        display: block;
        margin-top: 6px;
    }

    .zdcp--m2 .zdcp-line-qty {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .zdcp--m2 .zdcp-line-total {
        grid-column: 3;
        grid-row: 1;
    }

    .zdcp--m2 .zdcp-line-actions {
        grid-column: 3;
        grid-row: 2;
        align-self: end;
    }
}

@media (max-width: 991px) {
    .zdcp-grid,
    .zdcp--m1 .zdcp-grid,
    .zdcp--m2 .zdcp-grid,
    .zdcp--m3 .zdcp-grid,
    .zdcp--sum-left .zdcp-grid,
    .zdcp--m1.zdcp--sum-left .zdcp-grid,
    .zdcp--m2.zdcp--sum-left .zdcp-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .zdcp--sum-left .zdcp-main,
    .zdcp--sum-left .zdcp-aside {
        order: 0;
    }

    .zdcp--sticky .zdcp-aside {
        position: static;
    }

    .zdcp-thead {
        display: none;
    }

    .zdcp-line,
    .zdcp--m1 .zdcp-line,
    .zdcp--m2 .zdcp-line,
    .zdcp--m3 .zdcp-line {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

    .zdcp-line-media,
    .zdcp--m2 .zdcp-line-media,
    .zdcp--m3 .zdcp-line-media {
        width: 84px;
        height: 84px;
    }

    .zdcp-line-price {
        display: none;
    }

    .zdcp-line-unit {
        display: block;
        margin-top: 6px;
    }

    .zdcp-line-qty {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .zdcp-line-total {
        grid-column: 3;
        grid-row: 1;
    }

    .zdcp-line-actions {
        grid-column: 3;
        grid-row: 2;
        align-self: end;
    }

    .zdcp-upsell--u1 {
        --zdcp-cols: var(--zdcp-u1-cols-mob, 1);
    }

    .zdcp-upsell--u2 {
        --zdcp-cols: var(--zdcp-u2-cols-mob, 2);
    }
}

@media (max-width: 575px) {
    .zdcp--w-custom {
        padding-left: 12px;
        padding-right: 12px;
    }

    .zdcp .zdcp-title {
        font-size: calc(var(--zdcp-title-size, 32px) * .78);
    }

    .zdcp-upsell--full .zdcp-block-title {
        font-size: 1.3em;
    }

    .zdcp-summary {
        padding: 16px;
    }
}