:root{
    --sf-primary:#096c63;
    --sf-danger:#FF0000;
    --sf-border:#e6e7e9;
    --sf-muted:#6b7280;
    --sf-card:#ffffff;
}

.amz-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:8px 12px;
    overflow-x:hidden; /* evita cualquier scroll horizontal accidental */
}

.amz-title{
    font-size:24px;
    font-weight:600;
    line-height:1.25;
    margin:6px 0 2px 0;
}
.amz-subrow{
    display:flex;
    align-items:center;
    gap:10px;
    color:#111;
}
.amz-subrow .muted{
    color:var(--sf-muted)
}

/* ============== GRID PRINCIPAL ============== */
/* Clave: usar minmax(0,1fr) para permitir que el centro se encoja y no “empuje” el layout */
.amz-grid{
    display:grid;
    grid-template-columns:96px minmax(0,1fr) 340px;
    gap:24px;
    align-items:start;
}
.amz-grid > *{
    min-width:0;
} /* seguridad extra para que los hijos puedan encogerse */

@media (max-width: 1024px){
    .amz-grid{
        grid-template-columns:84px minmax(0,1fr) 320px;
    }
}
@media (max-width: 900px){
    .amz-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
}

/* ============== COL IZQUIERDA (miniaturas) ============== */
.amz-left{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.amz-th{
    width:80px;
    height:80px;
    border:1px solid var(--sf-border);
    border-radius:8px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s,box-shadow .15s;
}
.amz-th:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}
@media (max-width:900px){
    .amz-left{
        flex-direction:row;
        overflow-x:auto;
        padding-bottom:4px
    }
    .amz-th{
        width:72px;
        height:72px
    }
}

/* ============== COL CENTRO (héroe) ============== */
.amz-center{
    min-width:0;            /* clave para que el grid-item pueda encogerse */
    overflow:hidden;        /* cinturón de seguridad extra */
}

.amz-hero{
    background:#fff;
    border-radius:12px;
    border:1px solid var(--sf-border);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
    width:100%;
    overflow:hidden;        /* evita desbordes si llega una img enorme */
}
.amz-hero img,
#producto_photo{
    display:block;
    max-width:100%;
    width:100%;             /* desktop: ocupar ancho del contenedor */
    height:auto;
    max-height:520px;
    object-fit:contain;     /* siempre contenido, nunca estira el div */
    border-radius:12px;
}

.amz-variations{
    margin-top:14px
}
.amz-section{
    margin-top:16px
}
.amz-h3{
    color:var(--sf-primary);
    font-size:18px;
    font-weight:600;
    margin:0 0 6px 0;
}
.amz-p{
    font-size:15px;
    color:#1c1c1c!important;
    margin:0 0 8px 0;
}
.amz-alert{
    background:var(--sf-danger);
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* ============== BUYBOX DERECHA ============== */
.amz-buybox{
    position:sticky;
    top:12px;
    background:var(--sf-card);
    border:1px solid var(--sf-border);
    border-radius:12px;
    box-shadow:0 10px 36px rgba(0,0,0,.06);
    padding:16px;
}
@media (max-width:900px){
    .amz-buybox{
        position:static
    }
}
.amz-price{
    color:var(--sf-primary);
    font-size:28px;
    font-weight:800;
    margin:0;
}
.amz-availability{
    color:var(--sf-primary);
    font-weight:700;
    margin:6px 0;
}
.amz-line{
    font-size:16px;
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 0;
}
.amz-note{
    background:var(--sf-danger);
    color:#fff;
    font-weight:700;
    text-align:center;
    padding:6px;
    border-radius:6px;
}
.amz-links a{
    color:var(--sf-primary);
    cursor:pointer
}
.amz-links a:hover{
    text-decoration:underline
}
.amz-logos{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    flex-wrap:wrap
}

/* ============== ZONA INFERIOR ============== */
.amz-bottom{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:24px;
    margin-top:24px;
}
@media (max-width:1100px){
    .amz-bottom{
        grid-template-columns:1fr
    }
}
.amz-card{
    background:#fff;
    border:1px solid var(--sf-border);
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.04);
    padding:14px;
}
.amz-divider{
    height:1px;
    background:var(--sf-border);
    border:0;
    margin:16px 0;
}

/* utilidades */
.sr{
    display:flex;
    align-items:center;
    gap:8px
}
.muted{
    color:var(--sf-muted)
}

/* ============== OPTIMIZACIÓN MÓVIL (alto controlado del héroe) ============== */
@media (max-width: 900px){
    .amz-center{
        min-width:0;
        overflow:hidden;
    }

    .amz-hero{
        width:100%;
        /* altura controlada para evitar que imágenes verticales “estiren” la vista */
        height:60vh;   /* fallback */
        height:60dvh;  /* navegadores modernos */
        height:60svh;  /* iOS Safari */
        min-height:300px;
        max-height:70svh;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    /* La imagen se adapta al alto del contenedor sin deformarse */
    .amz-hero img,
    #producto_photo{
        height:100%;
        width:auto;          /* prioridad al alto en móvil */
        max-width:100%;
        object-fit:contain;
        border-radius:12px;
        display:block;
    }
}

/* Que el carrusel crezca según el contenido (evita “cortar” el fondo de la card) */
.sf-row--scroll{
    height:auto !important;
}

/* Asegura que TODO el contenido quede dentro del borde redondeado */
.sf-card{
    box-sizing:border-box;
    overflow:hidden;
}

/* Aire dentro del cuerpo y en cuotas */
.sf-body{
    padding:12px 14px 18px 14px !important;
}
.sf-cuotas{
    margin:0 !important;
    line-height:1.25;
}


.promo-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    line-height:1;
    font-weight:800;
    font-size:13.5px;
    letter-spacing:.2px;
    color:#ffffff;
    background:linear-gradient(90deg,#12b3a8,#0ea39a);
    box-shadow:0 8px 18px rgba(16,185,129,.25), inset 0 0 0 1px rgba(255,255,255,.22);
    vertical-align:middle;
    margin-left:8px;  /* separa del título */
    overflow:hidden;
}
.promo-badge svg{
    width:14px;
    height:14px;
    flex:0 0 14px;
    color:#ffffff;
    opacity:.95
}
/* Brillo sutil que recorre la pastilla */
.promo-badge::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 20%, transparent 40%);
    transform:translateX(-120%);
    animation:promo-shine 2.4s ease-in-out infinite;
}
@keyframes promo-shine{
    60%{
        transform:translateX(140%);
    }
    100%{
        transform:translateX(140%);
    }
}

/* Variante compacta (por si la querés más chica) */
.promo-badge.sm{
    padding:4px 9px;
    font-size:12.5px
}


.amz-line{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--sf-border);
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  max-width:340px;
  margin:10px 0;
}

.amz-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#f6f7f9;
}

.amz-icon img{
  height:22px;
  width:auto;
  object-fit:contain;
}

.amz-alert{
  font-size:15px;
  color:#111;
  font-weight:600;
}

.amz-alert b{
  color: #ffffff;
  font-size:16px;
}