/*
Theme Name: SpecsHive
Theme URI: https://specshive.com
Author: SpecsHive
Author URI: https://specshive.com
Description: A powerful multi-niche product specs and comparison theme. Inspired by GSMArena and Smartprix. Supports cameras, mobiles, laptops, and more.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: specshive
Tags: custom-menu, featured-images, responsive-layout, rtl-language-support, translation-ready
*/

/* =============================================
   DESIGN SYSTEM — SpecsHive
   Aesthetic: Data-Dense Editorial / Tech Magazine
   Fonts: Syne (headings) + IBM Plex Sans (body/data)
   Theme: Dark navy + electric amber accent
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Light Theme Palette ── */
  --bg-base:        #f5f6fa;
  --bg-surface:     #ffffff;
  --bg-elevated:    #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #fafbff;
  --border:         #e2e6f0;
  --border-soft:    #edf0f7;

  /* Glass surfaces — light frosted */
  --glass-bg:           rgba(255, 255, 255, 0.70);
  --glass-bg-hover:     rgba(255, 255, 255, 0.90);
  --glass-border:       rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.16);
  --glass-shadow:       0 2px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);

  /* Text */
  --text-primary:   #0f1624;
  --text-secondary: #4a5568;
  --text-muted:     #94a3b8;
  --text-inverse:   #ffffff;

  /* Accent — warm amber (unchanged) */
  --amber:          #f59e0b;
  --amber-dim:      #d97706;
  --amber-bright:   #fbbf24;
  --amber-glow:     rgba(245, 158, 11, 0.18);
  --amber-border:   rgba(245, 158, 11, 0.40);
  --amber-glass:    rgba(245, 158, 11, 0.10);

  /* Supporting accents */
  --blue-accent:    #3b82f6;
  --blue-glow:      rgba(59, 130, 246, 0.15);
  --green-accent:   #10b981;
  --green-glow:     rgba(16, 185, 129, 0.15);
  --red-accent:     #ef4444;
  --red-glow:       rgba(239, 68, 68, 0.15);
  --purple-accent:  #8b5cf6;

  /* Typography */
  --font-display:  'Syne', sans-serif;
  --font-body:     'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Layout */
  --container:       1320px;
  --sidebar-width:   260px;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       20px;
  --radius-pill:     999px;

  /* Shadows — softer for light theme */
  --shadow-card:    0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
  --shadow-glow:    0 0 0 2px var(--amber), 0 4px 16px rgba(245,158,11,0.20);
  --shadow-float:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-glass:   0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 180ms;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(59,130,246,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(245,158,11,0.06) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Glass button base ─────────────────────────────────────────
   Apply .btn-glass to any button/anchor for glassmorphism look.
   Specific button classes override color/glow below.
──────────────────────────────────────────────────────────────── */
.btn-glass,
.button,
button:not(.mobile-menu-toggle):not(.filter-toggle-btn):not(.sh-remove-row):not(.sh-remove-group):not(.sh-remove-filter):not(.sh-row-toggle):not(.sh-include):not(#sh-check-all):not(#sh-uncheck-all):not(#sh-add-group):not(#sh-add-row):not(#sh-add-custom-filter):not(.sh-add-filter-btn):not([type="checkbox"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.btn-glass::before,
button:not(.mobile-menu-toggle):not(.filter-toggle-btn):not(.sh-remove-row):not(.sh-remove-group):not(.sh-remove-filter):not([type="checkbox"])::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.btn-glass:hover,
button:not(.mobile-menu-toggle):not(.filter-toggle-btn):not(.sh-remove-row):not(.sh-remove-group):not(.sh-remove-filter):not([type="checkbox"]):hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
.btn-glass:active,
button:not(.mobile-menu-toggle):not(.filter-toggle-btn):not(.sh-remove-row):not(.sh-remove-group):not(.sh-remove-filter):not([type="checkbox"]):active {
  transform: translateY(0);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ─── Layout ─── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.layout-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ─── Typography ─── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; font-weight: 600; }

.text-mono { font-family: var(--font-mono); }
.text-amber { color: var(--amber); }
.text-muted { color: var(--text-secondary); }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }

/* ─── HEADER / NAVIGATION ─── */
.site-header {
  background: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 16px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: 60px;
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

.site-logo .logo-icon {
  width: 28px;
  height: 28px;
  background: var(--amber);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  font-size: 0.75rem;
  font-weight: 800;
}

.site-logo .logo-dot { color: var(--amber); }

/* Niche Navigation */
.niche-nav {
  display: flex;
  gap: 0;
  flex: 1;
}

.niche-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  height: 36px;
  margin-block: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.niche-nav a:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.niche-nav a.active {
  background: var(--amber-glass);
  border-color: var(--amber-border);
  color: var(--amber);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 12px var(--amber-glow);
}
.niche-nav a .icon { font-size: 0.875rem; }

/* Header Search */
.header-search {
  margin-left: auto;
  position: relative;
}

.header-search input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 8px 40px 8px 16px;
  width: 280px;
  transition: border-color var(--duration) var(--ease), width var(--duration) var(--ease);
}

.header-search input:focus {
  outline: none;
  border-color: var(--amber);
  width: 340px;
}

.header-search input::placeholder { color: var(--text-muted); }

.header-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.875rem;
}

/* ─── BREADCRUMB ─── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current { color: var(--text-primary); }

/* ─── PAGE HEADER ─── */
.page-header {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-xl);
}

.page-header h1 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.page-header h1 .count {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}

.page-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ─── SORT BAR ─── */
.sort-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.sort-bar label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.sort-bar select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 6px 28px 6px 10px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238890aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.sort-bar select:focus { outline: none; border-color: var(--amber); }

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.view-toggle button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 0.875rem;
  transition: all var(--duration) var(--ease);
}

.view-toggle button.active {
  background: var(--amber);
  color: var(--text-inverse);
}

/* ─── FILTER SIDEBAR ─── */
.filter-sidebar {
  position: sticky;
  top: 76px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.filter-header h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.filter-clear {
  font-size: 0.75rem;
  color: var(--amber);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
}

.filter-section {
  border-bottom: 1px solid var(--border-soft);
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--duration) var(--ease);
}

.filter-section-header:hover { background: rgba(245,158,11,0.04); }

.filter-section-toggle {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform var(--duration) var(--ease);
}

.filter-section.open .filter-section-toggle { transform: rotate(180deg); }

.filter-section-body {
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  display: none;
}

.filter-section.open .filter-section-body { display: block; }

/* Filter Options */
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease);
}

.filter-option:hover { color: var(--text-primary); }

.filter-option input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg-elevated);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--duration) var(--ease);
}

.filter-option input[type="checkbox"]:checked {
  background: var(--amber);
  border-color: var(--amber);
}

.filter-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid var(--text-inverse);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

.filter-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Price Range */
.price-range {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.price-range input[type="range"] {
  width: 100%;
  appearance: none;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}

.price-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  border: 2px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--amber);
}

.price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.price-inputs input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 6px 8px;
  width: 100%;
  text-align: center;
}

.price-inputs input:focus { outline: none; border-color: var(--amber); }

/* ─── PRODUCT GRID ─── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.product-grid.list-view {
  grid-template-columns: 1fr;
}

/* ─── PRODUCT CARD ─── */
.product-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration) var(--ease);
  position: relative;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.product-card > * { position: relative; z-index: 1; }

.product-card:hover {
  border-color: var(--amber-border);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--amber-border), 0 0 24px var(--amber-glow);
  background: var(--glass-bg-hover);
}

.card-image {
  position: relative;
  background: var(--bg-elevated);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  overflow: hidden;
}

.card-image img {
  max-height: 140px;
  object-fit: contain;
  transition: transform 300ms var(--ease);
}

.product-card:hover .card-image img { transform: scale(1.05); }

.card-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--amber);
  color: var(--text-inverse);
}

.card-badge.new { background: var(--green-accent); }
.card-badge.hot { background: var(--red-accent); }

.compare-checkbox {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 22px; height: 22px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.6875rem;
  color: var(--text-muted);
  transition: all var(--duration) var(--ease);
}

.compare-checkbox:hover,
.compare-checkbox.selected {
  border-color: var(--amber);
  background: var(--amber-glow);
  color: var(--amber);
}

.card-body { padding: var(--space-md); }

.card-brand {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.card-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-md);
}

.card-spec {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.card-spec .spec-icon { color: var(--text-muted); width: 14px; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft);
}

.card-price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
}

.card-price .currency {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-right: 2px;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}

.rating-stars { color: var(--amber); font-size: 0.75rem; }
.rating-value { color: var(--text-secondary); font-family: var(--font-mono); }

/* List View Card */
.product-grid.list-view .product-card {
  display: grid;
  grid-template-columns: 140px 1fr auto;
}

.product-grid.list-view .card-image {
  height: 120px;
  border-radius: 0;
}

.product-grid.list-view .card-body {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.product-grid.list-view .card-specs {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: 0;
}

.product-grid.list-view .card-footer {
  border-top: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-md);
  gap: var(--space-sm);
}

/* ─── COMPARE FLOAT BAR ─── */
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: rgba(255, 255, 255, 0.90);
  border-top: 1px solid var(--amber-border);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  z-index: 200;
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10), 0 -1px 0 rgba(0,0,0,0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.compare-bar.visible { transform: translateY(0); }

.compare-bar-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.compare-slots {
  display: flex;
  gap: var(--space-md);
  flex: 1;
}

.compare-slot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.8125rem;
  min-width: 160px;
}

.compare-slot.empty {
  border-style: dashed;
  color: var(--text-muted);
}

.compare-slot-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
}

.btn-compare-now {
  background: linear-gradient(135deg, rgba(255,184,63,0.25) 0%, rgba(255,184,63,0.12) 100%);
  color: var(--amber-bright);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 16px var(--amber-glow), var(--glass-shadow);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-compare-now::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.btn-compare-now:not([disabled]):hover {
  background: linear-gradient(135deg, rgba(255,184,63,0.35) 0%, rgba(255,184,63,0.18) 100%);
  border-color: var(--amber);
  box-shadow: 0 0 24px var(--amber-glow), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.btn-compare-now[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ─── PRODUCT PAGE ─── */
.product-hero {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: var(--space-2xl);
  padding: var(--space-xl) 0;
  align-items: start;
}

.product-gallery {
  position: sticky;
  top: 76px;
}

.gallery-main {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 360px;
  margin-bottom: var(--space-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.gallery-main img {
  max-height: 300px;
  object-fit: contain;
  transition: transform 400ms var(--ease);
}

.gallery-thumbs {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumb {
  width: 64px; height: 64px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb.active { border-color: var(--amber); }
.gallery-thumb img { max-height: 100%; object-fit: contain; }

/* Product Info */
.product-info { padding-top: var(--space-sm); }

.product-niche-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  background: var(--amber-glow);
  border: 1px solid var(--amber-border);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: var(--space-md);
}

.product-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

.product-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
}

/* Score / Rating */
.product-score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}

.score-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--amber);
  line-height: 1;
}

.score-meta { font-size: 0.8125rem; color: var(--text-secondary); }
.score-meta strong { color: var(--text-primary); font-weight: 500; }

/* Key Specs Summary */
.key-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.key-spec-item {
  padding: var(--space-md);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.key-spec-item:nth-child(3n) { border-right: none; }
.key-spec-item:nth-last-child(-n+3) { border-bottom: none; }

.key-spec-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.key-spec-value {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Buy Buttons */
.buy-section { margin-bottom: var(--space-xl); }

.buy-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.buy-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.buy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}

.buy-btn.primary {
  background: linear-gradient(135deg, rgba(255,184,63,0.22) 0%, rgba(255,184,63,0.10) 100%);
  border-color: var(--amber-border);
  color: var(--amber-bright);
  font-weight: 700;
  box-shadow: 0 0 20px var(--amber-glow), var(--glass-shadow);
}
.buy-btn.primary:hover {
  background: linear-gradient(135deg, rgba(255,184,63,0.32) 0%, rgba(255,184,63,0.16) 100%);
  border-color: var(--amber);
  box-shadow: 0 0 30px var(--amber-glow), 0 6px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.buy-btn.secondary {
  color: var(--text-primary);
}
.buy-btn.secondary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

.buy-btn-store { display: flex; align-items: center; gap: var(--space-sm); }
.buy-btn-price { font-family: var(--font-mono); font-weight: 600; }
.buy-btn-badge {
  font-size: 0.6875rem;
  background: var(--green-accent);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Product Actions */
.product-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  font-family: var(--font-body);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.btn-action:hover {
  background: var(--glass-bg-hover);
  border-color: var(--amber-border);
  color: var(--amber);
  transform: translateY(-1px);
}
.btn-action.compare-add {
  border-color: var(--amber-border);
  color: var(--amber-bright);
  background: var(--amber-glass);
  box-shadow: 0 0 12px var(--amber-glow), var(--glass-shadow);
}

/* ─── SPEC TABLE ─── */
.specs-wrapper {
  margin-top: var(--space-2xl);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.specs-wrapper-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.specs-wrapper-header h2 { font-size: 1.125rem; }

.specs-group {
  border-bottom: 1px solid var(--border-soft);
}

.specs-group:last-child { border-bottom: none; }

.specs-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-elevated);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}

.specs-group-icon { color: var(--amber); }

.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border-soft);
}

.spec-row:last-child { border-bottom: none; }

.spec-label {
  padding: var(--space-md) var(--space-xl);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-soft);
}

.spec-value {
  padding: var(--space-md) var(--space-xl);
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* ─── COMPARE PAGE ─── */
.compare-page { padding: var(--space-xl) 0; }

.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 700px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Product Header Cells */
.compare-table .prod-col {
  background: var(--bg-base);
  padding: var(--space-lg);
  text-align: center;
  vertical-align: top;
  border-left: 1px solid var(--glass-border);
  width: 220px;
  position: relative;
}

.compare-table .prod-col:first-child { border-left: none; }

.compare-prod-img {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.compare-prod-img img { max-height: 100%; object-fit: contain; }

.compare-prod-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 4px;
}

.compare-prod-price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--amber);
}

.compare-remove-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
}

.compare-remove-btn:hover { color: var(--red-accent); }

/* Section Header Row */
.compare-table .section-row td {
  background: var(--bg-base);
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  border-top: 2px solid var(--border);
}

/* Label Column */
.compare-table .label-col {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  white-space: nowrap;
  min-width: 160px;
}

/* Value Cells */
.compare-table .value-col {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.875rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-align: center;
  border-left: 1px solid var(--border-soft);
}

.compare-table tr:nth-child(even) .value-col { background: rgba(255,255,255,0.015); }

/* Highlight differences */
.compare-table .diff-best .value-col { color: var(--green-accent); font-weight: 600; }
.compare-table .diff-worst .value-col { color: var(--red-accent); }
.compare-table .diff-best .value-col::after {
  content: ' ✓';
  font-size: 0.7em;
  opacity: 0.7;
}

/* Winner banner */
.winner-banner {
  background: linear-gradient(135deg, var(--amber-glow), transparent);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--amber);
  font-weight: 600;
}

/* Compare CTA Header */
.compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.compare-add-product {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.compare-add-product:hover { border-color: var(--amber); color: var(--amber); }

.compare-share-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--duration) var(--ease);
}

.compare-share-btn:hover { border-color: var(--blue-accent); color: var(--blue-accent); }

/* ─── SEARCH PAGE ─── */
.search-page { padding: var(--space-2xl) 0; }

.search-hero {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.search-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-sm);
}

.search-hero h1 span { color: var(--amber); }

.search-hero p {
  color: var(--text-secondary);
  font-size: 1.125rem;
  margin-bottom: var(--space-xl);
}

.search-big {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.search-big input {
  width: 100%;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.125rem;
  padding: var(--space-lg) 56px var(--space-lg) var(--space-xl);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.search-big input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-glow);
}

.search-big input::placeholder { color: var(--text-muted); }

.search-big-btn {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  background: var(--amber);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--duration) var(--ease);
}

.search-big-btn:hover { background: var(--amber-dim); }

/* Niche filter pills */
.niche-pills {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.niche-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.niche-pill:hover,
.niche-pill.active {
  border-color: var(--amber);
  background: var(--amber-glow);
  color: var(--amber);
}

/* Search Results */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.search-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.search-results-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.search-results-count strong { color: var(--text-primary); }

/* ─── SIMILAR PRODUCTS ─── */
.similar-products {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.section-header h2 { font-size: 1.25rem; }

.see-all-link {
  font-size: 0.875rem;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 4px;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

/* ─── PAGINATION ─── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

.page-btn {
  min-width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-family: var(--font-mono);
  text-decoration: none;
}

.page-btn:hover { border-color: var(--amber-border); color: var(--amber); }
.page-btn.active { background: var(--amber); border-color: var(--amber); color: var(--text-inverse); font-weight: 700; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ─── TAGS / BADGES ─── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

.tag-blue { background: rgba(61,142,245,0.15); color: var(--blue-accent); border: 1px solid rgba(61,142,245,0.25); }
.tag-green { background: rgba(34,197,94,0.12); color: var(--green-accent); border: 1px solid rgba(34,197,94,0.2); }
.tag-amber { background: var(--amber-glow); color: var(--amber); border: 1px solid var(--amber-border); }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) 0 var(--space-xl);
}

.footer-grid--simple {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.footer-brand .site-logo { margin-bottom: var(--space-md); }

.footer-brand p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.footer-col ul { display: flex; flex-direction: column; gap: 8px; }

.footer-col a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease);
}

.footer-col a:hover { color: var(--amber); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ─── UTILITIES ─── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ─── SKELETONS / LOADING ─── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── RESPONSIVE ─── */

/* ═══════════════════════════════════════════════
   HOMEPAGE
═══════════════════════════════════════════════ */

/* ── Hero ── */
.home-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(59,130,246,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,158,11,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.home-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.home-hero-text h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-hero-text p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: var(--space-xl);
}
.home-hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.hero-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.hero-btn-primary {
  background: linear-gradient(135deg, rgba(255,184,63,0.25) 0%, rgba(255,184,63,0.12) 100%);
  border: 1px solid var(--amber-border);
  color: var(--amber-bright);
  box-shadow: 0 0 20px var(--amber-glow), var(--glass-shadow);
}
.hero-btn-primary:hover {
  background: linear-gradient(135deg, rgba(255,184,63,0.38) 0%, rgba(255,184,63,0.20) 100%);
  border-color: var(--amber);
  box-shadow: 0 0 32px var(--amber-glow), 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
  color: var(--amber-bright);
}
.hero-btn-secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  box-shadow: var(--glass-shadow);
}
.hero-btn-secondary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--amber-border);
  transform: translateY(-2px);
  color: var(--amber-dim);
}

/* Niche chips in hero */
.home-hero-niches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.home-niche-chip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.home-niche-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.home-niche-chip:hover {
  background: rgba(245, 158, 11, 0.06);
  border-color: var(--amber-border);
  transform: translateX(4px);
  box-shadow: 0 2px 12px var(--amber-glow), var(--glass-shadow);
  color: var(--amber-dim);
}
.chip-icon { font-size: 1.5rem; flex-shrink: 0; }
.chip-label { font-weight: 600; font-size: 0.9375rem; flex: 1; }
.chip-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-family: var(--font-mono);
}

/* ── Niche sections ── */
.home-niche-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-soft);
}
.home-niche-section:first-of-type { border-top: none; }

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-md);
}
.home-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.section-icon { font-size: 1.75rem; }
.home-section-title h2 { margin: 0; font-size: 1.375rem; }
.section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-left: 4px;
}
.section-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.section-browse-link:hover {
  border-color: var(--amber-border);
  color: var(--amber);
  background: var(--amber-glass);
  transform: translateX(2px);
}

/* 4-col product row on homepage */
.home-product-row {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Responsive: Homepage ── */
@media (max-width: 1100px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .home-hero-niches { flex-direction: row; flex-wrap: wrap; }
  .home-niche-chip { flex: 1 1 calc(50% - var(--space-sm)); }
  .home-product-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .home-hero { padding: var(--space-xl) 0; }
  .home-hero-text h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .home-hero-actions { flex-direction: column; }
  .hero-btn { justify-content: center; }
  .home-niche-chip { flex: 1 1 100%; }
  .home-product-row { grid-template-columns: repeat(2, 1fr); }
  .home-section-header { flex-wrap: wrap; }
  .section-browse-link { font-size: 0.8rem; padding: 6px 12px; }
}
@media (max-width: 480px) {
  .home-product-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════
   MOBILE NAV & HAMBURGER
═══════════════════════════════════════════════ */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  z-index: 200;
}
.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .mobile-menu-toggle { display: flex; }
  .filter-toggle-btn  { display: flex; }
}

/* Mobile niche nav overlay */
.niche-nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(255,255,255,0.97);
  padding: 80px var(--space-lg) var(--space-xl);
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
}
.niche-nav-mobile.open { display: flex; }
.niche-nav-mobile a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  transition: background 0.15s, border-color 0.15s;
}
.niche-nav-mobile a:hover,
.niche-nav-mobile a.active { background: var(--bg-elevated); border-color: var(--amber); color: var(--amber); }
.niche-nav-mobile .icon { font-size: 1.4rem; }

/* Mobile filter toggle button */
.filter-toggle-btn {
  display: none;
  width: 100%;
  padding: 10px var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: var(--space-md);
  justify-content: space-between;
  align-items: center;
}
.filter-sidebar.collapsed .filter-sidebar-inner { display: none; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile First
   1100px  Tablet landscape
   768px   Tablet portrait / large phone
   480px   Phone
═══════════════════════════════════════════════ */

/* ── 1100px ── */
@media (max-width: 1100px) {
  .container { padding-inline: var(--space-lg); }

  /* Archive layout */
  .layout-sidebar { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; max-height: none; border-radius: var(--radius-md); }
  .filter-sidebar-inner { padding: var(--space-md); }

  /* Product hero */
  .product-hero { grid-template-columns: 1fr; gap: var(--space-xl); }
  .product-gallery { position: static; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Compare table — allow horizontal scroll */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 560px; }
  .compare-table .prod-col { min-width: 160px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  :root {
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
  }

  /* Header */
  .site-header { padding-block: 10px; }
  .header-inner { gap: var(--space-md); flex-wrap: wrap; }
  .site-logo { font-size: 1.1rem; }
  .logo-icon { width: 28px; height: 28px; font-size: 0.8rem; }
  .niche-nav { display: none; }            /* hidden — mobile menu could replace */
  .header-search { flex: 1; min-width: 0; }
  .header-search input { width: 100%; min-width: 0; }
  .header-search input:focus { width: 100%; }

  /* Archive */
  .filter-sidebar { margin-bottom: var(--space-lg); }
  .filter-toggle { display: flex; }        /* show mobile filter toggle if present */
  .products-header { flex-wrap: wrap; gap: var(--space-sm); }
  .products-header .sort-bar { flex-wrap: wrap; gap: 6px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .product-card { padding: var(--space-md); }
  .product-card-thumb { height: 140px; }

  /* Single product */
  .product-hero { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .gallery-main { height: 260px; }
  .gallery-thumbs { gap: 6px; }
  .gallery-thumb { width: 52px; height: 52px; }
  .product-info { padding: 0; }
  .key-specs-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .key-spec-item { padding: var(--space-sm); }
  .action-buttons { flex-wrap: wrap; gap: var(--space-sm); }
  .buy-buttons { flex-direction: column; }
  .buy-btn { width: 100%; justify-content: space-between; }
  .spec-group { margin-bottom: var(--space-md); }
  .similar-grid { grid-template-columns: 1fr 1fr; }

  /* Compare bar (sticky bottom) */
  .compare-bar { flex-wrap: wrap; gap: 6px; padding: 10px var(--space-md); }
  .compare-slots { gap: 6px; overflow-x: auto; flex: 1 1 100%; }
  .compare-slot { min-width: 90px; max-width: 120px; font-size: 0.7rem; padding: 4px 6px; }
  .btn-compare-now { flex: 1; font-size: 0.8rem; padding: 8px 12px; }

  /* Compare page */
  .compare-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .compare-header h1 { font-size: 1.25rem; }
  .compare-header .compare-actions { flex-wrap: wrap; gap: 6px; }
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); }
  .compare-table { min-width: 480px; font-size: 0.8rem; }
  .compare-table .prod-col { min-width: 140px; padding: var(--space-md) var(--space-sm); }
  .compare-table .prod-col img { height: 80px; }
  .compare-table .prod-col .prod-title { font-size: 0.8rem; }
  .compare-table .label-col { font-size: 0.75rem; padding: 6px 8px; min-width: 100px; }
  .compare-table .value-col { font-size: 0.8rem; padding: 6px 8px; }
  .compare-table .section-row td { font-size: 0.75rem; padding: 6px 10px; }
  .compare-verdict { flex-direction: column; gap: var(--space-md); }

  /* Search page */
  .search-hero { padding: var(--space-xl) 0; }
  .search-hero h1 { font-size: 1.5rem; }
  .search-hero input[type="search"] { font-size: 1rem; padding: 10px 14px; }
  .niche-filter-pills { flex-wrap: wrap; gap: 6px; }
  .niche-pill { font-size: 0.75rem; padding: 4px 10px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid--simple { max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-sm); font-size: 0.75rem; }

  /* Spec table */
  .spec-table { font-size: 0.8rem; }
  .spec-label { width: 40%; }
  .spec-value { width: 60%; }

  /* Breadcrumb */
  .breadcrumb { font-size: 0.75rem; flex-wrap: wrap; gap: 2px; }

  /* Pagination */
  .pagination { flex-wrap: wrap; gap: 4px; }
  .pagination a, .pagination span { padding: 6px 10px; font-size: 0.8rem; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }

  /* Archive */
  .product-grid { grid-template-columns: 1fr; }
  .product-card-thumb { height: 180px; }

  /* Single */
  .key-specs-grid { grid-template-columns: 1fr 1fr; }
  .gallery-main { height: 220px; }
  .similar-grid { grid-template-columns: 1fr; }

  /* Compare */
  .compare-table { min-width: 380px; }
  .compare-table .prod-col { min-width: 110px; }
  .compare-table .label-col { min-width: 80px; font-size: 0.7rem; }

  /* Compare bar */
  .compare-slot { min-width: 80px; font-size: 0.65rem; }

  /* Header */
  .header-inner { gap: var(--space-sm); }
  .site-logo span:last-child { display: none; }  /* hide "Hive" on tiny screens */

  /* Search */
  .search-hero h1 { font-size: 1.25rem; }

  /* Footer */
  .footer-bottom { font-size: 0.7rem; }
}

/* ── Touch / pointer improvements ── */
@media (hover: none) and (pointer: coarse) {
  /* Bigger tap targets */
  .filter-option { padding: 8px 4px; }
  .filter-section-header { padding: 12px var(--space-md); }
  .gallery-thumb { width: 56px; height: 56px; }
  .compare-checkbox { width: 36px; height: 36px; font-size: 1rem; }
  .buy-btn { padding: 14px var(--space-lg); }
  .niche-pill { padding: 8px 16px; }
  .pagination a { padding: 10px 14px; }
}