/* Category Hero */
.category-hero {
position: relative;
min-height: 320px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
margin-top: var(--header-height);
}

.category-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(61, 41, 20, 0.85) 0%, rgba(61, 41, 20, 0.6) 100%);
}

.category-hero-content {
position: relative;
z-index: 1;
color: white;
padding: var(--space-3xl) 0;
max-width: 600px;
}

.category-hero-title {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-black);
margin-bottom: var(--space-md);
color: white;
}

.category-hero-desc {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--space-lg);
color: rgba(255, 255, 255, 0.9);
}

.category-hero-meta {
display: flex;
gap: var(--space-lg);
flex-wrap: wrap;
}

.category-meta-item {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
opacity: 0.85;
}

/* Modern Breadcrumbs */
.breadcrumbs-modern {
background: var(--color-bg-section);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--color-border);
}

.breadcrumbs-modern-list {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
flex-wrap: wrap;
}

.breadcrumbs-link {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-text-muted);
transition: color var(--transition-fast);
}

.breadcrumbs-link:hover {
color: var(--color-primary);
}

.breadcrumbs-modern-separator {
color: var(--color-border-dark);
}

.breadcrumbs-modern-item--current {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}

/* Category Layout */
.category-section {
padding-top: var(--space-xl);
}

.category-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-2xl);
}

/* Sidebar */
.category-sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-xl));
height: fit-content;
max-height: calc(100vh - var(--header-height) - var(--space-2xl));
overflow-y: auto;
padding-right: var(--space-sm);
}

.category-sidebar::-webkit-scrollbar {
width: 4px;
}

.category-sidebar::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-full);
}

.filters-header-mobile {
display: none;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-lg);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}

.filters-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--color-bg-section);
color: var(--color-text-primary);
}

/* Filter Groups */
.filter-group {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-border-light);
}

.filter-group:last-of-type {
border-bottom: none;
}

.filter-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--color-text-primary);
}

.filter-title svg {
color: var(--color-primary);
}

/* Price Range */
.filter-price-range {
padding: var(--space-sm) 0;
}

.price-inputs {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}

.price-input-wrap {
position: relative;
flex: 1;
}

.price-currency {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
}

.price-input {
width: 100%;
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
transition: border-color var(--transition-fast);
}

.price-input:focus {
outline: none;
border-color: var(--color-primary);
}

.price-separator {
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
}

.range-slider {
position: relative;
height: 6px;
margin-top: var(--space-md);
}

.range-slider-track {
position: absolute;
width: 100%;
height: 100%;
background: var(--color-border);
border-radius: var(--radius-full);
}

.range-slider-fill {
position: absolute;
height: 100%;
background: var(--color-primary);
border-radius: var(--radius-full);
}

.range-input {
position: absolute;
width: 100%;
height: 100%;
-webkit-appearance: none;
appearance: none;
background: none;
pointer-events: none;
top: 0;
}

.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: var(--color-primary);
border: 3px solid white;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}

.range-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
}

.range-input::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--color-primary);
border: 3px solid white;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
box-shadow: var(--shadow-sm);
}

/* Filter Options */
.filter-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.filter-radio,
.filter-checkbox {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
padding: var(--space-xs) 0;
transition: color var(--transition-fast);
}

.filter-radio:hover,
.filter-checkbox:hover {
color: var(--color-primary);
}

.filter-radio input,
.filter-checkbox input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.radio-custom {
width: 18px;
height: 18px;
border: 2px solid var(--color-border-dark);
border-radius: 50%;
position: relative;
flex-shrink: 0;
transition: all var(--transition-fast);
}

.filter-radio input:checked + .radio-custom {
border-color: var(--color-primary);
background: var(--color-primary);
}

.radio-custom::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform var(--transition-fast);
}

.filter-radio input:checked + .radio-custom::after {
transform: translate(-50%, -50%) scale(1);
}

.checkbox-custom {
width: 18px;
height: 18px;
border: 2px solid var(--color-border-dark);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition-fast);
}

.filter-checkbox input:checked + .checkbox-custom {
border-color: var(--color-primary);
background: var(--color-primary);
}

.checkbox-custom svg {
opacity: 0;
transform: scale(0);
transition: all var(--transition-fast);
color: white;
}

.filter-checkbox input:checked + .checkbox-custom svg {
opacity: 1;
transform: scale(1);
}

.radio-label,
.checkbox-label {
flex: 1;
font-size: var(--font-size-sm);
}

.filter-count {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
background: var(--color-bg-section);
padding: 2px 6px;
border-radius: var(--radius-sm);
}

/* Tags Cloud */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}

.tag-link {
display: inline-block;
padding: var(--space-xs) var(--space-sm);
background: var(--color-bg-section);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}

.tag-link:hover {
background: var(--color-primary);
color: white;
}

.tag-link.active {
background: var(--color-primary);
color: white;
}

/* Reset Button */
.btn-reset-filters {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-md);
border: 1px dashed var(--color-border-dark);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
transition: all var(--transition-fast);
margin-bottom: var(--space-xl);
}

.btn-reset-filters:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

/* Sidebar CTA */
.sidebar-cta {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: var(--radius-xl);
padding: var(--space-xl);
color: white;
text-align: center;
}

.sidebar-cta-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
}

.sidebar-cta-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-xs);
color: white;
}

.sidebar-cta-text {
font-size: var(--font-size-sm);
opacity: 0.9;
margin-bottom: var(--space-md);
color: rgba(255, 255, 255, 0.9);
}

.sidebar-cta-form {
display: flex;
gap: var(--space-xs);
}

.sidebar-cta-input {
flex: 1;
padding: var(--space-sm) var(--space-md);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
background: rgba(255, 255, 255, 0.9);
}

.sidebar-cta-input:focus {
outline: none;
background: white;
}

.sidebar-cta-btn {
width: 40px;
height: 40px;
background: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
transition: transform var(--transition-fast);
}

.sidebar-cta-btn:hover {
transform: scale(1.05);
}

/* Toolbar */
.category-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}

.btn-filters-toggle {
display: none;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-bg-section);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background var(--transition-fast);
}

.btn-filters-toggle:hover {
background: var(--color-border);
}

.toolbar-sort {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-sm);
}

.toolbar-sort label {
color: var(--color-text-muted);
}

.sort-select-wrap {
position: relative;
}

.sort-select {
appearance: none;
padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-light);
font-size: var(--font-size-sm);
cursor: pointer;
min-width: 180px;
}

.sort-select:focus {
outline: none;
border-color: var(--color-primary);
}

.sort-arrow {
position: absolute;
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--color-text-muted);
}

.toolbar-view {
display: flex;
gap: var(--space-xs);
}

.view-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--color-text-muted);
transition: all var(--transition-fast);
}

.view-btn:hover {
background: var(--color-bg-section);
color: var(--color-text-primary);
}

.view-btn.active {
background: var(--color-primary);
color: white;
}

/* Skeleton Loading */
.products-skeleton {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}

.skeleton-card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
}

.skeleton-image {
aspect-ratio: 1;
background: linear-gradient(90deg, var(--color-bg-section) 25%, var(--color-border) 50%, var(--color-bg-section) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}

.skeleton-content {
padding: var(--space-lg);
}

.skeleton-title {
height: 20px;
background: var(--color-bg-section);
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
width: 80%;
animation: skeleton-loading 1.5s infinite;
}

.skeleton-text {
height: 14px;
background: var(--color-bg-section);
border-radius: var(--radius-sm);
margin-bottom: var(--space-md);
width: 60%;
animation: skeleton-loading 1.5s infinite;
}

.skeleton-price {
height: 24px;
background: var(--color-bg-section);
border-radius: var(--radius-sm);
width: 40%;
animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* Modern Products Grid */
.products-grid-modern {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}

.product-card-modern {
background: var(--color-bg-card);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
position: relative;
}

.product-card-modern:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-card-hover);
}

.product-card-image-wrap {
position: relative;
display: block;
aspect-ratio: 1;
overflow: hidden;
background: var(--color-bg-section);
}

.product-card-images {
position: relative;
width: 100%;
height: 100%;
}

.product-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--transition-base), transform var(--transition-slow);
}

.product-card-img-secondary {
opacity: 0;
}

.product-card-modern:hover .product-card-img-primary {
opacity: 0;
}

.product-card-modern:hover .product-card-img-secondary {
opacity: 1;
transform: scale(1.05);
}

.product-card-badges {
position: absolute;
top: var(--space-md);
left: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
z-index: 2;
}

.product-badge-sale,
.product-badge-new,
.product-badge-hit,
.product-badge-preorder {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}

.product-badge-sale {
background: var(--color-error);
color: white;
}

.product-badge-new {
background: var(--color-success);
color: white;
}

.product-badge-hit {
background: var(--color-accent);
color: white;
}

.product-badge-preorder {
background: var(--color-secondary);
color: white;
}

.product-card-actions {
position: absolute;
top: var(--space-md);
right: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
opacity: 0;
transform: translateX(10px);
transition: all var(--transition-base);
z-index: 2;
}

.product-card-modern:hover .product-card-actions {
opacity: 1;
transform: translateX(0);
}

.product-action-btn {
width: 36px;
height: 36px;
background: white;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
box-shadow: var(--shadow-md);
transition: all var(--transition-fast);
}

.product-action-btn:hover {
background: var(--color-primary);
color: white;
transform: scale(1.1);
}

.product-action-wishlist:hover {
background: var(--color-error);
border-color: var(--color-error);
}

.product-action-quickview:hover {
background: var(--color-secondary);
}

.product-card-body {
padding: var(--space-lg);
}

.product-card-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-xs);
line-height: var(--line-height-tight);
}

.product-card-name a {
color: var(--color-text-primary);
transition: color var(--transition-fast);
}

.product-card-name a:hover {
color: var(--color-primary);
}

.product-card-desc {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
line-height: var(--line-height-normal);
}

.product-card-rating {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}

.stars {
display: flex;
gap: 2px;
}

.star-filled {
color: var(--color-accent);
}

.star-empty {
color: var(--color-border-dark);
}

.rating-count {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}

.product-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}

.product-card-prices {
display: flex;
flex-direction: column;
}

.product-card-price {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-price);
}

.product-card-price-new {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-price);
}

.product-card-price-old {
font-size: var(--font-size-sm);
color: var(--color-price-old);
text-decoration: line-through;
}

.btn-add-cart-modern {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--color-primary);
color: white;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-fast);
}

.btn-add-cart-modern:hover {
background: var(--color-primary-dark);
transform: scale(1.02);
}

.btn-add-cart-modern:disabled {
background: var(--color-text-muted);
cursor: not-allowed;
}

.btn-add-cart-modern svg {
transition: transform var(--transition-fast);
}

.btn-add-cart-modern:hover svg {
transform: translateX(2px);
}

/* Add to cart section with quantity */
.product-card-add-section {
display: flex;
align-items: center;
gap: var(--space-sm);
}

/* List view adjustments */
.products-list-view .product-card-add-section {
flex-direction: row;
width: auto;
}

/* Empty State */
.category-empty {
text-align: center;
padding: var(--space-4xl) 0;
}

.empty-illustration {
width: 160px;
height: 160px;
margin: 0 auto var(--space-xl);
background: var(--color-bg-section);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-border-dark);
}

.category-empty h3 {
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
}

.category-empty p {
color: var(--color-text-muted);
margin-bottom: var(--space-xl);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

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

.pagination-modern .pagination {
display: flex;
gap: var(--space-sm);
list-style: none;
}

.pagination-modern .pagination li a,
.pagination-modern .pagination li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--space-md);
border-radius: var(--radius-md);
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
}

.pagination-modern .pagination li a {
background: var(--color-bg-card);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}

.pagination-modern .pagination li a:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}

.pagination-modern .pagination li.active span {
background: var(--color-primary);
color: white;
}

.pagination-modern .pagination li.disabled span {
color: var(--color-text-muted);
cursor: not-allowed;
}

/* SEO Text */
.seo-text {
margin-top: var(--space-4xl);
padding-top: var(--space-3xl);
border-top: 1px solid var(--color-border);
}

.seo-text-content {
max-height: 150px;
overflow: hidden;
position: relative;
transition: max-height var(--transition-slow);
}

.seo-text-content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(transparent, var(--color-bg-light));
pointer-events: none;
}

.seo-text.expanded .seo-text-content {
max-height: none;
}

.seo-text.expanded .seo-text-content::after {
display: none;
}

.seo-text-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-lg);
padding: var(--space-sm) var(--space-md);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
transition: color var(--transition-fast);
background: none;
border: none;
cursor: pointer;
width: 100%;
}

.seo-text-toggle:hover {
color: var(--color-primary-dark);
}

.seo-text-toggle svg {
transition: transform var(--transition-fast);
}

.seo-text.expanded .seo-text-toggle svg {
transform: rotate(180deg);
}

.seo-toggle-less {
display: none;
}

.seo-text.expanded .seo-toggle-more {
display: none;
}

.seo-text.expanded .seo-toggle-less {
display: inline;
}

/* Filters Overlay */
.filters-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
}

/* List View */
.products-list-view {
grid-template-columns: 1fr;
}

.products-list-view .product-card-modern {
display: grid;
grid-template-columns: 200px 1fr;
}

.products-list-view .product-card-image-wrap {
aspect-ratio: auto;
}

.products-list-view .product-card-body {
display: flex;
flex-direction: column;
justify-content: center;
}

/* Category Benefits Section */
.section-category-benefits {
background: linear-gradient(135deg, var(--color-bg-section) 0%, var(--color-bg-card) 100%);
padding: var(--space-4xl) 0;
margin-top: var(--space-4xl);
border-top: 1px solid var(--color-border-light);
}

.category-benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2xl);
}

.category-benefit-item {
text-align: center;
padding: var(--space-xl);
}

.category-benefit-icon {
width: 80px;
height: 80px;
background: var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
color: white;
}

.category-benefit-icon-green {
background: var(--color-success);
}

.category-benefit-icon-orange {
background: var(--color-accent);
}

.category-benefit-icon-blue {
background: #3b82f6;
}

.category-benefit-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-sm);
color: var(--color-text-primary);
}

.category-benefit-text {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: var(--line-height-relaxed);
margin: 0;
}

/* Quick Filters */
.category-quick-filters {
margin-top: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
}

.quick-filters-label {
font-size: var(--font-size-sm);
opacity: 0.8;
color: white;
}

.quick-filters-list {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}

.quick-filter-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
color: white;
transition: all var(--transition-fast);
backdrop-filter: blur(4px);
}

.quick-filter-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}

.quick-filter-count {
font-size: var(--font-size-xs);
padding: 2px 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
min-width: 20px;
text-align: center;
}

/* Price Range Hint */
.price-range-hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-sm);
}

/* Related Categories (A28-005) */
.section-related-categories {
background: var(--color-bg-section);
padding: var(--space-3xl) 0;
margin-top: var(--space-3xl);
}

.related-categories-header {
text-align: center;
margin-bottom: var(--space-2xl);
}

.related-categories-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
}

.related-categories-subtitle {
font-size: var(--font-size-base);
color: var(--color-text-muted);
}

.related-categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-lg);
}

.related-category-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--color-bg-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
border: 1px solid var(--color-border);
}

.related-category-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary-light);
}

.related-category-image {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
overflow: hidden;
flex-shrink: 0;
background: var(--color-bg-section);
}

.related-category-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.related-category-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
background: linear-gradient(135deg, var(--color-bg-section) 0%, var(--color-border) 100%);
}

.related-category-info {
flex: 1;
}

.related-category-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}

.related-category-count {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}

.related-category-arrow {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg-section);
color: var(--color-text-muted);
transition: all var(--transition-fast);
}

.related-category-card:hover .related-category-arrow {
background: var(--color-primary);
color: white;
transform: translateX(4px);
}

/* Fade Animation */
@keyframes fadeInUp {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

/* Responsive */
@media (max-width: 1200px) {
.products-grid-modern,
.products-skeleton {
  grid-template-columns: repeat(2, 1fr);
}

.category-benefits-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 992px) {
.category-layout {
  grid-template-columns: 1fr;
}

.category-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: var(--color-bg-card);
  z-index: var(--z-modal);
  padding: var(--space-lg);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-xl);
  max-height: none;
}

.category-sidebar.open {
  transform: translateX(0);
}

.filters-header-mobile {
  display: flex;
}

.btn-filters-toggle {
  display: flex;
}

.sidebar-cta {
  display: none;
}
}

@media (max-width: 768px) {
.category-hero-title {
  font-size: var(--font-size-2xl);
}

.category-hero-desc {
  font-size: var(--font-size-base);
}

.category-toolbar {
  gap: var(--space-sm);
}

.toolbar-sort {
  flex: 1;
}

.sort-select {
  min-width: auto;
  width: 100%;
}

.toolbar-view {
  display: none;
}

.products-grid-modern,
.products-skeleton {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.product-card-body {
  padding: var(--space-md);
}

.product-card-name {
  font-size: var(--font-size-sm);
}

.btn-add-cart-modern span {
  display: none;
}

.products-list-view {
  grid-template-columns: 1fr;
}

.products-list-view .product-card-modern {
  grid-template-columns: 120px 1fr;
}

.category-benefits-grid {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.category-benefit-item {
  display: flex;
  align-items: center;
  text-align: left;
  gap: var(--space-lg);
  padding: var(--space-lg);
}

.category-benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0;
  flex-shrink: 0;
}

.category-benefit-icon svg {
  width: 28px;
  height: 28px;
}
}

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

.category-hero {
  min-height: 240px;
}

.category-hero-content {
  padding: var(--space-xl) 0;
}

.category-benefit-item {
  flex-direction: column;
  text-align: center;
}

.category-benefit-icon {
  margin: 0 auto var(--space-md);
}
}

/* Filters Modal Styles */
.filters-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}

.filters-modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

.filters-modal-content {
position: relative;
background: white;
border-radius: var(--radius-lg);
width: 90%;
max-width: 400px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
}

.filters-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}

.filters-modal-header h3 {
margin: 0;
font-size: var(--font-size-xl);
}

.filters-modal-close {
background: none;
border: none;
padding: var(--space-sm);
cursor: pointer;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}

.filters-modal-close:hover {
color: var(--color-text-primary);
}

.filters-modal-body {
padding: var(--space-lg);
overflow-y: auto;
flex: 1;
}

.filters-modal-footer {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
border-top: 1px solid var(--color-border);
}

.filters-modal-footer .btn {
flex: 1;
}

.filter-group {
margin-bottom: var(--space-xl);
}

.filter-group:last-child {
margin-bottom: 0;
}

.filter-group-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--color-text-primary);
}

.filter-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.filter-option {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
padding: var(--space-xs) 0;
}

.filter-option input[type="checkbox"] {
display: none;
}

.filter-checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}

.filter-checkmark::after {
content: '';
width: 10px;
height: 10px;
background: var(--color-primary);
border-radius: 2px;
transform: scale(0);
transition: transform var(--transition-fast);
}

.filter-option input:checked + .filter-checkmark {
border-color: var(--color-primary);
}

.filter-option input:checked + .filter-checkmark::after {
transform: scale(1);
}

.filter-name {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}