/*
 * Rakesh Product Carousel — style-v2.css
 * Design: Matches user custom HTML/CSS reference exactly.
 * Font: Montserrat | Image: 290px | Button: #f5c842
 */

/* ── Design Tokens ──────────────────────────────────────────────────── */
.rpc-slider-wrapper {
    --rm-yellow:      #F6C739;
    --rm-yellow-dark: #e5b728;
    --rm-red:         #e63329;
    --rm-badge:       #e02020;
    --rm-ink:         #1a1a1a;
    --rm-muted:       #9a9a9a;
    --rm-line:        #ececec;
    --rm-star:        #f0a500;
    --rpc-card-w:     calc((100% - 75px) / 4); /* 4 cards per view */

    position:    relative;
    width:       100%;
    max-width:   1280px;
    margin:      0 auto;
    padding:     0 56px;
    box-sizing:  border-box;
    font-family: 'Montserrat', Arial, sans-serif;
    color:       var(--rm-ink);
}

/* ── View All Header ─────────────────────────────────────────────────── */
.rpc-slider-header {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   16px;
}
.rpc-view-all-btn {
    background:      #fff;
    border:          1px solid #eaeaea;
    color:           #333;
    padding:         6px 18px;
    border-radius:   20px;
    font-size:       13px;
    font-weight:     600;
    font-family:     'Montserrat', Arial, sans-serif;
    text-decoration: none;
    transition:      border-color 0.2s ease;
}
.rpc-view-all-btn:hover { border-color: #ccc; }

/* ── Navigation Buttons ─────────────────────────────────────────────── */
.rpc-slider-inner { position: relative; }

.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:       22px;
    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:  -48px; }
.rpc-slider-nav.next { right: -48px; }
.rpc-slider-nav:hover { background: #e0e0e0; }

/* ── Slider Track ───────────────────────────────────────────────────── */
.rpc-slider-track {
    display:            flex;
    gap:                25px; /* Clean gap for 4 cards */
    overflow-x:         auto;
    scroll-behavior:    smooth;
    -ms-overflow-style: none;
    scrollbar-width:    none;
    scroll-snap-type:   x mandatory;
    padding:            10px 4px;
    align-items:        stretch;
}
.rpc-slider-track::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════ */

html body .rpc-slider-wrapper .rpc-card {
    position:         relative;
    flex:             0 0 auto;
    width:            var(--rpc-card-w) !important;
    min-width:        200px;
    height:           auto !important;
    min-height:       auto !important;
    align-self:       stretch !important;
    scroll-snap-align: start;
    display:          flex !important;
    flex-direction:   column !important;
    background:       #ffffff !important;
    border:           2px solid #E6E6E6 !important; /* Figma exact 2px #E6E6E6 */
    border-radius:    15px !important; /* Figma exact 15px radius */
    padding:          18px 16px 16px !important;
    box-sizing:       border-box !important;
    overflow:         visible !important;
    transition:       box-shadow .25s ease, transform .25s ease !important;
}
html body .rpc-slider-wrapper .rpc-card:hover {
    border-color:     #d8d8d8 !important;
    box-shadow:       0 10px 26px rgba(0,0,0,.08) !important;
    transform:        translateY(-3px) !important;
}

/* ── Discount Badge ─────────────────────────────────────────────────── */
.rpc-slider-wrapper .rpc-badge {
    position:       absolute !important;
    top:            0 !important;
    right:          0 !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: .3px !important;
    padding:        6px 12px !important;
    border-radius:  0 13px 0 10px !important; /* Curves flush with 15px card radius */
    color:          #fff !important;
    z-index:        10 !important;
    line-height:    1 !important;
    font-family:    'Montserrat', Arial, sans-serif !important;
}
.rpc-slider-wrapper .rpc-badge-soldout { background: #999 !important; }
.rpc-slider-wrapper .rpc-badge-sale    { background: var(--rm-badge) !important; }

/* ── Image Area (Proportional for 4 cards) ─────────────────────────── */
.rpc-slider-wrapper .rpc-image-wrap {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    height:          310px !important;
    flex-shrink:     0 !important;
    margin-bottom:   14px !important;
    padding:         0 !important;
    background:      transparent !important;
    position:        relative !important;
    overflow:        hidden !important;
    box-sizing:      border-box !important;
}
.rpc-slider-wrapper .rpc-image-wrap a {
    display:    block !important;
    height:     100% !important;
    width:      100% !important;
    text-align: center !important;
}
.rpc-slider-wrapper .rpc-image-wrap img {
    width:           auto !important;
    max-width:       100% !important;
    max-height:      100% !important;
    height:          auto !important;
    object-fit:      contain !important;
    object-position: center !important;
    display:         block !important;
    margin:          0 auto !important;
    border-radius:   0 !important;
    transition:      transform 0.4s ease !important;
}
.rpc-slider-wrapper .rpc-card:hover .rpc-image-wrap img {
    transform: scale(1.04);
}

/* ── Info Section ───────────────────────────────────────────────────── */
.rpc-slider-wrapper .rpc-info {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
}

/* ── Star Rating ────────────────────────────────────────────────────── */
.rpc-slider-wrapper .rpc-rating {
    display:     flex !important;
    align-items: center !important;
    gap:         4px !important;
    margin:      0 0 10px 0 !important; /* Figma exact ~10.38px gap */
    line-height: 1 !important;
}
.rpc-slider-wrapper .rpc-rating .rakesh-stars {
    color:       var(--rm-star) !important;
    margin:      0 !important;
    display:     inline-flex !important;
    align-items: center !important;
    gap:         0 !important;
}
.rpc-slider-wrapper .rpc-rating .rakesh-stars svg {
    width:  13px !important;
    height: 13px !important;
}
.rpc-slider-wrapper .rpc-rating .review-count {
    color:       var(--rm-muted) !important;
    font-size:   11px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* Card Background (forced white even on hover) */
html body .rpc-slider-wrapper .rpc-card,
html body .elementor-element .rpc-card,
html body .rpc-slider-wrapper .rpc-card:hover,
html body .elementor-element .rpc-card:hover {
    background:       #ffffff !important;
    background-color: #ffffff !important;
}

/* ── Title & Price Row (side by side, horizontally aligned on baseline) ── */
.rpc-slider-wrapper .rpc-title-price-row {
    display:         flex !important;
    align-items:     baseline !important; /* Perfect optical baseline alignment */
    justify-content: space-between !important;
    gap:             10px !important;
    margin-bottom:   0 !important;
    padding:         0 !important; /* Reset padding to 0 to flush with stars, dropdown and button */
    width:           100% !important;
    box-sizing:      border-box !important;
    min-height:      42px !important; /* Locks uniform row height so all 4 buttons align horizontally */
}

.rpc-slider-wrapper .rpc-title {
    margin:          0 !important;
    padding:         0 !important;
    font-size:       17px !important; /* Figma bold title */
    font-weight:     700 !important;
    color:           var(--rm-red) !important;
    line-height:     1.2 !important;
    text-decoration: none !important;
    flex:            1 !important;
    font-family:     'Montserrat', Arial, sans-serif !important;
    transition:      color 0.2s ease !important;
}
.rpc-slider-wrapper .rpc-title:hover { color: #c0191f !important; }

.rpc-slider-wrapper .rpc-price {
    margin:          0 !important;
    padding:         0 !important;
    text-align:      right !important;
    white-space:     nowrap !important;
    flex-shrink:     0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     flex-end !important;
    font-family:     'Montserrat', Arial, sans-serif !important;
    line-height:     1.2 !important;
    position:        relative !important;
    top:             1px !important; /* Nudges price slightly to be optically flush with title */
}
/* Current price */
.rpc-slider-wrapper .rpc-price .woocommerce-Price-amount,
.rpc-slider-wrapper .rpc-price > span.woocommerce-Price-amount,
.rpc-slider-wrapper .rpc-price ins {
    font-size:       18px !important; /* Figma bold price */
    font-weight:     700 !important;
    color:           var(--rm-ink) !important;
    text-decoration: none !important;
    line-height:     1.15 !important;
    margin:          0 !important;
    padding:         0 !important;
}
.rpc-slider-wrapper .rpc-price ins .woocommerce-Price-amount {
    color: var(--rm-ink) !important;
}
/* Original / crossed price (del) — subtle and light per Figma */
.rpc-slider-wrapper .rpc-price del {
    display:         block !important;
    font-size:       13px !important;
    font-weight:     400 !important;
    color:           #999999 !important;
    text-decoration: line-through !important;
    margin-top:      3px !important;
    line-height:     1.15 !important;
}
.rpc-slider-wrapper .rpc-price del .woocommerce-Price-amount {
    font-size:       13px !important;
    font-weight:     400 !important;
    color:           #999999 !important;
    line-height:     1.15 !important;
}
.rakesh-discount-tag {
    display: none !important;
}

/* ── Actions Row (Dropdown + Add to Cart) ────────────────────────────── */
.rpc-slider-wrapper .rpc-cart-row {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    margin-top:  14px !important;
    padding:     0 !important;
    width:       100% !important;
    height:      40px !important;
    box-sizing:  border-box !important;
}

.rpc-slider-wrapper .rpc-variants {
    flex:        0 0 88px !important;
    width:       88px !important;
    height:      40px !important;
    margin:      0 !important;
    padding:     0 !important;
    box-sizing:  border-box !important;
}

/* Dropdown: Exactly 40px height, thin grey border, sleek outline chevron */
.rpc-slider-wrapper .rpc-variant-select {
    width:               100% !important;
    height:              40px !important;
    max-height:          40px !important;
    min-height:          40px !important;
    appearance:          none !important;
    -webkit-appearance:  none !important;
    border:              1px solid #c4c4c4 !important;
    border-radius:       8px !important;
    background-color:    #ffffff !important;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%233C3C3C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.2l4 3.6 4-3.6'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 12px center !important;
    padding:             0 26px 0 12px !important;
    font-family:         'Montserrat', Arial, sans-serif !important;
    font-size:           13px !important;
    font-weight:         500 !important;
    color:               #3C3C3C !important;
    cursor:              pointer !important;
    box-sizing:          border-box !important;
    outline:             none !important;
    margin:              0 !important;
    line-height:         38px !important;
}
.rpc-slider-wrapper .rpc-variant-select:focus {
    outline:        none !important;
    border-color:   #999 !important;
}

/* Add to Cart button: Exactly 40px height, #3C3C3C dark text, high priority over Elementor */
html body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart,
html body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart.button,
html body .elementor-element .rpc-card .rpc-cart-row a.rpc-add-to-cart,
html body .elementor-element .rpc-card .rpc-add-to-cart {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            1 !important;
    height:          40px !important;
    max-height:      40px !important;
    min-height:      40px !important;
    border:          0 !important;
    border-radius:   10px !important;
    background-color: #F6C739 !important;
    background:      #F6C739 !important;
    color:           #3C3C3C !important;
    font-family:     'Mazzard', 'Montserrat', Arial, sans-serif !important;
    font-size:       16px !important;
    font-weight:     600 !important;
    line-height:     40px !important;
    letter-spacing:  0px !important;
    text-transform:  uppercase !important;
    text-decoration: none !important;
    text-align:      center !important;
    padding:         0 8px !important;
    margin:          0 !important;
    cursor:          pointer !important;
    white-space:     nowrap !important;
    transition:      background .2s ease !important;
    box-sizing:      border-box !important;
}

html body .rpc-slider-wrapper .rpc-card:hover .rpc-cart-row a.rpc-add-to-cart,
html body .rpc-slider-wrapper .rpc-card:hover .rpc-cart-row a.rpc-add-to-cart.button,
html body .elementor-element .rpc-card:hover .rpc-add-to-cart,
html body .elementor-element .rpc-card:hover .rpc-cart-row a.rpc-add-to-cart {
    background-color: #F6C739 !important;
    background:      #F6C739 !important;
    color:           #3C3C3C !important;
}

html body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart:hover,
html body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart.button:hover,
html body .elementor-element .rpc-card .rpc-add-to-cart:hover,
html body .elementor-element .rpc-card:hover .rpc-add-to-cart:hover {
    background-color: #e5b728 !important;
    background:      #e5b728 !important;
    color:           #3C3C3C !important;
}

/* ── Floating Icons (hover only) ─────────────────────────────────────── */
.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:     #fff !important;
    border:         1px solid #e6e6e6 !important;
    border-radius:  6px !important;
    padding:        3px !important;
    box-shadow:     0 2px 10px rgba(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:      var(--rm-yellow) !important;
}
.rpc-slider-wrapper .rpc-icon svg {
    display:        block !important;
    width:          10px !important;
    height:         10px !important;
    pointer-events: none !important;
}

/* ── Standalone Wishlist Heart ───────────────────────────────────────── */
.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:   var(--rm-yellow) !important;
    border-color: var(--rm-yellow) !important;
    color:        #fff !important;
}

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

@media (max-width: 1200px) {
    .rpc-slider-wrapper {
        --rpc-card-w: calc((100% - 50px) / 3);
    }
}

@media (max-width: 900px) {
    .rpc-slider-wrapper {
        --rpc-card-w: calc((100% - 20px) / 2);
        padding:      0 10px;
    }
    .rpc-slider-nav { display: none; }
    .rpc-slider-track { gap: 15px; }
    .rpc-slider-wrapper .rpc-image-wrap { height: 260px !important; }
    .rpc-slider-wrapper .rpc-cart-row {
        flex-direction: column !important;
        align-items:    stretch !important;
        gap:            8px !important;
        height:         auto !important;
    }
    .rpc-slider-wrapper .rpc-variants { width: 100% !important; flex: 1 1 auto !important; }
    .rpc-slider-wrapper .rpc-variant-select { width: 100% !important; }
    body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart.button,
    body .rpc-slider-wrapper .rpc-card .rpc-cart-row a.rpc-add-to-cart {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    .rpc-slider-wrapper {
        --rpc-card-w: 80vw;
        padding:      0;
    }
    .rpc-slider-wrapper .rpc-image-wrap { height: 260px !important; }
}