.page-header { background: #fdfbf9; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee; }
.page-header h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: #222; margin-bottom: 10px; }

.shop-layout { display: flex; gap: 40px; margin-top: 40px; }
.shop-sidebar { width: 250px; flex-shrink: 0; }
.shop-sidebar h3 { font-family: 'Playfair Display', serif; margin-bottom: 15px; border-bottom: 2px solid #c59d5f; padding-bottom: 5px; display: inline-block; }
.shop-sidebar ul { list-style: none; padding: 0; }
.shop-sidebar li { margin-bottom: 10px; }
.shop-sidebar a { color: #555; text-decoration: none; transition: 0.2s; }
.shop-sidebar a:hover, .shop-sidebar a.active { color: #c59d5f; font-weight: 600; }
.sub-menu { padding-left: 15px !important; margin-top: 5px; font-size: 0.9em; }

.product-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; }
.product-card { border: 1px solid #eee; transition: 0.3s; background: #fff; }
.product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #c59d5f; }
.card-image { position: relative; height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f9f9f9; }
.card-image img { max-height: 100%; max-width: 100%; }
.badge-out { position: absolute; top: 10px; left: 10px; background: #333; color: #fff; padding: 5px 10px; font-size: 0.7rem; text-transform: uppercase; }

.card-details { padding: 20px; text-align: center; }
.card-details h4 { margin: 0 0 10px; font-size: 1rem; }
.card-details h4 a { color: #222; text-decoration: none; }
.price { color: #c59d5f; font-weight: 700; margin-bottom: 15px; }
.btn-shop { display: inline-block; border: 1px solid #222; color: #222; padding: 8px 20px; text-decoration: none; text-transform: uppercase; font-size: 0.8rem; transition: 0.3s; }
.btn-shop:hover { background: #222; color: #fff; }

@media (max-width: 768px) {
    .shop-layout { flex-direction: column; }
    .shop-sidebar { width: 100%; }
}