/**
 * Rakesh Product Cards Widget — Unified Design System
 * Matches the approved homepage card styling 100% with the top-right floating icons pill.
 * Version: 2.2.0
 */

/* ===== Grid Container ===== */
.rpc-widget {
    --rpc-cols:        4;
    --rpc-cols-tablet: 2;
    --rpc-cols-mobile: 1;
    font-family: 'Montserrat', Arial, sans-serif;
}

.rpc-grid {
    display: grid;
    grid-template-columns: repeat( var(--rpc-cols), 1fr );
    column-gap: 25px;
    row-gap: 28px;
    margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
    .rpc-grid { grid-template-columns: repeat( var(--rpc-cols-tablet), 1fr ); gap: 20px; }
}
@media (max-width: 600px) {
    .rpc-grid { grid-template-columns: repeat( var(--rpc-cols-mobile), 1fr ); gap: 15px; }
}

/* ===== Single Card (Exact 2px #E6E6E6 border & 15px radius) ===== */
html body .rpc-widget .rpc-card,
.rpc-card {
    position:          relative !important;
    display:           flex !important;
    flex-direction:    column !important;
    background:        #ffffff !important;
    background-color:  #ffffff !important;
    border:            2px solid #E6E6E6 !important;
    border-radius:     15px !important;
    padding:           18px 16px 16px !important;
    box-sizing:        border-box !important;
    overflow:          visible !important;
    box-shadow:        0 1px 4px rgba(0,0,0,0.03) !important;
    transition:        box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
    cursor:            pointer;
    height:            100% !important;
}

html body .rpc-widget .rpc-card:hover,
.rpc-card:hover {
    background:        #ffffff !important;
    background-color:  #ffffff !important;
    border-color:      #d8d8d8 !important;
    box-shadow:        0 10px 26px rgba(0,0,0,0.08) !important;
    transform:         translateY(-3px) !important;
}

/* ===== Discount Badge (Top-Left) ===== */
.rpc-badge {
    position:       absolute !important;
    top:            12px !important;
    left:           12px !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: .3px !important;
    padding:        5px 10px !important;
    border-radius:  6px !important;
    color:          #ffffff !important;
    z-index:        10 !important;
    line-height:    1 !important;
    font-family:    'Montserrat', Arial, sans-serif !important;
}
.rpc-badge-soldout { background: #999999 !important; }
.rpc-badge-sale    { background: #e02020 !important; }

/* ===== Floating Action Icons Pill (Top-Right) ===== */
.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:  8px !important;
    padding:        3px !important;
    box-shadow:     0 4px 14px rgba(0,0,0,0.08) !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-card:hover .rpc-floating-icons {
    opacity:        1 !important;
    transform:      translateX(0) !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    .rpc-floating-icons {
        opacity:        1 !important;
        transform:      translateX(0) !important;
        pointer-events: auto !important;
    }
}

.rpc-icon {
    width:           28px !important;
    height:          28px !important;
    border-radius:   6px !important;
    border:          none !important;
    background:      transparent !important;
    color:           #555555 !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-icon:hover {
    background: #f6f7f8 !important;
    color:      #e31e24 !important;
}

.rpc-icon svg {
    display:        block !important;
    width:          15px !important;
    height:         15px !important;
    pointer-events: none !important;
}

/* ===== Image Area ===== */
.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-image-wrap a {
    display:    block !important;
    height:     100% !important;
    width:      100% !important;
    text-align: center !important;
}

.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-card:hover .rpc-image-wrap img {
    transform: scale(1.04);
}

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

/* ===== Rating (Stars) ===== */
.rpc-rating {
    display:       flex !important;
    align-items:   center !important;
    margin-bottom: 8px !important;
    line-height:   1 !important;
}

.rpc-rating .rakesh-stars {
    display:     flex !important;
    align-items: center !important;
    color:       #f5a623 !important;
    margin:      0 !important;
}

.rpc-rating .review-count {
    color:       #888888 !important;
    font-size:   11px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 500 !important;
    margin-left: 4px !important;
}

/* ===== Title & Price Row (Horizontal baseline alignment) ===== */
.rpc-title-price-row {
    display:         flex !important;
    align-items:     baseline !important;
    justify-content: space-between !important;
    gap:             10px !important;
    margin-bottom:   0 !important;
    padding:         0 !important;
    width:           100% !important;
    box-sizing:      border-box !important;
    min-height:      42px !important;
}

.rpc-title {
    margin:          0 !important;
    padding:         0 !important;
    font-size:       17px !important;
    font-weight:     700 !important;
    color:           #e63329 !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;
    text-transform:  capitalize !important;
}
.rpc-title:hover { color: #c0191f !important; }

.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;
}

/* Current Price */
.rpc-price .woocommerce-Price-amount,
.rpc-price ins .woocommerce-Price-amount {
    font-size:   18px !important;
    font-weight: 700 !important;
    color:       #1a1a1a !important;
    line-height: 1 !important;
}
.rpc-price .woocommerce-Price-currencySymbol {
    font-size:    17px !important;
    font-weight:  700 !important;
    margin-right: 1px !important;
    color:        #1a1a1a !important;
}

/* Strikethrough Regular Price */
.rpc-price del {
    color:           #999999 !important;
    font-size:       13px !important;
    font-weight:     400 !important;
    margin:          3px 0 0 0 !important;
    text-decoration: line-through !important;
    opacity:         0.8 !important;
    display:         block !important;
    line-height:     1 !important;
}
.rpc-price del .woocommerce-Price-amount,
.rpc-price del .woocommerce-Price-currencySymbol {
    color:       #999999 !important;
    font-weight: 400 !important;
    font-size:   13px !important;
}

/* Hide (% OFF) tag */
.rakesh-discount-tag { display: none !important; }

/* ===== Cart Row (40px Flush Dropdown & Button) ===== */
.rpc-cart-row {
    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
    margin-top:     14px !important;
    height:         40px !important;
    box-sizing:     border-box !important;
}

.rpc-variants {
    flex:        0 0 auto !important;
    width:       68px !important;
    min-width:   60px !important;
    height:      40px !important;
    box-sizing:  border-box !important;
}

/* Variant Dropdown with Sleek Outline Chevron (⌄) */
.rpc-variant-select {
    display:            block !important;
    width:              100% !important;
    height:             40px !important;
    min-height:         40px !important;
    max-height:         40px !important;
    line-height:        38px !important;
    padding:            0 22px 0 8px !important;
    margin:             0 !important;
    font-family:        'Montserrat', Arial, sans-serif !important;
    font-size:          13px !important;
    font-weight:        600 !important;
    color:              #3c3c3c !important;
    background:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1.2L5.5 5.5L10 1.2' stroke='%233C3C3C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px auto #ffffff !important;
    border:             1px solid #c4c4c4 !important;
    border-radius:      8px !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    cursor:             pointer !important;
    outline:            none !important;
    box-shadow:         none !important;
    box-sizing:         border-box !important;
}
.rpc-variant-select:disabled {
    cursor:  default !important;
    opacity: 0.9 !important;
}

/* ADD TO CART Button: Exactly 40px height, #3C3C3C dark charcoal text */
html body .rpc-card .rpc-cart-row a.rpc-add-to-cart,
html body .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,
.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:        15px !important;
    font-weight:      600 !important;
    letter-spacing:   0px !important;
    line-height:      40px !important;
    text-align:       center !important;
    text-decoration:  none !important;
    text-transform:   uppercase !important;
    cursor:           pointer !important;
    white-space:      nowrap !important;
    padding:          0 8px !important;
    margin:           0 !important;
    box-sizing:       border-box !important;
    transition:       background-color 0.2s ease, transform 0.15s ease !important;
}

/* Keep Dark Charcoal Text on Card Hover and Button Hover */
html body .rpc-card:hover .rpc-cart-row a.rpc-add-to-cart,
html body .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,
.rpc-card:hover .rpc-add-to-cart {
    background-color: #F6C739 !important;
    background:       #F6C739 !important;
    color:            #3C3C3C !important;
}

html body .rpc-card .rpc-cart-row a.rpc-add-to-cart:hover,
html body .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,
.rpc-add-to-cart:hover {
    background-color: #e5b728 !important;
    background:       #e5b728 !important;
    color:            #3C3C3C !important;
}

/* Sold Out / Disabled Button State */
html body .rpc-card .rpc-cart-row .rpc-add-to-cart.rpc-sold-out-btn,
html body .rpc-card .rpc-cart-row button.rpc-sold-out-btn,
html body .elementor-element .rpc-card .rpc-cart-row .rpc-sold-out-btn,
html body .elementor-element .rpc-card .rpc-cart-row .rpc-add-to-cart.disabled,
html body .elementor-element .rpc-card .rpc-cart-row .rpc-add-to-cart:disabled,
.rpc-add-to-cart.rpc-sold-out-btn,
.rpc-add-to-cart.disabled,
.rpc-add-to-cart:disabled {
    background-color: #E2E2E2 !important;
    background:       #E2E2E2 !important;
    color:            #8E8E8E !important;
    cursor:           not-allowed !important;
    pointer-events:   none !important;
    transform:        none !important;
    box-shadow:       none !important;
    border:           none !important;
}

html body .rpc-card:hover .rpc-cart-row .rpc-sold-out-btn,
html body .rpc-card:hover .rpc-cart-row button.rpc-sold-out-btn,
html body .elementor-element .rpc-card:hover .rpc-cart-row .rpc-sold-out-btn,
.rpc-card:hover .rpc-sold-out-btn {
    background-color: #E2E2E2 !important;
    background:       #E2E2E2 !important;
    color:            #8E8E8E !important;
}

/* ===== Toast notifications ===== */
.rpc-toast {
    position:   fixed;
    bottom:     30px;
    left:       50%;
    transform:  translateX(-50%) translateY(20px);
    background: #222;
    color:      #fff;
    padding:    10px 20px;
    border-radius: 8px;
    font-size:  13px;
    font-family: 'Montserrat', Arial, sans-serif;
    z-index:    99999;
    opacity:    0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}
.rpc-toast.show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}