/* =============================================================
   WPC Product Carousel – Public Styles
   ============================================================= */

/* ── CSS custom-property defaults (overridden per-instance) ── */
.wpc-carousel-wrap {
    --wpc-card-bg:           #ffffff;
    --wpc-card-radius:       12px;
    --wpc-card-bw:           1px;
    --wpc-card-bc:           #e5e7eb;
    --wpc-card-gap:          16px;
    --wpc-card-padding:      12px;
    --wpc-card-shadow:       0 2px 10px rgba(0, 0, 0, 0.08);
    --wpc-card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.14);
    --wpc-img-ratio:         1/1;
    position: relative;
    padding: 0 20px;     /* room for arrows */
    box-sizing: border-box;
}

/* ── Viewport (masks overflow) ── */
.wpc-viewport {
    overflow: hidden;
    width: 100%;
}

/* ── Track (flex row of slides) ── */
.wpc-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    cursor: grab;
    user-select: none;
}

.wpc-track.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* ── Slide ── */
.wpc-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 calc(var(--wpc-card-gap) / 2);
}

/* ── Card ── */
.wpc-card {
    background:    var(--wpc-card-bg);
    border-radius: var(--wpc-card-radius);
    border:        var(--wpc-card-bw) solid var(--wpc-card-bc);
    box-shadow:    var(--wpc-card-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    height:        100%;
    position:      relative;
    transition:    transform 0.24s ease, box-shadow 0.24s ease;
}

.wpc-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--wpc-card-shadow-hover);
}

/* ── Sale badge ── */
.wpc-badge-sale {
    position:      absolute;
    top:           10px;
    left:          10px;
    z-index:       3;
    background:    #ef4444;
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    line-height:   1;
    padding:       4px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    pointer-events: none;
}

/* ── Product image ── */
.wpc-card-img-link {
    display: block;
    text-decoration: none;
}

.wpc-card-img {
    position:   relative;
    overflow:   hidden;
    background: #f3f4f6;
    aspect-ratio: var(--wpc-img-ratio);
}

.wpc-card-img img,
.wpc-card-img .wpc-product-img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.42s ease;
}

.wpc-card:hover .wpc-card-img img {
    transform: scale(1.06);
}

/* ── Card body ── */
.wpc-card-body {
    padding:        var(--wpc-card-padding);
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* Category */
.wpc-card-cat {
    font-size:      11px;
    font-weight:    500;
    color:          #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpc-card-cat a {
    color: inherit;
    text-decoration: none;
}

.wpc-card-cat a:hover { color: #2563eb; }

/* Title */
.wpc-card-title {
    font-size:   0.9rem;
    font-weight: 600;
    color:       #111827;
    margin:      0;
    line-height: 1.35;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.wpc-card-title a {
    color:           inherit;
    text-decoration: none;
}

.wpc-card-title a:hover { color: #2563eb; }

/* Rating */
.wpc-card-rating {
    display:     flex;
    align-items: center;
    gap:         4px;
    line-height: 1;
}

.wpc-card-rating .star-rating {
    font-size: 13px;
}

.wpc-rating-count {
    font-size: 11px;
    color:     #9ca3af;
}

/* Price */
.wpc-card-price {
    margin:  0;
    line-height: 1.2;
}

.wpc-card-price .woocommerce-Price-amount {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #111827;
}

.wpc-card-price del {
    color:        #9ca3af;
    font-size:    0.85rem;
    margin-right: 4px;
}

.wpc-card-price ins {
    text-decoration: none;
    color:           #dc2626;
}

/* Description */
.wpc-card-desc {
    font-size:   0.8rem;
    color:       #6b7280;
    line-height: 1.45;
    margin:      0;
}

/* SKU */
.wpc-card-sku {
    font-size: 0.74rem;
    color:     #9ca3af;
}

/* Stock */
.wpc-card-stock {
    display:       inline-block;
    font-size:     0.76rem;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 100px;
}

.wpc-card-stock.in-stock     { color: #15803d; background: #f0fdf4; }
.wpc-card-stock.out-of-stock { color: #b91c1c; background: #fef2f2; }

/* Add to cart */
.wpc-card-actions {
    margin-top: auto;
    padding-top: 6px;
}

.wpc-card-actions .button,
.wpc-card-actions .wpc-btn-cart {
    display:         block;
    width:           100%;
    text-align:      center;
    background:      #111827;
    color:           #ffffff !important;
    border:          none;
    padding:         10px 14px;
    border-radius:   6px;
    font-size:       0.82rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.2s ease, transform 0.1s ease;
    letter-spacing:  0.3px;
    box-sizing:      border-box;
}

.wpc-card-actions .button:hover,
.wpc-card-actions .wpc-btn-cart:hover {
    background:      #1d4ed8;
    color:           #fff !important;
    text-decoration: none;
}

.wpc-card-actions .button:active { transform: scale(0.97); }

.wpc-card-actions .button.loading {
    opacity: 0.65;
    cursor:  wait;
}

.wpc-card-actions .button.added {
    background: #15803d;
}

/* ── Navigation arrows ── */
.wpc-nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    background:      #ffffff;
    color:           #374151;
    border:          1px solid #e5e7eb;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.12);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    padding:         0;
}

.wpc-nav:hover {
    background:   #111827;
    color:        #ffffff;
    box-shadow:   0 4px 14px rgba(0, 0, 0, 0.22);
    border-color: #111827;
    transform:    translateY(-50%) scale(1.08);
}

.wpc-nav:disabled,
.wpc-nav[disabled] {
    opacity:        0.3;
    cursor:         not-allowed;
    pointer-events: none;
}

.wpc-nav svg {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}

.wpc-nav-prev { left:  -19px; }
.wpc-nav-next { right: -19px; }

/* ── Dot navigation ── */
.wpc-dots {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             6px;
    margin-top:      20px;
    min-height:      20px;
}

.wpc-dot {
    width:         8px;
    height:        8px;
    border-radius: 100px;
    background:    #d1d5db;
    border:        none;
    cursor:        pointer;
    padding:       0;
    flex-shrink:   0;
    transition:    background 0.25s, width 0.25s;
}

.wpc-dot.active {
    background: #111827;
    width:      24px;
}

/* ── Empty state ── */
.wpc-no-products {
    text-align:  center;
    color:       #9ca3af;
    padding:     40px 20px;
    font-size:   0.9rem;
}

/* ── Responsive: give space on small screens ── */
@media (max-width: 600px) {
    .wpc-carousel-wrap {
        padding: 0 16px;
    }

    .wpc-nav-prev { left:  -16px; }
    .wpc-nav-next { right: -16px; }

    .wpc-nav {
        width:  32px;
        height: 32px;
    }

    .wpc-nav svg {
        width:  15px;
        height: 15px;
    }
}

/* ── Elementor editor live preview fix ── */
.elementor-editor-active .wpc-track {
    transition: none;
}

/* =============================================================
   CATEGORY CAROUSEL CARDS
   ============================================================= */

/* ── Category card base ── */
.wpc-cat-card {
    position:      relative;
    border-radius: var(--wpc-card-radius);
    overflow:      hidden;
    aspect-ratio:  var(--wpc-img-ratio);
    background:    #1f2937;
    display:       block;
    cursor:        pointer;
    box-shadow:    var(--wpc-card-shadow);
    transition:    box-shadow 0.25s ease, transform 0.25s ease;
}

.wpc-cat-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--wpc-card-shadow-hover);
}

/* ── Full-cover link ── */
.wpc-cat-link {
    display:         block;
    width:           100%;
    height:          100%;
    text-decoration: none;
    color:           inherit;
    position:        relative;
}

/* ── Image wrap (fills entire card) ── */
.wpc-cat-img-wrap {
    position: absolute;
    inset:    0;
}

.wpc-cat-img-wrap .wpc-cat-img,
.wpc-cat-img-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.45s ease;
}

.wpc-cat-card:hover .wpc-cat-img-wrap img {
    transform: scale(1.07);
}

/* ── Gradient overlay (bottom-up) ── */
.wpc-cat-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.35) 52%,
        transparent         100%
    );
    transition: background 0.3s ease;
    pointer-events: none;
}

.wpc-cat-card:hover .wpc-cat-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.86) 0%,
        rgba(0, 0, 0, 0.44) 56%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

/* ── Text info (sits on overlay) ── */
.wpc-cat-info {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        24px 16px 18px;
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

/* Category name */
.wpc-cat-name {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #ffffff;
    margin:      0;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Product count */
.wpc-cat-count-label {
    font-size:  0.78rem;
    font-weight: 400;
    color:      rgba(255, 255, 255, 0.82);
    margin:     0;
}

/* "Shop Now" pill button */
.wpc-cat-btn-label {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    align-self:     flex-start;
    margin-top:     6px;
    font-size:      0.76rem;
    font-weight:    600;
    color:          #ffffff;
    background:     rgba(255, 255, 255, 0.18);
    border:         1px solid rgba(255, 255, 255, 0.45);
    padding:        5px 13px 5px 11px;
    border-radius:  100px;
    backdrop-filter: blur(6px);
    transition:     background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
    letter-spacing: 0.2px;
}

.wpc-cat-card:hover .wpc-cat-btn-label {
    background:   rgba(255, 255, 255, 0.92);
    color:        #111827;
    border-color: transparent;
    transform:    translateX(2px);
}

/* ── Placeholder for categories without images ── */
.wpc-cat-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    background:      linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

.wpc-cat-initial {
    font-size:   3.5rem;
    font-weight: 800;
    color:       rgba(255, 255, 255, 0.15);
    line-height: 1;
    user-select: none;
}

.wpc-cat-ph-icon {
    width:   36px;
    height:  36px;
    color:   rgba(255, 255, 255, 0.25);
}

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
    .wpc-cat-name        { font-size: 0.9rem; }
    .wpc-cat-info        { padding: 18px 12px 14px; }
    .wpc-cat-btn-label   { font-size: 0.72rem; padding: 4px 10px 4px 9px; }
}