/* ============================================================
   th_26 v0.4.45.1 — custom CSS
   ============================================================ */

:root {
  --sage:        #7b9468;
  --sage-bright: #9eb588;
  --sage-deep:   #5a7245;
  --gold:        #c89b3c;
  --rust:        #b8543d;

  --bg:          #fdfbf7;
  --bg-soft:     #f8f5ec;
  --bg-strong:   #efeadb;
  --surface:     #ffffff;
  --text:        #1d2a3a;
  --text-muted:  #4a5568;
  --text-subtle: #6b7280;
  --border:        rgba(29, 42, 58, 0.10);
  --border-strong: rgba(29, 42, 58, 0.18);

  --shadow-sm: 0 2px 6px rgba(29, 42, 58, 0.04);
  --shadow-md: 0 8px 24px rgba(29, 42, 58, 0.08);
  --shadow-lg: 0 20px 48px rgba(29, 42, 58, 0.12);
  --shadow-xl: 0 30px 80px rgba(29, 42, 58, 0.18);
  --shadow-header: 0 1px 3px rgba(29, 42, 58, 0.06), 0 4px 12px rgba(29, 42, 58, 0.04);
  --shadow-card-hover: 0 12px 32px rgba(29, 42, 58, 0.10);

  --accent:        var(--sage-deep);
  --accent-bright: var(--sage);

  --maxw:      1280px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --pad-side:  clamp(1.25rem, 4vw, 3rem);
  --t-fast:    .18s ease;
  --t-med:     .28s ease;

  --header-h:  84px;
}

html[data-theme="dark"] {
  --bg:          #0a1320;
  --bg-soft:     #1d2a3a;
  --bg-strong:   #2a3a4f;
  --surface:     #14202f;
  --text:        #fbf8f1;
  --text-muted:  rgba(251, 248, 241, 0.78);
  --text-subtle: rgba(251, 248, 241, 0.55);
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.45);

  --accent:        var(--sage-bright);
  --accent-bright: var(--sage);
}

* { box-sizing: border-box; }
html, body { margin: 0 !important; padding: 0 !important; }
html { scroll-behavior: smooth; transition: background-color var(--t-med), color var(--t-med); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-med), color var(--t-med);
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img, svg { display: block; max-width: 100%; height: auto; }

.th26-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  width: 100%;
}

/* ============================================================
   HEADER — FIXED (not sticky), ALWAYS opaque + above everything
   Sticky was scrolling out of view because its containing block
   (the outer wp-block-template-part wrapper) is only as tall as
   the header itself. Fixed positioning removes that constraint
   entirely and keeps the bar above all scroll content.
   ============================================================ */
.th26-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999 !important;
  background-color: var(--bg) !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-header);
  font-family: 'Manrope', sans-serif;
  height: var(--header-h);
  display: flex;
  align-items: center;
  margin: 0;
}

/* Spacer so non-home content doesn't hide behind the fixed header.
   The home page's hero is intentionally full-bleed and stays under
   the bar, so we skip that case. */
body:not(.home) main.wp-block-group {
  padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 2rem)) !important;
}

.th26-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.th26-logo { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; flex-shrink: 0; }

/* LOGO: bigger across header, footer, drawer */
.th26-logo-img {
  display: block;
  width: auto;
  height: 64px;
  max-width: 320px;
}

.th26-logo-img--light { display: block; }
.th26-logo-img--dark  { display: none; }
html[data-theme="dark"] .th26-logo-img--light { display: none; }
html[data-theme="dark"] .th26-logo-img--dark  { display: block; }

.th26-logo--footer .th26-logo-img { height: 72px; max-width: 360px; }
.th26-drawer__head .th26-logo-img { height: 52px; max-width: 260px; }

.th26-nav {
  display: none;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  margin: 0; padding: 0;
}

@media (min-width: 1024px) { .th26-nav { display: flex; } }

.th26-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast);
}

.th26-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-fast);
}

.th26-nav a:hover { color: var(--accent); }
.th26-nav a:hover::after { transform: scaleX(1); }

.th26-header__utility { display: flex; align-items: center; gap: 8px; }

.th26-iconbtn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text);
  border-radius: 50%; cursor: pointer; padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
}

.th26-iconbtn:hover { background: var(--bg-strong); }
.th26-iconbtn svg { width: 20px; height: 20px; }

.th26-iconbtn--hamburger { display: inline-flex; }
@media (min-width: 1024px) { .th26-iconbtn--hamburger { display: none; } }

.th26-iconbtn .icon-moon { display: inline-block; }
.th26-iconbtn .icon-sun  { display: none; }
html[data-theme="dark"] .th26-iconbtn .icon-moon { display: none; }
html[data-theme="dark"] .th26-iconbtn .icon-sun  { display: inline-block; }

/* Mobile drawer */
.th26-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,26,42,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
  z-index: 10010;
}

.th26-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 85%; max-width: 360px;
  background: var(--bg);
  z-index: 10020;
  transform: translateX(100%);
  transition: transform var(--t-med);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.th26-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad-side);
  border-bottom: 1px solid var(--border);
}

.th26-drawer__nav { list-style: none; padding: 24px var(--pad-side); margin: 0; flex: 1; overflow-y: auto; }
.th26-drawer__nav li { margin-bottom: 4px; }
.th26-drawer__nav a {
  display: block;
  padding: 14px 0;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
}
.th26-drawer__nav a:hover { color: var(--accent); }

body.th26-drawer-open .th26-drawer-backdrop { opacity: 1; visibility: visible; }
body.th26-drawer-open .th26-drawer { transform: translateX(0); }
body.th26-drawer-open { overflow: hidden; }

/* ============================================================
   HERO — editorial eyebrow (NO pill), strong contrast
   ============================================================ */
.th26-hero {
  position: relative;
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-soft);
  margin-top: 0;
}

.th26-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/hero-default.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.th26-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10,19,32,0.65) 0%, rgba(10,19,32,0.35) 40%, rgba(10,19,32,0.1) 70%),
    linear-gradient(180deg, rgba(10,19,32,0.45) 0%, rgba(10,19,32,0.05) 30%, rgba(10,19,32,0.7) 100%);
  z-index: 1;
}

.th26-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) var(--pad-side);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

/* EDITORIAL EYEBROW — no background, no border, line prefix.
   Clearly reads as a label, not a button. */
.th26-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  color: rgba(255, 248, 241, 0.92);
  padding: 0;
  margin-bottom: 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.th26-hero__tag::before {
  content: '';
  width: 36px;
  height: 1.5px;
  background: var(--sage-bright);
}

.th26-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fbf8f1;
  margin: 0 0 22px;
  max-width: 18ch;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.45),
    0 0 2px rgba(0, 0, 0, 0.5);
}

.th26-hero__title em { font-style: italic; color: var(--sage-bright); }

.th26-hero__dek {
  font-size: clamp(16px, 1.6vw, 18px);
  color: rgba(251, 248, 241, 0.95);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 52ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  font-weight: 500;
}

.th26-hero__meta {
  font-size: 13px;
  color: rgba(251, 248, 241, 0.85);
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.th26-hero__meta strong { color: var(--sage-bright); font-weight: 600; }

.th26-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.th26-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--t-fast);
  font-family: 'Manrope', sans-serif;
}

.th26-btn--primary {
  background: #fbf8f1 !important;
  color: #1d2a3a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.th26-btn--primary:hover {
  background: var(--sage-bright) !important;
  color: #1d2a3a !important;
  transform: translateY(-1px);
}

.th26-btn--glass {
  background: rgba(255,255,255,0.15);
  color: #fbf8f1;
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.th26-btn--glass:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.th26-section {
  padding: clamp(2rem, 4.5vw, 4rem) 0;
  background: var(--bg);
  transition: background var(--t-med);
}

.th26-section--alt { background: var(--bg-soft); }

.th26-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.th26-eyebrow::before,
.th26-eyebrow::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}

.th26-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
}

.th26-section-dek {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-muted);
  margin: 0 auto 36px;
  max-width: 60ch;
  line-height: 1.55;
}

.th26-section__head { text-align: center; margin-bottom: 36px; }

/* ============================================================
   TOPIC TILES
   ============================================================ */
.th26-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
}

@media (min-width: 640px)  { .th26-topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .th26-topics { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .th26-topics { grid-template-columns: repeat(6, 1fr); } }

.th26-topic {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 3/4;
  background: var(--bg-strong);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med);
}

.th26-topic:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.th26-topic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-med);
}

.th26-topic:hover img { transform: scale(1.05); }

.th26-topic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
  z-index: 1;
}

.th26-topic__num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.th26-topic__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 18px 18px;
  z-index: 2;
  color: #fbf8f1;
}

.th26-topic__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.th26-topic__title em { font-style: italic; color: var(--sage-bright); }

/* ============================================================
   POST GRIDS — equal-height cards, meta aligned to bottom
   This is what fixes "first tile higher" AND "meta unaligned":
   - align-items: stretch makes every card the same row height
   - margin-bottom: auto on the title absorbs the spare space,
     pushing the date + author down to a consistent baseline
   ============================================================ */
.th26-postgrid,
.th26-postgrid .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}

.th26-postgrid .wp-block-post-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  align-items: stretch;
}

@media (min-width: 640px)  { .th26-postgrid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .th26-postgrid .wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }

.th26-postgrid .wp-block-post-template > li {
  list-style: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transition: transform var(--t-med);
}

.th26-postgrid .wp-block-post-template > li:hover { transform: translateY(-3px); }

.th26-postgrid .wp-block-post-featured-image {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: var(--bg-strong);
  width: 100%;
  display: block;
  flex: none;
}

.th26-postgrid .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.th26-postgrid .wp-block-post-featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0;
}

.th26-postgrid .wp-block-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 auto !important;   /* auto bottom margin pushes meta down */
  padding: 0 !important;
  color: var(--text) !important;
  flex: none;
}

.th26-postgrid .wp-block-post-title a { color: var(--text); transition: color var(--t-fast); }
.th26-postgrid .wp-block-post-title a:hover { color: var(--accent); }

.th26-postgrid .wp-block-post-date {
  font-size: 11.5px;
  color: var(--text-subtle);
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  flex: none;
}

/* AUTHOR ROW: bigger avatar, italic "Written By", more attractive */
.th26-postgrid .wp-block-post-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  font-size: 13.5px;
  color: var(--text-muted);
  flex: none;
}

.th26-postgrid .wp-block-post-author__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: block;
}

.th26-postgrid .wp-block-post-author__avatar img,
.th26-postgrid .wp-block-post-author__avatar .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

.th26-postgrid .wp-block-post-author__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}

.th26-postgrid .wp-block-post-author__byline {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  color: var(--text-subtle) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.th26-postgrid .wp-block-post-author__name {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}

.th26-postgrid .wp-block-post-author__name a {
  color: var(--text);
  transition: color var(--t-fast);
}

.th26-postgrid .wp-block-post-author__name a:hover {
  color: var(--accent);
}

/* ============================================================
   SHOP SECTION — larger featured image, white sidebar tiles
   ============================================================ */
.th26-shop {
  padding: clamp(2rem, 4.5vw, 4rem) 0;
  background: var(--bg-soft);
}

.th26-shop__head {
  max-width: var(--maxw);
  margin: 0 auto 36px;
  padding: 0 var(--pad-side) 24px;
  /* v0.4.26 — removed border-bottom: was a faint line below
     "Shop our tested gear" that visually broke the section */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.th26-shop__head-text { flex: 1; min-width: 260px; }
.th26-shop__head-text .th26-eyebrow::after { display: none; }
.th26-shop__head-text .th26-section-title { text-align: left; margin: 0; }
.th26-shop__head-text .th26-eyebrow { margin-bottom: 12px; }

.th26-shop__head-link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 4px;
  transition: all var(--t-fast);
}

.th26-shop__head-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.th26-shop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
}

@media (min-width: 900px) {
  .th26-shop__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* Featured product card — LARGER image */
.th26-shop-featured,
.th26-shop-featured .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}

.th26-shop-featured .wp-block-post-template > li {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 100%;
  margin: 0;
}

@media (min-width: 700px) {
  .th26-shop-featured .wp-block-post-template > li { grid-template-columns: 1.15fr 1fr; }
}

.th26-shop-featured .wp-block-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-strong);
  min-height: 420px;
  height: 100%;
}

.th26-shop-featured .wp-block-post-featured-image,
.th26-shop-featured .wp-block-post-featured-image a {
  display: block;
  height: 100%;
  width: 100%;
}

.th26-shop-featured .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-height: 420px;
}

.th26-shop-featured__body {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  height: 100%;
}

.th26-shop-featured__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--sage);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 4px;
}

.th26-shop-featured .wp-block-post-terms {
  font-size: 11.5px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
}

.th26-shop-featured .wp-block-post-terms a { color: var(--text-subtle); }

.th26-shop-featured .wp-block-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
}

.th26-shop-featured .wp-block-post-title a { color: var(--text); }
.th26-shop-featured .wp-block-post-title a em { font-style: italic; color: var(--accent); }
.th26-shop-featured .wp-block-post-title a:hover { color: var(--accent); }

.th26-shop-featured .wp-block-post-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 6px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.th26-shop-featured .wp-block-post-excerpt p { margin: 0 !important; padding: 0 !important; }

.th26-shop-featured .wp-block-post-excerpt__more-text {
  margin: auto 0 0 !important;
  padding: 32px 0 0 !important;
}

.th26-shop-featured .wp-block-post-excerpt__more-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--text);
  color: var(--bg) !important;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--t-fast), transform var(--t-fast);
}

.th26-shop-featured .wp-block-post-excerpt__more-link:hover {
  background: var(--accent);
  color: var(--bg) !important;  /* explicit — otherwise global a:hover wins and we get sage-on-sage */
  transform: translateY(-1px);
}

/* SIDEBAR "Other gear we love" — WHITE cards, defined elevation */
.th26-shop-side {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.th26-shop-side__title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 18px;
  padding: 0 4px;
}

.th26-shop-side__list,
.th26-shop-side__list .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.th26-shop-side__list .wp-block-post-template > li {
  list-style: none;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.th26-shop-side__list .wp-block-post-template > li:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.th26-shop-side__list .wp-block-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-strong);
  flex-shrink: 0;
}

.th26-shop-side__list .wp-block-post-featured-image a,
.th26-shop-side__list .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.th26-shop-side__list .wp-block-post-terms {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: block;
}

.th26-shop-side__list .wp-block-post-terms a {
  color: var(--accent);
  text-decoration: none;
}

.th26-shop-side__list .wp-block-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  letter-spacing: -0.005em;
}

.th26-shop-side__list .wp-block-post-title a { color: var(--text); }
.th26-shop-side__list .wp-block-post-title a:hover { color: var(--accent); }

.th26-shop-side__browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 15px 24px;
  background: var(--text);
  color: var(--bg);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-sm);
}

.th26-shop-side__browse:hover {
  background: var(--accent);
  color: var(--bg) !important;  /* explicit — global a:hover would otherwise override to var(--accent) = sage-on-sage */
  transform: translateY(-1px);
}

/* ============================================================
   SEARCH MODAL
   ============================================================ */
.th26-search-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,19,32,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10030;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 8vh, 80px) 20px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}

body.th26-search-open .th26-search-modal { opacity: 1; visibility: visible; }

.th26-search-modal__box {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 32px);
  transform: translateY(-12px);
  transition: transform var(--t-med);
}

body.th26-search-open .th26-search-modal__box { transform: translateY(0); }

.th26-search-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.th26-search-modal__head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

.th26-search-modal__head h2 em { font-style: italic; color: var(--accent); }

.th26-search-modal__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast);
}

.th26-search-modal__close:hover { background: var(--bg-strong); color: var(--text); }

.th26-search-modal__input-wrap {
  position: relative;
  margin-bottom: 24px;
}

.th26-search-modal__input-wrap svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-subtle);
  pointer-events: none;
}

.th26-search-modal__input {
  width: 100%;
  padding: 18px 20px 18px 54px;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  outline: none;
  transition: border-color var(--t-fast);
}

.th26-search-modal__input::placeholder { color: var(--text-subtle); }
.th26-search-modal__input:focus { border-color: var(--accent); }

.th26-search-modal__section { margin-bottom: 20px; }

.th26-search-modal__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}

.th26-search-modal__label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0;
}

.th26-search-modal__find-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}

.th26-search-modal__find-more:hover { color: var(--text); }

.th26-search-modal__faves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.th26-search-modal__fave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
  font-weight: 500;
}

.th26-search-modal__fave-row:hover {
  background: var(--bg-strong);
  transform: translateX(2px);
  color: var(--accent);
}

.th26-search-modal__fave-row .arrow {
  font-size: 16px;
  color: var(--text-subtle);
  transition: transform var(--t-fast), color var(--t-fast);
}

.th26-search-modal__fave-row:hover .arrow {
  transform: translateX(4px);
  color: var(--accent);
}

.th26-search-modal__recents {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.th26-search-modal__recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast);
}

.th26-search-modal__recent-row:last-child { border-bottom: 0; }
.th26-search-modal__recent-row:hover { color: var(--accent); }
.th26-search-modal__recent-row .arrow { font-size: 16px; color: var(--text-subtle); transition: transform var(--t-fast); }
.th26-search-modal__recent-row:hover .arrow { transform: translateX(4px); color: var(--accent); }

.th26-search-modal__empty {
  font-size: 13px;
  color: var(--text-subtle);
  font-style: italic;
  padding: 8px 0;
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.th26-footer {
  background: var(--bg-soft);
  color: var(--text);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border);
  font-family: 'Manrope', sans-serif;
}

.th26-footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .th26-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .th26-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.th26-footer__brand .th26-logo { margin-bottom: 14px; }

.th26-footer__tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 32ch;
}

.th26-footer__col h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.th26-footer__col ul { list-style: none; padding: 0; margin: 0; }
.th26-footer__col li { margin: 0 0 10px; }
.th26-footer__col a  { font-size: 14px; color: var(--text); transition: color var(--t-fast); }
.th26-footer__col a:hover { color: var(--accent); }

.th26-footer__legal {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 24px var(--pad-side) 0;
  border-top: 1px solid var(--border);
  /* v0.4.53.4 — switched from flex row + space-between (which put
     © on the left and reader-supported on the right) to flex column
     so the three legal items (copyright, reader-supported, Amazon
     affiliate disclaimer) stack vertically and stay centered on
     desktop. Mobile reverts to left alignment via the @media block
     below. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-subtle);
  line-height: 1.55;
}

/* v0.4.53.4 — Amazon affiliate disclaimer paragraph. Slightly smaller
   font than the lines above it to stay visually secondary, but a
   touch more line-height for readability across 3–4 wrapped lines.
   max-width: 64ch keeps a comfortable measure on wide desktops so
   the paragraph doesn't stretch across the whole 1280px footer
   width — wraps to about 4 lines at typical desktop widths. */
.th26-footer__legal-disclaimer {
  margin: 14px auto 0;
  max-width: 64ch;
  font-size: 12px;
  color: var(--text-subtle);
  line-height: 1.65;
}

@media (max-width: 700px) {
  /* v0.4.53.4 — Mobile: per design reference, left-align all legal
     items so they read as natural paragraphs in the single-column
     mobile flow. Removes the disclaimer's max-width so it wraps to
     the column width naturally. */
  .th26-footer__legal {
    align-items: stretch;
    text-align: left;
  }
  .th26-footer__legal-disclaimer {
    max-width: none;
    margin: 10px 0 0;
  }
}

/* ============================================================
   ARCHIVE / CATEGORY / SINGLE
   ============================================================ */
body:not(.home) .wp-block-query-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 12px !important;
  color: var(--text) !important;
}

body:not(.home) .wp-block-term-description p {
  font-size: clamp(15px, 1.5vw, 16px);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 60ch;
}

body:not(.home) .wp-block-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px !important;
}

body:not(.home) .wp-block-post-date {
  font-size: 13px !important;
  color: var(--text-subtle) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.wp-block-post-content h1 { font-size: clamp(28px, 3.4vw, 38px); }
.wp-block-post-content h2 { font-size: clamp(24px, 2.8vw, 30px); margin-top: 2em; }
.wp-block-post-content h3 { font-size: clamp(20px, 2.2vw, 24px); margin-top: 1.6em; }
.wp-block-post-content p  { font-size: 17px; line-height: 1.7; }

.wp-block-post-content a,
.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(94,118,71,0.4);
  text-underline-offset: 3px;
}

.wp-block-post-content a:hover,
.entry-content a:hover {
  color: var(--text);
  text-decoration-color: var(--text);
}

.admin-bar .th26-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .th26-header { top: 46px; } }

.wp-block-post-content,
.entry-content { font-family: 'Manrope', sans-serif; }

/* ============================================================
   v0.4.8 ADDITIONS
   ============================================================ */

/* --- Topic tile post counts + bolder, bigger title fonts ---- */
.th26-topic__title {
  /* override default — visibly larger and bolder */
  font-size: clamp(28px, 3.4vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.th26-topic__title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--sage-bright);
}

.th26-topic__count {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}

/* --- Drop shadow on tile images so they read more clearly --- */
.th26-topic {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.th26-topic:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

/* Stronger gradient overlay so text + count badge always read */
.th26-topic::after {
  background: linear-gradient(
    180deg,
    rgba(10, 19, 32, 0.05) 0%,
    rgba(10, 19, 32, 0.25) 40%,
    rgba(10, 19, 32, 0.78) 100%
  ) !important;
}

/* --- Hero text drop shadows --- */
.th26-hero__title {
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
.th26-hero__dek,
.th26-hero__meta,
.th26-hero__byline {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.th26-hero__tag {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* --- Hero CAROUSEL --- */
.th26-hero--carousel {
  position: relative;
  min-height: clamp(560px, 80vh, 780px);
  overflow: hidden;
  isolation: isolate;
}

.th26-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.th26-hero__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-deep, #0a1320);
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.th26-hero__bg-img.is-active {
  opacity: 1;
}

.th26-hero--carousel .th26-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 19, 32, 0.78) 0%,
    rgba(10, 19, 32, 0.55) 50%,
    rgba(10, 19, 32, 0.72) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.th26-hero--carousel .th26-hero__inner {
  position: relative;
  z-index: 2;
  color: #fbf8f1;
}

.th26-hero__slides {
  position: relative;
  min-height: 280px;
}

.th26-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.th26-hero__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.th26-hero__slide .th26-hero__title a {
  color: inherit;
  text-decoration: none;
}

.th26-hero__slide .th26-hero__title a:hover {
  color: var(--sage-bright);
}

/* Author byline + avatar in hero */
.th26-hero__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  font-size: 14.5px;
  font-family: 'Manrope', sans-serif;
  color: rgba(255, 255, 255, 0.95);
}

.th26-hero__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.th26-hero__byline strong {
  font-weight: 700;
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}

/* Carousel pagination dots */
.th26-hero__dots {
  position: absolute;
  bottom: clamp(20px, 4vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.th26-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 200ms, transform 200ms;
}

.th26-hero__dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
}

.th26-hero__dot.is-active {
  background: rgba(255, 255, 255, 1);
  width: 24px;
  border-radius: 5px;
}

/* --- Remove focus outline on click, keep for keyboard nav --- */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus, a:focus-visible,
button:focus, button:focus-visible {
  text-decoration: none;
}

/* --- Shop featured: simple block wrapper, slide handles the grid --- */
.th26-shop-featured {
  display: block;
  width: 100%;
  height: 100%;
}

.th26-shop-featured .wp-block-post-template {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.th26-shop-featured .wp-block-post-template > li {
  flex: 1 1 auto;
  /* keep height: 100% removed; flex:1 controls it now */
}

/* Even more breathing room above the Read full review button */
.th26-shop-featured .wp-block-post-excerpt__more-text {
  padding: 56px 0 0 !important;
}


/* ============================================================
   v0.4.9 CORRECTIONS
   ============================================================ */

.th26-topic__body { display: block; }
.th26-topic__title { display: block; }
.th26-topic__count { display: inline-block; }

.th26-topic__title {
  font-size: clamp(20px, 2.1vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  font-family: 'Playfair Display', serif;
}

.th26-topic__count {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.10em;
  padding: 3px 9px;
}

.th26-topic .th26-topic__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

.th26-hero__title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.th26-hero__dek {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important;
}
.th26-hero__byline,
.th26-hero__meta {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important;
}
.th26-hero__tag {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

.th26-shop-featured .wp-block-post-excerpt__more-text {
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

/* ============================================================
   v0.4.10 CORRECTIONS
   ============================================================ */

/* --- HERO: switch slide stacking from absolute to CSS Grid -----
   The v0.4.9 version positioned each slide with position:absolute
   inside a min-height:280px parent. Long titles overflowed the
   parent and bled into the area where the CTA buttons render,
   causing visible overlap. Grid stacking lets the slides container
   size to the tallest slide's natural content. */
.th26-hero__slides {
  position: static !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-areas: "stack" !important;
}

.th26-hero__slide {
  position: static !important;
  inset: auto !important;
  grid-area: stack !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.th26-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* CTA needs breathing room from the byline now that slides flow. */
.th26-hero--carousel .th26-hero__actions {
  margin-top: 28px;
}

/* --- "Where to start" — header now lives inside the same section
   as the tiles, so the duplicate padding is gone. Tighten the gap
   between the eyebrow/title and the tile grid. */
.th26-section .th26-section__head {
  margin-bottom: clamp(20px, 2.2vw, 28px) !important;
}

/* --- Read Full Review margin — bump to 36px with body-level
   specificity so cached or inherited rules can't beat it. */
body .th26-shop-featured .wp-block-post-excerpt__more-text {
  margin: 36px 0 0 !important;
  padding: 0 !important;
}
body .th26-shop-featured__excerpt .wp-block-post-excerpt__more-text {
  margin: 36px 0 0 !important;
  padding: 0 !important;
}

/* --- SHOP FEATURED CAROUSEL --- */
.th26-shop-featured--carousel {
  position: relative;
}

.th26-shop-featured--carousel .th26-shop-featured__slides {
  display: grid;
  grid-template-areas: "stack";
}

.th26-shop-featured--carousel .th26-shop-featured__slide {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

@media (min-width: 700px) {
  .th26-shop-featured--carousel .th26-shop-featured__slide {
    grid-template-columns: 1.15fr 1fr;
  }
}

.th26-shop-featured--carousel .th26-shop-featured__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Non-carousel single-pick mode — same look as carousel, no rotation */
.th26-shop-featured .th26-shop-featured__slide {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 100%;
}

@media (min-width: 760px) {
  .th26-shop-featured .th26-shop-featured__slide,
  .th26-shop-featured--carousel .th26-shop-featured__slide {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* Shop pick image — same container behavior as the prior post-featured-image */
.th26-shop-featured__media {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bg-strong);
  min-height: 420px;
  overflow: hidden;
}

.th26-shop-featured__media .th26-shop-featured__img,
.th26-shop-featured__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  min-height: 420px;
}

/* Shop pick title (replaces the previous wp:post-title block) */
.th26-shop-featured__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 4px 0 8px;
  color: var(--text);
}
.th26-shop-featured__title a {
  color: inherit;
  text-decoration: none;
}
.th26-shop-featured__title a:hover { color: var(--accent); }

/* Shop pick category breadcrumb (replaces the previous wp:post-terms block) */
.th26-shop-featured__terms {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 2px 0 0;
  padding: 0;
}
.th26-shop-featured__terms a {
  color: inherit;
  text-decoration: none;
}
.th26-shop-featured__terms a:hover { color: var(--text); }

/* Shop carousel pagination dots */
.th26-shop-featured__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.th26-shop-featured__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 19, 32, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 200ms, width 200ms;
}

.th26-shop-featured__dot:hover { background: rgba(10, 19, 32, 0.5); }
.th26-shop-featured__dot.is-active {
  background: var(--text);
  width: 20px;
  border-radius: 4px;
}

/* ============================================================
   v0.4.11 — Raptive sidebar layout for single posts
   ============================================================ */

/* Single post outer container: full-width within the page,
   the inner grid handles the max-width and column behavior. */
.th26-single-main {
  max-width: 100%;
}

/* Default (under 1100px): everything stacks. Main column constrained
   to 728px reading width (Raptive minimum). Sidebar appears below the article. */
.th26-single-grid {
  display: block;
  max-width: 728px;
  margin: 0 auto;
}

.th26-single-content {
  max-width: 100%;
  min-width: 0;
}

/* Tablet/Desktop with room for the sidebar — Raptive requires 728px
   minimum content width + 300px sidebar. We allocate 728px content
   + 320px sidebar (300px + 20px ad-margin) inside an 1180px container. */
@media (min-width: 1100px) {
  .th26-single-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(40px, 4vw, 64px);
    max-width: 1180px;
    align-items: flex-start;
  }
  .th26-single-content {
    /* Override the inner constrained 728px so the article column
       can stretch a bit wider when there's a sidebar. Inner blocks
       (post-content) still constrain at 728px for readability. */
    max-width: none;
  }
}

/* Sidebar container */
.th26-sidebar {
  margin-top: clamp(3rem, 6vw, 4rem);
  font-family: 'Manrope', sans-serif;
}

@media (min-width: 1100px) {
  .th26-sidebar {
    margin-top: 0;
    width: 300px;
  }
}

/* Sticky behavior: keeps the ad slot in view as the user scrolls
   the article. Accounts for the fixed site header height. */
.th26-sidebar__sticky {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1100px) {
  .th26-sidebar__sticky {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    /* No max-height + overflow combo here — that caused a visible
       scrollbar to the right of "The latest" + "Related Posts" on
       desktop. The natural sticky behavior is enough: as the user
       scrolls down, the sidebar travels with the page until its
       parent container ends. */
  }
}

/* Ad slot — styled placeholder Raptive's script replaces. The fixed
   width/min-height tells Raptive's auto-injection this is a sidebar
   ad position. */
.th26-sidebar__ad-slot {
  width: 100%;
  max-width: 300px;
  min-height: 250px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.th26-sidebar__ad-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.6;
}

/* Hide the placeholder label and dashed border once Raptive injects
   real ad markup. Their script adds iframes/scripts as children of
   the ad slot — we detect any child element and clean up the slot. */
.th26-sidebar__ad-slot:has(iframe),
.th26-sidebar__ad-slot:has(ins),
.th26-sidebar__ad-slot:has(div) {
  background: transparent;
  border: 0;
  min-height: 0;
}

.th26-sidebar__ad-slot:has(iframe) .th26-sidebar__ad-label,
.th26-sidebar__ad-slot:has(ins) .th26-sidebar__ad-label,
.th26-sidebar__ad-slot:has(div) .th26-sidebar__ad-label {
  display: none;
}

/* Recent posts widget */
.th26-sidebar__widget {
  background: var(--surface);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.th26-sidebar__widget-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: var(--text);
}

.th26-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.th26-sidebar__item {
  margin: 0;
  padding: 0;
}

.th26-sidebar__item a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.th26-sidebar__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-strong);
}

.th26-sidebar__thumb--placeholder {
  display: block;
}

.th26-sidebar__item-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.th26-sidebar__item a:hover .th26-sidebar__item-title {
  color: var(--accent);
}

/* ============================================================
   v0.4.12 — hero/shop tightening + mobile refinements
   ============================================================ */

/* (1) Hero eyebrow → title: bring "This week's cover story" closer
   to the headline. v0.4.10 had 22px which created a noticeable gap. */
.th26-hero__tag {
  margin-bottom: 10px !important;
}

/* (2a) Shop featured card — tighter internal spacing.
   Was padding: clamp(24px, 3vw, 36px) + gap: 12px on the body.
   Drops the dead white space between badge, title, and excerpt. */
.th26-shop-featured__body {
  padding: clamp(18px, 2.4vw, 28px) !important;
  gap: 8px !important;
}

/* (2b) Read-full-review CTA moved up so it doesn't float in dead space */
body .th26-shop-featured .wp-block-post-excerpt__more-text,
body .th26-shop-featured__excerpt .wp-block-post-excerpt__more-text {
  margin: 24px 0 0 !important;
}

/* (2c) "Shop all travel gear" button — close the gap to the last tile.
   v0.4.11 had `flex: 1` on the list, which stretched it to fill the
   column height (matching the featured card), pushing the browse
   button to the very bottom. Drop the stretch and pin the button
   directly below the last list item with a small natural gap. */
.th26-shop-side__list,
.th26-shop-side__list .wp-block-post-template {
  flex: 0 0 auto !important;
}

.th26-shop-side__browse {
  margin-top: 12px !important;
}

/* (3) Mobile header — force position:fixed with maximum specificity.
   Belt-and-suspenders against iOS Safari and any TT3 parent rules. */
@media (max-width: 900px) {
  html body header .th26-header,
  html body .th26-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: translate3d(0, 0, 0);  /* own stacking context */
  }
}

/* (4) Mobile "Where to start" — switch to 2 columns at small sizes
   with a 1:1 aspect ratio (effectively half the size of v0.4.11's
   full-width 3/4 tiles) and bigger title text relative to the tile. */
@media (max-width: 639px) {
  .th26-topics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .th26-topic {
    aspect-ratio: 1/1 !important;
  }
  .th26-topic__title {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }
  .th26-topic__num {
    font-size: 14px !important;
    top: 8px !important;
    left: 10px !important;
  }
  .th26-topic__count {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.08em !important;
  }
  .th26-topic__body {
    padding: 10px 12px 12px !important;
  }
}

/* (5) Mobile Editor's-pick pill — tighter card padding and a
   smaller, more proportional badge so it stops floating in
   excessive white space at narrow viewports. */
@media (max-width: 700px) {
  .th26-shop-featured__body {
    padding: 14px !important;
    gap: 6px !important;
  }
  .th26-shop-featured__badge {
    padding: 4px 10px !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
}

/* ============================================================
   v0.4.15 — baked-into-theme fixes (do not rely on Customizer)
   ============================================================
   Every important fix from v0.4.12-v0.4.14 is restated here at
   the END of the stylesheet so it ALWAYS wins the cascade, even
   if LiteSpeed serves a cached page without the Customizer block.
   ============================================================ */


/* ------------------------------------------------------------
   HERO — eyebrow tight to title (now inside each slide)
   ------------------------------------------------------------ */

/* The slide is a flex column so eyebrow + title + dek + byline
   stack tightly with no gap surprises. */
.th26-hero__slide.is-active,
.th26-hero__slide {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.th26-hero__slide .th26-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background: transparent;
  border: none;
  align-self: flex-start;
}

.th26-hero__slide .th26-hero__title {
  margin: 0 0 16px 0 !important;
}

.th26-hero__slide .th26-hero__dek {
  margin: 0 0 20px 0 !important;
}

.th26-hero__slide .th26-hero__byline {
  margin: 0 !important;
}

/* The inner block centers vertically in the hero (it was pinning
   to the top before, making the eyebrow look "near the top bar"). */
html body .th26-hero--carousel .th26-hero__inner,
html body .th26-hero .th26-hero__inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: clamp(560px, 78vh, 760px) !important;
}

/* Hero author links — color-only hover, no pill/ring */
.th26-hero__author-link {
  color: inherit;
  text-decoration: none;
}
.th26-hero__author-link:hover,
.th26-hero__author-link:focus-visible {
  color: var(--sage-bright, #b8d59b);
  text-decoration: none;
  background: transparent;
  box-shadow: none;
}
.th26-hero__byline .th26-hero__author-link:first-child {
  display: inline-flex;
  border-radius: 999px;
}
.th26-hero__byline .th26-hero__author-link:first-child:hover {
  box-shadow: none;
}


/* ------------------------------------------------------------
   SHOP SECTION — 2-col layout, card fills left column with
   image left + body right on desktop
   ------------------------------------------------------------ */

@media (min-width: 900px) {
  html body .th26-shop__grid {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 30px !important;
    align-items: stretch !important;
  }
}

html body .th26-shop-featured {
  display: block !important;
  height: 100%;
}

html body .th26-shop-featured .th26-shop-featured__slide,
html body .th26-shop-featured--carousel .th26-shop-featured__slide {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 100%;
  width: 100%;
}

@media (min-width: 760px) {
  html body .th26-shop-featured .th26-shop-featured__slide,
  html body .th26-shop-featured--carousel .th26-shop-featured__slide {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  }
}

html body .th26-shop-featured__media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: var(--bg-strong);
  overflow: hidden;
}

html body .th26-shop-featured__media img,
html body .th26-shop-featured__media .th26-shop-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

html body .th26-shop-featured__body {
  padding: clamp(20px, 2.4vw, 30px) !important;
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  background: var(--surface);
  height: 100%;
}

html body .th26-shop-featured .wp-block-post-excerpt__more-text,
html body .th26-shop-featured__excerpt .wp-block-post-excerpt__more-text {
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

html body .th26-shop .th26-shop-side__list,
html body .th26-shop .th26-shop-side__list .wp-block-post-template {
  flex: 0 0 auto !important;
}
html body .th26-shop .th26-shop-side__browse {
  margin-top: 12px !important;
}


/* ------------------------------------------------------------
   SINGLE ARTICLE — Raptive-compliant 2-column layout
   ------------------------------------------------------------ */

html body .th26-single-grid {
  display: block;
  max-width: 728px;
  margin: 0 auto;
}
html body .th26-single-content {
  max-width: 100%;
  min-width: 0;
}
html body .th26-sidebar {
  margin-top: 40px;
  width: 100%;
}

@media (min-width: 1180px) {
  html body .th26-single-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 48px !important;
    max-width: 1140px !important;
    align-items: flex-start !important;
  }
  html body .th26-single-content {
    max-width: none;
    min-width: 0;
  }
  html body .th26-sidebar {
    width: 300px;
    margin-top: 0;
  }
}


/* ------------------------------------------------------------
   MOBILE DRAWER — full-overlay, single-line items with icons
   ------------------------------------------------------------ */

/* Drawer panel itself — max z-index, slides in from the right,
   covers ~90vw on mobile (full width up to a 380px cap on larger). */
html body .th26-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(90vw, 380px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: var(--bg, #fbfaf5) !important;
  z-index: 100000 !important;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
}

html body.th26-drawer-open .th26-drawer,
html body .th26-drawer[aria-hidden="false"] {
  transform: translateX(0) !important;
}

/* Backdrop — full-viewport dim, sits just below the drawer */
html body .th26-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 19, 32, 0.55) !important;
  z-index: 99999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

html body.th26-drawer-open .th26-drawer-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Lock body scroll when drawer is open */
html body.th26-drawer-open {
  overflow: hidden;
}

/* Drawer header (logo + close button) */
.th26-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #e9e3d4);
  flex: 0 0 auto;
}

.th26-drawer__head .th26-logo {
  display: block;
}

/* Drawer nav list */
html body .th26-drawer__nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  flex: 1 1 auto;
}

html body .th26-drawer__nav .th26-drawer__item,
html body .th26-drawer__nav li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--border, #e9e3d4);
  list-style: none !important;
}

html body .th26-drawer__nav .th26-drawer__item:last-child,
html body .th26-drawer__nav li:last-child {
  border-bottom: none;
}

/* THE drawer link — flex row, icon + label on same line.
   Maximum specificity prefix (html body .selector) so this can't
   be lost to a more-specific parent-theme rule. */
html body .th26-drawer .th26-drawer__nav .th26-drawer__link,
html body .th26-drawer .th26-drawer__nav a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 22px !important;
  color: var(--text, #0a1320) !important;
  text-decoration: none !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  transition: color 160ms ease, background-color 160ms ease !important;
}

html body .th26-drawer .th26-drawer__nav .th26-drawer__link:hover,
html body .th26-drawer .th26-drawer__nav a:hover,
html body .th26-drawer .th26-drawer__nav .th26-drawer__link:focus-visible,
html body .th26-drawer .th26-drawer__nav a:focus-visible {
  color: var(--accent, #6f8a5a) !important;
  background-color: var(--bg-soft, #f5efe0) !important;
}

/* The icon SVG — fixed size, sage accent color, never grows */
html body .th26-drawer .th26-drawer__icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--accent, #6f8a5a) !important;
  stroke: currentColor !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* The label span — inline, takes remaining width */
html body .th26-drawer .th26-drawer__label {
  flex: 1 1 auto !important;
  display: inline-block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
}


/* ------------------------------------------------------------
   MOBILE — restated for safety
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  html body header.wp-block-template-part .th26-header,
  html body header .th26-header,
  html body .th26-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 639px) {
  html body .th26-topics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  html body .th26-topic {
    aspect-ratio: 1/1 !important;
  }
  html body .th26-topic__title {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }
  html body .th26-topic__num {
    font-size: 14px !important;
    top: 8px !important;
    left: 10px !important;
  }
  html body .th26-topic__count {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.08em !important;
  }
  html body .th26-topic__body {
    padding: 10px 12px 12px !important;
  }
}

@media (max-width: 700px) {
  html body .th26-shop-featured__body {
    padding: 14px !important;
    gap: 6px !important;
  }
  html body .th26-shop-featured__badge {
    padding: 4px 10px !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  html body .th26-shop__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}


/* ============================================================
   v0.4.16 — new requests + safety nets
   ============================================================ */

/* --- Author links throughout the site: color-only hover, no pill --- */
.wp-block-post-author a,
.wp-block-post-author-name a,
.th26-postgrid .wp-block-post-author a {
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  transition: color 160ms ease;
}
.wp-block-post-author a:hover,
.wp-block-post-author-name a:hover,
.th26-postgrid .wp-block-post-author a:hover {
  color: var(--accent, #6f8a5a);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

/* --- Mobile "Other gear we love" — bigger photos, full-width tiles,
   less internal padding so the photo dominates the card --- */
@media (max-width: 700px) {
  /* Use the full screen width for the shop section so the tiles
     don't get cropped by section gutters */
  .th26-shop__head,
  .th26-shop__grid {
    padding-left: clamp(8px, 2vw, 16px);
    padding-right: clamp(8px, 2vw, 16px);
  }

  /* Tighten the gap between the featured card and the sidebar */
  .th26-shop__grid {
    gap: 16px;
  }

  /* Each tile in "Other gear we love" — bigger image cell, less padding */
  .th26-shop-side__list .wp-block-post-template > li {
    grid-template-columns: 132px 1fr;
    gap: 14px;
    padding: 10px;
    border-radius: 14px;
  }

  /* Force the image cell to render full-bleed inside its grid column */
  .th26-shop-side__list .wp-block-post-featured-image,
  .th26-shop-side__list .wp-block-post-featured-image a,
  .th26-shop-side__list .wp-block-post-featured-image img {
    width: 132px !important;
    height: 100px !important;
    border-radius: 10px;
    object-fit: cover;
  }

  /* "Other gear we love" title — tighten margin so it feels closer
     to the tiles */
  .th26-shop-side__title {
    margin-bottom: 12px;
    padding: 0 4px;
  }
}

/* --- Mobile: even smaller phones (<= 480px) — use the screen edge-to-edge --- */
@media (max-width: 480px) {
  .th26-shop__head,
  .th26-shop__grid {
    padding-left: 0;
    padding-right: 0;
  }
  .th26-shop-side__title {
    padding: 0 16px;
  }
  .th26-shop-side__list .wp-block-post-template > li {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}


/* ============================================================
   v0.4.18 — post-author avatar wrapper link
   ============================================================ */

/* The render_block filter wraps the avatar div in this link. It should
   inherit the avatar's display behavior without adding any visual chrome
   (no underline, no color tint), just a hover hint to signal clickability. */
.th26-post-author__avatar-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 50%;
  line-height: 0;
  transition: opacity 160ms ease;
}
.th26-post-author__avatar-link:hover {
  opacity: 0.85;
  text-decoration: none;
}
.th26-post-author__avatar-link img,
.th26-post-author__avatar-link .avatar {
  display: block;
  cursor: pointer;
}


/* ============================================================
   v0.4.19 — mobile shop layout polish
   ============================================================ */


/* --- Post-author avatar: tighter to byline text --- */
.wp-block-post-author {
  gap: 8px !important;
}
.wp-block-post-author__avatar,
.th26-post-author__avatar-link {
  margin-right: 0 !important;
}
.wp-block-post-author__avatar img,
.wp-block-post-author__avatar .avatar {
  margin: 0 !important;
}


/* ============================================================
   MOBILE SHOP SECTION (≤ 700px) — center text, hide All gear,
   collapse the gap between editor's pick and Other gear we love
   so they read as one continuous block.
   ============================================================ */

@media (max-width: 700px) {

  /* Section header: stack vertically, center everything,
     hide the "All gear →" link */
  body .th26-shop__head {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }
  body .th26-shop__head-text {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  body .th26-shop__head-text .th26-eyebrow,
  body .th26-shop .th26-eyebrow,
  body .th26-shop__head .th26-eyebrow {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
  }
  body .th26-shop__head-text .th26-section-title,
  body .th26-shop .th26-section-title {
    text-align: center !important;
    width: 100% !important;
  }
  body .th26-shop__head-link {
    display: none !important;
  }

  /* Tighten the section grid so the cards stack with minimal gap */
  body .th26-shop__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Featured card edges flush with the surrounding section so
     it doesn't look isolated above the article list */
  body .th26-shop-featured {
    margin-bottom: 0 !important;
  }

  /* Center "Other gear we love" title */
  body .th26-shop-side__title,
  body .th26-shop-side h3 {
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  /* Center the "Shop all travel gear →" button */
  body .th26-shop-side__browse {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   v0.4.22 — single-post mobile: scoped overflow controls only
   (no html/body overflow rules — those broke header positioning
   in some browsers), no scrollbar recoloring (the sage thumb
   was visible at top of page as an unwanted green stripe).
   ============================================================ */

/* Main article content on mobile — cage any oversized children.
   v0.4.55.8: REMOVED overflow-x: hidden per Raptive support (Brianna
   Eaddy, May 2026). overflow-x: hidden on an ancestor creates a
   scroll container that traps `position: sticky` descendants, which
   was blocking content ads from sticking on mobile devices. Kept
   max-width: 100% since that doesn't affect sticky. Children-level
   max-width rules below still cage oversized images/iframes/tables. */
@media (max-width: 900px) {
  body.single .th26-single-main,
  body.single .th26-single-content,
  body.single article {
    max-width: 100%;
  }

  /* Images, video, embed, figure wrappers — responsive scaling.
     v0.4.55.9: REMOVED `iframe` from this selector list per Raptive
     support (Brianna Eaddy, May 2026). Ad iframes carry an intrinsic
     height set via the HTML `height` attribute or inline style — when
     `height: auto` was applied to them, the browser collapsed the
     iframe to ~150px (the default inline replaced-element height for
     iframes with no measurable content), cutting the rendered ad
     creative in half. Native YouTube/Vimeo embeds are unaffected
     because they come wrapped in .wp-block-embed (still in this list)
     and WP core block CSS sets `width: 100%; aspect-ratio: 16/9` on
     the inner iframe for responsive rendering. Manually-pasted bare
     iframes (rare on this site) keep their author-declared width and
     height — if they overflow the column they can be wrapped or
     handled case-by-case. */
  body.single .th26-single-content img,
  body.single .th26-single-content video,
  body.single .th26-single-content embed,
  body.single .th26-single-content figure,
  body.single .th26-single-content .wp-block-embed,
  body.single .th26-single-content .wp-block-image {
    max-width: 100% !important;
    height: auto;
  }

  /* Tables: scroll horizontally inside a wrapper, not the page */
  body.single .th26-single-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Long unbroken strings — wrap rather than overflow */
  body.single .th26-single-content p,
  body.single .th26-single-content li,
  body.single .th26-single-content blockquote {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  body.single .th26-single-content pre,
  body.single .th26-single-content code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* --- Reading progress bar (single posts only) ---
   Hidden when scroll is at the top, fills sage-on-light /
   sage-bright-on-dark as the user scrolls down the post.
   The bar sits absolutely fixed under the header, so it
   stays static while the article scrolls underneath. */

.th26-reading-progress {
  position: fixed;
  top: var(--header-h, 64px);
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9998;             /* under the fixed header (which is 9999) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.th26-reading-progress[data-active="true"] {
  opacity: 1;
}

.th26-reading-progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent, #6f8a5a);
  transition: width 80ms linear;
}

html[data-theme="dark"] .th26-reading-progress__fill {
  background: var(--sage-bright, #b8d59b);
}

/* --- Defensive header rules: guarantee clicks always reach the
   header buttons. If anything ever ends up on top of the header
   with a higher z-index, these defend the click path. --- */

.th26-header,
header.wp-block-template-part {
  pointer-events: auto !important;
}
.th26-header button,
.th26-header a,
.th26-iconbtn {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}


/* ============================================================
   v0.4.23 — Carousel prev/next arrow buttons
   Layout: ‹  • • •  ›   (arrows flanking the dot row)
   ============================================================ */

/* The dots <nav> becomes a flex row so arrows + dots align */
.th26-hero__dots,
.th26-shop-featured__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The dots themselves group together inside the row */
.th26-hero__dots > .th26-hero__dot,
.th26-shop-featured__dots > .th26-shop-featured__dot {
  /* Keep existing dot styles intact — this just enforces flex children */
  flex: 0 0 auto;
}

/* Arrow buttons — circular, sage-bordered, sage-icon */
.th26-hero__arrow,
.th26-shop-featured__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--accent, #6f8a5a);
  border-radius: 999px;
  background: transparent;
  color: var(--accent, #6f8a5a);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.th26-hero__arrow svg,
.th26-shop-featured__arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}
.th26-hero__arrow:hover,
.th26-shop-featured__arrow:hover {
  background: var(--accent, #6f8a5a);
  color: #fff;
  transform: scale(1.05);
}
.th26-hero__arrow:focus-visible,
.th26-shop-featured__arrow:focus-visible {
  outline: 2px solid var(--accent, #6f8a5a);
  outline-offset: 2px;
}
.th26-hero__arrow:active,
.th26-shop-featured__arrow:active {
  transform: scale(0.95);
}

/* Hero arrows sit on the dark photo overlay — give them more contrast */
.th26-hero__arrow {
  border-color: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
}
.th26-hero__arrow:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text, #0a1320);
  border-color: rgba(255, 255, 255, 1);
}

/* Dark mode — keep arrow visibility on shop carousel (sage bright) */
html[data-theme="dark"] .th26-shop-featured__arrow {
  border-color: var(--sage-bright, #b8d59b);
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-shop-featured__arrow:hover {
  background: var(--sage-bright, #b8d59b);
  color: var(--bg, #0a1320);
}

/* Mobile — bigger tap targets (44px is the iOS Human Interface Guideline) */
@media (max-width: 700px) {
  .th26-hero__arrow,
  .th26-shop-featured__arrow {
    width: 40px;
    height: 40px;
  }
  .th26-hero__arrow svg,
  .th26-shop-featured__arrow svg {
    width: 18px;
    height: 18px;
  }
  .th26-hero__dots,
  .th26-shop-featured__dots {
    gap: 10px;
  }
}


/* ============================================================
   v0.4.24 — Targeted mobile spacing fixes for the homepage.

   Diagnosis (from DOM inspection on staging):
   1. The space above and below the EDITOR'S PICK pill is NOT
      from CSS padding — it's from empty <p></p> tags injected
      by wpautop between <a class="...media">/<div class="body">
      and between <span class="badge">/<p class="terms">. Each
      empty <p> adds ~16px top + 16px bottom of browser default
      margin.
   2. The big gap between the topic-grid section and the shop
      section is from base rule:
          .th26-section { padding: clamp(3rem, 7vw, 6rem) 0; }
          .th26-shop    { padding: clamp(3rem, 7vw, 6rem) 0; }
      → on mobile each evaluates to ~48px top + ~48px bottom,
      stacking to ~96px between adjacent sections.
   3. The space between "Shop our tested gear" head and the
      featured card is from:
          .th26-shop__head { margin: 0 auto 36px; padding: 0 ... 24px; }
      → 60px total below the head text on every viewport.
   4. The ad block before Just Published has no explicit margin
      rules — its container sits inside .th26-main which carries
      generous gap stack from the wp-block-group layout.
   ============================================================ */

/* --- (1) Empty <p> artifacts from wpautop inside the shop card.
   Site-wide because the artifact is structural, not viewport-
   dependent. Scoped narrowly so nothing else is affected. --- */
.th26-shop-featured__slide > p:empty,
.th26-shop-featured__body  > p:empty,
.th26-shop-featured__slide > p:has(> br:only-child),
.th26-shop-featured__body  > p:has(> br:only-child) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Mobile-only — adjust spacing to the user-approved "AFTER"
   targets (~56px between sections, ~28px head→card, comfortable
   but not cramped around badge). Hero and "Other gear we love"
   are deliberately untouched here. */
@media (max-width: 700px) {

  /* (2) Section vertical padding
     BEFORE: clamp(3rem, 7vw, 6rem) 0  →  ~48px top + ~48px bottom (~96px gap)
     AFTER:  clamp(1.5rem, 4.5vw, 2.25rem) 0  →  ~24-28px each side (~52-56px gap)
     Reduction: ~42%. Background bands still render full-width
     so the visual divider/band is preserved. */
  .th26-section { padding: clamp(1.5rem, 4.5vw, 2.25rem) 0 !important; }
  .th26-shop    { padding: clamp(1.5rem, 4.5vw, 2.25rem) 0 !important; }

  /* (3) "Shop our tested gear" head spacing
     BEFORE: margin-bottom 36px + padding-bottom 24px = 60px
     AFTER:  margin-bottom 16px + padding-bottom 12px = 28px
     Reduction: ~53%. Still a clear gap between the centered
     title block and the featured photo, just not a yawning one. */
  .th26-shop__head {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }

  /* (4) Ad block surround
     Trim the top/bottom margin so the ad doesn't float in a
     sea of empty space, but keep enough so it doesn't kiss
     the section title below it.
     v0.4.55.8: REMOVED .adthrive-sticky-container from this
     selector list per Raptive support — sticky footer ad units
     also carry the .adthrive-ad class, and applying margin-bottom
     to them lifts the bar 16px off the viewport bottom, leaving
     a visible gap between the sticky bar and the screen edge.
     The margin is still wanted for IN-CONTENT ads (the .adthrive-ad
     and [id^="AdThrive_Content_"] selectors remain). */
  .adthrive-ad:not(.adthrive-sticky-container):not(.adthrive-sticky-outstream):not([class*="adthrive-sticky"]),
  [id^="AdThrive_Content_"] {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Belt-and-suspenders: pad the shop card body slightly more
     comfortably than the previous 14px so the badge has air
     above and below it, even after wpautop artifacts are gone.
     This overrides the earlier v0.4.21 mobile rule which was
     too tight (14px / gap:6px). */
  html body .th26-shop-featured--v416 .th26-shop-featured__body {
    padding: 20px !important;
    gap: 10px !important;
  }
}


/* ============================================================
   v0.4.26 — "Other gear we love" mobile treatment.
   Original mobile rendering: plain serif text, identical size
   to surrounding copy, with a 24px grid gap above. User feedback:
   "make it look more like a header and move it closer to the
   previous section as it's related."

   Fix on mobile only:
   - Larger title (24px), tighter letter-spacing, centered
   - Short sage hairline under the title to signal "section
     header" without re-introducing a heavy band
   - Reduce grid gap above from 24px → 12px so the sidebar
     reads as a continuation of the featured card, not a
     separate floating block
   - Desktop is untouched (sidebar lives in a separate column,
     so the visual relationship is different).
   ============================================================ */
@media (max-width: 700px) {

  /* Bring sidebar visually closer to the featured card */
  html body .th26-shop__grid {
    gap: 12px !important;
  }

  /* Style "Other gear we love" as a proper mini section header */
  .th26-shop-side__title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 18px;
    padding: 18px 0 12px;
    position: relative;
    color: var(--text);
  }
  html[data-theme="dark"] .th26-shop-side__title {
    color: #fbfaf5 !important;
  }

  /* Sage hairline under the title (centered, narrow, editorial) */
  .th26-shop-side__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 10px auto 0;
    background: var(--accent, #6f8a5a);
    border-radius: 2px;
  }
  html[data-theme="dark"] .th26-shop-side__title::after {
    background: var(--sage-bright, #b8d59b);
  }
}


/* ============================================================
   v0.4.27 — Single-post polish + scoped layout/spacing/pills
   fixes. EVERY selector here is scoped under `body.single` so
   homepage / archives / pages are not affected.
   ============================================================ */

/* --- (1) Article header: header-aware top whitespace.
   The .th26-header is position:fixed; height:var(--header-h) (84px).
   Main has to pad enough to clear it. Previously this rule used
   `clamp(1.25rem, 2.5vw, 2.25rem)` (~20-36px) which is below the
   header height — the breadcrumb and Back button rendered behind
   the header. v0.4.43 fixes the math: clear the header explicitly
   with a tight 8px gap below it (matches the listing pages above). */
body.single .th26-single-main {
  padding-top: calc(var(--header-h) + 8px) !important;  /* 92px = 84px header + 8px gap */
}

/* --- (2) Article TITLE alignment & breathing room --- */
body.single .th26-single-content .th26-single-title,
body.single .th26-single-content .wp-block-post-title {
  text-align: left !important;
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 16px !important;
  max-width: 100%;
  color: var(--text) !important;
}

/* --- (3) Category PILLS above the title --- */
/* The wp:post-terms block uses text-node separators between the
   <a> links. font-size:0 on the wrapper collapses the separator
   whitespace; we restore size on the pills themselves. */
body.single .th26-single-content .th26-post-categories {
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0 0 14px !important;
  padding: 0;
  text-align: left;
}
body.single .th26-single-content .th26-post-categories a {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #6f8a5a);
  background: transparent;
  border: 1px solid var(--accent, #6f8a5a);
  border-radius: 999px;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.single .th26-single-content .th26-post-categories a:hover,
body.single .th26-single-content .th26-post-categories a:focus-visible {
  background: var(--accent, #6f8a5a);
  color: #fff;
}
html[data-theme="dark"] body.single .th26-single-content .th26-post-categories a {
  border-color: var(--sage-bright, #b8d59b);
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] body.single .th26-single-content .th26-post-categories a:hover,
html[data-theme="dark"] body.single .th26-single-content .th26-post-categories a:focus-visible {
  background: var(--sage-bright, #b8d59b);
  color: var(--bg, #0a1320);
}

/* --- (4) Single-post meta row (author + date) tighter under title --- */
body.single .th26-single-content .th26-single-meta {
  margin: 0 0 24px !important;
  gap: 12px;
  align-items: center;
}

/* --- (5) Reading progress: guarantee single instance + 0% at top.
   If a 3rd-party (Slickstream, plugin) injects another bar, hide
   their selectors so only our .th26-reading-progress survives. --- */
slickstream-engagement-bar,
.slickstream-engagement-bar,
.slickstream-progress,
.slickstream-progress-bar,
.slickstream-progress-indicator,
.slickstream-reading-progress,
.reading-progress-bar:not(.th26-reading-progress),
[id*="reading-progress"]:not(.th26-reading-progress):not(.th26-reading-progress__fill) {
  display: none !important;
  visibility: hidden !important;
}

/* If our own bar ever briefly renders without data-active=true on
   first paint, this belt-and-suspenders rule guarantees zero width
   until JS runs and sets data-active. */
.th26-reading-progress:not([data-active="true"]) .th26-reading-progress__fill {
  width: 0 !important;
}

/* --- (6) Video / Raptive floating-video containment.
   Raptive's sticky video player has a high z-index that climbs
   above our fixed header on scroll. Force it BELOW the header
   (which is z-index 9999) and cap its size. */
.adthrive-floating-video,
.adthrive-sticky-container.adthrive-floating,
.adthrive-collapse,
.adthrive-video-player.adthrive-floating,
div[id^="adthrive-floating"],
div[class*="floating-video"] {
  z-index: 9990 !important;        /* under header (9999) + reading-progress (9998) */
  max-width: 320px !important;
  max-height: 220px !important;
}
@media (max-width: 700px) {
  .adthrive-floating-video,
  .adthrive-sticky-container.adthrive-floating,
  div[id^="adthrive-floating"] {
    max-width: 200px !important;
    max-height: 130px !important;
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
  }
}

/* --- (7) Oversized ad containment inside the article body.
   Prevent ad wrappers from reserving giant blank min-heights and
   constrain iframes to the content column width.
   v0.4.49: dropped `overflow: hidden` per Raptive — was preventing
   Adthrive's sticky content ads from working. Iframe max-width
   below is enough to stop horizontal overflow. */
body.single .wp-block-post-content .adthrive-ad,
body.single .wp-block-post-content [id^="AdThrive_Content_"] {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.single .wp-block-post-content .adthrive-ad iframe,
body.single .wp-block-post-content [id^="AdThrive_Content_"] iframe {
  max-width: 100% !important;
}

/* --- (8) Single-post typography polish (scoped to body.single) --- */
body.single .wp-block-post-content {
  font-family: 'Manrope', sans-serif;
  color: var(--text);
}
body.single .wp-block-post-content p {
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.72;
  margin: 0 0 1.15em;
}
body.single .wp-block-post-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
body.single .wp-block-post-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
body.single .wp-block-post-content a:not(.wp-block-button__link):not(.amazon-link):not([class*="adthrive"]) {
  color: var(--accent, #6f8a5a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.single .wp-block-post-content a:not(.wp-block-button__link):not(.amazon-link):not([class*="adthrive"]):hover {
  color: var(--accent-strong, #5d7649);
}
body.single .wp-block-post-content blockquote {
  border-left: 3px solid var(--accent, #6f8a5a);
  padding: 4px 0 4px 18px;
  margin: 1.5em 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 1.4vw, 20px);
  font-style: italic;
  color: var(--text-subtle, #4a5563);
}
body.single .wp-block-post-content ul,
body.single .wp-block-post-content ol {
  margin: 0 0 1.15em 1.5em;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.72;
}
body.single .wp-block-post-content li { margin-bottom: 0.4em; }
body.single .wp-block-post-content figure { margin: 1.5em 0; }
body.single .wp-block-post-content figcaption {
  font-size: 12.5px;
  color: var(--text-subtle, #4a5563);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* Dark-mode adjustments for body links (so they don't collide
   with the sage-on-navy contrast) */
html[data-theme="dark"] body.single .wp-block-post-content a:not(.wp-block-button__link):not(.amazon-link):not([class*="adthrive"]) {
  color: var(--sage-bright, #b8d59b);
}

/* --- (9) Mobile spacing inside the article — trim oversized
   block gaps without crushing paragraph rhythm. --- */
@media (max-width: 700px) {
  body.single .wp-block-post-content h2 { margin-top: 1.4em; }
  body.single .wp-block-post-content h3 { margin-top: 1.1em; }
  body.single .wp-block-post-content .wp-block-spacer { max-height: 24px !important; }
  body.single .wp-block-post-content figure { margin: 1em 0; }
}

/* --- (10) Related Posts widget — visually matches "The latest"
   widget so the sticky sidebar reads as one continuous module. --- */
.th26-sidebar__widget--related {
  /* Inherits all .th26-sidebar__widget rules; this hook is here
     in case future per-widget tuning is needed (e.g. background
     accent, smaller thumbs). Currently no extra styling. */
}

/* --- (11) Header z-index protection on single posts.
   The fixed header at z-index 9999 must always sit above any
   ad/widget/video/iframe. These rules are scoped to body.single
   so they don't fight homepage shortcode stacking. --- */
body.single .th26-header,
body.single header.wp-block-template-part {
  z-index: 9999 !important;
}
body.single .th26-reading-progress { z-index: 9998 !important; }


/* ============================================================
   v0.4.28 — Blog Home + Search Results templates.
   Scoped to body.blog (Blog Home, is_home) and body.search
   (Search Results, is_search) so homepage/single/archives
   are unaffected.
   ============================================================ */

/* ---------- (1) Blog Home hero ----------
   2-column on desktop (welcome copy LEFT, featured post RIGHT).
   Stacks to 1 column under 900px. */
.th26-blog-hero {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  background: var(--bg-soft, #f5efe0);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.th26-blog-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}
@media (min-width: 900px) {
  .th26-blog-hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}
.th26-blog-hero__text {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.th26-blog-hero__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #6f8a5a);
}
.th26-blog-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text, #0a1320);
}
.th26-blog-hero__lede {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--text-subtle, #4a5563);
  margin: 0;
  max-width: 48ch;
}
.th26-blog-hero__cta {
  align-self: flex-start;
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  background: var(--text, #0a1320);
  color: var(--bg, #fbfaf5);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.th26-blog-hero__cta:hover { transform: translateY(-1px); opacity: 0.92; }

/* RIGHT — featured post card (whole thing is one big link) */
.th26-blog-hero__feature {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg, #fbfaf5);
  height: 100%;
  transition: transform 200ms ease;
}
@media (min-width: 900px) {
  .th26-blog-hero__feature { flex-direction: column; }
}
.th26-blog-hero__feature:hover { transform: translateY(-2px); }

.th26-blog-hero__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-strong, #e9e3d4);
}
.th26-blog-hero__img,
.th26-blog-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.th26-blog-hero__body {
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th26-blog-hero__pill-wrap {
  margin: 0 0 4px;
}
.th26-blog-hero__pill {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #6f8a5a);
  background: transparent;
  border: 1px solid var(--accent, #6f8a5a);
  border-radius: 999px;
  padding: 5px 10px;
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.th26-blog-hero__pill:hover {
  background: var(--accent, #6f8a5a);
  color: #fff;
}
.th26-blog-hero__feature-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--text, #0a1320);
}
.th26-blog-hero__excerpt {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-subtle, #4a5563);
  margin: 0;
}
.th26-blog-hero__feature-cta {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6f8a5a);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* "Latest from the blog" section heading */
.th26-blog-section { margin: 0 auto; }
.th26-blog-section__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: var(--text, #0a1320);
  position: relative;
}
.th26-blog-section__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent, #6f8a5a);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ---------- (2) Search Results hero ---------- */
.th26-search-hero {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 40px);
  background: var(--bg-soft, #f5efe0);
  border-radius: var(--radius-lg, 16px);
  text-align: center;
}
.th26-search-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.th26-search-hero__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #6f8a5a);
}
.th26-search-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--text, #0a1320);
}
.th26-search-hero__lede {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--text-subtle, #4a5563);
  margin: 0 0 22px;
}

/* Category filter pills row */
.th26-search-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.th26-search-pills__pill {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong, #c7c0ad);
  background: transparent;
  color: var(--text, #0a1320);
  text-decoration: none;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.th26-search-pills__pill:hover,
.th26-search-pills__pill:focus-visible {
  background: var(--accent, #6f8a5a);
  color: #fff;
  border-color: var(--accent, #6f8a5a);
}
.th26-search-pills__pill--active {
  background: var(--text, #0a1320);
  color: var(--bg, #fbfaf5);
  border-color: var(--text, #0a1320);
}

/* No-results box */
.th26-no-results-box {
  margin: clamp(2rem, 4vw, 3rem) auto;
  max-width: 560px;
  padding: clamp(24px, 3vw, 40px);
  text-align: center;
  background: var(--bg-soft, #f5efe0);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border, #e0d9c5);
}
.th26-no-results-box__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text, #0a1320);
}
.th26-no-results-box__lede {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--text-subtle, #4a5563);
}

/* ---------- (3) Category pill on Blog/Search post cards ---------- */
/* Same font-size:0 trick as single posts to collapse separator
   whitespace, but slightly smaller and positioned ABOVE the title. */
.th26-postgrid--blog .wp-block-post-template > li .th26-post-categories--card,
.th26-postgrid--search .wp-block-post-template > li .th26-post-categories--card {
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 12px 0 8px;
  padding: 0;
}
.th26-postgrid--blog .wp-block-post-template > li .th26-post-categories--card a,
.th26-postgrid--search .wp-block-post-template > li .th26-post-categories--card a {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #6f8a5a);
  background: transparent;
  border: 1px solid var(--accent, #6f8a5a);
  border-radius: 999px;
  padding: 5px 10px;
  margin: 0 5px 5px 0;
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.th26-postgrid--blog .wp-block-post-template > li .th26-post-categories--card a:hover,
.th26-postgrid--search .wp-block-post-template > li .th26-post-categories--card a:hover {
  background: var(--accent, #6f8a5a);
  color: #fff;
}

/* ---------- (4) Pagination styling ---------- */
.th26-pagination {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  font-family: 'Manrope', sans-serif;
}
.th26-pagination a,
.th26-pagination .page-numbers {
  color: var(--text, #0a1320);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color 160ms, background 160ms;
}
.th26-pagination a:hover,
.th26-pagination .page-numbers.current {
  border-color: var(--accent, #6f8a5a);
  color: var(--accent, #6f8a5a);
}
.th26-pagination .page-numbers.current { background: transparent; font-weight: 700; }

/* ---------- (5) Mobile tweaks: tighten hero spacing ---------- */
@media (max-width: 700px) {
  .th26-blog-hero__text { padding: 24px 20px 8px; }
  .th26-blog-hero__body { padding: 20px; }
  .th26-blog-hero__title { font-size: clamp(26px, 6vw, 34px); }
  .th26-search-hero { padding: 24px 18px; margin-bottom: 18px; }
  .th26-search-pills { gap: 6px; }
  .th26-search-pills__pill { font-size: 11px; padding: 6px 11px; }
  .th26-blog-section__title { font-size: 22px; margin-bottom: 16px; }
}

/* ---------- (6) Dark-mode polish for Blog Home + Search ---------- */
html[data-theme="dark"] .th26-blog-hero,
html[data-theme="dark"] .th26-search-hero {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .th26-blog-hero__feature {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .th26-blog-hero__title,
html[data-theme="dark"] .th26-search-hero__title,
html[data-theme="dark"] .th26-blog-hero__feature-title,
html[data-theme="dark"] .th26-blog-section__title,
html[data-theme="dark"] .th26-no-results-box__title {
  color: #fbfaf5 !important;
}
html[data-theme="dark"] .th26-search-hero__lede,
html[data-theme="dark"] .th26-blog-hero__subtitle,
html[data-theme="dark"] .th26-no-results-box__body {
  color: rgba(251, 250, 245, 0.78) !important;
}
html[data-theme="dark"] .th26-search-pills__pill {
  color: #fbfaf5 !important;
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .th26-search-pills__pill--active {
  background: var(--sage-bright, #b8d59b);
  color: var(--bg, #0a1320);
  border-color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-postgrid--blog .wp-block-post-template > li .th26-post-categories--card a,
html[data-theme="dark"] .th26-postgrid--search .wp-block-post-template > li .th26-post-categories--card a {
  border-color: var(--sage-bright, #b8d59b);
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-no-results-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   v0.4.29 — DOM-VERIFIED FIXES for the three remaining issues.
   Replaces speculative selectors with actual selectors confirmed
   from DevTools diagnostic on staging.cleverjourney.com.
   ============================================================ */

/* --- (1) DUPLICATE PROGRESS BAR
   Confirmed source: a WordPress plugin (likely "Page Reading
   Progress" by Joost de Valk / ruigehond) injects its own bar
   with id="ruigehond006_bar" and hardcoded green color
   rgb(49,166,29). Hide all variants of its DOM. The CORRECT
   long-term fix is to deactivate the plugin in WP Admin —
   this CSS rule is just a safety net so duplicate bars never
   appear even if the plugin is reactivated by accident. */
[id^="ruigehond"],
[id^="ruigehond"][id*="_wrap"],
[id^="ruigehond"][id*="_inner"],
[id^="ruigehond"][id*="_bar"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}


/* --- (2) RAPTIVE FLOATING VIDEO Z-INDEX CAP
   Confirmed selectors from diagnostic (these are the REAL
   class names on staging — none of the v0.4.27 guesses matched).
   Force the entire Raptive video chain below the header
   (z-index 9999) and below the reading-progress bar (9998). */

.adthrive-sticky-outstream,
.adthrive-sticky-outstream-desktop,
.adthrive-sticky-outstream-mobile,
.adthrive-stuck,
.adthrive-sticky-outstream-idle,
.adthrive-auto-injected-player-container,
.adthrive-collapse-player,
.raptive-player-mobile,
.raptive-player-desktop,
.raptive-player-position,
.raptive-player-container,
.adthrive-player-without-wrapper-text,
#adthrive-auto-injected-container {
  z-index: 9000 !important;     /* below header (9999) + progress (9998) */
}

/* Loading spinner inside Raptive's player uses z-index
   2147483647 (the literal maximum). Constrain it. */
.adthrive-loading-spinner-container,
.adthrive-player-ad-controls {
  z-index: 9000 !important;
}

/* Cap visible size of the floating video so it never dominates
   the viewport. Raptive sets these dimensions inline but we can
   constrain the wrapper. */
.adthrive-sticky-outstream,
.adthrive-stuck {
  max-width: 360px !important;
  max-height: 240px !important;
}
@media (max-width: 700px) {
  .adthrive-sticky-outstream,
  .adthrive-stuck {
    max-width: 200px !important;
    max-height: 135px !important;
    /* Sit above the fixed footer ad (z=1000001, at bottom 0)
       by giving the floating video some bottom clearance.
       v0.4.52.10: flipped right → left per Raptive's
       bottom-left video player position change. */
    bottom: 100px !important;
    left: 12px !important;
    right: auto !important;
  }
}


/* --- (3) FULL-SCREEN INTERSTITIAL AD CONTAINMENT
   ⚠️  These are PAID Sparkflow / Kargo / Undertone creative
   units that Raptive intentionally serves. They have their own
   close ✕ buttons. The DOM evidence:
     <div class="sprkflw_main" style="position:fixed; z-index:2147483637">
     <iframe src="creative-p.undertone.com" style="position:fixed">
     <iframe class="kargo-creative">
   
   The safest fix is z-index cap only (so they don't cover the
   header) — DO NOT hide or resize them because that interferes
   with paid ad delivery and may violate Raptive's policy.
   
   If you want these units gone entirely, the correct path is
   the Raptive Dashboard → Ad Density → disable Sparkflow /
   Outstream / High-Impact units. CSS cannot safely do that. */
.sprkflw_main,
.ut_container,
[id^="div_sf_aon_container"],
.kargo-creative,
.kargo-banner-optout {
  /* Constrain z-index ONLY so the header can sit on top.
     Don't touch position, dimensions, or visibility. */
  z-index: 9000 !important;
}

/* The Raptive sticky footer ad at z=1000001 also gets capped
   so the header stays on top. Footer is at bottom so this
   doesn't change layout, only stacking. */
.adthrive-footer.adthrive-sticky,
#AdThrive_Footer_1_desktop,
#AdThrive_Footer_1_phone {
  z-index: 9000 !important;
}


/* --- (4) HARDEN HEADER + READING PROGRESS Z-INDEX
   Make absolutely sure these two always win the stacking
   contest against any ad unit. !important on both axes. */
.th26-header,
header.wp-block-template-part,
.th26-drawer,
.th26-drawer-backdrop,
#th26SearchModal {
  z-index: 9999 !important;
}
.th26-reading-progress {
  z-index: 9998 !important;
}

/* The drawer (off-canvas mobile menu) opens with z-index 100000
   in the current CSS — bring it down so the same hierarchy holds
   when the drawer is open. */
.th26-drawer { z-index: 9999 !important; }
.th26-drawer-backdrop { z-index: 9998 !important; }


/* ============================================================
   v0.4.30 — Ad CONTAINMENT (not hiding).
   Caps the visible size of every Raptive/AdThrive/Sparkflow/
   Kargo/Undertone container so no single ad can dominate the
   viewport. Ads still render and Raptive still tracks them —
   they just live inside size-limited boxes.
   ============================================================ */

/* --- (1) In-content + sidebar ad slots: cap height per viewport.
   Raptive sets min-height on these to reserve space pre-load;
   we cap max-height so they cannot grow beyond a reasonable
   share of the screen. */
.adthrive-ad,
.adthrive,
[id^="AdThrive_Content_"],
[id^="AdThrive_Sidebar_"],
[id^="AdThrive_Footer_"],
[id^="cls-video-container"],
#adthrive-auto-injected-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* In-content placement: capped height keeps the ad inside the
   reading flow rather than dominating a phone screen.
   v0.4.55.2: REMOVED per Raptive support (Brianna Eaddy, May 2026).
   The `max-height` + `overflow: hidden` combination on ad containers
   was blocking Raptive's `.adthrive-sticky-container` from working —
   any ancestor with `overflow: hidden` traps a `position: sticky`
   child within its (non-scrolling) bounds, so the ads rendered
   statically. Raptive manages their own ad sizing server-side; we
   no longer need to cap on our end. The original viewport-takeover
   concern from v0.4.30 is now handled by Raptive's own size limits.
   Block intentionally left as a comment for changelog traceability
   so future devs see WHY these three media queries are absent. */


/* Sidebar ad: contained within the 300px sidebar column.
   v0.4.55.8: REMOVED max-height: 600px per Raptive support. They run
   300×1050 ad units in the sidebar and the 600px cap was cutting those
   in half. Per Raptive's general guidance ("we don't recommend disabling
   any ad sizes") the right answer is to let the sidebar grow to whatever
   height the served ad needs. The 300px width cap stays since the sidebar
   column itself is 300px wide. */
.th26-sidebar [id^="AdThrive_Sidebar_"],
.th26-sidebar .adthrive-ad {
  max-width: 300px !important;
  margin: 0 auto !important;
}

/* --- (2) Visual containment for content ads.
   v0.4.49: REMOVED per Raptive. Was applying `position: relative`
   to .adthrive-ad slots, which created a new containing block and
   broke Adthrive's `.adthrive-sticky-container` sticky behavior.
   Visual styling (border, background) also stripped so we don't
   fight Adthrive's CSS. Ads keep their native appearance. */


/* --- (3) Full-screen interstitial CAPPING.
   Sparkflow / Kargo / Undertone fixed-position overlays.
   v0.4.29 capped their z-index so the header stayed on top.
   v0.4.30 also caps their visible footprint so they cannot
   fill the entire viewport. They still display, still register
   impressions, still have their own ✕ close — they just fit
   inside ~60% of the screen instead of taking it over. */
.sprkflw_main,
.ut_container,
[id^="div_sf_aon_container"] {
  max-width: min(90vw, 420px) !important;
  max-height: min(60vh, 480px) !important;
  /* Re-anchor to bottom-right corner so the capped box sits
     in a non-obtrusive position */
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}
@media (max-width: 700px) {
  .sprkflw_main,
  .ut_container,
  [id^="div_sf_aon_container"] {
    max-width: 92vw !important;
    max-height: 50vh !important;
    bottom: 10px !important;
    right: 4vw !important;
  }
}

/* Kargo creative iframes are inside their own wrapper; cap
   their visible footprint via the wrapper. */
.kargo-creative,
.kargo-banner-optout,
iframe.kargo-creative,
iframe[class*="kargo"] {
  max-width: min(90vw, 420px) !important;
  max-height: min(60vh, 480px) !important;
}

/* Undertone iframes inject themselves with position:fixed +
   100vh sizing — cap them at the wrapper level. */
iframe[src*="creative-p.undertone.com"],
iframe[src*="creative.undertone.com"] {
  max-width: min(90vw, 420px) !important;
  max-height: min(60vh, 480px) !important;
}

/* --- (4) Sticky footer ad: keep it bottom-pinned but cap height
   so it doesn't grow into half the screen on mobile. */
.adthrive-footer.adthrive-sticky,
#AdThrive_Footer_1_desktop,
#AdThrive_Footer_1_phone {
  max-height: 110px !important;
  max-width: 100vw !important;
}
@media (max-width: 700px) {
  .adthrive-footer.adthrive-sticky,
  #AdThrive_Footer_1_phone {
    max-height: 90px !important;
  }
}


/* ============================================================
   v0.4.31 — Single-post alignment + global circular avatars.
   ============================================================ */

/* --- (1) GLOBAL CIRCULAR AVATARS for the wp:post-author block.
   v0.4.30 only made postgrid avatars circular. This makes ALL
   author block avatars circular site-wide: single posts, search
   results, blog home, anywhere the block renders. */
.wp-block-post-author__avatar,
.wp-block-post-author__avatar a,
.th26-post-author__avatar-link {
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  border-radius: 50% !important;
}
.wp-block-post-author__avatar img,
.wp-block-post-author__avatar .avatar,
.wp-block-post-author img.avatar,
.th26-post-author__avatar-link img,
.th26-post-author__avatar-link .avatar {
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Single-post avatar specifically: 40px from the block attribute
   in templates/single.html. Make sure both the wrapper AND img
   are sized identically so the circle isn't an oval. */
body.single .th26-single-meta .wp-block-post-author__avatar {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
}
body.single .th26-single-meta .wp-block-post-author__avatar img,
body.single .th26-single-meta .wp-block-post-author__avatar .avatar {
  width: 40px !important;
  height: 40px !important;
}


/* --- (2) FLUSH-LEFT SINGLE-POST ALIGNMENT.
   The constrained-layout default is `margin: 0 auto` (centered).
   Override so categories / title / meta / featured-image / body
   all share the SAME left edge instead of being centered inside
   the wider grid column. They keep their 728px max-width so the
   reading measure stays comfortable. v0.4.52.10: bumped 720 → 728
   per Raptive's required minimum content width for content ads. */

@media (min-width: 1100px) {
  body.single .th26-single-content > .wp-block-post-terms,
  body.single .th26-single-content > .th26-post-categories,
  body.single .th26-single-content > .wp-block-post-title,
  body.single .th26-single-content > .th26-single-title,
  body.single .th26-single-content > .th26-single-meta,
  body.single .th26-single-content > .wp-block-post-featured-image,
  body.single .th26-single-content > figure.wp-block-post-featured-image,
  body.single .th26-single-content > .wp-block-spacer,
  body.single .th26-single-content > .wp-block-post-content {
    max-width: 728px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100%;
  }
}

/* Featured-image figure can come with an inline padding/margin
   that the constrained layout adds. Normalize. */
body.single .th26-single-content .wp-block-post-featured-image {
  padding: 0 !important;
}
body.single .th26-single-content .wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 14px;
}

/* Mobile: everything stays at 100% width (no constraint),
   left-aligned naturally. */
@media (max-width: 1099px) {
  body.single .th26-single-content > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* --- (3) Meta row: keep author + date on a single tidy line
   with the avatar properly sized and circular. */
body.single .th26-single-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.single .th26-single-meta .wp-block-post-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.single .th26-single-meta .wp-block-post-author__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
body.single .th26-single-meta .wp-block-post-author__byline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-subtle);
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
body.single .th26-single-meta .wp-block-post-author__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
body.single .th26-single-meta .wp-block-post-date {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--text-subtle);
  margin-left: auto;
}
@media (max-width: 700px) {
  body.single .th26-single-meta .wp-block-post-date {
    margin-left: 0;
  }
}


/* ============================================================
   v0.4.33 — 404 TEMPLATE.
   All rules scoped under .th26-404 so no other template is
   affected. Header/footer template parts pass through.
   ============================================================ */

.th26-404 {
  font-family: 'Manrope', sans-serif;
  color: var(--text, #0a1320);
}
.th26-404__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .th26-404__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* --- LEFT COLUMN: copy + form + actions --- */
.th26-404__copy {
  min-width: 0;
}

.th26-404__digits {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(96px, 16vw, 200px);
  line-height: 0.9;
  color: var(--text, #0a1320);
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}
.th26-404__digit--zero {
  position: relative;
  display: inline-block;
}
.th26-404__plane-route {
  position: absolute;
  top: -6%;
  right: -22%;
  width: 70%;
  height: 70%;
  pointer-events: none;
}

.th26-404__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--text, #0a1320);
  max-width: 520px;
}

.th26-404__tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.4;
  color: var(--accent-strong, #5d7649);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.th26-404__pin {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.th26-404__body {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--text-subtle, #4a5563);
  margin: 0 0 28px;
  max-width: 540px;
}

/* --- Search form --- */
.th26-404__search {
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 999px;
  padding: 4px;
  max-width: 560px;
  margin: 0 0 20px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.th26-404__search:focus-within {
  border-color: var(--accent, #6f8a5a);
  box-shadow: 0 0 0 3px rgba(111, 138, 90, 0.15);
}
.th26-404__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-subtle, #4a5563);
  flex-shrink: 0;
  padding-left: 6px;
}
.th26-404__search-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.th26-404__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 10px 8px;
}
.th26-404__search-input::placeholder {
  color: var(--text-subtle, #4a5563);
  opacity: 0.7;
}
.th26-404__search-btn {
  flex-shrink: 0;
  background: var(--accent-strong, #5d7649);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.th26-404__search-btn:hover,
.th26-404__search-btn:focus-visible {
  background: var(--accent, #6f8a5a);
}
.th26-404__search-btn:active {
  transform: translateY(1px);
}

/* --- Action buttons --- */
.th26-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 26px;
}
.th26-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  min-width: 200px;
  justify-content: center;
}
.th26-404__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.th26-404__btn--primary {
  background: var(--text, #0a1320);
  color: #ffffff;
  border: 1px solid var(--text, #0a1320);
}
.th26-404__btn--primary:hover,
.th26-404__btn--primary:focus-visible {
  background: #1c2f4e;
  border-color: #1c2f4e;
}
.th26-404__btn--secondary {
  background: transparent;
  color: var(--accent-strong, #5d7649);
  border: 1px solid var(--accent-strong, #5d7649);
}
.th26-404__btn--secondary:hover,
.th26-404__btn--secondary:focus-visible {
  background: var(--accent-strong, #5d7649);
  color: #ffffff;
}
.th26-404__btn:active {
  transform: translateY(1px);
}

/* --- Redirect notice --- */
.th26-404__redirect {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-soft, #f5efe0);
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 14px;
  padding: 16px 20px;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text, #0a1320);
  margin: 0;
}
.th26-404__redirect svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.th26-404__countdown {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong, #5d7649);
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
}
.th26-404__redirect-sub {
  display: block;
  color: var(--text-subtle, #4a5563);
  font-size: 13.5px;
  margin-top: 2px;
}
.th26-404__redirect--cancelled {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  opacity: 0.7;
}
.th26-404__redirect--cancelled svg path,
.th26-404__redirect--cancelled svg circle {
  stroke: var(--text-subtle, #4a5563) !important;
}

/* --- RIGHT COLUMN: SVG art --- */
.th26-404__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.th26-404__art svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

/* --- Mobile stacking + hide-art-when-cramped --- */
@media (max-width: 899px) {
  .th26-404__grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .th26-404__art {
    order: -1;
    margin-bottom: 8px;
  }
  .th26-404__art svg {
    max-width: 320px;
  }
}
@media (max-width: 480px) {
  .th26-404__digits {
    font-size: 96px;
  }
  .th26-404__title {
    font-size: 24px;
  }
  .th26-404__search-btn {
    padding: 11px 16px;
  }
  .th26-404__actions .th26-404__btn {
    width: 100%;
    min-width: 0;
  }
  .th26-404__art {
    display: none;
  }
}

/* --- Dark mode --- */
html[data-theme="dark"] .th26-404__digits {
  color: #fbfaf5 !important;
}
html[data-theme="dark"] .th26-404__title {
  color: #fbfaf5 !important;
}
html[data-theme="dark"] .th26-404__body {
  color: rgba(251, 250, 245, 0.72);
}
html[data-theme="dark"] .th26-404__tagline {
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-404__search {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .th26-404__search:focus-within {
  border-color: var(--sage-bright, #b8d59b);
  box-shadow: 0 0 0 3px rgba(184, 213, 155, 0.18);
}
html[data-theme="dark"] .th26-404__search-input {
  color: #fbfaf5;
}
html[data-theme="dark"] .th26-404__search-input::placeholder {
  color: rgba(251, 250, 245, 0.55);
}
html[data-theme="dark"] .th26-404__search-btn {
  background: var(--sage-bright, #b8d59b);
  color: #0a1320;
}
html[data-theme="dark"] .th26-404__search-btn:hover,
html[data-theme="dark"] .th26-404__search-btn:focus-visible {
  background: #cae3aa;
}
html[data-theme="dark"] .th26-404__btn--primary {
  background: #fbfaf5;
  color: #0a1320;
  border-color: #fbfaf5;
}
html[data-theme="dark"] .th26-404__btn--primary:hover,
html[data-theme="dark"] .th26-404__btn--primary:focus-visible {
  background: #e8e3d4;
  border-color: #e8e3d4;
}
html[data-theme="dark"] .th26-404__btn--secondary {
  color: var(--sage-bright, #b8d59b);
  border-color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-404__btn--secondary:hover,
html[data-theme="dark"] .th26-404__btn--secondary:focus-visible {
  background: var(--sage-bright, #b8d59b);
  color: #0a1320;
}
html[data-theme="dark"] .th26-404__redirect {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fbfaf5;
}
html[data-theme="dark"] .th26-404__countdown {
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-404__redirect-sub {
  color: rgba(251, 250, 245, 0.6);
}

/* Respect reduced motion — disable the countdown smoothing
   (still updates, just no transitions). */
@media (prefers-reduced-motion: reduce) {
  .th26-404__btn,
  .th26-404__search-btn,
  .th26-404__search {
    transition: none;
  }
}


/* ============================================================
   v0.4.34 — Search/Archive whitespace + active-pill polish.
   ============================================================ */

/* --- (1) REDUCE WHITESPACE ABOVE THE HERO CARD on listing
   templates. The global rule at line ~122 adds
   calc(var(--header-h) + clamp(1rem, 3vw, 2rem)) of padding —
   that's 100-116px which made the hero card sit way below the
   header on every search / category / archive / blog page.
   Override to just clear the 84px fixed header plus a small
   visual breath, scoped to body classes WP applies on those
   page types.

   v0.4.43: extended to include `body.category` and
   `body.th26-browse-all` (/all-posts/) which were previously
   falling through to the global rule and getting too much
   padding. Also dropped the mobile branch — header is the same
   84px on mobile, so the clearance has to be the same. */
body.search main.wp-block-group,
body.archive main.wp-block-group,
body.category main.wp-block-group,
body.blog main.wp-block-group,
body.th26-browse-all main.wp-block-group {
  padding-top: calc(var(--header-h) + 0.5rem) !important;  /* ~92px total */
}


/* --- (2) ACTIVE-PILL POLISH for the multi-select toggle UX.
   Active pills get a sage fill + cream text to read like a
   chip-style "selected" state. The hover state is reserved for
   showing the would-be result of clicking (toggle preview). */
.th26-search-pills__pill {
  /* Add a subtle indicator that pills are interactive toggle
     buttons, not just static category links. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.th26-search-pills__pill[aria-pressed="true"],
.th26-search-pills__pill.th26-search-pills__pill--active {
  background: var(--accent-strong, #5d7649);
  color: #ffffff;
  border-color: var(--accent-strong, #5d7649);
}
/* Hover on an ACTIVE pill suggests removal (lighter sage) */
.th26-search-pills__pill[aria-pressed="true"]:hover,
.th26-search-pills__pill[aria-pressed="true"]:focus-visible,
.th26-search-pills__pill.th26-search-pills__pill--active:hover,
.th26-search-pills__pill.th26-search-pills__pill--active:focus-visible {
  background: var(--accent, #6f8a5a);
  border-color: var(--accent, #6f8a5a);
}
/* Hover on an inactive pill suggests addition (sage fill) — keep
   the existing hover rule which already does this. */

/* Dark-mode active pill: sage-bright fill on navy text */
html[data-theme="dark"] .th26-search-pills__pill[aria-pressed="true"],
html[data-theme="dark"] .th26-search-pills__pill.th26-search-pills__pill--active {
  background: var(--sage-bright, #b8d59b) !important;
  color: #0a1320 !important;
  border-color: var(--sage-bright, #b8d59b) !important;
}
html[data-theme="dark"] .th26-search-pills__pill[aria-pressed="true"]:hover,
html[data-theme="dark"] .th26-search-pills__pill[aria-pressed="true"]:focus-visible,
html[data-theme="dark"] .th26-search-pills__pill.th26-search-pills__pill--active:hover,
html[data-theme="dark"] .th26-search-pills__pill.th26-search-pills__pill--active:focus-visible {
  background: #cae3aa !important;
  border-color: #cae3aa !important;
}

/* When user has active selections, give the hero a faint accent
   bar so they see at a glance "I have filters on". */
body.th26-has-cat-filter .th26-search-hero {
  border-left: 3px solid var(--accent, #6f8a5a);
}
html[data-theme="dark"] body.th26-has-cat-filter .th26-search-hero {
  border-left-color: var(--sage-bright, #b8d59b);
}


/* ============================================================
   v0.4.35 — Compact archive hero with right-side blended image,
   breadcrumbs + back button, result count, mobile full-width.
   ============================================================ */

/* --- (1) BREADCRUMBS + BACK BUTTON above the hero --- */
.th26-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  color: var(--text-subtle, #4a5563);
}
.th26-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0a1320);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.th26-back-btn svg {
  width: 16px;
  height: 16px;
}
.th26-back-btn:hover,
.th26-back-btn:focus-visible {
  background: var(--accent-strong, #5d7649);
  border-color: var(--accent-strong, #5d7649);
  color: #ffffff;
  outline: none;
}
.th26-breadcrumbs__trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.th26-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.th26-breadcrumbs__item a {
  color: var(--text-subtle, #4a5563);
  text-decoration: none;
  transition: color 160ms ease;
}
.th26-breadcrumbs__item a:hover,
.th26-breadcrumbs__item a:focus-visible {
  color: var(--accent-strong, #5d7649);
  text-decoration: underline;
}
.th26-breadcrumbs__item [aria-current="page"] {
  color: var(--text, #0a1320);
  font-weight: 600;
}
.th26-breadcrumbs__sep {
  color: var(--text-subtle, #4a5563);
  opacity: 0.6;
  font-size: 14px;
  line-height: 1;
}

/* Dark mode */
html[data-theme="dark"] .th26-back-btn {
  border-color: rgba(255, 255, 255, 0.18);
  color: #fbfaf5;
}
html[data-theme="dark"] .th26-back-btn:hover,
html[data-theme="dark"] .th26-back-btn:focus-visible {
  background: var(--sage-bright, #b8d59b);
  border-color: var(--sage-bright, #b8d59b);
  color: #0a1320;
}
html[data-theme="dark"] .th26-breadcrumbs,
html[data-theme="dark"] .th26-breadcrumbs__item a {
  color: rgba(251, 250, 245, 0.72);
}
html[data-theme="dark"] .th26-breadcrumbs__item [aria-current="page"] {
  color: #fbfaf5;
}

/* Mobile breadcrumbs: keep on one line where possible */
@media (max-width: 600px) {
  .th26-breadcrumbs { gap: 10px; }
  .th26-breadcrumbs__trail { font-size: 12.5px; gap: 4px; }
  .th26-breadcrumbs__item { font-size: 12.5px; }
}


/* --- (2) COMPACT HERO WITH RIGHT-SIDE BLENDED IMAGE.
   Override the v0.4.32 .th26-search-hero rules with a slightly
   tighter footprint and a relative + overflow:hidden wrapper so
   we can paint a soft right-side image inside the rounded card. */
.th26-search-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(22px, 2.8vw, 36px) clamp(20px, 3vw, 40px);
  background: var(--bg-soft, #f5efe0);
  border-radius: 14px;
  text-align: center;
  isolation: isolate;
}
.th26-search-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

/* Right-side image layer — painted only when --th26-hero-image
   is set on the section by [cj_archive_header]. Uses a cream-to-
   transparent gradient mask so the image fades softly into the
   hero background without competing with the centered text. */
.th26-search-hero--has-image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background-image: var(--th26-hero-image, none);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.9) 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.9) 100%);
  z-index: 0;
  pointer-events: none;
}
/* And a second gradient layer sitting between text and image to
   guarantee text legibility (cream → transparent toward the right) */
.th26-search-hero--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg-soft, #f5efe0) 0%,
    var(--bg-soft, #f5efe0) 35%,
    rgba(245, 239, 224, 0.78) 55%,
    rgba(245, 239, 224, 0.18) 80%,
    rgba(245, 239, 224, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Dark-mode image overlays */
html[data-theme="dark"] .th26-search-hero {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .th26-search-hero--has-image::before {
  opacity: 0.55;
}
html[data-theme="dark"] .th26-search-hero--has-image::after {
  background: linear-gradient(
    to right,
    rgba(10, 19, 32, 0.85) 0%,
    rgba(10, 19, 32, 0.78) 35%,
    rgba(10, 19, 32, 0.55) 55%,
    rgba(10, 19, 32, 0.15) 80%,
    rgba(10, 19, 32, 0) 100%
  );
}

/* Active selection accent bar (overrides v0.4.34 — same idea,
   placed here so the compact hero overrides apply consistently) */
body.th26-has-cat-filter .th26-search-hero {
  border-left: 3px solid var(--accent, #6f8a5a);
}
html[data-theme="dark"] body.th26-has-cat-filter .th26-search-hero {
  border-left-color: var(--sage-bright, #b8d59b);
}

/* Compact title sizing in the new layout */
.th26-search-hero__title {
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 0 0 10px;
}
.th26-search-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
}
.th26-search-hero__lede {
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  margin: 0 0 18px;
}


/* --- (3) MOBILE HERO: full-width, edge-to-edge, less rounded.
   Negate the left/right padding of the wrapping <main> so the
   hero card bleeds to the screen edges. The visual result is a
   soft section block instead of an oval/pill card. */
@media (max-width: 700px) {
  .th26-search-hero {
    /* Pull out to the edges of the parent main padding by using
       negative margins equal to the main padding value. The
       theme's preset spacing 40 = clamp(1rem, 4vw, 2rem). */
    margin-left: calc(-1 * var(--wp--preset--spacing--40));
    margin-right: calc(-1 * var(--wp--preset--spacing--40));
    border-radius: 0;
    border-left: 0 !important;
    border-right: 0;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
  }

  /* Hide right-side image on mobile — too busy in a narrow column */
  .th26-search-hero--has-image::before,
  .th26-search-hero--has-image::after {
    display: none;
  }

  body.th26-has-cat-filter .th26-search-hero {
    /* On mobile, indicate active filters with a top border instead */
    border-top: 3px solid var(--accent, #6f8a5a);
  }
}


/* --- (4) PILL POLISH — overrides v0.4.34. Active pill stays
   sage filled. Hover on active suggests removal. */
.th26-search-pills {
  margin-top: 14px;
  gap: 6px 8px;
}
.th26-search-pills__pill {
  font-size: 12.5px;
  padding: 7px 14px;
}


/* --- (5) RESULT COUNT + PAGINATION FOOTER --- */
.th26-archive-footer {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  width: 100%;
  align-items: center;
  gap: 14px;
}
.th26-result-count {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  color: var(--text-subtle, #4a5563);
  margin: 0;
}
.th26-result-count strong {
  color: var(--text, #0a1320);
  font-weight: 700;
}
html[data-theme="dark"] .th26-result-count {
  color: rgba(251, 250, 245, 0.65);
}
html[data-theme="dark"] .th26-result-count strong {
  color: #fbfaf5;
}

.th26-pagination {
  margin: 0;
}
.th26-pagination .wp-block-query-pagination-numbers a,
.th26-pagination .wp-block-query-pagination-numbers span,
.th26-pagination .wp-block-query-pagination-previous,
.th26-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  margin: 0 2px;
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0a1320);
  text-decoration: none;
  background: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.th26-pagination .wp-block-query-pagination-numbers a:hover,
.th26-pagination .wp-block-query-pagination-numbers a:focus-visible,
.th26-pagination .wp-block-query-pagination-previous:hover,
.th26-pagination .wp-block-query-pagination-previous:focus-visible,
.th26-pagination .wp-block-query-pagination-next:hover,
.th26-pagination .wp-block-query-pagination-next:focus-visible {
  background: var(--bg-soft, #f5efe0);
  border-color: var(--text, #0a1320);
}
.th26-pagination .wp-block-query-pagination-numbers .current {
  background: var(--accent-strong, #5d7649);
  border-color: var(--accent-strong, #5d7649);
  color: #ffffff;
}
html[data-theme="dark"] .th26-pagination .wp-block-query-pagination-numbers a,
html[data-theme="dark"] .th26-pagination .wp-block-query-pagination-numbers span,
html[data-theme="dark"] .th26-pagination .wp-block-query-pagination-previous,
html[data-theme="dark"] .th26-pagination .wp-block-query-pagination-next {
  color: #fbfaf5;
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .th26-pagination .wp-block-query-pagination-numbers .current {
  background: var(--sage-bright, #b8d59b);
  border-color: var(--sage-bright, #b8d59b);
  color: #0a1320;
}

@media (max-width: 700px) {
  .th26-archive-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .th26-archive-footer .th26-result-count {
    text-align: center;
  }
  .th26-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* --- (6) MOBILE POST CARD LAYOUT — single column,
   horizontal image + text where space allows. Overrides
   the existing .th26-postgrid--blog grid on mobile only. */
@media (max-width: 700px) {
  .th26-postgrid--blog .wp-block-post-template,
  .th26-postgrid--search .wp-block-post-template {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }
  .th26-postgrid--blog .wp-block-post-template > li,
  .th26-postgrid--search .wp-block-post-template > li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: start;
  }
  .th26-postgrid--blog .wp-block-post-template > li .wp-block-post-featured-image,
  .th26-postgrid--search .wp-block-post-template > li .wp-block-post-featured-image {
    grid-row: 1 / span 5;
    margin: 0;
  }
  .th26-postgrid--blog .wp-block-post-template > li .wp-block-post-featured-image img,
  .th26-postgrid--search .wp-block-post-template > li .wp-block-post-featured-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
  }
  .th26-postgrid--blog .wp-block-post-template > li .th26-post-card-title,
  .th26-postgrid--search .wp-block-post-template > li .th26-post-card-title {
    font-size: 16px;
    line-height: 1.32;
    margin: 4px 0 6px;
  }
  .th26-postgrid--blog .wp-block-post-template > li .th26-post-card-date,
  .th26-postgrid--search .wp-block-post-template > li .th26-post-card-date {
    font-size: 12px;
  }
  .th26-postgrid--blog .wp-block-post-template > li .wp-block-post-author,
  .th26-postgrid--search .wp-block-post-template > li .wp-block-post-author {
    margin-top: 4px;
    font-size: 12px;
  }
}


/* ============================================================
   v0.4.36 — POST CARD CONSISTENCY ON ARCHIVE/SEARCH GRIDS.
   Fixes the "cards different sizes on every refresh + hovering
   causes layout shifts" bug on /packing/, /airlines/, etc.

   Root causes (both addressed below):
   (1) li:hover { transform: translateY(-3px) } at line 582
       moved entire cards on hover. With LiteSpeed lazy-load
       still resolving image dimensions, the transition + image
       swap created the perception of size jumps.
   (2) Lazy-load placeholders briefly inherit the source image's
       natural aspect (e.g. 1200x800 → 4:5 if intrinsic was
       different) before settling. Even with aspect-ratio:16/10
       on the figure, the swap can momentarily push the figure
       height if img isn't absolutely pinned.
   ============================================================ */

/* Aggressive figure sizing — works even when LiteSpeed lazy-load
   or another plugin strips inline img styles. */
.th26-postgrid .wp-block-post-featured-image,
.th26-postgrid--blog .wp-block-post-featured-image,
.th26-postgrid--search .wp-block-post-featured-image {
  aspect-ratio: 16 / 10 !important;
  width: 100% !important;
  height: auto !important;       /* aspect-ratio computes height */
  overflow: hidden !important;
  position: relative !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: var(--bg-strong, #e9e3d4);
  border-radius: 12px;
  flex: 0 0 auto !important;
  contain: layout paint !important;  /* don't let lazy-load reflow ripple out */
}
.th26-postgrid .wp-block-post-featured-image a,
.th26-postgrid--blog .wp-block-post-featured-image a,
.th26-postgrid--search .wp-block-post-featured-image a {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 12px;
}
/* Pin the img absolutely so it can NEVER push the figure taller
   than 16:10, regardless of lazy-load state. Override any inline
   width/height attributes too. */
.th26-postgrid .wp-block-post-featured-image img,
.th26-postgrid--blog .wp-block-post-featured-image img,
.th26-postgrid--search .wp-block-post-featured-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Smooth image-load: fade in instead of jump */
  transition: transform 360ms ease, opacity 200ms ease;
}

/* Grid container — equal cell heights, contained reflows */
.th26-postgrid .wp-block-post-template,
.th26-postgrid--blog .wp-block-post-template,
.th26-postgrid--search .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(20px, 2.2vw, 28px) !important;
  row-gap: clamp(28px, 3vw, 40px) !important;
  align-items: start !important;
}
@media (max-width: 1099px) and (min-width: 701px) {
  .th26-postgrid .wp-block-post-template,
  .th26-postgrid--blog .wp-block-post-template,
  .th26-postgrid--search .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Each li — column flex so meta sticks to bottom and cards align */
.th26-postgrid .wp-block-post-template > li,
.th26-postgrid--blog .wp-block-post-template > li,
.th26-postgrid--search .wp-block-post-template > li {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  contain: layout style !important;  /* isolate hover/lazy-load to this card */
}

/* REPLACE the disruptive translateY hover. Card stays put; only
   the image scales inside its overflow:hidden figure. Box-shadow
   gives a subtle lift cue without changing geometry. */
.th26-postgrid .wp-block-post-template > li,
.th26-postgrid--blog .wp-block-post-template > li,
.th26-postgrid--search .wp-block-post-template > li {
  transform: none !important;
  transition: none !important;
}
.th26-postgrid .wp-block-post-template > li:hover .wp-block-post-featured-image,
.th26-postgrid .wp-block-post-template > li:focus-within .wp-block-post-featured-image,
.th26-postgrid--blog .wp-block-post-template > li:hover .wp-block-post-featured-image,
.th26-postgrid--search .wp-block-post-template > li:hover .wp-block-post-featured-image {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  transition: box-shadow 220ms ease;
}
.th26-postgrid .wp-block-post-template > li:hover img,
.th26-postgrid .wp-block-post-template > li:focus-within img,
.th26-postgrid--blog .wp-block-post-template > li:hover img,
.th26-postgrid--search .wp-block-post-template > li:hover img {
  transform: scale(1.04) !important;
}

/* Mobile (≤700px) still keeps the v0.4.35 single-column list layout,
   no changes needed there — confirmed not affected by this fix. */


/* ============================================================
   v0.4.37 — Single-post breadcrumbs + refined meta row.
   Scoped under body.single .th26-single-content so no other
   template is affected.
   ============================================================ */

/* The breadcrumb row appears INSIDE the constrained 728px column
   above the categories. Override the v0.4.31 flush-left rule for
   the new wp-block-shortcode wrapper so the breadcrumb row stays
   in line with title/categories/featured-image. */
@media (min-width: 1100px) {
  body.single .th26-single-content > .wp-block-shortcode {
    max-width: 728px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100%;
  }
}

/* Tighter spacing under the breadcrumb row on singles */
body.single .th26-single-content .th26-breadcrumbs {
  margin: 0 0 18px;
}

/* Article title can sit closer to the meta row */
body.single .th26-single-content > .wp-block-post-title,
body.single .th26-single-content > .th26-single-title {
  margin-bottom: 14px;
}

/* --- NEW META ROW (cj_single_meta) ---
   Layout: author block left, divider, date right.
   Desktop: author left + date pushed far right via flex
   space-between.
   Mobile: same row but the divider becomes a visible vertical
   line and the date sits right next to it. */
body.single .th26-single-meta--v2 {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid var(--border, #e0d9c5);
  border-bottom: 1px solid var(--border, #e0d9c5);
  font-family: 'Manrope', sans-serif;
}
html[data-theme="dark"] body.single .th26-single-meta--v2 {
  border-top-color: rgba(255, 255, 255, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* Author sub-block */
body.single .th26-single-meta__author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body.single .th26-single-meta__avatar-link {
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
body.single .th26-single-meta__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
body.single .th26-single-meta__author-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
body.single .th26-single-meta__byline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-subtle, #4a5563);
  line-height: 1.2;
}
body.single .th26-single-meta__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text, #0a1320);
  text-decoration: none;
  line-height: 1.25;
}
body.single .th26-single-meta__name:hover,
body.single .th26-single-meta__name:focus-visible {
  color: var(--accent-strong, #5d7649);
}
html[data-theme="dark"] body.single .th26-single-meta__byline {
  color: rgba(251, 250, 245, 0.65);
}
html[data-theme="dark"] body.single .th26-single-meta__name {
  color: #fbfaf5;
}
html[data-theme="dark"] body.single .th26-single-meta__name:hover {
  color: var(--sage-bright, #b8d59b);
}

/* Date sub-block */
body.single .th26-single-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-subtle, #4a5563);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
body.single .th26-single-meta__date time {
  font-variant-numeric: tabular-nums;
}
body.single .th26-single-meta__cal {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-strong, #5d7649);
}
html[data-theme="dark"] body.single .th26-single-meta__date {
  color: rgba(251, 250, 245, 0.7);
}
html[data-theme="dark"] body.single .th26-single-meta__cal {
  color: var(--sage-bright, #b8d59b);
}

/* Divider: invisible filler on desktop (the flex space-between
   already separates), visible vertical line on mobile. */
body.single .th26-single-meta__divider {
  flex: 1 1 auto;
  display: block;
  height: 1px;
}
@media (max-width: 700px) {
  body.single .th26-single-meta--v2 {
    flex-wrap: nowrap;
    gap: 12px;
  }
  body.single .th26-single-meta__divider {
    flex: 0 0 1px;
    height: 28px;
    background: var(--border, #e0d9c5);
    align-self: center;
  }
  body.single .th26-single-meta__date {
    margin-left: 0;
  }
  /* Truncate long author names on narrow screens */
  body.single .th26-single-meta__author-text {
    overflow: hidden;
  }
  body.single .th26-single-meta__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 380px) {
  /* Very narrow screens: stack date below if it would overflow */
  body.single .th26-single-meta__date {
    font-size: 12px;
  }
  body.single .th26-single-meta__cal {
    width: 14px;
    height: 14px;
  }
}

/* Hide the v0.4.31 legacy meta row that's no longer rendered.
   Keep the rule for safety if someone re-adds the old block. */
body.single .th26-single-meta:not(.th26-single-meta--v2) .wp-block-post-date {
  /* still works the same as before, no specific override needed */
}

/* Breadcrumbs on single posts: prevent horizontal overflow on
   long titles or many crumbs. */
body.single .th26-breadcrumbs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.single .th26-breadcrumbs::-webkit-scrollbar { display: none; }
body.single .th26-breadcrumbs__trail {
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 700px) {
  body.single .th26-breadcrumbs__trail {
    flex-wrap: wrap;
    white-space: normal;
  }
  /* Truncate the very last (current) crumb if it's a long title */
  body.single .th26-breadcrumbs__item:last-child span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}


/* ============================================================
   v0.4.39 — FILTER BAR + MOBILE LIST VIEW.
   ============================================================ */

/* === Filter bar shell === */
.th26-filterbar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
  padding: 0;
  font-family: 'Manrope', sans-serif;
}

/* Search input — visually dominant, full width on mobile */
.th26-filterbar__search {
  flex: 1 1 280px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg, #fbfaf5);
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 999px;
  padding: 12px 18px;
  height: 56px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.th26-filterbar__search:focus-within {
  border-color: var(--accent, #6f8a5a);
  box-shadow: 0 0 0 3px rgba(111, 138, 90, 0.12);
}
.th26-filterbar__search svg {
  width: 18px; height: 18px;
  color: var(--text-subtle, #4a5563);
  flex-shrink: 0;
}
.th26-filterbar__search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--text, #0a1320);
  min-width: 0;
}
.th26-filterbar__search input::placeholder {
  color: var(--text-subtle, #4a5563);
}
.th26-filterbar__searchhint {
  font-size: 12px;
  color: var(--text-subtle, #4a5563);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Filter groups (Category, Year, Sort) — common style */
.th26-filterbar__group {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg, #fbfaf5);
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 0;
  transition: border-color 160ms ease;
}
.th26-filterbar__group:hover,
.th26-filterbar__group:focus-within {
  border-color: var(--accent, #6f8a5a);
}
.th26-filterbar__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle, #4a5563);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.th26-filterbar__group--cat,
.th26-filterbar__group--year { flex: 1 1 220px; }
.th26-filterbar__group--sort  { flex: 0 0 290px; }

/* Multi-select dropdown trigger */
.th26-multiselect {
  position: relative;
}
.th26-multiselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 4px 0 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--text, #0a1320);
  font-weight: 600;
  text-align: left;
  min-width: 0;
}
.th26-multiselect__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
  /* v0.4.45.1: allow wrap so the count badge can drop to a 2nd line
     on narrow phones rather than competing with the primary text and
     squeezing one or the other to invisible. */
  flex-wrap: wrap;
}
.th26-multiselect__primary,
.th26-multiselect__placeholder {
  font-weight: 600;
  color: var(--text, #0a1320);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  /* v0.4.45.1: explicit min-width:0 lets the primary actually
     truncate with ellipsis. Flex items default to min-width:auto
     (intrinsic content width) which combined with white-space:nowrap
     made the primary refuse to shrink and the badge pushed it out.
     flex: 0 1 auto (default) so the primary stays at content width
     when there's room; the badge wraps to the next line when there
     isn't (parent has flex-wrap: wrap). */
  min-width: 0;
}
.th26-multiselect__more {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent, #6f8a5a);
  color: var(--bg, #fbfaf5);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.th26-multiselect__count {
  font-size: 11px;
  color: var(--text-subtle, #4a5563);
  font-weight: 500;
  white-space: nowrap;
}
.th26-multiselect__caret {
  width: 14px; height: 14px;
  color: var(--text-subtle, #4a5563);
  transition: transform 160ms ease;
  flex-shrink: 0;
}
.th26-multiselect.is-open .th26-multiselect__caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.th26-multiselect__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -16px;
  right: -16px;
  background: var(--bg, #fbfaf5);
  border: 1px solid var(--border, #e0d9c5);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(10, 19, 32, 0.10);
  padding: 8px;
  z-index: 100;
  max-height: 380px;
  overflow-y: auto;
}
.th26-multiselect__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text, #0a1320);
  font-weight: 500;
  transition: background 120ms ease;
}
.th26-multiselect__option:hover,
.th26-multiselect__option:focus-within {
  background: var(--bg-soft, #f5efe0);
}
.th26-multiselect__option input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--accent, #6f8a5a);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* ============================================================
   v0.4.52 — Single-select dropdown (Year + Sort).
   Reuses .th26-multiselect markup classes so the trigger, panel,
   scroll area, and dark-mode rules all apply unchanged. These
   rules add the radio-circle indicator and the active-row styling
   that differentiate single-select from the multi-select Category
   dropdown.
   ============================================================ */
.th26-singleselect__option {
  /* Buttons render with a UA stroke on focus; we use the same
     :focus-within bg on the parent .th26-multiselect__option already,
     so kill the inner UA outline. */
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  width: 100%;
  color: inherit;
}
.th26-singleselect__option:focus { outline: none; }
.th26-singleselect__option:focus-visible {
  outline: 2px solid var(--accent, #6f8a5a);
  outline-offset: 2px;
}
.th26-singleselect__indicator {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent, #6f8a5a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th26-singleselect__indicator svg {
  width: 18px; height: 18px;
  display: block;
}
.th26-singleselect__dot {
  opacity: 0;
  transition: opacity 120ms ease;
}
.th26-multiselect__option--active .th26-singleselect__dot,
.th26-singleselect__option[aria-selected="true"] .th26-singleselect__dot {
  opacity: 1;
}
.th26-multiselect__option--active {
  background: var(--bg-soft, #f5efe0);
}
html[data-theme="dark"] .th26-multiselect__option--active {
  background: rgba(255,255,255,0.06);
}

/* v0.4.52.1 — Fix indicator getting stretched by the global
   `.th26-multiselect__option > span { flex: 1 1 auto !important }`
   rule from v0.4.48.1. The indicator is a direct child span and
   was matching that rule, growing to fill all extra row space and
   pushing the icon + label far right. Force it back to 18px fixed. */
.th26-multiselect__option > .th26-singleselect__indicator,
.th26-singleselect__option > .th26-singleselect__indicator {
  flex: 0 0 18px !important;
  width: 18px !important;
  max-width: 18px !important;
  overflow: visible !important;
}
/* Same idea on small phones where indicator scales down via the
   ≤480px rule but the >span flex:1 was still leaking. */
@media (max-width: 480px) {
  .th26-multiselect__option > .th26-singleselect__indicator,
  .th26-singleselect__option > .th26-singleselect__indicator {
    flex: 0 0 16px !important;
    width: 16px !important;
    max-width: 16px !important;
  }
  .th26-singleselect__indicator svg {
    width: 16px !important; height: 16px !important;
  }
}

/* v0.4.52.4 — Two theme-baked rules that previously lived only in
   customizer Additional CSS. Putting them in the theme makes them
   survive in case the customizer ever gets wiped (theme deletion
   followed by reinstall, accidental Reset Options in Appearance →
   Customize, etc.).

   FIX 1 — Hide the staging-environment banner on the frontend.
   `cj-staging-front-banner` is rendered by Hostinger's staging plugin
   (or a similar staging-environment indicator) as a flex container
   between `#wpadminbar` and `.wp-site-blocks` in the body. Because it
   sits in normal flow ABOVE wp-site-blocks, it pushes the entire site
   (including the fixed-position theme header's flow context) down by
   its rendered height. Visible symptom: the gap between the theme
   header and the breadcrumb / post content grew, even though the
   main element's padding-top stayed at the correct calc(--header-h + 8px).
   We don't need this banner on the frontend — the admin bar already
   shows a "STAGING" badge to logged-in admins, and anonymous visitors
   don't need it at all. Hide it everywhere with display:none.

   FIX 2 — Breadcrumb last-item truncation, baked into the theme.
   The customizer rule that truncated long post titles in the breadcrumb
   (so "Stay Charged: The Ultimate Guide to Airplane Power Outlets"
   shows as "Stay Charged: The Ultimate Guide…" instead of wrapping to
   two or three rows) needs to survive customizer wipes. Same selectors
   and same max-width: 55vw as the customizer rule. Scoped to ≤ 1023px
   because on desktop the breadcrumb has plenty of horizontal room and
   wrapping isn't a concern. */

.cj-staging-front-banner {
  display: none !important;
}

@media (max-width: 1023px) {
  .th26-breadcrumbs {
    overflow: hidden !important;
  }
  .th26-breadcrumbs ol,
  .th26-breadcrumbs ul {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .th26-breadcrumbs li:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .th26-breadcrumbs li:last-child > a,
  .th26-breadcrumbs li:last-child > span,
  .th26-breadcrumbs li:last-child .th26-breadcrumbs__current,
  .th26-breadcrumbs li[aria-current] > *,
  .th26-breadcrumbs li[aria-current] {
    display: inline-block !important;
    max-width: 55vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
  }
}

/* v0.4.52.1 — Year panel was anchoring to its parent's left edge
   (the mobile rule sets left: -16px; right: auto; width: calc(100vw - ...)).
   For the Category dropdown that's fine — it's the left column.
   For the Year dropdown on mobile (right column in the 2-up Cat|Year
   row), this pushed the panel off-screen to the right. Anchor it to
   the right edge of its trigger instead, so the panel grows leftward
   into available screen real estate. */
@media (min-width: 360px) and (max-width: 640px) {
  .th26-filterbar__group--year .th26-multiselect__panel {
    left: auto !important;
    right: -16px !important;
  }
}

/* v0.4.52.2 — Category trigger value vertical alignment.
   Cat trigger inner stack is label + value + "Multi-select" sublabel
   (3 rows) while Year trigger inner stack is label + value (2 rows).
   That extra row in Cat made the Category icon center higher than the
   Year icon, and made "All" sit at a different vertical position than
   "2025-2026 only" — the user wants both value rows to align.
   Fix: hide the sublabel on mobile (≤900px) where filter cards sit
   side-by-side and the misalignment is most visible. Desktop keeps it
   for discoverability since each filter has its own row of horizontal
   space to breathe. */
@media (max-width: 900px) {
  .th26-multiselect__sublabel { display: none !important; }
}

/* v0.4.52.2 — Year dropdown option labels were truncating to
   "2025-202..." in the panel because the panel width derived from the
   Year column (220px + 32px panel overhang = 252px) only left ~150px
   for the label text, and "2025-2026 only" at 14px Manrope is right at
   that threshold. Widened the Year column to 260px (panel becomes 292px,
   label gets ~190px) — comfortably fits the longest year option label
   plus the radio + calendar icon prefixes. */
@media (min-width: 901px) {
  .th26-filterbar__group--year .th26-multiselect__panel {
    min-width: 260px;
  }
}

.th26-multiselect__footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 8px 0;
  margin-top: 4px;
  border-top: 1px solid var(--border, #e0d9c5);
}
.th26-multiselect__apply {
  padding: 8px 18px;
  background: var(--accent, #6f8a5a);
  color: var(--bg, #fbfaf5);
  border: 0;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}
.th26-multiselect__apply:hover { background: var(--accent-strong, #5d7649); }

/* Native select styled to match (Year + Sort) */
.th26-nativeselect {
  position: relative;
  display: flex;
  align-items: center;
}
.th26-nativeselect select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 30px 2px 0;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0a1320);
  cursor: pointer;
  outline: none;
}
.th26-nativeselect__caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-subtle, #4a5563);
  pointer-events: none;
}

/* Dark mode */
html[data-theme="dark"] .th26-filterbar__search,
html[data-theme="dark"] .th26-filterbar__group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .th26-filterbar__search input,
html[data-theme="dark"] .th26-multiselect__primary,
html[data-theme="dark"] .th26-multiselect__placeholder,
html[data-theme="dark"] .th26-nativeselect select { color: #fbfaf5; }
html[data-theme="dark"] .th26-filterbar__label,
html[data-theme="dark"] .th26-multiselect__count,
html[data-theme="dark"] .th26-nativeselect__caret,
html[data-theme="dark"] .th26-multiselect__caret,
html[data-theme="dark"] .th26-filterbar__searchhint { color: rgba(251,250,245,0.6); }
html[data-theme="dark"] .th26-multiselect__panel {
  background: #1a2335;
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .th26-multiselect__option { color: #fbfaf5; }
html[data-theme="dark"] .th26-multiselect__option:hover { background: rgba(255,255,255,0.06); }

/* Mobile: stacked layout */
@media (max-width: 900px) {
  .th26-filterbar {
    gap: 10px;
    margin: 16px 0 24px;
  }
  .th26-filterbar__search {
    flex: 1 1 100%;
    height: 52px;
    padding: 10px 16px;
  }
  .th26-filterbar__group--cat,
  .th26-filterbar__group--year {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
  .th26-filterbar__group--sort {
    flex: 1 1 100%;
  }
  .th26-multiselect__panel {
    left: -16px;
    right: -16px;
  }
}
@media (max-width: 480px) {
  .th26-filterbar__group { padding: 8px 14px; }
  /* v0.4.45: previously this rule forced .th26-filterbar__group--cat and
     --year to flex 1 1 100% (full width each, stacked vertically) below
     480px. iPhone 14 Pro Max is 430px wide — within this range — so the
     filter pair stacked instead of sitting side-by-side per the mockup.
     Removed the stacking rule; only ultra-narrow viewports below 360px
     drop to single-column now. */
  .th26-nativeselect select,
  .th26-multiselect__trigger { font-size: 14px; }
}
@media (max-width: 359px) {
  /* Single-column only on very narrow legacy phones */
  .th26-filterbar__group--cat,
  .th26-filterbar__group--year { flex: 1 1 100%; }
}

/* ============================================================
   v0.4.39 — MOBILE LIST VIEW for post grids.
   Replaces v0.4.35 single-column mobile cards with a horizontal
   list (image left, content right), matching the approved mockup.
   ============================================================ */
@media (max-width: 700px) {
  /* Grid → list at mobile */
  .th26-postgrid .wp-block-post-template,
  .th26-postgrid--blog .wp-block-post-template,
  .th26-postgrid--search .wp-block-post-template {
    grid-template-columns: 1fr !important;
    row-gap: 0 !important;
  }
  .th26-postgrid .wp-block-post-template > li,
  .th26-postgrid--blog .wp-block-post-template > li,
  .th26-postgrid--search .wp-block-post-template > li {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    grid-template-rows: auto;
    column-gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--border, #e0d9c5);
    margin: 0 !important;
  }
  .th26-postgrid .wp-block-post-template > li:last-child {
    border-bottom: 0;
  }

  /* Featured image — left column, fixed 130x96 square-ish */
  .th26-postgrid .wp-block-post-template > li .wp-block-post-featured-image,
  .th26-postgrid--blog .wp-block-post-template > li .wp-block-post-featured-image,
  .th26-postgrid--search .wp-block-post-template > li .wp-block-post-featured-image {
    grid-row: 1 / span 99;
    grid-column: 1;
    width: 130px !important;
    height: 96px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 10px !important;
    flex: 0 0 130px;
    align-self: start;
  }
  /* Tags/title/excerpt/meta stack in right column */
  .th26-postgrid .wp-block-post-template > li > *:not(.wp-block-post-featured-image) {
    grid-column: 2;
    margin: 0;
  }
  .th26-postgrid .wp-block-post-template > li .taxonomy-category {
    font-size: 0;
    line-height: 0;
    margin-bottom: 6px !important;
  }
  .th26-postgrid .wp-block-post-template > li .taxonomy-category a {
    display: inline-block;
    padding: 3px 9px;
    margin-right: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--accent-strong, #5d7649) !important;
    border: 1px solid var(--accent, #6f8a5a);
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
  }
  .th26-postgrid .wp-block-post-template > li .wp-block-post-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: var(--text, #0a1320) !important;
  }
  .th26-postgrid .wp-block-post-template > li .wp-block-post-excerpt {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-subtle, #4a5563);
    margin: 0 0 6px !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .th26-postgrid .wp-block-post-template > li .wp-block-post-date,
  .th26-postgrid .wp-block-post-template > li .th26-post-card-date {
    font-size: 10.5px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle, #4a5563);
    margin: 0 0 4px !important;
  }
  .th26-postgrid .wp-block-post-template > li .wp-block-post-author {
    font-size: 11.5px !important;
    color: var(--text-subtle, #4a5563);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .th26-postgrid .wp-block-post-template > li .wp-block-post-author img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover;
  }

  /* Disable image scale-on-hover on mobile (touch friendly) */
  .th26-postgrid .wp-block-post-template > li:hover img {
    transform: none !important;
  }
}

/* ============================================================
   v0.4.39 — Result count + pagination footer.
   Move result count beside pagination at bottom of grid.
   ============================================================ */
.th26-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e0d9c5);
}
.th26-grid-footer .th26-result-count {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--text-subtle, #4a5563);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.th26-grid-footer .wp-block-query-pagination {
  margin: 0;
}
@media (max-width: 700px) {
  .th26-grid-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
  }
  .th26-grid-footer .wp-block-query-pagination {
    justify-content: center !important;
  }
}

/* Hide the old top-of-page result count when filter bar is present */
.th26-postgrid > .th26-result-count:first-of-type {
  display: none;
}

/* ============================================================
   v0.4.39 — Hero pills behavior: navigation only (per user spec).
   Remove the v0.4.34 multi-pill toggle styling so they look like
   simple navigation buttons. Active pill shows the current archive.
   Filter bar below handles all multi-select behavior.
   ============================================================ */
.th26-search-pills__pill[aria-pressed="true"],
.th26-search-pills__pill.is-extra-active {
  /* Just visually highlight the current archive — no "extra" multi-state */
  background: var(--accent-strong, #5d7649);
  color: var(--bg, #fbfaf5);
}


/* ============================================================
   v0.4.41 — Filter bar, dropdown, whitespace, single-post mobile.
   ============================================================ */

/* Dropdown: scrollable list + sticky Apply footer. v0.4.42 — scope
   `display:flex !important` to :not([hidden]) so the panel actually
   respects its `hidden` attribute on initial render. The previous
   unconditional !important overrode the user-agent [hidden]→display:none
   and made the panel render visible on every page load. */
.th26-multiselect__panel[hidden] {
  display: none !important;
}
.th26-multiselect__panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  max-height: min(60vh, 420px);
  padding: 0 !important;
  overflow: hidden;
}
.th26-multiselect__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 8px 4px;
  -webkit-overflow-scrolling: touch;
}
.th26-multiselect__footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 12px;
  background: inherit;
  border-top: 1px solid var(--border, #e0d9c5);
  margin: 0 !important;
}
html[data-theme="dark"] .th26-multiselect__footer {
  border-top-color: rgba(255,255,255,0.10);
}
.th26-multiselect__apply {
  padding: 9px 22px;
  font-size: 13px;
}
.th26-multiselect__scroll::-webkit-scrollbar {
  width: 6px;
}
.th26-multiselect__scroll::-webkit-scrollbar-thumb {
  background: var(--border, #e0d9c5);
  border-radius: 4px;
}

/* Small-screen safety: when the panel would extend past the
   viewport, force its height to fit and let the inner list scroll. */
@media (max-height: 600px) {
  .th26-multiselect__panel {
    max-height: 70vh;
  }
}

/* Hide the "count" string from the trigger label now that the
   dropdown doesn't track count anymore. Default is just the
   selected category name (or "All"). */
.th26-multiselect__count { display: none; }

/* ============================================================
   v0.4.41 — Single-post mobile header per image-3 spec.
   - Back button + breadcrumbs on the same row
   - Breadcrumbs wrap to next line if they exceed available width
   - Slightly larger breadcrumb text for easier tapping
   - Less space before category pills
   ============================================================ */
@media (max-width: 700px) {
  body.single .th26-breadcrumbs {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;  /* Back stays top-aligned when trail wraps */
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 0 0 14px !important;
    overflow: visible !important;        /* clear any horizontal-scroll fallback */
  }
  body.single .th26-back-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
    height: 32px;
    align-self: flex-start;
  }
  body.single .th26-breadcrumbs__trail {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap !important;
    gap: 6px 8px;
    white-space: normal !important;
    font-size: 13.5px;   /* up from 12-13px for tapping */
    line-height: 1.55;
    padding-top: 4px;
    align-items: center;
  }
  body.single .th26-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.single .th26-breadcrumbs__item:last-child span {
    /* v0.4.52.8 — was "wrap freely instead of truncating" in v0.4.41.
       User feedback: long titles produced 3-4 rows of trail, total
       breadcrumb area = 4-5 rows. Truncate single-line instead so
       trail stays compact (max 2 rows in the layout: items 1-N wrap
       naturally per their widths, title sits on its own row at end
       with ellipsis if too long). */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: inline-block !important;
  }
  body.single .th26-breadcrumbs__sep {
    color: #a8a190;
    font-size: 13px;
    margin: 0 2px;
  }
  /* Less air between breadcrumbs and category pills */
  body.single .th26-single-content > .wp-block-shortcode + .wp-block-post-terms,
  body.single .th26-single-content > .wp-block-shortcode + .th26-post-categories {
    margin-top: 0 !important;
  }
  body.single .th26-post-categories,
  body.single .wp-block-post-terms {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
}


/* ============================================================
   v0.4.42 — Filter bar icons + reorder + tightened whitespace.
   ============================================================ */

/* Group with left-side icon (Category, Year, Sort) */
.th26-filterbar__group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px 18px !important;
}
.th26-filterbar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-strong, #5d7649);
}
html[data-theme="dark"] .th26-filterbar__icon {
  color: var(--sage-bright, #b8d59b);
}
.th26-filterbar__group-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.th26-filterbar__group-inner .th26-filterbar__label {
  line-height: 1.2;
  margin-bottom: 2px;
}

/* Desktop order: Category, Year, Search (centered/flex), Sort */
@media (min-width: 901px) {
  .th26-filterbar {
    flex-wrap: nowrap;
  }
  .th26-filterbar__group--cat   { order: 1; flex: 0 1 240px; }
  .th26-filterbar__group--year  { order: 2; flex: 0 1 260px; }
  .th26-filterbar__search       { order: 3; flex: 1 1 auto; min-width: 260px; }
  .th26-filterbar__group--sort  { order: 4; flex: 0 1 290px; }
}

/* Mobile order: Search, Category+Year row, Sort */
@media (max-width: 900px) {
  .th26-filterbar__search       { order: 1; }
  .th26-filterbar__group--cat   { order: 2; }
  .th26-filterbar__group--year  { order: 3; }
  .th26-filterbar__group--sort  { order: 4; }
}

/* ============================================================
   v0.4.43 — Tight, header-aware whitespace for listing + single
   templates. The previous v0.4.42 block here hardcoded
   `padding-top: 14px` on every listing main, which is below the
   84px fixed-header height and tucked the back-button + breadcrumb
   row behind the header on /packing/, /search/, single posts, etc.
   The correct approach is to clear the header explicitly using
   var(--header-h), with a small 8px visual gap below it.

   Mobile: header is the same 84px tall (set by --header-h at :root),
   so the mobile rule needs the same clearance — NOT a smaller value.

   Single posts and the /all-posts/ browse view are also covered here
   because (a) they were both broken by the v0.4.42 hotfix, and
   (b) the v0.4.34 rule at line ~4485 only covers search/archive/blog. */
body.archive main.th26-blog-main,
body.category main.th26-blog-main,
body.search main.th26-blog-main,
body.blog main.th26-blog-main,
body.th26-browse-all main.th26-blog-main,
body.single main.th26-single-main {
  padding-top: calc(var(--header-h) + 8px) !important;  /* 92px total = 84px header + 8px gap */
}

/* The hero+filter spacing on listing pages (kept from v0.4.42, not
   header-related so this part wasn't broken). */
@media (max-width: 900px) {
  .th26-search-hero + .th26-filterbar,
  .th26-blog-hero + .th26-filterbar {
    margin-top: 14px !important;
  }
}

/* Defensive: hide any empty <p> that slips into the breadcrumb nav
   from wpautop or other filters. The PHP-side filter at priority 12
   strips these already, but this is a belt-and-suspenders rule that
   also catches any future regression. */
.th26-breadcrumbs p:empty {
  display: none !important;
}


/* ============================================================
   v0.4.44 — Outer header margin reset + filter bar layout polish.

   PROBLEM 1: 24px ghost margin above the header.
   ----------------------------------------------
   DevTools (Computed) confirmed the outer <header class="wp-block-
   template-part"> carries a margin-top: 24px. That margin comes from
   the WP core rule:
     :where(.wp-site-blocks) > *           { margin-block-start: 1.5rem }
     :where(.wp-site-blocks) > :first-child { margin-block-start: 0 }
   The header would normally match :first-child and zero out — BUT the
   StickThis plugin injects a <div class="sticky-element-placeholder">
   before the header, demoting it to second child and re-arming the
   24px margin. The wrapper itself collapses to height 0 because the
   inner .th26-header is position:fixed, so the margin shows up as a
   24px gap above the page that stacks on top of the 92px padding-top
   on main, producing the visible ~32px whitespace above the back
   button + breadcrumb row instead of the intended 8px.

   FIX: zero the margin on the outer template-part header explicitly. */
header.wp-block-template-part {
  margin-block-start: 0 !important;
}

/* PROBLEM 2: Filter bar wraps the search box to its own row on
   desktop because the four elements' minimum flex bases (220+220+
   280+260 + 3×12px gap = 1016px) exceed the constrained content
   column. Mockup shows all four inline. Tighten the bases so they
   pack into one row in the typical 940-1100px main column, then
   wrap naturally on narrower viewports without the mobile rules
   below it needing changes. */
@media (min-width: 901px) {
  .th26-filterbar {
    flex-wrap: nowrap;
  }
  .th26-filterbar__group--cat,
  .th26-filterbar__group--year {
    flex: 1 1 0;
    min-width: 140px;
  }
  .th26-filterbar__search {
    flex: 2 1 0;
    min-width: 200px;
  }
  .th26-filterbar__group--sort {
    flex: 1 1 0;
    min-width: 180px;
  }
}

/* ============================================================
   v0.4.45 — Mobile filter bar: tighter spacing, lighter weight,
   and "X selected" count badge for the category multi-select.
   Matches the design mockup more closely on iPhone-Pro-Max-class
   viewports (~430px wide), which were previously stacking
   Category and Year vertically and using oversized padding.
   ============================================================ */

/* Count badge that appears next to the primary value in the
   Category trigger when on a category page (e.g. "Packing • 1
   selected"). Small pill-style chip, deliberately subdued.
   v0.4.45.1: flex-shrink: 0 + max-content basis so the primary
   text truncates first instead of the badge, AND the badge can
   wrap to a new line below the primary if the row is too tight
   (parent uses flex-wrap: wrap). */
.th26-multiselect__count-badge {
  display: inline-block;
  margin-left: 0; /* parent gap handles spacing */
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent-strong, #5d7649);
  background: rgba(111, 138, 90, 0.10);
  border-radius: 999px;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
  flex: 0 0 auto;
}
html[data-theme="dark"] .th26-multiselect__count-badge {
  color: var(--sage-bright, #b8d59b);
  background: rgba(184, 213, 155, 0.14);
}

/* Mobile (≤ 900px): tighten everything per design mockup.
   The mockup target is ~60-65px tall filter cards; the prior
   padding (10px 18px) + 20px icon + label + 16px value text
   was rendering ~85-100px tall. */
@media (max-width: 900px) {
  .th26-filterbar {
    gap: 8px !important;
    margin: 14px 0 18px !important;
  }
  .th26-filterbar__group {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }
  .th26-filterbar__icon {
    width: 18px !important;
    height: 18px !important;
  }
  .th26-filterbar__label {
    font-size: 10.5px !important;
    margin-bottom: 1px !important;
  }
  .th26-multiselect__trigger,
  .th26-nativeselect select {
    font-size: 14.5px !important;
  }
  .th26-filterbar__search {
    height: 46px !important;
    padding: 8px 14px !important;
  }
  .th26-filterbar__search input {
    font-size: 14.5px !important;
  }
  /* The count badge sits closer to the primary text on mobile
     to fit comfortably inside the narrower Category card. */
  .th26-multiselect__count-badge {
    margin-left: 0; /* parent gap handles spacing */
    font-size: 10.5px;
    padding: 1px 7px;
  }
}

/* ============================================================
   v0.4.46 — Category/Archive page redesign
   ------------------------------------------------------------
   - Desktop filter order: Cat | Search | Year | Sort
     (Search is visually dominant via larger flex-grow)
   - 1440px max-width consistency (templates set contentSize)
   - "Multi-select" sublabel under the Category trigger
   - Polished empty-state UI inside wp:query-no-results
   - Grid-footer styling for the 0-results case
   ============================================================ */

/* -----------------------------------
   Desktop filter row order (≥ 901px)
   ----------------------------------- */
@media (min-width: 901px) {
  .th26-filterbar {
    align-items: stretch;
  }
  .th26-filterbar__group--cat   { order: 1; flex: 0 1 220px; }
  .th26-filterbar__search        { order: 2; flex: 2 1 360px; min-width: 280px; }
  .th26-filterbar__group--year  { order: 3; flex: 0 1 260px; }
  .th26-filterbar__group--sort  { order: 4; flex: 0 1 280px; }
  /* The cat card needs a touch more height to accommodate the
     new "Multi-select" sublabel without feeling cramped. */
  .th26-filterbar__group--cat { padding-bottom: 8px; }
}

/* -----------------------------------
   Mobile filter row order (≤ 900px)
   Search top → Cat+Year row → Sort row
   ----------------------------------- */
@media (max-width: 900px) {
  .th26-filterbar__search       { order: 1 !important; flex: 1 0 100% !important; }
  .th26-filterbar__group--cat   { order: 2 !important; flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .th26-filterbar__group--year  { order: 3 !important; flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .th26-filterbar__group--sort  { order: 4 !important; flex: 1 0 100% !important; }
}

/* -----------------------------------
   "Multi-select" sublabel (Category)
   Show when space allows, hide when tight.
   ----------------------------------- */
.th26-multiselect__sublabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-subtle, #4a5563);
  letter-spacing: 0.02em;
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
}
.th26-multiselect__sublabel svg {
  width: 11px;
  height: 11px;
  color: var(--accent, #6f8a5a);
  flex-shrink: 0;
}
/* Hide the sublabel below ~380px where the cat card is too narrow
   to display it cleanly alongside the trigger value. */
@media (max-width: 380px) {
  .th26-multiselect__sublabel { display: none; }
}
html[data-theme="dark"] .th26-multiselect__sublabel {
  color: rgba(251, 250, 245, 0.55);
}
html[data-theme="dark"] .th26-multiselect__sublabel svg {
  color: var(--sage-bright, #b8d59b);
}

/* -----------------------------------
   Grid-footer — 0-results state
   When there are no results, query-pagination renders empty (or
   a single disabled "1"). Style it as a soft disabled chip.
   ----------------------------------- */
.th26-grid-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 19, 32, 0.06);
  gap: 12px;
}
.th26-result-count--empty {
  color: var(--text-subtle, #4a5563);
}
.th26-result-count--empty strong {
  color: var(--text, #0a1320);
  font-weight: 600;
}
html[data-theme="dark"] .th26-grid-footer {
  border-top-color: rgba(251, 250, 245, 0.08);
}
html[data-theme="dark"] .th26-result-count--empty {
  color: rgba(251, 250, 245, 0.6);
}
html[data-theme="dark"] .th26-result-count--empty strong {
  color: var(--cream, #fbfaf5);
}

/* -----------------------------------
   Empty state (polished no-results)
   ----------------------------------- */
.th26-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 16px;
  margin: 0 auto;
  max-width: 580px;
}
.th26-empty-state__illustration {
  width: 200px;
  height: 160px;
  margin-bottom: 22px;
  display: block;
}
.th26-empty-state__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--text, #0a1320);
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.th26-empty-state__body {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-subtle, #4a5563);
  margin: 0 0 24px;
  max-width: 460px;
}
.th26-empty-state__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}
.th26-empty-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg, #fbfaf5);
  border: 1.5px solid var(--border, #e0d9c5);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, #0a1320);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
  cursor: pointer;
  min-height: 44px;
}
.th26-empty-state__btn:hover,
.th26-empty-state__btn:focus-visible {
  border-color: var(--accent, #6f8a5a);
  background: rgba(111, 138, 90, 0.05);
}
.th26-empty-state__btn:active {
  transform: translateY(1px);
}
.th26-empty-state__btn svg {
  width: 17px;
  height: 17px;
  color: var(--text-subtle, #4a5563);
  flex-shrink: 0;
}
.th26-empty-state__btn:hover svg {
  color: var(--accent, #6f8a5a);
}

/* Mobile-only "Try:" hints row */
.th26-empty-state__hints {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 0 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-subtle, #4a5563);
  max-width: 480px;
}
.th26-empty-state__hints-icon {
  width: 18px;
  height: 18px;
  color: var(--accent, #6f8a5a);
  flex-shrink: 0;
  margin-top: 1px;
}
.th26-empty-state__hints-text a {
  color: var(--accent, #6f8a5a);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.th26-empty-state__hints-text a:hover {
  color: var(--accent-strong, #5d7649);
}
@media (max-width: 900px) {
  .th26-empty-state {
    padding: 32px 16px 12px;
  }
  .th26-empty-state__illustration {
    width: 170px;
    height: 136px;
    margin-bottom: 18px;
  }
  .th26-empty-state__body {
    font-size: 14.5px;
  }
  .th26-empty-state__actions {
    width: 100%;
    gap: 10px;
  }
  .th26-empty-state__btn {
    flex: 1 1 0;
    min-width: 140px;
    justify-content: center;
    padding: 11px 16px;
  }
  /* Show "Try:" hints on mobile */
  .th26-empty-state__hints {
    display: flex;
  }
}
@media (max-width: 380px) {
  .th26-empty-state__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .th26-empty-state__btn {
    width: 100%;
  }
}

/* Dark mode adjustments */
html[data-theme="dark"] .th26-empty-state__title {
  color: var(--cream, #fbfaf5);
}
html[data-theme="dark"] .th26-empty-state__body,
html[data-theme="dark"] .th26-empty-state__hints {
  color: rgba(251, 250, 245, 0.65);
}
html[data-theme="dark"] .th26-empty-state__btn {
  background: rgba(251, 250, 245, 0.04);
  border-color: rgba(251, 250, 245, 0.18);
  color: var(--cream, #fbfaf5);
}
html[data-theme="dark"] .th26-empty-state__btn:hover {
  background: rgba(184, 213, 155, 0.08);
  border-color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-empty-state__btn svg {
  color: rgba(251, 250, 245, 0.55);
}
html[data-theme="dark"] .th26-empty-state__btn:hover svg {
  color: var(--sage-bright, #b8d59b);
}
html[data-theme="dark"] .th26-empty-state__hints-icon,
html[data-theme="dark"] .th26-empty-state__hints-text a {
  color: var(--sage-bright, #b8d59b);
}

/* -----------------------------------
   1440px content-width tweaks
   Templates now use contentSize:1440px (was 1200px). Ensure
   related panels/cards scale comfortably at the wider stop and
   that the post grid stays at a sensible card size.
   ----------------------------------- */
@media (min-width: 1280px) {
  /* Post grid: keep cards comfortably sized at 1440px width.
     With 3 columns and 32px gap, each card is ~448px wide which
     is the sweet spot per the mockup. */
  .th26-postgrid--blog .wp-block-post-template,
  .th26-postgrid--search .wp-block-post-template {
    gap: 32px;
  }
}

/* CSS for old single-paragraph .th26-no-results class — keep as
   fallback for any old templates that might still reference it. */
.th26-no-results {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-subtle, #4a5563);
  font-size: 16px;
}


/* ============================================================
   v0.4.48 — Mobile polish round 1.
   Six issues from the design review on /packing/ mobile:
   1. Remove header-to-hero gap.
   2. Hero card edge-to-edge (full viewport width on phones).
   3. Search input clear-X affordance (real-time filter already works).
   4. Multiselect dropdown polish: remove the "Multi-select" sublabel
      icon, center-align option contents, reduce vertical padding,
      add per-category icons.
   5. Year + Sort dropdowns matching the Multiselect theme is queued
      for v0.4.49 (PHP+JS rewrite, not safe to bundle here).
   6. Tighter post-grid vertical gap on phones.
   ============================================================ */

/* --- (1) Remove the gap between fixed header and the hero on mobile.
   Memory #13 rule: padding-top on main wrappers must use the
   calc(var(--header-h) + Npx) pattern so the breadcrumb/hero never
   tucks behind the 84px fixed header. We keep the form, but set N=0
   on phones so the hero touches the underside of the header. The
   clamp value (16–32px) only applies on viewports ≥ 769px. */
@media (max-width: 768px) {
    body:not(.home) main.wp-block-group {
        padding-top: calc(var(--header-h) + 0px) !important;
    }
}

/* --- (2) Hero edge-to-edge on mobile. The main wrapper retains its
   horizontal padding so the filter bar + post grid don't slam into
   the screen edge — instead, the hero breaks out via negative left
   and right margins equal to that padding, becoming 100vw effective
   width with sharp corners. Border-radius zeroed for the flush look,
   and the hero's own internal padding is tightened so the title and
   pills don't feel cramped against the edges. */
@media (max-width: 768px) {
    .th26-search-hero {
        margin-left: calc(-1 * var(--pad-side)) !important;
        margin-right: calc(-1 * var(--pad-side)) !important;
        margin-bottom: 16px !important;
        border-radius: 0 !important;
        padding: 22px 18px !important;
    }
}

/* --- (3) Search clear-X button. Positioned absolutely on the right
   side of the .th26-filterbar__search label. Inserted by JS only
   when there's text in the input; hidden via the [hidden] attr at
   rest. Color matches the magnifying-glass icon on the left. */
.th26-filterbar__search {
    position: relative;
}
.th26-filterbar__search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--bg-soft, #f5efe0);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle, #6b7280);
    transition: background 120ms ease, color 120ms ease;
    z-index: 2;
}
.th26-filterbar__search-clear:hover {
    background: var(--accent, #6f8a5a);
    color: var(--bg, #fbfaf5);
}
.th26-filterbar__search-clear svg {
    width: 12px;
    height: 12px;
    display: block;
}
.th26-filterbar__search-clear[hidden] {
    display: none !important;
}
/* Reserve room on the right edge of the input so the typed text
   doesn't slide under the clear button. The base input padding
   already has some right padding; we add a bit more for safety. */
.th26-filterbar__search input[type="text"] {
    padding-right: 44px !important;
}
html[data-theme="dark"] .th26-filterbar__search-clear {
    background: rgba(255,255,255,0.06);
    color: #cdd5dd;
}
html[data-theme="dark"] .th26-filterbar__search-clear:hover {
    background: var(--accent, #6f8a5a);
    color: #fbfaf5;
}

/* --- (4a) Multiselect sublabel: SVG removed at the PHP level.
   This rule is the defensive belt: even if a cached page somewhere
   still has the old markup, the icon is suppressed visually. The
   "Multi-select" text label is preserved. */
.th26-multiselect__sublabel svg {
    display: none !important;
}

/* --- (4b) Multiselect options: per-category leading icon, centered
   content, tighter padding. The icon sits between the checkbox and
   the text and inherits color from the option's font color (sage on
   the checked / hover state). */
.th26-multiselect__option {
    justify-content: center !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    text-align: center !important;
}
.th26-multiselect__option-icon {
    width: 20px;
    height: 20px;
    color: var(--accent, #6f8a5a);
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.th26-multiselect__option:hover .th26-multiselect__option-icon,
.th26-multiselect__option:focus-within .th26-multiselect__option-icon {
    color: var(--accent-strong, #5d7649);
}
.th26-multiselect__option > span {
    flex: 0 1 auto;
    min-width: 0;
}
/* Slightly tighter on small phones so all five options + Apply
   button fit in the visible viewport once the panel auto-scrolls
   into view (issue #4 sub-bullet). */
@media (max-width: 480px) {
    .th26-multiselect__option {
        padding: 6px 10px !important;
        gap: 8px !important;
        font-size: 13.5px !important;
    }
    .th26-multiselect__option-icon {
        width: 18px;
        height: 18px;
    }
    .th26-multiselect__panel {
        padding: 6px !important;
        max-height: 70vh !important;
    }
    .th26-multiselect__footer {
        padding: 6px 6px 0 !important;
    }
}
html[data-theme="dark"] .th26-multiselect__option-icon {
    color: var(--accent, #9eb588);
}

/* --- (6) Tighter post-grid vertical rhythm on phones. The base rule
   sets gap: 32px on every viewport, which on a single-column phone
   layout produces ~32px of dead space between every card. The user
   review noted the result list felt extremely long and that the
   only acceptable in-between whitespace was Raptive ad slots. This
   reduces card-to-card gap to 14px below 640px (where the grid is
   single-column) and 20px between 640–1024px (two-column tablet).
   Desktop 3-column is unchanged at 32px. */
@media (max-width: 639px) {
    .th26-postgrid .wp-block-post-template {
        gap: 14px !important;
    }
    /* Reduce the image-to-content gap inside each card too, since
       the smaller card height makes the 16px margin look heavy. */
    .th26-postgrid .wp-block-post-featured-image {
        margin: 0 0 10px !important;
    }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .th26-postgrid .wp-block-post-template {
        gap: 20px !important;
    }
}


/* ============================================================
   v0.4.48.1 — Hotfix from mobile review feedback on v0.4.48.
   Two issues:
   (A) Category dropdown panel is too narrow on mobile. The
       multiselect parent occupies the 50%-wide Cat filter group,
       and the panel's -16/-16 left/right offsets only nudge it
       a touch wider — net width ~50% viewport. "Travel Tips"
       wraps to a second line, options feel cramped.
   (B) Options were center-justified per v0.4.48 spec, but with
       variable label lengths each row centered independently —
       the checkbox + icon columns no longer share a consistent
       left edge from row to row. Revert to left-aligned for a
       clean list-of-items appearance with all left edges aligned.
   ============================================================ */

/* (A) Widen the dropdown panel on mobile. Anchors to the multiselect's
   left edge but extends nearly the full filter bar width — capped at
   400px so it stays sensible on small tablets. */
@media (max-width: 640px) {
    .th26-multiselect__panel {
        left: -16px !important;
        right: auto !important;
        width: calc(100vw - 2 * var(--pad-side) - 12px) !important;
        min-width: 260px !important;
        max-width: 400px !important;
    }
}

/* (B) Left-align option contents. Checkbox first, icon next, label
   after — all sharing one left edge across rows. Label takes the
   remaining width and ellipsis-truncates if absurdly long (won't
   happen in practice with the widened panel above). */
.th26-multiselect__option {
    justify-content: flex-start !important;
    text-align: left !important;
}
.th26-multiselect__option > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}


/* ============================================================
   v0.4.48.2 — Hotfix from review feedback on v0.4.48.1.
   Three bugs to fix:
   - Header → breadcrumb white space (v0.4.48's mobile rule was
     gated to <=768px only; wider browsers still got the global
     clamp(1rem,3vw,2rem) that adds 16-32px above the breadcrumb).
   - Search clear-X overlaps the "N on page" hint when typing.
   - Post-grid vertical gap reduction not visible — the rule was
     gated to <=639px AND the per-card internal block margins
     added back the apparent space we'd just removed from gap.
   ============================================================ */

/* Bug 1: Universal tight header → content padding. Was applied
   only under @media(max-width:768px) in v0.4.48 — wider viewports
   still got the global rule's clamp(1rem,3vw,2rem) of breathing
   room. Apply on every viewport. Memory #13 form preserved
   (calc(var(--header-h) + Npx) with N=8 — keeps an 8px gap below
   the 84px fixed header so the breadcrumb is never tucked behind). */
body:not(.home) main.wp-block-group {
    padding-top: calc(var(--header-h) + 8px) !important;
}

/* Bug 2: Position the "N on page" hint absolutely to the LEFT
   of the clear-X button. v0.4.48 inserted both as descendants of
   .th26-filterbar__search, but the hint had default flow (last
   child of the label) while the clear-X was absolute on the
   right — when text was typed they ended up in the same visual
   slot. Both now absolute on the right edge, hint at right:44px
   (clearing the 24px clear-X + 12px right edge + 8px gap), with
   a small background chip so it reads cleanly over the input. */
.th26-filterbar__searchhint {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11.5px;
    line-height: 1;
    color: var(--text-subtle, #6b7280);
    background: var(--bg, #fbfaf5);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}
html[data-theme="dark"] .th26-filterbar__searchhint {
    color: #cdd5dd;
    background: #1a2435;
}
/* Reserve room on the right of the input for: 12px (edge) + 24px
   (clear-X) + 8px (gap) + ~52px (hint chip) = ~96px. Round to 100. */
.th26-filterbar__search input[type="text"] {
    padding-right: 100px !important;
}

/* Bug 3a: Post-grid gap, universally tight. Was gated to <=639px
   in v0.4.48 with !important inside the media query — likely
   missed the user's actual viewport. Apply at base unconditionally,
   then widen at tablet/desktop breakpoints. */
.th26-postgrid .wp-block-post-template {
    gap: 16px !important;
}
@media (min-width: 640px) {
    .th26-postgrid .wp-block-post-template {
        gap: 20px !important;
    }
}
@media (min-width: 1024px) {
    .th26-postgrid .wp-block-post-template {
        gap: 32px !important;
    }
}

/* Bug 3b: Tighten internal block margins inside each card on
   mobile. Even with a 16px gap between <li>s, each card stacks
   featured-image + pills + title + excerpt + meta with default
   block margins (~16px each) — which adds visible space at the
   top and bottom of every card and makes the gap APPEAR much
   larger than 16px. Trim every block to 4-8px. */
@media (max-width: 768px) {
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-featured-image {
        margin: 0 0 8px !important;
    }
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-title,
    .th26-postgrid .wp-block-post-template > li > h2 {
        margin: 4px 0 6px !important;
    }
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-excerpt,
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-excerpt > p {
        margin: 0 0 6px !important;
    }
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-terms,
    .th26-postgrid .wp-block-post-template > li > .taxonomy-category {
        margin: 0 0 6px !important;
    }
    /* Trim trailing margin on the last child of every card so cards
       end flush with their content. */
    .th26-postgrid .wp-block-post-template > li > :last-child {
        margin-bottom: 0 !important;
    }
}


/* ============================================================
   v0.4.48.3 — Bug-fix round from review feedback on v0.4.48.2.

   Bug 1 root cause: NOT padding-top. The breadcrumb shortcode
   is inside a wp:shortcode block, and WP runs wpautop BEFORE
   do_shortcode on `the_content`. So wpautop sees [cj_breadcrumbs]
   on its own line and wraps it: <p>[cj_breadcrumbs]</p>. After
   shortcode processing: <p><nav class="th26-breadcrumbs">...
   </nav></p>. Browsers reject <nav> inside <p> and auto-close
   the <p> before the <nav>, creating an empty <p></p> AND a
   trailing orphan </p> that becomes an empty <p></p>. Each
   has default ~16px margin. The Customizer override had a
   .th26-breadcrumbs > p:empty rule that hid it, which is why
   the bug wasn't visible before — generalize that rule to all
   shortcode markers, baked into theme CSS.

   Bug 3: featured image aspect-ratio 16/10 on a 350px-wide
   phone card = 218px just for the image. Reduce to 4/3 on
   mobile. Plus continue tightening internal block margins.

   Bug 4 / Issue 7: standardize filter group padding to 8px
   14px across all three groups so labels and values align
   horizontally between Category and Year. Reduce font sizes
   and internal gaps so the dropdowns feel compact like the
   mockup. Everything left-aligned.
   ============================================================ */

/* Bug 1: hide wpautop's ghost empty <p>s inside main content.
   This is what was previously covered by .th26-breadcrumbs > p:empty
   in the Customizer override. Generalize so every shortcode
   container that wpautop wraps gets the same treatment. */
body:not(.home) main p:empty,
body:not(.home) main.wp-block-group p:empty,
body:not(.home) main.th26-blog-main p:empty,
body:not(.home) main.th26-single-main p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Also kill any <p> with only whitespace content (some wpautop
   variants leave a literal "\n " or " " inside the tag rather
   than truly empty). Modern browsers support :has(); the rule
   below is the defensive belt for those that don't yet. */
body:not(.home) main p:not(:has(*)) {
    /* Only matches <p> tags with no element children. If the only
       text is whitespace, the rule above already collapsed it.
       This adds a 0-margin reset so even a non-empty whitespace
       paragraph won't push siblings around. */
    margin-block: 0;
}

/* Bug 3: shorter cards on mobile. */
@media (max-width: 768px) {
    /* Featured image: 4/3 instead of 16/10 cuts ~50px off each
       single-column card. */
    .th26-postgrid .wp-block-post-template > li .wp-block-post-featured-image {
        aspect-ratio: 4/3 !important;
    }
    /* Remove height: 100% on grid items — single-column grid
       items don't need to stretch, and the rule was causing
       weird height behavior in some browsers. */
    .th26-postgrid .wp-block-post-template > li {
        height: auto !important;
    }
    /* Tighter image-to-content gap. */
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-featured-image {
        margin: 0 0 6px !important;
    }
    /* All other blocks inside the card: 4px top/bottom margin. */
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-terms,
    .th26-postgrid .wp-block-post-template > li > .taxonomy-category,
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-title,
    .th26-postgrid .wp-block-post-template > li > h2,
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-excerpt,
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-date,
    .th26-postgrid .wp-block-post-template > li > .wp-block-post-author {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    .th26-postgrid .wp-block-post-template > li > :first-child {
        margin-top: 0 !important;
    }
    .th26-postgrid .wp-block-post-template > li > :last-child {
        margin-bottom: 0 !important;
    }
}

/* Bug 4 / Issue 7: compact dropdown trigger styling with
   consistent left-alignment across Category, Year, Sort. */

/* Standardize the outer group padding so all three dropdowns
   have the same vertical extent — labels align horizontally. */
.th26-filterbar__group {
    padding: 8px 14px !important;
    gap: 10px !important;
}
.th26-filterbar__group-inner {
    gap: 0 !important;
}

/* Label "Category" / "Year" / "Sort by" — same size, left-aligned,
   minimal margin to the value below. */
.th26-filterbar__label {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 1px !important;
    text-align: left !important;
}

/* Multi-select trigger: zero internal padding, smaller font,
   text-left so "All" aligns with "Category" above. */
.th26-multiselect__trigger {
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}
.th26-multiselect__value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.th26-multiselect__primary {
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

/* Multi-select sublabel "Multi-select" — left-aligned, very
   small, sits just under the value. */
.th26-multiselect__sublabel {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-top: 1px !important;
    margin-bottom: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* Native select (Year, Sort) — left-aligned text, same font size
   as the Multi-select trigger so values line up at same baseline. */
.th26-nativeselect {
    width: 100% !important;
}
.th26-nativeselect select {
    padding: 0 24px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    background: transparent !important;
    height: auto !important;
    text-align: left !important;
}


/* ============================================================
   v0.4.52.7 — Breadcrumb layout + clearance from header.

   Append-at-end placement: previous v0.4.52.6 attempt placed these
   rules at line ~5550, before the v0.4.41 block at line 6017+ which
   declares the conflicting body.single mobile rules. Equal specificity
   + later source order made v0.4.41 win the cascade. This block lives
   at the end of style.css to guarantee source-order priority over
   every earlier mobile/single-post rule.

   THREE FIXES IN ONE BLOCK:

   FIX 1 — Padding-top clearance for breadcrumb (single AND archive).
   User reported on desktop the back button + breadcrumb are "almost
   completely under the top nav bar" on both single posts and category
   archives. Root cause is that the theme logo (.th26-logo-img) is
   `height: 64px` at line 143 while the header itself is
   `height: var(--header-h)` = 56px. The logo overflows the header by
   ~4px below the header's actual bottom edge. The existing padding-top
   formula `calc(var(--header-h) + 8px)` leaves only ~4px clearance
   from the LOGO's visible bottom — visually the breadcrumb looks like
   it's tucked right under the logo / nav bar. Boost the buffer from
   8px to 24px so the breadcrumb sits ~20px below the logo's visible
   bottom edge.

   FIX 2 — Force nav nowrap on body.single (all viewports).
   With base `flex-wrap: wrap` on .th26-breadcrumbs and the trail at
   `flex-wrap: nowrap` on body.single, a long trail (5 crumbs + post
   title) can be wide enough that back button + trail won't fit in
   one row of the nav. The back button wraps to its own row above
   the trail, which puts it within ~10px of the fixed header — tucked
   behind it. Force nowrap on the nav so back stays inline.

   FIX 3 — Mobile single: trail nowrap + title truncate.
   The v0.4.41 block at @media (max-width: 700px) explicitly sets
   `body.single .th26-breadcrumbs__trail { flex-wrap: wrap !important }`
   and `body.single .th26-breadcrumbs__item:last-child span { white-space:
   normal !important; max-width: 100% !important }`. That lets long
   titles wrap to 3-4 rows of trail. Override with matching specificity
   selectors and later source order to force single-line trail + 55vw
   title truncate with ellipsis.

   FIX 4 — Desktop single: title truncate to 40vw.
   Same truncation pattern at ≥ 1024px with a tighter max-width because
   the article column on desktop shares horizontal space with the
   sidebar (Advertisement). 40vw on a 1400px viewport = 560px which
   fits the article column with room to spare for the rest of the trail. */

/* FIX 1 — Clearance below 56px fixed header for the breadcrumb row.
   v0.4.55.7: Reduced buffer from 40px to 8px to match the documented
   standard `calc(--header-h + 8px)` rhythm used everywhere else in the
   theme (see memory note: "Correct: calc(var(--header-h) + 8px) !important.
   Mobile = same value."). The 40px buffer was introduced at some prior
   point (likely a workaround for a now-resolved breadcrumb collision)
   and was producing a visible 40px gap on category, archive, search,
   blog, and browse-all pages — most clearly visible on /category/
   pages where header (56px) + padding-top (96px) = 40px of dead space
   below the fixed header before the breadcrumb row. Specificity of
   this selector group is (0,0,2,2) which beats the Customizer Additional
   CSS rule at (0,0,1,3), so the customizer couldn't override it — the
   theme rule itself had to change. */
body.single main.th26-single-main,
body.archive main.th26-blog-main,
body.category main.th26-blog-main,
body.search main.th26-blog-main,
body.blog main.th26-blog-main,
body.th26-browse-all main.th26-blog-main {
  padding-top: calc(var(--header-h, 56px) + 8px) !important;
}

/* FIX 2 — Back button stays inline with trail on body.single */
body.single .th26-breadcrumbs {
  flex-wrap: nowrap !important;
}

/* FIX 3 — Tablet body.single (701px–1023px): title truncate.
   On mobile (≤700px) the v0.4.41 title rule at line 6042 was edited
   directly in v0.4.52.8 to truncate single-line — that handles the
   mobile case at the source. This rule covers the tablet gap between
   v0.4.41's mobile breakpoint (700px) and FIX 4's desktop breakpoint
   (1024px). Higher specificity selector with html prefix to win
   against any earlier rule at equal-spec source-order ties. */
@media (min-width: 701px) and (max-width: 1023px) {
  html body.single .th26-breadcrumbs__item:last-child span {
    display: inline-block !important;
    max-width: 50vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
  }
}

/* FIX 4 — Desktop body.single: title truncate to 40vw.
   html prefix boosts specificity from (0,3,2) to (0,3,3) so this
   rule wins regardless of LiteSpeed's CSS combine ordering. */
@media (min-width: 1024px) {
  html body.single .th26-breadcrumbs__item:last-child > a,
  html body.single .th26-breadcrumbs__item:last-child > span,
  html body.single .th26-breadcrumbs__item:last-child .th26-breadcrumbs__current,
  html body.single .th26-breadcrumbs__item:last-child span {
    display: inline-block !important;
    max-width: 40vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
  }
}


/* ============================================================
   v0.4.53.0 — Back-button indent fix on desktop single posts.

   User feedback after v0.4.52.9: breadcrumb has good clearance from
   the header now, but on desktop the visible "Back" text inside the
   pill is indented ~11px to the right of where the H1 title starts
   below it. Because the back button is a pill (.th26-back-btn has
   `padding: 6px 14px 6px 10px` and `border: 1px solid`), the pill's
   outer-left edge IS aligned with x=0 of the article column but the
   visible "Back" text sits 11px inside the pill chrome. The H1 has
   no padding so its first letter is at x=0 — visually the text
   doesn't line up even though the boxes do.

   Fix: pull the back button 10px to the left so the back-arrow icon
   aligns with the H1's first letter. Desktop only (≥1100px) since
   mobile has different positioning rules from v0.4.41.

   Safe: on a 728px content column inside a 1180px grid there's
   ~226px of empty horizontal space to the left of the column,
   so the pill chrome extending 10px outside the column has zero
   clipping risk. */

@media (min-width: 1100px) {
  body.single .th26-back-btn {
    margin-left: -10px;
  }
}

/* ============================================================
   v0.4.53.3 — "View all articles →" CTA for The latest +
   Reader favorites sections on the front page.
   Desktop: link sits on the SAME LINE as the section H2 title
   ("The latest." / "Reader favorites.") and right-aligns with
   the same right edge as the shop section's "All gear →" link.
   Title stays visually centered via a 1fr/auto/1fr grid where
   the link occupies col 3 and pushes the visual baseline to
   align with the title text via align-items:baseline.
   Mobile (≤700px): centered pill button below the grid
   (matches .th26-shop-side__browse styling).
   ============================================================ */

/* Title row: holds the H2 + the right-aligned link on one row.
   - Grid 1fr / auto / 1fr keeps the H2 (col 2) visually centered
     regardless of link length. Col 1 is intentionally empty so
     the H2 stays in the visual middle.
   - max-width + padding mirror .th26-shop__head exactly, so the
     link's right edge lands at the SAME X coordinate as
     "All gear →" in the shop section above.
   - align-items: baseline aligns the link text baseline with
     the H2 text baseline — that's the "same line as title"
     visual effect the user described. */
.th26-section__title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: clamp(16px, 2vw, 32px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
}
.th26-section__title-row .th26-section-title {
  grid-column: 2;
  /* Preserve the existing 16px bottom margin between title and dek. */
  margin: 0 0 16px;
}

.th26-section__head-link {
  grid-column: 3;
  justify-self: end;
  align-self: baseline;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 4px;
  transition: all var(--t-fast);
  text-decoration: none;
  /* The bottom margin matches the title's bottom margin so when
     align-items: baseline alignment falls back at edge cases,
     the trailing whitespace is consistent. */
  margin-bottom: 16px;
  /* Prevent the link from forcing the grid column to wrap by
     enforcing single-line. */
  white-space: nowrap;
}
.th26-section__head-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Hide the mobile pill button on desktop. */
.th26-section__browse { display: none; }

@media (max-width: 700px) {
  /* Hide the desktop top-right link on mobile — it would collide
     with the centered section title at narrow widths. The title
     still centers in grid col 2 with col 3 empty. */
  .th26-section__head-link { display: none; }

  /* Mobile pill button matching .th26-shop-side__browse exactly:
     dark background, light text, rounded, centered below grid. */
  .th26-section__browse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 24px auto 0;
    padding: 15px 24px;
    background: var(--text);
    color: var(--bg);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--t-fast);
  }
  .th26-section__browse:hover {
    background: var(--accent);
    color: var(--bg) !important;
    transform: translateY(-1px);
  }
}

/* ============================================================
   v0.4.54.0 — About page (/about/, post 181)
   Scoped under .cj-about__* — selectors do not leak to other
   templates. Paired with templates/page-about.html which uses
   layout:default (no contentSize cap) so sections control their
   own widths via .cj-about__*-inner max-width.
   Reuses existing tokens: --bg, --bg-soft, --text, --text-muted,
   --text-subtle, --accent, --border, --maxw, --pad-side,
   --header-h, --t-fast, --t-med, font stacks already declared
   at :root.
   ============================================================ */

/* Main wrapper for the About page — clears the 84px fixed header
   so the hero starts immediately below the nav bar. No max-width
   here; the page is full-bleed. */
.cj-about-main {
  padding-top: var(--header-h);
  background: var(--bg);
}

/* Shared building blocks ----------------------------------- */

.cj-about__eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px; /* was 14px — tighter rhythm into the H2 below */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cj-about__eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}
.cj-about__eyebrow--center {
  display: flex;
  justify-content: center;
}
.cj-about__eyebrow--center::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}

.cj-about__h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 16px; /* was 24px — pulls body content up closer to title */
}
.cj-about__h2--center {
  text-align: center;
  margin: 0 auto 20px; /* was 0 auto 40px — pulls feature/team cards
                          up into a tighter section rhythm */
  max-width: 24ch;
}

.cj-about__btn,
.cj-about__btn:link,
.cj-about__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  background: var(--accent);
  color: var(--bg) !important; /* !important needed: theme.json injects
                                  :root a:not(.wp-element-button){color:var(--text)}
                                  with specificity (0,0,2,1) which beats .cj-about__btn (0,0,1,0).
                                  Using var(--bg) inverts the text per color mode:
                                    Light: cream on sage-deep    → ~7:1 contrast ✓
                                    Dark:  navy  on sage-bright  → ~7:1 contrast ✓
                                  (Plain #fff in dark mode = white on sage-bright = ~2:1 = invisible). */
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--t-fast);
}
.cj-about__btn:hover {
  background: var(--text);
  color: var(--bg) !important;
  transform: translateY(-1px);
}

/* 1. Hero --------------------------------------------------- */

.cj-about__hero {
  position: relative;
  overflow: hidden;
  max-height: 78vh;
  min-height: 380px;
}
.cj-about__hero-img {
  display: block;
  width: 100%;
  height: clamp(380px, 60vh, 640px);
  object-fit: cover;
  object-position: center;
}
.cj-about__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  /* Soft gradient on the left side so text stays readable
     regardless of the hero image used. */
  background: linear-gradient(90deg, rgba(251,250,245,0.85) 0%, rgba(251,250,245,0.60) 35%, rgba(251,250,245,0.10) 65%, rgba(251,250,245,0) 100%);
}
.cj-about__hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  margin: 0 0 20px;
  max-width: 14ch;
}
.cj-about__hero-intro {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  max-width: 44ch;
}

/* 2. Our Story (two-column) -------------------------------- */

.cj-about__story {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
}
.cj-about__story-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start; /* was center — pins text column to top of row */
}
@media (min-width: 900px) {
  .cj-about__story-inner {
    grid-template-columns: 1fr 1fr;
  }
}
/* Explicit cell-level alignment — defends against any future
   parent rule that might re-center this column. */
.cj-about__story-text {
  align-self: start;
}
/* Story section eyebrow override — defeats the more-specific
   .cj-about__story-text p rule (specificity 0,0,1,1) which would
   otherwise force margin-bottom: 16px on the eyebrow paragraph. */
.cj-about__story-text .cj-about__eyebrow {
  margin: 0 0 8px;
}
.cj-about__story-text .cj-about__h2 {
  margin: 0 0 16px;
}
.cj-about__story-text p {
  font-family: 'Manrope', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
  max-width: 52ch;
}
/* Explicit paragraph break inserted in post 181 content
   between "readers face today." and "Our team of travelers..." */
.cj-about__story-break {
  display: block;
  height: 1.25rem;
}
.cj-about__story-text .cj-about__btn { margin-top: 12px; }
.cj-about__story-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(58,67,50,0.10);
}
.cj-about__story-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* 3. What We Do (4 feature cards) -------------------------- */

.cj-about__features {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
}
.cj-about__features-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  text-align: center;
}
.cj-about__features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .cj-about__features-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .cj-about__features-grid { grid-template-columns: repeat(4, 1fr); }
}
.cj-about__feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all var(--t-fast);
}
.cj-about__feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(58,67,50,0.08);
}
.cj-about__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(138,154,114,0.14);
  color: var(--accent);
  margin: 0 0 18px;
}
.cj-about__feature-icon svg { width: 26px; height: 26px; }
.cj-about__feature-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.cj-about__feature-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* 4. Meet the Team ----------------------------------------- */

.cj-about__team {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg-soft);
}
.cj-about__team-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  text-align: center;
}
.cj-about__team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .cj-about__team-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .cj-about__team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .cj-about__team-grid { grid-template-columns: repeat(5, 1fr); }
}
.cj-about__team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 20px;
  text-align: center;
}
.cj-about__team-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 16px;
}
.cj-about__team-name {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.cj-about__team-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subtle);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
}
.cj-about__team-bio {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.cj-about__team-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.cj-about__team-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-subtle);
  border-radius: 50%;
  transition: all var(--t-fast);
}
.cj-about__team-social a:hover {
  color: var(--accent);
  background: rgba(138,154,114,0.10);
}
.cj-about__team-social svg { width: 16px; height: 16px; }
.cj-about__team-cta { margin-top: 36px; }

/* 5. Featured In -------------------------------------------- */

.cj-about__featured-in {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cj-about__featured-in-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  text-align: center;
}
.cj-about__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: 24px;
}
.cj-about__logo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: -0.01em;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.cj-about__logo:hover { opacity: 1; }

/* 6. Mission & Promise ------------------------------------- */

.cj-about__mission {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
}
.cj-about__mission-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-side);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .cj-about__mission-inner {
    grid-template-columns: 320px 1fr;
  }
}
.cj-about__mission-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(58,67,50,0.10);
}
.cj-about__mission-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 9;
  object-fit: cover;
}
.cj-about__mission-lede {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 60ch;
}
.cj-about__mission-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
@media (min-width: 700px) {
  .cj-about__mission-cards { grid-template-columns: repeat(3, 1fr); }
}
.cj-about__mission-card {
  padding: 18px 16px;
}
.cj-about__mission-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--accent);
  margin: 0 0 10px;
}
.cj-about__mission-icon svg { width: 22px; height: 22px; }
.cj-about__mission-title {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.cj-about__mission-card-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.cj-about__mission-link {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.cj-about__mission-link a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 7. Contact CTA -------------------------------------------- */

.cj-about__contact {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.cj-about__contact-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 28px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(58,67,50,0.06);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start; /* was center — pins body column to top of row
                         so "Let's connect." aligns with the icon row
                         in .cj-about__contact-info instead of vertically
                         centering between the image bottom and card bottom. */
  margin-left: var(--pad-side);
  margin-right: var(--pad-side);
}
@media (min-width: 900px) {
  .cj-about__contact-inner {
    grid-template-columns: 240px 1fr 1.2fr;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxw);
  }
}
.cj-about__contact-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  align-self: start;
}
/* Force body column to top-align so "Let's connect." sits on the
   same line as the row of icons in .cj-about__contact-info. */
.cj-about__contact-body {
  align-self: start !important;
}
.cj-about__contact-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.cj-about__contact-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 12px;
}
.cj-about__contact-lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.cj-about__contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 600px) {
  .cj-about__contact-info { grid-template-columns: repeat(2, 1fr); }
}
.cj-about__contact-block { padding: 0; }
.cj-about__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin: 0 0 8px;
}
.cj-about__contact-icon svg { width: 20px; height: 20px; }
.cj-about__contact-label {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
.cj-about__contact-block p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.cj-about__contact-block a {
  color: var(--accent);
  text-decoration: none;
}
.cj-about__contact-block a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile refinements (≤700px) ------------------------------ */

@media (max-width: 700px) {
  /* Hero — collapse gradient to almost-full overlay so text
     reads clearly over any image. Centered alignment still ok. */
  .cj-about__hero-overlay {
    background: linear-gradient(180deg, rgba(251,250,245,0.95) 0%, rgba(251,250,245,0.85) 60%, rgba(251,250,245,0.55) 100%);
    align-items: flex-start;
    padding: 2rem 1.25rem;
  }
  .cj-about__hero-title { max-width: none; }
  .cj-about__hero-intro { max-width: none; }

  /* Eyebrow underline: keep both bars on centered eyebrows so
     they don't look lopsided on mobile when title wraps. */
  .cj-about__eyebrow--center { justify-content: flex-start; }
  .cj-about__features-inner,
  .cj-about__team-inner,
  .cj-about__featured-in-inner { text-align: left; }
  .cj-about__h2--center { text-align: left; margin-left: 0; }
  .cj-about__team-cta { text-align: left; }

  /* Mission single column, image first, smaller portrait. */
  .cj-about__mission-img { aspect-ratio: 4 / 3; }

  /* Contact card pads inset further so it doesn't touch edges. */
  .cj-about__contact-inner {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ============================================================
   v0.4.54.1 — Icon mask-images for /about/ page
   Royal MCP's wp_update_post strips inline <svg> from post
   content via wp_kses_post(), and the Block Editor's content
   filter does the same. Every time the About page content is
   saved through either path, the SVG icons inside the feature
   cards, mission cards, contact blocks, and team social links
   get silently stripped, leaving empty <span> and <a> shells.
   This block fixes it for good: icon glyphs now live in CSS
   as `mask-image` data URIs, applied via ::before pseudo on
   the existing icon containers. The visible color comes from
   `background: currentColor` so each container's existing
   color value (var(--accent), var(--text-subtle)) still drives
   the icon color. The page HTML stays SVG-free, so subsequent
   saves through MCP or Block Editor can't break the icons.
   Position-based via :nth-child so no class changes needed on
   the existing HTML.
   ============================================================ */

/* Shared ::before base for all four icon families */
.cj-about__feature-icon::before,
.cj-about__mission-icon::before,
.cj-about__contact-icon::before,
.cj-about__team-social a::before {
  content: '';
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.cj-about__feature-icon::before { width: 26px; height: 26px; }
.cj-about__mission-icon::before  { width: 22px; height: 22px; }
.cj-about__contact-icon::before  { width: 20px; height: 20px; }
.cj-about__team-social a::before { width: 16px; height: 16px; }

/* Feature icons — 4 cards in order: suitcase, lightbulb, airplane, users */
.cj-about__feature:nth-child(1) .cj-about__feature-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='16' height='13' rx='2'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/><line x1='4' y1='13' x2='20' y2='13'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='16' height='13' rx='2'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/><line x1='4' y1='13' x2='20' y2='13'/></svg>");
}
.cj-about__feature:nth-child(2) .cj-about__feature-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c.7.6 1 1.4 1 2.3h6c0-.9.3-1.7 1-2.3A7 7 0 0 0 12 2Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c.7.6 1 1.4 1 2.3h6c0-.9.3-1.7 1-2.3A7 7 0 0 0 12 2Z'/></svg>");
}
.cj-about__feature:nth-child(3) .cj-about__feature-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></svg>");
}
.cj-about__feature:nth-child(4) .cj-about__feature-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

/* Mission icons — 3 cards in order: dollar, heart, refresh */
.cj-about__mission-card:nth-child(1) .cj-about__mission-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v10'/><path d='M15 9.5c0-.83-1.34-1.5-3-1.5s-3 .67-3 1.5 1.34 1.5 3 1.5 3 .67 3 1.5-1.34 1.5-3 1.5-3-.67-3-1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v10'/><path d='M15 9.5c0-.83-1.34-1.5-3-1.5s-3 .67-3 1.5 1.34 1.5 3 1.5 3 .67 3 1.5-1.34 1.5-3 1.5-3-.67-3-1.5'/></svg>");
}
.cj-about__mission-card:nth-child(2) .cj-about__mission-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}
.cj-about__mission-card:nth-child(3) .cj-about__mission-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>");
}

/* Contact icons — 2 blocks in order: envelope (Email Us), chat (Reader Feedback).
   Work With Us removed in v0.4.55.1 — :nth-child(2) was previously users glyph. */
.cj-about__contact-block:nth-child(1) .cj-about__contact-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
}
.cj-about__contact-block:nth-child(2) .cj-about__contact-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

/* Team social icons — 3 per card in order: instagram, email, linkedin */
.cj-about__team-social a:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='0.5' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='0.5' fill='black'/></svg>");
}
.cj-about__team-social a:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
}
.cj-about__team-social a:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6Z'/><rect x='2' y='9' width='4' height='12'/><circle cx='4' cy='4' r='2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6Z'/><rect x='2' y='9' width='4' height='12'/><circle cx='4' cy='4' r='2'/></svg>");
}

/* ============================================================
   v0.4.54.2 — Landing-page mobile: remove gap above hero
   User reported on mobile the front page renders a visible
   white band between the fixed header and the top of the
   hero. Scope is intentionally TIGHT:
   - body.home only (won't touch any other page/post/archive)
   - @media (max-width: 700px) only (desktop unchanged)
   Anything that could be contributing top whitespace on the
   landing-page main wrapper or the hero element itself is
   forced to 0. The fixed header still overlays the top 84px
   of the page; the hero's background image now fills behind
   it directly, no gap.
   ============================================================ */

@media (max-width: 700px) {
  body.home main.wp-block-group,
  body.home .th26-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.home .th26-hero,
  body.home .th26-hero--carousel {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* ====================================================================
   v0.4.55.4 — ABOUT PAGE FORCED OVERRIDES
   Applied at end of file so cascade order guarantees this block wins
   against any earlier rule in this stylesheet AND any inline theme.json
   styles WP injects in <head>. Uses .cj-about-main scoping (the body
   <main> wrapper) to bump specificity past anything global, plus
   !important on the spacing/alignment declarations.

   Why these are duplicates of earlier rules in this file: the same
   declarations exist higher up (v0.4.55.1) but were not winning on
   the live page — possibly LiteSpeed CSS-combine cache serving an
   old combined.css, possibly WP-injected :where() rules creating
   cascade order issues, possibly other. Brute force is the fix.

   NEW in this block:
   - Mission cards: icon centered above title, all content centered

   PURGE INSTRUCTIONS — after deploy, in this exact order:
   1. LiteSpeed → Toolbox → Purge All — LSCache
   2. LiteSpeed → Toolbox → Purge All — Object Cache
   3. LiteSpeed → Toolbox → Purge All — CSS/JS Cache  (this is the one
      that's usually the culprit — combined/minified CSS bundle)
   4. Cloudflare → Caching → Purge Everything
   ==================================================================== */

/* 1. EYEBROW — tighter rhythm, scoped + !important */
.cj-about-main .cj-about__eyebrow {
  margin: 0 0 8px !important;
}

/* 2. H2 — tighter rhythm */
.cj-about-main .cj-about__h2 {
  margin: 0 0 16px !important;
}

/* 3. H2 CENTERED variant — tighter into the cards/grids below */
.cj-about-main .cj-about__h2--center {
  margin: 0 auto 20px !important;
  text-align: center !important;
  max-width: 24ch !important;
}

/* 4. STORY-TEXT — pin column to top of row */
.cj-about-main .cj-about__story-text {
  align-self: start !important;
}

/* 5. STORY BREAK — explicit gap between paragraphs 2 and 3 */
.cj-about-main .cj-about__story-break {
  display: block !important;
  height: 1.25rem !important;
}

/* 6. CONTACT-INNER + CONTACT-BODY — top-align all three columns
      so "Let's connect." sits in line with the icon row */
.cj-about-main .cj-about__contact-inner {
  align-items: start !important;
}
.cj-about-main .cj-about__contact-img-wrap,
.cj-about-main .cj-about__contact-body,
.cj-about-main .cj-about__contact-info {
  align-self: start !important;
  justify-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.cj-about-main .cj-about__contact-body > *:first-child {
  margin-top: 0 !important;
}

/* 7. STORY-INNER — pin both columns to top */
.cj-about-main .cj-about__story-inner {
  align-items: start !important;
}

/* 8. SECTION VERTICAL PADDING TRIM — make features/team/mission
      sections noticeably shorter by reducing top + bottom padding.
      Was clamp(3rem, 6vw, 5rem) i.e. 48-80px each side; now 32-56px. */
.cj-about-main .cj-about__features,
.cj-about-main .cj-about__team,
.cj-about-main .cj-about__mission,
.cj-about-main .cj-about__featured-in {
  padding-top: clamp(2rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

/* 9. NEW v0.4.55.4 — MISSION CARDS: center icon above title
      (icon was inline-flex which collapses to left when the card
      has default left text alignment). text-align:center cascades
      into the inline-flex icon AND keeps title + body text centered
      for a clean vertical stack: [icon] [title] [body text]. */
.cj-about-main .cj-about__mission-card {
  text-align: center !important;
}
.cj-about-main .cj-about__mission-icon {
  display: inline-flex !important;
  margin: 0 auto 10px !important;
}
.cj-about-main .cj-about__mission-title {
  text-align: center !important;
}
.cj-about-main .cj-about__mission-card-text {
  text-align: center !important;
}


/* ====================================================================
   v0.4.55.5 — Three follow-ups after user confirmed v0.4.55.4 fixes
   1. Mission card icons: shrink container to match visible icon size
      (was 36x36 holding a 22x22 ::before painted icon = ~7px dead
      space on each side, plus 10px margin-bottom = 17px of whitespace
      between visible icon bottom and title top). Now container is
      22x22 matching the icon and margin-bottom drops to 4px.
   2. Contact body: add 16px margin-top on the Contact Us button so
      lede paragraph (margin-bottom 16px) + button margin-top 16px
      = ~32px breathing room between the lede and the CTA.
   3. DARK MODE: three card backgrounds were hardcoded #fff so they
      stay glaring white in dark mode. Switch to var(--surface) which
      resolves to white in light and slate #14202f in dark. Also fix
      the hero overlay gradient — was hardcoded cream rgba(251,250,245)
      which made cream hero text invisible in dark mode (cream-on-cream).
      Now uses var(--bg) so it inverts cleanly between modes.
   ==================================================================== */

/* 10. MISSION ICON — shrink container, kill whitespace below */
.cj-about-main .cj-about__mission-icon {
  width: 22px !important;
  height: 22px !important;
  margin: 0 auto 4px !important;
}

/* 11. CONTACT BODY BUTTON — space between lede and CTA */
.cj-about-main .cj-about__contact-body .cj-about__btn {
  margin-top: 16px !important;
}

/* 12. DARK MODE — card backgrounds. var(--surface) resolves to
       #ffffff in light mode and #14202f in dark mode, so this is
       safe in both modes. !important defends against the older
       hardcoded #fff rule that lives higher in this file. */
.cj-about-main .cj-about__feature,
.cj-about-main .cj-about__team-card,
.cj-about-main .cj-about__contact-inner {
  background: var(--surface) !important;
}

/* 13. DARK MODE — hero overlay. Was hardcoded cream gradient that
       made cream hero text (var(--text) in dark mode) invisible
       against the cream overlay. Use var(--bg) so the overlay
       inverts: cream-fade-to-transparent in light, navy-fade-to-
       transparent in dark. Text contrast preserved in both modes.
       Gradient stops kept the same (0.95 / 0.85 / 0.55 opacity). */
.cj-about-main .cj-about__hero-overlay {
  background: linear-gradient(
    180deg,
    rgb(from var(--bg) r g b / 0.95) 0%,
    rgb(from var(--bg) r g b / 0.85) 60%,
    rgb(from var(--bg) r g b / 0.55) 100%
  ) !important;
}
/* Fallback for older browsers that don't support relative-color
   syntax — hardcoded values per mode via the data-theme switch. */
.cj-about-main .cj-about__hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(253, 251, 247, 0.95) 0%,
    rgba(253, 251, 247, 0.85) 60%,
    rgba(253, 251, 247, 0.55) 100%
  );
}
html[data-theme="dark"] .cj-about-main .cj-about__hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 19, 32, 0.95) 0%,
    rgba(10, 19, 32, 0.85) 60%,
    rgba(10, 19, 32, 0.55) 100%
  ) !important;
}


/* ====================================================================
   v0.4.55.6 — Kill the line-box dead space between mission card icon
   and title. v0.4.55.5 shrunk the container to 22x22 and reduced
   margin to 4px, but the inline-flex display kept the element inside
   an inline line-box whose height was driven by inherited body
   line-height (~1.6 × ~16px = ~25.6px). That gave a 25.6px tall
   line-box containing a 22px icon, plus inline descender gap below,
   plus 4px margin-bottom = 10-15px of perceived whitespace below
   the visible icon BEFORE the title even rendered. User's screenshot
   highlighted exactly this band.

   Fix: convert the card to a flex column (children stack with
   explicit margins, no line-box ambiguity), make the icon a real
   block 22x22 with line-height: 0 to neutralize any font-metric
   space, and put 4px on the title's margin-top for breathing.
   ==================================================================== */
.cj-about-main .cj-about__mission-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 14px 16px !important;
}
.cj-about-main .cj-about__mission-icon {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.cj-about-main .cj-about__mission-icon::before {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
.cj-about-main .cj-about__mission-title {
  margin: 4px 0 8px 0 !important;
}
.cj-about-main .cj-about__mission-card-text {
  margin: 0 !important;
}

/* ============================================================
   v0.4.X — Category/archive postgrid fills main width
   ============================================================
   The default .th26-postgrid rule (~line 558) caps the grid at
   --maxw (1280px). On category/archive/search pages, the parent
   <main class="th26-blog-main"> renders much wider (~1720px on
   1920px viewports), creating visible whitespace on the right
   of the post grid while the hero and filter bar above span
   the full main width.

   This override removes the cap on listing pages only. Single
   posts keep the 1280px reading-width cap (handled by
   .th26-single-main rules around line 1875). */
body.archive .th26-postgrid .wp-block-post-template,
body.category .th26-postgrid .wp-block-post-template,
body.search .th26-postgrid .wp-block-post-template,
body.blog:not(.home) .th26-postgrid .wp-block-post-template,
body.th26-browse-all .th26-postgrid .wp-block-post-template {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   v0.4.X — Category/archive postgrid fills main width
   ============================================================
   The default .th26-postgrid rule (~line 558) caps the grid at
   --maxw (1280px). On category/archive/search pages, the parent
   <main class="th26-blog-main"> renders much wider (~1720px on
   1920px viewports), creating visible whitespace on the right
   of the post grid while the hero and filter bar above span
   the full main width.

   This override removes the cap on listing pages only. Single
   posts keep the 1280px reading-width cap (handled by
   .th26-single-main rules around line 1875). */
body.archive .th26-postgrid .wp-block-post-template,
body.category .th26-postgrid .wp-block-post-template,
body.search .th26-postgrid .wp-block-post-template,
body.blog:not(.home) .th26-postgrid .wp-block-post-template,
body.th26-browse-all .th26-postgrid .wp-block-post-template {
  max-width: 100%;

/* ============================================================
   v0.4.X — Breadcrumb matches hero alignment on listing pages
   ============================================================
   The hero (.th26-search-hero) is max-width: 1440px centered
   inside <main>, leaving ~125px gutters on each side. The
   breadcrumb was rendering at the absolute left edge of <main>,
   making it look detached. Apply the same 1440px max-width and
   auto-center to align the breadcrumb's left edge with the hero. */
body.archive main.th26-blog-main > nav.th26-breadcrumbs,
body.category main.th26-blog-main > nav.th26-breadcrumbs,
body.search main.th26-blog-main > nav.th26-breadcrumbs,
body.blog main.th26-blog-main > nav.th26-breadcrumbs,
body.th26-browse-all main.th26-blog-main > nav.th26-breadcrumbs {
  max-width: 1440px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v0.4.X-debug — maximum-specificity breadcrumb alignment */
html body.archive main.th26-blog-main nav.th26-breadcrumbs,
html body.category main.th26-blog-main nav.th26-breadcrumbs,
html body.search main.th26-blog-main nav.th26-breadcrumbs,
html body.blog main.th26-blog-main nav.th26-breadcrumbs,
html body.th26-browse-all main.th26-blog-main nav.th26-breadcrumbs {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* v0.4.X-final — force breadcrumb auto-center, override the
   base .th26-breadcrumbs `margin: 0 0 14px` shorthand which
   sets margin-left/right to 0 and beats the wp-container
   auto-center rule. */
html body.archive main.th26-blog-main > nav.th26-breadcrumbs,
html body.category main.th26-blog-main > nav.th26-breadcrumbs,
html body.search main.th26-blog-main > nav.th26-breadcrumbs,
html body.blog main.th26-blog-main > nav.th26-breadcrumbs,
html body.th26-browse-all main.th26-blog-main > nav.th26-breadcrumbs {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px;
}

/* v0.4.X-final2 — breadcrumb content alignment.
   The previous max-width + auto-center approach was overridden
   by the existing .th26-breadcrumbs base rule. Instead of
   fighting specificity, add left padding to push the breadcrumb
   content to align with the hero's left edge. The hero is
   centered at max-width 1440px inside <main> (1722.67px wide),
   so hero starts at ((1722.67 - 1440) / 2) = 141.33px from
   main's content-box left. Use a CSS calc so this stays
   responsive: padding-left = max((100% - 1440px) / 2, 0px). */
html body.archive main.th26-blog-main > nav.th26-breadcrumbs,
html body.category main.th26-blog-main > nav.th26-breadcrumbs,
html body.search main.th26-blog-main > nav.th26-breadcrumbs,
html body.blog main.th26-blog-main > nav.th26-breadcrumbs,
html body.th26-browse-all main.th26-blog-main > nav.th26-breadcrumbs {
  padding-left: max((100% - 1440px) / 2, 0px) !important;
  padding-right: max((100% - 1440px) / 2, 0px) !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* v0.4.X-final3 — UCSS-friendly breadcrumb alignment.
   Previous attempts used compound body.X selectors and CSS max()
   which LiteSpeed UCSS strips during minification. This version
   targets .th26-breadcrumbs directly with a simple selector and
   uses a plain fixed value. Hero is max-width 1440px centered in
   main (1722px on 1920px viewports), so 125px gutters match.
   Mobile breakpoint resets to 0 for small screens. */
.th26-breadcrumbs {
  padding-left: 125px;
  padding-right: 125px;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
@media (max-width: 1600px) {
  .th26-breadcrumbs {
    padding-left: clamp(16px, calc((100vw - 1280px) / 2), 125px);
    padding-right: clamp(16px, calc((100vw - 1280px) / 2), 125px);
  }
}
@media (max-width: 900px) {
  .th26-breadcrumbs {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* But body.single uses different breadcrumb layout, override back */
body.single .th26-breadcrumbs {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* v0.4.X — Hide category tags inside the "Other gear we love"
   side panel on the homepage Shop section. Cards are too tall
   when the 3-tag list takes 3 lines; the card title + image is
   enough context. Scoped narrowly to .th26-shop-side so it
   doesn't affect category page cards, single post sidebars, or
   anywhere else that uses .wp-block-post-terms. */
.th26-shop-side .wp-block-post-terms,
.th26-shop-side .taxonomy-category {
  display: none !important;
}