.prod-contained { width:100%; overflow-x:auto; margin:10px auto; border-top: 3px solid var(--simple-color); border-bottom: 3px solid var(--simple-color); } .prod-stra { display: flex; flex-wrap:nowrap; white-space:nowrap; gap: 5px; padding: 5px; max-height: 400px; overflow-x: auto; } .prod-slided { max-height:280px; display: grid; overflow-x:scroll; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; margin-bottom:5px; padding: 5px; } .prod-header { justify-content: space-between; padding:15px 10px 10px 20px; background:var(--branding); border-radius:0px 0px 10px 10px; align-items: center; font-weight:600; font-size:15px; overflow:hidden; white-space:nowrap; margin-bottom:10px; } .product-card-s { background: transparent; border-radius:5px; max-width:180px; min-width:160px; width:100%; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; } .store-card { min-width: 130px; background: var(--card-bg); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--light-text); display: flex; flex-direction: column; align-items: center; gap: 8px; } .store-pic { width: 80px; height: 80px; background:var(--background); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .fallback-icon i { font-size: 32px; opacity: 0.6; } .store-pic img { width: 100%; height: 100%; object-fit: cover; } .store-name { font-size: 14px; font-weight: 600; color:var(--light-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; margin-bottom:5px; padding: 5px; } .product-card { background: var(--card-bg); border-radius:5px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; } .product-card:hover { transform: translateY(-5px); border:2px dashed var(--simple-color); } .product-image-container { position: relative; width: 100%; height: 160px; overflow: hidden; z-index:10; } .product-image { width: 100%; height: 100%; object-fit: fit; transition: transform 0.3s ease; } .product-card:hover .product-image { transform: scale(1.05); } .spons-btn { position: absolute; top: 5px; right: 3px; z-index:50; background: rgba(0, 0, 0, 0.7); border: none; width: 25px; height: 25px; border-radius: 50%; color: var(--fire-color); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .spons-btn:hover { background: rgba(0, 0, 0, 0.9); } .wishlist-btn { position: absolute; bottom: 5px; right: 3px; z-index:50; background: rgba(0, 0, 0, 0.7); border: none; width: 30px; height: 30px; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .wishlist-btn:hover { background: rgba(0, 0, 0, 0.9); } .wishlist-btn.active { color: var(--wishlist-active); } .product-info { padding: 3px 4px; } .product-title { color:var(--light-text); opacity:0.7; font-size: 13px; font-weight: 500; margin: 0 0 3px 0; white-space:pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .product-price { display: flex; align-items: center; cursor: pointer; gap: 5px; } .current-price { font-weight: bold; color: var(--light-text); font-size: 16px; } .old-price { font-size: 12px; color: var(--light-text); opacity: 0.7; text-decoration: line-through; } .discount-badge { position: absolute; top: 5px; left: 5px; background: var(--error-color); color:var(--light-text); opacity:0.6; padding: 2px 4px; border-radius: 3px; font-size: 8px; font-weight: bold; } .store-name { font-size: 11px; cursor: pointer; color: var(--light-text); margin: 2px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .floating-wishlist { position: fixed; bottom: 260px; right: 9px; background: var(--branding); color: var(--background); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1200; transition: all 0.3s ease; } .floating-wishlist:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(0, 255, 224, 0.4); } .wishlist-count { position: absolute; top: -5px; right: -5px; background: var(--wishlist-active); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } .out-of-stock { position: absolute; top: 5px; right: 0px; background-color: red; color: white; padding: 4px; border-radius: 0px 10px 0px 10px; font-size: 11px; font-weight: bold; } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; } .product-image-container { height: 160px; } .product-title { font-size: 11px; font-weight: 500; margin: 0 0 3px 0; } } @keyframes rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-gradient-text { font-size: 1.5em; font-weight: bold; background: linear-gradient( -45deg, #ff6ec4, #7873f5, #42e695, #ffe985, #ff6ec4 ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 6s ease infinite; } .prd-market-nav { --tab-active: rgba(0, 255, 224, 0.2); --tab-border: rgba(0, 255, 224, 0.4); --search-focus: rgba(0, 255, 224, 0.1); } .prd-market-nav { max-width: 1000px; margin: 0 auto 1.5rem; padding: 0 0.3rem; } .prd-search-container { margin-bottom: 1.5rem; } .prd-search-box { display: flex; max-width: 600px; margin: 0 auto; position: relative; } .prd-search-input { flex: 1; padding: 0.8rem 1.2rem; padding-right: 3rem; border-radius: 50px; border: 1px solid var(--simple-color); background: var(--card-bg); color: var(--light-text); font-size: 0.95rem; transition: all 0.3s ease; } .prd-search-input:focus { outline: none; border-color: var(--branding); box-shadow: 0 0 0 3px var(--search-focus); } .prd-search-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--branding); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.2s ease; } .prd-search-btn:hover { background: rgba(0, 255, 224, 0.1); transform: translateY(-50%) scale(1.1); } .prd-action-tabs { display: flex; justify-content: center; margin:10px auto; padding:10px 0; overflow-x:auto; gap: 0.5rem; flex-wrap: wrap; } .prd-action-tab { position: relative; display: flex; white-space:nowrap; flex-direction: column; align-items: center; padding: 0.8rem 1.2rem; border-radius: 12px; background: var(--card-bg); color: var(--light-text); text-decoration: none; transition: all 0.3s ease; min-width: 100px; border: 1px solid transparent; } .prd-action-tab:hover { background: var(--tab-active); border-color: var(--tab-border); transform: translateY(-2px); } .prd-action-tab:active { transform: translateY(0); } .prd-tab-icon { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--branding); } .prd-tab-label { font-size: 0.85rem; font-weight: 500; text-align: center; } .prd-tab-highlight { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--branding); transition: width 0.3s ease; } .prd-action-tab:hover .prd-tab-highlight { width: 60%; } @media (max-width: 768px) { .prd-action-tabs { gap: 0.3rem; } .prd-action-tab { padding: 0.7rem 0.5rem; min-width: 80px; } .prd-tab-icon { font-size: 1.3rem; } .prd-tab-label { font-size: 0.75rem; } } .pro-load-indica { grid-column: 1/-1; text-align: center; padding: 20px; font-weight:bold; font-size:18px; color: var(--light-text); } .no-more-prod { grid-column: 1/-1; text-align: center; padding: 20px; font-size:18px; color: var(--light-text); font-weight:bold; }