.ovd-widget{
    margin: 12px 0;
}
/* Margen lateral para que las marcas de los extremos (0 % / 100 %) no se
   salgan del bloque: marcas y barra comparten el mismo recorrido */
.ovd-widget__scale{
    position: relative;
    padding: 0 14px;
}
.ovd-widget__marks{
    position: relative;
    height: 22px;
}
.ovd-widget__marks span{
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #52574E;
    white-space: nowrap;
}
.ovd-widget__marks span i{
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(82,87,78,.4);
}
.ovd-widget__bar{
    position: relative;
    height: 12px;
    margin-top: 6px;
    background-color: rgba(29,78,43,.1);
    border-radius: 9999px;
}
.ovd-widget__bar-fill{
    height: 100%;
    background-color: #1D4E2B;
    border-radius: 9999px;
    transition: width .3s ease;
}
.ovd-widget__bar-dot{
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background-color: #1D4E2B;
    border: 2px solid #FBFAF6;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transform: translate(-50%,-50%);
}
.ovd-widget__hint{
    margin: 10px 0 0;
    font-size: 12px;
    color: #52574E;
    text-align: center;
}
.ovd-widget__hint strong{
    color: #0B140D;
}
.ovd-widget__hint-percent{
    color: #1D4E2B !important;
}

.ovd-table{
    margin-top: 16px;
    padding: 21px;
    border: 1px solid #DCD7CD;
    border-radius: 14px;
}
.ovd-table__title{
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #110F0E;
}
.ovd-table__list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Mobile: todos los tramos en una fila (Figma); desde 576px, ancho fijo y salto de línea */
.ovd-table__item{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 2px;
    background-color: #F1EFEE;
    border: 1px solid #E8E5E3;
    border-radius: 10px;
    text-align: center;
}
.ovd-table__item.is-reached{
    background-color: rgba(29,78,43,.08);
    border-color: rgba(29,78,43,.4);
}
.ovd-table__amount{
    font-size: 10px;
    font-weight: 400;
    line-height: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #52574E;
}
.ovd-table__label{
    font-size: 11px;
    color: #52574E;
}
.ovd-table__percent{
    font-size: 16px;
    font-weight: 800;
    color: #1D4E24;
}
.ovd-table__note{
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .24px;
    color: #544B45;
}

/* Variante "checkout" (resumen del pedido): línea con el ahorro aplicado */
.ovd-widget-root--checkout .ovd-widget{
    margin: 0;
}
.ovd-saving{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 6px 12px;
    background-color: #DAE4DA;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #1D4E24;
}
.ovd-saving__amount{
    white-space: nowrap;
}

@media(min-width:576px){
    .ovd-table{ padding: 16px; }
    .ovd-table__title{ margin-bottom: 12px; font-size: 14px; font-weight: 600; line-height: inherit; }
    .ovd-table__item{ flex: 0 1 90px; padding: 8px 4px; }
    .ovd-table__amount{ font-size: 11px; line-height: inherit; letter-spacing: .03em; }
    .ovd-table__percent{ font-size: 18px; }
    .ovd-table__note{ margin-top: 12px; font-size: 11px; line-height: inherit; letter-spacing: normal; }
}