/* =========================================================
   URBN PRODUCT CAROUSEL — urbn-carousel.css
   EstarWeb · 2026
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ── TOKENS ────────────────────────────────────────────── */
.urbn-carousel-wrap {
    --urbn-accent:   #e02020;
    --urbn-accent2:  #b01010;
    --urbn-ease:     cubic-bezier(.16,1,.3,1);
    --urbn-radius:   6px;

    /* Light/degradé (default) */
    --urbn-bg:       transparent;
    --urbn-surface:  #ffffff;
    --urbn-border:   #e0e0e0;
    --urbn-text:     #111111;
    --urbn-muted:    #999;
    --urbn-overlay:  rgba(0,0,0,.72);

    font-family: 'DM Sans', sans-serif;
    background:  linear-gradient(160deg, #ffffff 0%, #f5f5f5 50%, #ebebeb 100%);
    padding:     48px 0 56px;
    overflow:    hidden;
}

/* Dark theme (opt-in con dark="true") */
.urbn-carousel-wrap.urbn-dark {
    --urbn-bg:      #0f0f0f;
    --urbn-surface: #1a1a1a;
    --urbn-border:  #2a2a2a;
    --urbn-text:    #f0f0ec;
    --urbn-muted:   #666;
    --urbn-overlay: rgba(0,0,0,.82);
    background:  var(--urbn-bg);
}

/* ── HEADER ─────────────────────────────────────────────── */
.urbn-carousel-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    padding:         0 40px 28px;
}

.urbn-carousel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size:   clamp(2.2rem, 5vw, 3.6rem);
    letter-spacing: .04em;
    color:       var(--urbn-text);
    line-height: 1;
}

/* ── CONTROLES ───────────────────────────────────────────── */
.urbn-carousel-controls {
    display: flex;
    gap:     10px;
}

.urbn-btn-prev,
.urbn-btn-next {
    width:            42px;
    height:           42px;
    border-radius:    50%;
    border:           1.5px solid var(--urbn-border);
    background:       transparent;
    color:            var(--urbn-muted);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    transition:       border-color .22s, color .22s, background .22s, transform .22s var(--urbn-ease);
}
.urbn-btn-prev svg,
.urbn-btn-next svg { width: 18px; height: 18px; }

.urbn-btn-prev:hover,
.urbn-btn-next:hover {
    border-color: var(--urbn-accent);
    color:        var(--urbn-accent);
    background:   rgba(224,32,32,.07);
    transform:    scale(1.08);
}
.urbn-btn-prev:active,
.urbn-btn-next:active { transform: scale(.96); }

/* ── VIEWPORT & TRACK ─────────────────────────────────────── */
.urbn-carousel-viewport {
    overflow:   hidden;
    padding:    4px 40px 8px;
    cursor:     grab;
}
.urbn-carousel-viewport.is-dragging { cursor: grabbing; }

.urbn-carousel-track {
    display:   flex;
    gap:       16px;
    transition: transform .55s var(--urbn-ease);
    will-change: transform;
    user-select: none;
}

/* ── CARD ──────────────────────────────────────────────── */
.urbn-card {
    flex:        0 0 calc(25% - 12px);
    min-width:   0;
    background:  var(--urbn-surface);
    border:      1px solid var(--urbn-border);
    border-radius: var(--urbn-radius);
    overflow:    hidden;
    transition:  transform .35s var(--urbn-ease), box-shadow .35s;
}
.urbn-card:hover {
    transform:   translateY(-5px);
    box-shadow:  0 16px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(224,32,32,.15);
}

/* Responsive card widths */
@media (max-width: 1100px) { .urbn-card { flex: 0 0 calc(33.333% - 11px); } }
@media (max-width: 740px)  { .urbn-card { flex: 0 0 calc(50% - 8px); } }
@media (max-width: 480px)  { .urbn-card { flex: 0 0 calc(80vw); } }

/* ── IMAGEN ────────────────────────────────────────────── */
.urbn-card-img-wrap {
    position:   relative;
    display:    block;
    overflow:   hidden;
    aspect-ratio: 3/4;
    background: #111;
}

.urbn-card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .55s var(--urbn-ease), filter .35s;
}
.urbn-card:hover .urbn-card-img {
    transform: scale(1.06);
    filter:    brightness(.75);
}

.urbn-no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    background: linear-gradient(145deg, #f0f0f0, #e8e8e8);
}

/* ── OVERLAY ────────────────────────────────────────────── */
.urbn-card-overlay {
    position:   absolute;
    inset:      0;
    background: var(--urbn-overlay);
    display:    flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:        12px;
    opacity:    0;
    transition: opacity .32s var(--urbn-ease);
}
.urbn-card:hover .urbn-card-overlay { opacity: 1; }

/* Botón add to cart de WooCommerce dentro del overlay */
.urbn-card-overlay .button,
.urbn-card-overlay .urbn-atc-inner .button,
.urbn-card-overlay a.button {
    background:    var(--urbn-accent) !important;
    color:         #000 !important;
    border:        none !important;
    border-radius: 4px !important;
    padding:       11px 28px !important;
    font-family:   'DM Sans', sans-serif !important;
    font-size:     .78rem !important;
    font-weight:   500 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    cursor:        pointer !important;
    transition:    transform .2s var(--urbn-ease), box-shadow .2s !important;
    white-space:   nowrap !important;
}
.urbn-card-overlay .button:hover {
    transform:  scale(1.05) !important;
    box-shadow: 0 0 24px rgba(224,32,32,.35) !important;
}

.urbn-quick-view {
    font-size:      .72rem;
    letter-spacing: .12em;
    color:          rgba(255,255,255,.65);
    text-decoration:none;
    text-transform: uppercase;
    border-bottom:  1px solid rgba(255,255,255,.25);
    padding-bottom: 2px;
    transition:     color .2s, border-color .2s;
}
.urbn-quick-view:hover {
    color:         #fff;
    border-color:  rgba(255,255,255,.6);
}

/* ── BADGE ──────────────────────────────────────────────── */
.urbn-badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    font-size:      .62rem;
    letter-spacing: .12em;
    font-weight:    500;
    padding:        4px 10px;
    border-radius:  3px;
    text-transform: uppercase;
    z-index:        2;
}
.urbn-badge-new  { background: var(--urbn-accent);  color: #000; }
.urbn-badge-sale { background: var(--urbn-accent2);  color: #fff; }

/* ── WISHLIST ────────────────────────────────────────────── */
.urbn-wish {
    position:   absolute;
    top:        10px;
    right:      10px;
    width:      32px;
    height:     32px;
    border-radius: 50%;
    border:     1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
    color:      #fff;
    font-size:  .85rem;
    cursor:     pointer;
    display:    flex;
    align-items:center;
    justify-content:center;
    transition: background .2s, transform .2s var(--urbn-ease), color .2s;
    z-index:    2;
    line-height:1;
}
.urbn-wish:hover {
    background: rgba(224,32,32,.85);
    color:      #fff;
    transform:  scale(1.12);
    border-color: transparent;
}
.urbn-wish.active { background: var(--urbn-accent2); color: #fff; border-color: transparent; }

/* ── INFO ───────────────────────────────────────────────── */
.urbn-card-info {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.urbn-card-cat {
    font-size:      .65rem;
    letter-spacing: .14em;
    color:          var(--urbn-muted);
    text-transform: uppercase;
}

.urbn-card-name {
    font-size:   .9rem;
    font-weight: 500;
    color:       var(--urbn-text);
    text-decoration: none;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
    line-height: 1.35;
    transition:  color .2s;
}
.urbn-card-name:hover { color: var(--urbn-accent); }

/* Rating */
.urbn-rating {
    display:    flex;
    align-items:center;
    gap:        2px;
    margin-top: 2px;
}
.urbn-star { font-size: .72rem; color: #ddd; }
.urbn-star-on { color: var(--urbn-accent); }
.urbn-rating-count { font-size: .65rem; color: var(--urbn-muted); margin-left: 4px; }

/* Precio de WooCommerce */
.urbn-card-price { margin-top: 4px; }
.urbn-card-price .price,
.urbn-card-price .woocommerce-Price-amount {
    font-family: 'DM Sans', sans-serif !important;
    font-size:   1rem !important;
    font-weight: 500 !important;
    color:       var(--urbn-accent) !important;
}
.urbn-card-price del .woocommerce-Price-amount {
    color:       var(--urbn-muted) !important;
    font-size:   .78rem !important;
}
.urbn-card-price ins {
    text-decoration: none !important;
}

/* Color dots */
.urbn-color-dots {
    display:    flex;
    gap:        5px;
    margin-top: 6px;
}
.urbn-dot {
    width:        10px;
    height:       10px;
    border-radius:50%;
    border:       1.5px solid rgba(128,128,128,.4);
    background:   #888;
    display:      inline-block;
}

/* ── DOTS NAVEGACIÓN ────────────────────────────────────── */
.urbn-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin-top:      28px;
    padding:         0 40px;
}
.urbn-dot-item {
    width:        28px;
    height:       3px;
    border-radius:2px;
    background:   var(--urbn-border);
    border:       none;
    cursor:       pointer;
    transition:   background .25s, width .3s var(--urbn-ease);
    padding:      0;
}
.urbn-dot-item.active {
    background: var(--urbn-accent);
    width:      48px;
}

/* ── PADDING RESPONSIVO ─────────────────────────────────── */
@media (max-width: 740px) {
    .urbn-carousel-header,
    .urbn-carousel-viewport,
    .urbn-dots { padding-left: 20px; padding-right: 20px; }
}