/* =========================================================
   producto_detalle.css (PDP premium)
   - Compatible con el HTML/clases del nuevo producto.php
   - Diseño tipo ecommerce (media izquierda, info derecha)
========================================================= */

/* Base */
.pdp {

    box-sizing:                 border-box;
    padding:                    22px 0;

}

.pdp * {

    box-sizing:                 border-box;

}

.pdp a {

    color:                      inherit;
    text-decoration:            none;

}

.pdp a:hover {

    text-decoration:            underline;

}

/* Breadcrumb */
.pdp_breadcrumb {

    align-items:                center;
    color:                      var( --texto_secundario, #6b7280 );
    display:                    flex;
    flex-wrap:                  wrap;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  0.95rem;
    gap:                        6px;
    margin:                     0 auto 16px;
    max-width:                  1280px;
    padding:                    0 16px;

}

.pdp_breadcrumb .sep {

    opacity:                    .6;

}

.pdp_breadcrumb a {

    color:                      var( --texto_principal, #111827 );

}

.pdp_breadcrumb .actual {

    color:                      var( --texto_principal, #111827 );
    font-weight:                600;

}

/* Grid layout */
.pdp_grid {

    display:                    grid;
    gap:                        18px;
    margin:                     0 auto;
    max-width:                  1280px;
    padding:                    0 16px;
    width:                      100%;

}

/* Mobile first */
.pdp_media,
.pdp_info {

    background:                 var( --fondo_claro, #ffffff );
    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              14px;
    box-shadow:                 0 10px 30px rgba(0,0,0,.06);
    padding:                    14px;

}

/* =========================================
   LEFT: MEDIA
========================================= */

/* Stage */
.media_stage {

    position:                   relative;

}

.stage_box {

    align-items:                center;
    background:                 #ffffff;
    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              12px;
    display:                    flex;
    justify-content:            center;
    overflow:                   hidden;
    position:                   relative;
    width:                      100%;

}

/* Ratio tipo Amazon (cuadrado adaptable) */
.stage_box::before {

    content:                    "";
    display:                    block;
    padding-top:                100%;

}

.stage_box > * {

    position:                   absolute;

}

.stage_main {

    height:                     100%;
    left:                       0;
    object-fit:                 contain;
    top:                        0;
    width:                      100%;

}

.stage_fallback {

    align-items:                center;
    color:                      var( --texto_secundario, #6b7280 );
    display:                    flex;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    justify-content:            center;
    inset:                      0;

}

.stage_nav{
    align-items:                center;
    background:                 rgba(0,0,0,.35);
    border:                     none;
    border-radius:              999px;
    color:                      #fff;
    cursor:                     pointer;
    display:                    inline-flex;
    font-size:                  22px;
    height:                     42px;
    justify-content:            center;
    line-height:                1;
    opacity:                    .85;
    transition:                 opacity .15s ease;
    width:                      42px;
    z-index:                    2;
}

.stage_nav:hover{
    
    opacity:                    1;
    
}

.stage_prev{
    
    left:                       12px;
    top:                        50%;
    transform:                  translateY( -50% );
    
}

.stage_next{
    
    right:                      12px;
    top:                        50%;
    transform:                  translateY( -50% );
    
}

.stage_video {
    
    background:                 #000;
    height:                     100%;
    left:                       0;
    object-fit:                 contain;
    top:                        0;
    width:                      100%;
    
}


/* Thumbs */
.media_thumbs {

    display:                    grid;
    gap:                        10px;
    grid-auto-flow:             column;
    grid-auto-columns:          76px;
    margin-top:                 12px;
    overflow-x:                 auto;
    padding-bottom:             2px;
    scroll-snap-type:           x mandatory;

}

.media_thumbs::-webkit-scrollbar {

    height:                     8px;

}

.media_thumbs::-webkit-scrollbar-thumb {

    background:                 rgba(0,0,0,.12);
    border-radius:              999px;

}

.thumb {

    background:                 #fff;
    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              12px;
    cursor:                     pointer;
    display:                    flex;
    height:                     76px;
    overflow:                   hidden;
    padding:                    0;
    position:                   relative;
    scroll-snap-align:          start;
    transition:                 border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    width:                      76px;

}

.thumb:hover {

    transform:                  translateY(-1px);
    box-shadow:                 0 10px 20px rgba(0,0,0,.08);

}

.thumb.is-active {

    border-color:               var( --idx-accent, var( --fondo_header, #111827 ) );
    box-shadow:                 0 0 0 2px rgba(0,0,0,.06);

}

.thumb img {

    height:                     100%;
    object-fit:                 cover;
    width:                      100%;

}

.thumb_video {

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

}

.thumb_video .play {

    align-items:                center;
    background:                 rgba(0,0,0,.6);
    border-radius:              999px;
    color:                      #fff;
    display:                    flex;
    font-size:                  14px;
    height:                     28px;
    justify-content:            center;
    left:                       50%;
    line-height:                1;
    padding-left:               2px;
    position:                   absolute;
    top:                        50%;
    transform:                  translate(-50%, -50%);
    width:                      28px;

}

.thumb_video .txt {

    bottom:                     6px;
    color:                      rgba(0,0,0,.65);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  12px;
    font-weight:                600;
    position:                   absolute;

}

/* Color dots (selector visual) */
.media_colors {

    margin-top:                 16px;

}

.media_colors_title {

    color:                      var( --texto_principal, #111827 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;
    font-weight:                700;
    margin-bottom:              10px;

}

.media_colors_row {

    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        10px;

}

.color_dot {

    border:                     2px solid rgba(0,0,0,.15);
    border-radius:              999px;
    cursor:                     pointer;
    height:                     32px;
    padding:                    0;
    transition:                 transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    width:                      32px;

}

.color_dot:hover {

    transform:                  scale(1.06);

}

.color_dot:focus {

    outline:                    none;
    box-shadow:                 0 0 0 4px rgba(0,0,0,.08);

}

/* =========================================
   RIGHT: INFO
========================================= */

.pdp_info {

    display:                    flex;
    flex-direction:             column;
    gap:                        14px;

}

/* Top */
.info_top {

    display:                    flex;
    flex-direction:             column;
    gap:                        10px;

}

.badges {

    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        8px;

}

.badge {

    align-items:                center;
    border-radius:              999px;
    display:                    inline-flex;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  12px;
    font-weight:                700;
    padding:                    6px 10px;
    white-space:                nowrap;

}

.badge_dest {

    background:                 rgba(255, 196, 0, .14);
    color:                      #7a5a00;

}

.badge_new {

    background:                 rgba(0, 170, 132, .12);
    color:                      #0a6a57;

}

.badge_mode {

    background:                 rgba(0,0,0,.06);
    color:                      rgba(0,0,0,.70);

}

.title {

    color:                      var( --texto_principal, #111827 );
    font-family:                var( --fuente_menu, "Montserrat", sans-serif );
    font-size:                  1.35rem;
    font-weight:                700;
    line-height:                1.2;
    margin:                     0;

}

.subline {

    color:                      var( --texto_secundario, #6b7280 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;

}

/* Cards */
.price_card,
.options_card,
.desc_card,
.vol_card {

    background:                 #ffffff;
    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              14px;
    padding:                    14px;

}

.price_rows {

    display:                    grid;
    gap:                        10px;

}

.price_old,
.price_now {

    align-items:                baseline;
    display:                    flex;
    justify-content:            space-between;
    gap:                        12px;

}

.price_old .label,
.price_now .label {

    color:                      var( --texto_secundario, #6b7280 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  0.95rem;

}

.price_old .value {

    color:                      rgba(0,0,0,.55);
    font-family:                var( --fuente_menu, "Montserrat", sans-serif );
    font-size:                  1.05rem;
    font-weight:                700;

}

.pdp_grid.has_promo .price_old .value {

    text-decoration:            line-through;

}

.price_now .value {

    color:                      var( --texto_principal, #111827 );
    font-family:                var( --fuente_menu, "Montserrat", sans-serif );
    font-size:                  1.55rem;
    font-weight:                800;

}

.price_na {

    color:                      var( --texto_secundario, #6b7280 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  1rem;

}

.promo_row {

    align-items:                center;
    display:                    flex;
    gap:                        10px;
    margin-top:                 10px;

}

.promo_badge {

    background:                 rgba(255, 0, 0, .10);
    border:                     1px solid rgba(255, 0, 0, .18);
    border-radius:              999px;
    color:                      rgba(170, 0, 0, .95);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  12px;
    font-weight:                800;
    padding:                    6px 10px;

}

.promo_hint {

    color:                      rgba(0,0,0,.70);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;

}

.qty_row {

    margin-top:                 12px;

}

.qty_label {

    color:                      var( --texto_principal, #111827 );
    display:                    grid;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;
    gap:                        8px;

}

.qty_input {

    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              12px;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  1rem;
    padding:                    10px 12px;
    width:                      100%;

}

.qty_input:focus {

    outline:                    none;
    box-shadow:                 0 0 0 4px rgba(0,0,0,.06);

}

/* Buttons */
.btn {

    align-items:                center;
    border:                     none;
    border-radius:              12px;
    cursor:                     pointer;
    display:                    inline-flex;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  1rem;
    font-weight:                700;
    gap:                        10px;
    justify-content:            center;
    padding:                    12px 14px;
    text-align:                 center;
    text-decoration:            none;
    transition:                 transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
    user-select:                none;
    width:                      100%;

}

.btn:hover {

    transform:                  translateY(-1px);
    box-shadow:                 0 12px 25px rgba(0,0,0,.10);
    text-decoration:            none;

}

.btn_primary {

    background:                 var( --idx-accent, var( --fondo_header, #111827 ) );
    color:                      var( --letras_header, #ffffff );

}

.btn_soft {

    background:                 rgba(0,0,0,.06);
    color:                      rgba(0,0,0,.78);

}

.btn_disabled {

    background:                 rgba(0,0,0,.10);
    color:                      rgba(0,0,0,.55);
    cursor:                     not-allowed;
    opacity:                    .9;

}

.buy_row {

    display:                    grid;
    gap:                        10px;
    margin-top:                 14px;

}

.price_actions {

    margin-top:                 14px;

}

/* Options */
.options_card {

    display:                    grid;
    gap:                        12px;

}

.opt {

    display:                    grid;
    gap:                        8px;

}

.opt_label {

    color:                      var( --texto_principal, #111827 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;
    font-weight:                700;

}

.opt_select {

    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              12px;
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  1rem;
    padding:                    10px 12px;
    width:                      100%;

}

.opt_select:focus {

    outline:                    none;
    box-shadow:                 0 0 0 4px rgba(0,0,0,.06);

}

.opt_note {

    color:                      var( --texto_secundario, #6b7280 );
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .92rem;
    line-height:                1.4;

}

/* Description */
.desc_card h2,
.vol_card h2 {

    color:                      var( --texto_principal, #111827 );
    font-family:                var( --fuente_menu, "Montserrat", sans-serif );
    font-size:                  1.05rem;
    font-weight:                800;
    margin:                     0 0 10px;

}

.desc_text {

    color:                      rgba(0,0,0,.78);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  0.98rem;
    line-height:                1.65;

}

/* Volumen */
.vol_rows {

    display:                    grid;
    gap:                        8px;

}

.vol_row {

    align-items:                center;
    border:                     1px solid var( --borde_medio, #e5e7eb );
    border-radius:              12px;
    display:                    grid;
    gap:                        8px;
    grid-template-columns:      1fr auto;
    padding:                    10px 12px;

}

.vol_range {

    color:                      rgba(0,0,0,.72);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;
    font-weight:                700;

}

.vol_val {

    color:                      rgba(0,0,0,.70);
    font-family:                var( --fuente_menu, "Poppins", sans-serif );
    font-size:                  .95rem;

}

/* =========================================
   Responsive
========================================= */
@media ( min-width: 992px ){

    .pdp_grid {

        grid-template-columns:      1.02fr .98fr;
        align-items:                start;

    }

    .pdp_media {

        position:                   sticky;
        top:                        90px;

    }

    .title {

        font-size:                  1.6rem;

    }

    .price_now .value {

        font-size:                  1.85rem;

    }

    .buy_row {

        grid-template-columns:      1.3fr .7fr;

    }

    .media_thumbs {

        grid-auto-columns:          86px;

    }

    .thumb {

        height:                     86px;
        width:                      86px;

    }

}

@media ( min-width: 1280px ){

    .pdp_grid {

        gap:                        22px;

    }

    .pdp_media,
    .pdp_info {

        padding:                    16px;

    }

    .stage_nav {

        height:                     46px;
        width:                      46px;

    }

}

@media ( max-width: 420px ){

    .media_thumbs {

        grid-auto-columns:          68px;

    }

    .thumb {

        height:                     68px;
        width:                      68px;

    }

}
.btn.is-disabled,
.btn:disabled{
    opacity:            .6;
    cursor:             not-allowed;
    pointer-events:     none;
}

/* =========================================
   PDP - EXTRA (ATRIBUTOS)
========================================= */
.pdp_extra{

    margin:                 18px auto 0;
    max-width:              1280px;
    padding:                0 16px;
    display:                grid;
    gap:                    18px;

}

.extra_card{

    background:             #ffffff;
    border:                 1px solid var( --borde_medio, #e5e7eb );
    border-radius:          14px;
    box-shadow:             0 10px 30px rgba(0,0,0,.06);
    padding:                14px;

}

.extra_card h2{

    color:                  var( --texto_principal, #111827 );
    font-family:            var( --fuente_menu, "Montserrat", sans-serif );
    font-size:              1.05rem;
    font-weight:            800;
    margin:                 0 0 10px;

}

.extra_note{

    color:                  var( --texto_secundario, #6b7280 );
    font-family:            var( --fuente_menu, "Poppins", sans-serif );
    font-size:              .92rem;
    line-height:            1.45;
    margin-bottom:          12px;

}

/* Informativos: tabla tipo specs */
.specs_table{

    display:                grid;
    gap:                    10px;

}

.spec_row{

    border:                 1px solid var( --borde_medio, #e5e7eb );
    border-radius:          12px;
    display:                grid;
    gap:                    8px;
    grid-template-columns:  220px 1fr;
    padding:                10px 12px;

}

.spec_k{

    color:                  rgba(0,0,0,.70);
    font-family:            var( --fuente_menu, "Poppins", sans-serif );
    font-size:              .95rem;
    font-weight:            800;

}

.spec_v{

    color:                  rgba(0,0,0,.78);
    font-family:            var( --fuente_menu, "Poppins", sans-serif );
    font-size:              .95rem;
    line-height:            1.55;

}

/* Con precio: lista alineada */
.parts_list{

    display:                grid;
    gap:                    10px;

}

.part_row{

    align-items:            center;
    border:                 1px solid var( --borde_medio, #e5e7eb );
    border-radius:          12px;
    display:                grid;
    gap:                    10px;
    grid-template-columns:  1fr auto;
    padding:                10px 12px;

}

.part_name{

    color:                  rgba(0,0,0,.78);
    font-family:            var( --fuente_menu, "Poppins", sans-serif );
    font-size:              .98rem;
    font-weight:            700;

}

.part_price{

    color:                  var( --texto_principal, #111827 );
    font-family:            var( --fuente_menu, "Montserrat", sans-serif );
    font-size:              1.05rem;
    font-weight:            900;
    white-space:            nowrap;

}

@media ( max-width: 640px ){

    .spec_row{
        grid-template-columns:  1fr;
    }

}
/* =========================================
   PDP - MÉTODOS DE PAGO
========================================= */
.pdp_payments{

    align-items:        center;
    display:            flex;
    flex-wrap:          wrap;
    gap:                10px;
    margin-top:         12px;

}
.pay_label{

    color:              var(--texto_secundario, #6b7280);
    font-family:        var(--fuente_menu, "Poppins", sans-serif);
    font-size:          .9rem;
    font-weight:        600;

}
.pay_icons{

    align-items:        center;
    display:            flex;
    gap:                10px;

}
.pay_icons img{

    height:             24px;
    opacity:            .6;
    filter:             grayscale(100%);
    transition:         opacity .15s ease, transform .15s ease, filter .15s ease;
    width:              auto;

}
.pay_icons img:hover{

    opacity:            1;
    filter:             grayscale(0%);
    transform:          translateY(-1px);

}
@media (max-width: 480px){
    
    .pay_icons img {
        
        height:         20px;
        
    }
    
}