/**
 * SM Loop Promos — estilos estáticos
 *
 * Archivo: assets/css/loop-promos.css
 * Versión: 1.0.0
 * Plugin:  adeluve-sm-promos-engine
 *
 * Origen: extraído byte-similar del snippet 500 "SM Loop Promos Display v16.52".
 * Los colores de los chips (lleva-mas / lleva-regalo / surtidos / oferta /
 * oferta-semanal / lleva-paga) se inyectan vía CSS custom properties desde
 * un <style id="sm-loop-vars"> que escribe el plugin en wp_head usando
 * sm_promo_val() (config dinámica administrable).
 *
 * Los fallbacks de los var() son IDÉNTICOS a los defaults hardcoded
 * del snippet original — si sm_promo_val() no responde, los colores
 * son los mismos que el visitante ve hoy.
 */

/* ============================================
   ESTRUCTURA DEL LOOP — IDÉNTICA AL SNIPPET v13
   ============================================ */
#producto-principal .sm-loop-wrapper-bulto,
#producto-principal .sm-loop-wrapper-unidad,
#producto-principal .sm-loop-info-bulto,
#producto-principal .sm-loop-info-unidad,
#producto-principal .sm-loop-price-container{display:none!important}
.bricks-variation-swatches.bricks-swatch-label{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:15px!important;align-items:flex-start!important;justify-content:center!important}
.sm-loop-wrapper-bulto{order:1!important}
.sm-loop-wrapper-unidad{order:2!important}
.sm-loop-wrapper-bulto,.sm-loop-wrapper-unidad{display:inline-block;text-align:center}
.sm-loop-info-bulto,.sm-loop-info-unidad{font-size:12px;color:#666;line-height:1.3;margin-top:6px;text-align:center}
.sm-loop-presentacion{font-weight:700!important;display:block}
.sm-loop-precio-bulto{font-family:'Roboto',sans-serif!important;font-weight:400!important;font-size:13px;color:#888;display:block}
.sm-loop-venta-minima{display:block;font-weight:400}
.sm-loop-unidades{display:block;font-weight:700}
.sm-loop-price-container{margin:14px 0 10px 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;width:100%;min-height:140px}
.sm-loop-discount-line{display:flex;align-items:center;justify-content:center;gap:6px;min-height:20px;margin-bottom:2px}
.sm-loop-no-discount{min-height:20px;margin-bottom:2px}
.sm-loop-price-old{font-size:13px;color:#999;text-decoration:line-through;font-weight:400}
.sm-loop-price-off{font-size:12px;color:#00a650;font-weight:700}
.sm-loop-price{font-size:26px;font-weight:700!important;color:#333;line-height:1.2}
.sm-loop-price-label{font-size:12px;color:#666;font-weight:400;line-height:1.2;margin-top:3px}

/* ============================================
   HINTS (CHIPS) — colores dinámicos vía CSS vars
   ============================================ */
.sm-loop-price-container{display:block;width:100%;}
.sm-loop-hint{display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;margin:4px 0 0 0;text-decoration:none;white-space:normal;line-height:1.3;transition:filter 0.15s;width:calc(100% - 24px);margin-left:12px;margin-right:12px;box-sizing:border-box;text-align:center;}
.sm-loop-hint .sm-hint-img{width:18px;height:18px;object-fit:contain;flex-shrink:0;}
.sm-loop-hint .sm-hint-emoji{font-size:14px;flex-shrink:0;}

/* hints informativos — sin cursor pointer. Solo surtido es clickeable via .sm-loop-surtido */
.sm-loop-hint-tier{
    background: var(--sm-lleva-mas-bg, #f0fdf4);
    border: 1.5px solid var(--sm-lleva-mas-border, #bbf7d0);
    color: var(--sm-lleva-mas-text, #15803d);
}

/* v16.46: icono centrado + jerarquia bold + link cliqueable (consistente con single product) */
.sm-loop-hint-regalo{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:center !important;
    gap:10px !important;
    line-height:1.35 !important;
    background: var(--sm-lleva-regalo-bg, #fff9e6);
    border: 1.5px solid var(--sm-lleva-regalo-border, #ffe082);
    color: var(--sm-lleva-regalo-text, #e65100);
}
.sm-loop-hint-regalo > :first-child{
    align-self:center !important;
    font-size:16px !important;
}
.sm-loop-hint-regalo .sm-loop-regalo-texto{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:100% !important;
    gap:3px !important;
    text-align:center !important;
}
.sm-loop-hint-regalo .sm-loop-regalo-linea1{
    font-weight:600 !important;
}
.sm-loop-hint-regalo .sm-loop-regalo-nombre{
    font-weight:400 !important;
    font-size:0.92em !important;
    white-space:normal !important;
    color:inherit !important;
    text-decoration:underline !important;
    text-decoration-style:dotted !important;
    text-underline-offset:2px !important;
}
.sm-loop-hint-regalo a.sm-loop-regalo-nombre{
    cursor:pointer !important;
}
.sm-loop-hint-regalo a.sm-loop-regalo-nombre:hover{
    text-decoration-style:solid !important;
    opacity:0.8 !important;
}

.sm-loop-hint-surtido{
    background: var(--sm-surtidos-bg, #ecfdf5);
    border: 1.5px solid var(--sm-surtidos-border, #9600c7);
    color: var(--sm-surtidos-text, #4a0072);
}
.sm-loop-hint-oferta{
    background: var(--sm-oferta-bg, #fff4ed);
    border: 1.5px solid var(--sm-oferta-border, #fed7aa);
    color: var(--sm-oferta-text, #c2410c);
}
.sm-loop-hint-oferta_semanal{
    background: var(--sm-oferta-semanal-bg, #ecfeff);
    border: 1.5px solid var(--sm-oferta-semanal-border, #a5f3fc);
    color: var(--sm-oferta-semanal-text, #0e7490);
}
/* v16.48 — lleva-paga (BOGO esc1) */
.sm-loop-hint-lleva-paga{
    background: var(--sm-lleva-paga-bg, #fffbeb);
    border: 1.5px solid var(--sm-lleva-paga-border, #fde68a);
    color: var(--sm-lleva-paga-text, #92400e);
}

.sm-loop-surtido-hint a{
    color:inherit;
    text-decoration:none;
}
.sm-loop-surtido-hint a:hover{
    text-decoration:underline;
}
.sm-loop-surtido-hint:hover{
    background:#ede9fe;
    border-color:#a78bfa;
    color:#6d28d9;
}

/* Contenedor de promos - puede tener 1, 2 o 3 */
.sm-loop-promos-slot{
    min-height:26px;
    margin-top:6px;
    text-align:center;
}
.sm-loop-promos-slot > div{
    margin-bottom:4px;
}

/* Placeholder para cuando no hay tier - mantiene altura */
.sm-loop-tier-slot{
    min-height:26px;
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sm-loop-tier-hint svg{
    width:11px;
    height:11px;
    fill:currentColor;
    flex-shrink:0;
}

/* Surtido - violeta */
.sm-loop-hint.sm-loop-surtido{
    cursor:pointer;
}
.sm-loop-hint.sm-loop-surtido:hover{
    filter:brightness(0.92);
}

/* ============================================
   ANIMACIONES DE CARGA SUAVE v14.1 — IDÉNTICAS
   ============================================ */
.products .product,
.woocommerce ul.products li.product,
.brxe-post-excerpts .brxe-post,
.bricks-loop-wrapper .product {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.products .product:nth-child(1),.woocommerce ul.products li.product:nth-child(1),.brxe-post-excerpts .brxe-post:nth-child(1),.bricks-loop-wrapper .product:nth-child(1){animation-delay:0.05s}
.products .product:nth-child(2),.woocommerce ul.products li.product:nth-child(2),.brxe-post-excerpts .brxe-post:nth-child(2),.bricks-loop-wrapper .product:nth-child(2){animation-delay:0.1s}
.products .product:nth-child(3),.woocommerce ul.products li.product:nth-child(3),.brxe-post-excerpts .brxe-post:nth-child(3),.bricks-loop-wrapper .product:nth-child(3){animation-delay:0.15s}
.products .product:nth-child(4),.woocommerce ul.products li.product:nth-child(4),.brxe-post-excerpts .brxe-post:nth-child(4),.bricks-loop-wrapper .product:nth-child(4){animation-delay:0.2s}
.products .product:nth-child(5),.woocommerce ul.products li.product:nth-child(5),.brxe-post-excerpts .brxe-post:nth-child(5),.bricks-loop-wrapper .product:nth-child(5){animation-delay:0.25s}
.products .product:nth-child(6),.woocommerce ul.products li.product:nth-child(6),.brxe-post-excerpts .brxe-post:nth-child(6),.bricks-loop-wrapper .product:nth-child(6){animation-delay:0.3s}
.products .product:nth-child(7),.woocommerce ul.products li.product:nth-child(7),.brxe-post-excerpts .brxe-post:nth-child(7),.bricks-loop-wrapper .product:nth-child(7){animation-delay:0.35s}
.products .product:nth-child(8),.woocommerce ul.products li.product:nth-child(8),.brxe-post-excerpts .brxe-post:nth-child(8),.bricks-loop-wrapper .product:nth-child(8){animation-delay:0.4s}
.products .product:nth-child(9),.woocommerce ul.products li.product:nth-child(9),.brxe-post-excerpts .brxe-post:nth-child(9),.bricks-loop-wrapper .product:nth-child(9){animation-delay:0.45s}
.products .product:nth-child(10),.woocommerce ul.products li.product:nth-child(10),.brxe-post-excerpts .brxe-post:nth-child(10),.bricks-loop-wrapper .product:nth-child(10){animation-delay:0.5s}
.products .product:nth-child(11),.woocommerce ul.products li.product:nth-child(11),.brxe-post-excerpts .brxe-post:nth-child(11),.bricks-loop-wrapper .product:nth-child(11){animation-delay:0.55s}
.products .product:nth-child(12),.woocommerce ul.products li.product:nth-child(12),.brxe-post-excerpts .brxe-post:nth-child(12),.bricks-loop-wrapper .product:nth-child(12){animation-delay:0.6s}
.products .product:nth-child(n+13),.woocommerce ul.products li.product:nth-child(n+13),.brxe-post-excerpts .brxe-post:nth-child(n+13),.bricks-loop-wrapper .product:nth-child(n+13){animation-delay:0.65s}

.products .product img,
.woocommerce ul.products li.product img,
.brxe-post-excerpts .brxe-post img,
.bricks-loop-wrapper .product img,
.product-image img,
.wp-post-image {
    opacity: 0;
    animation: fadeIn 0.6s ease-in forwards;
    animation-delay: 0.15s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.products,.woocommerce ul.products,.brxe-post-excerpts,.bricks-loop-wrapper{will-change:contents}
.products .product,.woocommerce ul.products li.product,.brxe-post-excerpts .brxe-post,.bricks-loop-wrapper .product{will-change:opacity,transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}

img[loading="lazy"]{opacity:1!important;animation:none!important}
img[data-lazy-src],img.lazyload,img.lazyloading{opacity:0;transition:opacity 0.3s ease-in}
img.lazyloaded{opacity:1}

@media(max-width:768px){
    .products .product,.woocommerce ul.products li.product,.brxe-post-excerpts .brxe-post,.bricks-loop-wrapper .product{animation-duration:0.3s}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}

@media(prefers-reduced-motion:reduce){
    .products .product,.woocommerce ul.products li.product,.brxe-post-excerpts .brxe-post,.bricks-loop-wrapper .product,
    .products .product img,.woocommerce ul.products li.product img{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
}

@supports not (animation: fadeInUp){
    .products .product,.woocommerce ul.products li.product,.brxe-post-excerpts .brxe-post,.bricks-loop-wrapper .product{opacity:1!important;transform:none!important}
}

/* ============================================
   RESPONSIVE — IDÉNTICO AL SNIPPET
   ============================================ */
@media(max-width:991px){.sm-loop-price-container{min-height:100px}.sm-loop-price{font-size:24px!important}.sm-loop-price-old{font-size:12px!important}.sm-loop-price-off{font-size:11px!important}}
@media(max-width:768px){.bricks-variation-swatches.bricks-swatch-label{gap:10px!important}.sm-loop-wrapper-bulto,.sm-loop-wrapper-unidad{min-width:70px}.sm-loop-info-bulto,.sm-loop-info-unidad{font-size:11px!important}.sm-loop-price-container{min-height:95px;margin:10px 0 8px 0}.sm-loop-price{font-size:22px!important}.sm-loop-price-label{font-size:11px!important}.sm-loop-price-old,.sm-loop-price-off{font-size:10px!important}.sm-loop-discount-line{gap:4px}.sm-loop-presentacion,.sm-loop-precio-bulto{font-size:11px!important}.sm-loop-tier-hint,.sm-loop-regalo-hint,.sm-loop-surtido-hint{font-size:10px;padding:2px 6px}}
@media(max-width:480px){.bricks-variation-swatches.bricks-swatch-label{gap:8px!important}.sm-loop-wrapper-bulto,.sm-loop-wrapper-unidad{min-width:60px}.sm-loop-price-container{min-height:90px;margin:8px 0 6px 0}.sm-loop-price{font-size:20px!important}.sm-loop-price-label{font-size:10px!important}.sm-loop-info-bulto,.sm-loop-info-unidad{font-size:10px!important;margin-top:4px}.sm-loop-discount-line,.sm-loop-no-discount{min-height:16px}.sm-loop-price-old,.sm-loop-price-off{font-size:9px!important}.sm-loop-tier-hint,.sm-loop-regalo-hint,.sm-loop-surtido-hint{font-size:9px;padding:2px 5px;gap:3px}}
@media(max-width:360px){.sm-loop-price{font-size:18px!important}.sm-loop-price-container{min-height:85px}.bricks-variation-swatches.bricks-swatch-label{gap:6px!important}}

/* ============================================
   TEASER BULTO (modo Unidad) — idéntico
   ============================================ */
.sm-loop-bulto-teaser{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:5px;
    padding:4px 8px;
    background:#fff8e1;
    border:1px solid #FFAA03;
    border-radius:6px;
    font-size:11px;
    line-height:1.3;
    box-sizing:border-box;
    width:100%;
    overflow:hidden;
}
.sm-loop-bulto-teaser-icon{
    font-size:12px;
    flex-shrink:0;
}
.sm-loop-bulto-teaser-txt{
    color:#7a4f00;
    font-weight:600;
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sm-loop-bulto-switch{
    color:#FFAA03;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    font-size:10px;
    border:1px solid #FFAA03;
    border-radius:4px;
    padding:1px 5px;
}
.sm-loop-bulto-switch:hover{
    background:#FFAA03;
    color:#fff;
}