/* Umbro Scrape para Flatsome v1.3 */
.usf-grid .col{margin-bottom:16px}
.usf-card{border:1px solid rgba(0,0,0,.06);border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.usf-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.usf-card .box-image{aspect-ratio:1/1;display:grid;place-items:center;background:#fafafa}
.usf-card img{width:100%;height:100%;object-fit:contain}
.usf-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#777;text-decoration:none}

/* Precio con oferta */
.usf-price{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.usf-price .current{font-size:16px;line-height:1.2}
.usf-price .current strong{font-weight: 500; color: #704b27;}
.usf-price .was{font-size:13px;color:#777}
.usf-price .was del{text-decoration:line-through;opacity:.9}
.store-tabs li{ margin: 0 20px}
/* Carousel */
.usf-carousel{position:relative}
.usf-track{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding:4px}
.usf-slide { min-width: 280px; scroll-snap-align: start; max-width: 280px; margin: auto; margin-bottom: 20px; }
.usf-nav{position:absolute;top:50%;transform:translateY(-50%);background:#111;color:#fff;border:0;border-radius:999px;width:36px;height:36px;opacity:.8;cursor:pointer}
.usf-nav:hover{opacity:1}
.usf-nav.prev{left:0px; z-index:99;}
.usf-nav.next{right:-15px; z-index:99;}
.box-text.box-text-products {
    min-height: 105px;
}
.usf-nav.next, .usf-nav.prev {
    border-radius: 100% !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: 1.5px solid var(--border);
    background: var(--white);
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cg);
    transition: all .15s;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    min-height: auto;
    padding: 20px;
}

.usf-nav.next:hover, .usf-nav.prev:hover  {
background: var(--cg);
    color: #fff;
    border-color: var(--cg);
}

.usf-track {
background: transparent; /* gris claro */
  scrollbar-width: thin;
  scrollbar-color: #f5f5f5 transparent;
}

/* Scrollbar en navegadores WebKit (Chrome, Edge, Safari) */
.usf-track::-webkit-scrollbar {
  height: 8px;
}

.usf-track::-webkit-scrollbar-track {
  background: transparent;
}

.usf-track::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.usf-track:hover::-webkit-scrollbar-thumb {
  background: #674d33; /* rojo al hacer hover */
}


/* Drag & touch friendliness */
.usf-track{ touch-action: pan-y; cursor: grab; }
.usf-track.dragging{ cursor: grabbing; }


/* === Overlays laterales + flechas disabled === */
.usf-carousel{ position:relative; overflow:hidden; padding:20px;}
.usf-overlay-left,.usf-overlay-right{
  position:absolute; top:0; width:60px; height:100%;
  pointer-events:none; z-index:2; transition:opacity .3s ease;
}
.usf-overlay-left{ left:0; background: linear-gradient(to right, rgb(255 255 255), rgba(227, 32, 33, 0)); opacity:0; }
.usf-overlay-right{ right:0; background: linear-gradient(to left, rgb(255 255 255), rgba(227, 32, 33, 0)); opacity:1; }

.usf-carousel.at-start .usf-overlay-left{ opacity:0; }
.usf-carousel:not(.at-start) .usf-overlay-left{ opacity:1; }
.usf-carousel.at-end .usf-overlay-right{ opacity:0; }
.usf-carousel:not(.at-end) .usf-overlay-right{ opacity:1; }

.usf-nav.disabled{ opacity:.2; cursor:not-allowed; pointer-events:none; filter:grayscale(1); }

/* Drag visual & mobile gesture */
.usf-track{ touch-action: pan-y; cursor: grab; }
.usf-track.dragging{ cursor: grabbing; scroll-snap-type:none !important; }