/* =========================================================
   PCW WIZARD — Estilos completos
   -----------------------------------------------------------------------
   Sube este archivo a: /wp-content/themes/foto-universal/pcw-wizard/assets/css/pcw-wizard.css
   ========================================================= */

/* --- 1. GLOBAL & FUENTES --- */
.pcw, .pcw * { font-family: "Montserrat" !important; }

/* Ocultar nativos */
.quantity, .woocommerce-input-wrapper .qty { display: none !important; }
.product .price, .entry-summary .price { display: none !important; }

/* Títulos Uppercase */
.single-product .product_title,
.single-product .entry-title {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: clamp(38px, 6vw, 48px) !important;
    line-height: 100% !important;
    letter-spacing: -0.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

body .quantity.sc-qty {
    display: none !important;
}

/* Ocultar el texto de stock disponible */
body .stock.in-stock {
    display: none !important;
}

/* --- 2. CONTENEDORES PRINCIPALES --- */
.pcw {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    border: none !important;
}

.pcw-scrollbox {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}

.pcw-file { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

/* --- 3. PASOS (INPUTS) --- */
.pcw-step {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    margin-bottom: 15px !important;
    background: transparent !important; border: none !important; padding: 0 !important;
}
.pcw-step h3 {
  margin: 0; font-size: 16px; color: #111; font-weight: 600;
  display: flex; align-items: center; min-width: 140px; flex-shrink: 0;
  text-transform: uppercase !important; letter-spacing: .4px; border: none !important;
}

/* Iconos */
.pcw-step h3::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 12px; border: 1px solid #5da796; background-size: contain; background-repeat: no-repeat; }
#pcw_medida_step h3::before { border: 2px dashed #5da796; width: 18px; height: 18px; }
#pcw_marco_step h3::before { border: 3px solid #5da796; }
#pcw_marialuisa_step h3::before { border: 1px solid #5da796; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #5da796; }
#pcw_vidrio_step h3::before { background: linear-gradient(45deg, transparent 48%, #5da796 49%, #5da796 51%, transparent 52%); border: 1px solid #5da796; }

.pcw-fields { flex-grow: 1; display: flex; justify-content: flex-end; width: 100%; align-items: center; }

/* Selects */
.pcw select {
  width: 100% !important; max-width: 322px !important; height: 40px !important;
  border-radius: 40px !important; border: 2px solid #891A1A !important; background-color: #faf9f7 !important;
  padding: 0 20px !important; font-size: 14px; color: #891A1A !important; font-weight: 700;
  cursor: pointer; text-transform: uppercase !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23891A1A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 10px auto !important;
  -webkit-appearance: none; appearance: none;
}
.select-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

#pcw-wizard, .pcw-scrollbox, .pcw-dropzone, #pcw_price_display, button.single_add_to_cart_button {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

/* A. SUBIR IMAGEN */
#pcw_imagen_step.pcw-step { display: block !important; margin-bottom: 25px !important; width: 80%; text-align: center; }
#pcw_imagen_step .pcw-fields { width: 100%; display: block !important; }

.pcw-dropzone {
    width: 100% !important; height: 48px !important;
    border-radius: 40px !important; background-color: #59768f !important; color: white !important;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; text-transform: uppercase !important;
    cursor: pointer; margin: 0 auto !important;
    border: none !important; outline: none !important; box-shadow: none !important;
}
.pcw-dropzone:hover { background-color: #4a657a !important; }
.pcw-dropzone:focus, .pcw-dropzone:active { outline: none !important; border: none !important; }
#pcw_imagen_hint {
    margin-top: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #55efc4;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
}

#btn-rotate-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid #59768f !important;
    background-color: #fff !important;
    color: #59768f !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
#btn-rotate-img:hover {
    background-color: #59768f !important;
    color: #fff !important;
}

/* B. PRECIO */
#pcw_price_display {
    width: 100%;
    color: #111;
    font-weight: 800;
    font-size: 42px !important;
    line-height: 1 !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    display: block;
}

/* C. BOTÓN CARRITO */
form.cart {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
}
form.cart p:empty, form.cart div:empty { display: none !important; margin: 0 !important; padding: 0 !important; }

button.single_add_to_cart_button {
    width: 100% !important; height: 48px !important;
    border-radius: 40px !important;
    background-color: #891A1A !important;
    color: white !important;
    font-weight: 700 !important; font-size: 16px !important;
    text-transform: uppercase !important;
    border: none !important;
    display: block !important;
    margin-top: 5px !important;
}
button.single_add_to_cart_button:hover { background-color: #6d1515 !important; }

/* Slider de Zoom */
#pcw_zoom_range {
    -webkit-appearance: none; width: 100%; height: 6px; border-radius: 5px; background: #d3d3d3; outline: none;
}
#pcw_zoom_range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: #59768f; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#pcw_zoom_range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: #59768f; cursor: pointer; border: 2px solid #fff;
}

/* Sliders de posición (nuevos) */
#pcw_pan_x, #pcw_pan_y {
    -webkit-appearance: none; width: 100%; height: 6px; border-radius: 5px; background: #d3d3d3; outline: none;
}
#pcw_pan_x::-webkit-slider-thumb, #pcw_pan_y::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: #891A1A; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#pcw_pan_x::-moz-range-thumb, #pcw_pan_y::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #891A1A; cursor: pointer; border: 2px solid #fff;
}
.pcw-ajuste-encuadre { margin: 15px 0; }
.pcw-ajuste-encuadre > label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #555; display: block; margin-bottom: 8px; }
.pcw-zoom-row, .pcw-pan-row { margin-bottom: 12px; }
.pcw-zoom-row span, .pcw-pan-row label { font-size: 12px; color: #666; display: block; margin-bottom: 4px; }

/* =========================================
   DISEÑO EN ESCRITORIO (PC / WEB)
   ========================================= */
.select-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative !important;
}

.pcw select {
    width: 100% !important;
    max-width: 322px !important;
    margin: 0 !important;
}

#btn-rotate {
    position: absolute !important;
    right: -50px !important;
    top: 0 !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border: 2px solid #891A1A !important;
    background-color: #faf9f7 !important;
    color: #891A1A !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* =========================================
   INDICADOR DE 3 FASES
   ========================================= */
.pcw-phase-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    gap: 4px;
}
.pcw-phase-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
    opacity: 0.4;
}
.pcw-phase-dot.completed { cursor: pointer; opacity: 1; }
.pcw-phase-dot.active { opacity: 1; }
.pcw-phase-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #891A1A;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    border: 2px solid #891A1A;
}
.pcw-phase-dot.active .pcw-phase-num,
.pcw-phase-dot.completed .pcw-phase-num {
    background: #891A1A;
    color: #fff;
}
.pcw-phase-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #891A1A;
}
.pcw-phase-line {
    width: 30px;
    height: 2px;
    background: #ddd;
    margin-top: -18px;
}
.pcw-phase-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}
.pcw-btn-continuar, .pcw-btn-atras {
    flex: 1;
    height: 44px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
}
.pcw-btn-continuar {
    background-color: #891A1A;
    color: #fff;
}
.pcw-btn-continuar:hover { background-color: #6d1515; }
.pcw-btn-atras {
    background-color: #fff;
    color: #891A1A;
    border: 2px solid #891A1A !important;
}

/* =========================================
   DISEÑO EN MÓVILES (Menos de 768px)
   ========================================= */
@media (max-width: 768px) {
    .pcw-step {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .pcw-step h3 {
        min-width: 0 !important;
        width: 30% !important;
        flex: 0 0 30% !important;
        font-size: 12px !important;
        padding-right: 4px !important;
        margin: 0 !important;
    }

    .pcw-fields {
        width: 70% !important;
        flex: 0 0 70% !important;
        box-sizing: border-box !important;
        justify-content: flex-end !important;
    }

    .select-wrapper {
        position: static !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    .pcw select {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: calc(100% - 40px) !important;
        max-width: none !important;
        margin: 0 !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 25px !important;
        font-size: 11px !important;
    }

    #btn-rotate {
        position: static !important;
        right: auto !important;
        top: auto !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        margin: 0 0 0 3px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    #btn-rotate-img {
        width: 40px !important;
        height: 40px !important;
    }

    .pcw-dropzone {
        height: 42px !important;
        font-size: 13px !important;
    }

    #pcw_price_display {
        font-size: 32px !important;
        text-align: center !important;
    }

    /* --- TARJETA INFORMATIVA MACOCEL --- */
    .pcw-macocel-card {
        background-color: #f4f7f9 !important;
        border-left: 4px solid #59768f !important;
        border-radius: 8px !important;
        padding: 14px 18px !important;
        margin: 15px auto !important;
        max-width: 620px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
        box-sizing: border-box !important;
    }
    .pcw-macocel-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #59768f !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 5px !important;
    }
    .pcw-macocel-text {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        color: #444 !important;
        margin: 0 !important;
        font-style: italic !important;
        text-align: left !important;
    }
}

/* =========================================
   OCULTAR SELECTOR NATIVO DE VARIACIONES (pcw-config)
   ========================================= */
#pcw-config {
    display: none !important;
}

label[for="pcw-config"] {
    display: none !important;
}

div.quantity.sc-qty[data-qty][role="group"] {
    display: none !important;
}

/* =========================================================
   PCW UI V2 — REDISEÑO VISUAL FASE 1
   No modifica IDs, valores, precio, carrito ni procesamiento.
   ========================================================= */

#pcw-wizard.pcw-ui-v2 {
    --pcw-red: #891a1a;
    --pcw-red-dark: #6f1414;
    --pcw-green: #5f8b7c;
    --pcw-text: #231f20;
    --pcw-muted: #818586;
    --pcw-line: #bec1c0;
    --pcw-soft: #f8f7f5;
    --pcw-white: #fff;
    max-width: 572px !important;
    color: var(--pcw-text);
}

#pcw-wizard.pcw-ui-v2,
#pcw-wizard.pcw-ui-v2 * {
    box-sizing: border-box;
}

#pcw-wizard.pcw-ui-v2 .pcw-scrollbox {
    max-width: 572px !important;
}

/* Encabezado de la fase */
#pcw-wizard .pcw-phase-headings {
    margin-bottom: 28px;
}

#pcw-wizard .pcw-phase-heading[hidden] {
    display: none !important;
}

#pcw-wizard .pcw-phase-heading__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

#pcw-wizard .pcw-phase-heading h2 {
    margin: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: clamp(30px, 4vw, 41px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.6px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-phase-heading p {
    margin: 12px 0 0 !important;
    max-width: 520px;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--pcw-text) !important;
}

#pcw-wizard .pcw-phase-heading__icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 2px solid var(--pcw-green);
}

#pcw-wizard .pcw-phase-heading__icon::before,
#pcw-wizard .pcw-phase-heading__icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-color: var(--pcw-green);
}

#pcw-wizard .pcw-phase-heading__icon::before {
    left: -5px;
    top: -5px;
    border-left: 2px solid;
    border-top: 2px solid;
}

#pcw-wizard .pcw-phase-heading__icon::after {
    right: -5px;
    bottom: -5px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

/* Indicador */
#pcw-wizard .pcw-phase-indicator {
    justify-content: space-between;
    gap: 0;
    margin: 0 0 34px;
}

#pcw-wizard .pcw-phase-dot {
    min-width: 54px;
    gap: 6px;
    opacity: 1;
}

#pcw-wizard .pcw-phase-num {
    width: 26px;
    height: 26px;
    border: 1px solid var(--pcw-line);
    background: #f5f5f5;
    color: var(--pcw-muted);
    font-size: 11px;
}

#pcw-wizard .pcw-phase-dot.active .pcw-phase-num {
    border-color: var(--pcw-red);
    background: var(--pcw-red);
    color: #fff;
}

#pcw-wizard .pcw-phase-dot.completed .pcw-phase-num {
    border-color: var(--pcw-green);
    background: var(--pcw-green);
    color: #fff;
}

#pcw-wizard .pcw-phase-label {
    font-size: 9px;
    font-weight: 500;
    text-transform: none;
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-phase-dot.active .pcw-phase-label {
    color: var(--pcw-red);
}

#pcw-wizard .pcw-phase-dot.completed .pcw-phase-label {
    color: var(--pcw-green);
}

#pcw-wizard .pcw-phase-line {
    flex: 1 1 auto;
    width: auto;
    max-width: 92px;
    margin: -18px 12px 0;
    background: var(--pcw-line);
}

/* Orden visual de la fase 1: encuadre, orientación, medidas, calidad, precio, botones */
#pcw-wizard .pcw-phase--image {
    display: flex;
    flex-direction: column;
}

#pcw-wizard .pcw-phase--image #pcw_imagen_step {
    order: 1;
}

#pcw-wizard .pcw-phase--image #pcw_medida_step {
    order: 2;
}

#pcw-wizard .pcw-phase--image #pcw_quality_banner {
    order: 3;
}

#pcw-wizard .pcw-phase--image .pcw-price-block {
    order: 4;
}

#pcw-wizard .pcw-phase--image .pcw-phase-nav {
    order: 5;
}

#pcw-wizard .pcw-phase--image .pcw-service-notes {
    order: 6;
}

#pcw-wizard .pcw-phase--image .pcw-step {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#pcw-wizard .pcw-phase--image .pcw-fields {
    display: block !important;
    width: 100% !important;
}

#pcw-wizard .pcw-control-section {
    margin: 0 0 30px;
}

#pcw-wizard .pcw-control-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--pcw-muted) !important;
}

#pcw-wizard .pcw-control-title::before {
    display: none !important;
}

/* La carga visible vive en el preview de la columna izquierda. */
#pcw-wizard .pcw-upload-fallback {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

#pcw-wizard .pcw-assistive-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* Encuadre */
#pcw-wizard .pcw-ajuste-encuadre {
    margin: 0 0 28px !important;
    padding: 0 !important;
    background: transparent !important;
}

#pcw-wizard .pcw-range-control {
    margin: 0 0 16px;
}

#pcw-wizard .pcw-range-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-pan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

#pcw-wizard input[type="range"] {
    --pcw-range-progress: 50%;
    display: block;
    width: 100%;
    height: 3px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(to right, var(--pcw-red) 0 var(--pcw-range-progress), var(--pcw-line) var(--pcw-range-progress) 100%) !important;
    appearance: none;
    -webkit-appearance: none;
}

#pcw-wizard input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--pcw-red);
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

#pcw-wizard input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--pcw-red);
    box-shadow: none;
    cursor: pointer;
}

/* Orientación */
#pcw-wizard .pcw-orientation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#pcw-wizard .pcw-orientation-card {
    min-height: 72px;
    padding: 10px 8px !important;
    border: 1px solid var(--pcw-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--pcw-muted) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

#pcw-wizard .pcw-orientation-card.is-active {
    border-color: var(--pcw-red) !important;
    background: rgba(137, 26, 26, .08) !important;
    color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-orientation-card:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#pcw-wizard .pcw-orientation-shape {
    display: block;
    margin: 0 auto 8px;
    border-radius: 1px;
    background: currentColor;
}

#pcw-wizard .pcw-orientation-shape--horizontal {
    width: 25px;
    height: 15px;
}

#pcw-wizard .pcw-orientation-shape--vertical {
    width: 15px;
    height: 25px;
}

#pcw-wizard .pcw-orientation-shape--square {
    width: 21px;
    height: 21px;
}

#pcw-wizard #btn-rotate.pcw-legacy-rotate,
#pcw-wizard .pcw-native-select--size {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Tarjetas de medidas */
#pcw-wizard .pcw-size-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#pcw-wizard .pcw-size-card {
    position: relative;
    min-height: 58px;
    padding: 9px 10px !important;
    border: 1px solid var(--pcw-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--pcw-text) !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

#pcw-wizard .pcw-size-card.is-active {
    border-color: var(--pcw-red) !important;
    background: rgba(137, 26, 26, .04) !important;
}

#pcw-wizard .pcw-size-card.is-extra:not(.is-expanded) {
    display: none !important;
}

#pcw-wizard .pcw-size-card__inches {
    display: block;
    padding-right: 32px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
}

#pcw-wizard .pcw-size-card__cm {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-size-card__badge {
    position: absolute;
    right: 6px;
    top: 7px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--pcw-green);
    color: #fff;
    font-size: 6px;
    line-height: 1.2;
    font-weight: 600;
}

#pcw-wizard .pcw-more-sizes {
    width: auto !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pcw-red) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer;
}

/* Calidad */
#pcw-wizard .pcw-quality-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 4px 0 26px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f0f3f2;
    color: var(--pcw-green);
    font-size: 10px;
    line-height: 1.3;
}

#pcw-wizard .pcw-quality-banner.is-error {
    background: rgba(137, 26, 26, .08);
    color: var(--pcw-red);
}

#pcw-wizard .pcw-quality-banner.is-neutral {
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-quality-banner__icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: 10px;
}

/* Precio */
#pcw-wizard .pcw-price-block {
    width: 100%;
    margin: 0 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid #d7d9d8;
}

#pcw-wizard .pcw-price-label {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    color: var(--pcw-muted);
}

#pcw-wizard #pcw_price_display {
    max-width: none !important;
    margin: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-price-pending {
    display: none;
    margin-top: 5px;
    font-size: 9px;
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-price-block.is-pending .pcw-price-pending {
    display: block;
}

/* Navegación */
#pcw-wizard .pcw-phase-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

#pcw-wizard .pcw-btn-continuar,
#pcw-wizard .pcw-btn-atras,
#pcw-wizard .pcw-btn-cancelar {
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

#pcw-wizard .pcw-btn-cancelar,
#pcw-wizard .pcw-btn-atras {
    border: 1px solid var(--pcw-red) !important;
    background: #fff !important;
    color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-btn-continuar {
    border: 1px solid var(--pcw-red) !important;
    background: var(--pcw-red) !important;
    color: #fff !important;
}

#pcw-wizard .pcw-btn-continuar:hover {
    background: var(--pcw-red-dark) !important;
}

#pcw-wizard .pcw-service-notes {
    margin-top: 20px;
    color: var(--pcw-muted);
}

#pcw-wizard .pcw-service-notes p {
    margin: 5px 0 !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
}

#pcw-wizard .pcw-service-notes p span {
    color: var(--pcw-green);
    margin-right: 5px;
}

/* Preview izquierdo decorado por JS */
.pcw-preview-container.pcw-preview-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 475px;
    margin: 0 auto !important;
    padding: 20px !important;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px -1px rgba(0, 0, 0, .10);
}

.pcw-preview-container.pcw-preview-card #pcw_preview_legend {
    display: none !important;
}

.pcw-preview-container.pcw-preview-card::before {
    content: "";
    display: block;
    position: absolute;
    inset: 20px 20px 66px;
    border-radius: 14px;
    background: var(--pcw-soft, #f8f7f5);
    z-index: 0;
}

.pcw-preview-container.pcw-preview-card #pcw_preview_canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
}

.pcw-preview-empty {
    position: absolute;
    z-index: 3;
    inset: 50px 44px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    text-align: center;
    transition: opacity .2s ease, visibility .2s ease;
}

.pcw-preview-card.has-image .pcw-preview-empty {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pcw-preview-empty.is-dragover {
    outline: 2px dashed #891a1a;
    outline-offset: -8px;
}

.pcw-preview-empty__icon {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    color: #818586;
}

.pcw-preview-empty__title {
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 700;
    color: #231f20;
}

.pcw-preview-empty__help {
    margin: 0 0 15px;
    font-size: 7px;
    color: #818586;
}

.pcw-preview-empty__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #891a1a;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.pcw-preview-meta {
    position: relative;
    z-index: 2;
    min-height: 46px;
    padding-top: 15px;
    text-align: center;
}

.pcw-preview-meta__name {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #231f20;
}

.pcw-preview-meta__size {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.2;
    color: #818586;
}

/* Botón "Cambiar imagen" — solo visible una vez que ya hay una foto
   subida (mismo trigger, .has-image, que oculta el dropzone grande). */
.pcw-preview-meta__change {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
    padding: 7px 16px;
    border: 1px solid #891a1a;
    border-radius: 999px;
    background: #fff;
    color: #891a1a;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pcw-preview-meta__change-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.pcw-preview-card.has-image .pcw-preview-meta__change {
    display: inline-flex;
}

/* Resaltado cuando la resolución de la imagen no es apta — conecta
   visualmente el aviso rojo de calidad con la acción para resolverlo. */
.pcw-preview-meta__change.is-suggested {
    background: #891a1a;
    color: #fff;
    animation: pcw-change-pulse 1.6s ease-in-out infinite;
}

@keyframes pcw-change-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(137, 26, 26, .35); }
    50% { box-shadow: 0 0 0 6px rgba(137, 26, 26, 0); }
}

@media (max-width: 768px) {
    #pcw-wizard.pcw-ui-v2,
    #pcw-wizard.pcw-ui-v2 .pcw-scrollbox {
        max-width: 100% !important;
    }

    #pcw-wizard .pcw-phase-heading h2 {
        font-size: 30px !important;
    }

    #pcw-wizard .pcw-pan-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #pcw-wizard .pcw-orientation-grid,
    #pcw-wizard .pcw-size-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #pcw-wizard .pcw-phase-line {
        margin-inline: 5px;
    }

    .pcw-preview-container.pcw-preview-card {
        max-width: 100%;
    }
}

/* =========================================================
   CORRECCIÓN FINAL — TAMAÑO REAL DE LA COLUMNA DE PREVIEW
   Mantiene 475 × 645 px como máximo en escritorio y reduce
   proporcionalmente el bloque en pantallas más pequeñas.
   ========================================================= */

.elementor-widget-shortcode:has(.pcw-preview-container.pcw-preview-card),
.elementor-shortcode:has(> .pcw-preview-container.pcw-preview-card),
.elementor-widget-container:has(.pcw-preview-container.pcw-preview-card),
.woocommerce-product-gallery:has(.pcw-preview-container.pcw-preview-card),
.single-product div.product .images:has(.pcw-preview-container.pcw-preview-card) {
    width: 100% !important;
    max-width: 475px !important;
    flex: 0 1 475px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pcw-preview-container.pcw-preview-card {
    width: 100% !important;
    max-width: 475px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 645.0909423828125px !important;
    aspect-ratio: 475 / 645.0909423828125;

    padding: 20px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.pcw-preview-container.pcw-preview-card::before {
    inset: 20px 20px 66px !important;
}

.pcw-preview-container.pcw-preview-card #pcw_preview_canvas {
    width: 100% !important;
    max-width: 435px !important;
    height: calc(100% - 46px) !important;
    max-height: 559px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.pcw-preview-container.pcw-preview-card .pcw-preview-empty {
    inset: 44px 44px 90px !important;
}

.pcw-preview-container.pcw-preview-card .pcw-preview-meta {
    min-height: 46px !important;
    flex: 0 0 46px !important;
}

#pcw-wizard.pcw-ui-v2 {
    width: 100% !important;
    max-width: 572px !important;
}

@media (max-width: 1024px) {
    .elementor-widget-shortcode:has(.pcw-preview-container.pcw-preview-card),
    .elementor-shortcode:has(> .pcw-preview-container.pcw-preview-card),
    .elementor-widget-container:has(.pcw-preview-container.pcw-preview-card),
    .woocommerce-product-gallery:has(.pcw-preview-container.pcw-preview-card),
    .single-product div.product .images:has(.pcw-preview-container.pcw-preview-card) {
        max-width: 440px !important;
        flex-basis: 440px !important;
    }

    .pcw-preview-container.pcw-preview-card {
        max-width: 440px !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .elementor-widget-shortcode:has(.pcw-preview-container.pcw-preview-card),
    .elementor-shortcode:has(> .pcw-preview-container.pcw-preview-card),
    .elementor-widget-container:has(.pcw-preview-container.pcw-preview-card),
    .woocommerce-product-gallery:has(.pcw-preview-container.pcw-preview-card),
    .single-product div.product .images:has(.pcw-preview-container.pcw-preview-card) {
        width: 100% !important;
        max-width: 390px !important;
        flex-basis: auto !important;
    }

    .pcw-preview-container.pcw-preview-card {
        width: 100% !important;
        max-width: 390px !important;
        max-height: none !important;
        padding: 16px !important;
    }

    .pcw-preview-container.pcw-preview-card::before {
        inset: 16px 16px 60px !important;
    }

    .pcw-preview-container.pcw-preview-card #pcw_preview_canvas {
        max-width: none !important;
        max-height: none !important;
        height: calc(100% - 44px) !important;
    }

    .pcw-preview-container.pcw-preview-card .pcw-preview-empty {
        inset: 34px 30px 82px !important;
    }
}

@media (max-width: 480px) {
    .elementor-widget-shortcode:has(.pcw-preview-container.pcw-preview-card),
    .elementor-shortcode:has(> .pcw-preview-container.pcw-preview-card),
    .elementor-widget-container:has(.pcw-preview-container.pcw-preview-card),
    .woocommerce-product-gallery:has(.pcw-preview-container.pcw-preview-card),
    .single-product div.product .images:has(.pcw-preview-container.pcw-preview-card),
    .pcw-preview-container.pcw-preview-card {
        max-width: 340px !important;
    }

    .pcw-preview-container.pcw-preview-card {
        padding: 12px !important;
    }

    .pcw-preview-container.pcw-preview-card::before {
        inset: 12px 12px 56px !important;
    }

    .pcw-preview-container.pcw-preview-card .pcw-preview-empty {
        inset: 26px 22px 74px !important;
    }
}

/* =========================================================
   PCW UI V2 — FASE 2: SELECCIÓN VISUAL DE MARCOS
   Mantiene #pcw_marco como fuente de verdad.
   ========================================================= */

#pcw-wizard .pcw-inline-link {
    color: var(--pcw-red);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Fase 2 */
#pcw-wizard .pcw-phase--frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

#pcw-wizard .pcw-phase--frame #pcw_marco_step,
#pcw-wizard .pcw-phase--frame #pcw_marco_step .pcw-fields,
#pcw-wizard .pcw-frame-picker {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pcw-wizard .pcw-phase--frame #pcw_marco_step {
    border: 0 !important;
    background: transparent !important;
}

/* El select real sigue en el DOM y conserva su valor/validación. */
#pcw-wizard .pcw-native-select--frame {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Familias */
#pcw-wizard .pcw-frame-family-section {
    width: 100%;
}

#pcw-wizard .pcw-frame-families {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 0 0 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
}

#pcw-wizard .pcw-frame-families::-webkit-scrollbar {
    display: none;
}

#pcw-wizard .pcw-frame-family {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pcw-soft) !important;
    color: var(--pcw-muted) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

#pcw-wizard .pcw-frame-family.is-active {
    background: var(--pcw-red) !important;
    color: #fff !important;
}

/* Tipos de marco */
#pcw-wizard .pcw-frame-type-section {
    width: 100%;
    margin-top: 32px;
}

#pcw-wizard .pcw-frame-type-title {
    margin-bottom: 12px !important;
}

#pcw-wizard .pcw-frame-type-title span {
    color: var(--pcw-muted);
    font-weight: 500;
    text-transform: uppercase;
}

#pcw-wizard .pcw-frame-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

#pcw-wizard .pcw-frame-card {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1;
    padding: 3px !important;
    overflow: hidden;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--pcw-text) !important;
    cursor: pointer;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

#pcw-wizard .pcw-frame-card.is-active {
    border-color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-frame-card__image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    background:
        linear-gradient(135deg, #fff 0 49%, #f8f7f5 49% 51%, #fff 51% 100%);
}

#pcw-wizard .pcw-frame-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

/*
 * Si no existe el recorte en /assets/frame-thumbs/, se utiliza la
 * imagen completa y se amplía para mostrar una esquina del marco.
 */
#pcw-wizard .pcw-frame-card.is-full-frame img {
    position: absolute;
    left: -24%;
    top: -24%;
    width: 175%;
    height: 175%;
    object-fit: contain;
    object-position: left top;
}

#pcw-wizard .pcw-frame-card.has-no-image .pcw-frame-card__image::after {
    content: "Sin imagen";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 8px;
    color: var(--pcw-muted);
    font-size: 8px;
    text-align: center;
}

#pcw-wizard .pcw-frame-empty {
    margin: 16px 0 0 !important;
    padding: 16px;
    border-radius: 10px;
    background: var(--pcw-soft);
    color: var(--pcw-muted);
    font-size: 11px;
    line-height: 1.4;
}

#pcw-wizard .pcw-frame-empty[hidden] {
    display: none !important;
}

#pcw-wizard .pcw-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;
}

/* Precio y navegación dentro de la Fase 2 */
#pcw-wizard .pcw-phase--frame .pcw-price-block {
    width: 100%;
    margin: 0 !important;
    padding-top: 20px;
}

#pcw-wizard .pcw-phase--frame .pcw-phase-nav {
    width: 100%;
    margin: 0;
}

#pcw-wizard .pcw-phase--frame .pcw-service-notes {
    width: 100%;
    margin-top: -20px;
}

/* Icono del encabezado de la fase Marco */
#pcw-wizard .pcw-phase-heading__icon--frame {
    border: 2px solid var(--pcw-green);
    box-shadow:
        inset 0 0 0 4px #fff,
        inset 0 0 0 6px var(--pcw-green);
}

#pcw-wizard .pcw-phase-heading__icon--frame::before,
#pcw-wizard .pcw-phase-heading__icon--frame::after {
    width: 6px;
    height: 6px;
}

/* Preview más alto en la segunda fase, según el diseño de Figma. */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 {
    max-height: 737px !important;
    aspect-ratio: 475 / 737;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2::before {
    inset: 20px 20px 70px !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 #pcw_preview_canvas {
    height: calc(100% - 50px) !important;
    max-height: 657px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    #pcw-wizard .pcw-frame-grid {
        gap: 12px;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 {
        max-height: none !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    #pcw-wizard .pcw-phase--frame {
        gap: 28px;
    }

    #pcw-wizard .pcw-frame-family {
        padding: 8px 13px !important;
        font-size: 10px !important;
    }

    #pcw-wizard .pcw-frame-type-section {
        margin-top: 24px;
    }

    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    #pcw-wizard .pcw-phase--frame .pcw-service-notes {
        margin-top: -8px;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 {
        width: 100% !important;
        max-width: 390px !important;
        max-height: none !important;
    }
}

@media (max-width: 520px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   CORRECCIÓN FASE 2 — MINIATURAS DE MARCOS
   Fuerza tarjetas reales de 100 × 100 px y evita que la
   imagen completa se amplíe fuera de la miniatura.
   ========================================================= */

#pcw-wizard .pcw-frame-grid {
    grid-template-columns: repeat(5, 100px) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 18px !important;
}

#pcw-wizard .pcw-frame-card {
    display: block !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    aspect-ratio: auto !important;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

#pcw-wizard .pcw-frame-card__image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

#pcw-wizard .pcw-frame-card img,
#pcw-wizard .pcw-frame-card.is-full-frame img {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;

    display: block !important;
    width: 100% !important;
    max-width: 88px !important;
    height: 100% !important;
    max-height: 88px !important;

    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
    scale: 1 !important;
}

/*
 * La clase indica que se usó la imagen completa como respaldo,
 * pero ya no se amplía ni se desplaza.
 */
#pcw-wizard .pcw-frame-card.is-full-frame .pcw-frame-card__image {
    padding: 8px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(4, 100px) !important;
        gap: 14px !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #pcw-wizard .pcw-frame-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    #pcw-wizard .pcw-frame-card img,
    #pcw-wizard .pcw-frame-card.is-full-frame img {
        max-width: 88% !important;
        max-height: 88% !important;
    }
}

@media (max-width: 520px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(3, minmax(0, 100px)) !important;
    }
}

@media (max-width: 380px) {
    #pcw-wizard .pcw-frame-grid {
        grid-template-columns: repeat(2, minmax(0, 100px)) !important;
    }
}

/* =========================================================
   PCW UI V3 — FASE 3: EXTRAS Y ACABADOS
   Los selects reales y el botón real de WooCommerce se conservan.
   ========================================================= */

#pcw-wizard .pcw-phase--extras {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

#pcw-wizard .pcw-phase--extras .pcw-step,
#pcw-wizard .pcw-phase--extras .pcw-fields,
#pcw-wizard .pcw-extra-picker {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pcw-wizard .pcw-phase--extras .pcw-step {
    border: 0 !important;
    background: transparent !important;
}

#pcw-wizard .pcw-native-select--extra {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#pcw-wizard .pcw-extra-section {
    width: 100%;
}

#pcw-wizard .pcw-phase--extras .pcw-control-title {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: var(--pcw-muted) !important;
}

/* María Luisa */
#pcw-wizard .pcw-ml-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

#pcw-wizard .pcw-ml-option {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1.8px solid var(--pcw-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--pcw-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}

#pcw-wizard .pcw-ml-option.is-active {
    border-color: var(--pcw-red) !important;
    background: rgba(137, 26, 26, .05) !important;
    color: var(--pcw-red) !important;
}

#pcw-wizard .pcw-ml-option.is-disabled,
#pcw-wizard .pcw-ml-option:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#pcw-wizard .pcw-ml-width {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
    background: var(--pcw-soft);
}

#pcw-wizard .pcw-ml-width[hidden] {
    display: none !important;
}

#pcw-wizard .pcw-ml-width__label {
    margin-bottom: 10px;
    color: var(--pcw-text);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
}

#pcw-wizard .pcw-ml-width__label strong {
    color: var(--pcw-red);
}

#pcw-wizard .pcw-ml-width__control {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 8px;
}

#pcw-wizard .pcw-round-control {
    display: grid !important;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 1.8px solid var(--pcw-line) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--pcw-text) !important;
    font-size: 16px !important;
}

#pcw-wizard .pcw-round-control:disabled {
    opacity: .6;
}

#pcw-wizard .pcw-ml-width input[type="range"] {
    opacity: 1 !important;
    cursor: default;
}

#pcw-wizard .pcw-ml-width__scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 6px 36px 0;
    color: var(--pcw-muted);
    font-size: 8px;
    text-align: center;
}

/* Vidrio */
#pcw-wizard .pcw-glass-options {
    display: grid;
    gap: 12px;
    width: 100%;
}

#pcw-wizard .pcw-glass-option {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: 100% !important;
    min-height: 78px !important;
    padding: 16px !important;
    border: 1.8px solid var(--pcw-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--pcw-text) !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease;
}

#pcw-wizard .pcw-glass-option.is-active {
    border-color: var(--pcw-red) !important;
    background: rgba(137, 26, 26, .05) !important;
}

#pcw-wizard .pcw-radio-dot {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
    border: 1.8px solid var(--pcw-line);
    border-radius: 50%;
    background: #fff;
}

#pcw-wizard .pcw-glass-option.is-active .pcw-radio-dot {
    border-color: var(--pcw-red);
    background: var(--pcw-red);
}

#pcw-wizard .pcw-glass-option.is-active .pcw-radio-dot::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
}

#pcw-wizard .pcw-glass-option__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#pcw-wizard .pcw-glass-option__content strong {
    color: var(--pcw-text);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}

#pcw-wizard .pcw-glass-option.is-active .pcw-glass-option__content strong {
    color: var(--pcw-red);
}

#pcw-wizard .pcw-glass-option__content small {
    color: var(--pcw-muted);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 400;
}

#pcw-wizard .pcw-legacy-warning {
    display: none !important;
}

/* Cantidad */
#pcw-wizard .pcw-extra-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
}

#pcw-wizard .pcw-extra-quantity .pcw-control-title {
    width: auto !important;
    margin: 0 !important;
}

#pcw-wizard .pcw-extra-quantity__control {
    display: flex;
    align-items: center;
    gap: 16px;
}

#pcw-wizard .pcw-qty-button {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 1.8px solid var(--pcw-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--pcw-text) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer;
}

#pcw-wizard .pcw-qty-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#pcw-wizard .pcw-quantity-value {
    min-width: 40px;
    color: var(--pcw-text);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-align: center;
}

/* Precio, navegación y botón real */
#pcw-wizard .pcw-phase--extras .pcw-price-block {
    width: 100%;
    margin: 0 !important;
    padding-top: 20px;
}

#pcw-wizard .pcw-phase--extras .pcw-phase-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin: 0;
}

#pcw-wizard .pcw-cart-slot {
    display: block;
    width: 100%;
    min-width: 0;
}

#pcw-wizard .pcw-cart-slot .single_add_to_cart_button,
#pcw-wizard .pcw-final-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 1px solid var(--pcw-red) !important;
    border-radius: 999px !important;
    background: var(--pcw-red) !important;
    color: #fff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

#pcw-wizard .pcw-cart-slot .single_add_to_cart_button:hover {
    background: var(--pcw-red-dark) !important;
}

#pcw-wizard .pcw-phase--extras .pcw-service-notes {
    width: 100%;
    margin-top: -20px;
}

/* Encabezado de Extras */
#pcw-wizard .pcw-phase-heading__icon--extras {
    border: 2px solid var(--pcw-green);
    box-shadow:
        inset 0 0 0 5px #fff,
        inset 0 0 0 7px var(--pcw-green);
}

/* Preview de las fases 2 y 3 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
    max-height: 737px !important;
    aspect-ratio: 475 / 737;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3::before {
    inset: 20px 20px 70px !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 #pcw_preview_canvas {
    height: calc(100% - 50px) !important;
    max-height: 657px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
        max-height: none !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    #pcw-wizard .pcw-phase--extras {
        gap: 28px;
    }

    #pcw-wizard .pcw-ml-options {
        grid-template-columns: 1fr;
    }

    #pcw-wizard .pcw-extra-quantity {
        gap: 20px;
    }

    #pcw-wizard .pcw-phase--extras .pcw-phase-nav {
        grid-template-columns: 1fr;
    }

    #pcw-wizard .pcw-phase--extras .pcw-service-notes {
        margin-top: -8px;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
        width: 100% !important;
        max-width: 390px !important;
        max-height: none !important;
    }
}

@media (max-width: 420px) {
    #pcw-wizard .pcw-extra-quantity {
        align-items: flex-start;
        flex-direction: column;
    }

    #pcw-wizard .pcw-extra-quantity__control {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
   PCW — EDITOR DE RECORTE EN FASE 1
   ========================================================= */

.pcw-crop-editor {
    position: relative;
    z-index: 2;
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 12px;
    background: #f8f7f5;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image
.pcw-crop-editor {
    display: flex;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image
#pcw_preview_canvas {
    display: none !important;
}

.pcw-preview-container.pcw-preview-card:not(.pcw-preview-phase-1)
.pcw-crop-editor {
    display: none !important;
}

#pcw_crop_editor_canvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 495px;
    margin: auto;
    border-radius: 8px;
    background: #e8e5e0;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#pcw_crop_editor_canvas.is-dragging {
    cursor: grabbing;
}

.pcw-crop-editor__instruction {
    margin: 12px 0 0 !important;
    color: #231f20;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 700;
    text-align: center;
}

.pcw-crop-editor__help {
    margin: 3px 0 0 !important;
    color: #818586;
    font-size: 8px !important;
    line-height: 1.35 !important;
    text-align: center;
}

/*
 * Se conservan los controles originales:
 * Zoom, posición horizontal y posición vertical.
 * El arrastre directo sobre la imagen funciona como una cuarta forma
 * de ajustar el mismo encuadre.
 */
#pcw-wizard.pcw-ui-v2 .pcw-phase--image .pcw-pan-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

#pcw-wizard.pcw-ui-v2 .pcw-phase--image .pcw-ajuste-encuadre::after {
    content: "Puedes usar los controles de posición o arrastrar directamente el recuadro sobre la fotografía.";
    display: block;
    margin-top: 12px;
    color: #818586;
    font-size: 9px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .pcw-crop-editor {
        padding: 8px;
    }

    #pcw_crop_editor_canvas {
        max-height: 420px;
    }
}

@media (max-width: 480px) {
    #pcw_crop_editor_canvas {
        max-height: 350px;
    }
}

/* =========================================================
   PCW — ESTADOS DE CALIDAD DE IMPRESIÓN
   ========================================================= */

#pcw-wizard .pcw-quality-banner.is-excellent {
    background: #edf5f1 !important;
    border-color: #5f8b7c !important;
    color: #477063 !important;
}

#pcw-wizard .pcw-quality-banner.is-warning {
    background: #fff8e8 !important;
    border-color: #c49a49 !important;
    color: #7a5a1e !important;
}

#pcw-wizard .pcw-quality-banner.is-error {
    background: rgba(137, 26, 26, .06) !important;
    border-color: #891a1a !important;
    color: #891a1a !important;
}

#pcw-wizard .pcw-quality-banner__text {
    line-height: 1.35 !important;
}

@media (max-width: 600px) {
    #pcw-wizard.pcw-ui-v2 .pcw-phase--image .pcw-pan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* =========================================================
   PCW — PREVIEW GRANDE + ZOOM DE INSPECCIÓN
   Fases 2 y 3 únicamente.
   ========================================================= */

/*
 * El canvas original sigue funcionando como fuente de datos, pero en
 * Marco y Extras se muestra la copia recortada que aprovecha todo el espacio.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 #pcw_preview_canvas,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 #pcw_preview_canvas {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* El editor de recorte pertenece exclusivamente a la Fase 1. */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 .pcw-crop-editor,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 .pcw-crop-editor {
    display: none !important;
}

.pcw-preview-inspector {
    position: relative;
    z-index: 2;
    display: none;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2.has-image
.pcw-preview-inspector,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3.has-image
.pcw-preview-inspector {
    display: flex;
}

/*
 * La zona del cuadro ocupa casi toda la tarjeta de 475 × 737.
 */
.pcw-preview-inspector__viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 535px;
    min-height: 535px;
    overflow: hidden;
    border-radius: 14px;
    background: #f8f7f5;
    cursor: default;
    touch-action: none;
}

.pcw-preview-inspector__canvas {
    display: block;
    width: auto;
    max-width: calc(100% - 28px);
    height: auto;
    max-height: calc(100% - 28px);
    margin: auto;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    touch-action: none;
}

.pcw-preview-inspector__canvas.is-zoomed {
    cursor: grab;
}

.pcw-preview-inspector__canvas.is-dragging {
    cursor: grabbing;
}

.pcw-preview-inspector__controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    padding: 0 4px;
}

.pcw-preview-inspector__label {
    color: #818586;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
}

.pcw-preview-inspector__zoom {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px 44px;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pcw-preview-inspector__zoom input[type="range"] {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.pcw-preview-inspector__zoom-button {
    display: grid !important;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 1.5px solid #bec1c0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #231f20 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    cursor: pointer;
}

.pcw-preview-inspector__zoom-button:hover {
    border-color: #891a1a !important;
    color: #891a1a !important;
}

.pcw-preview-inspector__zoom-value {
    display: block;
    min-width: 44px;
    color: #891a1a;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    text-align: right;
}

.pcw-preview-inspector__reset {
    justify-self: end;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #891a1a !important;
    font-family: inherit !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none !important;
    cursor: pointer;
}

.pcw-preview-inspector__hint {
    margin: 0 !important;
    color: #818586;
    font-size: 8px !important;
    line-height: 1.35 !important;
    text-align: center;
}

/*
 * Las tarjetas de las fases 2 y 3 mantienen el alto de referencia,
 * pero ahora el contenido útil ocupa prácticamente toda la superficie.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
    height: 737px !important;
    min-height: 737px !important;
    max-height: 737px !important;
    aspect-ratio: auto !important;
    padding: 20px !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2::before,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3::before {
    display: none !important;
}

/*
 * Nombre y medida permanecen visibles debajo del zoom.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 .pcw-preview-meta,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 .pcw-preview-meta {
    flex: 0 0 auto;
    min-height: 50px !important;
    padding-top: 2px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .pcw-preview-inspector__viewport {
        height: clamp(380px, 52vw, 535px);
        min-height: clamp(380px, 52vw, 535px);
    }
}

/* Móvil */
@media (max-width: 768px) {
    .pcw-preview-inspector__viewport {
        height: min(108vw, 470px);
        min-height: min(108vw, 470px);
    }

    .pcw-preview-inspector__zoom {
        grid-template-columns: 34px minmax(0, 1fr) 34px 42px;
        gap: 6px;
    }
}

@media (max-width: 420px) {
    .pcw-preview-inspector__viewport {
        height: min(112vw, 420px);
        min-height: min(112vw, 420px);
    }
}

/* =========================================================
   PCW — PREVIEW GRANDE SIN ZOOM
   Fases 2 y 3
   ========================================================= */

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
    width: 100% !important;
    max-width: 475px !important;
    height: 737px !important;
    min-height: 737px !important;
    max-height: 737px !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* El preview ocupa prácticamente toda la tarjeta. */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 16px !important;
}

.pcw-preview-inspector__viewport {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 615px !important;
    min-height: 615px !important;
    max-height: 615px !important;

    padding: 10px !important;
    overflow: hidden !important;

    background: #f8f7f5 !important;
    border-radius: 16px !important;
    cursor: default !important;
}

/*
 * La copia del canvas ya llega recortada al contenido real,
 * así que puede crecer hasta tocar casi todos los bordes internos.
 */
.pcw-preview-inspector__canvas {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;

    margin: auto !important;
    transform: none !important;
    cursor: default !important;
    touch-action: auto !important;
}

/* El zoom de inspección desaparece por completo. */
.pcw-preview-inspector__controls,
.pcw-preview-inspector__zoom,
.pcw-preview-inspector__zoom-button,
.pcw-preview-inspector__zoom-value,
.pcw-preview-inspector__reset,
.pcw-preview-inspector__hint,
.pcw-preview-inspector__label {
    display: none !important;
}

/* Nombre y medida debajo, como en la referencia. */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-meta,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-meta {
    display: flex !important;
    flex: 0 0 50px !important;
    min-height: 50px !important;
    height: 50px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .pcw-preview-inspector__viewport {
        height: clamp(480px, 60vw, 615px) !important;
        min-height: clamp(480px, 60vw, 615px) !important;
        max-height: none !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .pcw-preview-inspector__viewport {
        height: min(120vw, 540px) !important;
        min-height: min(120vw, 540px) !important;
    }
}

@media (max-width: 480px) {
    .pcw-preview-inspector__viewport {
        height: min(118vw, 470px) !important;
        min-height: min(118vw, 470px) !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   PCW — PREVIEW ALTA CALIDAD + ESPACIADO DE METADATOS
   ========================================================= */

/*
 * Damos un poco más de espacio vertical al nombre del marco y la medida.
 * Aplica solo en Marco y Extras.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-meta,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-meta {
    display: flex !important;
    flex: 0 0 72px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 72px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 12px 8px 8px !important;
    gap: 8px !important;

    text-align: center !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-meta__name,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-meta__name {
    display: block !important;
    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;

    color: #231f20 !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-meta__size,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-meta__size {
    display: block !important;
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.45 !important;

    color: #818586 !important;
}

/*
 * Reducimos apenas el viewport para que el texto gane aire sin cambiar
 * el tamaño exterior de la tarjeta de 475 × 737.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__viewport,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__viewport {
    height: 595px !important;
    min-height: 595px !important;
    max-height: 595px !important;
}

/*
 * El canvas se muestra sin filtros CSS que puedan suavizarlo.
 */
.pcw-preview-inspector__canvas {
    image-rendering: auto !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__viewport,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__viewport {
        height: clamp(455px, 58vw, 595px) !important;
        min-height: clamp(455px, 58vw, 595px) !important;
        max-height: none !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-meta,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-meta {
        min-height: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
        gap: 6px !important;
    }
}

/* =========================================================
   PCW — CRECIMIENTO DEL PREVIEW POR MARÍA LUISA
   Solo afecta la representación visual de Fase 3.
   ========================================================= */

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__canvas,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__canvas {
    width: var(--pcw-preview-display-width, auto) !important;
    height: var(--pcw-preview-display-height, auto) !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    transition:
        width .22s ease,
        height .22s ease;
}

/* =========================================================
   PCW — AJUSTES FINALES FASE 1 SEGÚN REFERENCIA
   ========================================================= */

/* ---------------------------------------------------------
   1. Ocultar "Marco personalizado" sobre el configurador
   --------------------------------------------------------- */

/*
 * Se limita a páginas de producto que contienen #pcw-wizard.
 * No oculta los títulos del resto de productos WooCommerce.
 */
body.single-product:has(#pcw-wizard) .product_title.entry-title,
body.single-product:has(#pcw-wizard) h1.product_title,
body.single-product:has(#pcw-wizard) .summary > .entry-title {
    display: none !important;
}


/* ---------------------------------------------------------
   2. Líneas — entre las tres fases
   --------------------------------------------------------- */

#pcw-wizard .pcw-phase-indicator {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

#pcw-wizard .pcw-phase-line {
    display: block !important;
    flex: 1 1 40px !important;

    width: auto !important;
    min-width: 24px !important;
    max-width: 44px !important;
    height: 1px !important;

    margin: 13px 18px 0 !important;

    border: 0 !important;
    background: #BEC1C0 !important;
    opacity: 1 !important;
}

/*
 * Las líneas permanecen grises como en Figma,
 * independientemente de la fase activa.
 */
#pcw-wizard .pcw-phase-line::before,
#pcw-wizard .pcw-phase-line::after {
    display: none !important;
    content: none !important;
}


/* ---------------------------------------------------------
   3. "Ajuste de encuadre" alineado a la izquierda
   --------------------------------------------------------- */

#pcw-wizard.pcw-ui-v2
.pcw-phase--image
.pcw-ajuste-encuadre {
    width: 100% !important;
    text-align: left !important;
}

#pcw-wizard.pcw-ui-v2
.pcw-phase--image
.pcw-ajuste-encuadre
#pcw-crop-title,
#pcw-wizard.pcw-ui-v2
.pcw-phase--image
.pcw-ajuste-encuadre
.pcw-control-title {
    display: block !important;
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
    justify-content: flex-start !important;
}


/* ---------------------------------------------------------
   4. Estado de resolución
   Verde = imagen apta
   Rojo = imagen no apta
   --------------------------------------------------------- */

#pcw-wizard .pcw-quality-banner.is-excellent {
    border: 1px solid rgba(95, 139, 124, .18) !important;
    background: #EDF5F1 !important;
    color: #5F8B7C !important;
}

#pcw-wizard .pcw-quality-banner.is-excellent
.pcw-quality-banner__icon {
    background: #5F8B7C !important;
    color: #fff !important;
}

#pcw-wizard .pcw-quality-banner.is-error {
    border: 1px solid rgba(137, 26, 26, .16) !important;
    background: rgba(137, 26, 26, .06) !important;
    color: #891A1A !important;
}

#pcw-wizard .pcw-quality-banner.is-error
.pcw-quality-banner__icon {
    background: #891A1A !important;
    color: #fff !important;
}

/*
 * Estado previo a seleccionar imagen/medida:
 * se mantiene neutro, no verde.
 */
#pcw-wizard .pcw-quality-banner.is-neutral {
    border: 1px solid transparent !important;
    background: #F0F3F2 !important;
    color: #818586 !important;
}


/* ---------------------------------------------------------
   Ajuste responsive del indicador
   --------------------------------------------------------- */

@media (max-width: 600px) {
    #pcw-wizard .pcw-phase-line {
        min-width: 14px !important;
        max-width: 30px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* =========================================================
   PCW — OCULTAR COMPLETAMENTE LA VARIACIÓN pcw-config
   ========================================================= */

/*
 * El select y label ya estaban ocultos, pero WooCommerce seguía
 * renderizando <th class="label"> y generando espacio vacío.
 */
form.variations_form table.variations tr:has(#pcw-config),
table.variations tr:has(#pcw-config),
tr.pcw-config-row-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

form.variations_form table.variations
th.label:has(label[for="pcw-config"]),
form.variations_form table.variations
td.value:has(#pcw-config),
th.label:has(label[for="pcw-config"]),
td.value:has(#pcw-config) {
    display: none !important;
}


/* =========================================================
   PCW — MARÍA LUISA FIJA EN 2.5 CM
   Sin controles de aumentar/disminuir.
   ========================================================= */

#pcw-wizard .pcw-ml-width--fixed {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 16px 18px !important;

    border-radius: 16px;
    background: var(--pcw-soft);
}

#pcw-wizard .pcw-ml-width--fixed[hidden] {
    display: none !important;
}

#pcw-wizard .pcw-ml-width--fixed .pcw-ml-width__label {
    margin: 0 0 10px !important;

    color: var(--pcw-text);
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

#pcw-wizard .pcw-ml-width__fixed-value {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 38px;

    padding: 0 2px;

    color: var(--pcw-red);
    font-size: 12px;
    line-height: 1.2;
}

#pcw-wizard .pcw-ml-width__fixed-value strong {
    color: var(--pcw-red);
    font-weight: 800;
}

#pcw-wizard .pcw-ml-width__fixed-dot {
    display: block;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;
    background: var(--pcw-red);
}

/*
 * Protección adicional por si existe markup anterior en caché.
 * Solo afecta los botones del ancho de María Luisa;
 * NO toca los +/- de cantidad.
 */
#pcw-wizard .pcw-ml-width .pcw-round-control,
#pcw-wizard .pcw-ml-width .pcw-ml-width__scale {
    display: none !important;
}

#pcw-wizard .pcw-ml-width .pcw-ml-width__control {
    display: block !important;
    width: 100% !important;
}

/*
 * Si una versión anterior de la plantilla aún contiene el range,
 * lo ocultamos para que no parezca editable.
 */
#pcw-wizard .pcw-ml-width input[type="range"] {
    display: none !important;
}

/* =========================================================
   PCW — ENLACE A GUÍA PASO A PASO
   ========================================================= */

#pcw-wizard .pcw-guide-link {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: var(--pcw-red) !important;

    font: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    text-transform: none !important;

    text-decoration: underline !important;
    text-underline-offset: 2px;

    cursor: pointer;
}

#pcw-wizard .pcw-guide-link:hover,
#pcw-wizard .pcw-guide-link:focus-visible {
    color: var(--pcw-red-dark) !important;
}


/* =========================================================
   PCW — MODAL / LIGHTBOX DE LA GUÍA
   ========================================================= */

body.pcw-guide-modal-open {
    overflow: hidden !important;
}

.pcw-guide-modal {
    position: fixed;
    z-index: 999999;

    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.pcw-guide-modal.is-open {
    display: flex;
}

.pcw-guide-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(2px);

    cursor: pointer;
}

.pcw-guide-modal__dialog {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: min(94vw, 1050px);
    max-height: 92vh;

    overflow: hidden;

    border-radius: 16px;
    background: #fff;

    box-shadow: 0 20px 70px rgba(0, 0, 0, .30);
}

.pcw-guide-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    min-height: 62px;
    padding: 14px 18px 14px 24px;

    border-bottom: 1px solid #ececea;
    background: #fff;
}

.pcw-guide-modal__header h2 {
    margin: 0 !important;

    color: #231f20 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.pcw-guide-modal__close {
    display: grid !important;
    place-items: center;

    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #dededb !important;
    border-radius: 50% !important;

    background: #fff !important;
    color: #231f20 !important;

    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    cursor: pointer;
}

.pcw-guide-modal__close:hover {
    border-color: #891a1a !important;
    color: #891a1a !important;
}

.pcw-guide-modal__content {
    flex: 1 1 auto;

    width: 100%;

    padding: 18px;

    overflow: auto;

    background: #f7f7f5;

    overscroll-behavior: contain;
}

.pcw-guide-modal__image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(92vh - 100px);

    margin: 0 auto;

    object-fit: contain;
}

/* Tablet / móvil */
@media (max-width: 768px) {
    .pcw-guide-modal {
        padding: 12px;
    }

    .pcw-guide-modal__dialog {
        width: 100%;
        max-height: 94vh;

        border-radius: 12px;
    }

    .pcw-guide-modal__header {
        min-height: 54px;
        padding: 10px 12px 10px 16px;
    }

    .pcw-guide-modal__header h2 {
        font-size: 14px !important;
    }

    .pcw-guide-modal__content {
        padding: 10px;
    }

    .pcw-guide-modal__image {
        max-height: calc(94vh - 80px);
    }
}
/* =========================================================
   PCW — FLOTADO: tercera opción visual de Vidrio
   Solo UI/estado; NO modifica el preview.
   ========================================================= */

#pcw-wizard .pcw-glass-option--flotado .pcw-glass-option__description {
    display: block;
}

#pcw-wizard .pcw-glass-option__availability {
    display: block;
    min-height: 0;
    color: var(--pcw-red);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 600;
}

#pcw-wizard .pcw-glass-option.is-disabled,
#pcw-wizard .pcw-glass-option:disabled {
    opacity: .45;
    cursor: not-allowed !important;
}

#pcw-wizard .pcw-glass-option.is-disabled:hover,
#pcw-wizard .pcw-glass-option:disabled:hover {
    border-color: var(--pcw-line) !important;
    background: #fff !important;
}

#pcw-wizard .pcw-glass-option.is-disabled .pcw-radio-dot,
#pcw-wizard .pcw-glass-option:disabled .pcw-radio-dot {
    background: #fff !important;
    border-color: var(--pcw-line) !important;
}

#pcw-wizard .pcw-glass-option.is-disabled .pcw-radio-dot::after,
#pcw-wizard .pcw-glass-option:disabled .pcw-radio-dot::after {
    display: none !important;
}


/* =========================================================
   FIX V5: EXPANSIÓN CONDICIONAL (SOLO CON IMAGEN)
   ========================================================= */

/* 1. Solo aumentamos el tamaño de la tarjeta cuando YA HAY una imagen cargada (.has-image) */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image {
    max-height: 690px !important;
    aspect-ratio: 475 / 690 !important;
}

/* 2. Expandimos el bloque inferior solo cuando la imagen está cargada */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image .pcw-preview-meta {
    height: 90px !important;
    min-height: 90px !important;
    flex: 0 0 90px !important;
}

/* 3. Estilo del botón debajo del texto (siempre igual a "Seleccionar archivo") */
.pcw-preview-meta__change {
    position: static !important;
    transform: none !important;
    
    min-height: 32px !important;
    padding: 8px 18px !important;
    background-color: #891a1a !important;
    color: #fff !important;
    border: none !important;
    font-size: 9px !important;
    border-radius: 999px !important;
    margin: 10px auto 0 !important; /* Lo empuja justo debajo del texto */
}

/* Asegurar que el ícono de las flechas sea blanco */
.pcw-preview-meta__change svg {
    color: #fff !important;
}

/* 4. Ajustar el recuadro gris de fondo solo en estado con imagen */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image::before {
    inset: 20px 20px 110px !important; 
}

/* 5. Ajustes para móviles (condicionales) */
@media (max-width: 768px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image::before {
        inset: 16px 16px 106px !important;
    }
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image #pcw_preview_canvas {
        height: calc(100% - 90px) !important;
    }
}

@media (max-width: 480px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-1.has-image::before {
        inset: 12px 12px 102px !important;
    }
}


/* =========================================================
   LEYENDA LEGAL (DEBAJO DE LA TARJETA DE PREVIEW)
   ========================================================= */

/* 1. Quitamos el límite oculto de la tarjeta para que el texto pueda salir */
.pcw-preview-container.pcw-preview-card {
    overflow: visible !important;
    margin-bottom: 45px !important; /* Crea un espacio físico para que el texto no choque con otros elementos */
}

/* 2. Inyectamos el texto exactamente debajo del contenedor */
.pcw-preview-container.pcw-preview-card::after {
    content: "La previsualización es únicamente ilustrativa. El producto final puede presentar ligeras variaciones.";
    
    position: absolute;
    top: 100%; /* Lo empuja exactamente al borde inferior de la tarjeta blanca */
    left: 0;
    width: 100%;
    
    box-sizing: border-box;
    padding: 0 10px; /* Evita que el texto toque las orillas en pantallas pequeñas */
    margin-top: 14px; /* Separación entre la caja blanca y las letras */
    
    text-align: center;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #818586 !important; /* El mismo gris sutil de tus otros textos descriptivos */
    font-weight: 500 !important;
    
    pointer-events: none; /* Hace que el texto sea "transparente" a los clics para que no estorbe */
}

/* 3. Ajuste proporcional para que se vea igual de bien en móviles */
@media (max-width: 768px) {
    .pcw-preview-container.pcw-preview-card {
        margin-bottom: 35px !important;
    }
    .pcw-preview-container.pcw-preview-card::after {
        font-size: 10px !important;
        margin-top: 12px;
    }
}

/* =========================================================
   FIX: OCULTAR BOTÓN "CAMBIAR IMAGEN" EN FASE 2 Y 3
   ========================================================= */

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2 .pcw-preview-meta__change,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3 .pcw-preview-meta__change {
    display: none !important;
}


/* =========================================================
   FIX: ALINEAR TÍTULO "SUBE TU IMAGEN" CON BREADCRUMBS
   ========================================================= */

/* 1. Quitamos los márgenes superiores del contenedor de encabezados */
#pcw-wizard .pcw-phase-headings {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Mantenemos un margen inferior razonable para separar del indicador de fases */
    margin-bottom: 24px !important; 
}

/* 2. Aseguramos que el contenedor general del wizard tampoco tenga padding superior */
#pcw-wizard {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. Mantenemos el interior del ícono blanco para que no se transparente */
#pcw-wizard .pcw-phase-heading__icon {
    background-color: #ffffff !important;
}



/* =========================================================
   COLAPSAR WIDGETS VACÍOS ARRIBA DEL WIZARD
   -----------------------------------------------------------------------
   Agregar al final de pcw-wizard.css
   -----------------------------------------------------------------------
   El título "Enmarcado Personalizado" y el precio nativo ya estaban
   ocultos/vacíos, pero sus contenedores de Elementor seguían
   reservando su propio margen/padding — eso era el espacio extra
   entre el inicio del preview y el título del wizard.
   ========================================================= */

body.single-product:has(#pcw-wizard) .elementor-widget-woocommerce-product-title,
body.single-product:has(#pcw-wizard) .elementor-widget-woocommerce-product-price {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}



/* =========================================================
   NAVEGACIÓN IZQUIERDA/DERECHA — FAMILIAS DE MARCO
   -----------------------------------------------------------------------
   Agregar al final de pcw-wizard.css
   ========================================================= */

#pcw-wizard .pcw-frame-families-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

#pcw-wizard .pcw-frame-families {
    flex: 1 1 auto;
    min-width: 0;
}

#pcw-wizard .pcw-frame-families-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--pcw-line, #bec1c0);
    border-radius: 50%;
    background: #fff;
    color: var(--pcw-text, #231f20);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

#pcw-wizard .pcw-frame-families-nav svg {
    width: 16px;
    height: 16px;
}

#pcw-wizard .pcw-frame-families-nav[hidden] {
    display: none !important;
}

/* =========================================================
   ALINEAR ANCHO — VIDRIO igual que MARÍA LUISA (versión reforzada)
   -----------------------------------------------------------------------
   REEMPLAZA el bloque anterior "pcw-alinear-vidrio-ml.css" por este.
   ========================================================= */

/* Los 2 contenedores padre deben compartir EXACTAMENTE el mismo ancho
   y posición — sin padding/margen que los desalinee entre sí. */
#pcw-wizard .pcw-ml-picker,
#pcw-wizard .pcw-glass-picker {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#pcw-wizard .pcw-extra-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Los 2 grupos de botones/tarjetas deben tener el mismo ancho total */
#pcw-wizard .pcw-ml-options,
#pcw-wizard .pcw-glass-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* María Luisa normalmente tiene 2 columnas (Sin/Con) — la restauramos
   aquí, ya que la regla de arriba la resetea a 1 columna por error. */
#pcw-wizard .pcw-ml-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Cada botón/tarjeta individual debe ocupar el 100% de su columna,
   sin ningún max-width ni flex-basis que lo achique. */
#pcw-wizard .pcw-ml-option,
#pcw-wizard .pcw-glass-option {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* =========================================================
   FIX: ALINEAR TÍTULO EXACTAMENTE CON LA TARJETA DE PREVIEW
   ========================================================= */

/* 1. Forzamos a cero cualquier margen que esté empujando el título hacia abajo */
#pcw-wizard .pcw-phase-headings {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Por precaución, colapsamos espacios vacíos nativos de WooCommerce 
      (como precios o valoraciones ocultas) que a veces hacen "bulto" invisible arriba del título */
.summary.entry-summary > .price,
.summary.entry-summary > .woocommerce-product-rating,
.summary.entry-summary > .woocommerce-product-details__short-description:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 3. Aseguramos que el contenedor principal no tenga rellenos extraños */
#pcw-wizard {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   FORZAR ANCHO IGUAL EN TARJETAS DE TAMAÑO
   -----------------------------------------------------------------------
   Agregar al final de pcw-wizard.css
   -----------------------------------------------------------------------
   La tarjeta "8x10" se estaba ensanchando más que sus vecinas del mismo
   renglón — esto pasa cuando el grid permite que el contenido de una
   tarjeta empuje su columna más ancha que las demás. Forzamos con
   !important que todas midan exactamente lo mismo.
   ========================================================= */

#pcw-wizard .pcw-size-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
}

#pcw-wizard .pcw-size-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#pcw-wizard .pcw-size-card__inches,
#pcw-wizard .pcw-size-card__cm {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}




/* =========================================================
   ALINEAR TARJETAS DE TAMAÑO ENTRE RENGLONES
   -----------------------------------------------------------------------
   Agregar al final de pcw-wizard.css
   -----------------------------------------------------------------------
   "8x10" (renglón 1) no alineaba su borde izquierdo con "11x14"
   (renglón 2) — esto pasa cuando alguna tarjeta tiene un margen propio
   que rompe la cuadrícula. Forzamos margin:0 en todas, para que solo
   el "gap" del grid controle el espacio entre ellas (así todas las
   columnas quedan exactamente alineadas entre renglones).
   ========================================================= */
 
#pcw-wizard .pcw-size-card {
    margin: 0 !important;
}
 
#pcw-wizard .pcw-size-grid {
    justify-items: stretch !important;
    justify-content: start !important;
}


#pcw-wizard {
    margin-top: -20px !important;
}
 
/* =========================================================
   NOTIFICACIÓN ESTILIZADA (reemplaza el alert() nativo)
   ========================================================= */

.pcw-toast-container {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: none;
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
    box-sizing: border-box;
}

.pcw-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    background: #891a1a;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(137, 26, 26, .28);

    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}

.pcw-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pcw-toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 13px;
    font-weight: 800;
}

.pcw-toast__text {
    flex: 1 1 auto;
}

@media (max-width: 480px) {
    .pcw-toast-container {
        bottom: 16px;
        padding: 0 12px;
    }

    .pcw-toast {
        font-size: 12px;
        padding: 12px 14px;
    }
}
/* =========================================================
   EFECTOS :hover — SOLO PARA DISPOSITIVOS CON MOUSE REAL
   -----------------------------------------------------------------------
   En pantallas táctiles (celular/tablet), Safari (iOS) y otros
   navegadores tratan el primer toque sobre un elemento con :hover como
   "activar el hover", y solo el SEGUNDO toque cuenta como clic real —
   por eso hacía falta doble clic para elegir un marco. Esta media
   query hace que estos efectos SOLO existan en dispositivos que de
   verdad tienen mouse, y en pantallas táctiles no aparezcan nunca, sin
   perder el efecto visual bonito para quien sí navega con escritorio.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
    #pcw-wizard .pcw-size-card:hover {
        transform: translateY(-1px);
        border-color: var(--pcw-red) !important;
    }

    #pcw-wizard .pcw-frame-family:hover {
        transform: translateY(-1px);
    }

    #pcw-wizard .pcw-frame-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 14px rgb(0 0 0 / 8%);
    }

    #pcw-wizard .pcw-frame-families-nav:hover {
        border-color: var(--pcw-red, #891a1a);
        color: var(--pcw-red, #891a1a);
        background: rgba(137, 26, 26, .05);
    }

    .pcw-preview-meta__change:hover {
        background: #891a1a;
        color: #fff;
    }
}


/* =========================================================
   QUITAR LA OPCIÓN "CUADRO" DE ORIENTACIÓN
   -----------------------------------------------------------------------
   Agregar al final de pcw-wizard.css
   ========================================================= */

#pcw-wizard [data-pcw-orientation="square"] {
    display: none !important;
}

/* Con solo 2 tarjetas (Horizontal/Vertical), pasamos de 3 a 2 columnas
   para que no quede un espacio vacío donde estaba "Cuadro". */
#pcw-wizard .pcw-orientation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* =========================================================
   MÓVIL — ENCABEZADO Y FASES ANTES DEL PREVIEW
   -----------------------------------------------------------------------
   El JS mueve el preview dentro de #pcw-wizard, justo después del
   indicador de fases. Esto solo aplica hasta 768px.
   ========================================================= */
@media (max-width: 768px) {

    /* El shortcode original queda vacío cuando el preview se mueve. */
    body.pcw-mobile-preview-layout .pcw-preview-origin-empty {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Un poco menos de espacio entre texto y fases. */
    #pcw-wizard .pcw-phase-headings {
        margin-bottom: 18px !important;
    }

    /* Separación clara antes del preview. */
    #pcw-wizard .pcw-phase-indicator {
        margin-bottom: 18px !important;
    }

    /*
     * Preview centrado dentro de la columna del configurador.
     * Conservamos sus reglas de tamaño existentes.
     */
    #pcw-wizard .pcw-preview-container.pcw-preview-card.pcw-preview-mobile-inline {
        display: flex !important;
        width: calc(100% - 24px) !important;
        max-width: 340px !important;
        margin: 0 auto 30px !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    /*
     * Los controles empiezan debajo del preview y ocupan el ancho
     * normal del wizard.
     */
    #pcw-wizard .pcw-preview-mobile-inline + .pcw-phase {
        margin-top: 0 !important;
    }
}

@media (max-width: 380px) {
    #pcw-wizard .pcw-preview-container.pcw-preview-card.pcw-preview-mobile-inline {
        width: calc(100% - 16px) !important;
        max-width: 320px !important;
    }
}

/* =========================================================
   MÓVIL — MÁS ESPACIO ANTES DE "AJUSTE DE ENCUADRE"
   ========================================================= */
@media (max-width: 768px) {
    #pcw-wizard .pcw-phase--image .pcw-ajuste-encuadre {
        margin-top: 18px !important;
    }
}

/* =========================================================
   IPAD MINI 768 × 1024 — CENTRADO REAL AL VIEWPORT
   -----------------------------------------------------------------------
   No depende del ancho ni de las columnas de Elementor.
   El JS calcula la diferencia exacta entre el centro del wizard y el
   centro de la pantalla y la guarda en --pcw-ipad-mini-shift-x.
   ========================================================= */
@media (width: 768px) and (orientation: portrait) {

    body.pcw-ipad-mini-768 #pcw-wizard.pcw-ui-v2 {
        /*
         * 572px es el ancho de diseño original del configurador.
         * Dejamos 24px de aire por lado si el viewport fuese menor.
         */
        width: calc(100vw - 48px) !important;
        max-width: 572px !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        position: relative !important;
        left: 0 !important;

        transform: translateX(
            var(--pcw-ipad-mini-shift-x, 0px)
        ) !important;

        box-sizing: border-box !important;
    }

    body.pcw-ipad-mini-768 #pcw-wizard .pcw-scrollbox {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.pcw-ipad-mini-768
    #pcw-wizard
    .pcw-preview-container.pcw-preview-card.pcw-preview-mobile-inline {
        width: calc(100% - 24px) !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =========================================================
   PCW — ZOOM DE INSPECCIÓN + PREVIEW HD
   Fases 2 y 3
   ---------------------------------------------------------
   Este bloque se agrega AL FINAL para no borrar estilos
   existentes. Reactiva únicamente la lupa visual.
   ========================================================= */

/*
 * El transform se controla desde JS mediante una variable CSS.
 * Esto sobrescribe de forma segura los "transform:none !important"
 * históricos sin eliminar esas reglas.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__canvas,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__canvas {
    transform: var(--pcw-preview-inspect-transform, none) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-y !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__canvas.is-zoomed,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__canvas.is-zoomed {
    cursor: grab !important;
    touch-action: none !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__canvas.is-dragging,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__canvas.is-dragging {
    cursor: grabbing !important;
}

/*
 * En escritorio mantenemos la interfaz discreta.
 * En móvil los controles crecen para que sean fáciles de usar con el dedo.
 */
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__controls,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__label,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__label {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: #6f7475 !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__zoom,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__zoom {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px 46px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__zoom-button,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__zoom-button {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__zoom-value,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__zoom-value {
    display: block !important;
    min-width: 46px !important;
    font-size: 10px !important;
}

.pcw-preview-inspector__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__hint,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__hint {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
}

.pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
.pcw-preview-inspector__reset,
.pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
.pcw-preview-inspector__reset {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
}

/* Móvil: controles táctiles cómodos y preview amplio. */
@media (max-width: 768px) {
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector {
        gap: 12px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__viewport,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__viewport {
        height: min(112vw, 470px) !important;
        min-height: min(112vw, 470px) !important;
        max-height: 470px !important;
        padding: 8px !important;
        touch-action: pan-y !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__controls,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__controls {
        gap: 9px !important;
        padding: 0 2px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__label,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__label {
        font-size: 11px !important;
        text-align: center !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__zoom,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__zoom {
        grid-template-columns: 44px minmax(0, 1fr) 44px 48px !important;
        gap: 8px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__zoom-button,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__zoom-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 21px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    #pcw_preview_inspect_zoom,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    #pcw_preview_inspect_zoom {
        min-height: 44px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__zoom-value,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__zoom-value {
        font-size: 11px !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__hint,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__hint {
        font-size: 9px !important;
        text-align: left !important;
    }

    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-2
    .pcw-preview-inspector__reset,
    .pcw-preview-container.pcw-preview-card.pcw-preview-phase-3
    .pcw-preview-inspector__reset {
        min-height: 44px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }
}