/**
 * Rakesh Product Cards Widget — Styles v2.3.0 (Figma Exact Match)
 */
@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@400;600;800&display=swap');


/* ===== Grid ===== */
.rpc-widget {
    --rpc-cols:        4;
    --rpc-cols-tablet: 2;
    --rpc-cols-mobile: 1;
}

.rpc-grid {
    display: grid;
    grid-template-columns: repeat( var(--rpc-cols), 1fr );
    column-gap: 28px; /* Figma horizontal gap */
    row-gap: 28px; /* Figma vertical gap exactly matching the screenshot */
    margin-bottom: 0 !important; /* Ensure no extra space at the bottom of the widget */
}

@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 ===== */
.rpc-card {
    position: relative;
    background: #ffffff !important;
    border: 2px solid #e6e6e6 !important; /* Figma exact border */
    border-radius: 15px !important; /* Figma exact radius */
    overflow: hidden !important;
    padding: 0 !important; /* Removed padding to let image hit edges */
    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; /* Let aspect ratio dictate image height */
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    height: 100% !important;
    cursor: pointer;
}

/* Hover State */
.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;
}

/* ===== Transparent Wrapper to Expose Children to Grid ===== */
.rpc-info {
    display: contents !important;
}

/* ===== Image Area (Row 1) ===== */
.rpc-image-wrap {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important; /* Must be visible so floating icons don't get cut off when moved right */
}

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

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

/* ===== Floating Icons (Hover Only) ===== */
.rpc-floating-icons {
    position: absolute !important;
    top: 12px !important; /* Move down to clear border radius */
    right: 12px !important; /* Move left to clear border radius */
    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-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: 20px !important; /* Made smaller again */
    height: 20px !important; /* Made smaller again */
    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-icon:hover {
    background: #fdf6e8 !important;
    color: #f5a623 !important;
}

.rpc-icon svg {
    display: block !important;
    width: 10px !important; /* Scaled down icon again */
    height: 10px !important; /* Scaled down icon again */
    pointer-events: none !important;
}

/* ===== Rating (Row 2) ===== */
.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; /* Reduced bottom gap even more */
    font-size: 13px !important;
    color: #f5a623 !important; /* Gold stars */
    line-height: 1 !important;
}

/* Hardcoded Stars */
.rpc-rating .rakesh-stars {
    font-size: 14px !important;
    color: #f5a623 !important;
    margin: 0 !important;
    display: inline-block !important;
    letter-spacing: 1px !important;
}

.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 (Row 3) ===== */
.rpc-title {
    grid-row: 3 !important;
    grid-column: 1 !important;
    color: #e31e24 !important; /* Red title */
    font-family: 'Mazzard', sans-serif !important;
    font-weight: bold !important; /* Changed to bold */
    font-size: 21px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 20px 2px 20px !important; /* Reduced bottom gap to tighten space */
    align-self: start !important;
}

.rpc-title:hover {
    color: #b81d15 !important;
}

/* ===== Price and Add to Cart Button (Row 4) ===== */
.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; /* Removed top padding to pull price closer to title */
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rpc-price {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #333333 !important; /* Dark bold price */
    margin: 0 !important;
    align-self: center !important;
}

.rpc-price ins {
    text-decoration: none !important;
}

.rpc-price del {
    color: #999999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-right: 4px !important;
}

/* ===== Add to Cart Button ===== */
.rpc-add-to-cart {
    display: inline-block !important;
    background: #ffffff !important; /* White background */
    color: #333333 !important; /* Dark text */
    border: 1px solid #c4c4c4 !important; /* Gray border like Figma */
    border-radius: 6px !important; /* Figma radius */
    padding: 8px 16px !important;
    font-size: 13px !important;
    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;
}

/* Hover style */
.rpc-card:hover .rpc-add-to-cart,
.rpc-add-to-cart:hover {
    background: #E8A835 !important; /* Turns gold/yellow */
    border-color: #E8A835 !important;
    color: #ffffff !important; /* White text */
}

/* ===== No products ===== */
.rpc-no-products {
    color: #888;
    font-style: italic;
    font-family: 'DM Sans', sans-serif;
}

/* ===== 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: 'DM Sans', 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);
}