:root{--bg:#f5f7fa;--card:#06131c;--muted:#bfc8cf;--accent:#06131c;--accent-2:#e11}html,body{height:100%;margin:0;background:var(--bg);color:#06131c;font-family:Arial,Helvetica,sans-serif}.container{width:100%;max-width:100%;margin:0;box-sizing:border-box;padding:2}nav.nav{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 0}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}.logo img{width:44px;height:44px;border-radius:8px;object-fit:cover}.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:flex;padding:.5rem 1rem;background:#06131c;color:#fff;position:relative;z-index:1000}.nav-links a{margin:0 8px;text-decoration:none;color:inherit}.nav-search{flex:1;display:flex;justify-content:center}.nav-search input{width:60%;max-width:420px;padding:10px;border-radius:10px;border:1px solid #ddd}.icon-btn{font-size:18px;text-decoration:none;color:inherit}.badge{position:absolute;top:15px;right:70px;background:var(--accent-2);color:#000;border-radius:10px;font-size:10px;font-weight:700;padding:1px 5px}.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.icon-btn:hover{text-shadow:0 0 6px #00bcd4,0 0 12px #00bcd4}.hamburger{display:none}@media(max-width:820px){.nav-center{display:none}.hamburger{display:flex;flex-direction:column;gap:4px;width:26px;height:20px;background:none;border:none;cursor:pointer}.hamburger span{height:2px;background:var(--white);border-radius:2px}}.account-dropdown{position:relative}.account-btn{background:none;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:15px}.dropdown-menu{position:absolute;top:38px;right:0;background:#111;padding:10px 0;border-radius:8px;min-width:150px;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:20;margin-top:2 rem}.dropdown-menu a,.dropdown-menu button{padding:10px 15px;text-align:left;background:none;color:#fff;text-decoration:none;border:none;width:100%}.dropdown-menu button:hover,.dropdown-menu a:hover{background:rgba(255,255,255,.1)}.hidden{display:none}.hero-section{position:relative;margin:12px 0;border-radius:12px;overflow:hidden;min-height:220px}.hero-slide{display:none;padding:36px;background-size:cover;background-position:center;color:#fff}.hero-slide.active{display:block}.hero-content h1{margin:0;font-size:28px}.hero-btn{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none}.main-content{display:grid;grid-template-columns:240px 1fr;gap:20px;margin-top:18px}@media(max-width:920px){.main-content{grid-template-columns:1fr}.nav-search input{width:100%}}aside.sidebar{background:#fff;border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.06)}.filter-group{margin-bottom:12px}.filter-group label{display:block;font-weight:700;margin-bottom:6px}input[type=number],select,.filter-controls input[type=text]{width:100%;padding:8px;border-radius:8px;border:1px solid #ddd}.apply-filters{width:100%;padding:10px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}.clear-filters{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;background:transparent;color:inherit;margin-top:8px;cursor:pointer}.product-container{width:100%}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;padding:0 5%;animation:fadeIn .4s ease both}.product-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 12px rgba(0,0,0,.06);cursor:pointer;display:flex;flex-direction:column;gap:8px}.product-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}.product-info h4{margin:0;font-size:16px}.product-price{font-weight:700;color:var(--accent-2)}.button-group{display:flex;gap:8px}.btn-buy,.btn-buy-now{flex:1;padding:8px;border-radius:8px;border:none;cursor:pointer}.btn-buy{background:#06131c;color:#fff}.btn-buy-now{background:#fff;border:1px solid #06131c;color:#06131c}.pagination{margin-top:20px;display:flex;justify-content:center;gap:6px}.page-btn{padding:6px 12px;background:#222;border:none;color:#fff;cursor:pointer;border-radius:6px}.page-btn.active{background:#ff5722}#productModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}#productModal.show{display:flex}#productModal .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}#productModal .modal-card{position:relative;width:min(920px,96%);max-height:88vh;overflow:auto;background:#06131c;border-radius:12px;padding:18px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:16px;z-index:1201}#productModal .modal-img{width:100%;height:320px;object-fit:contain;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.02));display:flex;align-items:center;justify-content:center}#productModal .modal-body h2{margin:0 0 8px}#productModal .close-btn{position:absolute;right:12px;top:8px;background:none;border:none;color:#fff;font-size:1.25rem;cursor:pointer}@media(max-width:720px){#productModal .modal-card{grid-template-columns:1fr;padding:14px}#productModal .modal-img{height:220px}}.loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffaa;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeOut .6s ease forwards;animation-delay:1.2s}.loader{width:90px;height:90px;border-radius:50%;border:5px solid var(--accent);border-top-color:transparent;animation:spin 1s linear infinite;display:flex;justify-content:center;align-items:center}.loader-logo{font-size:1.1rem;font-weight:700;color:var(--accent);animation:pulse 1s infinite alternate}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.5}100%{opacity:1}}@keyframes fadeOut{to{opacity:0;visibility:hidden}}.category{padding:8px;border-radius:8px;cursor:pointer}.category.active{background:#06131c;color:#fff}.search-results{position:absolute;background:#fff;max-height:280px;overflow:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.08);width:60%;max-width:420px;margin-top:6px}.hero-section{position:relative;width:100%;height:70vh;overflow:hidden}.hero-section .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease-in-out}.hero-section .hero-slide.active{opacity:1}.hero-prev,.hero-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:none;font-size:2rem;width:48px;height:48px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;z-index:20}.hero-prev{left:20px}.hero-next{right:20px}.hero-prev:hover,.hero-next:hover{background:rgba(0,0,0,.7);transform:translateY(-50%) scale(1.1)}@media(max-width:768px){.hero-prev,.hero-next{width:40px;height:40px;font-size:1.6rem}.hero-prev{left:10px}.hero-next{right:10px}}.sidebar{flex:0 0 220px;background:var(--card);padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.3);height:100vh;position:sticky;top:0;overflow-y:auto}.category{display:flex;align-items:center;gap:8px;padding:28px 34px;border-radius:8px;background:rgba(255,255,255,.05);color:#000;cursor:pointer;transition:.3s;font-size:.95rem}.category:hover,.category.active{background:#00bcd4;color:#000}.category-icon{font-size:1.1rem;width:20px;text-align:center}.search-results{position:absolute;top:100%;left:0;width:100%;max-height:400px;overflow-y:auto;background:#0a1722;border:1px solid #333;z-index:1000;display:none}.search-item{display:flex;gap:8px;padding:8px;cursor:pointer;border-bottom:1px solid #222}.search-item img{width:50px;height:50px;object-fit:cover}.search-item:hover{background:#111}.reviews-section{margin-top:12px;padding-top:12px;border-top:1px solid #333}.review-message{margin-top:6px;color:#ffd65a}.product-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(12,37,48,.5)}.product-info{padding:12px;display:flex;flex-direction:column;gap:4px}.product-info h4{margin:0;color:#fff;font-size:1.05rem}.reviews-total{font-size:.85rem;color:#00e0ff;margin-bottom:4px}.btn-buy-now{background:#00bcd4;border:none;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;margin-top:6px}.nav-links a{color:#fff;text-decoration:none;font-weight:500;position:relative;padding:4px 0;transition:color .2s ease,text-shadow .3s ease}.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#00bcd4;box-shadow:0 0 6px #00bcd4,0 0 12px #00bcd4;border-radius:2px;transition:width .3s ease}.nav-links a:hover::after,.nav-links a.active::after{width:100%}.nav-links a:hover,.nav-links a.active{color:#00bcd4;text-shadow:0 0 6px #00bcd4,0 0 12px #00bcd4}.btn-buy{background:linear-gradient(135deg,#00bcd4,#00e0ff);color:#000}.btn-buy:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,188,212,.6)}.btn-buy-now{background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff}.btn-buy-now:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(255,87,34,.6)}.hamburger{display:none;flex-direction:column;justify-content:space-between;width:25px;height:18px;background:none;border:none;cursor:pointer;z-index:1001}.hamburger span{display:block;height:3px;background:#fff;border-radius:3px;transition:all .3s ease}.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(7px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px)}@media(max-width:820px){.hamburger{display:flex}.nav-links{position:absolute;top:70px;right:0;flex-direction:column;background:#06131c;width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:999;text-align:center;padding:0}.nav-links.open{max-height:500px;padding:1rem 0}.nav-links a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.nav-links a:last-child{border-bottom:none}}@media(max-width:600px){.newsletter input{width:100%;margin:0 0 8px 0}.newsletter button{width:100%;display:block}}@media(min-width:1100px){.nav-search{max-width:900px}}@media(max-width:420px){.mobile-menu{width:260px;right:-260px}.mobile-menu.open{right:0}}.nav-links{display:flex;gap:26px;align-items:center}.nav .brand{margin-right:40px}.btn-buy{margin-top:10px;border:none;padding:8px 12px;border-radius:var(--radius);font-weight:600;cursor:pointer;transition:all var(--transition);align-self:flex-start}.btn-buy:hover{transform:scale(1.05);opacity:.9}
/* Sidebar becomes collapsible on screens below 920px */
@media(max-width: 920px){
  .sidebar{
    position: relative;
    height: auto;
    width: 100%;
    box-shadow: none;
    margin-bottom: 20px;
  }
}
@media(max-width: 920px){
  .product-grid{
    padding: 0 3%;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media(max-width: 480px){
  .product-grid{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media(max-width: 820px){
  nav.nav{
    position: sticky;
    top: 0;
    z-index: 2000;
  }
}
@media(max-width: 768px){
  .hero-section{
    height: 45vh;
  }
}
@media(max-width: 480px){
  .hero-section{
    height: 35vh;
  }
}
@media(max-width: 600px){
  .search-results{
    max-height: 250px;
    width: 100%;
    left: 0;
  }
}
/* --- FILTER SIDEBAR CONTAINER --- */
.sidebar {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  width: 260px;
  border: 1px solid #f1f1f1;
  position: sticky;
  top: 80px;
}

/* --- FILTER HEADER --- */
.sidebar h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
  letter-spacing: 0.3px;
}

/* --- FILTER GROUP WRAPPER --- */
.filter-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

/* --- FILTER LABEL --- */
.filter-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

/* --- SELECT INPUTS --- */
.filter-group select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 13px;
  outline: none;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

/* Hover + focus styling */
.filter-group select:hover {
  border-color: #9ca3af;
}

.filter-group select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* --- PRICE RANGE --- */
#priceRange {
  width: 100%;
  cursor: pointer;
  accent-color: #2563eb;
}

#priceValue {
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
}

/* --- SEARCH BOX --- */
.sidebar input[type="text"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 13px;
  width: 100%;
  margin-bottom: 18px;
}

.sidebar input[type="text"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 780px) {
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    top: 0;
  }
}