.roso-heart-btn {
position: absolute;
bottom: 10px;
left: 58px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #111;
transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
z-index: 6;
padding: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
outline: none;
}
.roso-heart-btn:hover {
background: #e53935;
border-color: #e53935;
color: #fff;
transform: scale(1.1);
}
.roso-heart-btn.active {
background: #e53935;
border-color: #e53935;
color: #fff;
}
.roso-heart-btn.active svg { fill: #fff; stroke: #fff; }
.roso-heart-btn:hover svg { stroke: #fff; }
.roso-heart-btn.pop { animation: roso-heart-pop 0.3s ease; }
@keyframes roso-heart-pop {
0%   { transform: scale(1); }
50%  { transform: scale(1.35); }
100% { transform: scale(1); }
} .rnav-wl-count { display: none !important; } .rwl-wrap {
direction: rtl;
font-family: 'Assistant', 'Rubik', sans-serif;
}
.rwl-grid {
display: flex !important;
flex-direction: column;
gap: 12px;
} .rwl-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
background: #fff;
border-radius: 8px;
border: 1px solid #e8e8e8;
overflow: hidden;
position: relative;
box-shadow: none;
min-height: 110px;
} .rwl-img-wrap {
flex-shrink: 0;
width: 120px;
height: 110px;
display: block;
background: #f5f5f5;
overflow: hidden;
position: relative;
text-decoration: none;
}
.rwl-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rwl-no-img {
width: 100%;
height: 100%;
background: #f0f0f0;
} .rwl-remove-btn {
position: absolute;
bottom: 14px;
right: 10px;
top: auto;
z-index: 5;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
transition: transform 0.15s;
}
.rwl-remove-btn:hover { transform: scale(1.2); }
.rwl-remove-btn svg { fill: #e53935; stroke: none; width: 22px; height: 22px; } .rwl-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 12px 16px;
min-width: 0;
text-align: right;
}
.rwl-brand {
font-size: 10px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
}
.rwl-name {
font-size: 15px;
font-weight: 700;
color: #111;
text-decoration: none;
line-height: 1.3;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rwl-name:hover { color: #e53935; }
.rwl-sub {
font-size: 11px;
color: #999;
line-height: 1.3;
}
.rwl-price {
font-size: 16px;
font-weight: 700;
color: #111;
direction: ltr;
text-align: right;
margin-top: 2px;
} .rwl-actions-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 12px 14px;
border-right: 1px solid #f0f0f0;
min-width: 110px;
} .rwl-qty-wrap {
display: flex;
align-items: center;
gap: 0;
height: 34px;
direction: ltr;
border: 1.5px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.rwl-qty-btn {
width: 30px !important;
height: 32px !important;
background: #fff !important;
background-color: #fff !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
font-size: 18px !important;
font-family: Arial, Helvetica, sans-serif !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #111 !important;
transition: background 0.12s !important;
flex-shrink: 0 !important;
padding: 0 !important;
font-weight: 400 !important;
line-height: 1 !important;
user-select: none !important;
outline: none !important;
box-shadow: none !important;
text-align: center !important;
white-space: nowrap !important;
}
.rwl-qty-btn:hover { background: #f5f5f5 !important; }
.rwl-qty-num {
width: 30px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #111;
font-family: 'Assistant', 'Rubik', sans-serif;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
} .rwl-add-btn {
height: 36px;
padding: 0 10px;
background: #e53935;
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-family: 'Assistant', 'Rubik', sans-serif;
width: 100%;
}
.rwl-add-btn:hover { opacity: 0.88; }
.rwl-add-btn:disabled { opacity: 0.55; pointer-events: none; }
.rwl-add-btn.rwl-added { background: #4caf50; }
.rwl-out-of-stock {
font-size: 11px;
color: #aaa;
font-weight: 500;
text-align: center;
} .rwl-loading { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.rwl-loading span {
height: 110px;
border-radius: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: rwl-shimmer 1.2s infinite;
}
@keyframes rwl-shimmer {
0%   { background-position: 200% 0; }
100% { background-position: -200% 0; }
} .rwl-empty {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
color: #ccc;
font-size: 15px;
} @media (max-width: 540px) {
.rwl-img-wrap { width: 90px; height: 90px; }
.rwl-card { min-height: 90px; }
.rwl-name { font-size: 13px; }
.rwl-price { font-size: 14px; }
.rwl-actions-col { min-width: 90px; padding: 10px; }
.rwl-add-btn { font-size: 12px; }
}