/* ==========================================================================
   PAGES.CSS — Page-specific styles extracted from inline <style> blocks
   For: NEXUS TECH Gaming Store
   ========================================================================== */


/* ==========================================================================
   CATEGORY PAGE (category.html)
   ========================================================================== */

/* ===== CATEGORY HERO ===== */
.category-hero{
  position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e293b 40%,#1e3a5f 70%,#2563eb 100%);
  padding:48px 0 80px;overflow:hidden;
}
.category-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,rgba(37,99,235,.3),transparent 60%),
             radial-gradient(ellipse at 20% 80%,rgba(139,92,246,.2),transparent 50%);
  pointer-events:none;
}
.category-hero::after{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px}
.hero-text{flex:1}
.hero-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:16px}
.hero-breadcrumb a{color:rgba(255,255,255,.6);transition:color .2s}
.hero-breadcrumb a:hover{color:#fff}
.hero-breadcrumb svg{width:12px;height:12px;opacity:.4}
.hero-title{font-family:'Orbitron',sans-serif;font-size:2.2rem;font-weight:900;color:#fff;margin-bottom:8px;
  background:linear-gradient(135deg,#fff 0%,#93c5fd 50%,#60a5fa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-desc{color:rgba(255,255,255,.6);font-size:.95rem;max-width:500px;line-height:1.6}
.hero-stats{display:flex;gap:24px;margin-top:20px}
.hero-stat{text-align:center;padding:12px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;backdrop-filter:blur(8px)}
.hero-stat strong{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.hero-stat small{font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}
.hero-graphic{width:200px;height:200px;flex-shrink:0;position:relative}
.hero-glow{
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.4) 0%,transparent 70%);
  display:flex;align-items:center;justify-content:center;
  animation:heroFloat 4s ease-in-out infinite;
}
.hero-glow svg{width:100px;height:100px;color:rgba(255,255,255,.8);filter:drop-shadow(0 0 20px rgba(37,99,235,.5))}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0}
.hero-wave svg{display:block;width:100%;height:48px}

/* ===== SUBCATEGORY TILES ===== */
.subcat-section{padding:12px 0 8px;background:#f8f9fb;margin-top:0px;position:relative;z-index:2}
.subcat-scroll{display:flex;gap:14px;overflow-x:auto;padding:5px 4px 16px;scrollbar-width:thin;scroll-snap-type:x mandatory}
.subcat-scroll::-webkit-scrollbar{height:4px}
.subcat-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.subcat-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  min-width:120px;padding:20px 16px 16px;
  border-radius:16px;background:#fff;cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;color:var(--text);
  text-align:center;flex-shrink:0;scroll-snap-align:start;
  box-shadow:0 2px 8px rgba(0,0,0,.04);border:2px solid transparent;
  position:relative;overflow:hidden;
}
.subcat-tile::before{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.03),rgba(139,92,246,.03));
  opacity:0;transition:opacity .3s;
}
.subcat-tile:hover::before{opacity:1}
.subcat-tile:hover{border-color:var(--primary);box-shadow:0 8px 32px rgba(37,99,235,.12);transform:translateY(-4px)}
.subcat-tile.active{border-color:var(--primary);background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;box-shadow:0 8px 32px rgba(37,99,235,.25)}
.subcat-tile.active::before{display:none}
.subcat-tile.active .subcat-icon{background:rgba(255,255,255,.2);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.subcat-tile.active small{color:rgba(255,255,255,.7)}
.subcat-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:var(--primary);
  transition:all .3s;position:relative;z-index:1;
}
.subcat-icon svg{width:28px;height:28px}
.subcat-tile span{font-size:.78rem;font-weight:700;line-height:1.2;position:relative;z-index:1}
.subcat-tile small{font-size:.68rem;color:var(--text-sec);font-weight:500;position:relative;z-index:1}

/* ===== CATEGORY LAYOUT ===== */
.category-section{background:#f8f9fb;padding:0 0 60px}
.category-layout{display:flex;gap:24px;padding-top:20px}

/* ===== FILTER SIDEBAR ===== */
.filter-sidebar{width:260px;flex-shrink:0}
.filter-card{
  background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.04);
  overflow:hidden;margin-bottom:16px;border:1px solid rgba(0,0,0,.04);
  transition:box-shadow .3s;
}
.filter-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.filter-header{
  display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:.85rem;font-weight:700;
  color:var(--text);border-bottom:1px solid #f0f0f0;
}
.filter-header svg{width:16px;height:16px;color:var(--primary)}
.filter-group{margin-bottom:0;border:none;border-radius:0;background:transparent}
.filter-group-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text);
  background:#fff;border-bottom:1px solid #f5f5f5;
  transition:all .2s;user-select:none;
}
.filter-group-header:hover{background:#fafbfc;color:var(--primary)}
.filter-group-header svg{width:14px;height:14px;transition:transform .3s cubic-bezier(.4,0,.2,1);color:var(--text-sec)}
.filter-group-header.collapsed svg{transform:rotate(-90deg)}
.filter-group-body{padding:12px 16px;max-height:300px;overflow-y:auto}
.filter-group-header.collapsed + .filter-group-body{display:none}
.filter-check{
  display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.82rem;color:var(--text-sec);
  cursor:pointer;transition:color .2s;
}
.filter-check:hover{color:var(--text)}
.filter-check input[type="checkbox"],.filter-check input[type="radio"]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex-shrink:0;
  border:2px solid #d1d5db;border-radius:5px;cursor:pointer;position:relative;
  transition:all .2s;
}
.filter-check input[type="radio"]{border-radius:50%}
.filter-check input[type="checkbox"]:checked,.filter-check input[type="radio"]:checked{
  background:var(--primary);border-color:var(--primary);
}
.filter-check input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.filter-check input[type="radio"]:checked::after{
  content:'';position:absolute;left:4px;top:4px;width:6px;height:6px;
  background:#fff;border-radius:50%;
}
.filter-check .count{margin-left:auto;font-size:.7rem;color:#aaa;font-weight:500;
  background:#f5f5f5;padding:2px 7px;border-radius:10px}
.price-inputs{display:flex;gap:8px;align-items:center;margin-top:4px}
.price-inputs input{
  width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:10px;font-size:.82rem;
  transition:border-color .2s;background:#fafbfc;
}
.price-inputs input:focus{border-color:var(--primary);outline:none;background:#fff}
.price-inputs span{font-size:.82rem;color:var(--text-sec)}
.apply-filter-btn{
  width:100%;padding:10px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),#4f46e5);
  color:#fff;font-weight:600;font-size:.8rem;margin-top:10px;transition:all .2s;
  box-shadow:0 2px 8px rgba(37,99,235,.2);
}
.apply-filter-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.3)}
/* Sidebar subcategory nav */
.sidebar-subcat-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;font-size:.82rem;color:var(--text-sec);
  text-decoration:none;transition:all .2s;border-left:3px solid transparent;
}
.sidebar-subcat-link:hover{background:#f5f7fa;color:var(--primary);border-left-color:var(--primary);padding-left:20px}
.sidebar-subcat-link.active-sub{color:var(--primary);font-weight:700;background:#f0f4ff;border-left-color:var(--primary)}
.sidebar-subcat-link .sub-count{
  font-size:.68rem;background:#f0f0f0;padding:2px 8px;border-radius:10px;color:var(--text-sec);font-weight:500;
}
.sidebar-subcat-link.active-sub .sub-count{background:var(--primary);color:#fff}

.clear-filters{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;text-align:center;padding:12px;font-size:.82rem;
  color:var(--primary);font-weight:600;cursor:pointer;background:#fff;
  border-radius:14px;transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.04);
}
.clear-filters:hover{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(37,99,235,.2)}

/* ===== CATEGORY MAIN ===== */
.category-main{flex:1;min-width:0}
.category-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:12px;padding:14px 20px;background:#fff;
  border-radius:16px;margin-bottom:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.04);
}
.toolbar-left{display:flex;align-items:center;gap:16px}
.result-count{font-size:.85rem;color:var(--text-sec)}
.result-count strong{color:var(--text);font-weight:700}
.toolbar-right{display:flex;align-items:center;gap:12px}
.show-per-page{display:flex;align-items:center;gap:4px;font-size:.82rem;color:var(--text-sec);
  background:#f5f6f8;border-radius:10px;padding:3px;
}
.show-per-page span{
  cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .2s;font-weight:500;
}
.show-per-page span:hover{background:#e5e7eb}
.show-per-page span.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(37,99,235,.2)}
.sort-select{
  padding:8px 14px;border:2px solid #e5e7eb;border-radius:10px;
  font-size:.82rem;background:#fff;cursor:pointer;transition:border-color .2s;
}
.sort-select:focus{border-color:var(--primary);outline:none}
.view-toggle{display:flex;gap:4px;background:#f5f6f8;padding:3px;border-radius:10px}
.view-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:transparent;
  cursor:pointer;color:var(--text-sec);transition:all .2s;border:none;
}
.view-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.2)}
.view-btn:hover:not(.active){background:#e5e7eb}
.view-btn svg{width:16px;height:16px}

/* ===== ENHANCED PRODUCT CARDS ===== */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat-product-card{
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.04);
  transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;
}
.cat-product-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.1)}
.cat-card-img{
  position:relative;aspect-ratio:1/0.85;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cat-card-img-bg{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:20px;transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.cat-product-card:hover .cat-card-img-bg{transform:scale(1.05)}
.cat-card-img-bg svg{width:65%;height:65%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.15))}
.cat-card-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.cat-badge{
  font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:8px;letter-spacing:.5px;
  text-transform:uppercase;
}
.cat-badge-sale{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.3)}
.cat-badge-new{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.cat-badge-hot{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3)}
/* Quick action overlay */
.cat-card-quick{
  position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:2;
  opacity:0;transform:translateX(10px);transition:all .3s ease;
}
.cat-product-card:hover .cat-card-quick{opacity:1;transform:translateX(0)}
.cat-quick-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.95);border-radius:10px;color:var(--text-sec);
  cursor:pointer;transition:all .2s;backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.1);border:none;
}
.cat-quick-btn:hover{background:var(--primary);color:#fff;transform:scale(1.1)}
.cat-quick-btn.wishlisted{color:#e11d48;background:rgba(255,255,255,.95)}
.cat-quick-btn.wishlisted:hover{background:#e11d48;color:#fff}
.cat-quick-btn svg{width:16px;height:16px}
/* Card info */
.cat-card-info{padding:18px 18px 16px}
.cat-card-brand{font-size:.72rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.cat-card-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-card-name a{color:inherit;text-decoration:none;transition:color .2s}
.cat-card-name a:hover{color:var(--primary)}
.cat-card-specs{font-size:.76rem;color:var(--text-sec);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.cat-card-rating{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.cat-card-rating .stars{display:flex;gap:1px}
.cat-card-rating .star{width:14px;height:14px;color:#fbbf24}
.cat-card-rating span{font-size:.72rem;color:var(--text-sec)}
.cat-card-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cat-card-price{font-size:1.15rem;font-weight:800;color:var(--text);
  background:linear-gradient(135deg,var(--text),#4338ca);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cat-card-old-price{font-size:.82rem;color:#aaa;text-decoration:line-through}
.cat-card-save{font-size:.68rem;font-weight:600;color:#10b981;background:#ecfdf5;padding:2px 8px;border-radius:6px}
.cat-card-stock{display:flex;align-items:center;gap:5px;font-size:.72rem;margin-bottom:12px}
.stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stock-dot.in{background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.5)}
.stock-dot.low{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.5)}
.stock-dot.out{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5)}
/* Add to cart button */
.cat-card-cart{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px;background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;
  border-radius:12px;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .3s;border:none;box-shadow:0 2px 8px rgba(37,99,235,.15);
}
.cat-card-cart:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.3)}
.cat-card-cart svg{width:16px;height:16px}

/* ===== LIST VIEW ===== */
.products-grid.list-view{grid-template-columns:1fr !important}
.products-grid.list-view .cat-product-card{display:flex;flex-direction:row}
.products-grid.list-view .cat-card-img{width:240px;min-height:200px;flex-shrink:0;aspect-ratio:auto}
.products-grid.list-view .cat-card-info{flex:1;display:flex;flex-direction:column;justify-content:center}

/* ===== NO RESULTS ===== */
.no-results{text-align:center;padding:80px 20px;color:var(--text-sec);grid-column:1/-1}
.no-results-icon{
  width:100px;height:100px;margin:0 auto 20px;border-radius:50%;
  background:linear-gradient(135deg,#f0f4ff,#e0e7ff);
  display:flex;align-items:center;justify-content:center;
}
.no-results-icon svg{width:48px;height:48px;color:var(--primary);opacity:.5}
.no-results h3{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:8px}
.no-results p{font-size:.88rem}

/* ===== PAGINATION ===== */
.pagination-wrapper{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:32px;padding:20px 0;flex-wrap:wrap;
}
.pagination-info{
  font-size:.82rem;color:var(--text-sec);margin-right:auto;
}
.pagination-info strong{color:var(--text);font-weight:700}
.page-btn{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:2px solid #e5e7eb;border-radius:10px;background:#fff;color:var(--text);
  font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  padding:0 4px;
}
.page-btn:hover:not(.active):not(.disabled){
  border-color:var(--primary);color:var(--primary);background:#f0f4ff;
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.12);
}
.page-btn.active{
  background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(37,99,235,.3);transform:translateY(-1px);
}
.page-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.page-btn svg{width:16px;height:16px}
.page-btn.nav-btn{padding:0 12px;gap:6px;font-size:.78rem;font-weight:600}
.page-dots{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--text-sec);letter-spacing:2px;
}
@media(max-width:768px){
  .pagination-wrapper{justify-content:center}
  .pagination-info{margin-right:0;width:100%;text-align:center;margin-bottom:8px}
  .page-btn{min-width:36px;height:36px;font-size:.8rem}
  .page-btn.nav-btn span{display:none}
}

/* ===== MOBILE FILTER ===== */
.mobile-filter-btn{
  display:none;align-items:center;gap:6px;padding:10px 16px;
  background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;border-radius:10px;
  font-size:.82rem;font-weight:600;border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.2);
}
.mobile-filter-btn svg{width:16px;height:16px}
.filter-sidebar-close{display:none;background:none;font-size:1.4rem;cursor:pointer;color:var(--text);border:none}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.cat-product-card{animation:fadeInUp .5s ease both}
.cat-product-card:nth-child(1){animation-delay:.05s}
.cat-product-card:nth-child(2){animation-delay:.1s}
.cat-product-card:nth-child(3){animation-delay:.15s}
.cat-product-card:nth-child(4){animation-delay:.2s}
.cat-product-card:nth-child(5){animation-delay:.25s}
.cat-product-card:nth-child(6){animation-delay:.3s}

/* ===== CATEGORY RESPONSIVE ===== */
@media(max-width:1200px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .filter-sidebar{width:240px}
  .subcat-tile{min-width:100px;padding:16px 12px}
  .hero-title{font-size:1.7rem}
  .hero-graphic{width:150px;height:150px}
  .hero-glow{width:150px;height:150px}
  .hero-glow svg{width:70px;height:70px}
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .category-hero{padding:28px 0 52px}
  .hero-inner{flex-direction:column;text-align:center}
  .hero-desc{margin:0 auto}
  .hero-stats{justify-content:center}
  .hero-graphic{display:none}
  .hero-title{font-size:1.4rem}
  .category-layout{flex-direction:column}
  .filter-sidebar{
    display:none;position:fixed;top:0;left:0;width:min(300px,85vw);height:100vh;
    z-index:1001;background:#fff;padding:20px;overflow-y:auto;
    box-shadow:4px 0 20px rgba(0,0,0,.15);
  }
  .filter-sidebar.mobile-open{display:block}
  .mobile-filter-btn{display:flex}
  .filter-sidebar-close{display:block}
  .toolbar-left{flex-wrap:wrap}
  .show-per-page{display:none}
  .category-toolbar{padding:12px 16px;gap:10px}
  .subcat-tile{min-width:90px;padding:14px 10px}
  .subcat-icon{width:44px;height:44px}
  .subcat-icon svg{width:22px;height:22px}
  .subcat-tile span{font-size:.72rem}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .products-grid.list-view .cat-product-card{flex-direction:column}
  .products-grid.list-view .cat-card-img{width:100%;min-height:120px}
  .cat-product-card{border-radius:12px}
  .cat-product-card:hover{transform:none;box-shadow:0 2px 12px rgba(0,0,0,.04)}
  .cat-card-img{aspect-ratio:1/0.65}
  .cat-card-img-bg{padding:12px}
  .cat-card-img-bg svg{width:55%;height:55%}
  .cat-card-badges{top:8px;left:8px;gap:4px}
  .cat-badge{font-size:.58rem;padding:3px 7px;border-radius:6px}
  .cat-card-quick{opacity:1;transform:translateX(0);top:8px;right:8px;gap:4px}
  .cat-quick-btn{width:30px;height:30px;border-radius:8px}
  .cat-quick-btn svg{width:13px;height:13px}
  .cat-card-info{padding:10px 10px 12px}
  .cat-card-brand{font-size:.62rem;margin-bottom:2px}
  .cat-card-name{font-size:.78rem;margin-bottom:3px;-webkit-line-clamp:2}
  .cat-card-specs{font-size:.66rem;margin-bottom:5px;-webkit-line-clamp:1}
  .cat-card-rating{margin-bottom:6px;gap:4px}
  .cat-card-rating .star{width:11px;height:11px}
  .cat-card-rating span{font-size:.62rem}
  .cat-card-price-row{gap:5px;margin-bottom:4px;flex-wrap:wrap}
  .cat-card-price{font-size:.92rem}
  .cat-card-old-price{font-size:.7rem}
  .cat-card-save{font-size:.58rem;padding:1px 5px}
  .cat-card-stock{font-size:.64rem;margin-bottom:8px;gap:3px}
  .stock-dot{width:5px;height:5px}
  .cat-card-cart{padding:9px;font-size:.76rem;border-radius:10px;gap:5px}
  .cat-card-cart svg{width:14px;height:14px}
}
@media(max-width:480px){
  .products-grid{gap:6px}
  .hero-stats{flex-direction:column;gap:8px}
  .hero-title{font-size:1.2rem}
  .category-hero{padding:24px 0 44px}
  .subcat-scroll{gap:8px}
  .subcat-tile{min-width:80px;padding:10px 8px}
  .subcat-icon{width:38px;height:38px}
  .subcat-icon svg{width:20px;height:20px}
  .subcat-tile span{font-size:.68rem}
  .category-toolbar{padding:10px 12px;gap:8px}
  .cat-card-img{aspect-ratio:1/0.55}
  .cat-card-img-bg{padding:10px}
  .cat-card-info{padding:8px 8px 10px}
  .cat-card-name{font-size:.72rem}
  .cat-card-specs{display:none}
  .cat-card-rating{margin-bottom:4px}
  .cat-card-price{font-size:.85rem}
  .cat-card-stock{margin-bottom:6px;font-size:.6rem}
  .cat-card-cart{padding:8px;font-size:.72rem;border-radius:8px}
  .page-btn{min-width:34px;height:34px;font-size:.78rem}
}


/* ==========================================================================
   DEALS PAGE (deals.html)
   ========================================================================== */

/* ===== STICKY DEALS BAR ===== */
.deals-sticky-bar{
  position:sticky;top:76px;z-index:98;
  background:linear-gradient(90deg,#dc2626,#ef4444,#f97316,#ef4444,#dc2626);
  background-size:200% 100%;
  animation:stickyBarShimmer 3s ease infinite;
  color:#fff;padding:10px 0;text-align:center;
  font-size:.82rem;font-weight:700;letter-spacing:.5px;
  box-shadow:0 2px 12px rgba(239,68,68,.4);
}
.deals-sticky-bar .container{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.deals-sticky-bar svg{width:16px;height:16px;animation:flamePulse 1s ease infinite alternate}
.sticky-timer{display:flex;gap:6px;align-items:center}
.sticky-timer-block{background:rgba(0,0,0,.3);padding:3px 8px;border-radius:4px;font-family:'Orbitron',monospace;font-size:.85rem;min-width:32px;text-align:center}
.sticky-timer-sep{opacity:.6;font-weight:400}
@keyframes stickyBarShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes flamePulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.2);opacity:1}}

/* ===== DEALS HERO SECTION ===== */
.deals-hero{
  background:var(--bg-dark);color:#fff;padding:70px 0 60px;text-align:center;
  position:relative;overflow:hidden;
}
.deals-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 50%,rgba(37,99,235,.15) 0%,transparent 50%),
    radial-gradient(circle at 80% 50%,rgba(239,68,68,.12) 0%,transparent 50%),
    radial-gradient(circle at 50% 0%,rgba(139,92,246,.1) 0%,transparent 60%);
  animation:heroGlow 8s ease infinite alternate;
}
.deals-hero::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
}
@keyframes heroGlow{
  0%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
  100%{opacity:.6;transform:scale(1)}
}
.deals-hero .container{position:relative;z-index:1}
.deals-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 22px;border-radius:50px;font-size:.72rem;font-weight:700;letter-spacing:2px;
  background:rgba(239,68,68,.15);color:#fca5a5;
  border:1px solid rgba(239,68,68,.3);margin-bottom:20px;
  text-transform:uppercase;
  animation:badgePulse 2s ease infinite;
}
.deals-hero-badge svg{width:14px;height:14px}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.deals-hero h1{
  font-family:'Orbitron',sans-serif;font-size:2.8rem;font-weight:900;
  margin-bottom:8px;line-height:1.1;
  text-shadow:0 0 40px rgba(37,99,235,.3);
}
.deals-hero h1 .hl{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:glowText 3s ease infinite alternate;
  filter:drop-shadow(0 0 20px rgba(59,130,246,.5));
}
@keyframes glowText{0%{filter:drop-shadow(0 0 20px rgba(59,130,246,.5))}100%{filter:drop-shadow(0 0 30px rgba(139,92,246,.6))}}
.deals-hero p{opacity:.6;font-size:.95rem;margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto}
.deals-countdown{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.deals-cd-block{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);padding:20px 26px;text-align:center;min-width:90px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
  transition:all .3s ease;
}
.deals-cd-block:hover{
  border-color:rgba(59,130,246,.4);
  box-shadow:0 0 20px rgba(59,130,246,.15);
  transform:translateY(-2px);
}
.deals-cd-block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary-l),var(--purple));
}
.deals-cd-block span{
  display:block;font-family:'Orbitron',monospace;font-size:2.2rem;font-weight:900;
  background:linear-gradient(180deg,#fff,#94a3b8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.deals-cd-block small{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;opacity:.4;margin-top:4px;display:block}
.deals-cd-sep{font-family:'Orbitron',monospace;font-size:2rem;opacity:.3;animation:sepBlink 1s ease infinite}
@keyframes sepBlink{0%,100%{opacity:.3}50%{opacity:.8}}

/* ===== FILTER TABS ===== */
.deals-filter-section{padding:0;margin-top:-24px;position:relative;z-index:2}
.deals-filter-tabs{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:8px;
  box-shadow:var(--shadow-lg);max-width:700px;margin:0 auto;
}
.filter-tab{
  padding:10px 22px;border-radius:50px;font-size:.82rem;font-weight:600;
  color:var(--text-sec);cursor:pointer;transition:all .25s ease;
  border:none;background:transparent;
}
.filter-tab:hover{color:var(--text);background:var(--surface)}
.filter-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.3);
}

/* ===== FEATURED DEAL BANNER ===== */
.featured-deal-section{padding-block:40px 0}
.featured-deal-banner{
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl);padding:40px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;color:#fff;
}
.featured-deal-banner::before{
  content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(37,99,235,.2),transparent 70%);
  border-radius:50%;pointer-events:none;
}
.featured-deal-visual{
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);padding:40px;position:relative;
  min-height:280px;
}
.featured-deal-visual svg{width:60%;height:auto;color:rgba(255,255,255,.25)}
.featured-save-badge{
  position:absolute;top:16px;right:16px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;padding:12px 18px;border-radius:var(--radius-lg);
  font-weight:900;font-size:1.2rem;
  box-shadow:0 4px 20px rgba(239,68,68,.4);
  animation:saveBadgePulse 2s ease infinite;
}
@keyframes saveBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.featured-deal-info{position:relative;z-index:1}
.featured-deal-info .featured-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.featured-deal-info h2{font-size:1.6rem;font-weight:800;margin-bottom:8px;line-height:1.3}
.featured-deal-info .featured-specs{font-size:.85rem;opacity:.5;margin-bottom:20px}
.featured-deal-pricing{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.featured-deal-pricing .featured-old{font-size:1.1rem;text-decoration:line-through;opacity:.4}
.featured-deal-pricing .featured-new{font-size:2rem;font-weight:900;color:#ef4444}
.featured-deal-savings{
  display:inline-block;padding:6px 14px;border-radius:50px;
  background:rgba(34,197,94,.15);color:#4ade80;
  font-size:.78rem;font-weight:700;margin-bottom:20px;
}
.featured-countdown{display:flex;gap:10px;margin-bottom:24px}
.featured-cd-item{text-align:center}
.featured-cd-val{
  display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:8px 14px;
  font-family:'Orbitron',monospace;font-size:1.1rem;font-weight:700;min-width:50px;
}
.featured-cd-label{font-size:.6rem;letter-spacing:1px;text-transform:uppercase;opacity:.4;margin-top:4px;display:block}
.featured-deal-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;font-weight:700;font-size:.95rem;
  border:none;cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(37,99,235,.3);
}
.featured-deal-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,99,235,.4)}
.featured-deal-btn svg{width:18px;height:18px}

/* ===== FLASH DEALS SECTION ===== */
.flash-deals-section{padding-block:40px 0}
.flash-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.flash-section-head h2{font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:10px}
.flash-section-head h2 svg{color:var(--danger)}
.flash-timer{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-sec)}
.flash-timer-block{background:var(--bg-dark);color:#fff;padding:4px 8px;border-radius:4px;font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;min-width:30px;text-align:center}
.flash-deals-scroll{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.flash-deals-scroll::-webkit-scrollbar{height:6px}
.flash-deals-scroll::-webkit-scrollbar-track{background:var(--surface);border-radius:3px}
.flash-deals-scroll::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}
.flash-deal-card{
  min-width:220px;max-width:220px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;flex-shrink:0;scroll-snap-align:start;
  transition:all .3s ease;position:relative;
}
.flash-deal-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.flash-deal-img{height:140px;display:flex;align-items:center;justify-content:center;position:relative}
.flash-deal-img svg{width:45%;height:auto;color:rgba(255,255,255,.3)}
.flash-deal-badge{
  position:absolute;top:8px;left:8px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  padding:3px 10px;border-radius:50px;font-size:.68rem;font-weight:700;
}
.flash-deal-body{padding:12px}
.flash-deal-body h4{font-size:.8rem;font-weight:600;line-height:1.3;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flash-deal-body h4 a{color:var(--text);transition:color .2s}
.flash-deal-body h4 a:hover{color:var(--primary)}
.flash-deal-prices{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.flash-deal-prices .flash-old{text-decoration:line-through;color:var(--text-sec);font-size:.75rem}
.flash-deal-prices .flash-new{font-size:.95rem;font-weight:800;color:var(--danger)}
.flash-deal-progress{margin-bottom:0}
.flash-deal-progress-bar{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin-bottom:4px}
.flash-deal-progress-bar .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--danger),var(--orange));transition:width 1s ease}
.flash-deal-progress span{font-size:.65rem;color:var(--text-sec);font-weight:600}

/* ===== DEALS PAGE SECTION ===== */
.deals-page{padding-block:40px 0}
.deals-page .section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.deals-page .section-head h2{font-size:1.3rem;font-weight:800}

/* ===== DEAL CARDS GRID ===== */
.deals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.deal-full-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;
}
.deal-full-card:hover{
  border-color:var(--primary);
  box-shadow:0 12px 40px rgba(37,99,235,.12);
  transform:translateY(-6px);
}
/* Corner ribbon */
.deal-ribbon{
  position:absolute;top:16px;left:-32px;z-index:3;
  width:120px;text-align:center;padding:6px 0;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;font-size:.72rem;font-weight:800;
  transform:rotate(-45deg);
  box-shadow:0 2px 8px rgba(239,68,68,.4);
}
.deal-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  padding:5px 12px;border-radius:50px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;font-size:.75rem;font-weight:700;
  box-shadow:0 2px 10px rgba(239,68,68,.3);
}
.deal-card-img{
  height:210px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.deal-card-img svg{
  width:50%;height:auto;color:rgba(255,255,255,.3);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.deal-full-card:hover .deal-card-img svg{transform:scale(1.1)}
.deal-card-info{padding:18px}
.deal-card-info .brand{
  font-size:.7rem;color:var(--text-sec);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:4px;
}
.deal-card-info h3{font-size:.9rem;font-weight:600;margin-bottom:4px;line-height:1.4}
.deal-card-info h3 a{color:var(--text);transition:color var(--transition)}
.deal-card-info h3 a:hover{color:var(--primary)}
.deal-card-info .specs{font-size:.73rem;color:var(--text-sec);margin-bottom:8px}
.deal-card-rating{display:flex;align-items:center;gap:4px;margin-bottom:10px}
.deal-card-rating .stars{display:flex;gap:1px}
.deal-card-rating .star{color:var(--accent);font-size:.72rem}
.deal-card-rating .star.empty{color:#d1d5db}
.deal-card-rating span{font-size:.72rem;color:var(--text-sec)}
.deal-card-pricing{margin-bottom:8px}
.deal-card-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.deal-card-price-row .old-price{text-decoration:line-through;color:var(--text-sec);font-size:.82rem}
.deal-card-price-row .price{font-size:1.15rem;font-weight:800;color:var(--danger)}
.deal-card-savings{
  display:inline-block;padding:3px 10px;border-radius:50px;
  background:rgba(34,197,94,.1);color:var(--success);
  font-size:.7rem;font-weight:700;
}
/* Urgency indicator */
.deal-urgency{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;color:var(--orange);margin-bottom:10px;
}
.deal-urgency svg{width:14px;height:14px;animation:flamePulse 1s ease infinite alternate}
/* Progress bar for claimed */
.deal-claimed-bar{margin-bottom:12px}
.deal-claimed-track{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin-bottom:4px}
.deal-claimed-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--danger));transition:width 1s ease}
.deal-claimed-text{font-size:.65rem;color:var(--text-sec);font-weight:600}
/* Bottom area */
.deal-card-bottom{display:flex;justify-content:space-between;align-items:center}
.deal-card-cart{
  padding:10px 20px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),#4f46e5);
  color:#fff;font-size:.8rem;font-weight:600;
  display:flex;align-items:center;gap:6px;
  transition:all .3s ease;border:none;cursor:pointer;
  box-shadow:0 2px 10px rgba(37,99,235,.2);
}
.deal-card-cart:hover{
  background:linear-gradient(135deg,var(--primary-h),#4338ca);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(37,99,235,.3);
}
.deal-card-cart svg{width:14px;height:14px}

/* ===== DEALS NEWSLETTER SECTION ===== */
.deals-newsletter{
  margin:50px 0 50px;padding:48px 40px;
  background:linear-gradient(135deg,#0f172a,#1e293b,#312e81);
  border-radius:var(--radius-xl);text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.deals-newsletter::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 50%,rgba(37,99,235,.2),transparent 50%),
    radial-gradient(circle at 70% 50%,rgba(139,92,246,.2),transparent 50%);
}
.deals-newsletter .container{position:relative;z-index:1}
.deals-newsletter h2{font-size:1.4rem;font-weight:800;margin-bottom:6px}
.deals-newsletter h2 svg{width:20px;height:20px;vertical-align:middle;margin-right:6px;color:var(--accent)}
.deals-newsletter p{font-size:.88rem;opacity:.6;margin-bottom:24px;max-width:450px;margin-left:auto;margin-right:auto}
.newsletter-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-form input{
  flex:1;min-width:200px;padding:14px 20px;border:2px solid rgba(255,255,255,.15);
  border-radius:var(--radius);background:rgba(255,255,255,.08);color:#fff;
  font-size:.9rem;transition:all .3s ease;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-form input:focus{outline:none;border-color:var(--primary-l);background:rgba(255,255,255,.12)}
.newsletter-form button{
  padding:14px 28px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;font-weight:700;font-size:.9rem;
  border:none;cursor:pointer;
  transition:all .3s ease;white-space:nowrap;
  box-shadow:0 4px 16px rgba(37,99,235,.3);
}
.newsletter-form button:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,235,.4)}
.newsletter-hint{font-size:.72rem;opacity:.35;margin-top:12px}

/* ===== DEALS RESPONSIVE ===== */
@media(max-width:768px){
  /* Sticky bar */
  .deals-sticky-bar{top:56px;font-size:.72rem;padding:8px 0}
  .deals-sticky-bar .container{gap:10px}
  .sticky-timer-block{min-width:24px;padding:3px 5px;font-size:.75rem}

  /* Hero — compact */
  .deals-hero{padding:32px 0 40px}
  .deals-hero h1{font-size:1.6rem}
  .deals-hero p{font-size:.82rem;margin-bottom:24px}
  .deals-hero-badge{padding:6px 14px;font-size:.62rem;letter-spacing:1.5px;margin-bottom:14px}
  .deals-countdown{gap:8px}
  .deals-cd-block{padding:12px 14px;min-width:60px;border-radius:var(--radius)}
  .deals-cd-block span{font-size:1.4rem}
  .deals-cd-block small{font-size:.55rem;letter-spacing:1.5px}
  .deals-cd-sep{font-size:1.4rem}

  /* Filter tabs — scroll horizontal */
  .deals-filter-section{margin-top:-18px}
  .deals-filter-tabs{
    border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;padding:6px;gap:4px;
  }
  .filter-tab{padding:8px 14px;font-size:.74rem;white-space:nowrap;flex-shrink:0}

  /* Featured deal — stacked */
  .featured-deal-section{padding-block:28px 0}
  .featured-deal-banner{grid-template-columns:1fr;padding:20px;gap:16px;border-radius:14px}
  .featured-deal-visual{min-height:140px;padding:16px;border-radius:12px;order:-1}
  .featured-deal-visual svg{width:50%}
  .featured-save-badge{top:10px;right:10px;padding:8px 12px;font-size:.9rem}
  .featured-deal-info .featured-label{font-size:.62rem;margin-bottom:8px}
  .featured-deal-info h2{font-size:1.2rem;margin-bottom:6px}
  .featured-deal-info .featured-specs{font-size:.78rem;margin-bottom:14px}
  .featured-deal-pricing .featured-old{font-size:.9rem}
  .featured-deal-pricing .featured-new{font-size:1.5rem}
  .featured-deal-savings{font-size:.7rem;padding:4px 10px;margin-bottom:14px}
  .featured-countdown{gap:6px;margin-bottom:16px}
  .featured-cd-val{padding:6px 10px;font-size:.9rem;min-width:40px}
  .featured-cd-label{font-size:.55rem}
  .featured-deal-btn{padding:12px 24px;font-size:.85rem;width:100%;justify-content:center}
  .featured-deal-btn:hover{transform:none}

  /* Flash deals — smaller scroll cards */
  .flash-deals-section{padding-block:28px 0}
  .flash-section-head h2{font-size:1.05rem;gap:6px}
  .flash-timer-block{font-size:.72rem;padding:3px 6px}
  .flash-deals-scroll{gap:10px;padding-bottom:12px}
  .flash-deal-card{min-width:155px;max-width:155px;border-radius:12px}
  .flash-deal-card:hover{transform:none;box-shadow:none}
  .flash-deal-img{height:100px}
  .flash-deal-img svg{width:40%}
  .flash-deal-badge{font-size:.58rem;padding:2px 7px;top:6px;left:6px}
  .flash-deal-body{padding:10px}
  .flash-deal-body h4{font-size:.72rem;margin-bottom:4px}
  .flash-deal-prices .flash-old{font-size:.65rem}
  .flash-deal-prices .flash-new{font-size:.82rem}
  .flash-deal-prices{gap:5px;margin-bottom:6px}
  .flash-deal-progress-bar{height:4px}
  .flash-deal-progress span{font-size:.58rem}

  /* Deal cards grid — 2 col compact */
  .deals-page{padding-block:28px 0}
  .deals-page .section-head{margin-bottom:16px}
  .deals-page .section-head h2{font-size:1.05rem}
  .deals-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .deal-full-card{border-radius:12px}
  .deal-full-card:hover{transform:none;box-shadow:none}
  .deal-ribbon{display:none}
  .deal-badge{top:8px;right:8px;padding:3px 8px;font-size:.62rem}
  .deal-card-img{height:120px}
  .deal-card-img svg{width:40%}
  .deal-card-info{padding:10px 10px 12px}
  .deal-card-info .brand{font-size:.6rem;margin-bottom:2px}
  .deal-card-info h3{font-size:.76rem;margin-bottom:3px}
  .deal-card-info .specs{font-size:.64rem;margin-bottom:4px;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .deal-card-rating{margin-bottom:5px;gap:3px}
  .deal-card-rating .star{font-size:.58rem}
  .deal-card-rating span{font-size:.58rem}
  .deal-card-pricing{margin-bottom:5px}
  .deal-card-price-row{gap:6px;margin-bottom:2px}
  .deal-card-price-row .price{font-size:.9rem}
  .deal-card-price-row .old-price{font-size:.68rem}
  .deal-card-savings{font-size:.56rem;padding:2px 6px}
  .deal-urgency{font-size:.62rem;margin-bottom:6px;gap:4px}
  .deal-urgency svg{width:12px;height:12px}
  .deal-claimed-bar{margin-bottom:8px}
  .deal-claimed-track{height:4px;margin-bottom:2px}
  .deal-claimed-text{font-size:.56rem}
  .deal-card-bottom{flex-direction:column;gap:6px}
  .deal-card-cart{width:100%;justify-content:center;padding:9px;font-size:.74rem;border-radius:10px}
  .deal-card-cart svg{width:13px;height:13px}

  /* Newsletter */
  .deals-newsletter{margin:30px 0;padding:30px 18px;border-radius:14px}
  .deals-newsletter h2{font-size:1.15rem}
  .deals-newsletter p{font-size:.8rem;margin-bottom:16px}
  .newsletter-form{gap:8px}
  .newsletter-form input{padding:12px 16px;font-size:.82rem;min-width:0}
  .newsletter-form button{padding:12px 20px;font-size:.82rem}
  .newsletter-hint{font-size:.65rem;margin-top:8px}
}

@media(max-width:480px){
  /* Hero */
  .deals-hero{padding:24px 0 34px}
  .deals-hero h1{font-size:1.25rem}
  .deals-hero p{font-size:.76rem;margin-bottom:20px}
  .deals-hero-badge{padding:5px 12px;font-size:.56rem}
  .deals-countdown{gap:6px}
  .deals-cd-block{padding:8px 10px;min-width:50px}
  .deals-cd-block span{font-size:1.1rem}
  .deals-cd-block small{font-size:.5rem}
  .deals-cd-sep{font-size:1rem}

  /* Filter */
  .deals-filter-section{margin-top:-14px}
  .filter-tab{padding:7px 12px;font-size:.68rem}

  /* Featured */
  .featured-deal-banner{padding:14px;gap:12px}
  .featured-deal-visual{min-height:110px;padding:12px}
  .featured-save-badge{padding:6px 10px;font-size:.78rem}
  .featured-deal-info h2{font-size:1rem}
  .featured-deal-pricing .featured-new{font-size:1.3rem}
  .featured-deal-btn{padding:11px 20px;font-size:.8rem}

  /* Flash deals */
  .flash-section-head h2{font-size:.92rem}
  .flash-deal-card{min-width:140px;max-width:140px;border-radius:10px}
  .flash-deal-img{height:85px}
  .flash-deal-body{padding:8px}
  .flash-deal-body h4{font-size:.66rem}
  .flash-deal-prices .flash-new{font-size:.76rem}
  .flash-deal-prices .flash-old{font-size:.6rem}

  /* Deal cards */
  .deals-grid{gap:8px}
  .deal-card-img{height:95px}
  .deal-card-info{padding:8px 8px 10px}
  .deal-card-info .brand{font-size:.56rem}
  .deal-card-info h3{font-size:.7rem}
  .deal-card-info .specs{display:none}
  .deal-card-rating{margin-bottom:3px}
  .deal-card-rating .star{font-size:.54rem}
  .deal-card-price-row .price{font-size:.82rem}
  .deal-card-price-row .old-price{font-size:.62rem}
  .deal-card-cart{padding:8px;font-size:.7rem;border-radius:8px}

  /* Newsletter */
  .deals-newsletter{margin:24px 0;padding:24px 14px}
  .deals-newsletter h2{font-size:1.05rem}
  .deals-newsletter p{font-size:.74rem}
  .newsletter-form{flex-direction:column}
  .newsletter-form input{width:100%;padding:12px 14px}
  .newsletter-form button{width:100%;padding:12px}
}


/* ==========================================================================
   BUILDER PAGE (builder.html)
   ========================================================================== */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== BUILDER BREADCRUMB ===== */
.breadcrumb-bar { background: linear-gradient(135deg, #f5f6f8 0%, #eef0f4 100%); border-bottom: 1px solid var(--border); padding: 14px 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-sec); margin: 0; }
.breadcrumb a { color: var(--text-sec); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .4; }
.breadcrumb .bc-current { color: var(--text); font-weight: 600; }

/* ===== BUILDER HEADER ===== */
.builder-header { text-align: center; padding: 32px 0 12px; animation: fadeIn .5s ease; }
.builder-header h1 { font-size: 2rem; font-weight: 900; color: var(--text); margin: 0 0 6px; }
.builder-header p { color: var(--text-sec); font-size: .95rem; margin: 0; }

/* ===== STEP BAR ===== */
.builder-steps { display: flex; align-items: center; gap: 0; padding: 20px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 auto; width: fit-content; max-width: 100%; }
.builder-steps::-webkit-scrollbar { display: none; }
.builder-steps { cursor: grab; user-select: none; }
.builder-steps.grabbing { cursor: grabbing; }
.b-step { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 8px; border-radius: var(--radius-lg); transition: all var(--transition); white-space: nowrap; flex-shrink: 0; }
.b-step:hover { background: var(--bg-sec); }
.b-step-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--text-sec); transition: all var(--transition); flex-shrink: 0; }
.b-step-label { font-size: .82rem; font-weight: 600; color: var(--text-sec); transition: color var(--transition); }
.b-step-selected { font-size: .7rem; color: var(--text-sec); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-step.active .b-step-circle { background: linear-gradient(135deg, var(--primary), #4f46e5); border-color: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.25); }
.b-step.active .b-step-label { color: var(--text); }
.b-step.completed .b-step-circle { background: var(--success); border-color: var(--success); color: #fff; }
.b-step.completed .b-step-label { color: var(--success); }
.b-step-connector { width: 32px; height: 2px; background: var(--border); flex-shrink: 0; }
.b-step.completed + .b-step-connector { background: var(--success); }

/* ===== BUILDER LAYOUT ===== */
.builder-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding-bottom: 60px; align-items: start; }

/* ===== PRODUCT GRID ===== */
.builder-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.builder-sort select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .82rem; background: #fff; cursor: pointer; }
.builder-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-chip { padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all var(--transition); background: #fff; }
.brand-chip:hover, .brand-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.builder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.builder-grid .cat-product-card { animation: fadeInUp .4s ease both; }
.builder-grid .cat-product-card:nth-child(1) { animation-delay: .05s; }
.builder-grid .cat-product-card:nth-child(2) { animation-delay: .1s; }
.builder-grid .cat-product-card:nth-child(3) { animation-delay: .15s; }
.builder-grid .cat-product-card:nth-child(4) { animation-delay: .2s; }
.builder-grid .cat-product-card:nth-child(5) { animation-delay: .25s; }
.builder-grid .cat-product-card:nth-child(6) { animation-delay: .3s; }

/* Override: select button instead of add to cart */
.cat-card-select { width: 100%; padding: 10px; border: none; border-radius: var(--radius); font-weight: 700; font-size: .82rem; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, var(--primary), #4f46e5); color: #fff; }
.cat-card-select:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.3); }
.cat-card-select svg { width: 16px; height: 16px; }
.cat-card-select.selected-btn { background: linear-gradient(135deg, var(--success), #059669); }

/* ===== SUMMARY SIDEBAR ===== */
.builder-summary { position: sticky; top: 120px; }
.builder-summary-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.builder-summary-header { background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%); color: #fff; padding: 18px 24px; }
.builder-summary-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.builder-summary-body { padding: 16px 20px; }
.summary-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); gap: 8px; }
.summary-item:last-child { border-bottom: none; }
.summary-item:hover { background: var(--bg-sec); margin: 0 -20px; padding: 10px 20px; }
.summary-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.summary-item-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sec); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--text-sec); flex-shrink: 0; }
.summary-item.has-product .summary-item-num { background: var(--success); color: #fff; }
.summary-item-info { min-width: 0; }
.summary-item-label { font-size: .78rem; font-weight: 600; color: var(--text-sec); }
.summary-item.has-product .summary-item-label { color: var(--text); }
.summary-item-name { font-size: .72rem; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.summary-item-price { font-size: .85rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.summary-item-remove { width: 18px; height: 18px; border: none; background: none; color: var(--danger, #ef4444); cursor: pointer; padding: 0; opacity: 0; transition: opacity var(--transition); flex-shrink: 0; }
.summary-item:hover .summary-item-remove { opacity: 1; }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; margin-top: 8px; border-top: 2px solid var(--border); }
.summary-total-label { font-size: .95rem; font-weight: 800; color: var(--text); }
.summary-total-price { font-size: 1.3rem; font-weight: 900; color: var(--primary); }
.builder-summary-actions { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.btn-add-build { width: 100%; padding: 14px; border: none; border-radius: var(--radius); font-weight: 700; font-size: .92rem; cursor: pointer; background: linear-gradient(135deg, var(--primary), #4f46e5); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition); }
.btn-add-build:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.3); }
.btn-add-build:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-clear-build { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; font-size: .82rem; cursor: pointer; background: #fff; color: var(--text-sec); transition: all var(--transition); }
.btn-clear-build:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }

.builder-empty { text-align: center; padding: 60px 20px; color: var(--text-sec); }
.builder-empty svg { width: 64px; height: 64px; opacity: .3; margin-bottom: 12px; }
.builder-empty p { font-size: .9rem; }

/* ===== BUILDER RESPONSIVE ===== */
@media (max-width: 1024px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-summary { position: static; }
  .builder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Breadcrumb */
  .breadcrumb-bar { padding: 10px 0; }
  .breadcrumb { font-size: .76rem; }

  /* Header */
  .builder-header { padding: 16px 0 4px; }
  .builder-header h1 { font-size: 1.3rem; }
  .builder-header p { font-size: .8rem; }

  /* Steps — compact scrollable row */
  .builder-steps {
    padding: 10px 0 14px;
    justify-content: flex-start;
    gap: 0;
  }
  .b-step {
    flex-direction: column;
    padding: 6px 5px;
    gap: 3px;
    border-radius: 10px;
    min-width: 48px;
    text-align: center;
    align-items: center;
  }
  .b-step > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .b-step-circle { width: 30px; height: 30px; font-size: .72rem; }
  .b-step-connector { width: 12px; height: 2px; flex-shrink: 0; align-self: center; margin-top: 0; }
  .b-step-label { font-size: .58rem; line-height: 1.2; white-space: nowrap; }
  .b-step-selected { display: none; }

  /* Controls — stacked */
  .builder-controls { gap: 8px; flex-direction: column; align-items: stretch; margin-bottom: 12px; }
  .builder-sort select { width: 100%; padding: 10px 12px; font-size: .8rem; }
  .builder-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; gap: 6px; }
  .brand-chip { padding: 6px 14px; font-size: .74rem; flex-shrink: 0; }

  /* Product grid — 2 col compact cards */
  .builder-layout { gap: 16px; }
  .builder-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-product-card { border-radius: 12px; }
  .cat-product-card:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
  .cat-card-img { aspect-ratio: 1/0.65; }
  .cat-card-img-bg { padding: 12px; }
  .cat-card-img-bg svg { width: 50%; height: 50%; }
  .cat-card-badges { top: 8px; left: 8px; gap: 4px; }
  .cat-badge { font-size: .58rem; padding: 3px 7px; }
  .cat-card-info { padding: 10px 10px 12px; }
  .cat-card-brand { font-size: .62rem; margin-bottom: 2px; }
  .cat-card-name { font-size: .78rem; margin-bottom: 3px; }
  .cat-card-specs { font-size: .64rem; -webkit-line-clamp: 1; margin-bottom: 5px; }
  .cat-card-rating { margin-bottom: 6px; gap: 4px; }
  .cat-card-rating .star { width: 11px; height: 11px; }
  .cat-card-rating span { font-size: .6rem; }
  .cat-card-price-row { gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
  .cat-card-price { font-size: .9rem; }
  .cat-card-old-price { font-size: .68rem; }
  .cat-card-save { font-size: .56rem; padding: 1px 5px; }
  .cat-card-stock { font-size: .62rem; margin-bottom: 8px; }
  .cat-card-select { padding: 9px; font-size: .76rem; border-radius: 10px; }
  .cat-card-select:hover { transform: none; box-shadow: none; }

  /* Summary — compact card */
  .builder-summary-card { border-radius: 12px; }
  .builder-summary-header { padding: 12px 14px; }
  .builder-summary-header h3 { font-size: .88rem; }
  .builder-summary-body { padding: 10px 14px; }
  .summary-item { padding: 7px 0; gap: 6px; }
  .summary-item:hover { margin: 0; padding: 7px 0; }
  .summary-item-num { width: 20px; height: 20px; font-size: .62rem; }
  .summary-item-label { font-size: .72rem; }
  .summary-item-name { max-width: 100px; font-size: .64rem; }
  .summary-item-price { font-size: .78rem; }
  .summary-item-remove { opacity: 1; width: 16px; height: 16px; }
  .summary-total { padding: 12px 0 0; }
  .summary-total-label { font-size: .82rem; }
  .summary-total-price { font-size: 1.05rem; }
  .builder-summary-actions { padding: 0 14px 14px; gap: 8px; }
  .btn-add-build { padding: 12px; font-size: .84rem; border-radius: 10px; }
  .btn-add-build:hover { transform: none; box-shadow: none; }
  .btn-clear-build { padding: 8px; font-size: .76rem; }
}
@media (max-width: 480px) {
  .builder-header h1 { font-size: 1.15rem; }
  .builder-header { padding: 14px 0 2px; }
  .builder-header p { font-size: .74rem; }

  /* Steps — minimal */
  .builder-steps { padding: 6px 0 10px; }
  .b-step { padding: 4px 3px; min-width: 40px; gap: 2px; }
  .b-step > div { gap: 1px; }
  .b-step-circle { width: 26px; height: 26px; font-size: .65rem; border-width: 1.5px; }
  .b-step-connector { width: 8px; }
  .b-step-label { font-size: .5rem; }

  /* Grid */
  .builder-layout { gap: 12px; }
  .builder-grid { gap: 8px; }
  .builder-controls { margin-bottom: 10px; }
  .brand-chip { padding: 5px 10px; font-size: .7rem; }
  .cat-card-img { aspect-ratio: 1/0.55; }
  .cat-card-img-bg { padding: 10px; }
  .cat-card-info { padding: 8px 8px 10px; }
  .cat-card-brand { font-size: .58rem; }
  .cat-card-name { font-size: .72rem; }
  .cat-card-specs { display: none; }
  .cat-card-rating { margin-bottom: 4px; }
  .cat-card-rating .star { width: 10px; height: 10px; }
  .cat-card-price { font-size: .82rem; }
  .cat-card-old-price { font-size: .62rem; }
  .cat-card-stock { font-size: .56rem; margin-bottom: 6px; }
  .cat-card-select { padding: 8px; font-size: .7rem; border-radius: 8px; gap: 4px; }
  .cat-card-select svg { width: 13px; height: 13px; }

  /* Summary */
  .builder-summary-body { padding: 8px 12px; }
  .builder-summary-actions { padding: 0 12px 12px; }
  .btn-add-build { padding: 11px; font-size: .8rem; }
  .btn-clear-build { padding: 7px; font-size: .74rem; }
  .summary-item-label { font-size: .68rem; }
  .summary-item-name { max-width: 80px; font-size: .6rem; }
  .summary-item-price { font-size: .74rem; }
  .summary-total-price { font-size: .95rem; }
}


/* ===== BUILD OF THE WEEK ===== */
.botw-banner { padding: 0 0 24px; }
.botw-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: var(--radius-lg); padding: 32px; color: #fff; position: relative; overflow: hidden; }
.botw-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events: none; }
.botw-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 20px; font-size: .78rem; font-weight: 700; margin-bottom: 16px; color: #fbbf24; }
.botw-badge svg { color: #fbbf24; }
.botw-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.botw-name { font-size: 1.6rem; font-weight: 900; margin: 0 0 4px; }
.botw-builder { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.botw-desc { font-size: .88rem; color: rgba(255,255,255,.75); line-height: 1.5; margin: 0 0 18px; }
.botw-actions { display: flex; align-items: center; gap: 16px; }
.botw-try-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: none; border-radius: var(--radius); font-weight: 700; font-size: .88rem; cursor: pointer; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a2e; transition: all var(--transition); }
.botw-try-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(251,191,36,.3); }
.botw-price { font-size: 1.3rem; font-weight: 900; color: #fbbf24; }
.botw-components { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.botw-comp { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.botw-comp-label { font-size: .68rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .5px; }
.botw-comp-name { font-size: .78rem; color: rgba(255,255,255,.9); font-weight: 600; }

/* ===== QUICK START BUNDLES ===== */
.bundle-section { padding: 0 0 28px; }
.bundle-header { text-align: center; margin-bottom: 18px; }
.bundle-header h2 { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.bundle-header p { font-size: .82rem; color: var(--text-sec); margin: 0; }
.bundle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bundle-card { border-radius: var(--radius-lg); padding: 22px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.bundle-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.bundle-card::before { content: ''; position: absolute; top: -30%; right: -30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); pointer-events: none; }
.bundle-card-name { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.bundle-card-desc { font-size: .72rem; color: rgba(255,255,255,.65); margin-bottom: 12px; line-height: 1.4; }
.bundle-card-components { flex: 1; margin-bottom: 14px; }
.bundle-comp { font-size: .68rem; color: rgba(255,255,255,.7); padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.bundle-comp strong { color: rgba(255,255,255,.95); font-weight: 600; }
.bundle-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bundle-price { font-size: 1.15rem; font-weight: 900; }
.bundle-use-btn { padding: 8px 16px; border: 2px solid rgba(255,255,255,.3); border-radius: var(--radius); font-weight: 700; font-size: .76rem; cursor: pointer; background: rgba(255,255,255,.1); color: #fff; transition: all var(--transition); white-space: nowrap; }
.bundle-use-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }

/* ===== COMPATIBILITY WARNINGS ===== */
.compat-warnings { padding: 0 20px 4px; }
.compat-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 8px; font-size: .76rem; line-height: 1.4; }
.compat-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.compat-error svg { color: #ef4444; flex-shrink: 0; margin-top: 1px; }
.compat-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.compat-warning svg { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }

/* ===== PSU WATTAGE CALCULATOR ===== */
.wattage-calc { padding: 14px 20px 16px; border-top: 1px solid var(--border); }
.wattage-header { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.wattage-header svg { color: #f59e0b; }
.wattage-numbers { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.wattage-draw { font-size: .88rem; font-weight: 800; color: var(--text); }
.wattage-psu { font-size: .76rem; color: var(--text-sec); }
.wattage-bar-track { width: 100%; height: 8px; background: var(--bg-sec); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.wattage-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease, background .3s ease; }
.wattage-status { font-size: .72rem; font-weight: 600; }

/* ===== BOTTLENECK CHECKER ===== */
.bottleneck-checker { padding: 14px 20px 16px; border-top: 1px solid var(--border); }
.bottleneck-header { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.bottleneck-header svg { color: var(--primary); }
.bottleneck-labels { display: flex; justify-content: space-between; font-size: .68rem; font-weight: 700; color: var(--text-sec); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.bottleneck-bar { position: relative; width: 100%; height: 10px; background: linear-gradient(90deg, #ef4444, #f59e0b 30%, #22c55e 45%, #22c55e 55%, #f59e0b 70%, #ef4444); border-radius: 5px; margin-bottom: 8px; }
.bottleneck-marker { position: absolute; top: -4px; width: 18px; height: 18px; background: #fff; border: 3px solid var(--text); border-radius: 50%; transform: translateX(-50%); transition: left .4s ease; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.bottleneck-msg { font-size: .76rem; font-weight: 700; text-align: center; }

/* ===== SHARE BUILD BUTTON ===== */
.btn-share-build { width: 100%; padding: 10px; border: 1px solid var(--primary); border-radius: var(--radius); font-weight: 600; font-size: .82rem; cursor: pointer; background: rgba(37,99,235,.06); color: var(--primary); transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-share-build:hover { background: rgba(37,99,235,.12); }

/* ===== SHARE MODAL ===== */
.share-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .25s ease; }
.share-modal-overlay.active { opacity: 1; visibility: visible; }
.share-modal { background: #fff; border-radius: var(--radius-lg); width: 90%; max-width: 520px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.2); transform: translateY(20px); transition: transform .25s ease; }
.share-modal-overlay.active .share-modal { transform: translateY(0); }
.share-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.share-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.share-modal-close { width: 32px; height: 32px; border: none; background: var(--bg-sec); border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-sec); transition: all var(--transition); }
.share-modal-close:hover { background: var(--border); color: var(--text); }
.share-modal-body { padding: 24px; }
.share-url-box { display: flex; gap: 8px; margin-bottom: 20px; }
.share-url-box input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .82rem; background: var(--bg-sec); color: var(--text); }
.share-copy-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: none; border-radius: var(--radius); font-weight: 600; font-size: .82rem; cursor: pointer; background: linear-gradient(135deg, var(--primary), #4f46e5); color: #fff; transition: all var(--transition); white-space: nowrap; }
.share-copy-btn:hover { box-shadow: 0 4px 12px rgba(37,99,235,.3); }
.share-social { display: flex; gap: 10px; margin-bottom: 16px; }
.share-social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--radius); font-size: .78rem; font-weight: 600; color: #fff; text-decoration: none; transition: all var(--transition); }
.share-social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.share-twitter { background: #000; }
.share-facebook { background: #1877f2; }
.share-reddit { background: #ff4500; }
.share-text-export { text-align: center; }
.share-text-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; font-size: .82rem; cursor: pointer; background: #fff; color: var(--text); transition: all var(--transition); }
.share-text-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ===== BUILDER NEW FEATURES RESPONSIVE ===== */
@media (max-width: 1024px) {
  .bundle-grid { grid-template-columns: repeat(2, 1fr); }
  .botw-content { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 768px) {
  .botw-card { padding: 20px; }
  .botw-name { font-size: 1.2rem; }
  .botw-components { grid-template-columns: 1fr; gap: 4px; }
  .botw-actions { flex-wrap: wrap; }
  .bundle-grid { grid-template-columns: 1fr; }
  .bundle-card { padding: 18px; }
  .compat-warnings { padding: 0 14px 4px; }
  .wattage-calc { padding: 12px 14px 14px; }
  .bottleneck-checker { padding: 12px 14px 14px; }
  .share-modal { width: 95%; }
  .share-social { flex-direction: column; }
  .share-url-box { flex-direction: column; }
}
@media (max-width: 480px) {
  .botw-card { padding: 16px; }
  .botw-name { font-size: 1.05rem; }
  .botw-desc { font-size: .78rem; }
  .botw-try-btn { padding: 10px 18px; font-size: .8rem; }
  .botw-price { font-size: 1.05rem; }
  .bundle-card-name { font-size: .92rem; }
  .bundle-price { font-size: 1rem; }
  .btn-share-build { padding: 8px; font-size: .76rem; }
}


/* ==========================================================================
   PRODUCT PAGE (product.html)
   ========================================================================== */

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    /* ===== BREADCRUMB BAR ===== */
    .breadcrumb-bar {
      background: linear-gradient(135deg, #f5f6f8 0%, #eef0f4 100%);
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
    }
    .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: .82rem; color: var(--text-sec); margin: 0;
    }
    .breadcrumb a { color: var(--text-sec); transition: color var(--transition); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb svg { width: 12px; height: 12px; opacity: .4; }
    .breadcrumb .bc-current { color: var(--text); font-weight: 600; }

    /* ===== PRODUCT DETAIL LAYOUT ===== */
    .product-detail {
      display: flex; gap: 48px; padding: 40px 0;
      animation: fadeIn .6s ease-out;
    }
    .product-detail-img { flex: 1; max-width: 540px; }
    .product-img-main {
      width: 100%; aspect-ratio: 1/0.85;
      border-radius: var(--radius-xl);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
      transition: transform .4s ease;
    }
    .product-img-main:hover { transform: scale(1.02); }
    .product-img-main svg {
      width: 55%; height: auto;
      color: rgba(255,255,255,.3);
      filter: drop-shadow(0 8px 30px rgba(0,0,0,.2));
    }
    .product-img-main .p-badge {
      position: absolute; top: 16px; left: 16px;
      padding: 6px 14px; font-size: .75rem;
    }

    /* Thumbnail Strip */
    .product-thumb-strip {
      display: flex; gap: 10px; margin-top: 14px;
      overflow-x: auto; padding-bottom: 4px;
    }
    .product-thumb-strip::-webkit-scrollbar { height: 4px; }
    .product-thumb-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .product-thumb {
      width: 72px; height: 72px; border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0; position: relative;
      border: 2px solid transparent;
      transition: all var(--transition);
      overflow: hidden;
    }
    .product-thumb svg { width: 50%; height: 50%; color: rgba(255,255,255,.35); }
    .product-thumb.active, .product-thumb:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 10px rgba(37,99,235,.2);
    }

    /* ===== PRODUCT INFO ===== */
    .product-detail-info {
      flex: 1;
      animation: slideInLeft .5s ease-out .15s both;
    }
    .product-detail-brand {
      font-size: .78rem; text-transform: uppercase;
      letter-spacing: 1.5px; color: var(--text-sec);
      margin-bottom: 6px;
    }
    .product-detail-name {
      font-size: 1.7rem; font-weight: 800;
      line-height: 1.3; margin-bottom: 14px;
    }
    .product-detail-rating {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 18px;
    }
    .product-detail-rating span { font-size: .85rem; color: var(--text-sec); }

    /* Price */
    .product-detail-price {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 20px; padding: 16px 20px;
      background: linear-gradient(135deg, #f0f5ff 0%, #f5f0ff 100%);
      border-radius: var(--radius-lg); border: 1px solid rgba(37,99,235,.08);
    }
    .product-detail-price .price-current {
      font-size: 2rem; font-weight: 900; color: var(--primary);
      letter-spacing: -.5px;
    }
    .product-detail-price .price-old {
      font-size: 1.1rem; text-decoration: line-through;
      color: var(--text-sec); opacity: .7;
    }
    .product-detail-price .save-badge {
      padding: 5px 14px; border-radius: 50px;
      background: rgba(239,68,68,.1); color: var(--danger);
      font-size: .78rem; font-weight: 700;
      animation: pulse 2s infinite;
    }

    /* Description & Specs */
    .product-detail-desc {
      font-size: .9rem; color: var(--text-sec);
      line-height: 1.7; margin-bottom: 20px;
      padding-bottom: 20px; border-bottom: 1px solid var(--border);
    }
    .product-detail-specs {
      font-size: .85rem; color: var(--text-sec); margin-bottom: 20px;
    }
    .product-detail-specs strong { color: var(--text); }

    /* Stock Badge */
    .product-stock-label {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 18px; border-radius: 50px;
      font-size: .82rem; font-weight: 600; margin-bottom: 22px;
    }
    .stock-dot {
      width: 8px; height: 8px; border-radius: 50%;
      display: inline-block;
    }
    .stock-dot.in { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,.4); }
    .stock-dot.low { background: var(--orange); box-shadow: 0 0 8px rgba(249,115,22,.4); }
    .stock-dot.out { background: var(--danger); box-shadow: 0 0 8px rgba(239,68,68,.4); }
    .stock-in { background: rgba(34,197,94,.08); color: var(--success); }
    .stock-low { background: rgba(249,115,22,.08); color: var(--orange); }
    .stock-out { background: rgba(239,68,68,.08); color: var(--danger); }

    /* Actions */
    .product-actions {
      display: flex; gap: 12px; align-items: center;
      flex-wrap: wrap; margin-bottom: 28px;
    }
    .qty-selector {
      display: flex; align-items: center;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      overflow: hidden; background: #fff;
    }
    .qty-selector button {
      width: 42px; height: 46px; font-size: 1.1rem;
      font-weight: 600; transition: all var(--transition);
      background: var(--surface);
    }
    .qty-selector button:hover { background: var(--primary); color: #fff; }
    .qty-selector span {
      width: 52px; text-align: center;
      font-weight: 700; font-size: .95rem;
    }
    .btn-add-cart {
      padding: 13px 36px; border-radius: var(--radius);
      background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
      color: #fff; font-weight: 700; font-size: .95rem;
      display: flex; align-items: center; gap: 10px;
      transition: all var(--transition);
      box-shadow: 0 4px 14px rgba(37,99,235,.25);
    }
    .btn-add-cart:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37,99,235,.35);
    }
    .btn-add-wish {
      padding: 13px 22px; border-radius: var(--radius);
      border: 1.5px solid var(--border);
      font-weight: 600; font-size: .85rem;
      display: flex; align-items: center; gap: 8px;
      transition: all var(--transition);
      background: #fff;
    }
    .btn-add-wish:hover { border-color: var(--danger); color: var(--danger); }
    .btn-add-compare {
      padding: 13px 22px; border-radius: var(--radius);
      border: 1.5px solid var(--border);
      font-weight: 600; font-size: .85rem;
      display: flex; align-items: center; gap: 8px;
      transition: all var(--transition);
      background: #fff;
    }
    .btn-add-compare:hover { border-color: var(--purple); color: var(--purple); }
    .btn-add-compare.active {
      border-color: var(--purple); color: var(--purple);
      background: rgba(139,92,246,.05);
    }
    .btn-add-compare svg { transition: transform var(--transition); }
    .btn-add-compare:hover svg { transform: scale(1.15); }
    .btn-add-wish.active {
      border-color: var(--danger); color: var(--danger);
      background: rgba(239,68,68,.05);
    }
    .btn-add-wish svg { transition: transform var(--transition); }
    .btn-add-wish:hover svg { transform: scale(1.15); }

    /* ===== SOCIAL SHARE ===== */
    .social-share-row {
      display: flex; align-items: center; gap: 12px;
      padding-top: 20px; border-top: 1px solid var(--border);
    }
    .social-share-row span {
      font-size: .82rem; font-weight: 600; color: var(--text-sec);
    }
    .social-share-btn {
      width: 38px; height: 38px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1.5px solid var(--border); transition: all var(--transition);
      background: #fff;
    }
    .social-share-btn svg { width: 16px; height: 16px; }
    .social-share-btn.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
    .social-share-btn.tw:hover { background: #1da1f2; border-color: #1da1f2; color: #fff; }
    .social-share-btn.pt:hover { background: #e60023; border-color: #e60023; color: #fff; }

    /* ===== TABS SECTION ===== */
    .product-tabs-section {
      padding: 0 0 40px;
      animation: fadeInUp .6s ease-out .3s both;
    }
    .tabs-header {
      display: flex; border-bottom: 2px solid var(--border);
      margin-bottom: 0; gap: 0;
    }
    .tab-btn {
      padding: 14px 28px; font-size: .9rem; font-weight: 600;
      color: var(--text-sec); position: relative;
      transition: all var(--transition); cursor: pointer;
      background: none; border: none;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      color: var(--primary);
    }
    .tab-btn.active::after {
      content: ''; position: absolute;
      bottom: -2px; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--primary), #4f46e5);
      border-radius: 2px 2px 0 0;
    }
    .tab-panel {
      display: none; padding: 28px 0;
      animation: fadeIn .3s ease;
    }
    .tab-panel.active { display: block; }

    /* Description Tab */
    .tab-description {
      font-size: .92rem; line-height: 1.8; color: var(--text-sec);
      max-width: 800px;
    }
    .tab-description p { margin-bottom: 16px; }

    /* Specs Tab - Modern Grid */
    .specs-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
    }
    .spec-row {
      display: flex; justify-content: space-between;
      padding: 14px 20px; font-size: .88rem;
      border-bottom: 1px solid var(--border);
    }
    .spec-row:nth-child(odd) { background: #fafbfc; }
    .spec-row:nth-child(even) { background: #fff; }
    .spec-row:last-child, .spec-row:nth-last-child(2):nth-child(odd) {
      border-bottom: none;
    }
    .spec-label { font-weight: 600; color: var(--text); }
    .spec-value { color: var(--text-sec); text-align: right; }

    /* Reviews Tab */
    .reviews-summary {
      display: flex; gap: 32px; align-items: center;
      padding: 24px; background: #fafbfc;
      border-radius: var(--radius-lg); border: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .reviews-big-score {
      text-align: center; min-width: 120px;
    }
    .reviews-big-score .score {
      font-size: 3rem; font-weight: 900; color: var(--text);
      line-height: 1;
    }
    .reviews-big-score .out-of {
      font-size: .82rem; color: var(--text-sec); margin-top: 4px;
    }
    .reviews-bars { flex: 1; }
    .review-bar-row {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 6px; font-size: .8rem;
    }
    .review-bar-row span:first-child {
      min-width: 40px; text-align: right; color: var(--text-sec);
    }
    .review-bar-track {
      flex: 1; height: 8px; background: var(--border);
      border-radius: 4px; overflow: hidden;
    }
    .review-bar-fill {
      height: 100%; border-radius: 4px;
      background: linear-gradient(90deg, var(--accent), #f59e0b);
      transition: width .6s ease;
    }
    .review-bar-row span:last-child {
      min-width: 28px; color: var(--text-sec);
    }
    .review-card {
      padding: 20px; border: 1px solid var(--border);
      border-radius: var(--radius-lg); margin-bottom: 12px;
      background: #fff; transition: box-shadow var(--transition);
    }
    .review-card:hover { box-shadow: var(--shadow-md); }
    .review-card-head {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 8px;
    }
    .review-card-head strong { font-size: .9rem; }
    .review-card-head .review-date { font-size: .78rem; color: var(--text-sec); }
    .review-card p { font-size: .88rem; color: var(--text-sec); line-height: 1.6; }

    /* ===== RELATED PRODUCTS ===== */
    .related-section {
      padding: 40px 0 60px;
      animation: fadeInUp .6s ease-out .4s both;
    }
    .related-heading {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 28px;
    }
    .related-heading h2 {
      font-size: 1.4rem; font-weight: 800;
    }
    .related-heading::after {
      content: ''; flex: 1; height: 2px;
      background: linear-gradient(90deg, var(--border), transparent);
    }
    .related-scroll-wrap {
      overflow-x: auto; padding-bottom: 8px;
      scrollbar-width: thin;
    }
    .related-scroll-wrap::-webkit-scrollbar { height: 4px; }
    .related-scroll-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .related-scroll-wrap .products-grid {
      min-width: max-content;
    }

    /* Hover effect on related product cards */
    .related-section .p-card {
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .related-section .p-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 32px rgba(0,0,0,.12);
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px) {
      .product-detail { flex-direction: column; gap: 24px; }
      .product-detail-img { max-width: 100%; }
      .specs-grid { grid-template-columns: 1fr; }
      .reviews-summary { flex-direction: column; text-align: center; gap: 16px; }
      .tab-btn { padding: 12px 16px; font-size: .82rem; }
      .product-detail-price { flex-wrap: wrap; }
      .product-thumbs { gap: 8px; }
      .product-thumb { width: 60px; height: 60px; }
      .related-scroll-wrap .products-grid {
        display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; padding-bottom: 8px;
      }
      .related-scroll-wrap .products-grid .p-card {
        min-width: 220px; flex-shrink: 0; scroll-snap-align: start;
      }
      .social-share { gap: 8px; }
    }
    @media(max-width:480px) {
      .product-detail { gap: 18px; }
      .product-detail-info h1 { font-size: 1.2rem; }
      .product-detail-price .current-price { font-size: 1.3rem; }
      .product-thumb { width: 52px; height: 52px; }
      .tab-btn { padding: 10px 12px; font-size: .78rem; }
      .tabs-header { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
      .specs-grid { gap: 0; }
      .spec-item { padding: 10px 14px; font-size: .82rem; }
      .review-card { padding: 16px; }
      .related-scroll-wrap .products-grid .p-card { min-width: 180px; }
    }


/* ==========================================================================
   CART PAGE (cart.html)
   ========================================================================== */

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideOut {
      to { opacity: 0; transform: translateX(-40px); height: 0; margin: 0; padding: 0; overflow: hidden; }
    }
    @keyframes bounceIn {
      0% { transform: scale(0.9); opacity: 0; }
      50% { transform: scale(1.02); }
      100% { transform: scale(1); opacity: 1; }
    }

    /* ===== BREADCRUMB BAR ===== */
    .breadcrumb-bar {
      background: linear-gradient(135deg, #f5f6f8 0%, #eef0f4 100%);
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
    }
    .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: .82rem; color: var(--text-sec); margin: 0;
    }
    .breadcrumb a { color: var(--text-sec); transition: color var(--transition); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb svg { width: 12px; height: 12px; opacity: .4; }
    .breadcrumb .bc-current { color: var(--text); font-weight: 600; }

    /* ===== PROGRESS STEPS ===== */
    .cart-steps {
      display: flex; align-items: center; justify-content: center;
      gap: 0; padding: 28px 0 8px;
      animation: fadeIn .5s ease;
    }
    .step {
      display: flex; align-items: center; gap: 10px;
    }
    .step-circle {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .82rem; font-weight: 700;
      border: 2px solid var(--border); color: var(--text-sec);
      background: #fff; transition: all var(--transition);
    }
    .step.active .step-circle {
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      border-color: var(--primary); color: #fff;
      box-shadow: 0 4px 14px rgba(37,99,235,.25);
    }
    .step.completed .step-circle {
      background: var(--success); border-color: var(--success); color: #fff;
    }
    .step-label {
      font-size: .85rem; font-weight: 600; color: var(--text-sec);
    }
    .step.active .step-label { color: var(--primary); }
    .step.completed .step-label { color: var(--success); }
    .step-connector {
      width: 60px; height: 2px; background: var(--border);
      margin: 0 12px; border-radius: 2px;
    }
    .step.completed + .step-connector,
    .step-connector.done { background: var(--success); }

    /* ===== CART PAGE LAYOUT ===== */
    .cart-page {
      display: flex; gap: 32px; padding: 32px 0 60px;
      animation: fadeIn .5s ease .1s both;
    }
    .cart-page-main { flex: 1; }
    .cart-page-sidebar { width: 380px; flex-shrink: 0; }

    /* ===== CART ITEM CARDS ===== */
    .cart-item-card {
      display: flex; align-items: center; gap: 20px;
      padding: 20px; background: #fff;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      margin-bottom: 14px; position: relative;
      transition: all .3s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,.04);
      animation: fadeInUp .4s ease both;
    }
    .cart-item-card:nth-child(2) { animation-delay: .08s; }
    .cart-item-card:nth-child(3) { animation-delay: .16s; }
    .cart-item-card:nth-child(4) { animation-delay: .24s; }
    .cart-item-card:nth-child(5) { animation-delay: .32s; }
    .cart-item-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .cart-item-card.removing {
      animation: slideOut .35s ease forwards;
    }
    .cart-item-img {
      width: 90px; height: 90px; border-radius: var(--radius-lg);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
    }
    .cart-item-img svg { width: 55%; height: 55%; color: rgba(255,255,255,.3); }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-info h4 {
      font-size: .95rem; font-weight: 700;
      margin-bottom: 4px; line-height: 1.3;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cart-item-info .cart-item-brand {
      font-size: .78rem; color: var(--text-sec); margin-bottom: 6px;
    }
    .cart-item-info .cart-item-price {
      font-size: 1rem; font-weight: 800; color: var(--primary);
    }

    /* Quantity Stepper */
    .qty-stepper {
      display: flex; align-items: center; gap: 0;
    }
    .qty-stepper button {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700;
      border: 1.5px solid var(--border); background: #fff;
      transition: all var(--transition); color: var(--text);
    }
    .qty-stepper button:hover {
      border-color: var(--primary); color: var(--primary);
      background: rgba(37,99,235,.05);
    }
    .qty-stepper span {
      min-width: 40px; text-align: center;
      font-weight: 700; font-size: .95rem;
    }

    /* Subtotal per item */
    .cart-item-subtotal {
      min-width: 90px; text-align: right;
      font-size: 1.05rem; font-weight: 800;
      color: var(--text);
    }

    /* Remove Button */
    .cart-item-remove {
      position: absolute; top: 12px; right: 12px;
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(239,68,68,.08); color: var(--danger);
      font-size: .85rem; font-weight: 700;
      transition: all var(--transition); border: none;
      cursor: pointer;
    }
    .cart-item-remove:hover {
      background: var(--danger); color: #fff;
      transform: scale(1.1);
    }
    .cart-item-remove svg { width: 14px; height: 14px; }

    /* ===== CART ACTIONS ROW ===== */
    .cart-actions-row {
      display: flex; justify-content: space-between;
      align-items: center; margin-top: 20px;
      flex-wrap: wrap; gap: 12px;
    }
    .continue-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .88rem; font-weight: 600; color: var(--primary);
      transition: gap var(--transition);
    }
    .continue-link:hover { gap: 10px; }
    .clear-cart-btn {
      padding: 10px 20px; border: 1px solid var(--danger);
      border-radius: var(--radius); color: var(--danger);
      font-size: .82rem; font-weight: 600;
      transition: all var(--transition);
    }
    .clear-cart-btn:hover { background: var(--danger); color: #fff; }

    /* ===== ORDER SUMMARY - STICKY SIDEBAR ===== */
    .sidebar-sticky { position: sticky; top: 120px; }
    .order-summary {
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .order-summary-header {
      background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
      color: #fff; padding: 18px 24px;
    }
    .order-summary-header h3 {
      font-size: 1.05rem; font-weight: 700; margin: 0;
    }
    .order-summary-body { padding: 20px 24px; }
    .summary-row {
      display: flex; justify-content: space-between;
      padding: 10px 0; font-size: .88rem;
    }
    .summary-row.total {
      font-weight: 800; font-size: 1.1rem;
      border-top: 2px solid var(--border);
      padding-top: 14px; margin-top: 10px;
    }
    .summary-row .free { color: var(--success); font-weight: 600; }

    /* Promo Code */
    .promo-section {
      padding: 16px 24px 20px;
      border-top: 1px solid var(--border);
    }
    .promo-label {
      font-size: .82rem; font-weight: 600; color: var(--text-sec);
      margin-bottom: 8px; display: block;
    }
    .promo-input-row {
      display: flex; gap: 8px;
    }
    .promo-input-row input {
      flex: 1; padding: 10px 14px; border: 1px solid var(--border);
      border-radius: var(--radius); font-size: .85rem;
      transition: border-color var(--transition);
    }
    .promo-input-row input:focus {
      outline: none; border-color: var(--primary);
    }
    .promo-input-row input::placeholder { color: #aaa; }
    .promo-apply-btn {
      padding: 10px 20px; border-radius: var(--radius);
      background: var(--surface); border: 1px solid var(--border);
      font-size: .82rem; font-weight: 600; color: var(--text);
      transition: all var(--transition); cursor: pointer;
    }
    .promo-apply-btn:hover {
      background: var(--primary); color: #fff;
      border-color: var(--primary);
    }

    /* Delivery Estimate */
    .delivery-estimate {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 24px; border-top: 1px solid var(--border);
      font-size: .82rem; color: var(--text-sec);
    }
    .delivery-estimate svg {
      width: 18px; height: 18px; color: var(--success); flex-shrink: 0;
    }
    .delivery-estimate strong { color: var(--text); }

    /* ===== CHECKOUT FORM ===== */
    .checkout-form {
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .checkout-form-header {
      padding: 18px 24px; border-bottom: 1px solid var(--border);
    }
    .checkout-form-header h3 {
      font-size: 1.05rem; font-weight: 700; margin: 0;
    }
    .checkout-form-body { padding: 24px; }
    .form-section-label {
      font-size: .78rem; text-transform: uppercase;
      letter-spacing: 1px; color: var(--text-sec);
      font-weight: 600; margin-bottom: 14px;
      padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .form-group { margin-bottom: 14px; }
    .form-group label {
      display: block; font-size: .82rem;
      font-weight: 600; margin-bottom: 6px; color: var(--text);
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; padding: 11px 14px;
      border: 1px solid var(--border); border-radius: var(--radius);
      font-size: .88rem; transition: border-color var(--transition);
      background: #fff;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37,99,235,.08);
    }
    .form-row { display: flex; gap: 12px; }
    .form-row .form-group { flex: 1; }

    /* Payment Method Radio Cards */
    .payment-methods {
      display: flex; gap: 10px; margin-bottom: 16px;
    }
    .payment-card {
      flex: 1; padding: 14px 16px;
      border: 2px solid var(--border); border-radius: var(--radius-lg);
      cursor: pointer; transition: all var(--transition);
      text-align: center; background: #fff;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .payment-card:hover { border-color: var(--primary-l); }
    .payment-card.selected {
      border-color: var(--primary);
      background: rgba(37,99,235,.03);
      box-shadow: 0 0 0 3px rgba(37,99,235,.08);
    }
    .payment-card input[type="radio"] { display: none; }
    .payment-card svg { width: 28px; height: 28px; }
    .payment-card span {
      font-size: .78rem; font-weight: 600; color: var(--text-sec);
    }
    .payment-card.selected span { color: var(--primary); }

    /* Place Order Button */
    .place-order-btn {
      width: 100%; padding: 15px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
      color: #fff; font-weight: 700; font-size: .95rem;
      margin-top: 8px; transition: all var(--transition);
      display: flex; align-items: center; justify-content: center; gap: 10px;
      border: none; cursor: pointer;
      box-shadow: 0 4px 14px rgba(37,99,235,.25);
    }
    .place-order-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37,99,235,.35);
    }

    /* ===== EMPTY CART STATE ===== */
    .cart-empty-page {
      text-align: center; padding: 80px 0;
      animation: bounceIn .5s ease;
    }
    .cart-empty-page svg {
      width: 120px; height: 120px; color: var(--text-sec);
      opacity: .2; margin-bottom: 20px;
    }
    .cart-empty-page h2 { margin-bottom: 8px; font-size: 1.5rem; }
    .cart-empty-page p { color: var(--text-sec); margin-bottom: 24px; font-size: .95rem; }
    .cart-empty-page .btn { animation: fadeIn .5s ease .3s both; }

    /* ===== ORDER SUCCESS STATE ===== */
    .order-success svg { width: 80px; height: 80px; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px) {
      .cart-page { flex-direction: column; gap: 20px; }
      .cart-page-sidebar { width: 100%; }
      .cart-item-card { flex-wrap: wrap; gap: 14px; }
      .cart-item-subtotal { min-width: auto; text-align: left; }
      .form-row { flex-direction: column; }
      .cart-steps { gap: 0; }
      .step-label { font-size: .75rem; }
      .step-connector { width: 32px; }
      .payment-methods { flex-direction: column; }
      .cart-item-info h4 { white-space: normal; }
      .order-summary-body { padding: 16px 18px; }
      .checkout-form-body { padding: 20px 18px; }
      .sidebar-sticky { position: static; }
    }
    @media(max-width:480px) {
      .cart-steps { padding: 18px 0 4px; }
      .step-circle { width: 30px; height: 30px; font-size: .78rem; }
      .step-label { font-size: .7rem; }
      .step-connector { width: 20px; }
      .cart-item-card { padding: 14px; gap: 10px; }
      .cart-item-img { width: 70px; height: 70px; border-radius: 8px; }
      .cart-item-info h4 { font-size: .82rem; }
      .qty-stepper button { width: 28px; height: 28px; font-size: .85rem; }
      .qty-stepper span { font-size: .85rem; min-width: 32px; }
      .cart-item-subtotal { font-size: .95rem; }
      .order-summary-body { padding: 14px 16px; }
      .summary-row { font-size: .82rem; padding: 8px 0; }
      .checkout-form-body { padding: 16px 14px; }
      .place-order-btn { padding: 14px; font-size: .88rem; }
      .cart-empty-page svg { width: 80px; height: 80px; }
      .cart-empty-page h2 { font-size: 1.2rem; }
    }


/* ==========================================================================
   WISHLIST PAGE (wishlist.html)
   ========================================================================== */

    /* ===== BREADCRUMB BAR ===== */
    .page-breadcrumb-bar {
      background: linear-gradient(135deg, #f0f0f3 0%, #e8eaf0 100%);
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .breadcrumb-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .84rem;
      color: var(--text-sec);
    }
    .breadcrumb-inner a {
      color: var(--text-sec);
      transition: color var(--transition);
      font-weight: 500;
    }
    .breadcrumb-inner a:hover { color: var(--primary); }
    .breadcrumb-inner svg { width: 14px; height: 14px; opacity: .4; flex-shrink: 0; }
    .breadcrumb-inner .bc-current { color: var(--text); font-weight: 600; }

    /* ===== WISHLIST PAGE HEADER ===== */
    .wishlist-hero {
      padding: 36px 0 0;
    }
    .wishlist-hero-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
    .wishlist-hero-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .wishlist-hero-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, #fee2e2, #fecaca);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .wishlist-hero-icon svg {
      width: 26px;
      height: 26px;
      color: #ef4444;
      fill: #ef4444;
    }
    .wishlist-hero-text h1 {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .wishlist-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 28px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      color: #fff;
      font-size: .78rem;
      font-weight: 700;
      padding: 0 8px;
    }
    .wishlist-hero-text p {
      font-size: .88rem;
      color: var(--text-sec);
      margin-top: 2px;
    }
    .wishlist-hero-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .share-wishlist-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 50px;
      border: 1.5px solid var(--border);
      font-size: .84rem;
      font-weight: 600;
      color: var(--text-sec);
      background: #fff;
      cursor: pointer;
      transition: all var(--transition);
    }
    .share-wishlist-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      box-shadow: 0 2px 10px rgba(37,99,235,.1);
    }
    .share-wishlist-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ===== SORT BAR ===== */
    .wishlist-sort-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .sort-label {
      font-size: .84rem;
      color: var(--text-sec);
      font-weight: 500;
    }
    .sort-options {
      display: flex;
      gap: 4px;
      background: var(--surface);
      border-radius: var(--radius);
      padding: 3px;
    }
    .sort-opt {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: .8rem;
      font-weight: 600;
      color: var(--text-sec);
      cursor: pointer;
      border: none;
      background: none;
      transition: all var(--transition);
      white-space: nowrap;
    }
    .sort-opt:hover { color: var(--text); }
    .sort-opt.active {
      background: #fff;
      color: var(--primary);
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }

    /* ===== WISHLIST CONTENT AREA ===== */
    .wishlist-page {
      padding: 0 0 60px;
    }

    /* ===== EMPTY STATE ===== */
    .wishlist-empty {
      text-align: center;
      padding: 80px 0;
    }
    .wishlist-empty-illustration {
      width: 140px;
      height: 140px;
      margin: 0 auto 28px;
      position: relative;
    }
    .wishlist-empty h2 {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 8px;
    }
    .wishlist-empty p {
      color: var(--text-sec);
      font-size: .95rem;
      margin-bottom: 28px;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }
    .wishlist-empty-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      border-radius: 50px;
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      color: #fff;
      font-size: .95rem;
      font-weight: 700;
      transition: all var(--transition);
      text-decoration: none;
      border: none;
      cursor: pointer;
    }
    .wishlist-empty-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(37,99,235,.3);
    }
    .wishlist-empty-cta svg {
      width: 18px;
      height: 18px;
    }

    /* ===== WISHLIST GRID ===== */
    .wishlist-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    /* ===== WISH CARD ===== */
    .wish-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all .35s cubic-bezier(.4,0,.2,1);
      position: relative;
    }
    .wish-card:hover {
      border-color: transparent;
      box-shadow: 0 12px 40px rgba(0,0,0,.12);
      transform: translateY(-6px);
    }

    /* Card Image */
    .wish-card-img {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .wish-card-img::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(transparent, rgba(0,0,0,.08));
      pointer-events: none;
    }
    .wish-card-img svg {
      width: 50%;
      height: auto;
      color: rgba(255,255,255,.3);
      position: relative;
      z-index: 1;
    }

    /* Heart Toggle Remove */
    .wish-card-heart {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0,0,0,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      transition: all var(--transition);
      z-index: 2;
    }
    .wish-card-heart svg {
      width: 18px;
      height: 18px;
      color: #ef4444;
      fill: #ef4444;
      transition: all var(--transition);
    }
    .wish-card-heart:hover {
      transform: scale(1.15);
      background: #fff;
    }
    .wish-card-heart:hover svg {
      fill: none;
      color: #ef4444;
    }

    /* Card Info */
    .wish-card-info {
      padding: 18px;
    }
    .wish-card-info .brand {
      font-size: .7rem;
      color: var(--text-sec);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .wish-card-info h3 {
      font-size: .88rem;
      font-weight: 700;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    .wish-card-info h3 a {
      color: var(--text);
      transition: color var(--transition);
    }
    .wish-card-info h3 a:hover { color: var(--primary); }
    .wish-card-info .specs {
      font-size: .73rem;
      color: var(--text-sec);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    /* Stock Status */
    .wish-stock {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .72rem;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .wish-stock-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      display: inline-block;
      animation: pulseDot 2s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%, 100% { opacity: 1; }
      50% { opacity: .5; }
    }
    .wish-stock-text { color: var(--success); }

    /* Added date */
    .wish-added-date {
      font-size: .7rem;
      color: var(--text-sec);
      opacity: .7;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .wish-added-date svg {
      width: 12px;
      height: 12px;
      opacity: .5;
    }

    /* Price */
    .wish-card-price {
      font-size: 1.1rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .wish-card-price .old {
      text-decoration: line-through;
      color: var(--text-sec);
      font-size: .78rem;
      font-weight: 400;
      margin-right: 6px;
      -webkit-text-fill-color: var(--text-sec);
    }

    /* Card Bottom */
    .wish-card-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 4px;
    }

    /* Add to Cart Button */
    .wish-add-cart {
      padding: 9px 18px;
      border-radius: 50px;
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      color: #fff;
      font-size: .78rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all var(--transition);
      border: none;
      cursor: pointer;
    }
    .wish-add-cart:hover {
      box-shadow: 0 4px 14px rgba(37,99,235,.3);
      transform: translateY(-1px);
    }
    .wish-add-cart svg {
      width: 14px;
      height: 14px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
      .wishlist-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .wishlist-hero-text h1 { font-size: 1.2rem; }
      .sort-options { flex-wrap: wrap; }
      .wish-card:hover{transform:none;box-shadow:none}
      .wish-card-img{height:140px}
      .wish-card-img svg{width:40%}
      .wish-card-heart{width:30px;height:30px;top:8px;right:8px}
      .wish-card-heart svg{width:14px;height:14px}
      .wish-card-info{padding:10px 10px 12px}
      .wish-card-info .brand{font-size:.62rem;margin-bottom:2px}
      .wish-card-info h3{font-size:.78rem;margin-bottom:4px}
      .wish-card-info .specs{font-size:.66rem;margin-bottom:6px;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
      .wish-stock{font-size:.64rem;margin-bottom:5px}
      .wish-stock-dot{width:5px;height:5px}
    }
    @media (max-width: 480px) {
      .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .wishlist-hero-inner { flex-direction: column; align-items: flex-start; }
      .wishlist-sort-bar { flex-direction: column; align-items: flex-start; }
      .wish-card-img{height:110px}
      .wish-card-img svg{width:35%}
      .wish-card-info{padding:8px 8px 10px}
      .wish-card-info h3{font-size:.72rem}
      .wish-card-info .specs{display:none}
      .wish-card-info .brand{font-size:.58rem}
    }


/* ==========================================================================
   COMPARE PAGE (compare.html)
   ========================================================================== */

    /* ===== COMPARE HERO ===== */
    .compare-hero{
      position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e293b 40%,#4c1d95 70%,#7c3aed 100%);
      padding:40px 0 60px;overflow:hidden;text-align:center;color:#fff;
    }
    .compare-hero::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 30%,rgba(139,92,246,.3),transparent 60%);
      pointer-events:none;
    }
    .compare-hero-inner{position:relative;z-index:1}
    .compare-hero-icon{
      width:72px;height:72px;margin:0 auto 16px;border-radius:50%;
      background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
      display:flex;align-items:center;justify-content:center;
    }
    .compare-hero-icon svg{width:36px;height:36px;color:#fff}
    .compare-hero h1{
      font-family:'Orbitron',sans-serif;font-size:2rem;font-weight:900;margin-bottom:8px;
      background:linear-gradient(135deg,#fff 0%,#c4b5fd 50%,#a78bfa 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .compare-hero p{color:rgba(255,255,255,.6);font-size:.92rem}
    .compare-hero-wave{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0}
    .compare-hero-wave svg{display:block;width:100%;height:40px}

    /* ===== COMPARE TABLE ===== */
    .compare-section{padding:40px 0 60px;background:#f8f9fb;min-height:400px}
    .compare-table-wrap{overflow-x:auto;padding-bottom:8px}
    .compare-table{
      width:100%;border-collapse:separate;border-spacing:0;
      background:#fff;border-radius:16px;overflow:hidden;
      box-shadow:0 2px 16px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);
    }
    .compare-table th,.compare-table td{
      padding:16px 20px;text-align:left;border-bottom:1px solid #f0f0f3;
      font-size:.88rem;vertical-align:top;
    }
    .compare-table th{
      background:#f8f9fb;font-weight:700;color:var(--text);
      width:160px;min-width:140px;white-space:nowrap;
      position:sticky;left:0;z-index:2;
    }
    .compare-table td{min-width:220px;color:var(--text-sec)}
    .compare-table tr:last-child th,
    .compare-table tr:last-child td{border-bottom:none}

    /* Product header cell */
    .compare-product-cell{text-align:center;padding:24px 20px}
    .compare-product-img{
      width:120px;height:100px;border-radius:12px;margin:0 auto 12px;
      display:flex;align-items:center;justify-content:center;
    }
    .compare-product-img svg{width:60%;height:60%;color:rgba(255,255,255,.35);filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
    .compare-product-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:4px}
    .compare-product-name a{color:inherit;text-decoration:none;transition:color .2s}
    .compare-product-name a:hover{color:var(--primary)}
    .compare-product-brand{font-size:.72rem;color:var(--text-sec);text-transform:uppercase;letter-spacing:.5px}
    .compare-remove-btn{
      margin-top:10px;padding:6px 14px;border-radius:6px;
      border:1px solid var(--border);background:#fff;
      font-size:.75rem;font-weight:600;color:var(--text-sec);
      cursor:pointer;transition:all .2s;
    }
    .compare-remove-btn:hover{border-color:var(--danger);color:var(--danger);background:rgba(239,68,68,.04)}

    /* Price cell */
    .compare-price{font-weight:800;color:var(--primary);font-size:1.05rem}
    .compare-old-price{text-decoration:line-through;color:#aaa;font-size:.82rem;margin-right:6px;font-weight:400}

    /* Rating cell */
    .compare-rating{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .compare-rating .stars{display:flex;gap:1px}
    .compare-rating .star{color:var(--accent);font-size:.72rem}
    .compare-rating .star.empty{color:#d1d5db}

    /* Cart button in compare */
    .compare-cart-btn{
      padding:10px 20px;border-radius:var(--radius);
      background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;
      font-size:.82rem;font-weight:600;cursor:pointer;border:none;
      display:inline-flex;align-items:center;gap:6px;
      transition:all .2s;box-shadow:0 2px 8px rgba(37,99,235,.2);
    }
    .compare-cart-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.3)}
    .compare-cart-btn svg{width:14px;height:14px}

    /* Stock */
    .compare-stock{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600}

    /* Actions row */
    .compare-actions-bar{
      display:flex;justify-content:flex-end;margin-bottom:20px;gap:12px;
    }
    .compare-clear-btn{
      padding:10px 20px;border-radius:var(--radius);
      border:1.5px solid var(--border);background:#fff;
      font-size:.82rem;font-weight:600;color:var(--text-sec);
      cursor:pointer;transition:all .2s;
      display:flex;align-items:center;gap:6px;
    }
    .compare-clear-btn:hover{border-color:var(--danger);color:var(--danger)}
    .compare-clear-btn svg{width:14px;height:14px}

    /* Empty state */
    .compare-empty{
      text-align:center;padding:80px 20px;
    }
    .compare-empty-icon{
      width:100px;height:100px;margin:0 auto 20px;border-radius:50%;
      background:linear-gradient(135deg,#f5f0ff,#ede9fe);
      display:flex;align-items:center;justify-content:center;
    }
    .compare-empty-icon svg{width:48px;height:48px;color:var(--purple);opacity:.5}
    .compare-empty h3{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:8px}
    .compare-empty p{font-size:.88rem;color:var(--text-sec);margin-bottom:20px}

    /* Responsive */
    @media(max-width:768px){
      .compare-hero{padding:28px 0 48px}
      .compare-hero h1{font-size:1.5rem}
      .compare-table th{min-width:110px;width:110px;font-size:.8rem;padding:12px}
      .compare-table td{min-width:180px;font-size:.82rem;padding:12px}
      .compare-product-img{width:90px;height:75px}
      .compare-product-cell{padding:18px 14px}
    }
    @media(max-width:480px){
      .compare-hero h1{font-size:1.2rem}
      .compare-hero{padding:24px 0 36px}
      .compare-table th{min-width:90px;width:90px;font-size:.75rem;padding:10px 8px}
      .compare-table td{min-width:150px;font-size:.78rem;padding:10px}
      .compare-product-img{width:70px;height:60px}
      .compare-product-cell{padding:14px 10px}
      .compare-product-cell h4{font-size:.82rem}
    }


/* ==========================================================================
   CONTACT PAGE (contact.html)
   ========================================================================== */

    /* ===== HERO SECTION ===== */
    .contact-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      color: #fff;
      padding: 60px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .contact-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
      border-radius: 50%;
    }
    .contact-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
      border-radius: 50%;
    }
    .contact-hero .container { position: relative; z-index: 2; }
    .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      opacity: .7;
      margin-bottom: 16px;
    }
    .hero-breadcrumb a { color: #fff; transition: opacity var(--transition); }
    .hero-breadcrumb a:hover { opacity: 1; }
    .hero-breadcrumb svg { width: 14px; height: 14px; opacity: .4; }
    .contact-hero h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }
    .contact-hero .hero-sub {
      font-size: 1.05rem;
      opacity: .85;
      font-weight: 400;
      max-width: 500px;
    }
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .hero-wave svg { display: block; width: 100%; height: auto; }

    /* ===== CONTACT METHOD CARDS ===== */
    .contact-methods {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: -40px;
      position: relative;
      z-index: 3;
      padding-bottom: 40px;
    }
    .method-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      text-align: center;
      transition: all .3s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .method-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      opacity: 0;
      transition: opacity .3s ease;
    }
    .method-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 32px rgba(0,0,0,.1);
    }
    .method-card:hover::before { opacity: 1; }
    .method-card:nth-child(1)::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
    .method-card:nth-child(2)::before { background: linear-gradient(90deg, #10b981, #34d399); }
    .method-card:nth-child(3)::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
    .method-card:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .method-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
    }
    .method-icon svg { width: 24px; height: 24px; }
    .method-icon.blue { background: rgba(37,99,235,.1); color: #2563eb; }
    .method-icon.green { background: rgba(16,185,129,.1); color: #10b981; }
    .method-icon.purple { background: rgba(139,92,246,.1); color: #8b5cf6; }
    .method-icon.amber { background: rgba(245,158,11,.1); color: #f59e0b; }
    .method-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
    .method-card p { font-size: .82rem; color: var(--text-sec); line-height: 1.5; }

    /* ===== MAIN LAYOUT ===== */
    .contact-layout {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 32px;
      padding: 0 0 60px;
    }

    /* ===== CONTACT FORM CARD ===== */
    .contact-form-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 40px;
      box-shadow: 0 4px 20px rgba(0,0,0,.06);
    }
    .contact-form-card h2 {
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: 4px;
    }
    .contact-form-card .sub {
      font-size: .85rem;
      color: var(--text-sec);
      margin-bottom: 28px;
    }

    .cform-group { margin-bottom: 18px; position: relative; }
    .cform-group label {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text);
    }
    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .input-icon {
      position: absolute;
      left: 14px;
      color: var(--text-sec);
      display: flex;
      align-items: center;
      pointer-events: none;
      z-index: 2;
    }
    .input-icon svg { width: 18px; height: 18px; }
    .input-wrap input,
    .input-wrap select {
      width: 100%;
      padding: 12px 14px 12px 42px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: .88rem;
      font-family: var(--font);
      transition: all var(--transition);
      background: #fff;
    }
    .input-wrap input:focus,
    .input-wrap select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    }
    .input-wrap input.error,
    .input-wrap select.error {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(239,68,68,.1);
    }
    .cform-group textarea {
      width: 100%;
      padding: 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: .88rem;
      font-family: var(--font);
      min-height: 140px;
      resize: vertical;
      transition: all var(--transition);
    }
    .cform-group textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    }
    .cform-group textarea.error {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(239,68,68,.1);
    }
    .char-counter {
      text-align: right;
      font-size: .75rem;
      color: var(--text-sec);
      margin-top: 4px;
    }
    .char-counter.warn { color: var(--danger); }
    .field-error {
      display: none;
      font-size: .78rem;
      color: var(--danger);
      margin-top: 4px;
      align-items: center;
      gap: 4px;
    }
    .field-error.show { display: flex; }
    .field-error svg { width: 14px; height: 14px; flex-shrink: 0; }

    .cform-row { display: flex; gap: 16px; }
    .cform-row .cform-group { flex: 1; }

    /* File Drop Zone */
    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      padding: 28px;
      text-align: center;
      cursor: pointer;
      transition: all .3s ease;
      background: var(--surface);
      margin-bottom: 18px;
    }
    .drop-zone:hover, .drop-zone.dragover {
      border-color: var(--primary);
      background: rgba(37,99,235,.04);
    }
    .drop-zone-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(37,99,235,.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
    }
    .drop-zone-icon svg { width: 22px; height: 22px; }
    .drop-zone p { font-size: .85rem; color: var(--text-sec); }
    .drop-zone p strong { color: var(--primary); }
    .drop-zone small { font-size: .75rem; color: #999; display: block; margin-top: 4px; }
    .drop-zone-file {
      display: none;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 12px;
      background: rgba(37,99,235,.06);
      border-radius: var(--radius);
      font-size: .82rem;
      color: var(--text);
    }
    .drop-zone-file.show { display: inline-flex; }
    .drop-zone-file svg { width: 16px; height: 16px; color: var(--primary); }
    .drop-zone-file button {
      margin-left: auto;
      color: var(--danger);
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
    }

    /* Submit Button */
    .cform-btn {
      width: 100%;
      padding: 14px 28px;
      border-radius: 50px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all .3s ease;
      border: none;
      cursor: pointer;
    }
    .cform-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37,99,235,.35);
    }
    .cform-btn svg { width: 18px; height: 18px; }

    /* ===== SUCCESS MESSAGE ===== */
    .form-success {
      display: none;
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 1.5px solid #86efac;
      border-radius: var(--radius-lg);
      padding: 40px;
      text-align: center;
      animation: fadeInUp .5s ease;
    }
    .form-success.show { display: block; }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #22c55e;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      animation: scaleIn .4s ease .2s both;
    }
    @keyframes scaleIn {
      from { transform: scale(0); }
      to { transform: scale(1); }
    }
    @keyframes checkDraw {
      to { stroke-dashoffset: 0; }
    }
    .success-icon svg { width: 32px; height: 32px; }
    .success-icon svg polyline {
      stroke-dasharray: 30;
      stroke-dashoffset: 30;
      animation: checkDraw .3s ease .5s forwards;
    }
    .form-success h3 { font-size: 1.2rem; font-weight: 800; color: #166534; margin-bottom: 6px; }
    .form-success p { font-size: .88rem; color: #15803d; }
    .form-success .btn-reset {
      margin-top: 16px;
      display: inline-block;
      padding: 10px 24px;
      background: #22c55e;
      color: #fff;
      border-radius: 50px;
      font-weight: 600;
      font-size: .85rem;
      cursor: pointer;
      transition: all .3s ease;
      border: none;
    }
    .form-success .btn-reset:hover { background: #16a34a; }

    /* ===== SIDEBAR ===== */
    .contact-sidebar {}

    .sidebar-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .sidebar-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }
    .sidebar-card-header .sc-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sidebar-card-header .sc-icon svg { width: 18px; height: 18px; }
    .sidebar-card-header h3 { font-size: 1rem; font-weight: 700; }

    /* Hours Card */
    .hours-row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      font-size: .85rem;
      border-bottom: 1px solid var(--surface);
    }
    .hours-row:last-child { border-bottom: none; }
    .hours-row span:first-child { font-weight: 500; }
    .hours-row span:last-child { color: var(--text-sec); }
    .hours-row .open-now {
      color: #22c55e;
      font-weight: 600;
      font-size: .75rem;
      background: rgba(34,197,94,.1);
      padding: 2px 8px;
      border-radius: 50px;
    }

    /* Map Card */
    .map-card {
      width: 100%;
      height: 200px;
      background: linear-gradient(135deg, #f0f0f3 0%, #e8e8ec 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .map-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(0,0,0,.03) 30px, rgba(0,0,0,.03) 31px),
        repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(0,0,0,.03) 30px, rgba(0,0,0,.03) 31px);
    }
    .map-card-content { position: relative; z-index: 1; text-align: center; }
    .map-pin {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(37,99,235,.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
    }
    .map-pin svg { width: 22px; height: 22px; }
    .map-card p { font-size: .82rem; color: var(--text-sec); margin-bottom: 8px; }
    .map-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--primary);
      transition: all .2s;
    }
    .map-link:hover { gap: 8px; }
    .map-link svg { width: 14px; height: 14px; }

    /* Social Section */
    .social-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .social-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s ease;
      color: #fff;
    }
    .social-circle:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
    .social-circle svg { width: 18px; height: 18px; }
    .social-circle.fb { background: #1877f2; }
    .social-circle.tw { background: #000; }
    .social-circle.ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .social-circle.yt { background: #ff0000; }
    .social-circle.li { background: #0a66c2; }

    /* ===== FAQ QUICK LINKS ===== */
    .faq-quick {
      padding: 48px 0 60px;
      border-top: 1px solid var(--border);
    }
    .faq-quick-header {
      text-align: center;
      margin-bottom: 28px;
    }
    .faq-quick-header h2 { font-size: 1.4rem; font-weight: 800; }
    .faq-quick-header p { color: var(--text-sec); font-size: .9rem; margin-top: 4px; }
    .faq-quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .faq-link-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      transition: all .3s ease;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      text-decoration: none;
      color: inherit;
    }
    .faq-link-card:hover {
      border-color: var(--primary);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .faq-link-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(37,99,235,.08);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .faq-link-icon svg { width: 20px; height: 20px; }
    .faq-link-card h4 { font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
    .faq-link-card p { font-size: .78rem; color: var(--text-sec); line-height: 1.5; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1024px) {
      .contact-methods { grid-template-columns: repeat(2, 1fr); }
      .faq-quick-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media(max-width:768px) {
      .contact-hero h1 { font-size: 1.8rem; }
      .contact-methods { grid-template-columns: 1fr 1fr; margin-top: -30px; }
      .contact-layout { grid-template-columns: 1fr; }
      .cform-row { flex-direction: column; }
      .faq-quick-grid { grid-template-columns: 1fr; }
    }
    @media(max-width:480px) {
      .contact-methods { grid-template-columns: 1fr; }
    }


/* ==========================================================================
   LOGIN PAGE (login.html)
   ========================================================================== */

    /* ===== BREADCRUMB BAR ===== */
    .page-breadcrumb-bar {
      background: linear-gradient(135deg, #f0f0f3 0%, #e8eaf0 100%);
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .breadcrumb-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .84rem;
      color: var(--text-sec);
    }
    .breadcrumb-inner a {
      color: var(--text-sec);
      transition: color var(--transition);
      font-weight: 500;
    }
    .breadcrumb-inner a:hover { color: var(--primary); }
    .breadcrumb-inner svg { width: 14px; height: 14px; opacity: .4; flex-shrink: 0; }
    .breadcrumb-inner .bc-current { color: var(--text); font-weight: 600; }

    /* ===== CIRCUIT BOARD BACKGROUND ===== */
    .auth-section {
      position: relative;
      min-height: calc(100vh - 300px);
      overflow: hidden;
      background: var(--bg);
    }
    .auth-section::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .03;
      background-image:
        linear-gradient(var(--text) 1px, transparent 1px),
        linear-gradient(90deg, var(--text) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }
    .auth-section::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .015;
      background-image:
        radial-gradient(circle at 20px 20px, var(--primary) 2px, transparent 2px),
        radial-gradient(circle at 60px 60px, var(--primary) 1.5px, transparent 1.5px);
      background-size: 80px 80px;
      pointer-events: none;
    }

    /* ===== SPLIT SCREEN LAYOUT ===== */
    .auth-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 600px;
      max-width: 1100px;
      margin: 40px auto;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);
      position: relative;
      z-index: 1;
    }

    /* Left Panel - Welcome/Illustration */
    .auth-welcome {
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
      color: #fff;
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .auth-welcome::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
      pointer-events: none;
    }
    .auth-welcome-content { position: relative; z-index: 2; }
    .auth-welcome h2 {
      font-family: 'Orbitron', var(--font-head);
      font-size: 1.8rem;
      font-weight: 900;
      letter-spacing: 1px;
      margin-bottom: 12px;
      line-height: 1.3;
    }
    .auth-welcome p {
      font-size: .95rem;
      opacity: .85;
      line-height: 1.7;
      max-width: 320px;
      margin: 0 auto 32px;
    }
    .auth-welcome-svg {
      width: 220px;
      height: 220px;
      margin: 0 auto 24px;
      opacity: .9;
    }
    /* Floating tech dots */
    .tech-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .tech-dots span {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(255,255,255,.15);
      border-radius: 50%;
      animation: floatDot 6s ease-in-out infinite;
    }
    .tech-dots span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
    .tech-dots span:nth-child(2) { top: 35%; left: 85%; animation-delay: 1s; width: 6px; height: 6px; }
    .tech-dots span:nth-child(3) { top: 65%; left: 20%; animation-delay: 2s; }
    .tech-dots span:nth-child(4) { top: 80%; left: 70%; animation-delay: 3s; width: 5px; height: 5px; }
    .tech-dots span:nth-child(5) { top: 25%; left: 60%; animation-delay: 4s; width: 3px; height: 3px; }
    .tech-dots span:nth-child(6) { top: 55%; left: 45%; animation-delay: 1.5s; }
    .tech-dots span:nth-child(7) { top: 90%; left: 30%; animation-delay: 2.5s; width: 5px; height: 5px; }
    .tech-dots span:nth-child(8) { top: 10%; left: 50%; animation-delay: 3.5s; }
    @keyframes floatDot {
      0%, 100% { transform: translateY(0) scale(1); opacity: .15; }
      50% { transform: translateY(-20px) scale(1.5); opacity: .4; }
    }

    /* Right Panel - Forms */
    .auth-forms-panel {
      background: #fff;
      padding: 40px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* ===== TABS ===== */
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 28px;
      border-bottom: 2px solid var(--border);
      position: relative;
    }
    .auth-tab {
      flex: 1;
      padding: 14px 0;
      font-size: .92rem;
      font-weight: 700;
      text-align: center;
      color: var(--text-sec);
      cursor: pointer;
      transition: all var(--transition);
      position: relative;
      background: none;
      border: none;
    }
    .auth-tab:hover { color: var(--text); }
    .auth-tab.active { color: var(--primary); }
    .auth-tab.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--primary), #7c3aed);
      border-radius: 2px 2px 0 0;
      animation: tabSlide .3s ease;
    }
    @keyframes tabSlide {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    /* Tab Content */
    .auth-tab-content {
      display: none;
      animation: fadeSlideIn .4s ease;
    }
    .auth-tab-content.active { display: block; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== FLOATING LABEL INPUT GROUPS ===== */
    .fl-group {
      position: relative;
      margin-bottom: 22px;
    }
    .fl-group .fl-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: var(--text-sec);
      pointer-events: none;
      transition: color var(--transition);
      z-index: 2;
    }
    .fl-group input {
      width: 100%;
      padding: 16px 14px 8px 42px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: .9rem;
      background: #fafbfc;
      transition: all var(--transition);
      outline: none;
      color: var(--text);
    }
    .fl-group input:focus {
      border-color: var(--primary);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(37,99,235,.08);
    }
    .fl-group input:focus ~ .fl-icon { color: var(--primary); }
    .fl-group label {
      position: absolute;
      left: 42px;
      top: 50%;
      transform: translateY(-50%);
      font-size: .88rem;
      color: var(--text-sec);
      pointer-events: none;
      transition: all .2s ease;
      background: transparent;
      padding: 0 4px;
    }
    .fl-group input:focus ~ label,
    .fl-group input:not(:placeholder-shown) ~ label {
      top: 6px;
      transform: translateY(0);
      font-size: .68rem;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: .3px;
    }

    /* Error messages */
    .fl-error {
      font-size: .75rem;
      color: var(--danger);
      margin-top: 4px;
      display: none;
      align-items: center;
      gap: 4px;
    }
    .fl-error.show { display: flex; }
    .fl-error svg { width: 12px; height: 12px; flex-shrink: 0; }

    /* ===== REMEMBER ME TOGGLE ===== */
    .auth-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .toggle-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: .84rem;
      color: var(--text-sec);
      font-weight: 500;
    }
    .toggle-label input { display: none; }
    .toggle-track {
      width: 40px;
      height: 22px;
      background: var(--border);
      border-radius: 11px;
      position: relative;
      transition: background var(--transition);
      flex-shrink: 0;
    }
    .toggle-track::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      transition: transform var(--transition);
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .toggle-label input:checked + .toggle-track {
      background: linear-gradient(135deg, var(--primary), #7c3aed);
    }
    .toggle-label input:checked + .toggle-track::after {
      transform: translateX(18px);
    }
    .forgot-link {
      font-size: .82rem;
      color: var(--text-sec);
      font-weight: 500;
      transition: color var(--transition);
      position: relative;
    }
    .forgot-link:hover { color: var(--primary); }
    .forgot-link::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--primary);
      transition: width var(--transition);
    }
    .forgot-link:hover::after { width: 100%; }

    /* ===== SUBMIT BUTTONS ===== */
    .auth-submit {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius);
      font-weight: 700;
      font-size: .95rem;
      border: none;
      cursor: pointer;
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .auth-submit-login {
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      color: #fff;
    }
    .auth-submit-login:hover {
      box-shadow: 0 6px 20px rgba(37,99,235,.35);
      transform: translateY(-1px);
    }
    .auth-submit-register {
      background: linear-gradient(135deg, var(--accent2), #059669);
      color: #fff;
    }
    .auth-submit-register:hover {
      box-shadow: 0 6px 20px rgba(16,185,129,.35);
      transform: translateY(-1px);
    }

    /* ===== SOCIAL DIVIDER ===== */
    .auth-or {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
      font-size: .78rem;
      color: var(--text-sec);
      font-weight: 500;
      letter-spacing: .5px;
    }
    .auth-or::before, .auth-or::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }

    /* ===== SOCIAL PILL BUTTONS ===== */
    .social-pills {
      display: flex;
      gap: 12px;
    }
    .social-pill {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 50px;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      color: #fff;
      transition: all var(--transition);
    }
    .social-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
    .social-pill-google {
      background: #ea4335;
    }
    .social-pill-google:hover {
      background: #d33426;
      box-shadow: 0 4px 14px rgba(234,67,53,.3);
      transform: translateY(-1px);
    }
    .social-pill-facebook {
      background: #1877f2;
    }
    .social-pill-facebook:hover {
      background: #1565d8;
      box-shadow: 0 4px 14px rgba(24,119,242,.3);
      transform: translateY(-1px);
    }

    /* ===== PASSWORD STRENGTH ===== */
    .pw-strength {
      margin-top: -14px;
      margin-bottom: 18px;
    }
    .pw-strength-bar {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 6px;
    }
    .pw-strength-fill {
      height: 100%;
      width: 0;
      border-radius: 2px;
      transition: all .4s ease;
    }
    .pw-strength-text {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .3px;
    }
    .pw-weak .pw-strength-fill { width: 25%; background: var(--danger); }
    .pw-weak .pw-strength-text { color: var(--danger); }
    .pw-fair .pw-strength-fill { width: 50%; background: var(--orange); }
    .pw-fair .pw-strength-text { color: var(--orange); }
    .pw-good .pw-strength-fill { width: 75%; background: var(--accent); }
    .pw-good .pw-strength-text { color: var(--accent); }
    .pw-strong .pw-strength-fill { width: 100%; background: var(--success); }
    .pw-strong .pw-strength-text { color: var(--success); }

    /* ===== BENEFITS SECTION ===== */
    .auth-benefits {
      padding: 60px 0;
      position: relative;
      z-index: 1;
    }
    .auth-benefits-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .auth-benefits-title h2 {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }
    .auth-benefits-title p {
      font-size: .9rem;
      color: var(--text-sec);
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 960px;
      margin: 0 auto;
    }
    .benefit-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 24px;
      text-align: center;
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .benefit-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), #7c3aed);
      opacity: 0;
      transition: opacity var(--transition);
    }
    .benefit-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }
    .benefit-card:hover::before { opacity: 1; }
    .benefit-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
    .benefit-icon svg { width: 26px; height: 26px; }
    .benefit-card h3 {
      font-size: .92rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text);
    }
    .benefit-card p {
      font-size: .8rem;
      color: var(--text-sec);
      line-height: 1.6;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
      .auth-split {
        grid-template-columns: 1fr;
        margin: 20px;
        max-width: 520px;
      }
      .auth-welcome {
        padding: 36px 28px;
      }
      .auth-welcome-svg { width: 140px; height: 140px; }
      .auth-welcome h2 { font-size: 1.3rem; }
      .auth-forms-panel { padding: 32px 28px; }
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
    }
    @media (max-width: 480px) {
      .auth-split { margin: 12px; border-radius: var(--radius-lg); }
      .auth-forms-panel { padding: 24px 20px; }
      .auth-welcome { padding: 28px 20px; }
      .social-pills { flex-direction: column; }
      .benefits-grid { grid-template-columns: 1fr; }
    }


/* ==========================================================================
   PROFILE PAGE (profile.html)
   ========================================================================== */

    /* ===== BREADCRUMB BAR ===== */
    .page-breadcrumb-bar {
      background: linear-gradient(135deg, #f0f0f3 0%, #e8eaf0 100%);
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .breadcrumb-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .84rem;
      color: var(--text-sec);
    }
    .breadcrumb-inner a {
      color: var(--text-sec);
      transition: color var(--transition);
      font-weight: 500;
    }
    .breadcrumb-inner a:hover { color: var(--primary); }
    .breadcrumb-inner svg { width: 14px; height: 14px; opacity: .4; flex-shrink: 0; }
    .bc-current { color: var(--text); font-weight: 600; }

    /* ===== PROFILE HERO ===== */
    .profile-hero {
      background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #312e81 100%);
      padding: 48px 0 32px;
      position: relative;
      overflow: hidden;
    }
    .profile-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 50%, rgba(37,99,235,.2) 0%, transparent 50%),
                  radial-gradient(circle at 80% 30%, rgba(139,92,246,.15) 0%, transparent 50%);
    }
    .profile-hero-inner {
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .profile-hero h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 2rem;
      color: #fff;
      margin-bottom: 6px;
    }
    .profile-hero p {
      color: rgba(255,255,255,.6);
      font-size: .92rem;
    }

    /* ===== PROFILE LAYOUT ===== */
    .profile-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 28px;
      padding: 32px 0 64px;
    }

    /* ===== SIDEBAR ===== */
    .profile-sidebar {
      position: sticky;
      top: 120px;
      align-self: start;
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .sidebar-user {
      padding: 32px 24px 24px;
      text-align: center;
      background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
      position: relative;
    }
    .sidebar-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      font-family: 'Orbitron', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      border: 3px solid rgba(255,255,255,.2);
      box-shadow: 0 4px 20px rgba(37,99,235,.4);
    }
    .sidebar-name {
      color: #fff;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .sidebar-email {
      color: rgba(255,255,255,.6);
      font-size: .82rem;
    }
    .sidebar-member {
      display: inline-block;
      margin-top: 12px;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255,255,255,.1);
      color: rgba(255,255,255,.7);
      font-size: .72rem;
      font-weight: 500;
    }
    .sidebar-nav {
      padding: 12px 0;
    }
    .sidebar-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-sec);
      cursor: pointer;
      transition: all var(--transition);
      border-left: 3px solid transparent;
      user-select: none;
    }
    .sidebar-nav-item:hover {
      background: var(--surface);
      color: var(--primary);
    }
    .sidebar-nav-item.active {
      color: var(--primary);
      background: #eef2ff;
      border-left-color: var(--primary);
      font-weight: 600;
    }
    .sidebar-nav-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .sidebar-nav-item.logout {
      color: var(--danger);
      margin-top: 4px;
      border-top: 1px solid var(--border);
      padding-top: 14px;
    }
    .sidebar-nav-item.logout:hover {
      background: #fef2f2;
      color: var(--danger);
    }

    /* ===== MAIN CONTENT ===== */
    .profile-content {
      min-width: 0;
    }
    .profile-tab {
      display: none;
      animation: fadeInTab .35s ease;
    }
    .profile-tab.active {
      display: block;
    }
    @keyframes fadeInTab {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== DASHBOARD TAB ===== */
    .welcome-banner {
      background: linear-gradient(135deg, #1e3a5f 0%, #312e81 100%);
      border-radius: var(--radius-lg);
      padding: 32px;
      color: #fff;
      position: relative;
      overflow: hidden;
      margin-bottom: 24px;
    }
    .welcome-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(139,92,246,.2);
    }
    .welcome-banner h2 {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.5rem;
      margin-bottom: 8px;
      position: relative;
    }
    .welcome-banner p {
      opacity: .75;
      font-size: .92rem;
      position: relative;
    }
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }
    .stat-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow);
      transition: all var(--transition);
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .stat-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .stat-icon svg { width: 24px; height: 24px; }
    .stat-info h4 {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--text);
      line-height: 1.2;
    }
    .stat-info span {
      font-size: .78rem;
      color: var(--text-sec);
    }

    /* ===== SECTION CARDS ===== */
    .section-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      margin-bottom: 24px;
      overflow: hidden;
    }
    .section-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
    }
    .section-card-header h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      font-family: 'Orbitron', sans-serif;
    }
    .section-card-header a {
      color: var(--primary);
      font-size: .84rem;
      font-weight: 600;
      transition: color var(--transition);
    }
    .section-card-header a:hover { color: var(--primary-h); }
    .section-card-body {
      padding: 20px 24px;
    }

    /* ===== ORDERS TABLE ===== */
    .orders-table {
      width: 100%;
      border-collapse: collapse;
    }
    .orders-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--text-sec);
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    .orders-table td {
      padding: 14px 12px;
      font-size: .88rem;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .orders-table tr:last-child td { border-bottom: none; }
    .orders-table .order-id { font-weight: 700; color: var(--primary); }

    /* ===== STATUS BADGES ===== */
    .status-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: .75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .3px;
    }
    .status-processing { background: #fef3c7; color: #92400e; }
    .status-shipped { background: #dbeafe; color: #1e40af; }
    .status-delivered { background: #dcfce7; color: #166534; }
    .status-cancelled { background: #fee2e2; color: #991b1b; }

    .view-order-btn {
      padding: 6px 14px;
      border-radius: 8px;
      font-size: .78rem;
      font-weight: 600;
      background: #eef2ff;
      color: var(--primary);
      cursor: pointer;
      transition: all var(--transition);
    }
    .view-order-btn:hover {
      background: var(--primary);
      color: #fff;
    }

    /* ===== RECENTLY VIEWED ===== */
    .recently-viewed-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* ===== ORDERS TAB ===== */
    .filter-pills {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .filter-pill {
      padding: 8px 18px;
      border-radius: 20px;
      font-size: .82rem;
      font-weight: 600;
      background: var(--surface);
      color: var(--text-sec);
      cursor: pointer;
      transition: all var(--transition);
      border: 1px solid var(--border);
    }
    .filter-pill:hover {
      border-color: var(--primary);
      color: var(--primary);
    }
    .filter-pill.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .order-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      margin-bottom: 16px;
      overflow: hidden;
      transition: all var(--transition);
    }
    .order-card:hover {
      box-shadow: var(--shadow-md);
    }
    .order-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--surface);
      flex-wrap: wrap;
      gap: 10px;
    }
    .order-card-top-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .order-num {
      font-weight: 700;
      font-size: .92rem;
    }
    .order-date {
      color: var(--text-sec);
      font-size: .82rem;
    }
    .order-card-items {
      padding: 16px 20px;
    }
    .order-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 0;
    }
    .order-item + .order-item {
      border-top: 1px solid var(--border);
    }
    .order-item-img {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .order-item-img svg {
      width: 36px;
      height: 36px;
      color: rgba(255,255,255,.85);
    }
    .order-item-info {
      flex: 1;
      min-width: 0;
    }
    .order-item-info h4 {
      font-size: .86rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .order-item-info span {
      font-size: .78rem;
      color: var(--text-sec);
    }
    .order-item-price {
      font-weight: 700;
      font-size: .92rem;
      white-space: nowrap;
    }
    .order-card-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 10px;
    }
    .order-total {
      font-weight: 800;
      font-size: 1.05rem;
    }
    .order-card-actions {
      display: flex;
      gap: 8px;
    }
    .btn-track, .btn-reorder {
      padding: 8px 18px;
      border-radius: 8px;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }
    .btn-track {
      background: var(--primary);
      color: #fff;
    }
    .btn-track:hover { background: var(--primary-h); }
    .btn-reorder {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn-reorder:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    /* ===== ADDRESSES TAB ===== */
    .addresses-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }
    .address-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 20px;
      position: relative;
      border: 2px solid transparent;
      transition: all var(--transition);
    }
    .address-card:hover {
      box-shadow: var(--shadow-md);
      border-color: #dbeafe;
    }
    .address-card.default { border-color: var(--primary); }
    .default-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      background: #dbeafe;
      color: var(--primary);
      margin-bottom: 10px;
    }
    .address-card h4 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .address-card p {
      font-size: .84rem;
      color: var(--text-sec);
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .address-card-actions {
      display: flex;
      gap: 8px;
    }
    .addr-btn {
      padding: 6px 14px;
      border-radius: 8px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }
    .addr-btn-edit {
      background: #eef2ff;
      color: var(--primary);
    }
    .addr-btn-edit:hover { background: var(--primary); color: #fff; }
    .addr-btn-delete {
      background: #fee2e2;
      color: var(--danger);
    }
    .addr-btn-delete:hover { background: var(--danger); color: #fff; }

    .add-address-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 40px 20px;
      cursor: pointer;
      border: 2px dashed var(--border);
      transition: all var(--transition);
      min-height: 200px;
    }
    .add-address-card:hover {
      border-color: var(--primary);
      background: #eef2ff;
    }
    .add-address-card svg {
      width: 40px;
      height: 40px;
      color: var(--text-sec);
      margin-bottom: 10px;
    }
    .add-address-card span {
      font-size: .88rem;
      font-weight: 600;
      color: var(--text-sec);
    }

    .address-form-wrap {
      display: none;
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: 28px;
      margin-top: 20px;
    }
    .address-form-wrap.visible { display: block; }
    .address-form-wrap h3 {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.05rem;
      margin-bottom: 20px;
    }

    /* ===== FORMS ===== */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-group.full { grid-column: 1 / -1; }
    .form-group label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text);
    }
    .form-group input,
    .form-group select {
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: .88rem;
      transition: all var(--transition);
      background: var(--bg-card);
      color: var(--text);
    }
    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    }
    .form-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
    }
    .form-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
    }
    .form-checkbox label {
      font-size: .85rem;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
    }

    .btn-save {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 32px;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      color: #fff;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      transition: all var(--transition);
      margin-top: 10px;
      border: none;
    }
    .btn-save:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37,99,235,.35);
    }

    /* ===== SETTINGS TAB ===== */
    .settings-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      margin-bottom: 20px;
      overflow: hidden;
    }
    .settings-card-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
    }
    .settings-card-header h3 {
      font-size: 1rem;
      font-weight: 700;
      font-family: 'Orbitron', sans-serif;
    }
    .settings-card-header p {
      font-size: .82rem;
      color: var(--text-sec);
      margin-top: 4px;
    }
    .settings-card-body {
      padding: 24px;
    }

    /* ===== PASSWORD STRENGTH ===== */
    .pw-strength-bar {
      height: 4px;
      border-radius: 4px;
      background: var(--border);
      margin-top: 6px;
      overflow: hidden;
    }
    .pw-strength-fill {
      height: 100%;
      border-radius: 4px;
      transition: all .3s ease;
      width: 0;
    }
    .pw-strength-label {
      font-size: .75rem;
      font-weight: 600;
      margin-top: 4px;
    }
    .pw-weak .pw-strength-fill { width: 25%; background: var(--danger); }
    .pw-weak .pw-strength-label { color: var(--danger); }
    .pw-fair .pw-strength-fill { width: 50%; background: var(--orange); }
    .pw-fair .pw-strength-label { color: var(--orange); }
    .pw-good .pw-strength-fill { width: 75%; background: var(--accent2); }
    .pw-good .pw-strength-label { color: var(--accent2); }
    .pw-strong .pw-strength-fill { width: 100%; background: var(--success); }
    .pw-strong .pw-strength-label { color: var(--success); }

    /* ===== TOGGLE SWITCH ===== */
    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
    }
    .toggle-row + .toggle-row {
      border-top: 1px solid var(--border);
    }
    .toggle-row-info h4 {
      font-size: .9rem;
      font-weight: 600;
    }
    .toggle-row-info p {
      font-size: .78rem;
      color: var(--text-sec);
      margin-top: 2px;
    }
    .toggle-switch {
      position: relative;
      width: 48px;
      height: 26px;
      flex-shrink: 0;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #d1d5db;
      border-radius: 26px;
      transition: all var(--transition);
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      border-radius: 50%;
      transition: all var(--transition);
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .toggle-switch input:checked + .toggle-slider {
      background: var(--primary);
    }
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(22px);
    }
    .toggle-switch input:focus + .toggle-slider {
      box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    }

    /* ===== DELETE ACCOUNT ===== */
    .danger-card {
      border: 2px solid var(--danger);
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-top: 20px;
    }
    .danger-card h3 {
      color: var(--danger);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .danger-card h3 svg { width: 20px; height: 20px; }
    .danger-card p {
      font-size: .84rem;
      color: var(--text-sec);
      margin-bottom: 16px;
      line-height: 1.6;
    }
    .btn-danger {
      padding: 10px 24px;
      border-radius: 8px;
      background: var(--danger);
      color: #fff;
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      transition: all var(--transition);
      border: none;
    }
    .btn-danger:hover {
      background: #dc2626;
      box-shadow: 0 4px 14px rgba(239,68,68,.3);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 960px) {
      .profile-layout {
        grid-template-columns: 1fr;
      }
      .profile-sidebar {
        position: static;
      }
      .sidebar-nav {
        display: flex;
        overflow-x: auto;
        padding: 8px 12px;
        gap: 0;
      }
      .sidebar-nav-item {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 16px;
        font-size: .82rem;
      }
      .sidebar-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
      }
      .stat-cards {
        grid-template-columns: repeat(2, 1fr);
      }
      .recently-viewed-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .stat-cards {
        grid-template-columns: 1fr;
      }
      .recently-viewed-grid {
        grid-template-columns: 1fr;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
      .order-card-top-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .welcome-banner {
        padding: 24px;
      }
      .welcome-banner h2 {
        font-size: 1.2rem;
      }
      .profile-hero h1 {
        font-size: 1.4rem;
      }
    }


/* ==========================================================================
   TRACKING PAGE (tracking.html)
   ========================================================================== */

    /* ===== HERO SECTION ===== */
    .tracking-hero{
      background:linear-gradient(135deg,#0f172a 0%,#1e293b 40%,#1e1b4b 100%);
      color:#fff;padding:60px 0 70px;text-align:center;
      position:relative;overflow:hidden;
    }
    .tracking-hero::before{
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(circle at 25% 50%,rgba(37,99,235,.15),transparent 50%),
        radial-gradient(circle at 75% 30%,rgba(139,92,246,.12),transparent 50%);
    }
    .tracking-hero::after{
      content:'';position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
      background-size:50px 50px;
      mask-image:radial-gradient(ellipse at center,black 40%,transparent 70%);
      -webkit-mask-image:radial-gradient(ellipse at center,black 40%,transparent 70%);
    }
    .tracking-hero .container{position:relative;z-index:1}
    .tracking-hero-icon{
      display:inline-flex;align-items:center;justify-content:center;
      width:80px;height:80px;border-radius:50%;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
      margin-bottom:20px;
      animation:heroIconFloat 3s ease-in-out infinite;
    }
    .tracking-hero-icon svg{width:40px;height:40px;color:var(--primary-l)}
    @keyframes heroIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    .tracking-hero .breadcrumb{
      display:flex;align-items:center;gap:8px;font-size:.82rem;opacity:.5;
      margin-bottom:16px;justify-content:center;
    }
    .tracking-hero .breadcrumb a{color:#fff;transition:opacity .25s}
    .tracking-hero .breadcrumb a:hover{opacity:1}
    .tracking-hero .breadcrumb svg{width:14px;height:14px;opacity:.4}
    .tracking-hero h1{
      font-size:2rem;font-weight:900;margin-bottom:8px;
      background:linear-gradient(135deg,#fff,#94a3b8);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .tracking-hero p{font-size:.92rem;opacity:.5;max-width:400px;margin:0 auto}

    /* ===== TRACKING CONTENT ===== */
    .tracking-page{padding:0 0 60px;max-width:760px;margin:0 auto;margin-top:-32px;position:relative;z-index:2}

    /* ===== TRACKING FORM CARD ===== */
    .tracking-form{
      background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
      padding:40px;text-align:center;margin-bottom:28px;
      box-shadow:0 8px 40px rgba(0,0,0,.08);
    }
    .tracking-form-icon{
      display:inline-flex;align-items:center;justify-content:center;
      width:56px;height:56px;border-radius:16px;
      background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(139,92,246,.1));
      margin-bottom:16px;
    }
    .tracking-form-icon svg{width:26px;height:26px;color:var(--primary)}
    .tracking-form h2{font-size:1.3rem;font-weight:800;margin-bottom:6px}
    .tracking-form p{font-size:.85rem;color:var(--text-sec);margin-bottom:28px}
    .tracking-fields{display:flex;flex-direction:column;gap:14px;max-width:480px;margin:0 auto 20px}
    .tracking-input-group{position:relative}
    .tracking-input-group svg{
      position:absolute;left:16px;top:50%;transform:translateY(-50%);
      width:18px;height:18px;color:var(--text-sec);pointer-events:none;
    }
    .tracking-input-group input{
      width:100%;padding:14px 18px 14px 46px;
      border:2px solid var(--border);border-radius:var(--radius-lg);
      font-size:.92rem;transition:all .25s ease;background:#fafbfc;
    }
    .tracking-input-group input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
    .tracking-input-group input::placeholder{color:#999}
    .tracking-actions{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap}
    .tracking-actions .track-btn{
      flex:1;padding:14px 28px;border-radius:var(--radius-lg);
      background:linear-gradient(135deg,var(--primary),#4f46e5);
      color:#fff;font-weight:700;font-size:.92rem;
      display:flex;align-items:center;justify-content:center;gap:8px;
      transition:all .3s ease;border:none;cursor:pointer;
      box-shadow:0 4px 16px rgba(37,99,235,.25);
    }
    .tracking-actions .track-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,235,.35)}
    .tracking-actions .track-btn svg{width:18px;height:18px}
    .tracking-demo-link{
      display:inline-flex;align-items:center;gap:6px;
      margin-top:16px;font-size:.82rem;color:var(--primary);
      cursor:pointer;transition:all .25s;font-weight:600;
      background:none;border:none;
    }
    .tracking-demo-link:hover{color:var(--primary-h);text-decoration:underline}
    .tracking-demo-link svg{width:14px;height:14px}

    /* ===== ORDER NOT FOUND ===== */
    .tracking-not-found{
      display:none;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
      padding:48px 36px;text-align:center;margin-bottom:28px;
      box-shadow:0 4px 20px rgba(0,0,0,.06);
    }
    .tracking-not-found.show{display:block}
    .tracking-not-found-icon{
      display:inline-flex;align-items:center;justify-content:center;
      width:80px;height:80px;border-radius:50%;
      background:rgba(239,68,68,.08);margin-bottom:20px;
    }
    .tracking-not-found-icon svg{width:40px;height:40px;color:var(--danger);opacity:.7}
    .tracking-not-found h3{font-size:1.15rem;font-weight:800;margin-bottom:6px;color:var(--text)}
    .tracking-not-found p{font-size:.88rem;color:var(--text-sec);margin-bottom:20px;max-width:360px;margin-left:auto;margin-right:auto}
    .tracking-not-found .try-again-btn{
      display:inline-flex;align-items:center;gap:6px;
      padding:10px 22px;border-radius:var(--radius);
      background:var(--surface);color:var(--text);font-weight:600;font-size:.85rem;
      border:1px solid var(--border);cursor:pointer;transition:all .25s;
    }
    .tracking-not-found .try-again-btn:hover{border-color:var(--primary);color:var(--primary)}

    /* ===== TRACKING RESULT CARD ===== */
    .tracking-result{
      display:none;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
      overflow:hidden;margin-bottom:28px;
      box-shadow:0 8px 40px rgba(0,0,0,.08);
    }
    .tracking-result.show{display:block;animation:slideUp .4s ease}
    @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

    /* Order info header */
    .tracking-order-header{
      display:flex;align-items:center;justify-content:space-between;
      padding:24px 36px;border-bottom:1px solid var(--border);
      background:linear-gradient(135deg,#fafbfc,#f5f5f7);
      flex-wrap:wrap;gap:12px;
    }
    .tracking-order-header-left h3{font-size:1.05rem;font-weight:700;margin-bottom:2px}
    .tracking-order-header-left .order-date{font-size:.8rem;color:var(--text-sec)}
    .tracking-status-badge{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 16px;border-radius:50px;font-size:.78rem;font-weight:700;
      text-transform:uppercase;letter-spacing:.5px;
    }
    .tracking-status-badge.processing{background:rgba(245,158,11,.12);color:#d97706;border:1px solid rgba(245,158,11,.2)}
    .tracking-status-badge.shipped{background:rgba(37,99,235,.1);color:var(--primary);border:1px solid rgba(37,99,235,.2)}
    .tracking-status-badge.delivered{background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2)}
    .tracking-status-badge svg{width:14px;height:14px}

    /* Timeline / Steps */
    .tracking-timeline{padding:36px}
    .tracking-steps{position:relative;padding-left:48px}
    .tracking-steps::before{
      content:'';position:absolute;left:18px;top:0;bottom:0;width:3px;
      background:var(--border);border-radius:2px;
    }
    .tracking-step{position:relative;padding-bottom:36px}
    .tracking-step:last-child{padding-bottom:0}

    /* Connecting line segments */
    .tracking-step.completed::after{
      content:'';position:absolute;left:-30px;top:32px;width:3px;
      height:calc(100% - 32px);background:var(--success);border-radius:2px;z-index:1;
    }
    .tracking-step:last-child::after{display:none}
    .tracking-step.active::after{
      content:'';position:absolute;left:-30px;top:32px;width:3px;
      height:calc(100% - 32px);
      background:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 6px,transparent 6px,transparent 12px);
      border-radius:2px;z-index:1;
    }

    .tracking-dot{
      position:absolute;left:-48px;top:0;width:36px;height:36px;
      border-radius:50%;border:3px solid var(--border);background:#fff;
      display:flex;align-items:center;justify-content:center;z-index:2;
      transition:all .3s ease;
    }
    .tracking-dot svg{width:16px;height:16px;color:var(--text-sec)}

    .tracking-step.completed .tracking-dot{
      background:var(--success);border-color:var(--success);
      box-shadow:0 2px 10px rgba(34,197,94,.25);
    }
    .tracking-step.completed .tracking-dot svg{color:#fff}

    .tracking-step.active .tracking-dot{
      background:var(--primary);border-color:var(--primary);
      box-shadow:0 0 0 6px rgba(37,99,235,.15);
      animation:activePulse 2s ease infinite;
    }
    .tracking-step.active .tracking-dot svg{color:#fff}
    @keyframes activePulse{0%,100%{box-shadow:0 0 0 6px rgba(37,99,235,.15)}50%{box-shadow:0 0 0 12px rgba(37,99,235,.05)}}

    .tracking-step-info h4{font-size:.92rem;font-weight:700;margin-bottom:3px}
    .tracking-step-info p{font-size:.82rem;color:var(--text-sec);line-height:1.5}
    .tracking-step-info .date{
      display:inline-flex;align-items:center;gap:4px;
      font-size:.75rem;color:var(--primary);font-weight:600;margin-top:6px;
    }
    .tracking-step-info .date svg{width:12px;height:12px}
    .tracking-step.completed .tracking-step-info h4{color:var(--success)}
    .tracking-step.active .tracking-step-info h4{color:var(--primary)}

    /* Order details section */
    .tracking-order-details{
      padding:0 36px 28px;
    }
    .tracking-details-title{
      font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
      color:var(--text-sec);margin-bottom:16px;padding-top:20px;
      border-top:1px solid var(--border);
    }
    .tracking-items-list{margin-bottom:20px}
    .tracking-item-row{
      display:flex;align-items:center;gap:14px;
      padding:12px 0;border-bottom:1px solid var(--surface);
    }
    .tracking-item-row:last-child{border-bottom:none}
    .tracking-item-img{
      width:48px;height:48px;border-radius:var(--radius);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .tracking-item-img svg{width:24px;height:24px;color:rgba(255,255,255,.4)}
    .tracking-item-info{flex:1}
    .tracking-item-info h5{font-size:.84rem;font-weight:600;margin-bottom:2px}
    .tracking-item-info span{font-size:.75rem;color:var(--text-sec)}
    .tracking-item-price{font-size:.88rem;font-weight:700;color:var(--primary)}

    .tracking-details{
      display:grid;grid-template-columns:1fr 1fr;gap:16px;
      margin-top:16px;
    }
    .tracking-detail-item{
      padding:14px;background:var(--surface);border-radius:var(--radius);
    }
    .tracking-detail-item h5{
      font-size:.72rem;color:var(--text-sec);margin-bottom:4px;
      text-transform:uppercase;letter-spacing:.5px;
    }
    .tracking-detail-item p{font-size:.86rem;font-weight:600}

    /* Map placeholder */
    .tracking-map-placeholder{
      margin-top:20px;padding:28px;
      background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
      border-radius:var(--radius-lg);text-align:center;
      border:2px dashed var(--border);
    }
    .tracking-map-icon{
      display:inline-flex;align-items:center;justify-content:center;
      width:48px;height:48px;border-radius:50%;
      background:rgba(37,99,235,.08);margin-bottom:10px;
    }
    .tracking-map-icon svg{width:24px;height:24px;color:var(--primary)}
    .tracking-map-placeholder h5{font-size:.88rem;font-weight:700;margin-bottom:4px}
    .tracking-map-placeholder p{font-size:.78rem;color:var(--text-sec)}

    /* ===== NEED HELP SECTION ===== */
    .tracking-help{
      background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
      padding:36px;text-align:center;
      box-shadow:0 4px 20px rgba(0,0,0,.06);
    }
    .tracking-help h3{font-size:1.1rem;font-weight:800;margin-bottom:6px}
    .tracking-help p{font-size:.85rem;color:var(--text-sec);margin-bottom:24px}
    .tracking-help-actions{
      display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    }
    .help-action-btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:12px 22px;border-radius:var(--radius-lg);
      background:var(--surface);border:1px solid var(--border);
      color:var(--text);font-weight:600;font-size:.84rem;
      transition:all .25s ease;cursor:pointer;text-decoration:none;
    }
    .help-action-btn:hover{
      border-color:var(--primary);color:var(--primary);
      background:rgba(37,99,235,.04);
      transform:translateY(-2px);box-shadow:var(--shadow-md);
    }
    .help-action-btn svg{width:16px;height:16px}
    .help-action-btn.primary-action{
      background:linear-gradient(135deg,var(--primary),#4f46e5);
      color:#fff;border-color:transparent;
    }
    .help-action-btn.primary-action:hover{
      box-shadow:0 4px 16px rgba(37,99,235,.3);
      color:#fff;background:linear-gradient(135deg,var(--primary-h),#4338ca);
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px){
      .tracking-hero{padding:40px 0 50px}
      .tracking-hero h1{font-size:1.5rem}
      .tracking-form{padding:28px 20px}
      .tracking-order-header{padding:18px 20px}
      .tracking-timeline{padding:24px 20px}
      .tracking-order-details{padding:0 20px 20px}
      .tracking-steps{padding-left:40px}
      .tracking-dot{left:-40px;width:32px;height:32px}
      .tracking-step.completed::after,.tracking-step.active::after{left:-24px}
    }
    @media(max-width:480px){
      .tracking-hero h1{font-size:1.3rem}
      .tracking-hero{padding:32px 0 40px}
      .tracking-actions{flex-direction:column}
      .tracking-details{grid-template-columns:1fr}
      .tracking-help-actions{flex-direction:column;align-items:stretch}
      .tracking-form{padding:20px 16px}
      .tracking-fields{gap:10px}
      .tracking-order-header{padding:14px 16px}
      .tracking-timeline{padding:18px 16px}
      .tracking-steps{padding-left:36px}
      .tracking-dot{left:-36px;width:28px;height:28px}
    }


/* ==========================================================================
   FAQ PAGE (faq.html)
   ========================================================================== */

    /* ===== FAQ HERO ===== */
    .faq-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      color: #fff;
      padding: 60px 0 100px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .faq-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: 5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .faq-hero .container { position: relative; z-index: 2; }
    .hero-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .82rem;
      opacity: .7;
      margin-bottom: 20px;
    }
    .hero-breadcrumb a { color: #fff; transition: opacity var(--transition); }
    .hero-breadcrumb a:hover { opacity: 1; }
    .hero-breadcrumb svg { width: 14px; height: 14px; opacity: .4; }
    .faq-hero-graphic {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 2.5rem;
      font-weight: 900;
      color: rgba(255,255,255,.9);
      backdrop-filter: blur(4px);
    }
    .faq-hero h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }
    .faq-hero .hero-sub {
      font-size: 1rem;
      opacity: .85;
      margin-bottom: 28px;
    }
    .faq-hero-search {
      max-width: 580px;
      margin: 0 auto;
      display: flex;
      background: #fff;
      border-radius: 60px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0,0,0,.15);
    }
    .faq-hero-search input {
      flex: 1;
      border: none;
      padding: 16px 24px;
      font-size: .95rem;
      outline: none;
      color: var(--text);
      font-family: var(--font);
      background: transparent;
    }
    .faq-hero-search input::placeholder { color: #999; }
    .faq-hero-search button {
      padding: 0 24px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity var(--transition);
      border-radius: 0 60px 60px 0;
    }
    .faq-hero-search button:hover { opacity: .9; }
    .faq-hero-search button svg { width: 20px; height: 20px; }
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .hero-wave svg { display: block; width: 100%; height: auto; }

    /* ===== CATEGORY FILTER PILLS ===== */
    .filter-pills {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: -28px;
      position: relative;
      z-index: 3;
      padding-bottom: 32px;
    }
    .filter-pill {
      padding: 10px 22px;
      border-radius: 50px;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .3s ease;
      background: #fff;
      color: var(--text-sec);
      border: 1.5px solid var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .filter-pill:hover { border-color: var(--primary); color: var(--primary); }
    .filter-pill.active {
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 14px rgba(37,99,235,.3);
    }

    /* ===== MAIN LAYOUT ===== */
    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 32px;
      padding: 0 0 60px;
      align-items: start;
    }

    /* ===== FAQ ACCORDION ===== */
    .faq-main {}
    .faq-category { margin-bottom: 32px; }
    .faq-category h2 {
      font-size: 1.1rem;
      font-weight: 800;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
    }
    .faq-category h2 svg { width: 22px; height: 22px; color: var(--primary); }
    .faq-category h2 .cat-badge {
      font-size: .7rem;
      font-weight: 600;
      padding: 2px 10px;
      border-radius: 50px;
      background: var(--surface);
      color: var(--text-sec);
      margin-left: auto;
    }

    .faq-item {
      background: #fff;
      border: 1px solid var(--border);
      border-left: 4px solid transparent;
      border-radius: var(--radius);
      margin-bottom: 10px;
      overflow: hidden;
      transition: all .3s ease;
    }
    .faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
    .faq-item.open { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,99,235,.08); }
    /* Category-specific left border colors */
    [data-cat="orders"] .faq-item { border-left-color: #2563eb; }
    [data-cat="shipping"] .faq-item { border-left-color: #f59e0b; }
    [data-cat="returns"] .faq-item { border-left-color: #10b981; }
    [data-cat="payment"] .faq-item { border-left-color: #8b5cf6; }
    [data-cat="technical"] .faq-item { border-left-color: #ef4444; }
    .faq-item.open[class] { border-left-color: var(--primary); }

    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 22px;
      cursor: pointer;
      font-size: .9rem;
      font-weight: 600;
      transition: background var(--transition);
      gap: 14px;
      user-select: none;
    }
    .faq-question:hover { background: rgba(37,99,235,.02); }
    .faq-chevron {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .3s ease;
    }
    .faq-chevron svg { width: 16px; height: 16px; color: var(--text-sec); transition: transform .3s ease; }
    .faq-item.open .faq-chevron {
      background: rgba(37,99,235,.1);
      transform: rotate(180deg);
    }
    .faq-item.open .faq-chevron svg { color: var(--primary); }

    .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
    .faq-answer-inner {
      padding: 0 22px 20px;
      font-size: .88rem;
      color: var(--text-sec);
      line-height: 1.8;
    }
    .faq-answer-inner a { color: var(--primary); font-weight: 600; }
    .faq-helpful {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--surface);
      font-size: .8rem;
      color: var(--text-sec);
    }
    .helpful-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 14px;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s ease;
      border: 1.5px solid var(--border);
      background: #fff;
      color: var(--text-sec);
    }
    .helpful-btn:hover { border-color: var(--primary); color: var(--primary); }
    .helpful-btn.voted {
      background: rgba(37,99,235,.08);
      border-color: var(--primary);
      color: var(--primary);
      pointer-events: none;
    }
    .helpful-btn svg { width: 14px; height: 14px; }

    /* ===== SIDEBAR ===== */
    .faq-sidebar { position: sticky; top: 120px; }
    .sidebar-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .sidebar-card h3 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-card h3 svg { width: 18px; height: 18px; color: var(--primary); }

    /* Popular Questions */
    .popular-list { counter-reset: popular; }
    .popular-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--surface);
      cursor: pointer;
      transition: color .2s;
      font-size: .84rem;
      color: var(--text);
    }
    .popular-item:last-child { border-bottom: none; }
    .popular-item:hover { color: var(--primary); }
    .popular-num {
      counter-increment: popular;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--surface);
      color: var(--text-sec);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .popular-item:hover .popular-num { background: rgba(37,99,235,.1); color: var(--primary); }

    /* Still Need Help Card */
    .help-card {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      border: none;
      color: #fff;
    }
    .help-card h3 { color: #fff; }
    .help-card h3 svg { color: #fff; }
    .help-card p { font-size: .84rem; opacity: .85; margin-bottom: 16px; }
    .help-contact-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: .84rem;
      font-weight: 500;
      margin-bottom: 8px;
      transition: all .2s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .help-contact-btn:last-child { margin-bottom: 0; }
    .help-contact-btn:hover { background: rgba(255,255,255,.2); }
    .help-contact-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ===== STATS SECTION ===== */
    .faq-stats {
      padding: 48px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .stats-header {
      text-align: center;
      margin-bottom: 32px;
    }
    .stats-header h2 { font-size: 1.4rem; font-weight: 800; }
    .stats-header p { color: var(--text-sec); font-size: .9rem; margin-top: 4px; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 800px;
      margin: 0 auto;
    }
    .stat-card {
      text-align: center;
      padding: 28px 20px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      transition: all .3s ease;
    }
    .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .stat-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
    }
    .stat-icon svg { width: 24px; height: 24px; }
    .stat-value {
      font-size: 1.6rem;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 4px;
    }
    .stat-label {
      font-size: .82rem;
      color: var(--text-sec);
      font-weight: 500;
    }

    /* ===== BOTTOM CTA BANNER ===== */
    .faq-cta-banner {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      border-radius: var(--radius-xl);
      padding: 48px 40px;
      color: #fff;
      text-align: center;
      margin: 48px 0 60px;
      position: relative;
      overflow: hidden;
    }
    .faq-cta-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
      border-radius: 50%;
    }
    .faq-cta-banner::after {
      content: '';
      position: absolute;
      bottom: -40%;
      left: -5%;
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
      border-radius: 50%;
    }
    .faq-cta-banner .cta-content { position: relative; z-index: 1; }
    .faq-cta-banner h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
    .faq-cta-banner p { opacity: .85; font-size: .95rem; margin-bottom: 24px; }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      background: #fff;
      color: #2563eb;
      font-weight: 700;
      font-size: .95rem;
      border-radius: 50px;
      transition: all .3s ease;
      text-decoration: none;
      border: none;
      cursor: pointer;
    }
    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.2);
    }
    .cta-btn svg { width: 18px; height: 18px; }

    /* No results state */
    .faq-no-results {
      display: none;
      text-align: center;
      padding: 48px 20px;
      color: var(--text-sec);
    }
    .faq-no-results.show { display: block; }
    .faq-no-results svg { width: 48px; height: 48px; opacity: .3; margin-bottom: 12px; }
    .faq-no-results h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .faq-no-results p { font-size: .88rem; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1024px) {
      .faq-layout { grid-template-columns: 1fr; }
      .faq-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    }
    @media(max-width:768px) {
      .faq-hero h1 { font-size: 1.8rem; }
      .faq-hero-search { flex-direction: column; border-radius: var(--radius-lg); max-width: 100%; }
      .faq-hero-search input { padding: 14px 18px; }
      .faq-hero-search button { padding: 14px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); justify-content: center; }
      .filter-pills { gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
      .filter-pill { padding: 8px 16px; font-size: .8rem; white-space: nowrap; }
      .stats-grid { grid-template-columns: 1fr; max-width: 320px; }
      .faq-sidebar { grid-template-columns: 1fr; }
    }
    @media(max-width:480px) {
      .faq-hero h1 { font-size: 1.4rem; }
      .faq-hero { padding: 32px 0 36px; }
      .faq-hero-search input { padding: 12px 14px; font-size: .88rem; }
      .filter-pill { padding: 6px 12px; font-size: .75rem; }
      .faq-item-header { padding: 14px 16px; font-size: .88rem; }
      .faq-item-body { padding: 0 16px 14px; font-size: .84rem; }
    }


/* ==========================================================================
   PRIVACY PAGE (privacy.html)
   ========================================================================== */

    /* ===== POLICY HERO ===== */
    .policy-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      color: #fff;
      padding: 60px 0 100px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .policy-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: 5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .policy-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
      border-radius: 50%;
    }
    .policy-hero .container { position: relative; z-index: 2; }
    .hero-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .82rem;
      opacity: .7;
      margin-bottom: 20px;
    }
    .hero-breadcrumb a { color: #fff; transition: opacity var(--transition); }
    .hero-breadcrumb a:hover { opacity: 1; }
    .hero-breadcrumb svg { width: 14px; height: 14px; opacity: .4; }
    .policy-hero-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      backdrop-filter: blur(4px);
    }
    .policy-hero-icon svg { width: 40px; height: 40px; color: rgba(255,255,255,.9); }
    .policy-hero h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }
    .policy-hero .hero-sub {
      font-size: 1rem;
      opacity: .85;
      margin-bottom: 12px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }
    .policy-hero .hero-updated {
      font-size: .82rem;
      opacity: .6;
      font-weight: 500;
    }
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .hero-wave svg { display: block; width: 100%; height: auto; }

    /* ===== POLICY LAYOUT ===== */
    .policy-layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 36px;
      padding: 40px 0 60px;
      align-items: start;
    }

    /* ===== POLICY CONTENT ===== */
    .policy-content {}

    .policy-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      margin-bottom: 24px;
      box-shadow: 0 2px 12px rgba(0,0,0,.04);
      transition: all .4s ease;
      opacity: 0;
      transform: translateY(20px);
    }
    .policy-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .policy-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,.08);
    }

    .policy-card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--surface);
    }
    .section-number {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .section-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(37,99,235,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .section-icon svg { width: 20px; height: 20px; color: var(--primary); }
    .policy-card-header h2 {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--text);
      margin: 0;
    }

    .policy-card p {
      font-size: .9rem;
      color: var(--text-sec);
      line-height: 1.8;
      margin-bottom: 14px;
    }
    .policy-card p:last-child { margin-bottom: 0; }
    .policy-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
    }
    .policy-card ul li {
      position: relative;
      padding: 6px 0 6px 24px;
      font-size: .88rem;
      color: var(--text-sec);
      line-height: 1.7;
    }
    .policy-card ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
    }
    .policy-card strong { color: var(--text); font-weight: 600; }
    .policy-card a { color: var(--primary); font-weight: 600; }
    .policy-card a:hover { text-decoration: underline; }

    .policy-sub-heading {
      font-size: .95rem;
      font-weight: 700;
      color: var(--text);
      margin: 18px 0 8px;
    }

    /* ===== TABLE OF CONTENTS (TOC) ===== */
    .policy-toc {
      position: sticky;
      top: 120px;
    }
    .toc-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .toc-card h3 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
    }
    .toc-card h3 svg { width: 18px; height: 18px; color: var(--primary); }

    .toc-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .toc-list li { margin-bottom: 2px; }
    .toc-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text-sec);
      border-radius: var(--radius);
      transition: all .2s ease;
      text-decoration: none;
      cursor: pointer;
    }
    .toc-link:hover {
      background: rgba(37,99,235,.05);
      color: var(--primary);
    }
    .toc-link.active {
      background: rgba(37,99,235,.08);
      color: var(--primary);
      font-weight: 700;
    }
    .toc-num {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      font-weight: 700;
      flex-shrink: 0;
      transition: all .2s ease;
    }
    .toc-link:hover .toc-num,
    .toc-link.active .toc-num {
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
    }

    /* Quick help card under TOC */
    .toc-help {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      border: none;
      color: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-top: 20px;
    }
    .toc-help h3 { color: #fff; margin-bottom: 8px; font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .toc-help h3 svg { color: #fff; width: 18px; height: 18px; }
    .toc-help p { font-size: .84rem; opacity: .85; margin-bottom: 16px; }
    .toc-help-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: .84rem;
      font-weight: 500;
      transition: all .2s ease;
      cursor: pointer;
      text-decoration: none;
      margin-bottom: 8px;
    }
    .toc-help-btn:last-child { margin-bottom: 0; }
    .toc-help-btn:hover { background: rgba(255,255,255,.2); }
    .toc-help-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1024px) {
      .policy-layout { grid-template-columns: 1fr 260px; gap: 24px; }
    }
    @media(max-width:768px) {
      .policy-hero h1 { font-size: 1.8rem; }
      .policy-layout {
        grid-template-columns: 1fr;
      }
      .policy-toc { display: none; }
      .policy-card { padding: 24px 20px; }
      .policy-card-header { flex-wrap: wrap; }
    }
    @media(max-width:480px) {
      .policy-hero h1 { font-size: 1.4rem; }
      .policy-hero { padding: 32px 0 36px; }
      .policy-card { padding: 18px 16px; }
    }


/* ==========================================================================
   TERMS PAGE (terms.html)
   ========================================================================== */

    /* ===== TERMS HERO ===== */
    .terms-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      color: #fff;
      padding: 60px 0 100px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .terms-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: 5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .terms-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
      border-radius: 50%;
    }
    .terms-hero .container { position: relative; z-index: 2; }
    .hero-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .82rem;
      opacity: .7;
      margin-bottom: 20px;
    }
    .hero-breadcrumb a { color: #fff; transition: opacity var(--transition); }
    .hero-breadcrumb a:hover { opacity: 1; }
    .hero-breadcrumb svg { width: 14px; height: 14px; opacity: .4; }
    .terms-hero-graphic {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      backdrop-filter: blur(4px);
    }
    .terms-hero-graphic svg { width: 40px; height: 40px; color: rgba(255,255,255,.9); }
    .terms-hero h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }
    .terms-hero .hero-sub {
      font-size: 1rem;
      opacity: .85;
      margin-bottom: 0;
    }
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .hero-wave svg { display: block; width: 100%; height: auto; }

    /* ===== TERMS LAYOUT ===== */
    .terms-layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 40px;
      padding: 48px 0 60px;
      align-items: start;
    }

    /* ===== TERMS CONTENT ===== */
    .terms-content {}
    .terms-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      margin-bottom: 24px;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
      transition: all .3s ease;
      opacity: 0;
      transform: translateY(20px);
    }
    .terms-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .terms-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,.08);
    }
    .terms-card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--surface);
    }
    .terms-card-number {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .terms-card-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(37,99,235,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .terms-card-icon svg { width: 20px; height: 20px; color: var(--primary); }
    .terms-card-header h2 {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--text);
      margin: 0;
    }
    .terms-card p {
      font-size: .88rem;
      color: var(--text-sec);
      line-height: 1.85;
      margin-bottom: 12px;
    }
    .terms-card p:last-child { margin-bottom: 0; }
    .terms-card ul {
      list-style: none;
      padding: 0;
      margin: 12px 0;
    }
    .terms-card ul li {
      position: relative;
      padding-left: 22px;
      font-size: .86rem;
      color: var(--text-sec);
      line-height: 1.85;
      margin-bottom: 6px;
    }
    .terms-card ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
    }
    .terms-card strong { color: var(--text); font-weight: 700; }
    .terms-card a { color: var(--primary); font-weight: 600; text-decoration: none; }
    .terms-card a:hover { text-decoration: underline; }

    /* ===== TERMS TOC SIDEBAR ===== */
    .terms-toc {
      position: sticky;
      top: 120px;
    }
    .toc-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .toc-card h3 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
    }
    .toc-card h3 svg { width: 18px; height: 18px; color: var(--primary); }
    .toc-list { list-style: none; padding: 0; margin: 0; }
    .toc-list li { margin-bottom: 2px; }
    .toc-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--radius);
      font-size: .82rem;
      font-weight: 500;
      color: var(--text-sec);
      text-decoration: none;
      transition: all .2s ease;
    }
    .toc-link:hover {
      background: rgba(37,99,235,.05);
      color: var(--primary);
    }
    .toc-link.active {
      background: rgba(37,99,235,.08);
      color: var(--primary);
      font-weight: 600;
    }
    .toc-link .toc-num {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      font-weight: 700;
      flex-shrink: 0;
      transition: all .2s ease;
    }
    .toc-link.active .toc-num,
    .toc-link:hover .toc-num {
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
    }

    /* Quick help card below TOC */
    .toc-help-card {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      border: none;
      border-radius: var(--radius-lg);
      padding: 24px;
      color: #fff;
      margin-top: 20px;
      box-shadow: 0 4px 16px rgba(37,99,235,.2);
    }
    .toc-help-card h4 {
      font-size: .9rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .toc-help-card p {
      font-size: .82rem;
      opacity: .85;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .toc-help-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: .82rem;
      font-weight: 600;
      border-radius: 50px;
      text-decoration: none;
      transition: all .2s ease;
      border: none;
      cursor: pointer;
    }
    .toc-help-btn:hover { background: rgba(255,255,255,.25); }
    .toc-help-btn svg { width: 16px; height: 16px; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1024px) {
      .terms-layout { grid-template-columns: 1fr; }
      .terms-toc { position: static; order: -1; }
      .toc-card { margin-bottom: 24px; }
    }
    @media(max-width:768px) {
      .terms-hero h1 { font-size: 1.8rem; }
      .terms-card { padding: 22px 18px; }
      .terms-card-header { flex-wrap: wrap; }
      .terms-layout { padding: 32px 0 40px; gap: 24px; }
    }
    @media(max-width:480px) {
      .terms-hero h1 { font-size: 1.4rem; }
      .terms-hero { padding: 32px 0 36px; }
      .terms-card { padding: 18px 14px; }
    }


/* ==========================================================================
   COOKIES PAGE (cookies.html)
   ========================================================================== */

    /* ===== COOKIE HERO ===== */
    .cookie-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a855f7 100%);
      color: #fff;
      padding: 60px 0 100px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .cookie-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: 5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .cookie-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
      border-radius: 50%;
    }
    .cookie-hero .container { position: relative; z-index: 2; }
    .hero-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .82rem;
      opacity: .7;
      margin-bottom: 20px;
    }
    .hero-breadcrumb a { color: #fff; transition: opacity var(--transition); }
    .hero-breadcrumb a:hover { opacity: 1; }
    .hero-breadcrumb svg { width: 14px; height: 14px; opacity: .4; }
    .cookie-hero-graphic {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 2.5rem;
      backdrop-filter: blur(4px);
    }
    .cookie-hero h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }
    .cookie-hero .hero-sub {
      font-size: 1rem;
      opacity: .85;
      max-width: 540px;
      margin: 0 auto;
    }
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .hero-wave svg { display: block; width: 100%; height: auto; }

    /* ===== COOKIE CONTENT ===== */
    .cookie-content {
      max-width: 900px;
      margin: 0 auto;
      padding: 48px 20px 60px;
    }
    .cookie-last-updated {
      text-align: center;
      font-size: .84rem;
      color: var(--text-sec);
      margin-bottom: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .cookie-last-updated svg { width: 16px; height: 16px; }

    /* ===== COOKIE CARD ===== */
    .cookie-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      margin-bottom: 24px;
      box-shadow: 0 2px 12px rgba(0,0,0,.04);
      transition: all .3s ease;
      opacity: 0;
      transform: translateY(20px);
    }
    .cookie-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .cookie-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,.08);
    }
    .cookie-card h2 {
      font-size: 1.2rem;
      font-weight: 800;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
    }
    .cookie-card h2 .card-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .cookie-card h2 .card-icon svg { width: 20px; height: 20px; }
    .cookie-card p,
    .cookie-card li {
      font-size: .9rem;
      color: var(--text-sec);
      line-height: 1.8;
    }
    .cookie-card p { margin-bottom: 12px; }
    .cookie-card p:last-child { margin-bottom: 0; }
    .cookie-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
    }
    .cookie-card ul li {
      padding: 6px 0 6px 24px;
      position: relative;
    }
    .cookie-card ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
    }

    /* ===== COOKIE TABLE ===== */
    .cookie-table-wrapper {
      overflow-x: auto;
      margin: 16px 0 4px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }
    .cookie-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .85rem;
      min-width: 580px;
    }
    .cookie-table thead {
      background: linear-gradient(135deg, #f0f4ff, #f5f0ff);
    }
    .cookie-table th {
      padding: 14px 18px;
      text-align: left;
      font-weight: 700;
      color: var(--text);
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 2px solid var(--border);
    }
    .cookie-table td {
      padding: 12px 18px;
      color: var(--text-sec);
      border-bottom: 1px solid var(--surface);
      vertical-align: top;
    }
    .cookie-table tbody tr:last-child td { border-bottom: none; }
    .cookie-table tbody tr {
      transition: background .2s ease;
    }
    .cookie-table tbody tr:hover {
      background: rgba(37,99,235,.02);
    }
    .cookie-table code {
      background: var(--surface);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: .8rem;
      font-family: 'Courier New', monospace;
      color: #7c3aed;
      font-weight: 600;
    }
    .cookie-table .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 50px;
      font-size: .72rem;
      font-weight: 600;
    }
    .badge-essential {
      background: rgba(16,185,129,.1);
      color: #059669;
    }
    .badge-performance {
      background: rgba(37,99,235,.1);
      color: #2563eb;
    }
    .badge-functional {
      background: rgba(245,158,11,.1);
      color: #d97706;
    }
    .badge-marketing {
      background: rgba(239,68,68,.1);
      color: #ef4444;
    }

    /* ===== COOKIE PREFERENCE CENTER ===== */
    .preference-center {
      border: 2px solid transparent;
      background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2563eb, #7c3aed, #a855f7);
      background-origin: padding-box, border-box;
      background-clip: padding-box, border-box;
    }
    .preference-center h2 {
      margin-bottom: 8px;
    }
    .preference-subtitle {
      font-size: .88rem;
      color: var(--text-sec);
      margin-bottom: 24px;
    }
    .cookie-toggle {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 12px;
      transition: all .3s ease;
      background: #fff;
    }
    .cookie-toggle:hover {
      border-color: rgba(37,99,235,.3);
      box-shadow: 0 2px 8px rgba(37,99,235,.06);
    }
    .cookie-toggle.essential {
      background: rgba(16,185,129,.03);
      border-color: rgba(16,185,129,.2);
    }
    .toggle-info { flex: 1; }
    .toggle-info h4 {
      font-size: .92rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .toggle-info h4 .toggle-badge {
      font-size: .68rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 50px;
      background: rgba(16,185,129,.1);
      color: #059669;
    }
    .toggle-info p {
      font-size: .82rem;
      color: var(--text-sec);
      line-height: 1.6;
      margin: 0;
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .toggle-slider {
      display: block;
      width: 48px;
      height: 26px;
      background: #ccc;
      border-radius: 26px;
      cursor: pointer;
      transition: all .3s ease;
      position: relative;
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      transition: all .3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }
    .toggle-switch input:checked + .toggle-slider {
      background: linear-gradient(135deg, #2563eb, #7c3aed);
    }
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(22px);
    }
    .toggle-switch input:disabled + .toggle-slider {
      background: #10b981;
      opacity: .7;
      cursor: not-allowed;
    }
    .toggle-switch input:disabled:checked + .toggle-slider::before {
      transform: translateX(22px);
    }
    .toggle-switch input:focus + .toggle-slider {
      box-shadow: 0 0 0 3px rgba(37,99,235,.2);
    }

    .save-prefs-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff;
      font-weight: 700;
      font-size: .92rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all .3s ease;
      margin-top: 20px;
      font-family: var(--font);
    }
    .save-prefs-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37,99,235,.3);
    }
    .save-prefs-btn:active {
      transform: translateY(0);
    }
    .save-prefs-btn svg { width: 18px; height: 18px; }

    /* ===== BROWSER INSTRUCTIONS ===== */
    .browser-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px;
      margin-top: 16px;
    }
    .browser-item {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: center;
      transition: all .3s ease;
      cursor: default;
    }
    .browser-item:hover {
      border-color: rgba(37,99,235,.3);
      box-shadow: 0 4px 12px rgba(37,99,235,.08);
      transform: translateY(-2px);
    }
    .browser-item .browser-icon {
      font-size: 1.8rem;
      margin-bottom: 8px;
    }
    .browser-item h4 {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .browser-item p {
      font-size: .76rem;
      color: var(--text-sec);
      line-height: 1.5;
      margin: 0;
    }

    /* ===== CONTACT CARD ===== */
    .cookie-contact-card {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      border: none;
      color: #fff;
    }
    .cookie-contact-card h2 { color: #fff; }
    .cookie-contact-card h2 .card-icon { background: rgba(255,255,255,.15); }
    .cookie-contact-card h2 .card-icon svg { color: #fff; }
    .cookie-contact-card p {
      color: rgba(255,255,255,.85);
    }
    .cookie-contact-card .contact-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }
    .cookie-contact-card .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 50px;
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: .85rem;
      font-weight: 600;
      transition: all .2s ease;
      text-decoration: none;
    }
    .cookie-contact-card .contact-link:hover {
      background: rgba(255,255,255,.22);
      transform: translateY(-1px);
    }
    .cookie-contact-card .contact-link svg { width: 16px; height: 16px; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px) {
      .cookie-hero h1 { font-size: 1.8rem; }
      .cookie-card { padding: 24px 20px; }
      .cookie-toggle { flex-direction: column; gap: 12px; }
      .toggle-switch { align-self: flex-start; }
      .browser-grid { grid-template-columns: repeat(2, 1fr); }
      .cookie-contact-card .contact-links { flex-direction: column; }
    }
    @media(max-width:480px) {
      .cookie-hero h1 { font-size: 1.4rem; }
      .cookie-hero { padding: 32px 0 36px; }
      .cookie-card { padding: 18px 16px; }
      .browser-grid { grid-template-columns: 1fr; }
    }


/* ==========================================================================
   ACCESSIBILITY — Focus Styles
   ========================================================================== */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}