/* ---------------------------
   WordPress Content Overrides
   (Override inline styles from WordPress editor)
---------------------------- */

/* In This Guide box - override inline styles */
.articleBody > div[style*="background"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  margin: 24px 0 !important;
  text-align: left !important;
}

.articleBody > div[style*="background"] p[style*="font-weight:bold"] {
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

.articleBody > div[style*="background"] ul[style*="columns"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  column-count: 2 !important;
  column-gap: 30px !important;
  text-align: left !important;
}

.articleBody > div[style*="background"] ul li {
  margin: 6px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.articleBody > div[style*="background"] ul li a {
  color: rgba(208, 122, 92, 0.9) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  display: inline-block !important;
  text-align: left !important;
}

.articleBody > div[style*="background"] ul li a:hover {
  color: rgba(208, 122, 92, 1) !important;
  text-decoration: none !important;
}

@media (max-width: 640px) {
  .articleBody > div[style*="background"] ul[style*="columns"] {
    column-count: 1 !important;
  }
}

/* Tables - override inline styles */
.articleBody table[style*="border-collapse"] {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  font-size: 14px !important;
}

.articleBody
  table[style*="border-collapse"]
  thead
  tr[style*="background-color"] {
  background: var(--surface-2) !important;
}

.articleBody
  table[style*="border-collapse"]
  thead
  tr[style*="background-color"]
  th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-bottom: 2px solid var(--border) !important;
}

.articleBody
  table[style*="border-collapse"]
  tbody
  tr[style*="background-color"] {
  background: var(--surface-2) !important;
}

.articleBody table[style*="border-collapse"] tbody tr {
  background: transparent !important;
}

.articleBody table[style*="border-collapse"] tbody tr:hover {
  background: var(--surface-2) !important;
}

.articleBody table[style*="border-collapse"] td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Override inline background colors on table cells (handles background:#f8f9fa and similar) */
.articleBody table[style*="border-collapse"] td[style*="background"] {
  background: var(--surface-2) !important;
  font-weight: 600 !important;
}

/* Override specific background colors */
.articleBody table[style*="border-collapse"] td[style*="background:#f8f9fa"],
.articleBody table[style*="border-collapse"] td[style*="background: #f8f9fa"] {
  background: var(--surface-2) !important;
  font-weight: 600 !important;
}

/* Handle width:30% inline style - make it flexible instead */
.articleBody table[style*="border-collapse"] td[style*="width:30%"],
.articleBody table[style*="border-collapse"] td[style*="width: 30%"] {
  width: auto !important;
  min-width: 140px !important;
}

.articleBody table[style*="border-collapse"] tbody tr:last-child td {
  border-bottom: none !important;
}

.articleBody table[style*="border-collapse"] td a[style*="color:#2563eb"] {
  color: rgba(208, 122, 92, 0.9) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.articleBody
  table[style*="border-collapse"]
  td
  a[style*="color:#2563eb"]:hover {
  color: rgba(208, 122, 92, 1) !important;
  text-decoration: none !important;
}

/* Horizontal rules - override inline styles */
.articleBody hr[style*="border-top"] {
  margin: 32px 0 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  height: 0 !important;
}

/* Pros/Cons sections - override inline styles */
.articleBody > div[style*="display:flex"][style*="gap:20px"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin: 28px 0 !important;
  flex-wrap: unset !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:20px"]
  > div[style*="background:#f0fff4"] {
  background: rgba(76, 175, 80, 0.08) !important;
  border: 1px solid rgba(76, 175, 80, 0.2) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  flex: unset !important;
  min-width: unset !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:20px"]
  > div[style*="background:#fff5f5"] {
  background: rgba(244, 67, 54, 0.08) !important;
  border: 1px solid rgba(244, 67, 54, 0.2) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  flex: unset !important;
  min-width: unset !important;
}

.articleBody > div[style*="display:flex"][style*="gap:20px"] h3 {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 0 20px !important;
  color: var(--text) !important;
}

/* Target ALL ul elements in pros/cons sections, not just ones with margin:15px */
.articleBody > div[style*="display:flex"][style*="gap:20px"] ul {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.articleBody > div[style*="display:flex"][style*="gap:20px"] li {
  margin: 14px 0 !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
  padding-left: 24px !important;
  position: relative !important;
  color: var(--text) !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:20px"]
  > div[style*="background:#f0fff4"]
  li::before {
  content: "•" !important;
  position: absolute !important;
  left: 8px !important;
  color: rgba(76, 175, 80, 0.6) !important;
  font-size: 18px !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:20px"]
  > div[style*="background:#fff5f5"]
  li::before {
  content: "•" !important;
  position: absolute !important;
  left: 8px !important;
  color: rgba(244, 67, 54, 0.6) !important;
  font-size: 18px !important;
}

.articleBody > div[style*="display:flex"][style*="gap:20px"] li:first-child {
  margin-top: 0 !important;
}

.articleBody > div[style*="display:flex"][style*="gap:20px"] li:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .articleBody > div[style*="display:flex"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Product comparison sections with images */
.articleBody > div[style*="display:flex"][style*="gap:25px"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
  margin: 20px 0 !important;
  align-items: flex-start !important;
}

.articleBody > div[style*="display:flex"][style*="gap:25px"] figure {
  margin: 0 !important;
}

.articleBody > div[style*="display:flex"][style*="gap:25px"] figure img {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:25px"]
  a[style*="background:#ff9900"] {
  display: inline-block !important;
  background: rgba(208, 122, 92, 0.85) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-radius: var(--radius) !important;
  transition: var(--t) !important;
}

.articleBody
  > div[style*="display:flex"][style*="gap:25px"]
  a[style*="background:#ff9900"]:hover {
  background: rgba(208, 122, 92, 0.95) !important;
  transform: translateY(-1px) !important;
}

/* Key Specifications lists */
.articleBody ul[style*="margin:15px"][style*="padding-left:20px"] {
  margin: 20px 0 !important;
  padding-left: 24px !important;
  color: var(--text) !important;
}

.articleBody ul[style*="margin:15px"][style*="padding-left:20px"] li {
  margin: 8px 0 !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
  color: var(--text) !important;
}

.articleBody ul[style*="margin:15px"][style*="padding-left:20px"] li strong {
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Disclosure banner - dark mode override */
html[data-theme="dark"] .articleBody p[style*="background:#fff3cd"],
html[data-theme="dark"] .articleBody p[style*="background: #fff3cd"] {
  background: rgba(208, 122, 92, 0.15) !important;
  border: 1px solid rgba(208, 122, 92, 0.35) !important;
  color: rgba(245, 242, 235, 0.9) !important;
}

html[data-theme="dark"] .articleBody p[style*="background:#fff3cd"] a,
html[data-theme="dark"] .articleBody p[style*="background: #fff3cd"] a {
  color: rgba(208, 122, 92, 0.95) !important;
  text-decoration: underline !important;
}

html[data-theme="dark"] .articleBody p[style*="background:#fff3cd"] a:hover,
html[data-theme="dark"] .articleBody p[style*="background: #fff3cd"] a:hover {
  color: rgba(208, 122, 92, 1) !important;
}

html[data-theme="dark"] .articleBody p[style*="background:#fff3cd"] strong,
html[data-theme="dark"] .articleBody p[style*="background: #fff3cd"] strong {
  color: rgba(245, 242, 235, 0.98) !important;
}

/* Product cards - override inline styles */
.articleBody div[style*="background:#f8f9fa"][style*="text-align:center"],
.articleBody div[style*="background: #f8f9fa"][style*="text-align:center"],
.articleBody div[style*="background:#f8f9fa"],
.articleBody div[style*="background: #f8f9fa"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  text-align: center !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) !important;
  transition: var(--t) !important;
}

.articleBody div[style*="background:#f8f9fa"]:hover,
.articleBody div[style*="background: #f8f9fa"]:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px) !important;
}

/* Product card category/title */
.articleBody div[style*="background:#f8f9fa"] p[style*="font-weight:bold"],
.articleBody div[style*="background: #f8f9fa"] p[style*="font-weight:bold"] {
  font-family: var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  color: var(--muted) !important;
}

/* Product card product name */
.articleBody div[style*="background:#f8f9fa"] p[style*="font-size:14px"],
.articleBody div[style*="background: #f8f9fa"] p[style*="font-size:14px"] {
  font-size: 15px !important;
  margin: 0 0 16px !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
}

/* Product card button/link */
.articleBody div[style*="background:#f8f9fa"] a[style*="background:#ff9900"],
.articleBody div[style*="background: #f8f9fa"] a[style*="background: #ff9900"],
.articleBody div[style*="background:#f8f9fa"] a[style*="background:#ff9900"],
.articleBody div[style*="background: #f8f9fa"] a[style*="background:#ff9900"] {
  display: inline-block !important;
  background: var(--accent) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
  transition: var(--t) !important;
  border: none !important;
}

.articleBody
  div[style*="background:#f8f9fa"]
  a[style*="background:#ff9900"]:hover,
.articleBody
  div[style*="background: #f8f9fa"]
  a[style*="background: #ff9900"]:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(208, 122, 92, 0.3) !important;
}

/* Dark mode specific adjustments for product cards */
html[data-theme="dark"]
  .articleBody
  div[style*="background:#f8f9fa"]
  a[style*="background:#ff9900"],
html[data-theme="dark"]
  .articleBody
  div[style*="background: #f8f9fa"]
  a[style*="background: #ff9900"] {
  color: rgba(255, 255, 255, 0.98) !important;
}

/* ---------------------------