/* ===========================================
   NailPrime Article Style Pro
   Version: 1.5.0
   Site: https://nailprime.com/
   Scoped to .npt-blog-wrap and .spt-blog-wrap only
   Does NOT affect any other page or post
   Designed for NailPrime nail articles:
   - Clean beauty blog readability
   - Soft pink, blush, purple, and neutral palette
   - Reusable blocks for nail ideas, care, salons, reviews, and tutorials
=========================================== */

/* ── BASE WRAPPER ── */
:where(.spt-blog-wrap,.npt-blog-wrap) {
  margin: 0 auto;
  padding: 0 20px;
  line-height: 1.85;
  color: #1a1a1a;
  box-sizing: border-box;
  font-family: Georgia, 'Times New Roman', serif;
}

:where(.spt-blog-wrap,.npt-blog-wrap) *,
:where(.spt-blog-wrap,.npt-blog-wrap) *::before,
:where(.spt-blog-wrap,.npt-blog-wrap) *::after {
  box-sizing: border-box;
}

/* ── TYPOGRAPHY ── */
:where(.spt-blog-wrap,.npt-blog-wrap) p { margin: 0 0 1.3em; }

:where(.spt-blog-wrap,.npt-blog-wrap) h2 {
  font-size: 1.55em;
  font-weight: 700;
  margin: 2.2em 0 0.7em;
  color: #111;
  line-height: 1.3;
  font-family: Georgia, serif;
  border-bottom: 2px solid #f6c6d9;
  padding-bottom: 0.3em;
}

:where(.spt-blog-wrap,.npt-blog-wrap) h3 {
  font-size: 1.2em;
  font-weight: 700;
  margin: 1.8em 0 0.6em;
  color: #831843;
  line-height: 1.35;
  font-family: Georgia, serif;
}

:where(.spt-blog-wrap,.npt-blog-wrap) ul,
:where(.spt-blog-wrap,.npt-blog-wrap) ol {
  margin: 0 0 1.3em 0;
  padding-left: 1.6em;
}

:where(.spt-blog-wrap,.npt-blog-wrap) li   { margin-bottom: 0.6em; line-height: 1.8; }
:where(.spt-blog-wrap,.npt-blog-wrap) strong { font-weight: 700; color: #111; }

:where(.spt-blog-wrap,.npt-blog-wrap) a {
  color: #d63384;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) a:hover { opacity: .8; }

:where(.spt-blog-wrap,.npt-blog-wrap) section { margin-bottom: 0.4em; }


/* ================================================
   BOXES
================================================ */

/* ── Quick Answer Box ── */
.spt-quick-answer {
  background: #fff1f7;
  border-left: 6px solid #d63384;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0 0 2em;
}
.spt-qa-label {
  font-weight: 700;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d63384;
  margin-bottom: 10px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-quick-answer p { margin: 0; font-size: 1.05em; }

/* ── Health Tip Box ── */
.spt-tip-box {
  background: #f4efff;
  border-left: 6px solid #7c3aed;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-tip-label {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c3aed;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
.spt-tip-box p { margin: 0; }

/* ── Note Box ── */
.spt-note-box {
  background: #fff7ed;
  border-left: 6px solid #f59e0b;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-note-label {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f59e0b;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
.spt-note-box p { margin: 0; }

/* ── Warning Box ── */
.spt-warning-box {
  background: #fff1f2;
  border-left: 6px solid #dc2626;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-warn-label {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #dc2626;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
.spt-warning-box p { margin: 0; }

/* ── Takeaway Box ── */
.spt-takeaway-box {
  background: #fdf2f8;
  border-left: 6px solid #be185d;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 2.2em 0 1.8em;
}
.spt-takeaway-label {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #be185d;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
.spt-takeaway-box p { margin: 0; }


/* ================================================
   COMPONENTS
================================================ */

/* ── Stat / Number Strip ── */
.spt-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 1.8em 0;
}
.spt-stat-item {
  flex: 1;
  min-width: 140px;
  background: #fff5fa;
  border: 1px solid #f3b7cf;
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}
.spt-stat-number {
  font-size: 2em;
  font-weight: 800;
  color: #d63384;
  line-height: 1.1;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-stat-desc {
  font-size: 0.82em;
  color: #555;
  margin-top: 6px;
  display: block;
  font-family: Arial, sans-serif;
}

/* ── Health Tips List ── */
.spt-pro-tips {
  background: #f4efff;
  border: 1px solid #d9c4ff;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 1.8em 0;
}
.spt-pro-tips-title {
  font-weight: 700;
  font-size: 0.95em;
  color: #5b21b6;
  margin-bottom: 14px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-pro-tips ul {
  margin: 0;
  padding-left: 1.4em;
}
.spt-pro-tips li {
  margin-bottom: 10px;
  font-size: 0.97em;
  color: #1a1a1a;
  line-height: 1.8;
}

/* ── Comparison Box (Benefits vs Drawbacks) ── */
.spt-compare {
  display: flex;
  gap: 16px;
  margin: 1.8em 0;
  flex-wrap: wrap;
}
.spt-compare-col {
  flex: 1;
  min-width: 200px;
  border-radius: 10px;
  padding: 18px 20px;
}
.spt-compare-col.good {
  background: #fff1f7;
  border: 1px solid #f0a7c6;
}
.spt-compare-col.bad {
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
.spt-compare-title {
  font-weight: 700;
  font-size: 0.88em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-compare-col.good .spt-compare-title { color: #9d174d; }
.spt-compare-col.bad  .spt-compare-title { color: #991b1b; }
.spt-compare-col ul {
  margin: 0;
  padding-left: 1.2em;
}
.spt-compare-col li {
  font-size: 0.95em;
  margin-bottom: 8px;
  color: #1a1a1a;
  line-height: 1.7;
}

/* ── Checklist ── */
.spt-checklist {
  background: #fff7fb;
  border: 1px solid #f3b7cf;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-checklist-title {
  font-weight: 700;
  font-size: 0.97em;
  color: #111;
  margin-bottom: 14px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spt-checklist li {
  padding: 8px 0 8px 32px;
  position: relative;
  font-size: 0.97em;
  border-bottom: 1px solid #fde2ee;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.7;
}
.spt-checklist li:last-child { border-bottom: none; }
.spt-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: #d63384;
  font-weight: 700;
  font-size: 1.1em;
}

/* ── Step-by-Step Guide ── */
.spt-steps {
  margin: 1.8em 0;
}
.spt-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #fde7f1;
}
.spt-step:last-child { border-bottom: none; }
.spt-step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #d63384;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  font-family: Arial, sans-serif;
}
.spt-step-body { flex: 1; }
.spt-step-body strong {
  font-size: 1.02em;
  color: #111;
  display: block;
  margin-bottom: 6px;
}
.spt-step-body p {
  font-size: 0.97em;
  color: #444;
  margin: 0;
  line-height: 1.8;
}

/* ── Did You Know Box ── */
.spt-did-you-know {
  background: #fff7ed;
  border: 1px solid #ecd49a;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8em 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.spt-dyk-icon {
  font-size: 1.8em;
  flex-shrink: 0;
  line-height: 1;
}
.spt-dyk-body { flex: 1; }
.spt-dyk-label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a5c0a;
  display: block;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}
.spt-dyk-body p { margin: 0; font-size: 0.97em; color: #1a1a1a; line-height: 1.8; }

/* ── Cost / Coverage Estimate Box ── */
.spt-cost-box {
  background: #fff7fb;
  border: 1px solid #f3b7cf;
  border-left: 6px solid #d63384;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-cost-label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d63384;
  display: block;
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
}
.spt-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #d0e8e0;
  font-size: 0.97em;
}
.spt-cost-row:last-child { border-bottom: none; }
.spt-cost-row span:last-child { font-weight: 700; color: #111; }

/* ── FAQ Section ── */
.spt-faq { margin: 1.8em 0; }
.spt-faq-item {
  border: 1px solid #f6c6d9;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.spt-faq-q {
  background: #fff5fa;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 1em;
  color: #111;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
  line-height: 1.5;
}
.spt-faq-q::after {
  content: '+';
  font-size: 1.4em;
  color: #d63384;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .25s;
}
.spt-faq-item.open .spt-faq-q::after {
  transform: rotate(45deg);
}
.spt-faq-a {
  display: none;
  padding: 16px 20px;
  font-size: 0.97em;
  color: #333;
  border-top: 1px solid #f6c6d9;
  background: #fff;
  line-height: 1.85;
}
.spt-faq-a p { margin: 0; }
.spt-faq-item.open .spt-faq-a { display: block; }

/* ── Resources / Tools Needed ── */
.spt-tools-box {
  background: #fff7fb;
  border: 1px solid #f3b7cf;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-tools-title {
  font-weight: 700;
  font-size: 0.97em;
  color: #111;
  margin-bottom: 14px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.spt-tool-tag {
  background: #fff;
  border: 1px solid #f0a7c6;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.88em;
  color: #831843;
  white-space: nowrap;
  font-family: Arial, sans-serif;
}

/* ── Highlight / Key Stat Box ── */
.spt-highlight {
  background: linear-gradient(135deg, #fff1f7 0%, #fdf2f8 100%);
  border: 1px solid #f0a7c6;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 1.8em 0;
  text-align: center;
}
.spt-highlight-text {
  font-size: 1.2em;
  font-weight: 700;
  color: #d63384;
  line-height: 1.45;
  display: block;
  font-family: Georgia, serif;
}
.spt-highlight-sub {
  font-size: 0.87em;
  color: #555;
  margin-top: 8px;
  display: block;
  font-family: Arial, sans-serif;
}

/* ── Doctor Alert Box ── */
.spt-alert-box {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8em 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.spt-alert-icon { font-size: 2em; flex-shrink: 0; line-height: 1; }
.spt-alert-body { flex: 1; }
.spt-alert-label {
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #991b1b;
  display: block;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}
.spt-alert-body p { margin: 0; font-size: 0.97em; color: #1a1a1a; line-height: 1.8; }

/* ── Summary / Recap Box ── */
.spt-summary-box {
  background: #fdf2f8;
  border: 1px solid #f0abca;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 1.8em 0;
}
.spt-summary-label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9d174d;
  display: block;
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
}
.spt-summary-box ul {
  margin: 0;
  padding-left: 1.4em;
}
.spt-summary-box li {
  font-size: 0.97em;
  margin-bottom: 8px;
  color: #1a1a1a;
  line-height: 1.8;
}

/* ── Dos and Don'ts ── */
.spt-dos-donts {
  display: flex;
  gap: 16px;
  margin: 1.8em 0;
  flex-wrap: wrap;
}
.spt-dos, .spt-donts {
  flex: 1;
  min-width: 200px;
  border-radius: 10px;
  padding: 18px 20px;
}
.spt-dos {
  background: #fff1f7;
  border: 1px solid #f0a7c6;
}
.spt-donts {
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
.spt-dos-title, .spt-donts-title {
  font-weight: 700;
  font-size: 0.88em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-dos-title   { color: #9d174d; }
.spt-donts-title { color: #991b1b; }
.spt-dos ul, .spt-donts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spt-dos li, .spt-donts li {
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 0.95em;
  color: #1a1a1a;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  line-height: 1.7;
}
.spt-dos li:last-child,
.spt-donts li:last-child { border-bottom: none; }
.spt-dos li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #d63384;
  font-weight: 700;
}
.spt-donts li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: #dc2626;
  font-weight: 700;
}

/* ── Expert Quote / Testimonial ── */
.spt-expert-quote {
  background: #fff5fa;
  border: 1px solid #f5c4d8;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 1.8em 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.spt-expert-icon { font-size: 2em; flex-shrink: 0; line-height: 1; color: #be185d; }
.spt-expert-body { flex: 1; }
.spt-expert-text {
  font-size: 1em;
  font-style: italic;
  color: #333;
  line-height: 1.85;
  margin: 0 0 10px;
  display: block;
  font-family: Georgia, serif;
}
.spt-expert-name {
  font-size: 0.85em;
  font-weight: 700;
  color: #be185d;
  font-family: Arial, sans-serif;
}

/* ── Benefits Box ── */
.spt-benefits-box {
  background: #fff1f7;
  border: 1px solid #f0a7c6;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.spt-benefits-title {
  font-weight: 700;
  font-size: 0.97em;
  color: #9d174d;
  margin-bottom: 14px;
  display: block;
  font-family: Arial, sans-serif;
}
.spt-benefits-box ul {
  margin: 0;
  padding-left: 1.4em;
}
.spt-benefits-box li {
  font-size: 0.97em;
  margin-bottom: 10px;
  color: #1a1a1a;
  line-height: 1.8;
}

/* ── Image Placeholder ── */
.spt-img-placeholder {
  background: #fff5fa;
  border: 2px dashed #f3b7cf;
  border-radius: 10px;
  padding: 32px 20px;
  margin: 1.8em 0;
  text-align: center;
  color: #6b7280;
  font-size: 0.9em;
  font-family: Arial, sans-serif;
}
.spt-img-placeholder span {
  display: block;
  font-size: 2em;
  margin-bottom: 8px;
}


/* ================================================
   TABLES
================================================ */
.spt-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.6em 0 2em;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.95em;
  background: #fff;
  border: 1px solid #f3b7cf;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}
:where(.spt-blog-wrap,.npt-blog-wrap) thead { color: #fff; background: #d63384; }
:where(.spt-blog-wrap,.npt-blog-wrap) th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.02em;
}
:where(.spt-blog-wrap,.npt-blog-wrap) td {
  padding: 13px 16px;
  border-top: 1px solid #f6c6d9;
  vertical-align: top;
  color: #1a1a1a;
  line-height: 1.7;
}
:where(.spt-blog-wrap,.npt-blog-wrap) tbody tr:nth-child(even) td { background: #fff5fa; }
:where(.spt-blog-wrap,.npt-blog-wrap) tbody tr:hover td { background: #fce7f3; }


/* ================================================
   MOBILE
================================================ */
@media (max-width: 640px) {
  :where(.spt-blog-wrap,.npt-blog-wrap)      { padding: 0 14px; }
  :where(.spt-blog-wrap,.npt-blog-wrap) h2   { font-size: 1.3em; }
  :where(.spt-blog-wrap,.npt-blog-wrap) h3   { font-size: 1.1em; }

  .spt-quick-answer,
  .spt-tip-box,
  .spt-note-box,
  .spt-warning-box,
  .spt-takeaway-box,
  .spt-pro-tips,
  .spt-checklist,
  .spt-tools-box,
  .spt-cost-box,
  .spt-summary-box,
  .spt-benefits-box   { padding: 16px 16px; }

  .spt-compare,
  .spt-dos-donts      { flex-direction: column; }

  .spt-stat-strip     { gap: 10px; }
  .spt-stat-item      { min-width: 110px; }
  .spt-stat-number    { font-size: 1.6em; }

  .spt-did-you-know,
  .spt-alert-box,
  .spt-expert-quote   { flex-direction: column; gap: 10px; }

  .spt-highlight-text { font-size: 1em; }
}


/* ================================================
   NAILPRIME NAIL-SPECIFIC COMPONENT BLOCK
   Use these inside .npt-blog-wrap for the 10,000-post nail plan:
   nail ideas, color guides, seasonal nails, salon questions,
   product reviews, nail care routines, nail problems, and tutorials.
================================================ */
:where(.spt-blog-wrap,.npt-blog-wrap) {
  --npt-pink: var(--spt-accent, #d63384);
  --npt-pink-soft: #fff1f7;
  --npt-blush: #fce7f3;
  --npt-purple: var(--spt-tip, #7c3aed);
  --npt-plum: #831843;
  --npt-gold: var(--spt-note, #f59e0b);
  --npt-red: var(--spt-warning, #dc2626);
  --npt-border: #f6c6d9;
  --npt-text-soft: #5f5260;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.spt-nail-hero {
  background: linear-gradient(135deg, #fff1f7 0%, #fff 52%, #f5f0ff 100%);
  border: 1px solid var(--npt-border);
  border-left: 6px solid var(--npt-pink);
  border-radius: 18px;
  padding: 26px 28px;
  margin: 0 0 2em;
  box-shadow: 0 14px 34px rgba(214, 51, 132, .08);
}
.spt-nail-hero h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin: .25em 0 .45em;
  font-family: Georgia, serif;
  color: #3b2634;
}
.spt-nail-hero p { color: #5f5260; margin: 0; }
.spt-nail-kicker,
.spt-salon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--npt-pink);
  font-size: .76em;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}
.spt-nail-pill {
  display: inline-block;
  background: var(--npt-pink);
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .76em;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

.spt-nail-idea-grid,
.spt-nail-shape-grid,
.spt-palette-grid,
.spt-finish-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 1.8em 0;
}
.spt-nail-card,
.spt-shape-card,
.spt-color-swatch-card,
.spt-finish-chip,
.spt-nail-product-card,
.spt-salon-qa-card {
  background: #fff;
  border: 1px solid var(--npt-border);
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 8px 24px rgba(131, 24, 67, .06);
}
.spt-nail-card-title,
.spt-shape-card span,
.spt-palette-title,
.spt-link-cluster-title {
  display: block;
  color: var(--npt-pink);
  font-weight: 800;
  font-size: .95em;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}
.spt-nail-card p,
.spt-shape-card p,
.spt-color-swatch-card small,
.spt-finish-chip span,
.spt-salon-qa-card p,
.spt-nail-product-card p { color: var(--npt-text-soft); margin: 0; line-height: 1.7; }

.spt-nail-palette {
  background: linear-gradient(135deg, #fff7fb, #ffffff);
  border: 1px solid var(--npt-border);
  border-radius: 16px;
  padding: 20px;
  margin: 1.8em 0;
}
.spt-color-swatch-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 12px;
  align-items: center;
}
.spt-color-swatch-card strong { display: block; color: #251421; font-size: .95em; }
.spt-color-swatch-card small { display: block; grid-column: 2; font-size: .82em; }
.spt-color-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--nail-color, #f8b4c8);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.08);
  grid-row: span 2;
}

.spt-salon-qa-card {
  background: linear-gradient(135deg, #fff5fa, #fff);
  border-left: 6px solid var(--npt-pink);
  margin: 1.8em 0;
}
.spt-salon-question {
  font-size: 1.12em;
  font-weight: 800;
  color: var(--npt-pink);
  margin: 8px 0 10px !important;
  line-height: 1.45;
}

.spt-nail-routine {
  background: #fff;
  border: 1px solid var(--npt-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 1.8em 0;
}
.spt-routine-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #fde2ee;
}
.spt-routine-row:last-child { border-bottom: none; }
.spt-routine-row span {
  color: var(--npt-pink);
  font-weight: 800;
  font-family: Arial, sans-serif;
}
.spt-routine-row p { margin: 0; color: var(--npt-text-soft); }

.spt-nail-problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.8em 0;
}
.spt-nail-problem > div {
  border-radius: 14px;
  padding: 18px;
}
.spt-nail-problem > div:first-child { background: #fff1f2; border: 1px solid #fecdd3; }
.spt-nail-problem > div:last-child { background: #fff5fa; border: 1px solid var(--npt-border); }
.spt-problem-label,
.spt-fix-label {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78em;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}
.spt-problem-label { color: var(--npt-red); }
.spt-fix-label { color: var(--npt-pink); }
.spt-nail-problem p { margin: 0; color: #3f3540; }

.spt-nail-product-card {
  border-left: 6px solid var(--npt-pink);
  margin: 1.8em 0;
}
.spt-nail-product-card h3 { margin-top: .4em; }
.spt-nail-product-price {
  display: inline-block;
  color: var(--npt-pink);
  font-weight: 800;
  margin-top: 12px;
  font-family: Arial, sans-serif;
}

.spt-nail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.4em 0 1.8em;
}
.spt-nail-tag {
  border: 1px solid var(--npt-border);
  background: #fff5fa;
  color: var(--npt-pink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .86em;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

.spt-finish-chip strong {
  display: inline-block;
  background: var(--npt-pink);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 9px;
  font-size: .8em;
  font-family: Arial, sans-serif;
}
.spt-finish-chip span { display: block; }

.spt-nail-link-cluster {
  background: #fff5fa;
  border: 1px solid var(--npt-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 1.8em 0;
}
.spt-nail-link-cluster a {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #fde2ee;
  font-weight: 700;
  text-decoration: none;
}
.spt-nail-link-cluster a:hover { text-decoration: underline; }

.spt-nail-map {
  background: #fff;
  border: 1px solid var(--npt-border);
  border-radius: 16px;
  padding: 20px;
  margin: 1.8em 0;
}
.spt-nail-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.spt-nail-map-card {
  position: relative;
  padding: 14px 14px 14px 20px;
  background: #fff7fb;
  border-radius: 12px;
  overflow: hidden;
}
.spt-nail-map-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--npt-pink);
}
.spt-nail-map-card strong { display: block; color: #251421; margin-bottom: 4px; }
.spt-nail-map-card span { color: var(--npt-text-soft); font-size: .9em; }

@media (max-width: 760px) {
  .spt-nail-idea-grid,
  .spt-nail-shape-grid,
  .spt-palette-grid,
  .spt-finish-grid,
  .spt-nail-map-grid { grid-template-columns: 1fr; }
  .spt-nail-problem { grid-template-columns: 1fr; }
  .spt-routine-row { grid-template-columns: 1fr; gap: 4px; }
  .spt-color-swatch-card { grid-template-columns: 36px 1fr; }
  .spt-color-dot { width: 34px; height: 34px; }
}


/* ============================================================
   NailPrime v1.2 fixes: image cards + flat problem/fix markup
   These rules are intentionally strong because some themes/plugins
   override grid, p, image, and label styles.
============================================================ */

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-article-image {
  display: block !important;
  margin: 24px 0 32px !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-frame {
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #f7cfe0 !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-shadow: 0 12px 32px rgba(214, 51, 132, 0.10) !important;
  overflow: hidden !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-article-image img,
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-frame img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-caption {
  display: block !important;
  max-width: 760px !important;
  margin: 10px auto 0 !important;
  padding: 0 8px !important;
  color: #8a536c !important;
  font-size: 0.92em !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-source {
  display: block !important;
  margin: 6px auto 0 !important;
  color: #9c7a89 !important;
  font-size: 0.78em !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Supports both correct nested markup and AI-generated flat markup:
   Nested: <div class="spt-nail-problem"><div><span...>Problem</span><p>...</p></div>...</div>
   Flat:   <div class="spt-nail-problem"><span...>Problem</span><p>...</p><span...>Fix</span><p>...</p></div>
*/
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
  display: block !important;
  width: 100% !important;
  margin: 24px 0 !important;
  padding: 18px !important;
  background: linear-gradient(135deg, #fff7fb 0%, #ffffff 100%) !important;
  border: 1px solid #f7cfe0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(214, 51, 132, 0.08) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 15px 16px !important;
  border-radius: 14px !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:first-child {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:last-child {
  margin-bottom: 0 !important;
  background: #fff5fa !important;
  border: 1px solid #f7cfe0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-problem-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 0 8px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: Arial, sans-serif !important;
  font-size: 0.76em !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label {
  color: #dc2626 !important;
  background: #ffe4e6 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  color: #be185d !important;
  background: #fce7f3 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-problem-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  color: #3f3540 !important;
  line-height: 1.75 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-problem-label + p {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p {
  margin-bottom: 0 !important;
  background: #fff5fa !important;
  border: 1px solid #f7cfe0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div p {
  margin: 0 !important;
  color: #3f3540 !important;
  line-height: 1.75 !important;
}

@media (max-width: 640px) {
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-frame {
    padding: 7px !important;
    border-radius: 15px !important;
  }
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-article-image img,
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-frame img {
    border-radius: 10px !important;
  }
}


/* ===========================================
   NailPrime v1.3 Problem/Fix Block Polish
   Cleaner layout for flat AI markup and nested markup.
   Removes the empty rounded bar issue caused by blank paragraphs.
=========================================== */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
  display: block !important;
  width: 100% !important;
  margin: 28px 0 !important;
  padding: 22px 24px !important;
  background: #fffafd !important;
  border: 1px solid #f4c2d5 !important;
  border-left: 5px solid #d63384 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(214, 51, 132, 0.07) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem::before {
  display: none !important;
  content: none !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed #f1b8cf !important;
  border-radius: 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 0 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: Arial, sans-serif !important;
  font-size: 0.74em !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label {
  color: #dc2626 !important;
  background: #ffe4e6 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  color: #be185d !important;
  background: #fce7f3 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-problem-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div p {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed #f1b8cf !important;
  border-radius: 0 !important;
  color: #2f2430 !important;
  font-size: 1em !important;
  line-height: 1.8 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p:empty,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p:has(br:only-child),
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div p:empty,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div p:has(br:only-child) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:last-child p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 640px) {
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
    padding: 18px 18px !important;
    border-radius: 16px !important;
  }
}


/* ============================================================
   NailPrime v1.4 Full Component Stability Fix
   Purpose: make every generated info-article block look clean even
   when AI outputs simple/flat HTML. These rules intentionally load
   late and are scoped to NailPrime article wrappers only.
============================================================ */

:where(.spt-blog-wrap,.npt-blog-wrap) {
  --npt-bg: #fffafd;
  --npt-card: #ffffff;
  --npt-border-strong: #f2b9d0;
  --npt-border-soft: #f8d7e5;
  --npt-muted: #67515d;
  --npt-text: #241820;
  --npt-shadow: 0 12px 30px rgba(214, 51, 132, .075);
}

:where(.spt-blog-wrap,.npt-blog-wrap) p:empty,
:where(.spt-blog-wrap,.npt-blog-wrap) li:empty,
:where(.spt-blog-wrap,.npt-blog-wrap) span:empty {
  display: none !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-quick-answer,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-tip-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-note-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-warning-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-takeaway-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-checklist,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-tools-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-summary-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-benefits-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-salon-qa-card,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-palette,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-map,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-quick-answer p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-tip-box p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-note-box p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-warning-box p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-takeaway-box p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-summary-box p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-benefits-box p:last-child {
  margin-bottom: 0 !important;
}

/* Clean routine block: label on top, text below, no awkward two-column table look. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine {
  display: block !important;
  width: 100% !important;
  margin: 28px 0 !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #fff7fb 0%, #fff 100%) !important;
  border: 1px solid var(--npt-border-strong) !important;
  border-left: 5px solid var(--npt-pink, #d63384) !important;
  border-radius: 18px !important;
  box-shadow: var(--npt-shadow) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid var(--npt-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(214, 51, 132, .045) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div:last-child {
  margin-bottom: 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row strong,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row > span:first-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div > strong:first-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 9px !important;
  padding: 5px 11px !important;
  color: #be185d !important;
  background: #fce7f3 !important;
  border-radius: 999px !important;
  font-family: Arial, sans-serif !important;
  font-size: .78em !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  line-height: 1.25 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div p {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--npt-text) !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 1em !important;
  line-height: 1.8 !important;
}

/* Clean Problem/Fix block: consistent with routine but with red/pink labels. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
  display: block !important;
  width: 100% !important;
  margin: 28px 0 !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #fff7fb 0%, #fff 100%) !important;
  border: 1px solid var(--npt-border-strong) !important;
  border-left: 5px solid var(--npt-pink, #d63384) !important;
  border-radius: 18px !important;
  box-shadow: var(--npt-shadow) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid var(--npt-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(214, 51, 132, .045) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:last-child {
  margin-bottom: 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 0 9px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-family: Arial, sans-serif !important;
  font-size: .76em !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-problem-label {
  color: #dc2626 !important;
  background: #ffe4e6 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem .spt-fix-label {
  color: #be185d !important;
  background: #fce7f3 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-problem-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div p {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--npt-text) !important;
  font-size: 1em !important;
  line-height: 1.8 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > p:last-child,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > .spt-fix-label + p,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div:last-child p:last-child {
  margin-bottom: 0 !important;
}

/* Better cost/time rows. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--npt-border-soft) !important;
  color: var(--npt-text) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-row span:first-child {
  color: var(--npt-muted) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-row span:last-child {
  justify-self: end !important;
  color: #be185d !important;
  font-weight: 800 !important;
}

/* Stronger tools/chip layout. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-tools-grid,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-tool-tag,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-tag {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  background: #fff !important;
  border: 1px solid var(--npt-border-strong) !important;
  border-radius: 999px !important;
  color: #be185d !important;
  font-family: Arial, sans-serif !important;
  font-size: .88em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Better steps cards. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-steps {
  display: grid !important;
  gap: 12px !important;
  margin: 26px 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-step {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--npt-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(214, 51, 132, .045) !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-step-body p:last-child {
  margin-bottom: 0 !important;
}

/* Better grid cards. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-card,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-shape-card,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-color-swatch-card,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-finish-chip,
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-map-card {
  background: #fff !important;
  border: 1px solid var(--npt-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(214, 51, 132, .045) !important;
}

/* FAQ section fallback if heading wrapper exists. */
:where(.spt-blog-wrap,.npt-blog-wrap) .spt-faq-section {
  margin: 32px 0 0 !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .spt-faq-item {
  background: #fff !important;
  border: 1px solid var(--npt-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(214, 51, 132, .04) !important;
}

/* Image block. */
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-article-image {
  margin: 24px 0 32px !important;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-image-caption {
  margin-top: 10px !important;
  color: #8a536c !important;
  font-size: .92em !important;
  font-style: italic !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine,
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-routine-row,
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-routine > div,
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-nail-problem > div,
  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-step {
    padding: 14px !important;
  }

  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  :where(.spt-blog-wrap,.npt-blog-wrap) .spt-cost-row span:last-child {
    justify-self: start !important;
  }
}


/* ================================================
   NAILPRIME COMPARISON ARTICLE BLOCKS
   Use for product-free informational comparisons:
   gel vs acrylic, dip vs gel, almond vs oval,
   manicure vs pedicure, salon vs at-home, etc.
================================================ */

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-hero {
  margin: 1.8em 0 2.1em;
  padding: 22px 24px;
  background:
    radial-gradient(circle at top left, rgba(214, 51, 132, 0.14), transparent 34%),
    linear-gradient(135deg, #fff7fb 0%, #ffffff 62%, #fdf2ff 100%);
  border: 1px solid #f3b7cf;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(190, 24, 93, 0.08);
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1f7;
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .74em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-title {
  display: block;
  margin: 0 0 8px;
  font-size: 1.35em;
  line-height: 1.28;
  font-weight: 800;
  color: #111;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-hero p { margin: 0; color: #333; }

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 1.8em 0;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-card {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid #f3b7cf;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(190, 24, 93, .07);
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 9px;
  background: #fff1f7;
  border-radius: 999px;
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-card h3 {
  margin: 0 0 8px;
  color: #111;
  font-size: 1.12em;
  border: 0;
  padding: 0;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-card p { margin: 0; color: #444; line-height: 1.65; }
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-versus-badge {
  align-self: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d63384;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: .82em;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 10px 22px rgba(214, 51, 132, .25);
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-verdict-box,
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-final-verdict {
  margin: 1.9em 0;
  padding: 20px 22px;
  background: linear-gradient(135deg, #fff1f7 0%, #ffffff 100%);
  border: 1px solid #f3b7cf;
  border-left: 6px solid #d63384;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(190, 24, 93, .07);
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-verdict-label,
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-final-verdict-label {
  display: block;
  margin: 0 0 8px;
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-verdict-box p,
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-final-verdict p { margin: 0; }

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1.8em 0;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-card {
  background: #fff;
  border: 1px solid #f3b7cf;
  border-radius: 14px;
  padding: 17px 18px;
  box-shadow: 0 10px 26px rgba(190, 24, 93, .06);
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-label {
  display: block;
  margin: 0 0 7px;
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .76em;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-card strong {
  display: block;
  margin: 0 0 6px;
  color: #111;
  font-size: 1.03em;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-card p { margin: 0; color: #444; }

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-box {
  margin: 1.8em 0;
  background: #fff7fb;
  border: 1px solid #f3b7cf;
  border-radius: 16px;
  padding: 18px 20px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-label {
  display: block;
  margin: 0 0 12px;
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .8em;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid #fde2ee;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-row:first-of-type { border-top: 0; padding-top: 0; }
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-row strong { color: #111; }
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-row p { margin: 0; color: #444; }

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-row {
  margin: 1.5em 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #f6c6d9;
  border-radius: 14px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-label {
  color: #be185d;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-note {
  color: #666;
  font-family: Arial, sans-serif;
  font-size: .82em;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-bar {
  height: 10px;
  overflow: hidden;
  background: #fde7f1;
  border-radius: 999px;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-score-fill {
  display: block;
  height: 100%;
  width: 50%;
  background: #d63384;
  border-radius: inherit;
}

:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-note {
  margin: 1.6em 0;
  padding: 15px 18px;
  background: #fff;
  border: 1px dashed #e9a8c5;
  border-radius: 12px;
  color: #444;
  font-size: .96em;
}
:where(.spt-blog-wrap,.npt-blog-wrap) .npt-comparison-note p { margin: 0; }

@media (max-width: 760px) {
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-vs-cards {
    grid-template-columns: 1fr;
  }
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-versus-badge {
    width: 40px;
    height: 40px;
    transform: none;
  }
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-best-for-grid {
    grid-template-columns: 1fr;
  }
  :where(.spt-blog-wrap,.npt-blog-wrap) .npt-decision-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}