/* ════════════════════════════════════
   CSS CUSTOM PROPERTIES
════════════════════════════════════ */
:root {
  --pink:   #0e9e7e;
  --dark:   #0f0f0f;
  --ink:    #1a1a1a;
  --cream:  #f5f6f8;
  --warm:   #eaecf0;
  --muted:  #6b7585;
  --border: rgba(0, 0, 0, 0.09);
  --white:  #ffffff;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════
   RESET & BASE
════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* Shared accent colour utility (used on logo spans) */
.logo-accent {
  color: var(--pink);
}

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 68px;
  background: var(--white);
  border-bottom: 2px solid var(--dark);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.logo {
    font-family: 'Montserrat', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.logo-five {
    font-size: 1.25em;
    font-weight: 800;
    color: var(--pink);
}

/* ── Hamburger / "All" menu ── */
.menu-left {
  position: relative;
}

.all-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 7px 14px;
  border: 1.5px solid var(--dark);
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
  user-select: none;
  position: relative;
}

.all-menu:hover {
  background: var(--dark);
  color: var(--white);
}

.nav-icon {
  display: inline-block;
  width: 15px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-icon::before,
.nav-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.nav-icon::before { top: -5px; }
.nav-icon::after  { top:  5px; }

/* ── Dropdown ── */
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--white);
  border: 1.5px solid var(--dark);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 6px 6px 0 var(--dark);
  overflow: hidden;
  z-index: 300;
  flex-direction: column;
}

.all-menu:hover .dropdown,
.dropdown.open {
  display: flex;
}

.dropdown a {
  padding: 11px 20px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid #eee;
  transition: background 0.25s, color 0.25s, padding-left 0.25s;
}

.dropdown a:last-child {
  border-bottom: none;
}

.dropdown a:hover {
  background: var(--pink);
  color: var(--white);
  padding-left: 28px;
}

/* ── Main nav ── */
nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--pink);
  transition: width 0.3s var(--ease);
}

nav a:hover::after      { width: 100%; }
nav a:hover             { color: var(--pink); }
nav a.active-nav        { color: var(--pink); }
nav a.active-nav::after { width: 100%; }

/* ════════════════════════════════════
   HERO — MAGAZINE MASTHEAD
════════════════════════════════════ */
.blog-masthead {
  background: var(--cream);
  border-bottom: 2px solid var(--dark);
  padding: 50px 40px 0;
  overflow: hidden;
}

.masthead-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  gap: 20px;
}

.masthead-left { flex: 1; }

.masthead-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.masthead-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pink);
}

.masthead-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 0.95;
}

.masthead-title em {
  display: block;
  font-size: 0.72em; /* smaller than Smart */
  font-style: normal;
  font-weight: 600;
  color: var(--pink);
  margin-top: 4px;
}

.masthead-right {
  text-align: right;
  flex-shrink: 0;
}

.masthead-issue {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}

.masthead-tagline {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Category strip inside masthead ── */
.masthead-cats {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.masthead-cats::-webkit-scrollbar { display: none; }

.mcat {
  padding: 14px 22px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.mcat:last-child { border-right: none; }
.mcat:hover      { color: var(--pink); background: var(--warm); }
.mcat.active     { color: var(--pink); background: var(--warm); }


/* ════════════════════════════════════
   SECTION — FEATURED MONEY ARTICLE
════════════════════════════════════ */


/* FEATURED ARTICLE */
.featured-article {
  padding: 60px 40px;
  background: #fff;
  border-bottom: 2px solid #000;
}

.featured-content {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.featured-tag {
  color: #0e9e7e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.featured-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin: 10px 0;
}

.featured-text p {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.featured-btn {
  display: inline-block;
  padding: 12px 22px;
  background: #0e9e7e;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}

.featured-btn:hover {
  background: #000;
}

.featured-image img {
  width: 100%;
  border-radius: 10px;
}

/* ════════════════════════════════════
   SECTION — BROWSE BY CATEGORY
════════════════════════════════════ */
.section-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 20px;
}

.section-label {
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-title-line {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 36px;
  color: var(--dark);
}

.section-title-line span {
  font-style: italic;
  font-weight: 400;
  color: var(--pink);
}

/* ── Category Cards Grid ── */
.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid var(--dark);
  border-radius: 16px;
  overflow: hidden;
}

.cat-card {
  position: relative;
  height: 240px;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: block;
}

.cat-card:nth-child(4n)        { border-right: none; }
.cat-card:nth-last-child(-n+4) { border-bottom: none; }

.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s ease;
  filter: brightness(0.75) saturate(1.1);
}

.cat-card:hover img {
  transform: scale(1.08);
  filter: brightness(0.65) saturate(1.1);
}

.cat-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  transition: background 0.4s;
}

.cat-card:hover .cat-card-overlay {
  background: linear-gradient(to top, rgba(14, 158, 126, 0.55) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.cat-icon-big {
  font-size: 2.6rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s var(--ease);
}

.cat-card:hover .cat-icon-big {
  transform: scale(1.15) translateY(-4px);
}

.cat-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.3px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: color 0.3s;
}

.cat-card:hover .cat-name { color: var(--white); }

.cat-arrow {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  backdrop-filter: blur(4px);
}

.cat-card:hover .cat-arrow {
  opacity: 1;
  transform: translateY(0);
  background: var(--pink);
}

/* ════════════════════════════════════
   LATEST BLOGS SECTION
════════════════════════════════════ */
.latest-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 40px;
}

.blog-main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 50px;
  align-items: start;
}

/* ── Blog Grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Featured card spans full width */
.blog-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
}

.blog-card.featured .card-img   { flex: 0 0 50%; height: 300px; }
.blog-card.featured .card-body  { padding: 34px 32px; }
.blog-card.featured .card-title { font-size: 1.6rem; }

.blog-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(22px);
}

.blog-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(14, 158, 126, 0.11), 0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: rgba(14, 158, 126, 0.3);
}

.card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--warm);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

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

.card-cat-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pink);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  z-index: 2;
}

.card-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--muted);
}

.meta-dot {
  width: 3px;
  height: 3px;
  background: var(--muted);
  border-radius: 50%;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
}

.card-title a:hover { color: var(--pink); }

.card-excerpt {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.read-more {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}

.blog-card:hover .read-more { gap: 9px; }

.read-time {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ── Filter hidden state ── */
.blog-card[data-cat] { transition: opacity 0.4s, transform 0.4s; }
.blog-card.hidden    { display: none; }

/* ── Sidebar ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 90px;
}

.sb-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sb-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-title .dot {
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
}

.sb-cat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.sb-cat-item:hover  { background: var(--warm); }
.sb-cat-item.active { background: rgba(14, 158, 126, 0.08); color: var(--pink); font-weight: 500; }

.sb-cat-item .sb-left { display: flex; align-items: center; gap: 8px; }

.sb-cat-cnt {
  font-size: 0.7rem;
  background: var(--warm);
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 10px;
}

.sb-cat-item.active .sb-cat-cnt {
  background: rgba(14, 158, 126, 0.12);
  color: var(--pink);
}

/* Popular posts */
.pop-post {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.pop-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pop-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.pop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pop-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pop-title-link {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dark);
  transition: color 0.2s;
}

.pop-title-link:hover { color: var(--pink); }

.pop-cat-tag {
  font-size: 0.66rem;
  color: var(--pink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.tag:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(14, 158, 126, 0.05);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 46px;
  flex-wrap: wrap;
}

.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  border: 1.5px solid var(--border);
  transition: all 0.25s var(--ease);
}

.pagination a:hover  { border-color: var(--pink); color: var(--pink); background: rgba(14, 158, 126, 0.05); }
.pagination a.active { background: var(--pink); color: var(--white); border-color: var(--pink); font-weight: 700; }
.pagination a.prev,
.pagination a.next   { padding: 0 14px; font-size: 0.78rem; }

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer {
  background: var(--dark);
  border-top: 2px solid var(--pink);
  padding: 24px 40px 14px;
  text-align: center;
}

.footer-container {
  max-width: 900px;
  margin: 0 auto 12px;
}

.footer-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: white; /* or your footer text color */
}


.footer-tag {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.footer-links a {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.3s;
  white-space: nowrap;
}

.footer-links a:last-child { border-right: none; }
.footer-links a:hover      { color: var(--white); }

.footer-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}



/* ════════════════════════════════════
         EARBUDS-POST PAGE
════════════════════════════════════ */


/* ── Page container ── */
.post-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

/* ── Post title ── */
.post-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.0;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

/* ── Intro paragraph ── */
.post-intro {
  font-size: 1.0rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border);
}

/* ── Affiliate disclosure ── */
.affiliate-note {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--warm);
  border-left: 3px solid var(--pink);
  padding: 12px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-style: italic;
}

/* Earbuds responsive merged into main @media (max-width: 640px) block above */

/* ════════════════════════════════════
   WHY TRUST US SECTION
════════════════════════════════════ */
.trust-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--pink);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.trust-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: var(--dark);
}

.trust-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trust-box li {
  font-size: 0.75rem;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.5;
}


/* ════════════════════════════════════
   PRODUCT BOX — the money card
════════════════════════════════════ */
.product-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Pink top accent line */
.product-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--pink), #3dbfa0);
  border-radius: 16px 16px 0 0;
}

.product-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(14,158,126,0.13), 0 4px 16px rgba(0,0,0,0.07);
  border-color: rgba(14,158,126,0.3);
}

/* ── Product heading ── */
.product-box h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ── Best badge ── */
.best-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0e9e7e, #27c4a2);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(14,158,126,0.35);
}

/* ── Product image ── */
.product-box img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--warm);
  padding: 16px;
  margin: 16px 0;
  transition: transform 0.4s var(--ease);
}

.product-box:hover img {
  transform: scale(1.02);
}

/* ── Why we picked it ── */
.product-box p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 14px;
}

.product-box p strong {
  color: var(--dark);
  font-weight: 600;
}

/* ── Pros/cons list ── */
.product-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.product-box ul li {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.5;
  padding: 7px 12px;
  border-radius: 6px;
  background: transparent;
}

/* Green background — entire pros list */
.product-box ul:has(li:has(✔)) {
  background: #eafaf1;
  border-left: 4px solid #38a169;
  border-radius: 8px;
  padding: 12px 16px;
}

/* Pink background — entire cons list */
.product-box ul:has(li:has(❌)) {
  background: #fff0f0;
  border-left: 4px solid #e53e3e;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 10px;
}

/* Individual item text colors */
.product-box ul li:has(✔) { color: #1e6e3c; }
.product-box ul li:has(❌) { color: #c0392b; }

/* ════════════════════
   PROS / CONS BOXES
════════════════════ */
.product-box ul.pros-list {
  background: #eafaf1;
  border-left: 4px solid #38a169;
  border-radius: 8px;
  padding: 12px 16px;
}

.product-box ul.cons-list {
  background: #fff0f0;
  border-left: 4px solid #e53e3e;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 10px;
}

.pros-list li { color: #1e6e3c; }
.cons-list li { color: #c0392b; }


/* ── Buy buttons row ── */
.product-box .buy-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 4px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.25s;
}


/* Amazon button — orange (highest CTR in India) */

.product-box .buy-btn:not(.flipkart) {
  background: #FF9900;
  color: #111111;
  border: 2px solid #FF9900;
  box-shadow: 3px 3px 0 rgba(255,153,0,0.35);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 28px;
}

.product-box .buy-btn:not(.flipkart):hover {
  background: #e68a00;
  border-color: #e68a00;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(255,153,0,0.55);
}

/* Flipkart button — yellow brand colour */
.product-box .buy-btn.flipkart {
  background: #F7CB00;
  color: #1a1a1a;
  border: 2px solid #F7CB00;
  box-shadow: 3px 3px 0 rgba(247,203,0,0.4);
}

.product-box .buy-btn.flipkart:hover {
  background: #e6bc00;
  border-color: #e6bc00;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(247,203,0,0.6);
}

/* ── Rank number accent (first word before dot) ── */
.product-box h2::first-line {
  color: var(--pink);
}


/* ════════════════════════════════════
   RESPONSIVE - ALL MEDIA- AT ONE PLACE
════════════════════════════════════ */
@media (max-width: 1024px) {
  .blog-main-layout { grid-template-columns: 1fr; }
  .sidebar          { position: static; }
  .cat-card-grid    { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .cat-card-grid                   { grid-template-columns: repeat(2, 1fr); }
  .cat-card:nth-child(2n)          { border-right: none; }
  .blog-grid                       { grid-template-columns: 1fr; }
  .blog-card.featured              { flex-direction: column; }
  .blog-card.featured .card-img   { flex: none; height: 220px; width: 100%; }
  .blog-card.featured .card-body  { padding: 20px; }
  .blog-card.featured .card-title { font-size: 1.25rem; }
  .masthead-right                  { display: none; }

  /* Featured article — stack on tablet */
  .featured-content  { grid-template-columns: 1fr; gap: 24px; }
  .featured-text h2  { font-size: 1.5rem; }
  .featured-image    { order: -1; }
  .featured-article  { padding: 36px 24px; }
}

@media (max-width: 640px) {
  header          { height: auto; padding: 12px 18px; flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .logo           { font-size: 1.3rem; }
  nav             { gap: 20px; justify-content: center; width: 100%; }
  nav a           { font-size: 0.74rem; letter-spacing: 1px; }
  .blog-masthead  { padding: 20px 18px 0; }
  .masthead-top   { padding-bottom: 16px; }
  .masthead-title { font-size: clamp(1.8rem, 9vw, 2.6rem); letter-spacing: -1px; line-height: 1.05; }
  .section-wrap,
  .latest-wrap    { padding-left: 18px; padding-right: 18px; }
  .cat-card-grid  { grid-template-columns: repeat(2, 1fr); }
  .cat-card       { height: 110px; }   /* landscape ratio — shorter so category strip is visible */
  footer          { padding: 24px 16px 14px; }
  .footer-links a { padding: 0 10px; font-size: 0.78rem; }

  /* Featured article — mobile */
  .featured-article  { padding: 20px 16px; }
  .featured-text h2  { font-size: 1.25rem; }
  .featured-content  { gap: 18px; }
  .featured-btn      { display: block; text-align: center; padding: 14px; }
  .featured-image img { max-height: 180px; object-fit: cover; border-radius: 8px; }

  /* Blog layout — sidebar goes below on mobile */
  .blog-main-layout  { grid-template-columns: 1fr; }
  .latest-wrap       { padding: 30px 16px 50px; }

  /* Sidebar */
  .sidebar           { gap: 16px; }
  .sb-block          { padding: 16px; }

  /* Earbuds post page — mobile */
  .post-container    { padding: 20px 14px 50px; }
  .post-title        { font-size: 1.25rem; line-height: 1.3; }
  .post-intro        { font-size: 0.92rem; }
  .product-box       { padding: 18px 14px 16px; margin-bottom: 20px; }
  .product-box h2    { font-size: 1.05rem; flex-direction: column; align-items: flex-start; gap: 6px; }
  .product-box img   { max-height: 200px; padding: 10px; }
  .product-box ul li { font-size: 0.82rem; padding: 6px 10px; }
  .product-box .buy-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 14px;
    font-size: 0.88rem;


  }
  .trust-box         { padding: 14px 14px; }
  .trust-box li      { font-size: 0.72rem; }
}


/* ════════════════════════════════════
   ABOUT PAGE IMPROVEMENT
════════════════════════════════════ */

.about-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 24px;
}

.about-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 25px;
}

.about-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

/* Highlight box (mission section) */
.about-highlight {
  background: var(--white);
  border-left: 4px solid var(--pink);
  padding: 20px;
  border-radius: 10px;
  margin-top: 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* ════════════════════════════════════
   CONTACT PAGE IMPROVEMENT
════════════════════════════════════ */

.contact-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 50px 24px;
}

.contact-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  margin-bottom: 25px;
}

/* Form styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #444;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'DM Sans', sans-serif;
  transition: border 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--pink);
}

/* Button */
.contact-form button {
  background: var(--pink);
  color: #fff;
  padding: 12px;
  border: none;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #000;
}

/* ════════════════════════════════════
   SKINCARE-POST — VOGUE-STYLE LAYOUT
   Paste this at the very bottom of
   your styles.css file
════════════════════════════════════ */

/* ── Breadcrumb ── */
.article-breadcrumb {
  padding: 14px 40px;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'DM Sans', sans-serif;
}
.article-breadcrumb a { color: var(--muted); transition: color 0.2s; }
.article-breadcrumb a:hover { color: var(--pink); }
.article-breadcrumb span { opacity: 0.4; }

/* ── Page wrap — two column like Vogue ── */
.article-page-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 80px;
  align-items: start;
}

/* ── LEFT: Main article ── */
.article-main {
  min-width: 0; /* prevents overflow */
}

/* Category label above title */
.article-cat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-cat-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pink);
}

/* Article meta row */
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.meta-sep { opacity: 0.4; }

/* Hero image */
.article-hero-img {
  margin: 0 0 28px;
  border-radius: 10px;
  overflow: hidden;
}
.article-hero-img img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 10px;
}
.img-caption {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
  font-family: 'DM Sans', sans-serif;
}

/* CTA text */
.article-cta-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 10px;
  line-height: 1.6;
}

/* post-intro paragraphs spacing */
.post-intro p { margin-bottom: 14px; }

/* Tips box */
.tips-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--pink);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 24px 0;
}
.tips-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.tips-box ul { list-style: none; padding: 0; }
.tips-box li {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.65;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.tips-box li:last-child { border-bottom: none; }

/* ── RIGHT: Sidebar ── */
.article-sidebar {
  position: sticky;
  top: 88px; /* below sticky header */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sidebar section label — like Vogue's category headers */
.sidebar-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--dark);
}

/* Most Popular block */
.sidebar-popular {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
}

/* Each popular item */
.sidebar-pop-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.2s;
  text-decoration: none;
  color: inherit;
}
.sidebar-pop-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-pop-item:hover { opacity: 0.75; }

.sidebar-pop-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--warm);
}
.sidebar-pop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-pop-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.sidebar-pop-cat {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
}

.sidebar-pop-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

/* Topics / Tags block */
.sidebar-topics {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
}

.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.s-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.s-tag:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(14,158,126,0.05);
}

/* Newsletter CTA block */
.sidebar-newsletter {
  background: var(--dark);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.sidebar-nl-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.sidebar-nl-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin-bottom: 16px;
}
.sidebar-nl-btn {
  display: block;
  background: var(--pink);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 11px 20px;
  border-radius: 7px;
  text-align: center;
  transition: background 0.25s, transform 0.2s;
  text-decoration: none;
}
.sidebar-nl-btn:hover {
  background: #bf2d5e;
  transform: translateY(-1px);
}

/* ════════════════════════════════════
   SKINCARE POST — RESPONSIVE
   Tablet: 768px  |  Mobile: 640px
════════════════════════════════════ */

/* Tablet — sidebar drops to bottom */
@media (max-width: 1024px) {
  .article-page-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 28px 60px;
  }
  .article-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .sidebar-newsletter { grid-column: 1 / -1; }
  .article-hero-img img { height: 280px; }
}

/* Mobile */
@media (max-width: 640px) {
  .article-breadcrumb { padding: 12px 16px; font-size: 0.7rem; }

  .article-page-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 14px 50px;
  }

  .article-sidebar {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar-newsletter { grid-column: auto; }

  .article-hero-img img { height: 200px; }

  .post-container { padding: 14px 0 40px; }

  .post-title {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .article-meta-row { font-size: 0.7rem; gap: 6px; }

  .tips-box { padding: 14px 14px; }
  .tips-box li { font-size: 0.82rem; }

  .sidebar-pop-thumb { width: 58px; height: 58px; }
  .sidebar-pop-title { font-size: 0.78rem; }

  .sidebar-popular,
  .sidebar-topics,
  .sidebar-newsletter { padding: 16px 14px; }
}


/* ════════════════════════════════════
   CATEGORY STRIP — MOBILE FIX ONLY
   Paste this at the bottom of your
   styles.css
════════════════════════════════════ */

@media (max-width: 600px) {

  /* Make the strip a uniform 4-column grid
     so every category gets exactly 25% width
     and nothing overflows or needs swiping */
  .masthead-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: unset;   /* kill the horizontal scroll */
    gap: 0;
  }

  /* Each pill: centred text, generous tap target,
     slightly smaller font so labels never overflow */
  .mcat {
    padding: 13px 6px;
    font-size: 0.64rem;
    font-weight: 900;          /* bolder on mobile for readability */
    color: var(--ink);         /* strong dark text on mobile */
    letter-spacing: 0.6px;
    text-align: center;
    white-space: normal;      /* allow a 2-line wrap if needed */
    line-height: 1.3;
    border-right: 1px solid var(--border);
    /* Minimum comfortable touch target height */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Last item still has no right border */
  .mcat:last-child {
    border-right: none;
  }
}


/* ════════════════════════════════════
   ELECTRONICS PAGE — EXTRA STYLES
   Save as: assets/css/electronics.css
   Requires: assets/css/styles.css loaded first
   (all --pink, --dark, --ink, --cream, --warm,
    --muted, --border, --white, --ease come from styles.css)
════════════════════════════════════ */


/* ── Filter bar ── */
.elec-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.elec-filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}

.elec-filter-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(14,158,126,0.05);
}

.elec-filter-btn.active {
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
}


/* ── Article index table ── */
.elec-table {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Column widths — desktop */
.ecol-num  { width: 28px;  flex-shrink: 0; text-align: center; }
.ecol-img  { width: 46px;  flex-shrink: 0; }
.ecol-main { flex: 1;      min-width: 0; }
.ecol-cat  { width: 90px;  flex-shrink: 0; }
.ecol-date { width: 54px;  flex-shrink: 0; text-align: right; }
.ecol-read { width: 46px;  flex-shrink: 0; text-align: right; }

/* Table header row */
.elec-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--warm);
  border-bottom: 1.5px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Section divider inside table */
.elec-section-label {
  padding: 5px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
  background: rgba(14,158,126,0.05);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* Each article row */
.elec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease);
  /* scroll-in animation, same style as .blog-card */
  opacity: 0;
  transform: translateY(14px);
}

.elec-row.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              background 0.2s var(--ease);
}

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

.elec-row:hover {
  background: rgba(14,158,126,0.04);
}

.elec-row:hover .erow-title {
  color: var(--pink);
}

/* Row number */
.ecol-num {
  font-family: 'Playfair Display', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
}

/* Tiny thumbnail */
.ecol-img {
  border-radius: 6px;
  overflow: hidden;
  background: var(--warm);
  height: 42px;
}

.ecol-img img {
  width: 46px;
  height: 42px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}

.elec-row:hover .ecol-img img {
  transform: scale(1.07);
}

/* Title + excerpt stacked */
.ecol-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.erow-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.35;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.erow-excerpt {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category pill */
.erow-tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--warm);
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid var(--border);
}

/* Date & read time */
.erow-date {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.erow-read {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}


/* ── Sidebar: "This Category" stats block ── */
/* Reuses .sb-block and .sb-title from styles.css */

.elec-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.elec-stat-cell {
  background: var(--warm);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}

.elec-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
}

.elec-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}


/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */

/* Tablet: hide date + read columns */
@media (max-width: 900px) {
  .ecol-date,
  .ecol-read,
  .elec-table-head .ecol-date,
  .elec-table-head .ecol-read {
    display: none;
  }
  .ecol-cat { width: 78px; }
}

/* Mobile: hide category column too, shrink thumbnail */
@media (max-width: 600px) {

  .latest-wrap {
    padding: 30px 16px 30px;
  }

  .blog-main-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Sidebar shifts to below main content on mobile */
  .sidebar {
    position: static;
  }

  .elec-filter-bar {
    gap: 5px;
  }

  .elec-filter-btn {
    font-size: 0.66rem;
    padding: 4px 10px;
  }

  .elec-table-head {
    display: none; /* header row not needed on mobile */
  }

  .ecol-cat,
  .elec-table-head .ecol-cat {
    display: none;
  }

  .elec-row {
    padding: 9px 12px;
    gap: 8px;
  }

  .ecol-num {
    width: 20px;
    font-size: 0.7rem;
  }

  .ecol-img {
    width: 40px;
    height: 38px;
  }

  .ecol-img img {
    width: 40px;
    height: 38px;
  }

  .erow-title {
    font-size: 0.8rem;
  }

  .erow-excerpt {
    font-size: 0.68rem;
  }

  .elec-section-label {
    font-size: 0.58rem;
    padding: 5px 12px;
  }

  /* Stats grid goes 2-col on mobile (already 2-col, stays fine) */
  .elec-stat-num {
    font-size: 1.15rem;
  }
}

/* ════════════════════════════════════
   MOBILE FONT BOOST
   Bigger, more readable text on phones.
   Desktop is completely untouched.
════════════════════════════════════ */
@media (max-width: 640px) {

  body {
    font-size: 17px;
    line-height: 1.75;
  }

  .card-title {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  .card-excerpt {
    font-size: 0.92rem;
    line-height: 1.7;
  }

  .card-meta {
    font-size: 0.8rem;
  }

  .read-more {
    font-size: 0.82rem;
  }

  .post-title {
    font-size: 1.55rem;
    line-height: 1.25;
  }

  .post-intro {
    font-size: 1rem;
    line-height: 1.75;
  }

  .post-container p,
  .post-container li {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .post-container h2 { font-size: 1.35rem; }
  .post-container h3 { font-size: 1.15rem; }

  .featured-text p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .sb-title          { font-size: 1.05rem; }
  .sidebar-nl-title  { font-size: 1.05rem; }
  .sidebar-nl-sub    { font-size: 0.88rem; }

}

/* ════════════════════════════════════
   MOBILE — PROS/CONS LIST FONT BOOST
   Bigger text on phones only.
   Desktop is completely untouched.
════════════════════════════════════ */
@media (max-width: 640px) {

  .product-box ul li {
    font-size: 1rem;
    line-height: 1.7;
    padding: 9px 14px;
    gap: 9px;
  }

  .product-box ul {
    gap: 9px;
  }

}


/* ════════════════════════════════════
   MOBILE — PARAGRAPH TEXT BLACK
   Only paragraphs, not lists or headings.
   Desktop completely untouched.
════════════════════════════════════ */
@media (max-width: 640px) {

  .post-container p,
  .post-intro p,
  .product-box p {
    color: #000000;
  }

}

/* ════════════════════════════════════
   COMPARISON TABLE — PREMIUM STYLES
   Save as: assets/css/comparison-table.css
   Link AFTER styles.css in <head>

   Uses your existing CSS variables:
   --pink, --dark, --ink, --cream, --warm,
   --muted, --border, --white, --ease
════════════════════════════════════ */


/* ── Outer wrapper ── */
.cmp-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}


/* ── Header block ── */
.cmp-header {
  padding: 28px 28px 22px;
  border-bottom: 1.5px solid var(--border);
  background: var(--cream);
}

.cmp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}

.cmp-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--pink);
}

.cmp-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin: 0;
}


/* ── Table scroll wrapper ── */
.cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── Main table ── */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  color: var(--ink);
  table-layout: fixed;
}

/* Column widths */
.cmp-table colgroup col:first-child { width: 18%; }
.cmp-table colgroup col             { width: 27.3%; }

/* All cells */
.cmp-table td,
.cmp-table th {
  padding: 13px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.cmp-table tbody tr:last-child td {
  border-bottom: none;
}


/* ── Header row ── */
.cmp-table thead tr {
  background: var(--dark);
}

.cmp-th-feature {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: var(--dark);
  vertical-align: middle;
}

.cmp-th-product {
  background: var(--dark);
  text-align: center;
  vertical-align: middle;
  padding: 16px 12px;
}

.cmp-brand {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.2px;
  line-height: 1.1;
  margin-top: 6px;
}

.cmp-model {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  line-height: 1.4;
}

/* Winner column in header */
.cmp-winner-col.cmp-th-product,
th.cmp-winner-col {
  background: var(--pink);
  position: relative;
}

.cmp-winner-col .cmp-brand  { color: var(--white); }
.cmp-winner-col .cmp-model  { color: rgba(255,255,255,0.75); }


/* ── Winner badge pill ── */
.cmp-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.3);
  white-space: nowrap;
}


/* ── Feature label column ── */
.cmp-feature-cell {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
  background: var(--cream);
  white-space: nowrap;
}


/* ── Winner column body cells ── */
td.cmp-winner-col {
  background: rgba(214,51,108,0.04);
  font-weight: 500;
  color: var(--dark);
  border-left: 3px solid var(--pink);
}


/* ── Alternating row tint ── */
.cmp-row-alt td {
  background: var(--warm);
}

.cmp-row-alt td.cmp-winner-col {
  background: rgba(214,51,108,0.07);
}

.cmp-row-alt .cmp-feature-cell {
  background: #ede8df;
}


/* ── Verdict row ── */
.cmp-verdict-row td {
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark);
  background: var(--cream);
  border-top: 2px solid var(--border);
  text-align: center;
  padding: 16px 14px;
}

.cmp-verdict-row td.cmp-winner-col {
  color: var(--pink);
  background: rgba(214,51,108,0.07);
}

.cmp-verdict-row .cmp-feature-cell {
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  color: var(--muted);
}


/* ── Star rating ── */
.cmp-stars {
  color: #f0a500;
  font-size: 0.85rem;
  letter-spacing: 1px;
}


/* ── Status pills (Good / Best / Warn) ── */
.cmp-pill {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.cmp-pill.good {
  background: rgba(39,174,96,0.1);
  color: #1a6e3c;
  border: 1px solid rgba(39,174,96,0.25);
}

.cmp-pill.best {
  background: rgba(39,174,96,0.18);
  color: #145c2e;
  border: 1px solid rgba(39,174,96,0.4);
}

.cmp-pill.warn {
  background: rgba(214,51,108,0.08);
  color: #a02050;
  border: 1px solid rgba(214,51,108,0.2);
}


/* ── Summary note ── */
.cmp-note {
  margin: 0;
  padding: 18px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.7;
  background: var(--cream);
  border-top: 1.5px solid var(--border);
}

.cmp-note strong {
  color: var(--dark);
  font-weight: 700;
}