/* ─────────────────────────────────────────────────────────────
   Hanout — WooCommerce Archive Styles (RTL Optimized)
   ───────────────────────────────────────────────────────────── */

/* --- Layout --- */
.hanout-archive-layout {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    align-items: flex-start;
}

/* --- Sidebar --- */
.hanout-archive-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    position: sticky;
    top: 80px;
}

.hanout-filter-widget {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
}

.hanout-filter-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.hanout-filter-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-gray-900);
}

/* Categories Filter */
.hanout-filter-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hanout-filter-cats li {
    margin-bottom: var(--space-2);
}

.hanout-filter-cats a {
    text-decoration: none;
    color: var(--color-gray-600);
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.hanout-filter-cats a:hover,
.hanout-filter-cats .current-cat > a {
    color: var(--color-accent);
    font-weight: 500;
}

.hanout-filter-cats .count {
    color: var(--color-gray-400);
    font-size: 0.8rem;
}

/* Price Filter */
.hanout-price-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.hanout-price-input {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;
}

.hanout-price-btn {
    width: 100%;
    padding: var(--space-2);
    background: var(--color-gray-100);
    color: var(--color-gray-900);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition-fast);
}

.hanout-price-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Rating Filter */
.hanout-rating-filter {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hanout-rating-filter li {
    margin-bottom: var(--space-2);
}

.hanout-rating-filter a {
    text-decoration: none;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--transition-fast);
}

.hanout-rating-filter a:hover,
.hanout-rating-filter a.active {
    color: var(--color-accent);
}

.hanout-star {
    color: #ffd700;
}

/* --- Main Content --- */
.hanout-archive-content {
    flex: 1;
    min-width: 0;
}

/* Top Bar */
.hanout-archive-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-6);
}

.hanout-result-count {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin: 0;
}

.hanout-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.woocommerce-ordering select {
    padding: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    background: var(--color-gray-50);
    font-size: var(--font-size-sm);
    outline: none;
}

.hanout-view-toggles {
    display: flex;
    gap: var(--space-2);
}

.hanout-view-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

.hanout-view-btn:hover,
.hanout-view-btn.active {
    color: var(--color-primary);
}

.hanout-mobile-filter-btn {
    display: none;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
}

/* Product Grid */
.hanout-products {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hanout-products.grid-4 { grid-template-columns: repeat(4, 1fr); }
.hanout-products.grid-2 { grid-template-columns: repeat(2, 1fr); }
.hanout-products.list-view { grid-template-columns: 1fr; }

.hanout-products.list-view .hanout-product-card {
    flex-direction: row;
    align-items: center;
}

.hanout-products.list-view .hanout-product-card__thumb {
    width: 200px;
    flex-shrink: 0;
}

/* Pagination */
.hanout-pagination {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.hanout-pagination .page-numbers {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.hanout-pagination .page-numbers a,
.hanout-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-sm);
    background: var(--color-white);
    color: var(--color-gray-600);
    text-decoration: none;
    font-weight: 500;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-fast);
}

.hanout-pagination .page-numbers a:hover,
.hanout-pagination .page-numbers span.current {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Category Banner */
.hanout-category-banner {
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-8);
    position: relative;
    color: var(--color-white);
    min-height: 200px;
    display: flex;
    align-items: center;
    padding: var(--space-8);
}

.hanout-category-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}

.hanout-category-banner__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hanout-category-banner__title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.hanout-category-banner__desc {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Mobile Drawer Sidebar */
.hanout-mobile-filters-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 80vw;
    height: 100vh;
    background: var(--color-white);
    z-index: 100000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right var(--transition-drawer);
    display: flex;
    flex-direction: column;
}

.hanout-mobile-filters-drawer.is-open {
    right: 0;
}

.hanout-mobile-filters-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.hanout-mobile-filters-drawer__title {
    margin: 0;
    font-size: 1.2rem;
}

.hanout-mobile-filters-drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-gray-500);
}

.hanout-mobile-filters-drawer__content {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hanout-products.grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .hanout-archive-layout { flex-direction: column; }
    .hanout-archive-sidebar { display: none; }
    .hanout-mobile-filter-btn { display: block; }
    .hanout-archive-topbar { flex-wrap: wrap; gap: var(--space-3); }
    .hanout-view-toggles { display: none; }
    .woocommerce-ordering { margin-right: auto; }
    
    .hanout-products.grid-4,
    .hanout-products.grid-2,
    .hanout-products.list-view { grid-template-columns: repeat(2, 1fr); }
    
    .hanout-products.list-view .hanout-product-card { flex-direction: column; }
    .hanout-products.list-view .hanout-product-card__thumb { width: 100%; }
}

@media (max-width: 480px) {
    .hanout-products.grid-4,
    .hanout-products.grid-2 { grid-template-columns: 1fr; }
}