/* ===========================================
   San Fernando Guide — Article Style
   Version: 1.0.0
   Site: https://sanfernandoguide.com/
   Niche: Local Guide — San Fernando Valley, CA
   Scoped to .sfg-blog-wrap only
   Does NOT affect any other page or post
   =========================================== */

/* ── COLOR TOKENS ──
   --sfg-dark:       #1c2b1a   (deep valley green — canyon shadows)
   --sfg-accent:     #e07b2a   (California sunset orange)
   --sfg-gold:       #d4a017   (SoCal sunshine gold)
   --sfg-teal:       #2a7c6f   (LA River / palm oasis teal)
   --sfg-warn:       #c03a2b   (alert red)
   --sfg-bg:         #f9f7f2   (warm off-white — bleached stucco)
   --sfg-cream:      #fdf9f0   (lighter stucco)
   --sfg-text:       #1e2118   (near-black)
*/


/* ── BASE WRAPPER ── */
.sfg-blog-wrap {
  margin: 0 auto;
  padding: 0 18px;
  line-height: 1.85;
  color: #1e2118;
  box-sizing: border-box;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
}

.sfg-blog-wrap *,
.sfg-blog-wrap *::before,
.sfg-blog-wrap *::after {
  box-sizing: border-box;
}


/* ── TYPOGRAPHY ── */
.sfg-blog-wrap p {
  margin: 0 0 1.4em;
}

.sfg-blog-wrap h2 {
  font-size: 1.5em;
  font-weight: 800;
  margin: 2.4em 0 0.65em;
  color: #1c2b1a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-bottom: 3px solid #e07b2a;
  padding-bottom: 0.3em;
}

.sfg-blog-wrap h3 {
  font-size: 1.18em;
  font-weight: 700;
  margin: 1.8em 0 0.5em;
  color: #1c2b1a;
  line-height: 1.4;
}

.sfg-blog-wrap h4 {
  font-size: 1em;
  font-weight: 700;
  margin: 1.4em 0 0.4em;
  color: #1c2b1a;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.88em;
}

.sfg-blog-wrap ul,
.sfg-blog-wrap ol {
  margin: 0 0 1.4em 0;
  padding-left: 1.6em;
}

.sfg-blog-wrap li       { margin-bottom: 0.55em; }
.sfg-blog-wrap strong   { font-weight: 700; color: #1c2b1a; }
.sfg-blog-wrap em       { font-style: italic; color: #3d4f3a; }

.sfg-blog-wrap a {
  color: #1c2b1a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(224,123,42,0.45);
  transition: text-decoration-color .2s, color .2s;
}
.sfg-blog-wrap a:hover {
  color: #e07b2a;
  text-decoration-color: #e07b2a;
}

.sfg-blog-wrap section { margin-bottom: 0.4em; }

/* Blockquote */
.sfg-blog-wrap blockquote {
  margin: 1.8em 0;
  padding: 18px 24px;
  border-left: 4px solid #e07b2a;
  background: #fdf9f0;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #3d4f3a;
  font-size: 1.05em;
  line-height: 1.75;
}
.sfg-blog-wrap blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.8em;
  font-style: normal;
  color: #888;
  letter-spacing: 0.04em;
}


/* ============================================================
   AFFILIATE DISCLOSURE
============================================================ */
.sfg-affiliate-disclosure {
  background: #fffcf4;
  border-left: 4px solid #d4a017;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 0 2em;
  font-size: 0.82em;
  color: #6b5a20;
  line-height: 1.6;
}
.sfg-affiliate-label {
  display: block;
  font-weight: 700;
  font-size: 0.84em;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #d4a017;
  margin-bottom: 4px;
}


/* ============================================================
   CONTENT CALLOUT BOXES
============================================================ */

/* ── Quick Answer / TL;DR Box ── */
.sfg-quick-answer {
  background: #fdf6e6;
  border-left: 5px solid #e07b2a;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 2em;
}
.sfg-qa-label {
  font-weight: 700;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e07b2a;
  margin-bottom: 8px;
  display: block;
}
.sfg-quick-answer p { margin: 0; }

/* ── Local Pick Box (replaces Curator's Pick) ── */
.sfg-local-pick-box {
  background: #f1f8f4;
  border: 2px solid #2a7c6f;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.sfg-local-pick-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2a7c6f;
  margin-bottom: 8px;
}
.sfg-local-pick-box p { margin: 0; }

/* ── Insider Tip Box ── */
.sfg-tip-box {
  background: #f1f8f4;
  border-left: 5px solid #2a7c6f;
  border-radius: 6px;
  padding: 16px 22px;
  margin: 1.8em 0;
}
.sfg-tip-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2a7c6f;
  margin-bottom: 8px;
}
.sfg-tip-box p { margin: 0; }

/* ── Note Box ── */
.sfg-note-box {
  background: #f4f6ff;
  border-left: 5px solid #4a5fa0;
  border-radius: 6px;
  padding: 16px 22px;
  margin: 1.8em 0;
}
.sfg-note-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a5fa0;
  margin-bottom: 8px;
}
.sfg-note-box p { margin: 0; }

/* ── Warning / Heads Up Box ── */
.sfg-warning-box {
  background: #fdf2f0;
  border-left: 5px solid #c03a2b;
  border-radius: 6px;
  padding: 16px 22px;
  margin: 1.8em 0;
}
.sfg-warn-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c03a2b;
  margin-bottom: 8px;
}
.sfg-warning-box p { margin: 0; }

/* ── Takeaway Box ── */
.sfg-takeaway-box {
  background: #fdf6e6;
  border-left: 5px solid #1c2b1a;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 2.2em 0 1.8em;
}
.sfg-takeaway-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1c2b1a;
  margin-bottom: 8px;
}
.sfg-takeaway-box p { margin: 0; }

/* ── Seasonal / Event Box ── */
.sfg-event-box {
  background: #fff8ec;
  border: 2px solid #d4a017;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.8em 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sfg-event-icon { font-size: 1.8em; flex-shrink: 0; line-height: 1; }
.sfg-event-body { flex: 1; }
.sfg-event-label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a07510;
  display: block;
  margin-bottom: 6px;
}
.sfg-event-body p { margin: 0; font-size: 0.95em; color: #1e2118; }


/* ============================================================
   SHOPPING & AMAZON AFFILIATE COMPONENTS
============================================================ */

/* ── Shop This Box ── */
.sfg-shop-box {
  background: #fffcf4;
  border: 2px solid #d4a017;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 2em 0;
}
.sfg-shop-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d4a017;
  margin-bottom: 14px;
}
.sfg-shop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sfg-shop-item {
  flex: 1;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sfg-shop-item-name {
  font-size: 0.92em;
  font-weight: 700;
  color: #1c2b1a;
  line-height: 1.4;
}
.sfg-shop-item-desc {
  font-size: 0.85em;
  color: #555;
  line-height: 1.5;
}
.sfg-shop-item-price {
  font-size: 1.1em;
  font-weight: 800;
  color: #e07b2a;
}
.sfg-shop-btn {
  display: inline-block;
  margin-top: 4px;
  background: #e07b2a;
  color: #fff !important;
  font-size: 0.82em;
  font-weight: 700;
  font-style: normal;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  transition: background .2s;
  align-self: flex-start;
}
.sfg-shop-btn:hover {
  background: #1c2b1a !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ── Amazon Product Card (single item, prominent) ── */
.sfg-amazon-card {
  background: #fff;
  border: 1px solid #e8d8a0;
  border-radius: 10px;
  padding: 20px;
  margin: 1.8em 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(28,43,26,.07);
}
.sfg-amazon-img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 6px;
  background: #f9f7f2;
  border: 1px solid #eee;
}
.sfg-amazon-img-placeholder {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: #f0ede4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  border: 1px solid #ddd;
}
.sfg-amazon-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sfg-amazon-badge {
  display: inline-block;
  background: #e07b2a;
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 2px;
}
.sfg-amazon-title {
  font-size: 1em;
  font-weight: 700;
  color: #1c2b1a;
  line-height: 1.4;
}
.sfg-amazon-desc {
  font-size: 0.88em;
  color: #555;
  line-height: 1.55;
}
.sfg-amazon-price {
  font-size: 1.15em;
  font-weight: 800;
  color: #e07b2a;
}
.sfg-amazon-btn {
  display: inline-block;
  background: #e07b2a;
  color: #fff !important;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none !important;
  padding: 9px 18px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  transition: background .2s;
  align-self: flex-start;
}
.sfg-amazon-btn:hover {
  background: #1c2b1a !important;
  color: #fff !important;
}

/* ── Price / Budget Estimate ── */
.sfg-price-box {
  background: #fdf9f0;
  border: 1px solid #e8d8a0;
  border-left: 5px solid #1c2b1a;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 1.8em 0;
}
.sfg-price-label {
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1c2b1a;
  display: block;
  margin-bottom: 10px;
}
.sfg-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e8d8a0;
  font-size: 0.93em;
}
.sfg-price-row:last-child { border-bottom: none; }
.sfg-price-row span:first-child { color: #555; }
.sfg-price-row span:last-child { font-weight: 700; color: #1c2b1a; }


/* ============================================================
   STATS & DATA
============================================================ */

/* ── Stat Strip ── */
.sfg-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.8em 0;
}
.sfg-stat-item {
  flex: 1;
  min-width: 130px;
  background: #fdf9f0;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
}
.sfg-stat-number {
  font-size: 2em;
  font-weight: 800;
  color: #e07b2a;
  line-height: 1.1;
  display: block;
}
.sfg-stat-desc {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
  display: block;
}


/* ============================================================
   LOCATION & LOCAL GUIDE COMPONENTS
============================================================ */

/* ── Address / Hours Card ── */
.sfg-location-card {
  background: #f1f8f4;
  border: 1px solid #a0d4c0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.8em 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sfg-location-icon { font-size: 1.6em; flex-shrink: 0; line-height: 1.2; }
.sfg-location-body { flex: 1; }
.sfg-location-name {
  font-weight: 700;
  font-size: 1em;
  color: #1c2b1a;
  display: block;
  margin-bottom: 4px;
}
.sfg-location-body p { margin: 0; font-size: 0.9em; color: #3d4f3a; line-height: 1.7; }
.sfg-location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sfg-location-tag {
  background: #fff;
  border: 1px solid #a0d4c0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8em;
  color: #2a7c6f;
  font-weight: 600;
}

/* ── Neighborhood Box ── */
.sfg-neighborhood-box {
  background: #fff8ec;
  border-left: 5px solid #d4a017;
  border-radius: 6px;
  padding: 16px 22px;
  margin: 1.8em 0;
}
.sfg-neighborhood-label {
  display: block;
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a07510;
  margin-bottom: 8px;
}
.sfg-neighborhood-box p { margin: 0; }

/* ── Top Pick Card (local restaurants, shops, etc.) ── */
.sfg-top-pick {
  background: #fff;
  border: 1px solid #e8d8a0;
  border-radius: 10px;
  padding: 20px;
  margin: 1.8em 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(28,43,26,.08);
}
.sfg-top-pick-rank {
  display: inline-block;
  background: #e07b2a;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.sfg-top-pick-body { display: flex; flex-direction: column; gap: 5px; }
.sfg-top-pick-title {
  font-size: 1.08em;
  font-weight: 700;
  color: #1c2b1a;
}
.sfg-top-pick-desc {
  font-size: 0.93em;
  color: #555;
  line-height: 1.6;
}
.sfg-top-pick-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.88em;
  font-weight: 700;
  color: #e07b2a !important;
  text-decoration: none !important;
}
.sfg-top-pick-link:hover { color: #1c2b1a !important; }


/* ============================================================
   LISTS & STRUCTURED CONTENT
============================================================ */

/* ── Local Tips List ── */
.sfg-pro-tips {
  background: #f1f8f4;
  border: 1px solid #a0d4c0;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.sfg-pro-tips-title {
  font-weight: 700;
  font-size: 0.95em;
  color: #1e4a3a;
  margin-bottom: 12px;
  display: block;
}
.sfg-pro-tips ul { margin: 0; padding-left: 1.4em; }
.sfg-pro-tips li { margin-bottom: 8px; font-size: 0.95em; color: #1e2118; }

/* ── Checklist ── */
.sfg-checklist {
  background: #fdf9f0;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 16px 22px;
  margin: 1.8em 0;
}
.sfg-checklist-title {
  font-weight: 700;
  font-size: 0.95em;
  color: #1c2b1a;
  margin-bottom: 12px;
  display: block;
}
.sfg-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sfg-checklist li {
  padding: 7px 0 7px 28px;
  position: relative;
  font-size: 0.95em;
  border-bottom: 1px solid #ede8d0;
  color: #1e2118;
  margin: 0;
}
.sfg-checklist li:last-child { border-bottom: none; }
.sfg-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 7px;
  color: #2a7c6f;
  font-weight: 700;
}

/* ── Pros & Cons ── */
.sfg-compare {
  display: flex;
  gap: 14px;
  margin: 1.8em 0;
  flex-wrap: wrap;
}
.sfg-compare-col {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  padding: 16px 18px;
}
.sfg-compare-col.good { background: #f1f8f4; border: 1px solid #a0d4c0; }
.sfg-compare-col.bad  { background: #fdf2f0; border: 1px solid #e8b0a0; }
.sfg-compare-title {
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: block;
}
.sfg-compare-col.good .sfg-compare-title { color: #1e4a3a; }
.sfg-compare-col.bad  .sfg-compare-title { color: #7a2010; }
.sfg-compare-col ul { margin: 0; padding-left: 1.2em; }
.sfg-compare-col li { font-size: 0.92em; margin-bottom: 6px; color: #1e2118; }

/* ── Do's & Don'ts ── */
.sfg-dos-donts {
  display: flex;
  gap: 14px;
  margin: 1.8em 0;
  flex-wrap: wrap;
}
.sfg-dos, .sfg-donts {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  padding: 16px 18px;
}
.sfg-dos  { background: #f1f8f4; border: 1px solid #a0d4c0; }
.sfg-donts{ background: #fdf2f0; border: 1px solid #e8b0a0; }
.sfg-dos-title, .sfg-donts-title {
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: block;
}
.sfg-dos-title   { color: #1e4a3a; }
.sfg-donts-title { color: #7a2010; }
.sfg-dos ul, .sfg-donts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sfg-dos li, .sfg-donts li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.92em;
  color: #1e2118;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.sfg-dos li:last-child, .sfg-donts li:last-child { border-bottom: none; }
.sfg-dos li::before   { content: '✓'; position: absolute; left: 0; color: #2a7c6f; font-weight: 700; }
.sfg-donts li::before { content: '✗'; position: absolute; left: 0; color: #c03a2b; font-weight: 700; }

/* ── Step-by-Step ── */
.sfg-steps { margin: 1.8em 0; }
.sfg-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #ede8d0;
}
.sfg-step:last-child { border-bottom: none; }
.sfg-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #e07b2a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.sfg-step-body { flex: 1; }
.sfg-step-body strong { font-size: 1em; color: #1c2b1a; display: block; margin-bottom: 5px; }
.sfg-step-body p { font-size: 0.95em; color: #444; margin: 0; }


/* ============================================================
   HIGHLIGHTS & FACTS
============================================================ */

/* ── Key Highlight Banner ── */
.sfg-highlight {
  background: linear-gradient(135deg, #fdf6e6 0%, #f1f8f4 100%);
  border: 1px solid #d8d0b0;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 2em 0;
  text-align: center;
}
.sfg-highlight-text {
  font-size: 1.2em;
  font-weight: 700;
  color: #e07b2a;
  line-height: 1.5;
  display: block;
  font-style: italic;
}
.sfg-highlight-sub {
  font-size: 0.83em;
  color: #888;
  margin-top: 8px;
  display: block;
}

/* ── Did You Know Box ── */
.sfg-did-you-know {
  background: #fdf6e6;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.8em 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sfg-dyk-icon { font-size: 1.8em; flex-shrink: 0; line-height: 1; }
.sfg-dyk-body { flex: 1; }
.sfg-dyk-label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a07510;
  display: block;
  margin-bottom: 6px;
}
.sfg-dyk-body p { margin: 0; font-size: 0.95em; color: #1e2118; }


/* ============================================================
   SUMMARY & FAQ
============================================================ */

/* ── Summary / Recap Box ── */
.sfg-summary-box {
  background: #fdf9f0;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 2em 0;
}
.sfg-summary-label {
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1c2b1a;
  display: block;
  margin-bottom: 10px;
}
.sfg-summary-box ul { margin: 0; padding-left: 1.3em; }
.sfg-summary-box li { font-size: 0.95em; margin-bottom: 6px; color: #1e2118; }

/* ── FAQ Accordion ── */
.sfg-faq { margin: 1.8em 0; }
.sfg-faq-item {
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sfg-faq-q {
  background: #fdf9f0;
  padding: 15px 20px;
  font-weight: 700;
  font-size: 0.97em;
  color: #1c2b1a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  user-select: none;
  line-height: 1.4;
}
.sfg-faq-q::after {
  content: '+';
  font-size: 1.4em;
  color: #e07b2a;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform .25s;
  font-family: -apple-system, sans-serif;
}
.sfg-faq-item.open .sfg-faq-q::after { transform: rotate(45deg); }
.sfg-faq-a {
  display: none;
  padding: 15px 20px;
  font-size: 0.95em;
  color: #3a3a28;
  border-top: 1px solid #e8d8a0;
  background: #fff;
  line-height: 1.78;
}
.sfg-faq-a p { margin: 0; }
.sfg-faq-item.open .sfg-faq-a { display: block; }


/* ============================================================
   WHAT YOU'LL NEED / TOOLS
============================================================ */
.sfg-tools-box {
  background: #fdf9f0;
  border: 1px solid #e8d8a0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.8em 0;
}
.sfg-tools-title {
  font-weight: 700;
  font-size: 0.95em;
  color: #1c2b1a;
  margin-bottom: 12px;
  display: block;
}
.sfg-tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sfg-tool-tag {
  background: #fff;
  border: 1px solid #d4c8a0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.85em;
  color: #3a3010;
  white-space: nowrap;
}


/* ============================================================
   TABLES
============================================================ */
.sfg-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.6em 0 2em;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #e8d8a0;
}
.sfg-blog-wrap table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.93em;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.sfg-blog-wrap thead { background: #1c2b1a; color: #fff; }
.sfg-blog-wrap th {
  text-align: left;
  padding: 13px 15px;
  font-weight: 700;
  font-size: 0.88em;
  letter-spacing: 0.04em;
}
.sfg-blog-wrap td {
  padding: 11px 15px;
  border-top: 1px solid #ede8d0;
  vertical-align: top;
  color: #2a2a18;
}
.sfg-blog-wrap tbody tr:nth-child(even) td { background: #fdf9f0; }
.sfg-blog-wrap tbody tr:hover td { background: #fdf5e0; }


/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */
.sfg-img-placeholder {
  background: #f0ede4;
  border: 2px dashed #d4c8a0;
  border-radius: 8px;
  padding: 32px 20px;
  margin: 1.8em 0;
  text-align: center;
  color: #8a7a4a;
  font-size: 0.88em;
}
.sfg-img-placeholder span {
  display: block;
  font-size: 2em;
  margin-bottom: 8px;
}

/* ── Image Caption ── */
.sfg-caption {
  font-size: 0.82em;
  color: #777;
  text-align: center;
  margin-top: -1em;
  margin-bottom: 1.6em;
  font-style: italic;
}


/* ============================================================
   MOBILE RESPONSIVE
============================================================ */
@media (max-width: 640px) {
  .sfg-blog-wrap      { padding: 0 12px; font-size: 16px; }
  .sfg-blog-wrap h2   { font-size: 1.28em; }
  .sfg-blog-wrap h3   { font-size: 1.1em; }

  .sfg-quick-answer,
  .sfg-tip-box,
  .sfg-note-box,
  .sfg-warning-box,
  .sfg-takeaway-box,
  .sfg-local-pick-box,
  .sfg-pro-tips,
  .sfg-checklist,
  .sfg-tools-box,
  .sfg-price-box,
  .sfg-summary-box,
  .sfg-neighborhood-box { padding: 14px 16px; }

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

  .sfg-shop-grid        { flex-direction: column; }
  .sfg-shop-item        { min-width: unset; }

  .sfg-amazon-card      { flex-direction: column; }
  .sfg-amazon-img,
  .sfg-amazon-img-placeholder { width: 80px; height: 80px; }

  .sfg-stat-strip       { gap: 8px; }
  .sfg-stat-item        { min-width: 100px; }
  .sfg-stat-number      { font-size: 1.6em; }

  .sfg-did-you-know,
  .sfg-event-box,
  .sfg-location-card    { flex-direction: column; gap: 8px; }

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

  .sfg-faq-q            { font-size: 0.9em; padding: 13px 16px; }
  .sfg-faq-a            { padding: 13px 16px; }

  .sfg-step             { gap: 12px; }
}