/* Impact Product Carousel — Frontend Styles */

/* ── Variables (heredan del child theme si está activo) ── */
.ipc-section-wrap {
    --ipc-font-heading: var(--imp-font-heading, 'Barlow Condensed','Arial Narrow',Arial,sans-serif);
    --ipc-font-body:    var(--imp-font-body, 'Barlow',Arial,sans-serif);
    --ipc-text:         var(--imp-text, #1a1a1a);
    --ipc-accent:       var(--imp-accent, #f0c417);
    --ipc-badge:        var(--imp-badge, #803cee);
    --ipc-btn-bg:       var(--imp-btn-primary-bg, #1a1a1a);
    --ipc-btn-fg:       var(--imp-btn-primary-fg, #ffffff);
    --ipc-radius-btn:   var(--imp-radius-btn, 3.75rem);
    --ipc-radius-card:  var(--imp-radius-card, 1.5rem);
    --ipc-shadow-sm:    var(--imp-shadow-sm, 0 2px 8px rgba(26,26,26,.09));
    --ipc-shadow-md:    var(--imp-shadow-md, 0 5px 18px rgba(26,26,26,.12));
    --ipc-transition:   var(--imp-transition, .22s ease);
}

/* ── Contenedor ── */
.ipc-container {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ── Header del carrusel ── */
.ipc-carousel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ipc-eyebrow {
    font-family: var(--ipc-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ipc-accent);
    margin: 0 0 0.35rem;
}
.ipc-title {
    font-family: var(--ipc-font-heading);
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ipc-text);
}
.ipc-nav-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
/* Header simplificado sin flechas */
.ipc-carousel-header {
    align-items: center;
}
.ipc-see-all {
    font-family: var(--ipc-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ipc-text);
    opacity: 0.55;
    text-decoration: underline;
    transition: opacity var(--ipc-transition);
}
.ipc-see-all:hover { opacity: 1; text-decoration: none; color: var(--ipc-accent); }

/* ── Barra de progreso (reemplaza flechas) ── */
.ipc-progress-wrap {
    padding-top: 1.5rem;
    padding-inline: 0.25rem;
}
.ipc-progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(26,26,26,.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ipc-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--ipc-text);
    border-radius: 999px;
    width: 0%;
    transition: width 0.35s cubic-bezier(.4,0,.2,1);
    will-change: width;
}
/* Versión accent color (se puede activar con clase) */
.ipc-progress-bar--accent .ipc-progress-fill {
    background: var(--ipc-accent);
}

/* ── Swiper overrides ── */
.ipc-swiper { overflow: visible; }
.ipc-swiper .swiper-wrapper { align-items: stretch; }
.ipc-swiper .swiper-slide { height: auto; }

/* ── Tarjeta de producto ── */
.ipc-product-card {
    background: #fff;
    border-radius: var(--ipc-radius-card);
    overflow: hidden;
    box-shadow: var(--ipc-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow var(--ipc-transition), transform var(--ipc-transition);
}
.ipc-product-card:hover {
    box-shadow: var(--ipc-shadow-md);
    transform: translateY(-3px);
}

/* ── Imagen ── */
.ipc-card-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    text-decoration: none;
    flex-shrink: 0;
}
.ipc-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}
.ipc-product-card:hover .ipc-card-thumb img {
    transform: scale(1.06);
}

/* ── Badges ── */
.ipc-badges {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 2;
}
.ipc-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 60px;
    font-family: var(--ipc-font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
}
.ipc-badge--sale { background: var(--ipc-badge); color: #fff; }
.ipc-badge--new  { background: var(--ipc-accent); color: #1a1a1a; }
.ipc-badge--out  { background: #555; color: #fff; }

/* ── Cuerpo de la tarjeta ── */
.ipc-card-body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
/* .ipc-card-cat oculta por defecto — se puede reactivar desde el admin */
.ipc-card-cat {
    display: none; /* ocultar taxonomías */
}
.ipc-card-title {
    font-family: var(--ipc-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ipc-text);
    text-decoration: none;
    display: block;
    transition: color var(--ipc-transition);
}
.ipc-card-title:hover { color: var(--ipc-accent); text-decoration: none; }

/* ── Precios ── */
.ipc-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}
.ipc-price         { font-weight: 700; font-size: 0.95rem; color: var(--ipc-text); }
.ipc-price-sale    { font-weight: 700; font-size: 0.95rem; color: #c00; }
.ipc-price-regular { font-weight: 400; font-size: 0.82rem; color: var(--ipc-text); opacity: 0.42; text-decoration: line-through; }

/* ── Botón ── */
.ipc-card-btn {
    margin-top: auto;
    display: block;
    width: 100%;
    text-align: center;
    background: var(--ipc-btn-bg);
    color: var(--ipc-btn-fg) !important;
    font-family: var(--ipc-font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--ipc-radius-btn);
    padding: 0.62rem 1rem;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: opacity var(--ipc-transition);
    margin-top: auto;
}
.ipc-card-btn:hover { opacity: 0.82; color: var(--ipc-btn-fg) !important; }
.ipc-card-btn--disabled {
    background: #ddd;
    color: #888 !important;
    cursor: default;
    opacity: 1;
}
.ipc-card-btn--disabled:hover { opacity: 1; }

/* Feedback al añadir */
.ipc-atc-btn.is-adding { opacity: 0.6; cursor: wait; }
.ipc-atc-btn.is-added  { background: #1a8a1a; }

/* ── Responsive ── */
@media (max-width: 639px) {
    .ipc-carousel-header { flex-direction: column; align-items: flex-start; }
    .ipc-nav-wrap { align-self: flex-end; }
}


/* ============================================================
   FULL WIDTH — rompe el contenedor de Elementor
   ============================================================ */

/* Cuando el carrusel está en modo full-width necesita salir
   del contenedor de Elementor. Esta clase se aplica al wrapper. */
.ipc-section-wrap {
    /* Asegurar que ocupe el 100% del viewport */
    width: 100%;
    box-sizing: border-box;
}

/* Técnica "full bleed" para romper contenedores de Elementor/Blocksy */
.ipc-section-wrap.ipc-full-width {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* En Elementor, el shortcode widget tiene padding propio — anularlo en full */
.elementor-widget-shortcode .ipc-section-wrap.ipc-full-width {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Swiper full-width: los slides pueden sangrar al borde */
.ipc-full-width .ipc-swiper {
    overflow: hidden;
}
.ipc-full-width .ipc-swiper .swiper-wrapper {
    padding-inline: 0;
}

/* Overflow hidden en el wrapper para evitar scroll horizontal */
body { overflow-x: hidden; }

/* ── Responsive mejorado ── */
@media (max-width: 480px) {
    .ipc-carousel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .ipc-nav-wrap { align-self: flex-end; }
    .ipc-title { font-size: 1.3rem !important; }
    .ipc-card-body { padding: 0.75rem !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .ipc-title { font-size: 1.5rem !important; }
}