/* =====================================================
   CP PDP FLOW — Configurador progresivo de producto
   Color → Tallas → Presupuesto → Personalizar
   Estilo: cute profesional, limpio, sin saturación
   ===================================================== */

/* Preinit: oculta ruido visual mientras el JS localiza dependencias.
   No deja la pagina en blanco si el flow falla. */
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .product_meta,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .sku_wrapper,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .ekommart-social-share,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .ekommart-product-pagination-wrap,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .woocommerce-variation.single_variation,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .wpced,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary .wpced-inner,
html.cp-pdp-flow-preinit .single-product .summary.entry-summary [class*="wpced"] {
    display: none !important;
}

.cp-pdp-flow {
    --cp-ink:        #18181b;
    --cp-ink-soft:   #52525b;
    --cp-ink-faint:  #a1a1aa;
    --cp-bg-soft:    #fafafa;
    --cp-border:     #e4e4e7;
    --cp-cta:        #18181b;
    --cp-cta-hover:  #000000;
    --cp-green:      #16a34a;
    --cp-green-bg:   #f0fdf4;
    --cp-green-bd:   #bbf7d0;
    --cp-orange:     #ea580c;
    --cp-orange-bg:  #fff7ed;
    --cp-orange-bd:  #fed7aa;
    --cp-blue:       #2563eb;
    --cp-radius:     16px;
    --cp-radius-sm:  10px;
    --cp-shadow:     0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
    --cp-transition: 0.2s cubic-bezier(0.4,0,0.2,1);

    font-family: inherit;
    color: var(--cp-ink);
    margin-top: 18px;
}

.cp-pdp-flow * { box-sizing: border-box; }

/* ─── LÍNEA DE PRECIO ────────────────────────────── */
.cp-pdp-price-wrap {
    font-size: 14px;
    color: var(--cp-ink-soft);
    margin-bottom: 10px;
}

.cp-pdp-price-wrap p.price {
    font-size: 14px;
    font-weight: 400;
    color: var(--cp-ink-soft);
}

.cp-pdp-price-wrap .woocommerce-Price-amount {
    font-weight: 700;
    color: var(--cp-ink);
}

/* ─── BLOQUE DE ENTREGA ──────────────────────────── */
.cp-pdp-delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cp-green-bg);
    border: 1.5px solid var(--cp-green-bd);
    border-radius: var(--cp-radius-sm);
    margin-bottom: 18px;
    font-size: 13.5px;
}

.cp-pdp-delivery-icon {
    flex-shrink: 0;
    color: var(--cp-green);
    display: flex;
}

.cp-pdp-delivery-label {
    font-weight: 700;
    color: #15803d;
}

.cp-pdp-delivery-date {
    color: var(--cp-ink-soft);
}

/* ─── PASOS GENÉRICOS ────────────────────────────── */
.cp-pdp-step {
    margin-bottom: 22px;
    animation: cp-step-in 0.25s ease;
}

@keyframes cp-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cp-step-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.cp-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cp-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.cp-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-ink);
}

.cp-step-hint {
    font-size: 13px;
    color: var(--cp-ink-faint);
    margin: 0 0 10px;
    padding-left: 31px;
}

/* ─── PASO 1: COLOR ──────────────────────────────── */
.cp-step-color { }

/* Estado compacto tras elegir color */
.cp-color-compact {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    background: var(--cp-bg-soft);
    border: 1.5px solid var(--cp-border);
    border-radius: 999px;
    width: fit-content;
    font-size: 13.5px;
}

.cp-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.cp-color-chosen-label {
    font-weight: 600;
    color: var(--cp-ink);
}

.cp-color-change-btn {
    background: none;
    border: none;
    color: var(--cp-blue);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0 2px 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cp-color-change-btn:hover { opacity: 0.7; }

/* Contenedor de los swatches reales de WC (tabla .variations) */
.cp-color-swatches-wrap table.variations {
    margin: 0;
}

.cp-color-swatches-wrap table.variations th.label {
    display: none; /* ocultar "Color" / "Talla" labels redundantes */
}

.cp-color-swatches-wrap table.variations td.value {
    padding: 0;
}

/* La fila de Talla se oculta vía JS (hideTallaRow) para compatibilidad
   con navegadores sin soporte de :has() */

.cp-color-swatches-wrap .reset_variations {
    font-size: 12px;
    margin-left: 8px;
}

/* ─── PASO 2: TALLAS (delegado a cp-size-selector) ── */
.cp-step-sizes #cp-size-selector-wrapper {
    margin: 0;
}

/* ─── PASO 3: PRESUPUESTO ────────────────────────── */
.cp-budget-card {
    background: #fff;
    border: 1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: 16px 18px;
    box-shadow: var(--cp-shadow);
}

.cp-pdp-flow-budget {
    display: none;
}

.cp-pdp-flow-budget.is-visible,
.cp-step-budget.is-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cp-budget-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--cp-border);
}

.cp-budget-color-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--cp-ink-soft);
}

.cp-budget-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.cp-budget-color-label { font-weight: 600; color: var(--cp-ink); }

.cp-budget-sizes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-budget-size-pill {
    font-size: 12px;
    padding: 4px 9px;
    background: var(--cp-bg-soft);
    border-radius: 999px;
    color: var(--cp-ink-soft);
    font-weight: 500;
}

.cp-budget-size-pill em {
    font-style: normal;
    font-weight: 700;
    color: var(--cp-ink);
    margin-left: 4px;
}

.cp-budget-totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.cp-budget-qty-unit {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#cp-budget-qty-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-ink);
}

#cp-budget-unit-label {
    font-size: 12px;
    color: var(--cp-ink-faint);
}

.cp-budget-total-price {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--cp-ink);
}

.cp-budget-iva {
    width: 100%;
    font-size: 11px;
    color: var(--cp-ink-faint);
    text-align: right;
}

/* Upsell */
.cp-budget-upsell {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--cp-orange-bg);
    border: 1.5px solid var(--cp-orange-bd);
    border-radius: var(--cp-radius-sm);
    font-size: 12.5px;
    color: var(--cp-orange);
}

.cp-budget-upsell svg { flex-shrink: 0; }
.cp-budget-upsell strong { font-weight: 700; }

/* ─── CTA PRINCIPAL ──────────────────────────────── */
.cp-main-cta {
    margin-top: 16px;
}

.cp-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 20px;
    background: var(--cp-cta);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    border: none;
    border-radius: var(--cp-radius-sm);
    cursor: pointer;
    transition: background var(--cp-transition), transform 0.1s ease;
}

.cp-cta-btn:hover:not(:disabled) { background: var(--cp-cta-hover); }
.cp-cta-btn:active:not(:disabled) { transform: scale(0.98); }

.cp-cta-btn:disabled,
.cp-cta-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cp-cta-hint {
    text-align: center;
    font-size: 12px;
    color: var(--cp-ink-faint);
    margin: 9px 0 0;
}

.cp-pdp-final-cta-wrap {
    display: none;
    margin-top: 16px;
    width: 100%;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 20;
    clear: both;
    overflow: visible;
    height: auto;
}

.cp-pdp-final-cta-wrap.is-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
}

.cp-pdp-final-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 16px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--cp-cta);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(217, 45, 32, 0.24);
}

.cp-pdp-final-cta-btn:hover:not(:disabled) {
    background: var(--cp-cta-hover);
}

.cp-pdp-final-cta-btn:disabled,
.cp-pdp-final-cta-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.cp-pdp-inline-cta-wrap {
    display: none;
    width: 100%;
    margin: 16px 0 14px;
    position: relative;
    z-index: 20;
    clear: both;
    visibility: visible;
    opacity: 1;
    overflow: visible;
    height: auto;
}

.cp-pdp-inline-cta-wrap.is-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
}

.cp-pdp-inline-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 16px 22px;
    border: 0;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18);
}

.cp-pdp-inline-cta-btn:hover:not(:disabled) {
    background: #2b2b2b;
}

.cp-pdp-inline-cta-btn:disabled,
.cp-pdp-inline-cta-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 767px) {
    .cp-budget-total-price { font-size: 24px; }
    .cp-cta-btn { padding: 16px 20px; font-size: 16px; }
    .cp-pdp-final-cta-btn { min-height: 56px; font-size: 16px; }
    .cp-pdp-inline-cta-btn { min-height: 56px; font-size: 16px; }
}

/* CTA sticky en móvil: usa el sticky existente del plugin cp-size-selector
   (#cp-sticky-budget) — no duplicamos, solo ocultamos nuestro CTA estático
   cuando el sticky del plugin ya está visible en mobile */
@media (max-width: 767px) {
    .cp-pdp-flow[data-state="budget"] .cp-main-cta {
        margin-bottom: 70px; /* espacio para el sticky inferior */
    }
}
/* 03H: el sticky original del cp-size-selector es el CTA funcional de respaldo.
   Su propia clase cp-sticky-budget--hidden controla si aparece o se oculta. */
body.cp-pdp-flow-active #cp-sticky-budget {
    display: block;
}

/* Con el flow activo, la fecha original de wpced queda oculta.
   Solo debe verse el bloque verde #cp-pdp-delivery. */
body.cp-pdp-flow-active .summary.entry-summary .wpced,
body.cp-pdp-flow-active .summary.entry-summary .wpced-inner,
body.cp-pdp-flow-active .summary.entry-summary [class*="wpced"] {
    display: none !important;
}


/* 04F — Precio superior claro + links de descripcion corta */
.cp-pdp-price-range {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 10px;
}

.cp-pdp-price-range-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 15px;
    color: var(--cp-ink-soft);
    line-height: 1.35;
}

.cp-pdp-price-range-main strong {
    color: var(--cp-ink);
    font-weight: 800;
}

.cp-pdp-price-separator {
    color: var(--cp-ink-faint);
}

.cp-pdp-price-range-note {
    font-size: 12.5px;
    color: var(--cp-ink-faint);
}

.cp-pdp-quicklinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
}

.cp-pdp-quicklinks-label {
    color: var(--cp-ink-faint);
}

.cp-pdp-quicklink {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: #fff;
    color: var(--cp-blue);
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--cp-transition), background var(--cp-transition), box-shadow var(--cp-transition);
}

.cp-pdp-quicklink:hover,
.cp-pdp-quicklink:focus {
    background: #eff6ff;
    border-color: #bfdbfe;
    text-decoration: none;
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.10);
}


/* ─── 04H: móvil más claro + bloques diferenciados ───────────────── */
.cp-pdp-flow {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 24px;
}

.cp-pdp-price-range,
.cp-pdp-quicklinks,
.cp-pdp-delivery,
.cp-step-color {
    position: relative;
}

@media (max-width: 640px) {
    .cp-pdp-flow {
        padding: 0 0 2px;
    }

    .cp-pdp-quicklinks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .cp-pdp-quicklinks-label {
        grid-column: 1 / -1;
        font-size: 12px;
        line-height: 1.2;
    }

    .cp-pdp-quicklink {
        justify-content: center;
        width: 100%;
        min-height: 36px;
        padding: 8px 9px;
        font-size: 12px;
        text-align: center;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(15,23,42,0.035);
    }

    .cp-pdp-delivery {
        box-shadow: 0 6px 18px rgba(22,163,74,0.08);
    }

    .cp-step-color {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 22px;
        padding: 12px;
        margin-bottom: 18px;
    }

    .cp-step-color .cp-step-header {
        margin-bottom: 10px;
    }

    .cp-color-compact {
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(15,23,42,0.045);
    }
}

@media (max-width: 390px) {
    .cp-pdp-quicklink {
        font-size: 11.5px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* CP PDP Flow 04I revertido: sin sticky de galería en desktop. */


/* CP v5.0.23 - Sticky resumen más visible: fondo amarillo + botón negro.
   Solo afecta al resumen flotante, sin tocar lógica ni botón real. */
@media (min-width: 1025px) {
  .cp-sticky-summary,
  #cp-sticky-summary,
  .cp-pdp-sticky-summary,
  #cp-pdp-sticky-summary,
  .cp-sticky-resume,
  #cp-sticky-resume,
  .cp-size-sticky-summary,
  #cp-size-sticky-summary {
    background: #FFD700 !important;
    border: 1px solid rgba(17, 24, 39, 0.14) !important;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22) !important;
    color: #111827 !important;
  }

  .cp-sticky-summary *,
  #cp-sticky-summary *,
  .cp-pdp-sticky-summary *,
  #cp-pdp-sticky-summary *,
  .cp-sticky-resume *,
  #cp-sticky-resume *,
  .cp-size-sticky-summary *,
  #cp-size-sticky-summary * {
    color: #111827;
  }

  .cp-sticky-summary button,
  #cp-sticky-summary button,
  .cp-pdp-sticky-summary button,
  #cp-pdp-sticky-summary button,
  .cp-sticky-resume button,
  #cp-sticky-resume button,
  .cp-size-sticky-summary button,
  #cp-size-sticky-summary button,
  .cp-sticky-summary .button,
  #cp-sticky-summary .button,
  .cp-pdp-sticky-summary .button,
  #cp-pdp-sticky-summary .button,
  .cp-sticky-resume .button,
  #cp-sticky-resume .button,
  .cp-size-sticky-summary .button,
  #cp-size-sticky-summary .button {
    background: #0F0F10 !important;
    color: #FFFFFF !important;
    border-color: #0F0F10 !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.22) !important;
  }

  .cp-sticky-summary button:hover,
  #cp-sticky-summary button:hover,
  .cp-pdp-sticky-summary button:hover,
  #cp-pdp-sticky-summary button:hover,
  .cp-sticky-resume button:hover,
  #cp-sticky-resume button:hover,
  .cp-size-sticky-summary button:hover,
  #cp-size-sticky-summary button:hover {
    background: #000000 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
  }
}


/* CP v5.0.24 - FIX sticky resumen amarillo.
   El sticky real usa #cp-sticky-budget / .cp-sticky-budget, no .cp-sticky-summary.
   Cambio visual únicamente: fondo amarillo + botón negro en desktop. */
@media (min-width: 769px) {
    #cp-sticky-budget.cp-sticky-budget,
    body #cp-sticky-budget.cp-sticky-budget {
        background: #FFD700 !important;
        color: #111827 !important;
        border: 1px solid rgba(17, 24, 39, 0.16) !important;
        box-shadow: 0 18px 44px rgba(17, 24, 39, 0.24) !important;
    }

    #cp-sticky-budget .cp-sticky-qty,
    #cp-sticky-budget .cp-sticky-total {
        color: #111827 !important;
    }

    #cp-sticky-budget .cp-sticky-unit,
    #cp-sticky-budget .cp-sticky-iva {
        color: rgba(17, 24, 39, 0.70) !important;
    }

    #cp-sticky-budget .cp-sticky-btn,
    body #cp-sticky-budget .cp-sticky-btn {
        background: #0F0F10 !important;
        color: #FFFFFF !important;
        border: 1px solid #0F0F10 !important;
        box-shadow: 0 10px 22px rgba(17, 24, 39, 0.24) !important;
    }

    #cp-sticky-budget .cp-sticky-btn:hover,
    body #cp-sticky-budget .cp-sticky-btn:hover {
        background: #000000 !important;
        color: #FFFFFF !important;
        transform: translateY(-1px);
    }

    #cp-sticky-budget .cp-sticky-btn:disabled {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
}


/* CP v5.0.27 - Descripción corta visible y compacta */
.cp-pdp-short-desc-wrap {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 12px;
}

.cp-pdp-short-desc {
    display: block !important;
    margin: 0 !important;
    color: #3f3f46;
    font-size: 14px;
    line-height: 1.45;
}

.cp-pdp-short-desc p {
    margin: 0 0 6px !important;
}

.cp-pdp-short-desc p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .cp-pdp-short-desc-wrap {
        margin: 8px 0 10px;
        padding: 9px 11px;
        border-radius: 11px;
    }

    .cp-pdp-short-desc {
        font-size: 13.5px;
        line-height: 1.42;
    }
}