body.oggi-ui .oggi-reco-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
body.oggi-ui .oggi-reco {
font-family: var(--oggi-letra);
color: var(--oggi-tinta);
font-weight: 500;
}
body.oggi-ui .oggi-reco .oggi-reco__titulo {
margin: 0 0 14px;
padding: 0;
font-family: var(--oggi-letra);
font-size: 20px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
text-align: left;
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco .oggi-reco__titulo b {
font-weight: 900;
font-variant-numeric: tabular-nums;
}
body.oggi-ui .oggi-reco__lista {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
body.oggi-ui .oggi-reco__lista--fila {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
body.oggi-ui .oggi-reco__item {
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
body.oggi-ui .oggi-reco__item::before,
body.oggi-ui .oggi-reco__item::marker {
content: none;
}
body.oggi-ui .oggi-reco-card {
--reco-fondo: #fff;
box-sizing: border-box;
height: 100%;
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
grid-template-areas: "foto info" "foto boton";
grid-template-rows: 1fr auto;
column-gap: 14px;
row-gap: 12px;
margin: 0;
padding: 14px;
border: 0;
border-radius: var(--oggi-r-tarjeta);
background: var(--reco-fondo);
font-family: var(--oggi-letra);
color: var(--oggi-tinta);
text-align: left;
}
body.oggi-ui .oggi-reco-card__foto {
grid-area: foto;
align-self: start;
display: block;
width: 88px;
height: 88px;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: var(--oggi-r-control);
background: #fff;
border: 0;
text-decoration: none;
}
body.oggi-ui .oggi-reco-card__foto img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: contain;
border-radius: 0;
box-shadow: none;
}
body.oggi-ui .oggi-reco-card__info {
grid-area: info;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
body.oggi-ui .oggi-reco-card__motivo {
display: inline-block;
max-width: 100%;
margin: 0 0 2px;
padding: 5px 24px 4px;
border-radius: var(--oggi-r-pildora);
background: var(--oggi-violeta-suave);
color: var(--oggi-violeta-hondo);
font-size: 11.5px;
font-weight: 800;
line-height: 1.25;
letter-spacing: .01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.oggi-ui .oggi-reco-card__nombre {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: var(--oggi-tinta);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
}
body.oggi-ui .oggi-reco-card__nombre:hover {
color: var(--oggi-violeta);
text-decoration: underline;
text-underline-offset: 2px;
}
body.oggi-ui .oggi-reco-card__nombre:focus-visible {
outline: 2px solid var(--oggi-violeta);
outline-offset: 1px;
}
body.oggi-ui .oggi-reco-card__precio {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
margin: 2px 0 0;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
body.oggi-ui .oggi-reco-card__lista {
color: var(--oggi-tachado);
font-size: 12.5px;
font-weight: 600;
text-decoration: line-through;
}
body.oggi-ui .oggi-reco-card__ahora {
color: var(--oggi-tinta);
font-size: 18px;
font-weight: 800;
text-decoration: none;
}
body.oggi-ui .oggi-reco-card__agregar {
grid-area: boton;
justify-self: start;
align-self: end;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
margin: 0;
padding: 0 18px 0 16px;
border: 0;
border-radius: var(--oggi-r-control);
background: var(--oggi-marca);
color: #fff;
font-family: var(--oggi-letra);
font-size: 14px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
text-decoration: none;
box-shadow: none;
transition: filter .15s ease;
}
body.oggi-ui .oggi-reco-card__agregar:hover {
background: var(--oggi-marca-hondo);
color: #fff;
}
body.oggi-ui :is(.oggi-reco-card__agregar, .oggi-reco-btn, .oggi-reco-panel__cerrar):focus {
outline: none;
}
body.oggi-ui .oggi-reco-card__agregar:focus-visible {
outline: none;
box-shadow: var(--oggi-foco-sobre-color);
}
body.oggi-ui .oggi-reco-card__agregar svg {
width: 1em;
height: 1em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
body.oggi-ui div.product > :is(.related, .upsells) .oggi-prodcard .oggi-prodcard__add {
font-size: 14px;
}
body.oggi-ui .oggi-reco-card--fila {
--reco-fondo: var(--oggi-lavanda);
border-radius: var(--oggi-r-caja);
grid-template-columns: 64px minmax(0, 1fr) auto;
grid-template-areas: "foto info boton";
grid-template-rows: auto;
align-items: center;
column-gap: 12px;
row-gap: 8px;
padding: 12px;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__foto {
width: 64px;
height: 64px;
align-self: center;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__info {
gap: 4px;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__nombre {
-webkit-line-clamp: 2;
font-size: 13.5px;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__ahora {
font-size: 16px;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__agregar {
align-self: center;
}
@container (max-width: 359px) {
body.oggi-ui .oggi-reco-card--fila {
grid-template-columns: 64px minmax(0, 1fr) auto;
grid-template-areas: "foto motivo motivo" "foto nombre nombre" "foto precio boton";
align-items: center;
row-gap: 4px;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__info {
display: contents;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__foto {
grid-row: 1 / -1;
align-self: start;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__motivo {
grid-area: motivo;
justify-self: start;
margin: 0;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__nombre {
grid-area: nombre;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__precio {
grid-area: precio;
margin: 4px 0 0;
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__agregar {
grid-area: boton;
margin: 4px 0 0;
min-height: 40px;
padding: 0 14px 0 12px;
font-size: 14px;
}
}
@container (max-width: 339px) {
body.oggi-ui .oggi-reco-card--fila {
grid-template-columns: 64px minmax(0, 1fr);
grid-template-areas: "foto motivo" "foto nombre" "foto precio" "foto boton";
}
body.oggi-ui .oggi-reco-card--fila .oggi-reco-card__agregar {
justify-self: start;
margin: 6px 0 0;
}
}
body.oggi-ui.single-product div.product > .oggi-reco--ficha {
margin: 36px 0 0;
clear: both;
}
body.oggi-ui.single-product div.product > .oggi-reco--ficha > .oggi-reco__titulo {
margin: 0 0 16px;
font-size: 22px;
line-height: 1.2;
letter-spacing: -.01em;
}
@media (min-width: 1100px) {
body.oggi-ui.single-product div.product > .oggi-reco--ficha {
grid-column: 1;
grid-row: 2;
align-self: start;
margin: 28px 0 0;
}
body.oggi-ui.single-product div.product > .oggi-reco--ficha > .oggi-reco__titulo {
margin: 0 0 12px;
padding: 4px 0 10px;
font-size: 17px;
}
}
body.oggi-ui .oggi-reco-capa {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
font-family: var(--oggi-letra);
font-weight: 500;
color: var(--oggi-tinta);
-webkit-font-smoothing: antialiased;
}
body.oggi-ui .oggi-reco-capa.esta-abierta {
pointer-events: auto;
}
body.oggi-ui .oggi-reco-capa__fondo {
position: absolute;
inset: 0;
background: rgba(29, 22, 64, .5);
opacity: 0;
transition: opacity .2s ease;
}
body.oggi-ui .oggi-reco-capa.esta-abierta .oggi-reco-capa__fondo {
opacity: 1;
}
body.oggi-ui .oggi-reco-panel {
position: relative;
box-sizing: border-box;
width: 100%;
max-height: calc(100% - 28px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px));
border-radius: var(--oggi-r-panel) var(--oggi-r-panel) 0 0;
background: #fff;
transform: translateY(32px);
opacity: 0;
transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .18s ease;
outline: none;
}
body.oggi-ui .oggi-reco-capa.esta-abierta .oggi-reco-panel {
transform: none;
opacity: 1;
}
@media (min-width: 768px) {
body.oggi-ui .oggi-reco-capa {
align-items: center;
padding: 24px;
}
body.oggi-ui .oggi-reco-panel {
width: min(560px, 100%);
max-height: calc(100vh - 48px);
padding: 24px 28px 28px;
border-radius: var(--oggi-r-panel);
transform: translateY(16px);
}
}
@media (prefers-reduced-motion: reduce) {
body.oggi-ui .oggi-reco-capa__fondo,
body.oggi-ui .oggi-reco-panel {
transition: none;
}
}
body.oggi-ui.oggi-reco-con-panel .oggi-envio-flota {
visibility: hidden;
}
body.oggi-ui .oggi-reco-panel__cabeza {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 14px;
}
body.oggi-ui .oggi-reco-panel .oggi-reco-panel__titulo {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0 0 0 6px;
font-family: var(--oggi-letra);
font-size: 22px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0;
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco-panel__ok {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 50%;
background: var(--oggi-ahorro-fondo);
color: var(--oggi-ahorro);
}
body.oggi-ui .oggi-reco-panel__ok svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: square;
}
body.oggi-ui .oggi-reco-panel .oggi-reco-panel__cerrar {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
margin: -4px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--oggi-violeta-suave);
color: var(--oggi-tinta);
box-shadow: none;
cursor: pointer;
}
body.oggi-ui .oggi-reco-panel .oggi-reco-panel__cerrar:hover {
background: #E2DAFF;
}
body.oggi-ui .oggi-reco-panel .oggi-reco-panel__cerrar:focus-visible {
outline: none;
box-shadow: var(--oggi-foco);
}
body.oggi-ui .oggi-reco-panel__cerrar svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.6;
stroke-linecap: square;
}
body.oggi-ui .oggi-reco-panel__agregado {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: 14px;
margin: 0 0 18px;
padding: 0 0 16px;
border-bottom: 1px solid var(--oggi-linea);
}
body.oggi-ui .oggi-reco-panel__foto {
display: block;
width: 64px;
height: 64px;
margin: 0;
object-fit: contain;
border-radius: var(--oggi-r-control);
}
body.oggi-ui .oggi-reco-panel__nombre {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco-panel__precio {
margin: 0;
font-size: 16px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco-panel__cant {
font-size: 14px;
font-weight: 600;
color: var(--oggi-tinta-2);
}
body.oggi-ui .oggi-reco--panel {
margin: 0 0 16px;
}
body.oggi-ui .oggi-reco--panel .oggi-reco__titulo {
margin: 0 0 10px;
font-size: 16px;
}
body.oggi-ui .oggi-reco-panel__acciones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 0;
}
body.oggi-ui .oggi-reco-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: var(--oggi-r-control);
font-family: var(--oggi-letra);
font-size: 15px;
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
text-align: center;
text-decoration: none;
text-transform: none;
box-shadow: none;
cursor: pointer;
}
@media (max-width: 420px) {
body.oggi-ui .oggi-reco-btn {
min-height: 48px;
padding: 0 10px;
font-size: 14px;
}
}
body.oggi-ui .oggi-reco-btn--sec {
border-radius: var(--oggi-r-pildora);
background: var(--oggi-violeta-suave);
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco-btn--sec:hover {
background: #E2DAFF;
color: var(--oggi-tinta);
}
body.oggi-ui .oggi-reco-btn--pri {
border-radius: var(--oggi-r-pildora);
background: var(--oggi-marca);
color: #fff;
}
body.oggi-ui .oggi-reco-btn--pri:hover {
background: var(--oggi-marca-hondo);
color: #fff;
}
body.oggi-ui .oggi-reco-btn--sec:focus-visible {
outline: none;
box-shadow: var(--oggi-foco);
}
body.oggi-ui .oggi-reco-btn--pri:focus-visible {
outline: none;
box-shadow: var(--oggi-foco-sobre-color);
}
body.oggi-ui .oggi-reco-envio {
margin: 0;
padding: 14px 16px 16px;
border-radius: var(--oggi-r-caja);
background: var(--oggi-lavanda);
}
body.oggi-ui .oggi-reco-envio.es-lleno {
background: var(--oggi-ahorro-fondo);
}
body.oggi-ui .oggi-reco-envio__texto {
margin: 0 0 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--oggi-tinta);
font-variant-numeric: tabular-nums;
}
body.oggi-ui .oggi-reco-envio__texto b {
font-weight: 800;
}
body.oggi-ui .oggi-reco-envio.es-lleno .oggi-reco-envio__texto {
color: var(--oggi-ahorro);
font-weight: 800;
}
body.oggi-ui .oggi-reco-envio__pista {
position: relative;
display: block;
height: 12px;
overflow: hidden;
border-radius: var(--oggi-r-pildora);
background: #DDD8F0;
}
body.oggi-ui .oggi-reco-envio.es-lleno .oggi-reco-envio__pista {
background: #C3E8D1;
}
body.oggi-ui .oggi-reco-envio__relleno {
display: block;
height: 100%;
min-width: 24px;
max-width: 100%;
border-radius: var(--oggi-r-pildora);
background: var(--oggi-marca);
}
body.oggi-ui .oggi-reco-envio.es-lleno .oggi-reco-envio__relleno {
background: var(--oggi-2x1);
}
body.oggi-ui .oggi-reco--envio {
margin: 14px 0 14px;
}
body.oggi-ui .oggi-reco--envio .oggi-reco__titulo {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
body.oggi-ui.oggi-carrito-pantalla .oggi-reco--carrito {
min-width: 0;
margin: 8px 0 0;
}
@media (min-width: 901px) {
body.oggi-ui.oggi-carrito-pantalla .woocommerce:has(> .oggi-reco--carrito) > .cart-collaterals {
grid-row: span 2;
}
body.oggi-ui.oggi-carrito-pantalla .woocommerce > .oggi-reco--carrito {
grid-column: 1;
margin: 0;
}
}
body.oggi-ui .oggi-reco-ahorro {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px 10px;
margin: 12px 0;
padding: 12px 14px;
border-radius: var(--oggi-r-caja);
background: var(--oggi-ahorro-fondo);
color: var(--oggi-ahorro);
font-family: var(--oggi-letra);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
body.oggi-ui .oggi-reco-ahorro b {
font-size: 16px;
font-weight: 900;
color: var(--oggi-ahorro);
white-space: nowrap;
}
body.oggi-ui .oggi-reco-ahorro--pago {
margin: 0 0 14px;
}
@media (min-width: 901px), (max-height: 460px) {
body.oggi-ui .oggi-reco-ahorro--solo-barra {
display: none;
}
}
body.oggi-ui tr.oggi-reco-ahorro-fila > :is(th, td),
body.oggi-ui tr.oggi-reco-ahorro-fila > td .amount {
color: var(--oggi-ahorro);
}
body.oggi-ui tr.oggi-reco-ahorro-fila > td {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}