.rosof-wrap * { box-sizing: border-box; } .rosof-wrap { direction: rtl; font-family: inherit; }
.rosof-pos-top .rosof-filter-bar { margin-bottom: 28px; }
.rosof-pos-side {
display: flex;
gap: 28px;
align-items: flex-start;
}
.rosof-pos-side .rosof-filter-bar {
width: 240px;
flex-shrink: 0;
margin-bottom: 0;
}
.rosof-pos-side .rosof-results { flex: 1; min-width: 0; } .rosof-filter-bar {
background: #f8f8f8;
border-radius: 8px;
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.rosof-pos-side .rosof-filter-bar {
flex-direction: column;
}
.rosof-filter-group { display: flex; flex-direction: column; gap: 8px; }
.rosof-filter-label {
font-size: 12px;
font-weight: 700;
color: #555;
letter-spacing: 0.5px;
text-transform: uppercase;
} .rosof-sort {
padding: 7px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
background: #fff;
cursor: pointer;
color: #111;
min-width: 160px;
}
.rosof-sort:focus { outline: none; border-color: #111; } .rosof-price-group { min-width: 220px; }
.rosof-price-display {
font-size: 13px;
font-weight: 600;
color: #111;
margin-right: 6px;
}
.rosof-range-wrap {
position: relative;
height: 36px;
display: flex;
align-items: center;
}
.rosof-range-track {
position: absolute;
width: 100%;
height: 4px;
background: #ddd;
border-radius: 2px;
top: 50%;
transform: translateY(-50%);
}
.rosof-range-fill {
position: absolute;
height: 100%;
background: #111;
border-radius: 2px;
left: 0;
width: 100%;
}
.rosof-range {
position: absolute;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: transparent;
pointer-events: none;
height: 4px;
margin: 0;
padding: 0;
}
.rosof-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #111;
cursor: pointer;
pointer-events: all;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
transition: transform 0.15s;
}
.rosof-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.rosof-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #111;
cursor: pointer;
pointer-events: all;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
} .rosof-attr-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rosof-attr-tag {
padding: 5px 12px;
border: 1.5px solid #ddd;
border-radius: 20px;
background: #fff;
font-size: 12px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.18s;
white-space: nowrap;
}
.rosof-attr-tag:hover { border-color: #111; color: #111; }
.rosof-attr-tag.active {
background: #111;
border-color: #111;
color: #fff;
} .rosof-reset {
padding: 7px 16px;
border: 1.5px solid #ddd;
border-radius: 6px;
background: #fff;
font-size: 12px;
color: #666;
cursor: pointer;
transition: all 0.18s;
align-self: flex-end;
margin-top: auto;
}
.rosof-reset:hover { border-color: #e53935; color: #e53935; } .rosof-status {
font-size: 13px;
color: #888;
margin-bottom: 14px;
min-height: 20px;
}
.rosof-status.loading { color: #aaa; } .rosof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
} .rosof-card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
}
.rosof-card:hover .rosof-img-wrap img { transform: scale(1.04); }
.rosof-img-wrap {
background: #f2f2f2;
border-radius: 4px;
height: 220px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rosof-img-wrap img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.3s ease;
}
.rosof-info {
padding: 0 4px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
}
.rosof-name {
font-size: 13px;
font-weight: 500;
color: #111;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rosof-price {
font-size: 14px;
font-weight: 700;
color: #111;
}
.rosof-price .woocommerce-Price-amount { font-size: inherit; }
.rosof-price-sale ins { text-decoration: none !important; color: #e53935 !important; }
.rosof-price-sale del { color: #aaa !important; font-size: 12px !important; } .rosof-empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 20px;
color: #999;
font-size: 15px;
} @media (max-width: 1024px) {
.rosof-pos-side { flex-direction: column; }
.rosof-pos-side .rosof-filter-bar { width: 100%; flex-direction: row; }
}
@media (max-width: 600px) {
.rosof-filter-bar { gap: 14px; padding: 12px 14px; }
.rosof-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rosof-img-wrap { height: 150px; }
}