| .modern-product-list { |
| padding: 40px 0; |
| min-height: 100vh; |
| } |
|
|
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
|
|
| .page-header { |
| text-align: center; |
| margin-bottom: 50px; |
| } |
|
|
| .page-title { |
| font-size: 3rem; |
| font-weight: 700; |
| margin-bottom: 15px; |
| } |
|
|
| .page-subtitle { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 1.2rem; |
| font-weight: 400; |
| } |
| .productts-title{ |
| color: #ffffff; |
| } |
| .controls-section { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 40px; |
| padding: 20px; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 20px; |
| } |
|
|
| .controls-left { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| } |
|
|
| .filter-toggle-btn { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 20px; |
| background: linear-gradient(135deg, #ff6b6b, #4ecdc4); |
| color: white; |
| border: none; |
| border-radius: 25px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .filter-toggle-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); |
| } |
|
|
| .results-count { |
| color: rgba(255, 255, 255, 0.8); |
| font-weight: 500; |
| } |
|
|
| .controls-right { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
|
|
| .view-toggle { |
| display: flex; |
| gap: 5px; |
| background: rgba(255, 255, 255, 0.1); |
| padding: 5px; |
| border-radius: 15px; |
| } |
|
|
| .view-btn { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: transparent; |
| border: none; |
| border-radius: 10px; |
| color: rgba(255, 255, 255, 0.6); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .view-btn.active { |
| background: linear-gradient(135deg, #ff6b6b, #4ecdc4); |
| color: white; |
| } |
|
|
| .view-btn:hover { |
| color: white; |
| } |
|
|
| .main-content { |
| display: flex; |
| gap: 30px; |
| position: relative; |
| } |
|
|
| .filters-sidebar { |
| width: 300px; |
| position: fixed; |
| top: 100px; |
| left: 0; |
| height: calc(100vh - 100px); |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 0 25px 25px 0; |
| z-index: 100; |
| overflow-y: auto; |
| } |
|
|
| .filters-sidebar.show { |
| transform: translateX(0); |
| } |
|
|
| .filters-content { |
| padding: 30px 20px; |
| } |
|
|
| .filters-title { |
| color: white; |
| font-size: 1.5rem; |
| font-weight: 700; |
| margin-bottom: 30px; |
| text-align: center; |
| } |
|
|
| .filter-group { |
| margin-bottom: 30px; |
| } |
|
|
| .filter-group-title { |
| color: white; |
| font-size: 1.1rem; |
| font-weight: 600; |
| margin-bottom: 15px; |
| } |
|
|
| .filter-options { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .filter-option { |
| padding: 12px 16px; |
| background: rgba(84, 9, 9, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| color: rgba(255, 255, 255, 0.8); |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-align: left; |
| font-weight: 500; |
| } |
|
|
| .filter-option:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.3); |
| color: white; |
| } |
|
|
| .filter-option.active { |
| background: linear-gradient(135deg, #b70e0e8d, #0890878e); |
| border-color: transparent; |
| color: white; |
| } |
|
|
| .filter-select { |
| width: 100%; |
| padding: 12px 16px; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 10px; |
| color: white; |
| font-size: 1rem; |
| cursor: pointer; |
| } |
|
|
| .filter-select option { |
| background: #2c3e50; |
| color: white; |
| } |
|
|
| .products-section { |
| flex: 1; |
| margin-left: 0; |
| transition: margin-left 0.3s ease; |
| } |
|
|
| .products-grid { |
| display: grid; |
| gap: 30px; |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| .products-grid.grid { |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| .products-grid.list { |
| grid-template-columns: 1fr; |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| .products-grid.list .modern-product-card { |
| display: flex; |
| height: 200px; |
| } |
|
|
| .products-grid.list .product-image-container { |
| width: 200px; |
| flex-shrink: 0; |
| } |
|
|
| .products-grid.list .product-info { |
| flex: 1; |
| padding: 20px; |
| } |
|
|
| .modern-product-card { |
| height: 100%; |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| .product-card-inner { |
| position: relative; |
| background: rgba(67, 45, 54, 0.751) !important; |
| border: 1.5px solid rgba(55, 26, 26, 0.079) !important; |
| border-radius: 20px !important; |
| box-shadow: 0 8px 32px 0 rgba(37, 37, 92, 0.1) !important; |
| backdrop-filter: blur(12px) saturate(140%) !important; |
| -webkit-backdrop-filter: blur(12px) saturate(140%) !important; |
| overflow: hidden; |
| transition: background 0.35s cubic-bezier(0.4,0.2,0.2,1), border 0.35s cubic-bezier(0.4,0.2,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0.2,0.2,1), transform 0.35s cubic-bezier(0.4,0.2,0.2,1); |
| position: relative; |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| } |
| .product-card-inner::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent); |
| pointer-events: none; |
| z-index: 2; |
| transition: left 0.6s; |
| } |
| .product-card-inner:hover::after { |
| left: 100%; |
| } |
| @keyframes cardFloat { |
| 0%, 100% { |
| transform: scale3d(1); |
| opacity: 1; |
| } |
| 50% { |
| transform: scale3d(1); |
| opacity: 1; |
| } |
| } |
| .product-card-inner:hover { |
| |
| box-shadow: 0 8px 32px #3b1a2d5d, 0 2px 12px #27673d55 !important; |
| |
| background: linear-gradient(135deg, rgba(120, 6, 73, 0.555) 60%, rgba(5, 50, 82, 0.626) 100%) !important; |
| transform: scale(1.07); |
| transform-origin: center; |
| z-index: 10; |
| transition: box-shadow 0.35s, border 0.35s, background 0.35s, transform 0.35s; |
| } |
| .product-title { |
| transform: scale(1.08); |
| text-shadow: 0 4px 24px #ad891677, 0 2px 8px #98230b55; |
| transition: transform 0.35s, text-shadow 0.35s; |
| } |
| .product-card-inner .product-title { |
| transition: transform 0.35s, text-shadow 0.35s; |
| } |
| .product-card-inner .product-rating, |
| .product-card-inner .product-price-center, |
| .product-card-inner .info-row, |
| .product-card-inner .item-actions { |
| transition: transform 0.35s, opacity 0.35s, color 0.35s; |
| } |
| .product-card-inner:hover .product-rating { |
| transform: translateY(-4px) scale(1.04); |
| opacity: 1; |
| color: #ffffff; |
| } |
| .product-card-inner:hover .product-price-center { |
| transform: translateY(-2px) scale(1.04); |
| opacity: 1; |
| color: #43e97b; |
| } |
| .product-card-inner:hover .info-row { |
| transform: translateY(-2px) scale(1.03); |
| opacity: 1; |
| } |
| .product-card-inner:hover .item-actions { |
| transform: translateY(-2px) scale(1.04); |
| opacity: 1; |
| filter: brightness(1.08) drop-shadow(0 2px 8px #a93d7e77); |
| } |
|
|
| .wishlist-btn { |
| position: absolute; |
| top: 15px; |
| right: 15px; |
| width: 40px; |
| height: 40px; |
| background: rgba(176, 21, 21, 0.396); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.371); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| z-index: 10; |
| color: rgba(255, 255, 255, 0.812); |
| } |
|
|
| .wishlist-btn:hover { |
| background: rgba(255, 107, 107, 0.3); |
| border-color: rgba(255, 107, 107, 0.5); |
| color: rgba(255, 255, 255, 0.796); |
| transform: scale(1.1); |
| } |
|
|
| .wishlist-btn.active { |
| background: rgba(255, 107, 107, 0.4); |
| border-color: rgba(255, 107, 107, 0.6); |
| color: #ff4757; |
| } |
|
|
| .quick-view-btn { |
| position: absolute; |
| top: 15px; |
| left: 15px; |
| width: 40px; |
| height: 40px; |
| background: rgba(15, 110, 123, 0.563); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.10); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| z-index: 10; |
| transition: all 0.3s ease; |
| } |
|
|
| .quick-view-btn a { |
| color: white; |
| text-decoration: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .quick-view-btn:hover { |
| background: rgba(78, 205, 196, 0.3); |
| border-color: rgba(78, 205, 196, 0.5); |
| transform: scale(1.1); |
| } |
|
|
| .product-info { |
| padding: 25px; |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| } |
|
|
| .product-title { |
| margin-bottom: 15px; |
| text-align: center; |
| } |
|
|
| .product-title a { |
| color: white; |
| text-decoration: none; |
|
|
| font-size: 1.1rem; |
| font-weight: 600; |
| line-height: 1.4; |
| transition: all 0.3s ease; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .product-title a:hover { |
| background: linear-gradient(135deg, #ff6b6b, #4ecdc4); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .product-rating { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| gap: 10px; |
| margin-bottom: 15px; |
| } |
| .stars { |
| display: flex; |
| gap: 2px; |
| } |
|
|
| .star { |
| transition: all 0.2s ease; |
| } |
|
|
| .star.filled { |
| color: #ffffff; |
| fill: #ffd700 !important; |
| filter: none; |
| } |
|
|
| .star.half-filled { |
| color: #ffffff; |
| fill: url(#half-gold) !important; |
| filter: none; |
| } |
|
|
| .star.empty { |
| color: rgba(255, 255, 255, 0.3); |
| fill: none !important; |
| } |
|
|
| .rating-text { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 0.9rem; |
| font-weight: 500; |
| } |
|
|
| .product-price-center { |
| text-align: center !important; |
| color: #fff; |
| font-weight: bold; |
| } |
|
|
| .add-to-cart-btn-premium { |
| background: #da4453; |
| background: -webkit-linear-gradient(to right, #da4453, #89216b); |
| background: linear-gradient(to right, #da4453, #89216b); |
| color: #fff; |
| font-weight: 700; |
| font-size: 1.1rem; |
| border: none; |
| border-radius: 30px; |
| padding: 14px; |
| margin-bottom: 6px; |
| box-shadow: 0 4px 18px rgba(218, 68, 83, 0.15); |
| cursor: pointer; |
| transition: background 0.2s, box-shadow 0.2s, transform 0.1s; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .add-to-cart-btn-premium:hover, |
| .add-to-cart-btn-premium:focus { |
| background: #89216b; |
| background: -webkit-linear-gradient(to right, #89216b, #da4453); |
| background: linear-gradient(to right, #89216b, #da4453); |
| box-shadow: 0 8px 32px rgba(74, 20, 25, 0.85) !important; |
| transform: translateY(-2px) scale(1); |
| } |
|
|
| .add-to-cart-btn-premium:active { |
| transform: scale(0.97); |
| } |
|
|
| .add-to-cart-btn-premium .btn-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-radius: 30px; |
| box-shadow: 0 0 16px 4px #9c813455; |
| opacity: 0.2; |
| pointer-events: none; |
| transition: opacity 0.2s; |
| } |
|
|
| .item-actions { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin-top: 16px; |
| width: 100%; |
| } |
|
|
| .info-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| margin-top: 10px; |
| } |
|
|
| .view-details-btn-small { |
| text-decoration: none; |
| background: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%); |
| color: #fff; |
| font-weight: 600; |
| font-size: 0.95rem; |
| border: none; |
| border-radius: 20px; |
| padding: 7px 18px; |
| box-shadow: 0 2px 8px rgba(255, 105, 135, 0.12); |
| cursor: pointer; |
| transition: background 0.2s, box-shadow 0.2s, transform 0.1s; |
| min-width: 56px; |
| } |
|
|
| .view-details-btn-small:hover, .view-details-btn-small:focus { |
| background: linear-gradient(90deg, #ff5e62 0%, #ff9966 100%); |
| box-shadow: 0 4px 16px rgba(255, 105, 135, 0.18); |
| transform: translateY(-2px) scale(1.04); |
| } |
|
|
| .scroll-to-top-btn { |
| position: fixed; |
| bottom: 30px; |
| left: 30px; |
| width: 60px; |
| height: 60px; |
| background: linear-gradient(135deg, #5b1818, #073f3c); |
| color: white; |
| border: none; |
| border-radius: 50%; |
| font-size: 24px; |
| font-weight: bold; |
| cursor: pointer; |
| z-index: 1000; |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| transition: all 0.3s ease; |
| } |
|
|
| .scroll-to-top-btn:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); |
| } |
|
|
| .Premium-filter-btn { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| padding: 10px 22px; |
| background: linear-gradient(90deg, #d9a50aeb 0%, #156273 100%); |
| color: #222; |
| border: none; |
| border-radius: 25px; |
| font-weight: 700; |
| font-size: 1rem; |
| cursor: pointer; |
| margin-left: 18px; |
| |
| transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275); |
| outline: none; |
| } |
|
|
| .Premium-filter-btn .premium-only-text { |
| background: linear-gradient(90deg, #ffffff 0%, #fffbe6 10%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| color: transparent; |
| font-weight: 800; |
| letter-spacing: 0.5px; |
| |
| } |
|
|
| .close-filters-btn { |
| background: none; |
| border: none; |
| cursor: pointer; |
| padding: 4px; |
| background: rgba(34, 16, 16, 0.788); |
| margin-left: 8px; |
| display: flex; |
| align-items: center; |
| color: #333; |
| transition: background 0.2s, color 0.2s; |
| border-radius: 6px; |
| } |
| .close-filters-btn:hover, .close-filters-btn:focus { |
| background: rgba(239, 68, 68, 0.08); |
| color: #ef4444; |
| outline: none; |
| } |
|
|
| .modern-product-list, .container, .products-section, .products-grid, .products-grid.grid, .products-grid.list { |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| @media (max-width: 600px) { |
| |
| .page-header { |
| margin-bottom: 14px; |
| text-align: center; |
| width: 100%; |
| } |
| .page-title { |
| font-size: 1.45rem; |
| margin-bottom: 4px; |
| text-align: center; |
| width: 100%; |
| font-weight: 800; |
| color: #ff4e8e; |
| letter-spacing: 0.5px; |
| transition: transform 0.18s cubic-bezier(.4,2,.6,1); |
| cursor: pointer; |
| } |
| .page-title:hover, .page-title:active { |
| transform: scale(1.08); |
| text-shadow: 0 2px 16px #ff4e8e44; |
| } |
| .page-subtitle { |
| font-size: 1.15rem; |
| margin-bottom: 6px; |
| text-align: center; |
| width: 100%; |
| color: #fff; |
| font-weight: 500; |
| letter-spacing: 0.2px; |
| transition: transform 0.18s cubic-bezier(.4,2,.6,1); |
| cursor: pointer; |
| } |
| .page-subtitle:hover, .page-subtitle:active { |
| transform: scale(1.06); |
| text-shadow: 0 2px 12px #fff4; |
| } |
|
|
| .controls-section { |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| align-items: flex-start; |
| text-align: left; |
| gap: 6px; |
| padding: 8px 2px 8px 2px; |
| margin-bottom: 28px; |
| border-radius: 8px; |
| position: relative; |
| } |
| .filter-toggle-btn { |
| margin: 0; |
| order: 0; |
| align-self: flex-start; |
| position: static; |
| left: 0; |
| right: unset; |
| float: left; |
| } |
| .controls-left { |
| flex: 1 1 0; |
| min-width: 0; |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| gap: 6px; |
| justify-content: flex-start; |
| text-align: left; |
| } |
| .controls-right { |
| flex: 0 0 auto; |
| min-width: 0; |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| gap: 6px; |
| justify-content: flex-end; |
| text-align: right; |
| position: absolute; |
| right: 8px; |
| top: 8px; |
| } |
| .view-toggle { |
| display: flex; |
| gap: 0; |
| background: none; |
| padding: 0; |
| border-radius: 0; |
| box-shadow: none; |
| } |
|
|
| .product-card-inner { |
| display: grid !important; |
| grid-template-columns: 1fr 1fr; |
| align-items: center !important; |
| justify-content: flex-start !important; |
| padding: 10px 10px !important; |
| gap: 15px !important; |
| min-height: 250px; |
| height: 100%; |
| width: 100%; |
| } |
| .product-image-container { |
| width: 200px; |
| height: 100%; |
| margin: 0; |
| background: #fff !important; |
| border-radius: 18px; |
| position: absolute; |
| padding: 0; |
| } |
|
|
|
|
| .product-image-container { |
| position: relative; |
| overflow: hidden; |
| border-radius: 22px; |
| background: #fff; |
| } |
|
|
| .product-image { |
| transition: transform 0.35s cubic-bezier(0.4, 0.2, 0.2, 1); |
| z-index: 1; |
| border-radius: 22px; |
| transform: scale(1.04); |
| width: 100%; |
| height: 100%; |
| |
| object-fit: contain; |
| filter: contrast(1.1) saturate(1.2); |
| } |
|
|
| .product-image-container:hover .product-image { |
| transform: scale(1); |
| } |
|
|
| .product-image-container:hover { |
| opacity: 0; |
| background: none; |
| } |
|
|
|
|
| .product-image-container:hover { |
| opacity: 1; |
| } |
|
|
| .product-info { |
| padding: 0 !important; |
| gap: 4px; |
| width: 100%; |
| min-width: 0; |
| text-align: left; |
| display: flex; |
| flex-direction: column; |
| align-items: flex-start; |
| justify-content: flex-start; |
| grid-column: 2/3; |
| grid-row: 1/2; |
| } |
| .product-title { |
| margin-bottom: 2px; |
| font-size: 1.08rem; |
| line-height: 1.1; |
| font-weight: 700; |
| text-align: left; |
| } |
| .product-title a { |
| font-size: 1.08rem; |
| line-height: 1.1; |
| -webkit-line-clamp: 2; |
| line-clamp: 2; |
| max-width: 90vw; |
| text-align: left; |
| } |
| .product-rating { |
| margin-bottom: 2px; |
| gap: 2px; |
| font-size: 1rem; |
| text-align: left; |
| } |
| .stars { |
| gap: 1px; |
| } |
| .star { |
| font-size: 1rem; |
| } |
| .rating-text { |
| font-size: 0.9rem; |
| } |
| .product-price-center { |
| font-size: 1.08rem; |
| margin-bottom: 2px; |
| text-align: left; |
| } |
| .product-description-snippet { |
| font-size: 0.94rem; |
| min-height: unset; |
| margin-bottom: 2px; |
| -webkit-line-clamp: 1; |
| line-clamp: 1; |
| max-width: 100%; |
| text-align: left; |
| white-space: normal; |
| } |
| .info-row { |
| flex-direction: row; |
| gap: 4px; |
| margin-top: 2px; |
| align-items: center; |
| text-align: left; |
| } |
| .item-actions { |
| margin-top: 2px; |
| gap: 4px; |
| flex-direction: row; |
| width: 100%; |
| align-items: center; |
| text-align: left; |
| } |
| .add-to-cartg-btn, .add-to-cartg-btn-premium, .view-details-btn-small { |
| font-size: 1rem !important; |
| padding: 8px 0 !important; |
| min-width: 80px; |
| max-width: 100%; |
| border-radius: 14px !important; |
| width: auto; |
| margin: 0 2px 0 0; |
| text-align: left; |
| } |
| .Premium-badge-card, .limited-edition-badge { |
| font-size: 0.9rem; |
| padding: 3px 8px; |
| border-radius: 10px; |
| margin: 0 0 2px 0; |
| text-align: left; |
| } |
| .card-glow { |
| display: none !important; |
| } |
| .products-section { |
| margin-left: 0 !important; |
| padding: 0 !important; |
| } |
| .scroll-to-top-btn { |
| width: 38px; |
| height: 38px; |
| left: 6px; |
| bottom: 6px; |
| font-size: 15px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .page-header { |
| margin-bottom: 12px; |
| padding: 0 10px; |
| } |
| |
| .page-title { |
| font-size: 1.3rem; |
| margin-bottom: 3px; |
| } |
| |
| .page-subtitle { |
| font-size: 1rem; |
| margin-bottom: 4px; |
| } |
| |
| .controls-section { |
| padding: 6px 4px; |
| margin-bottom: 20px; |
| gap: 4px; |
| } |
| |
| .filter-toggle-btn { |
| padding: 8px 16px; |
| font-size: 0.9rem; |
| } |
| |
| .controls-right { |
| right: 4px; |
| top: 6px; |
| gap: 4px; |
| } |
| |
| .product-card-inner { |
| padding: 8px 8px !important; |
| gap: 12px !important; |
| min-height: 220px; |
| } |
| |
| .product-image-container { |
| width: 160px; |
| } |
| |
| .product-title { |
| font-size: 1rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-title a { |
| font-size: 1rem; |
| max-width: 85vw; |
| } |
| |
| .product-rating { |
| font-size: 0.9rem; |
| margin-bottom: 1px; |
| } |
| |
| .star { |
| font-size: 0.9rem; |
| } |
| |
| .rating-text { |
| font-size: 0.8rem; |
| } |
| |
| .product-price-center { |
| font-size: 1rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-description-snippet { |
| font-size: 0.85rem; |
| margin-bottom: 1px; |
| } |
| |
| .add-to-cartg-btn, .add-to-cartg-btn-premium, .view-details-btn-small { |
| font-size: 0.9rem !important; |
| padding: 6px 0 !important; |
| min-width: 70px; |
| } |
| |
| .Premium-badge-card, .limited-edition-badge { |
| font-size: 0.8rem; |
| padding: 2px 6px; |
| } |
| |
| .scroll-to-top-btn { |
| width: 35px; |
| height: 35px; |
| left: 4px; |
| bottom: 4px; |
| font-size: 14px; |
| } |
| } |
|
|
| @media (max-width: 375px) { |
| .page-header { |
| margin-bottom: 10px; |
| padding: 0 8px; |
| } |
| |
| .page-title { |
| font-size: 1.2rem; |
| margin-bottom: 2px; |
| } |
| |
| .page-subtitle { |
| font-size: 0.9rem; |
| margin-bottom: 3px; |
| } |
| |
| .controls-section { |
| padding: 5px 3px; |
| margin-bottom: 16px; |
| gap: 3px; |
| } |
| |
| .filter-toggle-btn { |
| padding: 6px 12px; |
| font-size: 0.85rem; |
| } |
| |
| .controls-right { |
| right: 3px; |
| top: 5px; |
| gap: 3px; |
| } |
| |
| .product-card-inner { |
| padding: 6px 6px !important; |
| gap: 10px !important; |
| min-height: 200px; |
| } |
| |
| .product-image-container { |
| width: 140px; |
| } |
| |
| .product-title { |
| font-size: 0.95rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-title a { |
| font-size: 0.95rem; |
| max-width: 80vw; |
| } |
| |
| .product-rating { |
| font-size: 0.85rem; |
| margin-bottom: 1px; |
| } |
| |
| .star { |
| font-size: 0.85rem; |
| } |
| |
| .rating-text { |
| font-size: 0.75rem; |
| } |
| |
| .product-price-center { |
| font-size: 0.95rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-description-snippet { |
| font-size: 0.8rem; |
| margin-bottom: 1px; |
| } |
| |
| .add-to-cartg-btn, .add-to-cartg-btn-premium, .view-details-btn-small { |
| font-size: 0.85rem !important; |
| padding: 5px 0 !important; |
| min-width: 60px; |
| } |
| |
| .Premium-badge-card, .limited-edition-badge { |
| font-size: 0.75rem; |
| padding: 2px 5px; |
| } |
| |
| .scroll-to-top-btn { |
| width: 32px; |
| height: 32px; |
| left: 3px; |
| bottom: 3px; |
| font-size: 13px; |
| } |
| } |
|
|
| @media (max-width: 320px) { |
| .page-header { |
| margin-bottom: 8px; |
| padding: 0 6px; |
| } |
| |
| .page-title { |
| font-size: 1.1rem; |
| margin-bottom: 2px; |
| } |
| |
| .page-subtitle { |
| font-size: 0.85rem; |
| margin-bottom: 2px; |
| } |
| |
| .controls-section { |
| padding: 4px 2px; |
| margin-bottom: 12px; |
| gap: 2px; |
| } |
| |
| .filter-toggle-btn { |
| padding: 5px 10px; |
| font-size: 0.8rem; |
| } |
| |
| .controls-right { |
| right: 2px; |
| top: 4px; |
| gap: 2px; |
| } |
| |
| .product-card-inner { |
| padding: 5px 5px !important; |
| gap: 8px !important; |
| min-height: 180px; |
| } |
| |
| .product-image-container { |
| width: 120px; |
| } |
| |
| .product-title { |
| font-size: 0.9rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-title a { |
| font-size: 0.9rem; |
| max-width: 75vw; |
| } |
| |
| .product-rating { |
| font-size: 0.8rem; |
| margin-bottom: 1px; |
| } |
| |
| .star { |
| font-size: 0.8rem; |
| } |
| |
| .rating-text { |
| font-size: 0.7rem; |
| } |
| |
| .product-price-center { |
| font-size: 0.9rem; |
| margin-bottom: 1px; |
| } |
| |
| .product-description-snippet { |
| font-size: 0.75rem; |
| margin-bottom: 1px; |
| } |
| |
| .add-to-cartg-btn, .add-to-cartg-btn-premium, .view-details-btn-small { |
| font-size: 0.8rem !important; |
| padding: 4px 0 !important; |
| min-width: 55px; |
| } |
| |
| .Premium-badge-card, .limited-edition-badge { |
| font-size: 0.7rem; |
| padding: 1px 4px; |
| } |
| |
| .scroll-to-top-btn { |
| width: 30px; |
| height: 30px; |
| left: 2px; |
| bottom: 2px; |
| font-size: 12px; |
| } |
| } |
|
|
| @media (max-width: 600px) { |
| .product-description-snippet { |
| display: block; |
| overflow: visible; |
| text-overflow: unset; |
| white-space: normal; |
| max-width: 100%; |
| font-size: 0.9rem; |
| margin-bottom: 8px; |
| line-height: 1.2; |
| word-wrap: break-word; |
| } |
| .view-details-btn-small { |
| font-size: 0.75rem !important; |
| padding: 4px 8px !important; |
| min-width: 40px !important; |
| height: 24px !important; |
| display: inline-flex !important; |
| align-items: center; |
| justify-content: center; |
| } |
| .info-row { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
| } |
|
|
| @media (min-width: 601px) { |
| .product-description-snippet { |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: normal; |
| max-width: 100%; |
| font-size: 0.98rem; |
| margin-bottom: 8px; |
| } |
| } |
|
|
| .modern-item-section { |
| padding: 60px 20px; |
| max-width: 1400px; |
| margin: 0 auto; |
| position: relative; |
| z-index: 1; |
| background: transparent !important; |
| } |
|
|
| .hero-section { |
| text-align: center; |
| padding: 80px 0; |
| position: relative; |
| margin-bottom: 80px; |
| backdrop-filter: blur(20px); |
| border-radius: 30px; |
| border: 1px solid rgba(105, 92, 58, 0.162); |
| overflow: hidden; |
| box-shadow: 0 8px 32px #4b134f55, 0 2px 12px #43e97b33; |
| border: 1.5px solid #715c0bcc; |
| background: linear-gradient(135deg, #310216b9 0%, #061421 25%, #084548 50%, #061822da 75%, #030b20b3 100%); |
| transition: box-shadow 0.35s, border-color 0.35s, background 0.35s; |
| transition: left 0.5s; |
| } |
|
|
| .hero-section:hover { |
| box-shadow: 0 8px 32px #6a551298, 0 2px 12px #af821733; |
| border: 2.5px solid #54480696; |
| transform: scale(1.08); |
| } |
|
|
| .hero-content { |
| position: relative; |
| z-index: 2; |
| } |
|
|
| .hero-title { |
| font-size: 4rem; |
| font-weight: 800; |
| margin-bottom: 20px; |
| line-height: 1.2; |
| transition: transform 0.28s cubic-bezier(0.4, 0.2, 0.2, 1); |
| } |
|
|
| .hero-title:hover { |
| transform: scale(1.08); |
| } |
|
|
| .gradient-text { |
| background: linear-gradient(270deg, #d38312, #a83279, #43e97b, #ffd700, #d38312, #a83279); |
| background-size: 600% 600%; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| color: transparent; |
| animation: beautiful-gradient-title 8s ease-in-out infinite; |
| transition: transform 0.28s cubic-bezier(0.4, 0.2, 0.2, 1); |
| display: inline-block; |
| } |
|
|
| .hero-subtitle { |
| font-size: 1.5rem; |
| color: rgba(255, 255, 255, 0.8); |
| margin-bottom: 40px; |
| font-weight: 400; |
| } |
|
|
| .hero-cta { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| padding: 16px 32px; |
| background: linear-gradient(135deg, #ff6b6b, #05a499); |
| color: white; |
| text-decoration: none; |
| border-radius: 50px; |
| font-weight: 600; |
| font-size: 1.1rem; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| box-shadow: 0 10px 30px rgba(104, 4, 4, 0.4); |
| } |
|
|
| .cta-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(78, 205, 196, 0.2)); |
| border-radius: 50px; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .hero-cta:hover .cta-glow { |
| opacity: 1; |
| } |
|
|
| .hero-glow { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 80%; |
| height: 80%; |
| background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, transparent 70%); |
| z-index: 1; |
| } |
|
|
| .hero-floating-animations { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 2; |
| } |
|
|
| .hero-float-sparkle { |
| position: absolute; |
| font-size: 2.2rem; |
| filter: drop-shadow(0 0 12px #ff800088) drop-shadow(0 0 24px #fff3); |
| opacity: 0.7; |
| pointer-events: none; |
| user-select: none; |
| } |
|
|
| @keyframes beautiful-gradient-title { |
| 0% { |
| background-position: 0% 50%; |
| } |
|
|
| 25% { |
| background-position: 50% 100%; |
| } |
|
|
| 50% { |
| background-position: 100% 50%; |
| } |
|
|
| 75% { |
| background-position: 50% 0%; |
| } |
|
|
| 100% { |
| background-position: 0% 50%; |
| } |
| } |
|
|
| .category-section { |
| margin-bottom: 80px; |
| } |
|
|
| .category-header { |
| text-align: center; |
| margin-bottom: 50px; |
| position: relative; |
| } |
|
|
| .category-title { |
| font-size: 3rem; |
| font-weight: 700; |
| margin-bottom: 20px; |
| } |
|
|
| .category-line { |
| width: 100px; |
| height: 4px; |
| background: linear-gradient(135deg, #a83279 0%, #43e97b 100%); |
| margin: 0 auto; |
| border-radius: 2px; |
| } |
|
|
| .product-groups-container { |
| display: flex; |
| flex-direction: column; |
| gap: 24px !important; |
| padding: 4px; |
| margin-bottom: 24px; |
| } |
|
|
| .product-group-glass-card { |
| margin-bottom: 0 !important; |
| } |
|
|
| .product-group-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 24px !important; |
|
|
| .product-list-loading { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 60vh; |
| } |
|
|
| .Premium-loading-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 60vh; |
| } |
|
|
| .cosmic-loader { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 30px; |
| } |
|
|
| .loader-rings { |
| position: relative; |
| width: 120px; |
| height: 120px; |
| } |
|
|
| .loader-ring { |
| position: absolute; |
| border: 3px solid transparent; |
| border-radius: 50%; |
| border-top-color: #667eea; |
| } |
|
|
| .loader-ring:nth-child(1) { |
| width: 120px; |
| height: 120px; |
| border-top-color: #667eea; |
| } |
|
|
| .loader-ring:nth-child(2) { |
| width: 90px; |
| height: 90px; |
| top: 15px; |
| left: 15px; |
| border-top-color: #f6d365; |
| } |
|
|
| .loader-ring:nth-child(3) { |
| width: 60px; |
| height: 60px; |
| top: 30px; |
| left: 30px; |
| border-top-color: #ff9a9e; |
| } |
|
|
| .loader-ring:nth-child(4) { |
| width: 30px; |
| height: 30px; |
| top: 45px; |
| left: 45px; |
| border-top-color: #a8edea; |
| } |
|
|
| .loader-text { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| color: white; |
| font-size: 1.2rem; |
| font-weight: 600; |
| } |
| } |
