/*
 * Rakesh Product Carousel — style.css
 * Visually matches the rakesh-product-cards plugin exactly.
 * Card Size scaling driven by --rpc-cs CSS custom property (0.8 – 1.5).
 * Default: --rpc-cs: 1
 */

.rpc-slider-wrapper {
    --rpc-cs:     1;      /* set inline from PHP slider value  */
    --rpc-img-h:  220px;  /* matches card_image_height default */
    --rpc-card-w: calc((100% - 84px) / 4);  /* Exactly 4 cards minus 3x 28px gaps */

    position:   relative;
    width:      100%;
    max-width:  100%;
    min-width:  0;
    overflow:   hidden;
    padding:    0 60px;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

/* ── View All Header ─────────────────────────────────────────────────── */
.rpc-slider-header {
    display:        flex;
    justify-content: flex-end;
    margin-bottom:  15px;
}

.rpc-view-all-btn {
    background:      #fff;
    border:          1px solid #eaeaea;
    color:           #333;
    padding:         6px 16px;
    border-radius:   20px;
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      border-color 0.2s ease;
}
.rpc-view-all-btn:hover {
    border-color: #ccc;
}

/* ── Navigation Buttons ─────────────────────────────────────────────── */
.rpc-slider-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.rpc-slider-nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           36px !important;
    height:          36px !important;
    min-width:       36px !important;
    min-height:      36px !important;
    padding:         0 !important;
    box-sizing:      border-box !important;
    border-radius:   50%;
    background:      #f0f0f0;
    border:          none;
    color:           #555;
    font-size:       20px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         10;
    transition:      background 0.2s ease;
}
.rpc-slider-nav.prev { left:  -40px; }
.rpc-slider-nav.next { right: -40px; }
.rpc-slider-nav:hover { background: #e0e0e0; }

/* ── Slider Track ───────────────────────────────────────────────────── */
.rpc-slider-track {
    display:             flex;
    width:               100%;
    max-width:           100%;
    min-width:           0;
    gap:                 28px !important; /* Fixed 28px gaps to match grid horizontal gaps exactly */
    overflow-x:          auto;
    scroll-behavior:     smooth;
    -ms-overflow-style:  none;
    scrollbar-width:     none;
    scroll-snap-type:    x mandatory;
    padding:             12px 4px;        /* room for box-shadow */
    align-items:         stretch;         /* equal-height cards  */
}
.rpc-slider-track::-webkit-scrollbar {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE CARD - Sizing Scaling
   Visual styles inherit from rakesh-product-cards (.rpc-card)
   ═══════════════════════════════════════════════════════════════════════ */

/* Override sizes to match cards default styles exactly */
.rpc-slider-wrapper .rpc-card {
    flex:             0 0 auto;
    width:            var(--rpc-card-w) !important;
    min-width:        180px;
    height:           100% !important; /* Responsive height */
    align-self:       stretch !important;
    scroll-snap-align: start;
    border-radius:    15px !important; /* Figma exact radius */
    border:           2px solid #e6e6e6 !important; /* Figma exact border */
    background:       #ffffff !important;
    overflow:         hidden !important;
    padding:          0 !important;
    box-shadow:       0 1px 4px rgba(0,0,0,0.03) !important;
    transition:       background 250ms ease, border-color 250ms ease, box-shadow 250ms ease !important;
    display:          grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-template-columns: 1fr !important;
    gap:              0 !important;
    box-sizing:       border-box !important;
}

/* Hover State */
.rpc-slider-wrapper .rpc-card:hover {
    background: #fdf6e8 !important; /* Cream background */
    border-color: #f5a623 !important; /* Gold border */
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

.rpc-slider-wrapper .rpc-info {
    display: contents !important;
}

.rpc-slider-wrapper .rpc-image-wrap {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.05 !important; /* Keeps it perfectly proportioned instead of huge */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    position: relative !important;
    padding: 24px 20px 10px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.rpc-slider-wrapper .rpc-image-wrap a {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
}

.rpc-slider-wrapper .rpc-image-wrap img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: transform 0.4s ease !important;
    display: block !important;
    border-radius: 0 !important;
}

.rpc-slider-wrapper .rpc-card:hover .rpc-image-wrap img {
    transform: scale(1.03);
}

/* Badges & Icons static sizing */
.rpc-slider-wrapper .rpc-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    color: #fff !important;
    z-index: 10 !important;
    font-family: 'DM Sans', sans-serif !important;
    letter-spacing: 0.5px !important;
}
.rpc-slider-wrapper .rpc-badge-soldout {
    background: #999999 !important;
}
.rpc-slider-wrapper .rpc-badge-sale {
    background: #e31e24 !important; /* Red discount */
}

/* Rating static sizing */
.rpc-slider-wrapper .rpc-rating {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 15px 20px 2px 20px !important; /* Default gaps */
    font-size: 13px !important;
    color: #f5a623 !important;
    line-height: 1 !important;
}
.rpc-slider-wrapper .rpc-rating .rakesh-stars {
    font-size: 14px !important;
    color: #f5a623 !important;
    margin: 0 !important;
    display: inline-block !important;
    letter-spacing: 1px !important;
}
.rpc-slider-wrapper .rpc-rating .rakesh-stars svg {
    width: 13px !important;
    height: 13px !important;
}
.rpc-slider-wrapper .rpc-rating .review-count {
    color: #333333 !important;
    font-size: 11px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    margin-left: 5px !important;
}

/* Title static sizing */
.rpc-slider-wrapper .rpc-title {
    grid-row: 3 !important;
    grid-column: 1 !important;
    color: #e31e24 !important;
    font-family: 'Mazzard', sans-serif !important;
    font-weight: bold !important;
    font-size: 21px !important; /* 21px exact size requested */
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 20px 2px 20px !important;
    align-self: start !important;
    transition: color 250ms ease !important;
}
.rpc-slider-wrapper .rpc-title:hover {
    color: #b81d15 !important;
}

/* Footer & Price static sizing */
.rpc-slider-wrapper .rpc-cart-row {
    grid-row: 4 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0px 20px 20px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.rpc-slider-wrapper .rpc-price {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #333333 !important;
    margin: 0 !important;
    align-self: center !important;
}
.rpc-slider-wrapper .rpc-price ins {
    text-decoration: none !important;
}
.rpc-slider-wrapper .rpc-price del {
    color: #999999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-right: 4px !important;
}

/* Add to Cart button static sizing */
.rpc-slider-wrapper .rpc-add-to-cart {
    display: inline-block !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important; /* Exact padding */
    font-size: 13px !important; /* Exact font size */
    font-weight: 600 !important;
    font-family: 'DM Sans', sans-serif !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 250ms ease !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}
.rpc-slider-wrapper .rpc-card:hover .rpc-add-to-cart,
.rpc-slider-wrapper .rpc-add-to-cart:hover {
    background: #E8A835 !important;
    border-color: #E8A835 !important;
    color: #ffffff !important;
}

/* Floating Icons static sizing (if rendered) */
.rpc-slider-wrapper .rpc-floating-icons {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 6px !important;
    padding: 3px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    opacity: 0 !important;
    transform: translateX(5px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
.rpc-slider-wrapper .rpc-card:hover .rpc-floating-icons {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.rpc-slider-wrapper .rpc-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    color: #666 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.rpc-slider-wrapper .rpc-icon:hover {
    background: #fdf6e8 !important;
    color: #f5a623 !important;
}
.rpc-slider-wrapper .rpc-icon svg {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
}

/* Standalone Heart (Wishlist) */
.rpc-slider-wrapper .standalone-heart {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    color: #ccc !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.rpc-slider-wrapper .standalone-heart svg {
    width: 14px !important;
    height: 14px !important;
}
.rpc-slider-wrapper .standalone-heart:hover {
    background: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #fff !important;
}

/* Homepage Theme specific overrides (Ensures exact compliance) */
.rpc-slider-wrapper.rpc-theme-homepage .rpc-card {
    border-radius: 15px !important;
    border: 2px solid #e6e6e6 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-card:hover {
    background: #fdf6e8 !important;
    border-color: #f5a623 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-image-wrap {
    padding: 0 !important;
    margin: 0 !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-rating {
    margin: 15px 20px 2px 20px !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-title {
    font-size: 21px !important;
    margin: 0 20px 2px 20px !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-cart-row {
    padding: 0px 20px 20px 20px !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-price {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-add-to-cart {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #c4c4c4 !important;
}
.rpc-slider-wrapper.rpc-theme-homepage .rpc-card:hover .rpc-add-to-cart,
.rpc-slider-wrapper.rpc-theme-homepage .rpc-add-to-cart:hover {
    background: #E8A835 !important;
    border-color: #E8A835 !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet: Exactly 3 cards */
@media (max-width: 1024px) {
    .rpc-slider-wrapper {
        --rpc-card-w: calc( (100% - 56px) / 3 ) !important; /* 3 cards minus 2x 28px gaps */
    }
}

/* Mobile: Exactly 2 cards, hide nav arrows */
@media (max-width: 768px) {
    .rpc-slider-wrapper {
        --rpc-card-w: calc( (100% - 16px) / 2 ) !important; /* 2 cards minus 1x 16px gap */
        padding:      0 10px;
    }
    .rpc-slider-nav {
        display: none;
    }
    .rpc-slider-track {
        gap: 16px !important;
    }
}

/* Small mobile: ~1.2 cards */
@media (max-width: 480px) {
    .rpc-slider-wrapper {
        --rpc-card-w: 85vw !important;
        padding:      0;
    }
}