*{margin:0;padding:0;box-sizing:border-box;} img{max-width:100%;height:auto;display:block;} :root{--primary-blue:#000075;--primary-burgundy:#960118;--light-bg:#ffffff;--light-gray:#f8f8f8;--medium-gray:#e8e8e8;--dark-text:#1a1a1a;--medium-text:#555555;--light-text:#888888;} body{font-family:'Montserrat',sans-serif;background:var(--light-bg);color:var(--dark-text);overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .shop-header{background:linear-gradient(135deg,rgba(0,0,117,0.05) 0%,rgba(150,1,24,0.05) 100%);padding:4rem 2rem;text-align:center;border-bottom:1px solid var(--medium-gray);position:relative;overflow:hidden;} .shop-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-blue) 0%,var(--primary-burgundy) 100%);} .shop-header h1{font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:700;color:var(--dark-text);margin-bottom:0.5rem;} .shop-header p{font-size:1.1rem;color:var(--medium-text);font-weight:300;} .shop-header .search-bar{max-width:600px;margin:2rem auto 0;position:relative;display:flex;align-items:center;} .shop-header .search-bar .search-input{width:100%;padding:1rem 3.5rem 1rem 1.5rem;border:1px solid #e0e0e0;border-radius:50px;font-size:1rem;font-family:'Cormorant Garamond',serif;font-style:italic;transition:all 0.3s ease;background:#ffffff;color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,0.05);} .shop-header .search-bar .search-input::placeholder{color:#999999;font-style:italic;font-weight:300;opacity:0.8;} .shop-header .search-bar .search-input:focus{outline:none;border-color:#d0d0d0;box-shadow:0 2px 6px rgba(0,0,0,0.1);} .shop-header .search-bar .search-button{position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6B1B9A 0%,#960118 100%);border:none;color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease,box-shadow 0.3s ease;padding:0;z-index:1;} .shop-header .search-bar .search-button svg{width:18px;height:18px;stroke:#ffffff;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));} .shop-header .search-bar .search-button:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 4px 12px rgba(107,27,154,0.4);} .shop-header .search-bar .search-button:active{transform:translateY(-50%) scale(0.95);} .shop-container{max-width:1600px;margin:0 auto;padding:4rem 2rem;display:grid;grid-template-columns:280px 1fr;gap:4rem;} .filters-sidebar{position:sticky;top:2rem;height:fit-content;} .filter-section{background:var(--light-bg);border:1px solid var(--medium-gray);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:box-shadow 0.3s ease;} .filter-section:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08);} .filter-section h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--dark-text);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--medium-gray);position:relative;} .filter-section h3::after{content:'';position:absolute;bottom:-2px;left:0;width:50px;height:2px;background:linear-gradient(90deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);} .filter-group{margin-bottom:1.5rem;} .filter-group label{display:block;font-size:0.9rem;font-weight:600;color:var(--dark-text);margin-bottom:0.8rem;} .filter-checkbox{display:flex;align-items:center;margin-bottom:0.8rem;cursor:pointer;padding:0.5rem;border-radius:4px;transition:background 0.3s ease;} .filter-checkbox.has-subcategories{cursor:pointer;} .filter-checkbox:hover{background:var(--light-gray);} .filter-checkbox input[type="checkbox"]{width:18px;height:18px;margin-right:0.8rem;cursor:pointer;accent-color:var(--primary-burgundy);} .filter-checkbox span{font-size:0.85rem;color:var(--medium-text);transition:color 0.3s ease;flex:1;} .category-toggle{margin-left:auto;cursor:pointer;font-size:0.8rem;color:var(--primary-burgundy);transition:transform 0.3s ease;user-select:none;} .category-toggle.expanded{transform:rotate(180deg);} .subcategories-container{display:none;margin-top:0.5rem;padding-left:1rem;overflow:hidden;} .subcategories-container.show{display:block !important;} .filter-checkbox:hover span,.filter-checkbox input[type="checkbox"]:checked + span{color:var(--primary-burgundy);font-weight:600;} .active-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem;padding:1rem;background:var(--light-gray);border-radius:4px;} .active-filter-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.8rem;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border-radius:20px;font-size:0.85rem;font-weight:500;} .active-filter-tag button{background:none;border:none;color:#ffffff;cursor:pointer;font-size:1rem;line-height:1;padding:0;margin-left:0.3rem;} .price-range{display:flex;gap:1rem;align-items:center;} .price-input{flex:1;padding:0.8rem;border:1px solid var(--medium-gray);border-radius:4px;font-size:0.9rem;transition:border-color 0.3s ease;} .price-input:focus{outline:none;border-color:var(--primary-burgundy);} .filter-button{width:100%;padding:1rem;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border:none;border-radius:4px;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:0.85rem;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;} .filter-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(150,1,24,0.3);} .clear-button{margin-top:1rem;width:100%;padding:1rem;background:transparent;border:2px solid var(--primary-burgundy);color:var(--primary-burgundy);border-radius:4px;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:0.85rem;cursor:pointer;transition:background 0.3s ease;} .clear-button:hover{background:var(--light-gray);} .products-section{flex:1;} .products-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;flex-wrap:wrap;gap:1.5rem;padding-bottom:2rem;border-bottom:2px solid var(--medium-gray);position:relative;} .products-header::after{content:'';position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:linear-gradient(90deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);} .products-header-left{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;} .products-count{font-size:0.95rem;color:var(--medium-text);font-weight:500;} .view-toggle{display:flex;gap:0.5rem;border:1px solid var(--medium-gray);border-radius:4px;overflow:hidden;} .view-btn{padding:0.6rem 1rem;background:var(--light-bg);border:none;cursor:pointer;transition:all 0.3s ease;color:var(--medium-text);font-size:1rem;} .view-btn.active{background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;} .view-btn:hover:not(.active){background:var(--light-gray);color:var(--primary-burgundy);} .products-header-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .sort-select{padding:0.8rem 1.5rem;border:1px solid var(--medium-gray);border-radius:4px;font-size:0.9rem;background:var(--light-bg);color:var(--dark-text);cursor:pointer;transition:border-color 0.3s ease;} .sort-select:focus{outline:none;border-color:var(--primary-burgundy);} .mobile-filter-toggle{display:none;padding:0.8rem 1.5rem;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border:none;border-radius:4px;font-weight:600;cursor:pointer;font-size:0.9rem;letter-spacing:1px;} .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:4rem;} .products-grid.list-view{grid-template-columns:1fr;gap:2rem;} .products-grid.list-view .product-card{display:grid;grid-template-columns:300px 1fr;max-width:100%;} .products-grid.list-view .product-image-container{aspect-ratio:1 / 1;max-width:300px;} .products-grid.list-view .product-info{display:flex;flex-direction:column;justify-content:space-between;} .products-grid.list-view .product-footer{margin-top:auto;} .product-card{background:#ffffff;border:none;border-radius:8px;overflow:hidden;transition:none;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.1);opacity:0;animation:fadeInUp 0.6s ease forwards;text-decoration:none;color:inherit;display:block;} .product-card:nth-child(1){animation-delay:0.1s;} .product-card:nth-child(2){animation-delay:0.2s;} .product-card:nth-child(3){animation-delay:0.3s;} .product-card:nth-child(4){animation-delay:0.4s;} .product-card:nth-child(5){animation-delay:0.5s;} .product-card:nth-child(6){animation-delay:0.6s;} .product-card:nth-child(7){animation-delay:0.7s;} .product-card:nth-child(8){animation-delay:0.8s;} .product-card:nth-child(9){animation-delay:0.9s;} .product-card:nth-child(10){animation-delay:1s;} .product-card:nth-child(11){animation-delay:1.1s;} .product-card:nth-child(12){animation-delay:1.2s;} @keyframes fadeInUp{from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);}} .product-image-container{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;background:var(--light-gray);} .product-image{width:100%;height:100%;object-fit:cover;display:block;} .product-image{opacity:1;} .product-badge{position:absolute;top:0.75rem;right:0.75rem;background:#ffffff;color:#000000;padding:0.4rem 0.8rem;font-size:0.75rem;font-weight:600;z-index:2;border-radius:4px;} .product-info{padding:0.75rem;} .product-category{display:none;} .product-name{font-size:0.8rem;font-weight:400;color:#000000;margin-bottom:0.4rem;line-height:1.2;text-transform:uppercase;} .product-description{display:none;} .product-footer{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem;padding-top:0.5rem;border-top:none;} .product-price-wrapper{display:flex;flex-direction:column;gap:0.25rem;} .product-price{font-size:0.85rem;font-weight:600;color:#d32f2f;} .product-price-old{font-size:0.7rem;color:#9e9e9e;text-decoration:line-through;font-weight:400;} .product-description-text{font-size:0.65rem;color:#000000;margin-top:0.25rem;font-weight:400;} .product-button{display:none;} .pagination{display:flex;justify-content:center;align-items:center;gap:0.5rem;margin-top:4rem;} .pagination-button{padding:0.8rem 1.2rem;border:1px solid var(--medium-gray);background:var(--light-bg);color:var(--dark-text);border-radius:4px;cursor:pointer;transition:all 0.3s ease;font-size:0.9rem;font-weight:500;min-width:44px;text-decoration:none;display:inline-block;} .pagination-button a{text-decoration:none;color:inherit;} .pagination-button:hover:not(:disabled):not(.active){border-color:var(--primary-burgundy);color:var(--primary-burgundy);background:var(--light-gray);transform:translateY(-2px);} .pagination-button.active{background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border-color:transparent;box-shadow:0 4px 15px rgba(150,1,24,0.3);} .pagination-ellipsis{padding:0.8rem 0.5rem;color:var(--medium-text);font-size:0.9rem;user-select:none;} .empty-state{text-align:center;padding:6rem 2rem;display:none;} .empty-state.show{display:block;} .empty-state-icon{font-size:5rem;margin-bottom:2rem;opacity:0.3;} .empty-state h3{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--dark-text);margin-bottom:1rem;} .empty-state p{color:var(--medium-text);margin-bottom:2rem;} .empty-state-button{padding:1rem 2.5rem;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:transform 0.3s ease;} .empty-state-button:hover{transform:translateY(-2px);} .scroll-to-top{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 4px 15px rgba(150,1,24,0.3);transition:all 0.3s ease;z-index:1000;} .scroll-to-top.show{display:flex;} .scroll-to-top:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(150,1,24,0.4);} .skeleton{background:linear-gradient(90deg,var(--light-gray) 25%,var(--medium-gray) 50%,var(--light-gray) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;} @keyframes loading{0%{background-position:200% 0;} 100%{background-position:-200% 0;}} .skeleton-card{background:var(--light-bg);border:1px solid var(--medium-gray);border-radius:12px;overflow:hidden;height:500px;} .skeleton-image{width:100%;height:400px;background:var(--light-gray);} .skeleton-content{padding:1.5rem;} .skeleton-line{height:1rem;margin-bottom:0.8rem;border-radius:4px;} .skeleton-line.short{width:60%;} .filter-toggle{display:none;width:100%;padding:0.8rem;background:transparent;border:1px solid var(--medium-gray);border-radius:4px;cursor:pointer;font-weight:600;color:var(--dark-text);margin-bottom:1rem;transition:all 0.3s ease;} .filter-toggle:hover{background:var(--light-gray);border-color:var(--primary-burgundy);} .filter-section.collapsed .filter-group{display:none;} .filter-section.collapsed .filter-toggle::after{content:' ▼';} .filter-toggle::after{content:' ▲';float:right;} .price-slider-container{margin-top:1rem;} .price-slider{width:100%;height:6px;border-radius:3px;background:var(--medium-gray);outline:none;-webkit-appearance:none;appearance:none;} .price-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.2);} .price-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);cursor:pointer;border:none;box-shadow:0 2px 5px rgba(0,0,0,0.2);} .price-display{display:flex;justify-content:space-between;margin-top:0.5rem;font-size:0.9rem;color:var(--medium-text);font-weight:600;} .toast{position:fixed;top:2rem;right:2rem;background:linear-gradient(135deg,var(--primary-burgundy) 0%,var(--primary-blue) 100%);color:#ffffff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.2);display:none;align-items:center;gap:1rem;z-index:1001;animation:slideInRight 0.3s ease;} .toast.show{display:flex;} @keyframes slideInRight{from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;}} @media (max-width:1024px){.shop-container{grid-template-columns:1fr;gap:3rem;} .filters-sidebar{position:static;display:none;} .filters-sidebar.show{display:block;} .mobile-filter-toggle{display:block;} .products-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;} .products-grid.list-view .product-card{grid-template-columns:1fr;}} @media (max-width:768px){.shop-header h1{font-size:2.5rem;} .shop-container{padding:2rem 1rem;} .search-bar{margin:1.5rem auto 0;} .search-input{padding:0.9rem 3rem 0.9rem 1.2rem;font-size:0.9rem;} .products-header{flex-direction:column;align-items:flex-start;} .products-header-left,.products-header-right{width:100%;justify-content:space-between;} .view-toggle{order:2;} .products-grid{grid-template-columns:repeat(2,1fr);gap:0.5rem;padding:0 0.25rem;} .products-grid.list-view .product-card{grid-template-columns:1fr;} .product-card{border-radius:8px;overflow:hidden;} .product-image-container{aspect-ratio:1 / 1;width:100%;height:auto;} .product-image{width:100%;height:100%;object-fit:cover;display:block;} .product-badge{top:0.5rem;right:0.5rem;padding:0.3rem 0.6rem;font-size:0.65rem;} .product-info{padding:0.75rem;} .product-name{font-size:0.8rem;margin-bottom:0.4rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .product-footer{gap:0.25rem;padding-top:0.4rem;} .product-price-wrapper{gap:0.15rem;} .product-price{font-size:0.85rem;} .product-price-old{font-size:0.7rem;} .product-description-text{font-size:0.65rem;margin-top:0.25rem;} .active-filters{padding:0.8rem;} .active-filter-tag{font-size:0.8rem;padding:0.3rem 0.6rem;} .scroll-to-top{bottom:1rem;right:1rem;width:44px;height:44px;font-size:1rem;} .toast{top:1rem;right:1rem;left:1rem;padding:0.8rem 1rem;font-size:0.9rem;} .price-slider-container{margin-top:1.5rem;}}