/* ===== VARIABLES ===== */
:root {
  --primary: #0f172a;
  --accent: #0ea5e9;
  --accent2: #f97316;
  --accent-dark: #0284c7;
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 32px rgba(14,165,233,0.18);
  --font-head: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --star-on: #f59e0b;
  --star-off: #cbd5e1;
  --green: #22c55e;
  --red: #ef4444;
  --danger: #ef4444;
  --pink: #ec4899;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul{list-style:none;}

/* ===== CONTAINER ===== */
.container{max-width:1200px;margin:0 auto;padding:0 16px;}

/* ===== HEADER ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(15,23,42,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);}
.header-spacer{height:64px;}
.header-inner{display:flex;align-items:center;gap:20px;height:64px;}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:20px;color:#fff;flex-shrink:0;}
.logo-icon{font-size:22px;}
.logo-text{background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:16px;}
.main-nav a,.nav-link-drop{color:rgba(255,255,255,0.8);font-size:14px;font-weight:500;padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.main-nav a:hover,.nav-link-drop:hover{color:#fff;background:rgba(255,255,255,0.1);}
.nav-dropdown{position:relative;}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--primary);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);padding:8px;min-width:180px;box-shadow:0 16px 40px rgba(0,0,0,0.4);max-height:300px;overflow-y:auto;z-index:200;}
.nav-dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{display:block;color:rgba(255,255,255,0.8);padding:8px 12px;border-radius:6px;font-size:13px;transition:.15s;}
.dropdown-menu a:hover{background:rgba(14,165,233,0.15);color:var(--accent);}
.dropdown-menu a small{color:var(--text-muted);margin-left:4px;}
.header-search{flex:1;max-width:320px;position:relative;}
.search-form{display:flex;position:relative;}
.search-form input{flex:1;padding:8px 40px 8px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#fff;font-size:13px;font-family:inherit;width:100%;transition:.2s;}
.search-form input::placeholder{color:rgba(255,255,255,0.4);}
.search-form input:focus{outline:none;background:rgba(255,255,255,0.15);border-color:var(--accent);}
.search-form button{position:absolute;right:0;top:0;bottom:0;width:38px;background:none;border:none;cursor:pointer;font-size:16px;}
.search-suggestions{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--primary);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);overflow:hidden;z-index:300;}
.search-suggestions.active{display:block;}
.sugg-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:.15s;}
.sugg-item:hover{background:rgba(14,165,233,0.15);}
.sugg-item img{width:32px;height:32px;object-fit:contain;border-radius:4px;}
.sugg-item span{color:rgba(255,255,255,0.9);font-size:13px;}
.mobile-menu-btn{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px;}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);margin-bottom:16px;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{color:var(--text-muted);}

/* ===== SECTION HEADERS ===== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.section-title{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--primary);position:relative;}
.section-title::after{content:'';display:block;width:40px;height:3px;background:var(--accent);border-radius:2px;margin-top:4px;}
.section-view-all{font-size:13px;font-weight:600;color:var(--accent);}
.section-view-all:hover{text-decoration:underline;}

/* ===== MOBILE CARD ===== */
.mobile-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:all 0.25s;display:flex;flex-direction:column;cursor:pointer;}
.mobile-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--accent);}
.card-img-wrap{background:#f8fafc;padding:20px;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;}
.card-img-wrap img{width:120px;height:140px;object-fit:contain;transition:transform .3s;}
.mobile-card:hover .card-img-wrap img{transform:scale(1.05);}
.card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:6px;}
.card-brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);}
.card-name{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--primary);line-height:1.3;}
.card-price{font-size:14px;font-weight:700;color:var(--accent2);}
.card-rating{display:flex;align-items:center;gap:5px;}
.card-specs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.spec-tag{background:#f1f5f9;color:var(--text-muted);font-size:11px;padding:2px 7px;border-radius:20px;}

/* ===== STARS ===== */
.stars{display:inline-flex;gap:1px;}
.star{font-size:14px;}
.star.filled{color:var(--star-on);}
.star.empty{color:var(--star-off);}
.rating-count{font-size:12px;color:var(--text-muted);}

/* ===== GRIDS ===== */
.mobiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.mobiles-grid-lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}

/* ===== PAGINATION ===== */
.pagination{display:flex;justify-content:center;gap:8px;padding:32px 0 0;}
.page-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);font-size:14px;font-weight:600;color:var(--text);transition:.2s;}
.page-btn:hover,.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ===== COUNT BADGE ===== */
.count-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;margin-left:10px;}

/* ===== LISTING HEADER ===== */
.listing-header{display:flex;align-items:center;margin-bottom:8px;}
.listing-title{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--primary);}

/* ===== FILTERS BAR (old) ===== */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.filter-btn{background:var(--card-bg);border:2px solid var(--border);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;color:var(--text);}
.filter-btn:hover,.filter-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(14,165,233,0.05);}

/* ===== HOME PAGE ===== */
.hero-section{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);padding:60px 0 50px;position:relative;overflow:hidden;}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(14,165,233,0.15),transparent 60%);}
.hero-inner{position:relative;text-align:center;}
.hero-tag{display:inline-block;background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3);color:var(--accent);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.hero-title{font-family:var(--font-head);font-size:clamp(28px,5vw,52px);font-weight:800;color:#fff;line-height:1.2;margin-bottom:12px;}
.hero-title span{color:var(--accent);}
.hero-subtitle{color:rgba(255,255,255,0.6);font-size:16px;margin-bottom:32px;}
.hero-search{max-width:560px;margin:0 auto;display:flex;background:rgba(255,255,255,0.95);border-radius:50px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3);}
.hero-search input{flex:1;padding:16px 20px;border:none;outline:none;font-size:15px;font-family:inherit;color:var(--text);background:transparent;}
.hero-search button{background:var(--accent);color:#fff;border:none;padding:0 28px;font-size:16px;cursor:pointer;font-family:var(--font-head);font-weight:700;transition:.2s;}
.hero-search button:hover{background:var(--accent-dark);}
.hero-stats{display:flex;justify-content:center;gap:40px;margin-top:36px;}
.hero-stat strong{display:block;font-family:var(--font-head);font-size:28px;font-weight:800;color:#fff;}
.hero-stat span{font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:1px;}

/* ===== BRAND LOGOS ROW ===== */
.brand-logos-section{background:#fff;border-bottom:1px solid var(--border);overflow-x:auto;}
.brand-logos-row{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap;}
.brand-logos-row::-webkit-scrollbar{display:none;}
.brand-logo-item{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;border-right:1px solid var(--border);transition:background .2s;flex-shrink:0;min-width:100px;}
.brand-logo-item:hover{background:#f0f9ff;}
.brand-logo-name{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--primary);letter-spacing:-0.3px;text-transform:uppercase;}
.brand-logo-item:hover .brand-logo-name{color:var(--accent);}

/* ===== MAIN SECTIONS ===== */
.categories-section{padding:40px 0 20px;}
.cats-grid{display:flex;flex-wrap:wrap;gap:10px;}
.cat-btn{background:var(--card-bg);border:2px solid var(--border);border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:7px;color:var(--text);}
.cat-btn:hover,.cat-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(14,165,233,0.05);}
.main-sections{padding:30px 0 50px;}
.main-layout{display:grid;grid-template-columns:1fr 300px;gap:30px;}
.section{margin-bottom:40px;}

/* ===== SIDEBAR (home) ===== */
.sidebar{display:flex;flex-direction:column;gap:24px;}
.sidebar-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.sidebar-card-title{padding:14px 16px;background:var(--primary);color:#fff;font-family:var(--font-head);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sidebar-mobile-list{}
.sidebar-mobile-item{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);transition:.15s;}
.sidebar-mobile-item:last-child{border-bottom:none;}
.sidebar-mobile-item:hover{background:#f8fafc;}
.sidebar-mobile-item img{width:44px;height:50px;object-fit:contain;border-radius:6px;background:#f1f5f9;padding:4px;flex-shrink:0;}
.sidebar-mobile-info .name{font-size:13px;font-weight:600;color:var(--primary);line-height:1.3;}
.sidebar-mobile-info .price{font-size:12px;color:var(--accent2);font-weight:700;margin-top:2px;}

/* ===== ALL BRANDS SECTION ===== */
.all-brands-section{background:#f8fafc;border-top:1px solid var(--border);padding:48px 0 60px;}
.all-brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
.all-brand-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:20px 16px;transition:all .2s;text-align:center;}
.all-brand-card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(14,165,233,0.12);transform:translateY(-2px);}
.all-brand-name{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:-0.2px;}
.all-brand-card:hover .all-brand-name{color:var(--accent);}

/* ===== LISTING SLIDER ===== */
.listing-slider{position:relative;overflow:hidden;background:#0f172a;height:300px;}
.slider-inner{width:100%;height:100%;}
.slide{display:none;width:100%;height:100%;padding:0 64px;align-items:center;justify-content:space-between;animation:fadeSlide .4s ease;}
.slide.active{display:flex;}
@keyframes fadeSlide{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
.slide-content{flex:1;max-width:58%;}
.slide-brand{display:inline-block;background:rgba(14,165,233,0.2);border:1px solid rgba(14,165,233,0.4);color:var(--accent);font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;}
.slide-title{font-family:var(--font-head);font-size:clamp(18px,2.8vw,30px);font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px;}
.slide-specs{color:rgba(255,255,255,0.5);font-size:12px;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px;}
.slide-sub{color:rgba(255,255,255,0.6);font-size:14px;margin-bottom:14px;}
.slide-price{color:#fbbf24;font-family:var(--font-head);font-size:22px;font-weight:800;margin-bottom:14px;}
.slide-btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 24px;border-radius:8px;font-weight:700;font-size:14px;transition:.2s;}
.slide-btn:hover{background:var(--accent-dark);}
.slide-phone{font-size:100px;opacity:.12;}
.slide-phone-img{width:180px;height:250px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.slide-phone-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(0,0,0,0.6));}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:32px;cursor:pointer;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;z-index:10;line-height:1;}
.slider-prev{left:14px;}
.slider-next{right:14px;}
.slider-prev:hover,.slider-next:hover{background:rgba(255,255,255,0.3);}
.slider-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.sdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:.2s;}
.sdot.active{background:#fff;width:22px;border-radius:4px;}

/* ===== LISTING PAGE LAYOUT ===== */
.listing-page-wrap{}
.listing-layout{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start;}

/* ===== SIDEBAR FILTERS ===== */
.listing-sidebar{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.filter-section{border-bottom:1px solid var(--border);}
.filter-section:last-child{border-bottom:none;}
.filter-section-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;user-select:none;transition:background .15s;}
.filter-section-head:hover{background:#f8fafc;}
.fsarrow{color:var(--text-muted);font-size:11px;transition:transform .2s;}
.filter-section.collapsed .fsarrow{transform:rotate(-90deg);}
.filter-section-body{padding:8px 12px 12px;}
.filter-section.collapsed .filter-section-body{display:none;}
.filter-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);transition:background .15s;justify-content:space-between;}
.filter-row:hover{background:#f0f9ff;}
.filter-row.active{background:#f0f9ff;color:var(--accent);font-weight:600;}
.filter-row input[type=checkbox]{margin:0;accent-color:var(--accent);flex-shrink:0;}
.filter-row-left{display:flex;align-items:center;gap:8px;}
.filter-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:#fff;}
.price-range-btn{display:block;background:var(--pink);color:#fff;text-align:center;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:600;margin-bottom:6px;transition:.2s;}
.price-range-btn:hover,.price-range-btn.active{background:#be185d;transform:scale(1.01);}
.brand-badge-pill{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.3px;flex-shrink:0;white-space:nowrap;}

/* ===== ACTIVE FILTER TAGS ===== */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.active-filter-tag{background:rgba(14,165,233,0.1);border:1px solid var(--accent);color:var(--accent);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;transition:.15s;}
.active-filter-tag:hover{background:var(--accent);color:#fff;}
.clear-all{background:#fee2e2;border-color:#ef4444;color:#ef4444;}
.clear-all:hover{background:#ef4444;color:#fff;}

/* ===== DETAIL PAGE ===== */
.detail-layout{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;}
.detail-main{}
.detail-sidebar{}
.detail-images-section{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:20px;margin-bottom:24px;}
.main-image-wrap{display:flex;align-items:center;justify-content:center;height:300px;margin-bottom:16px;}
.main-image-wrap img{max-height:280px;max-width:100%;object-fit:contain;transition:opacity .15s;}
.thumb-list{display:flex;gap:10px;flex-wrap:wrap;}
.thumb-item{width:60px;height:70px;border:2px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:.15s;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:4px;}
.thumb-item.active,.thumb-item:hover{border-color:var(--accent);}
.thumb-item img{width:100%;height:100%;object-fit:contain;}

/* ===== DETAIL TABS ===== */
.detail-tabs-bar{display:flex;overflow-x:auto;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;scrollbar-width:none;}
.detail-tabs-bar::-webkit-scrollbar{display:none;}
.detail-tabs-bar.sticky-tabs{position:sticky;top:64px;z-index:100;border-radius:0;box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.dtab{padding:14px 18px;font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap;border-bottom:3px solid transparent;transition:.2s;cursor:pointer;}
.dtab:hover{color:var(--primary);background:#f8fafc;}
.dtab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ===== SPEC ICON BAR ===== */
.detail-spec-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:16px;margin-bottom:24px;}
.dsi-item{text-align:center;padding:14px 8px;background:#f8fafc;border-radius:8px;border:1px solid var(--border);}
.dsi-img{height:36px;margin:0 auto 8px;display:block;object-fit:contain;}
.dsi-emoji{font-size:28px;margin-bottom:8px;}
.dsi-val{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--primary);}
.dsi-label{font-size:11px;color:var(--text-muted);margin-top:3px;}

/* ===== DETAIL INFO CARD (sidebar) ===== */
.detail-info-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:20px;margin-bottom:16px;}
.detail-brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:4px;}
.detail-name{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--primary);line-height:1.3;margin-bottom:10px;}
.detail-rating-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.detail-price-badge{display:inline-block;background:var(--accent2);color:#fff;font-family:var(--font-head);font-size:22px;font-weight:800;padding:8px 20px;border-radius:8px;margin:10px 0 16px;}
.detail-sidebar-sticky{position:sticky;top:80px;}
.colors-section{margin-top:16px;}
.colors-label,.variants-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;}
.colors-list{display:flex;gap:8px;flex-wrap:wrap;}
.color-box{text-align:center;cursor:pointer;transition:.2s;}
.color-box img{width:44px;height:52px;object-fit:contain;border-radius:6px;border:2px solid var(--border);background:#f8fafc;padding:3px;}
.color-box.active img,.color-box:hover img{border-color:var(--accent);}
.color-box span{font-size:10px;color:var(--text-muted);display:block;margin-top:3px;}
.variants-section{margin-top:14px;}
.variants-list{display:flex;gap:8px;flex-wrap:wrap;}
.variant-box{padding:8px 14px;border:2px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;}
.variant-box.active,.variant-box:hover{border-color:var(--accent);color:var(--accent);}
.btn-primary{background:var(--accent);color:#fff;padding:12px 20px;border-radius:var(--radius);font-family:var(--font-head);font-weight:700;font-size:14px;transition:.2s;text-align:center;display:block;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline-sm{padding:8px 18px;border-radius:8px;border:2px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700;transition:.2s;}
.btn-outline-sm:hover{background:var(--accent);color:#fff;}

/* ===== SPECS CARD ===== */
.specs-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;margin-bottom:24px;}
.specs-card-title{padding:16px 20px;background:var(--primary);color:#fff;font-family:var(--font-head);font-size:15px;font-weight:700;}
.specs-two-col{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.specs-col{}
.specs-group{border-bottom:1px solid var(--border);}
.specs-group:last-child{border-bottom:none;}
.specs-group-head{padding:12px 20px;background:#f8fafc;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);}
.specs-row{display:flex;padding:10px 20px;border-bottom:1px solid #f1f5f9;}
.specs-row:last-child{border-bottom:none;}
.specs-key{flex:0 0 42%;font-size:13px;color:var(--text-muted);font-weight:500;}
.specs-val{flex:1;font-size:13px;font-weight:600;color:var(--primary);}
.spec-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.spec-yes{background:#dcfce7;color:#166534;}
.spec-no{background:#fee2e2;color:#991b1b;}

/* ===== DETAIL SECTIONS ===== */
.detail-section-block{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:24px;margin-bottom:24px;}
.detail-section-head{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--primary);margin-bottom:8px;}
.detail-section-sub{color:var(--text-muted);font-size:13px;margin-bottom:16px;}
.description-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:24px;margin-bottom:24px;}
.description-card h2{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:16px;}
.description-body{font-size:14px;line-height:1.8;color:var(--text);}
.description-body img{max-width:100%;border-radius:8px;margin:12px 0;}
.description-body h3,.description-body h4{font-family:var(--font-head);font-weight:700;margin:16px 0 8px;}

/* ===== SIMILAR MOBILES GRID ===== */
.similar-mobiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.similar-mobile-card{background:#f8fafc;border-radius:var(--radius);border:1px solid var(--border);padding:16px;text-align:center;transition:.2s;}
.similar-mobile-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.similar-mobile-card img{width:90px;height:110px;object-fit:contain;margin:0 auto 10px;}
.smc-name{font-size:13px;font-weight:600;color:var(--primary);line-height:1.3;margin-bottom:6px;}
.smc-price{font-size:14px;font-weight:700;color:var(--accent2);}

/* ===== DISCOVER STRIP ===== */
.discover-strip{display:flex;gap:14px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;}
.discover-card{flex-shrink:0;width:150px;background:#f8fafc;border-radius:var(--radius);border:1px solid var(--border);padding:14px;text-align:center;transition:.2s;}
.discover-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.discover-card img{width:90px;height:110px;object-fit:contain;margin:0 auto 8px;}
.dc-name{font-size:12px;font-weight:600;color:var(--primary);line-height:1.3;}
.dc-price{font-size:12px;font-weight:700;color:var(--accent2);margin-top:4px;}

/* ===== SHOP BY PRICE ===== */
.shop-by-price-section{background:#fdf2f8;}
.price-grid-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.price-detail-btn{display:block;background:var(--pink);color:#fff;text-align:center;padding:12px 8px;border-radius:8px;font-size:12px;font-weight:600;transition:.2s;}
.price-detail-btn:hover{background:#be185d;transform:translateY(-2px);}

/* ===== BRAND COLOR GRID ===== */
.brand-color-grid{display:flex;flex-wrap:wrap;gap:10px;}
.brand-color-card{padding:14px 20px;border-radius:8px;font-size:13px;font-weight:800;letter-spacing:.5px;transition:.2s;min-width:100px;text-align:center;}
.brand-color-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.2);}

/* ===== YOU CAN ALSO TRY ===== */
.try-list{display:flex;flex-direction:column;}
.try-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);transition:.15s;color:var(--text);}
.try-item:last-child{border-bottom:none;}
.try-item:hover{color:var(--accent);}
.try-icon{width:44px;height:44px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.try-label{font-size:14px;font-weight:600;}

/* ===== REVIEWS ===== */
.review-card{padding:16px 0;border-bottom:1px solid var(--border);}
.review-card:last-child{border-bottom:none;}
.review-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.reviewer-name{font-weight:700;font-size:14px;color:var(--primary);margin-bottom:4px;}
.review-date{font-size:12px;color:var(--text-muted);}
.review-comment{font-size:14px;color:var(--text);line-height:1.6;}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;font-weight:600;font-size:14px;}
.faq-icon{font-size:20px;color:var(--text-muted);transition:transform .2s;}
.faq-a{display:none;padding:0 0 14px;font-size:14px;color:var(--text-muted);line-height:1.7;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--accent);}

/* ===== AD WRAPPER ===== */
.ad-wrapper{text-align:center;overflow:hidden;}

/* ===== COMPARE PAGE ===== */
.compare-table{width:100%;border-collapse:collapse;background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.compare-table th,.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;}
.compare-table th{background:#f8fafc;font-weight:700;color:var(--primary);}
.compare-table td:first-child{font-weight:600;color:var(--text-muted);width:160px;}

/* ===== SEARCH PAGE ===== */
.search-results-count{font-size:14px;color:var(--text-muted);margin-bottom:20px;}

/* ===== 404 ===== */
.error-page{text-align:center;padding:80px 20px;}
.error-page h1{font-family:var(--font-head);font-size:80px;font-weight:800;color:var(--accent);margin-bottom:0;}
.error-page h2{font-family:var(--font-head);font-size:28px;font-weight:700;margin-bottom:12px;}

/* ===== FOOTER ===== */
.site-footer{background:var(--primary);color:rgba(255,255,255,0.7);padding:40px 0 20px;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px;}
.footer-section-title{color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;}
.footer-links{display:flex;flex-direction:column;gap:6px;}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.6);transition:.15s;}
.footer-links a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:8px;}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .listing-layout{grid-template-columns:240px 1fr;}
  .main-layout{grid-template-columns:1fr 260px;}
  .detail-layout{grid-template-columns:1fr 300px;}
}
@media(max-width:900px){
  .listing-layout{grid-template-columns:1fr;}
  .listing-sidebar{display:none;}
  .main-layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .similar-mobiles-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid-detail{grid-template-columns:repeat(2,1fr);}
  .specs-two-col{grid-template-columns:1fr;}
  .listing-slider{height:220px;}
  .slide{padding:0 48px;}
  .slide-phone-img{width:120px;height:170px;}
  .detail-layout{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .detail-spec-icons{grid-template-columns:repeat(2,1fr);}
  .similar-mobiles-grid{grid-template-columns:repeat(2,1fr);}
  .slide-title{font-size:17px;}
  .mobiles-grid,.mobiles-grid-lg{grid-template-columns:repeat(2,1fr);}
  .price-grid-detail{grid-template-columns:1fr 1fr;}
  .listing-slider{height:180px;}
  .slide{padding:0 40px;}
  .slide-phone-img{display:none;}
}