.cc_zRr7AL87AP_XARYsVUYfP .blog-detail {
  width: 100%;
  padding: var(--space-md) 0 var(--space-xl);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-article {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Breadcrumb */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb a:hover {
  color: var(--color-accent-dark);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb [aria-current="page"] {
  color: var(--color-text-primary);
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb-sep {
  color: var(--color-border);
}

/* Hero
   Mobile (base): aspect-ratio 4/3 (was 16/9) — a taller crop window so
   less of the photo's vertical content is lost on narrow screens, per
   the "önemli bölümleri kaybolabiliyor" report. width:100% of its
   (already gutter-padded) container, so there is no horizontal overflow
   to begin with; max-width:100% + margin:0 auto is a harmless no-op here
   but is what centers the box once the >=1024px max-width below binds. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-surface-alt);
  opacity: 0;
  animation: cc_zRr7AL87AP_XARYsVUYfP_blog-detail-fade 600ms ease-out forwards;
}

/* Tablet (768-1023px): same wide 16/9 crop as before, just a lower
   max-height cap (was 440px for every >=768px width) so the photo reads
   less oversized at tablet widths. Scoped to this band only — >=1024px
   gets its own, different max-width/max-height below instead of falling
   through to this one. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero {
    aspect-ratio: 16 / 9;
    max-height: 360px;
  }
}

/* Desktop (>=1024px): capped to max-width 1100px — narrower than the
   .blog-detail-inner container (up to 1240px wide) — plus max-height
   420px. This is the actual fix for "masaüstünde gereğinden fazla yatay
   ve kırpılmış görünüyor": before, the hero always filled the full
   (up to 1400px) container at a 16/9 ratio, which at that width crops
   away much more of the photo's height than a narrower box does. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero {
    aspect-ratio: 16 / 9;
    max-width: 1100px;
    max-height: 420px;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Reviewed for the new aspect ratios above — still the correct,
     deliberate choice: with no per-image focal point data to work from,
     a center crop is the safe default at every box ratio (4/3 mobile,
     16/9 tablet/desktop), and never distorts since object-fit: cover
     only crops, it never stretches. */
  object-position: center;
  display: block;
}

@keyframes cc_zRr7AL87AP_XARYsVUYfP_blog-detail-fade {
  to {
    opacity: 1;
  }
}

/* Header */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding-top: var(--space-md);
  opacity: 0;
  transform: translateY(20px);
  animation: cc_zRr7AL87AP_XARYsVUYfP_blog-detail-fade-up 600ms ease-out 200ms forwards;
}

@keyframes cc_zRr7AL87AP_XARYsVUYfP_blog-detail-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-category {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 2px;
}

/* Explicit per-breakpoint sizes instead of --text-h1 (clamp(36px, 5vw,
   64px), reaching 64px on desktop). font-family and color (LAB VERDE's
   dark green, --color-text-primary) are unchanged. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-title {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-title {
    font-size: 34px;
  }
}

/* Explicit sizes instead of the flat var(--text-label) (12px at every
   width, no breakpoint of its own) — this is our own rendered date/
   read-time text, not merchant-pasted content, so no !important guard
   is needed here (unlike the blog-content tags further down). */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-meta {
    font-size: 13px;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-meta-dot {
  color: var(--color-border);
}

/* Content body — rich text. Explicit sizes instead of the fixed
   var(--text-body) (16px at every width, no desktop distinction).
   Existing content HTML/markup is untouched — only typography/width.
   max-width stays 760px through mobile+tablet; the 900px desktop
   widening below is scoped to >=1024px only — tablet keeps reading at
   760px as requested. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--font-body);
  /* Site-wide typography pass: "makale metni" hedefi mobil 16px /
     masaüstü 17px — was 14/16px. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  padding-top: var(--space-md);
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content {
    max-width: 900px;
    font-size: 17px;
    line-height: 1.7;
  }
}

/* h2/h3 get explicit, !important per-breakpoint sizes instead of the
   old var(--text-h2)/var(--text-h3) (clamp-based) — font-size/
   line-height are forced here because blogPost.blogContent.content is
   merchant-authored HTML (rendered via dangerouslySetInnerHTML), which
   commonly carries its OWN inline font-size from a Word/Docs/Admin
   rich-text-editor paste; that inline style otherwise wins over any
   external rule regardless of selector specificity. h4 keeps its
   existing size (var(--text-body-lg), not given a target this round)
   but shares the updated 1.35 line-height below.
   margin moved OUT of this shared rule and into each heading's own
   selector below (h2: 32px/16px, h3: 24px/12px — distinct per-heading
   targets, so a single shared value no longer fits); h4's margin is
   unchanged, just relocated next to its own rule. Each is !important
   for the same reason as font-size — an inline margin pasted from
   Word/Docs/Admin must not be able to add to, or replace, these. Since
   the adjacent p/li always carry margin: 0 !important, normal margin
   collapsing between block siblings means the heading's own
   margin-top/-bottom alone IS the full visual gap — never doubled. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h2, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h3, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary) !important;
  font-weight: 400;
  line-height: 1.35 !important;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h4 {
  margin: var(--space-lg) 0 var(--space-sm);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h2 {
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  font-size: 21px !important;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h2 {
    font-size: 24px !important;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h2 {
    font-size: 26px !important;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h3 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  font-size: 18px !important;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h3 {
    font-size: 20px !important;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h3 {
    font-size: 21px !important;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content h4 {
  font-size: var(--text-body-lg);
}

/* p/li/span/div read their size/line-height/color from the container
   above via `inherit !important` — the same reasoning as h2/h3: any
   inline font-size/color pasted into the Admin rich-text content (a
   common artifact of pasting from Word/Docs, which commonly leaves a
   literal black inline color) must not be able to win here, so the
   actual rendered body text reliably matches the brand's dark-green
   --color-text-secondary and the 14/16px (mobile/tablet+desktop),
   1.6/1.7 line-height targets no matter what markup a given post
   happens to carry. `inherit` still resolves per-context — a <p>
   nested inside <blockquote> correctly picks up blockquote's own
   muted color/size, not this container's.
   margin is now `!important` too — a pasted <p style="margin:0 0 20px"
   > from Word/Docs/Admin otherwise stacks its own bottom margin on top
   of the p + p gap below, producing exactly the "too much space
   between paragraphs" symptom reported on mobile. Forcing margin: 0
   here means the ONLY source of inter-paragraph space is the single
   p + p rule beneath it — never doubled. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content span, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content div {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Catches a truly empty paragraph — <p></p> or <p><br></p> — left by
   rich-text editors for a blank line. CORRECTION (measured empirically
   with Playwright against this exact compiled CSS): a <p>&nbsp;</p> is
   NOT caught by either selector here — &nbsp; is a real text-node
   character, not whitespace-collapsible and not :empty, so that variant
   previously rendered as a full extra ~27px line box stacked on the
   p + p margin below (confirmed: inflates a 16px gap to ~59px). That
   case is now handled at the source in index.tsx (stripped from
   rawContent before render), since no CSS selector can match "content
   is only whitespace/&nbsp;". This CSS guard stays for the two patterns
   it legitimately does catch. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content p:empty, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content p:has(> br:only-child) {
  display: none;
}

/* Tablet + desktop share the same 16px gap (previously 24px/20px on two
   separate rules, consolidated — the old >=1024px override is gone, not
   left behind to conflict). Mobile keeps its own 14px value below.
   Verified empirically (Playwright, real compiled CSS, no extra markup
   between the two <p> tags): this margin alone renders as an exact
   16.00px box-to-box gap — the CSS was never the bug. The ~8px of
   additional PERCEIVED space a human eye reads above that (visible
   text-to-text distance measures ~24px) comes from this container's
   own line-height (27.2px at 16px font) laying half-leading above/below
   each paragraph's text — an inherent, universal property of any
   margin-based paragraph spacing at this line-height, not a cascade
   conflict, and left untouched since line-height/font-size are not
   being changed this round. */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content p + p {
  margin-top: 16px !important;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content p + p {
    margin-top: 14px !important;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 200ms ease;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-md) 0;
  border-radius: 2px;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content blockquote {
  margin: var(--space-md) 0;
  padding: 4px 0 4px var(--space-md);
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content ul, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content ol {
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content li {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Divider */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-md) auto 0;
  max-width: 760px;
  width: 100%;
}

/* Footer */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-footer {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-footer {
    flex-direction: row;
    align-items: center;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 400;
  flex-shrink: 0;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-author-label {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-author-name {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-primary);
}

/* Share buttons */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share {
  display: flex;
  gap: var(--space-xs);
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share-btn:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: #ffffff;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* Related posts */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Explicit per-breakpoint sizes instead of --text-h2 (clamp-based). */
.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-text-primary);
  text-align: center;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-title {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-title {
    font-size: 30px;
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-item {
  opacity: 0;
  transform: translateY(20px);
  animation: cc_zRr7AL87AP_XARYsVUYfP_blog-detail-fade-up 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
  animation-delay: var(--blog-related-delay, 0ms);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail {
    padding: var(--space-lg) 0 var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail {
    padding: var(--space-lg) 0 var(--space-3xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-header, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-related-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content.blog-content a, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-share-btn, .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-breadcrumb a {
    transition: none;
  }
}

/* Mobile spacing — placed AFTER every base rule it touches on purpose
   (.blog-detail-article/-hero/-header/-content/-divider above), same
   specificity, so source order decides.
   .blog-detail-article's own `gap` (var(--space-lg), 40px) was the
   shared source of every one of these transitions; switched to 0 here
   and replaced with an explicit margin-top per child so the two
   transitions that needed a different (smaller) value than the rest
   (hero->header, header->content) could be set independently without
   touching the other two (breadcrumb->hero, content->divider), which
   keep their original totals exactly:
     - breadcrumb -> hero:  was 40 (gap) + 0            = 40, now margin-top:40 (unchanged)
     - hero -> header:      was 40 (gap) + 24 (padding)  = 64, now margin-top:8 + existing 24 padding = 32 (target)
     - header -> content:   was 40 (gap) + 24 (padding)  = 64, now margin-top:8 + existing 24 padding = 32 (target, "tarih ile ilk paragraf")
     - content -> divider:  was 40 (gap) + 24 (own margin-top) = 64, now margin-top:64 (unchanged total; divider's
       own `margin: var(--space-md) auto 0` shorthand's top value is replaced, not added to, by this)
   :not(:first-child) guards hero/header for when breadcrumb and/or the
   hero image are conditionally absent — no margin is added before
   whichever element actually ends up first, matching how `gap` never
   added space before the first flex item either. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-article {
    gap: 0;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero:not(:first-child) {
    margin-top: var(--space-lg);
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-header:not(:first-child) {
    margin-top: 8px;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-header {
    gap: 12px;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content {
    margin-top: 8px;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-divider {
    margin-top: 64px;
  }
}

/* Desktop (>=1024px) spacing — same technique as the mobile block above,
   targeting only the one transition this round asks to change ("tarih
   ile ilk paragraf: 32px"); tablet (768-1023px) is untouched and keeps
   the original 40 (gap) + 24 (padding) = 64px for this same transition,
   since only "masaüstü" was asked for.
     - breadcrumb -> hero:  was 40 (gap), now margin-top:40 (unchanged)
     - hero -> header:      was 40 (gap), now margin-top:40 (unchanged — not asked for this round)
     - header -> content:   was 40 (gap) + 24 (padding) = 64, now margin-top:8 + existing 24 padding = 32 (target)
     - content -> divider:  was 40 (gap) + 24 (own margin-top) = 64, now margin-top:64 (unchanged total)
   :not(:first-child) guards match the mobile block for the same reason
   (breadcrumb/hero are conditionally absent). No !important here — these
   are our own layout elements (header/hero/divider), never merchant-
   pasted HTML, so there is no inline-style risk to defend against. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-article {
    gap: 0;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-hero:not(:first-child) {
    margin-top: var(--space-lg);
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-header:not(:first-child) {
    margin-top: var(--space-lg);
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-content {
    margin-top: 8px;
  }

  .cc_zRr7AL87AP_XARYsVUYfP .blog-detail-divider {
    margin-top: 64px;
  }
}