/* Products page - refined to user specification */
:root{
  --page-bg: #ffffff;
  --hero-gradient-start: #0B4678;
  --hero-gradient-mid: #1075CD;
  --hero-gradient-end: #0B4678;
  --filter-gradient-start: #F9FAFB;
  --filter-gradient-end: #ffffff;
  --card-bg: #ffffff;
  --image-gradient-start: #F9FAFB;
  --image-gradient-end: #ffffff;
  --wattage-bg-start: #E7F1FB;
  --wattage-bg-end: #D4E7F7;

  --filter-border: #F3F4F6;
  --card-border: #F3F4F6;
  --card-border-hover: rgba(16,117,205,0.3);
  --input-border: #E5E7EB;
  --input-focus-border: #1075CD;

  --hero-text: #ffffff;
  --label-color: #0B4678;
  --title-color: #0B4678;
  --title-hover-color: #1075CD;
  --description-color: rgba(255,255,255,0.9);
  --model-color: #6B7280;
  --product-desc-color: #4B5563;
  --price-label-color: #6B7280;
  --price-color: #FF0000;
  --input-text-color: #1A1A1A;

  --badge-red: #FF0000;
  --best-seller-gradient-start: #FF0000;
  --best-seller-gradient-end: #CC0000;
  --button-gradient-start: #1075CD;
  --button-gradient-end: #0B4678;
}

/* Global container used on this page */
.container{
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  padding-left: 1rem; /* 16px */
  padding-right: 1rem;
}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.container{padding-left:2rem;padding-right:2rem}}

/* HERO SECTION */
.products-hero{
  position: relative;
  background: linear-gradient(to bottom right,var(--hero-gradient-start),var(--hero-gradient-mid),var(--hero-gradient-end));
  color: var(--hero-text);
  overflow: hidden;
  padding: 120px 0 70px;
  text-align: center;
}

/* Decorative Background Elements */
.products-hero .hero-glow-red{
  position: absolute; top:0; right:0;
  width: 24rem; height:24rem; /* 384px */
  background: rgba(255,0,0,0.1);
  border-radius: 9999px;
  filter: blur(96px);
}
.products-hero .hero-glow-white{
  position: absolute; bottom:0; left:0;
  width: 24rem; height:24rem;
  background: rgba(255,255,255,0.05);
  border-radius: 9999px;
  filter: blur(96px);
}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  margin-bottom: 1.5rem; /* 24px */
  font-size: 0.875rem; font-weight:700; letter-spacing:0.025em; text-transform:uppercase;
}
.hero-badge svg{width:1.25rem;height:1.25rem;color:var(--badge-red)}

.hero-title{font-weight:700;font-size:48px;margin:0 0 10px 0;color:var(--hero-text)}
.hero-sub{font-size:20px;color:var(--description-color);max-width:48rem;margin:0 auto;line-height:1.625}

/* MAIN CONTENT / FILTER SECTION */
.products-main{padding-top:4rem;padding-bottom:4rem}

.filters-panel{
  background: linear-gradient(to bottom right,var(--filter-gradient-start),var(--filter-gradient-end));
  padding: 1.5rem; /* 24px */
  border-radius: 1rem; /* 16px */
  border: 2px solid var(--filter-border);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  margin-bottom: 3rem; /* 48px */
}

.filter-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem}
.filter-icon{width:2.25rem;height:2.25rem;background:linear-gradient(to bottom right,var(--button-gradient-start),var(--button-gradient-end));border-radius:0.5rem;display:flex;align-items:center;justify-content:center;color:#fff}
.filter-icon svg{width:1rem;height:1rem}
.filter-title{font-size:1.125rem;font-weight:700;color:var(--label-color)}

.filters-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.filters-row{grid-template-columns:repeat(2,1fr)}}

.filters-row label{display:block;font-size:0.875rem;font-weight:700;color:var(--label-color);margin-bottom:0.5rem}
.filters-row select{
  width:100%;padding:0.75rem 1rem;border:2px solid var(--input-border);border-radius:0.75rem;background:#fff;color:var(--input-text-color);font-weight:500;font-size:1rem;transition:all 300ms ease;appearance:none
}
.filters-row select:focus{outline:none;box-shadow:0 0 0 4px rgba(16,117,205,0.08);border-color:var(--input-focus-border)}

/* PRODUCTS GRID */
.products-grid{display:grid !important;grid-template-columns:1fr !important;gap:1.2rem !important;margin-top:2.5rem !important}
@media(min-width:640px){.products-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,1fr) !important}}
@media(min-width:1024px){.products-grid{grid-template-columns:repeat(4,1fr) !important;gap:1.3rem !important}}

/* PRODUCT CARD */
.card{background:var(--card-bg) !important;border-radius:0.5rem !important;overflow:hidden !important;border:1px solid var(--card-border) !important;transition:all 300ms ease;position:relative !important;display:flex !important;flex-direction:column !important;height:auto !important;max-height:none !important;cursor:pointer !important}
.card:hover{box-shadow:0 10px 20px -5px rgba(0,0,0,0.15) !important;border-color:var(--card-border-hover);transform:translateY(-2px)}

.card .media{position:relative !important;overflow:hidden !important;background:linear-gradient(to bottom right,var(--image-gradient-start),var(--image-gradient-end)) !important;aspect-ratio:1 !important;width:100% !important;height:auto !important;flex-shrink:0 !important}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.card:hover .media img{transform:scale(1.1)}
.card .media .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.1),transparent);opacity:0;transition:opacity 500ms ease}
.card:hover .media .overlay{opacity:1}

.badge{position:absolute;top:0.4rem;left:0.4rem;z-index:10;background:linear-gradient(to right,var(--best-seller-gradient-start),var(--best-seller-gradient-end));color:#fff;font-size:0.6rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:9999px;box-shadow:0 4px 8px -2px rgba(0,0,0,0.12);display:flex;align-items:center;gap:0.2rem}
.badge svg{width:0.65rem;height:0.65rem;fill:#fff}
.badge.discount-badge{background:linear-gradient(135deg,#FF6B35,#FF8C42);top:auto;right:0.4rem;left:auto;border-radius:0.3rem;padding:0.3rem 0.5rem;font-size:0.65rem;font-weight:800}

.card-body{padding:0.6rem;display:flex;flex-direction:column;flex:1}
.card-body .card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.3rem;gap:0.3rem}
.card-body h3{font-size:0.95rem;font-weight:700;color:var(--title-color);margin:0;transition:color 300ms ease;line-height:1.3;cursor:pointer}
.card:hover h3{color:var(--title-hover-color)}
.card-body p.model{font-size:0.55rem;font-weight:500;color:var(--model-color);margin:0;line-height:1}
.watt{background:linear-gradient(to bottom right,var(--wattage-bg-start),var(--wattage-bg-end));color:var(--title-color);font-size:0.55rem;font-weight:700;padding:0.15rem 0.35rem;border-radius:0.25rem;border:1px solid rgba(16,117,205,0.2);flex-shrink:0;display:none}

.card-body .desc{display:none}

.card-footer{display:flex;flex-direction:column;gap:0.25rem;padding-top:0.4rem;border-top:1px solid var(--filter-border);margin-top:auto}
.price-small{font-size:0.55rem;color:var(--price-label-color);margin:0;line-height:1;display:none}
.price{font-size:1rem;font-weight:700;color:var(--price-color);margin:0;line-height:1.1;cursor:pointer}
.compare{font-size:0.75rem;color:var(--price-label-color);margin:0;line-height:1.2;display:flex;align-items:center;gap:0.4rem}
.compare s{opacity:.6}
.discount-tag{background:#f56565;color:#fff;font-size:0.65rem;font-weight:700;padding:0.15rem 0.4rem;border-radius:9999px}
.card-rating{display:flex;align-items:center;gap:0.4rem;padding:0.3rem 0}
.card-rating .stars{font-size:0.75rem;line-height:1}
.card-rating .rating-text{font-size:0.65rem;color:var(--model-color);font-weight:500}
.btn-view{display:none !important}
.btn-add-cart{display:none !important}

/* NO PRODUCTS FOUND */
.no-products{text-align:center;padding-top:5rem;padding-bottom:5rem}
.icon-circle{width:6rem;height:6rem;border-radius:9999px;background:linear-gradient(to bottom right,#F3F4F6,#F9FAFB);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;border:4px solid #E5E7EB}
.no-products .icon-circle svg{width:3rem;height:3rem;color:#9CA3AF}
.no-products h3{font-size:1.5rem;font-weight:700;color:var(--title-color);margin-bottom:0.75rem}
.no-products p{font-size:1.125rem;color:var(--model-color);max-width:28rem;margin:0 auto}

/* Utility spacing */
.mt-6{margin-top:24px}

.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;margin-top:3rem;border-top:1px solid #E5E7EB;background:#fff;border-radius:1.5rem;box-shadow:0 20px 45px rgba(15,23,42,0.08);gap:1rem}
.pagination-info{font-size:0.95rem;color:#4B5563;white-space:nowrap;flex:1;min-width:180px}
.pagination-buttons{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;justify-content:flex-end}
.pagination-btn{padding:0.95rem 1.35rem;border:1px solid rgba(16,117,205,0.18);border-radius:999px;font-size:1rem;font-weight:700;color:#0B4678;background:#fff;cursor:pointer;transition:all 0.25s ease, transform 0.25s ease;box-shadow:0 12px 24px rgba(16,117,205,0.08);min-width:3.4rem;white-space:nowrap}
.pagination-btn:hover{background:rgba(16,117,205,0.12);border-color:rgba(16,117,205,0.4);transform:translateY(-2px)}
.pagination-btn.active{background:linear-gradient(135deg,#1075CD,#0B4678);color:#fff;border-color:transparent;box-shadow:0 16px 28px rgba(16,117,205,0.22)}
.pagination-btn:focus{outline:none;box-shadow:0 0 0 4px rgba(16,117,205,0.12)}
.pagination-btn.pagination-prev,
.pagination-btn.pagination-next{padding:0.85rem 1.1rem;font-size:0.92rem}
@media(max-width:840px){.pagination{justify-content:center}
.pagination-info{width:100%;text-align:center;margin-top:0.75rem}
.pagination-buttons{width:100%;justify-content:center}}

/* Ensure there's comfortable space between products section and footer */
.products-hero + .container{padding-bottom:6rem}
@media(min-width:640px){.products-hero + .container{padding-bottom:8rem}}