.gos-root {
  --gos-bg: #f8fafc;
  --gos-surface: #ffffff;
  --gos-text: #0f172a;
  --gos-muted: #64748b;
  --gos-accent: #0369a1;
  --gos-border: rgba(15, 23, 42, 0.10);
  --gos-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gos-display: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gos-radius: 18px;
  box-sizing: border-box;
  max-width: 880px;
  margin: 0 auto;
  padding: 1.65rem 1.2rem 2.85rem;
  font-family: var(--gos-font) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--gos-text) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--gos-bg) 42%, var(--gos-bg) 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:has(.gos-root) .fusion-header-wrapper,
body:has(.gos-root) .fusion-header,
body:has(.gos-root) .fusion-secondary-header,
body:has(.gos-root) header.fusion-header-wrapper,
body:has(.gos-root) .fusion-tb-header,
body:has(.gos-root) .fusion-header-v1,
body:has(.gos-root) #side-header,
body:has(.gos-root) .fusion-sticky-header,
body:has(.gos-root) .fusion-sticky-container,
body:has(.gos-root) .fusion-secondary-header .fusion-row,
body:has(.gos-root) .fusion-header .fusion-row,
body:has(.gos-root) .fusion-header-wrapper .fusion-row,
body:has(.gos-root) .fusion-secondary-main-menu,
body:has(.gos-root) .fusion-is-sticky .fusion-header,
body:has(.gos-root) .fusion-header-sticky-height {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
}
/* Kill Avada light-gray secondary / menu bands under the logo bar */
body:has(.gos-root) .fusion-secondary-header,
body:has(.gos-root) .fusion-secondary-header *,
body:has(.gos-root) #side-header .side-header-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
body:has(.gos-root) .fusion-header,
body:has(.gos-root) .fusion-secondary-main-menu,
body:has(.gos-root) .fusion-main-menu {
  background: transparent !important;
  background-image: none !important;
}
body:has(.gos-root) .fusion-main-menu > ul > li > a,
body:has(.gos-root) .fusion-main-menu .fusion-custom-menu-item-contents,
body:has(.gos-root) .fusion-mobile-menu-icons a,
body:has(.gos-root) .fusion-mobile-menu-icons a:before,
body:has(.gos-root) .fusion-header .fusion-social-networks a,
body:has(.gos-root) .awb-menu__main-a,
body:has(.gos-root) .awb-menu a,
body:has(.gos-root) .fusion-tb-header a {
  color: #0f172a !important;
}

body:has(.gos-root) .fusion-logo img,
body:has(.gos-root) .fusion-logo-2x,
body:has(.gos-root) .fusion-sticky-logo,
body:has(.gos-root) .awb-library-element img[src*="logo"] {
  opacity: 1 !important;
  filter: none !important;
  max-height: 72px;
}

/* Hello Elementor / Elementor Theme Builder header is in normal document flow.
   Avada sticky clearance (#main padding + red band) must not run there — it
   looks like a broken/modified header. */
body:has(.elementor-location-header):has(.gos-root),
body.ehf-template-hello-elementor:has(.gos-root),
body.elementor-default:has(.gos-root) {
  --gos-header-h: 0px !important;
}
body:has(.elementor-location-header):has(.gos-root) #main,
body.ehf-template-hello-elementor:has(.gos-root) #main,
body.elementor-default:has(.gos-root) #main {
  padding-top: 0 !important;
}
body:has(.elementor-location-header):has(.gos-root) #main::before,
body.ehf-template-hello-elementor:has(.gos-root) #main::before,
body.elementor-default:has(.gos-root) #main::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  min-height: 0 !important;
}
body:has(.elementor-location-header) .elementor-location-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Multi-tenant: clear sticky host header so content tile sits fully below logo/nav.
   HARD FLOORS (not soft fallbacks): every GrowthOS page ships enough top clearance
   that all 4 rounded tile corners clear the black sticky banner. JS may raise
   --gos-header-h further after measure, never below these floors. */
body:has(.gos-root) {
  --gos-header-h: 140px;
}
body:has(.gos-root) #main {
  position: relative !important;
  overflow: visible !important;
  /* Hard-coded floor — do not drop to 0 / theme default or tile creeps under header */
  padding-top: var(--gos-header-h, 140px) !important;
  margin-top: 0 !important;
}
body:has(.gos-root) #content,
body:has(.gos-root) .post-content,
body:has(.gos-root) .fusion-row,
body:has(.gos-root) .fusion-content-tb,
body:has(.gos-root) .gos-root {
  position: relative !important;
  z-index: 1 !important;
}
/* Old GrowthOS footer nav block — hide duplicates; theme/copyright line holds FAQ|HowTo|Blog */
.growthos-sitewide-footer-nav,
p.growthos-sitewide-footer-nav,
nav.growthos-sitewide-footer-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}
/* Strip common agency "Site Created by …" credits on GrowthOS content pages */
body:has(.gos-root) a[href*="bbdigitalmarketing.com"],
body:has(.gos-root) a[href*="bbdigitalmarketing"] {
  display: none !important;
}
/* Restaurant / sports bar: WHITE page + RED band only between black header and content tile */

body:has(.gos-root) .gos-root {
  /* Match HowTo reference: 2.5rem under red band (never 0.35rem) */
  margin-top: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-top: 1.85rem !important;
}
/* Blog lives in theme/site footer — hide from main header menus */
body:has(.gos-root) .fusion-main-menu a[href*="/blog"],
body:has(.gos-root) .awb-menu a[href*="/blog"],
body:has(.gos-root) .fusion-menu a[href*="/blog"],
body:has(.gos-root) .menu-item a[href*="/blog"],
body:has(.gos-root) nav a[href$="/blog"],
body:has(.gos-root) nav a[href$="/blog/"] {
  display: none !important;
}
body:has(.gos-root) .fusion-main-menu .menu-item:has(> a[href*="/blog"]),
body:has(.gos-root) .awb-menu__main-li:has(> a[href*="/blog"]) {
  display: none !important;
}

.gos-root *, .gos-root *::before, .gos-root *::after { box-sizing: border-box; }
.gos-root a { color: var(--gos-accent) !important; text-decoration: none; font-weight: 600; }
.gos-root a:hover { text-decoration: underline; }
/* Host theme already has logo + nav (Avada, Elementor, Hello). Never a second brand bar. */
.gos-root .gos-top,
.gos-root header.gos-top {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.gos-root .gos-brand {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--gos-text) !important;
  text-decoration: none !important;
  font-family: var(--gos-display);
}
.gos-root .gos-brand:hover {
  color: var(--gos-accent) !important;
  text-decoration: none !important;
}
.gos-root .gos-logo {
  display: block; height: 52px; width: auto; max-width: 220px;
  object-fit: contain; object-position: left center;
  /* Never invert brand marks — pick the right asset for the surface instead */
  filter: none !important; opacity: 1 !important;
  background: transparent !important;
}
.gos-root .gos-nav-mini {
  display: none !important; /* content links live in footer only */
  flex-wrap: wrap; gap: 0.35rem 0.85rem;
  font-size: 0.82rem; font-weight: 600;
}
.gos-root .gos-nav-mini a { color: var(--gos-muted) !important; font-weight: 600; }
/* Kill orphan top FAQ/HowTo/Blog rows Avada left outside .gos-nav-mini */
.gos-root > a[href*="/faq"],
.gos-root > a[href*="/howto"],
.gos-root > a[href*="/how-to"],
.gos-root > a[href*="/blog"],
.gos-root > br {
  display: none !important;
}
/* Avada often wraps mangled nav in bare paragraphs before main */
.gos-root > p:has(> a[href*="/faq"]),
.gos-root > p:has(> a[href*="/blog"]),
.gos-root > p:has(> a[href*="/howto"]) {
  display: none !important;
}
.gos-root article.gos-blog-post,
.gos-root main.gos-faq-page,
.gos-root main.gos-howto-page,
.gos-root main.gos-blog-index {
  background: var(--gos-surface) !important;
  color: var(--gos-text) !important;
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-radius);
  padding: 1.85rem 1.55rem 2.15rem;
  box-shadow: 0 10px 36px rgba(10, 28, 65, 0.07), 0 1px 0 rgba(255,255,255,0.8) inset;
  position: relative;
  /* visible so FAQ/blog lists are never clipped by red-trim tiles */
  overflow: visible;
}
/* Soft top accent stripe on content cards */
.gos-root main.gos-faq-page::before,
.gos-root main.gos-howto-page::before,
.gos-root main.gos-blog-index::before,
.gos-root article.gos-blog-post::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--gos-accent), color-mix(in srgb, var(--gos-accent) 35%, transparent));
  border-radius: var(--gos-radius) var(--gos-radius) 0 0;
}
.gos-root h1, .gos-root h2, .gos-root h3 {
  color: var(--gos-text) !important;
  font-family: var(--gos-display) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.gos-root h1 {
  font-size: clamp(1.75rem, 3.8vw, 2.35rem) !important;
  margin: 0 0 0.85rem !important;
  
}
.gos-root h2 {
  font-size: 1.2rem !important;
  margin: 1.55rem 0 0.55rem !important;
}
.gos-root h3 { font-size: 1.05rem !important; margin: 1.2rem 0 0.4rem !important; }
.gos-root p {
  margin: 0 0 1rem !important;
  color: var(--gos-text) !important;
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
}
.gos-root .gos-lede {
  color: var(--gos-muted) !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1.5rem !important;
  max-width: 40rem;
}
.gos-root .gos-byline { color: var(--gos-muted) !important; font-size: 0.92rem !important; }
.gos-root .gos-page-hero {
  margin: 0 0 1.65rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--gos-border);
}
.gos-root .gos-page-hero .gos-lede { margin-bottom: 0 !important; }
.gos-root .gos-page-hero::after {
  content: ''; display: block; width: 3.25rem; height: 3px; margin-top: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gos-accent), transparent);
}
/* Blog / HowTo heroes: NEVER force 4:3 cover that beheads portraits. Show the full still. */
.gos-blog-post-hero,
figure.gos-blog-post-hero,
.gos-root .gos-blog-post-hero,
.gos-root figure.gos-blog-post-hero {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: 720px !important;
  min-height: 0 !important;
  margin: 0 0 1.35rem !important;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gos-border);
  background: #f3ebe3;
}
.gos-blog-post-hero img,
figure.gos-blog-post-hero img,
.gos-root .gos-blog-post-hero img,
.gos-root figure.gos-blog-post-hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 720px !important;
  object-fit: contain !important;
  object-position: center top !important;
}
.gos-blog-body-image:empty,
figure.gos-blog-body-image:not(:has(img)) {
  display: none !important;
}
.gos-blog-lede-row:not(:has(img)) {
  display: block !important;
  grid-template-columns: 1fr !important;
}
/* Grand-opening layout: intro column + square in-body image */
.gos-root .gos-blog-lede-row {
  display: grid !important;
  gap: 1.15rem !important;
  margin: 0 0 1.5rem !important;
  align-items: start !important;
}
@media (min-width: 720px) {
  .gos-root .gos-blog-lede-row {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 1.35rem !important;
  }
}
.gos-root .gos-blog-body-image,
.gos-root figure.gos-blog-body-image {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--gos-border) !important;
  background: #f3ebe3 !important;
}
.gos-root .gos-blog-body-image img,
.gos-root figure.gos-blog-body-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.gos-root .gos-blog-lede-col > p:first-child { margin-top: 0 !important; }
@media (max-width: 719px) {
  .gos-root .gos-blog-lede-row { grid-template-columns: 1fr !important; }
}
.gos-root .gos-cta,
.gos-root a.gos-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.35rem; padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gos-accent) 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--gos-accent) 40%, transparent);
  color: var(--gos-text) !important;
  font-weight: 700 !important; font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.gos-root .gos-cta:hover { transform: translateY(-1px); text-decoration: none !important; }
.gos-root .gos-cta-solid {
  background: var(--gos-accent) !important;
  border-color: var(--gos-accent) !important;
  color: #ffffff !important;
}
.gos-root ul, .gos-root ol { padding-left: 1.25rem; margin: 0 0 1.1rem; color: var(--gos-text) !important; }
.gos-root li { margin-bottom: 0.45rem; color: var(--gos-text) !important; }
/* FAQ — richer cards with left accent */
.gos-root .gos-faq-list { display: grid; gap: 0.85rem; margin: 0; padding: 0; }
.gos-root .gos-faq-item {
  margin: 0;
  padding: 1.15rem 1.25rem 1.15rem 1.35rem;
  border: 1px solid var(--gos-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(26,20,16,0.04);
  border-left: 3px solid var(--gos-accent);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.gos-root .gos-faq-item:hover {
  box-shadow: 0 10px 28px rgba(26,20,16,0.08);
  transform: translateY(-1px);
}
.gos-root .gos-faq-q {
  font-size: 1.12rem !important;
  margin: 0 0 0.5rem !important;
  color: var(--gos-text) !important;
  font-family: var(--gos-display) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.gos-root .gos-faq-a { color: var(--gos-muted) !important; margin: 0 !important; }
.gos-root .gos-faq-a p { color: var(--gos-muted) !important; margin: 0 !important; line-height: 1.7 !important; }
/* HowTo steps — connected timeline feel */
.gos-root .gos-howto-steps {
  list-style: none; padding: 0; margin: 0.75rem 0 0;
  counter-reset: gos-step;
  display: grid; gap: 0.85rem;
  position: relative;
}
.gos-root .gos-howto-step {
  counter-increment: gos-step;
  position: relative;
  margin: 0;
  padding: 1.2rem 1.25rem 1.2rem 3.65rem;
  border: 1px solid var(--gos-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26,20,16,0.04);
}
.gos-root .gos-howto-step::before {
  content: counter(gos-step);
  position: absolute; left: 1rem; top: 1.15rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gos-accent);
  color: #fff;
  font-weight: 700; font-size: 0.88rem;
  font-family: var(--gos-display);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gos-accent) 35%, transparent);
}
.gos-root .gos-howto-step h2 { margin: 0 0 0.4rem !important; font-size: 1.12rem !important; }
.gos-root .gos-howto-step p { margin: 0 !important; color: var(--gos-muted) !important; }
.gos-root .gos-blog-list, .gos-root .gos-howto-list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: grid; gap: 0.9rem;
}
.gos-root .gos-blog-card, .gos-root .gos-howto-card {
  margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important;
}
.gos-root .gos-blog-card-link, .gos-root .gos-howto-card-link {
  display: block;
  padding: 1.15rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--gos-border);
  background: #fff !important;
  color: var(--gos-text) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(26, 20, 16, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gos-root .gos-blog-card-link:hover, .gos-root .gos-howto-card-link:hover {
  border-color: color-mix(in srgb, var(--gos-accent) 55%, var(--gos-border));
  box-shadow: 0 12px 32px rgba(26, 20, 16, 0.1);
  transform: translateY(-2px);
  text-decoration: none !important;
}
.gos-root .gos-blog-card-kicker {
  display: none !important;
}
.gos-root .gos-howto-card-kicker {
  display: block !important; font-size: 0.72rem !important; font-weight: 700 !important;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gos-accent) !important; margin-bottom: 0.4rem !important;
  opacity: 1 !important; visibility: visible !important;
}
/* Force visible card titles — WP auto-p / theme link colors often blank them */
.gos-root .gos-blog-card-title, .gos-root .gos-howto-card-title {
  display: block !important; font-family: var(--gos-display) !important;
  font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: var(--gos-text) !important; margin-bottom: 0.35rem !important;
  opacity: 1 !important; visibility: visible !important;
}
.gos-root .gos-blog-card-desc, .gos-root .gos-howto-card-desc {
  display: block !important; font-size: 0.95rem !important;
  color: var(--gos-muted) !important;
  line-height: 1.55 !important; margin-bottom: 0.55rem !important;
  opacity: 1 !important; visibility: visible !important;
}
.gos-root .gos-blog-card-more, .gos-root .gos-howto-card-more {
  display: inline-block !important; font-size: 0.88rem !important; font-weight: 700 !important;
  color: var(--gos-accent) !important;
  opacity: 1 !important; visibility: visible !important;
}
/* WP often injects empty <p> inside cards — hide empty noise */
.gos-root .gos-howto-card-link > p:empty,
.gos-root .gos-blog-card-link > p:empty,
.gos-root .gos-howto-card p:empty,
.gos-root .gos-blog-card p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
.gos-root .gos-blog-hero, .gos-root .gos-howto-hero { margin-bottom: 1.5rem; }
.gos-root .gos-blog-eyebrow, .gos-root .gos-howto-eyebrow {
  display: inline-block; margin: 0 0 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gos-accent) !important;
}
article.gos-blog-post .gos-blog-eyebrow,
article.gos-blog-post .gos-nav-mini,
article.gos-blog-post header.gos-top {
  display: none !important;
}
/* Copyright only — never Home · FAQ · HowTo · Blog beside © (theme footer already has nav) */
.gos-root .gos-footer {
  margin-top: 2.25rem; padding: 1rem 1.15rem;
  border: 1px solid var(--gos-border);
  border-radius: 14px;
  background: #ffffff;
  display: block;
  font-size: 0.86rem; color: var(--gos-muted) !important;
  line-height: 1.5;
}
/* Hard-kill legacy Home · FAQ · HowTo · Blog rows (old packs + WP mangled siblings) */
.gos-root .gos-footer a,
.gos-root .gos-footer-nav,
.gos-root .gos-footer .gos-footer-nav,
.gos-root nav.gos-footer-nav,
.gos-root .gos-footer-nav a,
.gos-root .gos-footer-sep,
.gos-root > nav.gos-footer-nav,
.gos-root p:has(> a[href*="/faq"]):has(> a[href*="/howto"]),
.gos-root p:has(> a[href*="/faq"]):has(> a[href*="/how-to"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.gos-root .gos-footer-quiet { opacity: 0.95; display: block; }
/* Content grids — host sticky clearance is on #main; keep shell tight */
.gos-root main.gos-blog-index,
.gos-root main.gos-howto-index,
.gos-root main.gos-howto-page,
.gos-root main.gos-faq-page {
  padding-top: 0.25rem;
  clear: both;
}
.gos-root .gos-blog-list,
.gos-root .gos-howto-list {
  margin-top: 0.65rem !important;
  clear: both;
}
.gos-root .gos-blog-hero,
.gos-root .gos-howto-hero,
.gos-root .gos-page-hero {
  margin-bottom: 1.85rem !important;
  padding-top: 0.35rem;
}
/* Kill Avada/WP inserting <br> inside our chrome */
.gos-root .gos-top br,
.gos-root .gos-footer br,
.gos-root .gos-footer-nav br { display: none !important; }
.gos-root .gos-blog-empty, .gos-root .gos-howto-empty {
  padding: 1.5rem 1.25rem; border-radius: 14px;
  border: 1px dashed var(--gos-border);
  background: rgba(26,20,16,0.03);
  text-align: left;
}
/* Mobile / small screens — all GrowthOS content pages (FAQ, HowTo, Blog) */
@media (max-width: 719px) {
  .gos-root {
    padding: 1rem 0.75rem 2rem !important;
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .gos-root .gos-top { padding: 0.65rem 0.75rem; }
  .gos-root .gos-logo { height: 40px; max-width: 150px; }
  .gos-root article.gos-blog-post,
  .gos-root main.gos-faq-page,
  .gos-root main.gos-howto-page,
  .gos-root main.gos-blog-index {
    padding: 1.15rem 0.9rem 1.4rem !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }
  .gos-root h1 {
    font-size: clamp(1.45rem, 6.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }
  .gos-root h2 { font-size: 1.08rem !important; }
  .gos-root .gos-lede { font-size: 1rem !important; max-width: none !important; }
  .gos-root .gos-faq-item,
  .gos-root .gos-howto-step {
    padding: 0.9rem 0.95rem !important;
  }
  .gos-root .gos-blog-list,
  .gos-root .gos-howto-list {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
  .gos-root .gos-blog-card-link,
  .gos-root .gos-howto-card-link {
    min-height: 0 !important;
  }
  .gos-root .gos-cta,
  .gos-root a.gos-cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  /* Mobile only — desktop hard floors above stay unchanged.
     Restaurant: thin red stripe (~½ of prior 160px) + more tile margin so cream
     card never indents into the red. Padding clears sticky black; band is shorter. */
  body:has(.gos-root) {
    --gos-header-h: 110px;
  }
  body:has(.gos-root) #main {
    padding-top: var(--gos-header-h, 110px) !important;
  }
  body:has(.gos-root) #main::before {
    height: var(--gos-header-h, 110px) !important;
    min-height: 110px !important;
  }
  body:has(.gos-root) .gos-root {
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
  }
  /* Prevent theme overflow / horizontal scroll */
  body:has(.gos-root) #main,
  body:has(.gos-root) .post-content,
  body:has(.gos-root) .gos-root {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .gos-root img {
    max-width: 100% !important;
  }
  .gos-root .gos-blog-post-hero img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 720px !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
  .gos-root .gos-blog-card-media img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }
  .gos-root .gos-blog-body-image img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}
@media (max-width: 380px) {
  .gos-root { padding: 0.85rem 0.6rem 1.75rem !important; font-size: 15px !important; }
  .gos-root article.gos-blog-post,
  .gos-root main.gos-faq-page,
  .gos-root main.gos-howto-page,
  .gos-root main.gos-blog-index { padding: 1rem 0.75rem 1.25rem !important; }
}

article.gos-blog-post .gos-blog-eyebrow,
    article.gos-blog-post .gos-nav-mini,
    article.gos-blog-post header.gos-top,
    .gos-root article.gos-blog-post .gos-blog-eyebrow { display: none !important; }
    .gos-root .gos-blog-post-hero {
      margin: 0 0 1.35rem; border-radius: 14px; overflow: hidden;
      border: 1px solid var(--gos-border);
      aspect-ratio: auto; width: 100%; max-height: 720px; min-height: 0; height: auto;
    }
    .gos-root .gos-blog-post-hero img {
      display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; object-position: center top;
    }
    .gos-root .gos-blog-lede-row {
      display: grid; gap: 1.15rem; margin: 0 0 1.5rem; align-items: start;
    }
    @media (min-width: 720px) {
      .gos-root .gos-blog-lede-row {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 1.35rem;
      }
    }
    .gos-root .gos-blog-body-image {
      margin: 0; border-radius: 14px; overflow: hidden;
      border: 1px solid var(--gos-border);
      aspect-ratio: 1 / 1; width: 100%; background: #f3ebe3;
    }
    .gos-root .gos-blog-body-image img {
      display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
    }
    .gos-root .gos-blog-lede-col > p:first-child { margin-top: 0 !important; }
    @media (max-width: 719px) {
      .gos-root .gos-blog-lede-row { grid-template-columns: 1fr !important; }
    }