/* ============================================================
   STM Section Styles — Frontend CSS v2.0
   ============================================================ */

:root {
  --stm-p:   #6A1B9A;
  --stm-pd:  #4A148C;
  --stm-pl:  #CE93D8;
  --stm-pp:  #F3E5F5;
  --stm-pw:  #EDE7F6;
  --stm-or:  #F57C00;
  --stm-op:  #FFF3E0;
  --stm-tl:  #00897B;
  --stm-tp:  #E0F2F1;
  --stm-gr:  #2E7D32;
  --stm-gp:  #E8F5E9;
  --stm-rd:  #C62828;
  --stm-rp:  #FFEBEE;
  --stm-yl:  #F9A825;
  --stm-yp:  #FFFDE7;
  --stm-g2:  #EEEEEE;
  --stm-g9:  #212121;
  --stm-ra:  10px;
  --stm-sh:  0 2px 10px rgba(106,27,154,0.07);
}

/* ══════════════════════════════════════════════════
   1. WHO SHOULD VISIT — Gradient headers + auto circular
   ✓/✕ badges (generated by CSS — do NOT type emoji manually)
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-visit + figure.wp-block-table {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 44px -18px rgba(29,29,29,.2) !important;
  border: none !important;
  margin-bottom: 28px !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  border: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table thead tr {
  border: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table thead th {
  padding: 18px 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #FFFFFF !important;
  border: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table thead th:first-child {
  background: linear-gradient(135deg, #0EA855, #0A7A3D) !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table thead th:last-child {
  background: linear-gradient(135deg, #FB7A1E, #D8500A) !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td {
  background: #FFFFFF !important;
  padding: 17px 22px 17px 46px !important;
  vertical-align: top !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  position: relative !important;
  border-top: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:first-child {
  color: #0B7A3D !important;
  border-right: 1px solid #EEEEEE !important;
  border-left: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:last-child {
  color: #C4490B !important;
  border-right: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #EFEFEF !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}
/* auto-generated circular icon badge — replaces any manually typed emoji
   Aligned to sit level with the first line of text (top: 21px), not
   vertically centered on the whole cell — 21px accounts for the extra
   leading that line-height: 1.65 adds above the glyphs themselves. */
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td::before {
  content: "";
  position: absolute;
  left: 18px; top: 21px;
  width: 20px; height: 20px;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:first-child::before {
  content: "✓" !important;
  background: linear-gradient(135deg, #0EA855, #0A7A3D) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  text-align: center !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:last-child::before {
  content: "✕" !important;
  background: linear-gradient(135deg, #FB7A1E, #D8500A) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  text-align: center !important;
}

/* ── Single-column safety net ──
   When a row has ONLY ONE <td> (e.g. a "Who Should Visit?" list
   used alone, no Avoid column), that cell matches :first-child AND
   :last-child at once — without this override the later (orange)
   rule above would win by source order, even though a single-column
   list should always read as the positive/green "visit" treatment. */
.dynamic-entry-content .stm-visit + figure.wp-block-table thead th:only-child {
  background: linear-gradient(135deg, #0EA855, #0A7A3D) !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:only-child {
  color: #0B7A3D !important;
  border-right: none !important;
}
.dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:only-child::before {
  content: "✓" !important;
  background: linear-gradient(135deg, #0EA855, #0A7A3D) !important;
}


/* ══════════════════════════════════════════════════
   2. SUBSECTIONS — Purple intro + white card list
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-sub + p.wp-block-paragraph {
  background: var(--stm-pp) !important;
  border-left: 3px solid var(--stm-pl) !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px !important;
  color: var(--stm-pd) !important;
  margin-bottom: 12px !important;
}
.dynamic-entry-content .stm-sub + ul.wp-block-list,
.dynamic-entry-content .stm-sub + p + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.dynamic-entry-content .stm-sub + ul.wp-block-list > li,
.dynamic-entry-content .stm-sub + p + ul.wp-block-list > li {
  background: white !important;
  border: 1px solid var(--stm-g2) !important;
  border-left: 4px solid var(--stm-p) !important;
  border-radius: var(--stm-ra) !important;
  padding: 11px 14px !important;
  list-style: none !important;
  box-shadow: var(--stm-sh) !important;
}
.dynamic-entry-content .stm-sub + ul.wp-block-list > li::before,
.dynamic-entry-content .stm-sub + p + ul.wp-block-list > li::before { display: none !important; }

/* ══════════════════════════════════════════════════
   3. HIGHLIGHTS — 2-col white grid with hover
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-highlights + ul.wp-block-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  counter-reset: highlights-counter !important;
}
.dynamic-entry-content .stm-highlights + ul.wp-block-list > li {
  background: white !important;
  border: 1.5px solid var(--stm-g2) !important;
  border-left: 4px solid var(--stm-p) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  box-shadow: var(--stm-sh) !important;
  transition: border-left-color 0.2s, background 0.2s !important;
  position: relative !important;
  counter-increment: highlights-counter !important;
}
.dynamic-entry-content .stm-highlights + ul.wp-block-list > li::before {
  content: counter(highlights-counter) !important;
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--stm-p) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}
.dynamic-entry-content .stm-highlights + ul.wp-block-list > li:hover {
  border-left-color: var(--stm-pd) !important;
  background: #FAF5FF !important;
}

/* ══════════════════════════════════════════════════
   4. BUYER TIPS — Yellow 💡 stacked cards
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-tips + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.dynamic-entry-content .stm-tips + ul.wp-block-list > li {
  background: var(--stm-yp) !important;
  border: 1px solid rgba(249,168,37,0.25) !important;
  border-left: 4px solid var(--stm-yl) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 44px !important;
  list-style: none !important;
  position: relative !important;
  box-shadow: var(--stm-sh) !important;
}
.dynamic-entry-content .stm-tips + ul.wp-block-list > li::before {
  content: "💡" !important;
  position: absolute !important; left: 12px !important; top: 12px !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════════════
   5. IMPORTANT THINGS — Teal stacked cards
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-important + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.dynamic-entry-content .stm-important + ul.wp-block-list > li {
  background: var(--stm-tp) !important;
  border: 1px solid rgba(0,137,123,0.2) !important;
  border-left: 4px solid var(--stm-tl) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  box-shadow: var(--stm-sh) !important;
  position: relative !important;
}
/* auto-generated checkmark badge — replaces any manually typed emoji.
   Green gradient, matching the "How to Avoid It" badge style. */
.dynamic-entry-content .stm-important + ul.wp-block-list > li::before {
  content: "✓" !important;
  display: flex !important;
  position: absolute !important;
  left: 12px !important;
  top: 13px !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(135deg, #22C55E, #0E9448) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════
   6. WHAT NOT TO EXPECT — Red 2-col cards
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-avoid + ul.wp-block-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}
.dynamic-entry-content .stm-avoid + ul.wp-block-list > li {
  background: var(--stm-rp) !important;
  border: 1px solid rgba(198,40,40,0.15) !important;
  border-left: 4px solid var(--stm-rd) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  box-shadow: var(--stm-sh) !important;
  position: relative !important;
}
/* auto-generated cross badge — replaces any manually typed emoji.
   Red gradient, matching the "Sourcing Risk" badge style. */
.dynamic-entry-content .stm-avoid + ul.wp-block-list > li::before {
  content: "✕" !important;
  display: flex !important;
  position: absolute !important;
  left: 12px !important;
  top: 13px !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(135deg, #FF4D4D, #D32F2F) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
/* Table version — for "Mistakes to Avoid" style sections */
.dynamic-entry-content .stm-avoid + figure.wp-block-table {
  border-radius: var(--stm-ra) !important;
  overflow: hidden !important;
  box-shadow: var(--stm-sh) !important;
  border: none !important;
  margin-bottom: 28px !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table thead th:first-child {
  background: var(--stm-rd) !important;
  color: white !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table thead th:last-child {
  background: #F9A825 !important;
  color: white !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table tbody td:first-child {
  background: var(--stm-rp) !important;
  color: #7F0000 !important;
  padding: 16px 18px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #FFCDD2 !important;
  border-right: 1px solid var(--stm-g2) !important;
  border-top: none !important;
  border-left: none !important;
  vertical-align: top !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table tbody td:last-child {
  background: var(--stm-yp) !important;
  color: #5D3A00 !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #FFF9C4 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: top !important;
}
.dynamic-entry-content .stm-avoid + figure.wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════
   7. MARKET FACILITIES / AMENITIES
   Indigo numbered circles — 2-col grid
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-facilities + ul.wp-block-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  counter-reset: facilities-counter !important;
}
.dynamic-entry-content .stm-facilities + ul.wp-block-list > li {
  background: white !important;
  border: 1.5px solid #C5CAE9 !important;
  border-left: 4px solid #3949AB !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  position: relative !important;
  box-shadow: var(--stm-sh) !important;
  counter-increment: facilities-counter !important;
  transition: background 0.2s !important;
}
.dynamic-entry-content .stm-facilities + ul.wp-block-list > li:hover {
  background: #E8EAF6 !important;
}
.dynamic-entry-content .stm-facilities + ul.wp-block-list > li::before {
  content: counter(facilities-counter) !important;
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
  background: #3949AB !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════
   8. FOOD & LOCAL EXPERIENCE
   Inspired by "Practical Buyer Tips" — warm numbered cards
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-food + p.wp-block-paragraph {
  background: #FFF8F0 !important;
  border-left: 3px solid var(--stm-or) !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px !important;
  color: #5D3A00 !important;
  margin-bottom: 12px !important;
}
.dynamic-entry-content .stm-food + ul.wp-block-list,
.dynamic-entry-content .stm-food + p + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  counter-reset: food-counter !important;
}
.dynamic-entry-content .stm-food + ul.wp-block-list > li,
.dynamic-entry-content .stm-food + p + ul.wp-block-list > li {
  background: #FFF8F0 !important;
  border: 1px solid rgba(245,124,0,0.15) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  position: relative !important;
  box-shadow: var(--stm-sh) !important;
  counter-increment: food-counter !important;
}
.dynamic-entry-content .stm-food + ul.wp-block-list > li::before,
.dynamic-entry-content .stm-food + p + ul.wp-block-list > li::before {
  content: counter(food-counter) !important;
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--stm-or) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════
   9. COMMON BUYING RISKS
   Cherry red / lime-emerald gradient cards — same shadow,
   radius, padding, and badge position as Who Should Visit,
   with a distinct color pairing and icon set (! / ✓).
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-risks + figure.wp-block-table,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 44px -18px rgba(29,29,29,.2) !important;
  border: none !important;
  margin-bottom: 28px !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table table,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  border: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table thead tr,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead tr {
  border: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table thead th,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead th {
  padding: 18px 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #FFFFFF !important;
  border: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table thead th:first-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead th:first-child {
  background: linear-gradient(135deg, #FF4D4D, #D32F2F) !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table thead th:last-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead th:last-child {
  background: linear-gradient(135deg, #22C55E, #0E9448) !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td {
  background: #FFFFFF !important;
  padding: 17px 22px 17px 46px !important;
  vertical-align: top !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  position: relative !important;
  border-top: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:first-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:first-child {
  color: #D32F2F !important;
  border-right: 1px solid #EEEEEE !important;
  border-left: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:last-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:last-child {
  color: #0E9448 !important;
  border-right: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody tr:not(:last-child) td,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #EFEFEF !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody tr:last-child td,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}
/* auto-generated circular icon badge — same size/position as stm-visit's,
   top: 21px so it lines up with the first line of text, not centered */
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td::before,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td::before {
  content: "";
  position: absolute;
  left: 18px; top: 21px;
  width: 20px; height: 20px;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:first-child::before,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:first-child::before {
  content: "!" !important;
  background: linear-gradient(135deg, #FF4D4D, #D32F2F) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  text-align: center !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:last-child::before,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:last-child::before {
  content: "✓" !important;
  background: linear-gradient(135deg, #22C55E, #0E9448) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  text-align: center !important;
}
/* single-column safety net — same :only-child cascade issue as stm-visit:
   an only-child cell matches :first-child AND :last-child at once, so
   without this override the later (green) rule would win by source
   order even on a single-column risk-only list. Default to red/! since
   :first-child (risk) is the natural reading for this section. */
.dynamic-entry-content .stm-risks + figure.wp-block-table thead th:only-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead th:only-child {
  background: linear-gradient(135deg, #FF4D4D, #D32F2F) !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:only-child,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:only-child {
  color: #D32F2F !important;
  border-right: none !important;
}
.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:only-child::before,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:only-child::before {
  content: "!" !important;
  background: linear-gradient(135deg, #FF4D4D, #D32F2F) !important;
}


/* ══════════════════════════════════════════════════
   10. CATCH-ALL DEFAULT — for custom Gemini headings
   Any unmatched heading's list gets neutral white cards
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-default + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.dynamic-entry-content .stm-default + ul.wp-block-list > li {
  background: white !important;
  border: 1px solid var(--stm-g2) !important;
  border-top: 3px solid var(--stm-pw) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px !important;
  list-style: none !important;
  box-shadow: var(--stm-sh) !important;
}
.dynamic-entry-content .stm-default + ul.wp-block-list > li::before { display: none !important; }
.dynamic-entry-content .stm-default + p.wp-block-paragraph {
  background: #FAFAFA !important;
  border-left: 3px solid var(--stm-g2) !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  border-radius: var(--stm-ra) !important;
  padding: 11px 14px !important;
  margin-bottom: 12px !important;
}

/* ══════════════════════════════════════════════════
   10. DIRECTION / HOW TO REACH — Purple gradient header,
   tinted landmark column, 2-column layout on all screens
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-direction + figure.wp-block-table,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E9E9E9 !important;
  box-shadow: 0 1px 2px rgba(29,29,29,.03), 0 10px 30px -14px rgba(142,44,229,.16) !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table table,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  border: none !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table thead tr,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead tr {
  border: none !important;
}

/* header: single continuous gradient across both columns */
.dynamic-entry-content .stm-direction + figure.wp-block-table thead,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead {
  background: linear-gradient(90deg, #6B21A8, #A831FD) !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table thead th,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 16px 22px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  border: none !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table thead th:first-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th:first-child {
  border-right: 1px solid rgba(255,255,255,.25) !important;
}

/* middle-column divider — only applies to true middle columns in
   3+ column tables. Fully additive: does not touch first-child or
   last-child rules, so existing 2-column tables are unaffected. */
.dynamic-entry-content .stm-direction + figure.wp-block-table thead th:not(:first-child):not(:last-child),
.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th:not(:first-child):not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.25) !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody td:not(:first-child):not(:last-child),
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td:not(:first-child):not(:last-child) {
  border-right: 1px solid #D8D8D8 !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:not(:last-child) td:not(:first-child):not(:last-child),
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:not(:last-child) td:not(:first-child):not(:last-child) {
  border-bottom: 1px solid #D8D8D8 !important;
}

/* body */
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody td,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td {
  padding: 16px 22px !important;
  vertical-align: middle !important;
  line-height: 1.6 !important;
  border: none !important;
}

/* landmark column — tinted background, medium-weight purple text, pin icon */
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody td:first-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td:first-child {
  font-weight: 600 !important;
  color: #6B21A8 !important;
  background: #F6EEFD !important;
  border-right: 1px solid #D9BFED !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:not(:last-child) td:first-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:not(:last-child) td:first-child {
  border-bottom: 1px solid #D9BFED !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody td:first-child::before,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td:first-child::before {
  content: "📍 " !important;
}

/* distance column — plain white, neutral gray text */
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody td:last-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td:last-child {
  background: #FFFFFF !important;
  color: #464646 !important;
  font-weight: 400 !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:not(:last-child) td:last-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:not(:last-child) td:last-child {
  border-bottom: 1px solid #D8D8D8 !important;
}

/* hover */
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:hover td:first-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:hover td:first-child {
  background: #F1E3FB !important;
}
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:hover td:last-child,
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:hover td:last-child {
  background: #F7F7F8 !important;
}
/* middle-column hover — matches the last (neutral) column's hover color.
   Only applies to true middle columns in 3+ column tables. */
.dynamic-entry-content .stm-direction + figure.wp-block-table tbody tr:hover td:not(:first-child):not(:last-child),
.dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody tr:hover td:not(:first-child):not(:last-child) {
  background: #F7F7F8 !important;
}

/* mobile — same 2-column layout, only padding tightened */
@media (max-width: 520px) {
  .dynamic-entry-content .stm-direction + figure.wp-block-table thead th,
  .dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th {
    padding: 14px 12px !important;
  }
  .dynamic-entry-content .stm-direction + figure.wp-block-table tbody td,
  .dynamic-entry-content .stm-direction + p + figure.wp-block-table tbody td {
    padding: 14px 12px !important;
  }
}
@media (max-width: 767px) {
  .dynamic-entry-content .stm-highlights + ul.wp-block-list,
  .dynamic-entry-content .stm-avoid + ul.wp-block-list,
  .dynamic-entry-content .stm-facilities + ul.wp-block-list,
  .dynamic-entry-content .stm-food + ul.wp-block-list,
  .dynamic-entry-content .stm-food + p + ul.wp-block-list,
  .dynamic-entry-content .stm-default + ul.wp-block-list {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table,
.dynamic-entry-content .stm-risks + p + figure.wp-block-table {
    overflow-x: auto !important;
    display: block !important;
  }
}

/* ── WHO SHOULD VISIT — mobile: two separate rounded cards ──
   Below 767px the side-by-side table (which was breaking mid-word
   at narrow widths) is re-stacked into two independently rounded
   cards — green "Visit" card, gap, orange "Avoid" card — using CSS
   grid + order on the existing table cells. No block-editor markup
   change. Padding/weight/spacing values are copied straight from the
   desktop rules above — nothing here changes text size. */
@media (max-width: 767px) {
  .dynamic-entry-content .stm-visit + figure.wp-block-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
    box-shadow: none !important;
    /* the desktop rule above sets overflow:hidden + a solid white
       background on this container — both need to come off here,
       or the two cards below still act like one shared box: the
       orange card's bottom shadow gets clipped by that hidden
       overflow, and the white background peeks out square behind
       the rounded card corners. */
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table table,
  .dynamic-entry-content .stm-visit + figure.wp-block-table thead,
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody,
  .dynamic-entry-content .stm-visit + figure.wp-block-table tr {
    display: contents !important;
  }
  /* card 1 — visit (green) */
  .dynamic-entry-content .stm-visit + figure.wp-block-table thead th:first-child {
    order: 1 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:first-child {
    order: 2 !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody tr:last-child td:first-child {
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
    border-bottom: none !important;
  }
  /* card 2 — avoid (orange), separated by a gap */
  .dynamic-entry-content .stm-visit + figure.wp-block-table thead th:last-child {
    order: 3 !important;
    border-radius: 18px 18px 0 0 !important;
    margin-top: 20px !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:last-child {
    order: 4 !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody tr:last-child td:last-child {
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
  }
  /* single-column safety net — same :only-child issue as the color
     rules above: an only-child cell matches :first-child AND :last-child
     at once, so without this override the :last-child rule (card 2,
     with its top margin) would win by source order on a single-column
     "Who Should Visit?" list. Force it back to a single clean card. */
  .dynamic-entry-content .stm-visit + figure.wp-block-table thead th:only-child {
    order: 1 !important;
    border-radius: 18px 18px 0 0 !important;
    margin-top: 0 !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody td:only-child {
    order: 2 !important;
  }
  .dynamic-entry-content .stm-visit + figure.wp-block-table tbody tr:last-child td:only-child {
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 12px 24px -16px rgba(29,29,29,.28) !important;
    border-bottom: none !important;
  }
}

/* ── COMMON BUYING RISKS — mobile + tablet: row-paired cards ──
   Unlike Visit/Avoid, this table's cells are full paragraphs, not
   short phrases — grouping all "risk" cells together and all "fix"
   cells below (like the Visit/Avoid mobile fix) would make the page
   scroll for a long time before reaching the first fix. Instead each
   row pairs with itself: risk cell, then its own fix cell directly
   below, one rounded card per pair. Cell order in the HTML is already
   risk-then-fix, so no CSS order/grid-reorder trick is needed here —
   just letting the cells stack in their natural document order.
   Breakpoint is wider (900px, not 767px) because tablet widths still
   aren't wide enough for two columns of paragraph-length text without
   the same cramped/word-break problem phones have. */
@media (max-width: 900px) {
  .dynamic-entry-content .stm-risks + figure.wp-block-table,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border: none !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table table,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table table {
    display: block !important;
    border: none !important;
  }
  /* header removed on mobile/tablet — the page's own heading plus the
     red/green + !/✓ badges already make it clear which cell is which,
     so repeating "Sourcing Risk / How to Avoid It" is redundant here */
  .dynamic-entry-content .stm-risks + figure.wp-block-table thead,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table thead {
    display: none !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody {
    display: block !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody tr,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody tr {
    display: block !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 20px -14px rgba(29,29,29,.22) !important;
    margin-bottom: 16px !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody tr:last-child,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody td,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 14px 13px 40px !important;
  }
  /* soft colored border per half instead of a plain grey outer border —
     each td gets its own matching corner radius so the border follows
     the card's curve instead of being clipped square by overflow:hidden */
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:first-child,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:first-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:first-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:first-child {
    background: #FFF3F2 !important;
    border: 1px solid rgba(211,47,47,0.18) !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:last-child,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:last-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:last-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:last-child {
    background: #F0FBF2 !important;
    border: 1px solid rgba(14,148,72,0.18) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
  }
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody td::before,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td::before {
    left: 12px !important;
    top: 13px !important;
    width: 18px !important;
    height: 18px !important;
  }
  /* same :only-child safety net as desktop — a single-column list's
     lone cell matches :first-child AND :last-child at once, so without
     this it would get the red badge/text from desktop's :only-child
     rule but the green tint background from the :last-child rule
     above. Force the tint to match. */
  .dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:only-child,
  .dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:only-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table tbody td:only-child,
  .dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table tbody td:only-child {
    background: #FFF3F2 !important;
    border: 1px solid rgba(211,47,47,0.18) !important;
    border-radius: 14px !important;
  }
}


/* ══════════════════════════════════════════════════
   11. BUYER INFORMATION BOX — Rose/Pink table
   Also supports p + figure (intro paragraph before table)
   ══════════════════════════════════════════════════ */
.dynamic-entry-content .stm-infobox + figure.wp-block-table,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table {
  border-radius: var(--stm-ra) !important;
  overflow: hidden !important;
  border: 1px solid #F8BBD0 !important;
  margin-bottom: 28px !important;
  box-shadow: var(--stm-sh) !important;
}
.dynamic-entry-content .stm-infobox + figure.wp-block-table table,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  table-layout: fixed !important;
}
.dynamic-entry-content .stm-infobox + figure.wp-block-table thead th,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table thead th {
  background: #880E4F !important;
  color: #F8BBD0 !important;
  padding: 14px 18px !important;
  text-align: left !important;
  border: none !important;
}
.dynamic-entry-content .stm-infobox + figure.wp-block-table tbody td:first-child,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table tbody td:first-child {
  background: #FCE4EC !important;
  color: #880E4F !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #F8BBD0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: top !important;
}
.dynamic-entry-content .stm-infobox + figure.wp-block-table tbody td,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table tbody td {
  background: white !important;
  color: #333 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #FCE4EC !important;
  border-left: 1px solid #FCE4EC !important;
  border-top: none !important;
  border-right: none !important;
  vertical-align: top !important;
}
.dynamic-entry-content .stm-infobox + figure.wp-block-table tbody tr:last-child td,
.dynamic-entry-content .stm-infobox + p + figure.wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}
@media (max-width: 767px) {
  .dynamic-entry-content .stm-infobox + figure.wp-block-table,
  .dynamic-entry-content .stm-infobox + p + figure.wp-block-table {
    overflow-x: auto !important;
    display: block !important;
  }
}

/* stm-infobox — bullet list version (orange numbered cards like food) */
.dynamic-entry-content .stm-infobox + ul.wp-block-list,
.dynamic-entry-content .stm-infobox + p + ul.wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  counter-reset: infobox-counter !important;
}
.dynamic-entry-content .stm-infobox + ul.wp-block-list > li,
.dynamic-entry-content .stm-infobox + p + ul.wp-block-list > li {
  background: #FFF8F0 !important;
  border: 1px solid rgba(245,124,0,0.15) !important;
  border-radius: var(--stm-ra) !important;
  padding: 12px 14px 12px 46px !important;
  list-style: none !important;
  position: relative !important;
  box-shadow: var(--stm-sh) !important;
  counter-increment: infobox-counter !important;
}
.dynamic-entry-content .stm-infobox + ul.wp-block-list > li::before,
.dynamic-entry-content .stm-infobox + p + ul.wp-block-list > li::before {
  content: counter(infobox-counter) !important;
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--stm-or) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* infobox mobile fix */
@media (max-width: 767px) {
  .dynamic-entry-content .stm-infobox + ul.wp-block-list,
  .dynamic-entry-content .stm-infobox + p + ul.wp-block-list {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ── Final override: kill the black line under gradient headers ──
   Previous border:none rules on table/thead tr weren't enough, which
   means a theme rule with equal specificity (and its own !important)
   is winning by load order. This block repeats the wrapper class for
   extra specificity AND sits last in the file, so it wins both ways
   regardless of where the theme's stylesheet loads relative to ours. */
.dynamic-entry-content.dynamic-entry-content .stm-visit + figure.wp-block-table table,
.dynamic-entry-content.dynamic-entry-content .stm-visit + figure.wp-block-table thead,
.dynamic-entry-content.dynamic-entry-content .stm-visit + figure.wp-block-table thead tr,
.dynamic-entry-content.dynamic-entry-content .stm-visit + figure.wp-block-table thead th,
.dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table table,
.dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table table,
.dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table thead,
.dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead,
.dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table thead tr,
.dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead tr,
.dynamic-entry-content.dynamic-entry-content .stm-risks + figure.wp-block-table thead th,
.dynamic-entry-content.dynamic-entry-content .stm-risks + p + figure.wp-block-table thead th,
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table table,
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table table,
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table thead,
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead,
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table thead tr,
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead tr,
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table thead th,
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* re-apply header column dividers — must come AFTER the reset above.
   Both blocks have equal specificity, so source order decides the
   winner; this one needs to be last to actually take effect. */
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table thead th:first-child,
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th:first-child,
.dynamic-entry-content.dynamic-entry-content .stm-direction + figure.wp-block-table thead th:not(:first-child):not(:last-child),
.dynamic-entry-content.dynamic-entry-content .stm-direction + p + figure.wp-block-table thead th:not(:first-child):not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.4) !important;
}