/* Royal Alpaca — estilos comunes para las páginas de producto */

/* Estilos locales del área de producto MCD2301.
       Se mantienen dentro de esta sección para no modificar la plantilla general. */
    #ra-main-product-image { cursor: default !important; }
    #ra-product-gallery .product-gallery-item {
        height: auto !important;
        min-height: 0 !important;
    }
    #ra-product-gallery .product-gallery-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

/* NUEVO DISEÑO — SOLO COLUMNA DE INFORMACIÓN.
                                       La galería original y su programación de zoom NO se modifican. */
                                    .ra-info {
                                        max-width: 520px;
                                        margin: 0 auto;
                                        padding: .5rem 0 0 1.5rem;
                                        text-align: left;
                                    }
                                    .ra-info-title {
                                        margin: 0 0 .8rem;
                                        color: #222;
                                        font-size: 2.6rem;
                                        line-height: 1.16;
                                        font-weight: 500;
                                    }
                                    .ra-info-meta {
                                        color: #888;
                                        font-size: 1.4rem;
                                        margin-bottom: 1.8rem;
                                    }
                                    .ra-info-price {
                                        color: #222;
                                        font-size: 2.4rem;
                                        line-height: 1;
                                        font-weight: 600;
                                        margin-bottom: 2.4rem;
                                    }
                                    .ra-info-rule {
                                        border: 0;
                                        border-top: 1px solid #e5e5e5;
                                        margin: 0 0 2.3rem;
                                    }
                                    .ra-option {
                                        margin-bottom: 2.3rem;
                                    }
                                    .ra-option-head {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        gap: 15px;
                                        margin-bottom: 1.1rem;
                                    }
                                    .ra-option-label {
                                        color: #222;
                                        font-size: 1.4rem;
                                        font-weight: 600;
                                    }
                                    .ra-option-link {
                                        color: #555;
                                        font-size: 1.3rem;
                                        text-decoration: underline;
                                        background: none;
                                        border: 0;
                                        padding: 0;
                                        cursor: pointer;
                                    }
                                    .ra-colors, .ra-sizes {
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: 11px;
                                    }
                                    .ra-color {
                                        width: 38px;
                                        height: 38px;
                                        padding: 0;
                                        border-radius: 50%;
                                        border: 2px solid #fff;
                                        box-shadow: 0 0 0 1px #c8c8c8;
                                        cursor: pointer;
                                    }
                                    .ra-color.active {
                                        box-shadow: 0 0 0 2px #222;
                                    }
                                    .ra-color {
                                        background-position: center;
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                    }
                                    .ra-taupe { background-image: url("assets/images/colorcard/284.jpg"); }
                                    .ra-charcoal { background-image: url("assets/images/colorcard/403.jpg"); }
                                    .ra-black { background-image: url("assets/images/colorcard/500.jpg"); }
                                    .ra-deep-navy { background-image: url("assets/images/colorcard/AZ1660.jpg"); }

                                    .ra-size {
                                        min-width: 52px;
                                        height: 44px;
                                        border: 1px solid #d0d0d0;
                                        background: #fff;
                                        color: #222;
                                        font-size: 1.4rem;
                                        cursor: pointer;
                                    }
                                    .ra-size.active {
                                        background: #222;
                                        border-color: #222;
                                        color: #fff;
                                    }
                                    .ra-buy {
                                        display: grid;
                                        grid-template-columns: 130px minmax(0, 1fr);
                                        gap: 12px;
                                        margin-top: .4rem;
                                    }
                                    .ra-qty {
                                        height: 52px;
                                        display: grid;
                                        grid-template-columns: 38px 1fr 38px;
                                        border: 1px solid #ccc;
                                    }
                                    .ra-qty button {
                                        border: 0;
                                        background: #fff;
                                        color: #222;
                                        font-size: 2rem;
                                        cursor: pointer;
                                    }
                                    .ra-qty input {
                                        width: 100%;
                                        border: 0;
                                        background: #fff;
                                        text-align: center;
                                        font-size: 1.5rem;
                                    }
                                    .ra-cart {
                                        height: 52px;
                                        border: 1px solid #2869a5;
                                        background: #2869a5;
                                        color: #fff;
                                        font-size: 1.4rem;
                                        font-weight: 600;
                                        letter-spacing: .07em;
                                        cursor: pointer;
                                    }
                                    .ra-cart:hover {
                                        background: #205785;
                                        border-color: #205785;
                                    }
                                    .ra-benefits {
                                        display: grid;
                                        grid-template-columns: repeat(3, 1fr);
                                        gap: 0;
                                        margin-top: 2.2rem;
                                        padding-top: 2rem;
                                        border-top: 1px solid #e5e5e5;
                                    }
                                    .ra-benefit {
                                        padding: 0 10px;
                                        color: #555;
                                        font-size: 1.2rem;
                                        line-height: 1.45;
                                        text-align: center;
                                    }
                                    .ra-benefit + .ra-benefit {
                                        border-left: 1px solid #e5e5e5;
                                    }
                                    .ra-benefit strong {
                                        display: block;
                                        color: #222;
                                        font-weight: 600;
                                    }

                                    /* Popup elegante para Color Card y Size Guide */
                                    .ra-popup-overlay {
                                        position: fixed;
                                        inset: 0;
                                        z-index: 99999;
                                        display: none;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 24px;
                                        background: rgba(0, 0, 0, .58);
                                        backdrop-filter: blur(3px);
                                    }
                                    .ra-popup-overlay.open {
                                        display: flex;
                                    }
                                    .ra-popup-box {
                                        position: relative;
                                        width: min(1100px, 94vw);
                                        height: min(820px, 90vh);
                                        background: #fff;
                                        border-radius: 10px;
                                        box-shadow: 0 20px 60px rgba(0,0,0,.28);
                                        overflow: hidden;
                                    }
                                    .ra-popup-header {
                                        height: 62px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        padding: 0 18px 0 24px;
                                        border-bottom: 1px solid #e8e8e8;
                                        background: #fff;
                                    }
                                    .ra-popup-title {
                                        margin: 0;
                                        color: #222;
                                        font-size: 1.8rem;
                                        font-weight: 600;
                                    }
                                    .ra-popup-close {
                                        width: 44px;
                                        height: 44px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        border: 0;
                                        border-radius: 50%;
                                        background: #f2f2f2;
                                        color: #111;
                                        font-size: 3rem;
                                        line-height: 1;
                                        cursor: pointer;
                                    }
                                    .ra-popup-close:hover {
                                        background: #222;
                                        color: #fff;
                                    }
                                    .ra-popup-frame {
                                        display: block;
                                        width: 100%;
                                        height: calc(100% - 62px);
                                        border: 0;
                                        background: #fff;
                                    }
                                    body.ra-popup-lock {
                                        overflow: hidden;
                                    }
                                    @media (max-width: 767px) {
                                        .ra-popup-overlay { padding: 10px; }
                                        .ra-popup-box {
                                            width: 100%;
                                            height: 94vh;
                                            border-radius: 8px;
                                        }
                                        .ra-popup-header {
                                            height: 56px;
                                            padding-left: 16px;
                                            padding-right: 10px;
                                        }
                                        .ra-popup-frame {
                                            height: calc(100% - 56px);
                                        }
                                        .ra-popup-close {
                                            width: 42px;
                                            height: 42px;
                                        }
                                    }

                                    @media (max-width: 767px) {
                                        .ra-info {
                                            max-width: none;
                                            padding: 2.5rem 0 0;
                                        }
                                        .ra-info-title { font-size: 2.3rem; }
                                        .ra-buy { grid-template-columns: 110px minmax(0, 1fr); }
                                        .ra-benefits { grid-template-columns: 1fr; }
                                        .ra-benefit { text-align: center; padding: 10px 0; }
                                        .ra-benefit + .ra-benefit {
                                            border-left: 0;
                                            border-top: 1px solid #eee;
                                        }
                                    }