/* ============================================================================
   Costco97 — Master Theme Stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the redesigned costco97.com WordPress theme.
   The `.dc.html` mockups use inline styles (that's just how they're authored);
   THIS file is the extracted, tokenized version to build the real theme from.

   Load order in the theme:
     1. This file first (tokens + base + shared components).
     2. Template-specific tweaks after, if any.

   Everything keys off the CSS custom properties in :root — change a token here
   and it cascades everywhere. Colors, type, spacing, radii, and shadows are all
   tokenized. Component classes below map 1:1 to the blocks in the mockups.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* --- Brand & action --- */
  --c97-blue:        #0060A9;   /* single action/accent color (from the logo) */
  --c97-blue-press:  #004E8C;   /* hover / active / pressed */
  --c97-blue-tint:   #eef3fb;   /* light-blue pill hover, chip backgrounds */
  --c97-blue-tint-2: #e0ecfa;   /* deeper tint on chip hover */
  --c97-navy:        #002A5C;   /* deep navy — ".97" price accent & feature cards ONLY */

  /* --- Semantic alerts (use sparingly, never decoratively) --- */
  --c97-red:         #B4231F;   /* recall labels + deal savings-% badge ONLY */
  --c97-amber-fg:    #b06a00;   /* "likely expired" / awaiting-moderation text */
  --c97-amber-bg:    #fef3e2;
  --c97-amber-bd:    #f6dcae;
  --c97-green-fg:    #137a42;   /* "author" tag, coupon $-off chips */
  --c97-green-bg:    #e8f6ee;
  --c97-green-bd:    #c6e9d5;

  /* --- Category accents (post-type color set) --- */
  --c97-cat-deal:    #0060A9;   /* Deals            — blue */
  --c97-cat-new:     #1F8A5B;   /* New Products     — green */
  --c97-cat-blog:    #6E56CF;   /* Blog             — purple */
  --c97-cat-recall:  #B4231F;   /* Recalls          — red */
  --c97-cat-recipe:  #BE4A1E;   /* Recipe           — terracotta */

  /* --- Neutrals / ink --- */
  --c97-ink:         #1d1d1f;   /* primary text / headings */
  --c97-body:        #333336;   /* long-form body copy */
  --c97-muted:       #86868b;   /* meta, captions, secondary */
  --c97-muted-2:     #6e6e73;   /* slightly darker muted */
  --c97-faint:       #a1a1a8;   /* placeholder / ad-slot text */
  --c97-footer-txt:  #707070;

  /* --- Surfaces --- */
  --c97-bg:          #ffffff;   /* page background */
  --c97-wash:        #f5f5f7;   /* frost section wash / cards */
  --c97-wash-2:      #fafafa;   /* footer / subtle bands */
  --c97-fill:        #f0f0f2;   /* chip fill, code background */
  --c97-slot:        #eef0f3;   /* image-slot placeholder fill */

  /* --- Borders / hairlines --- */
  --c97-line:        #d2d2d7;   /* standard hairline */
  --c97-line-soft:   #e5e5ea;   /* softer hairline */
  --c97-line-faint:  #ececee;   /* faintest divider */
  --c97-dash:        #cfcfd6;   /* dashed ad-slot border */

  /* --- Typography --- */
  --c97-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --c97-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (px) */
  --c97-fs-h1:       46px;      /* article/page title (clamps down on mobile) */
  --c97-fs-h2:       28px;
  --c97-fs-h3:       21px;
  --c97-fs-lead:     21px;      /* article lead paragraph */
  --c97-fs-body:     18px;      /* long-form body */
  --c97-fs-ui:       14px;      /* nav / controls */
  --c97-fs-meta:     13px;
  --c97-fs-eyebrow:  12px;      /* uppercase kickers */

  /* --- Radii --- */
  --c97-r-pill:      980px;     /* buttons, chips */
  --c97-r-lg:        22px;      /* hero images, large cards */
  --c97-r-md:        18px;      /* standard cards */
  --c97-r-sm:        16px;      /* inline figures, small cards */
  --c97-r-xs:        12px;      /* inputs, ad slots */

  /* --- Layout --- */
  --c97-container:   1120px;    /* max content width (nav, footer, grids) */
  --c97-reading:     820px;     /* centered article/page header width */
  --c97-reading-fw:  768px;     /* full-width single-column reading width */
  --c97-hero-w:      940px;     /* hero image max width */
  --c97-rail-w:      300px;     /* sidebar / ad-rail width */
  --c97-gutter:      22px;      /* horizontal page padding */
  --c97-gap:         52px;      /* content ↔ rail gap */
  --c97-navh:        58px;      /* sticky nav height */

  /* --- Elevation --- */
  --c97-shadow-btn:  0 6px 16px -6px rgba(0,0,0,.28);
  --c97-shadow-pop:  0 12px 40px -18px rgba(0,0,0,.28);

  /* --- Motion --- */
  --c97-ease:        cubic-bezier(.32,.72,0,1);
}

/* ---------------------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c97-bg);
  font-family: var(--c97-font);
  color: var(--c97-ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--c97-blue); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
a:hover { text-decoration: underline; }
::selection { background: var(--c97-blue); color: #fff; }

button {
  font-family: inherit;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s, filter .2s;
}
button:not(:disabled):hover  { transform: translateY(-1px); box-shadow: var(--c97-shadow-btn); }
button:not(:disabled):active { transform: translateY(0);   box-shadow: 0 2px 6px -3px rgba(0,0,0,.3); }

@keyframes c97fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes c97shade { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.c97-container { max-width: var(--c97-container); margin: 0 auto; padding-left: var(--c97-gutter); padding-right: var(--c97-gutter); }
.c97-reading   { max-width: var(--c97-reading);   margin: 0 auto; padding-left: var(--c97-gutter); padding-right: var(--c97-gutter); }

/* Two-column body: content + sticky rail. Add `.full` to drop the rail and
   narrow the content to a single reading column (the "full width" template). */
.c97-layout {
  max-width: var(--c97-container);
  margin: 0 auto;
  padding: 44px var(--c97-gutter) 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--c97-rail-w);
  gap: var(--c97-gap);
  align-items: start;
}
.c97-layout.full { max-width: var(--c97-reading-fw); grid-template-columns: minmax(0, 1fr); }
.c97-layout.full .c97-rail { display: none; }
.c97-rail { position: sticky; top: calc(var(--c97-navh) + 20px); display: flex; flex-direction: column; gap: 22px; }

/* ---------------------------------------------------------------------------
   4. NAVIGATION (sticky, blurred)
   ------------------------------------------------------------------------- */
.c97-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c97-line);
}
.c97-nav__inner { max-width: var(--c97-container); margin: 0 auto; padding: 0 var(--c97-gutter); display: flex; align-items: center; justify-content: space-between; height: var(--c97-navh); }
.c97-nav__links { display: flex; gap: 6px; align-items: center; }
.c97-nav__link  { font-size: var(--c97-fs-ui); color: var(--c97-ink); padding: 7px 13px; border-radius: var(--c97-r-pill); }
.c97-nav__link:hover,
.c97-nav__link.is-active { background: var(--c97-blue-tint); color: var(--c97-blue); text-decoration: none; }
.c97-nav__icon  { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.c97-nav__icon:hover { background: var(--c97-blue-tint); text-decoration: none; }
.c97-nav__burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; cursor: pointer; }
.c97-nav__burger:hover { background: var(--c97-blue-tint); }

/* Search overlay (window-shade) */
.c97-search-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; }
.c97-search-shade   { background: rgba(255,255,255,.98); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--c97-line); box-shadow: var(--c97-shadow-pop); transform-origin: top; animation: c97shade .28s var(--c97-ease); }
.c97-search-scrim   { flex: 1; background: rgba(0,0,0,.28); cursor: pointer; animation: c97fade .28s ease; }
.c97-search-input   { flex: 1; border: none; outline: none; background: transparent; font-size: 28px; letter-spacing: -.01em; color: var(--c97-ink); }
.c97-search-input::placeholder { color: #c4c4cc; font-weight: 300; }

/* ---------------------------------------------------------------------------
   5. BUTTONS & PILLS
   ------------------------------------------------------------------------- */
.c97-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c97-blue); color: #fff; border: none;
  border-radius: var(--c97-r-pill); padding: 11px 22px;
  font-size: var(--c97-fs-ui); font-weight: 500; font-family: inherit; cursor: pointer;
}
.c97-btn:hover { background: var(--c97-blue-press); color: #fff; text-decoration: none; }
.c97-btn--sm  { padding: 8px 16px; }
.c97-btn--ghost { background: #fff; color: var(--c97-blue); }
.c97-btn--ghost:hover { background: var(--c97-blue-tint); }

/* Pills / chips / eyebrows */
.c97-chip     { display: inline-block; font-size: var(--c97-fs-ui); background: var(--c97-fill); color: var(--c97-ink); padding: 9px 16px; border-radius: var(--c97-r-pill); border: none; cursor: pointer; }
.c97-chip:hover { background: #e3e3e8; }
.c97-badge    { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c97-blue); background: var(--c97-blue-tint); padding: 3px 10px; border-radius: var(--c97-r-pill); }
.c97-eyebrow  { font-size: var(--c97-fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c97-muted); }

/* Category eyebrow / chip colors — set --cat then use .c97-cat */
.c97-cat { color: var(--cat, var(--c97-blue)); }
.c97-cat--deal   { --cat: var(--c97-cat-deal); }
.c97-cat--new    { --cat: var(--c97-cat-new); }
.c97-cat--blog   { --cat: var(--c97-cat-blog); }
.c97-cat--recall { --cat: var(--c97-cat-recall); }
.c97-cat--recipe { --cat: var(--c97-cat-recipe); }

/* ---------------------------------------------------------------------------
   6. CARDS & IMAGE SLOTS
   ------------------------------------------------------------------------- */
.c97-card      { background: #fff; border: 1px solid var(--c97-line-soft); border-radius: var(--c97-r-md); }
.c97-card--wash{ background: var(--c97-wash); border: none; }
.c97-slot      { background: var(--c97-slot); border: 1px solid var(--c97-line-soft); border-radius: var(--c97-r-sm); overflow: hidden; }
.c97-slot--hero{ border-radius: var(--c97-r-lg); aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------------
   7. ARTICLE / PAGE HEADER
   ------------------------------------------------------------------------- */
.c97-breadcrumb { font-size: var(--c97-fs-meta); color: var(--c97-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.c97-breadcrumb a { color: var(--c97-muted); }
.c97-breadcrumb .is-current { color: var(--c97-ink); }

.c97-title { margin: 0; font-size: var(--c97-fs-h1); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; color: var(--c97-ink); text-wrap: balance; }
.c97-byline { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font-size: var(--c97-fs-ui); color: var(--c97-muted); }
.c97-byline strong { color: var(--c97-ink); font-weight: 500; }
.c97-byline .sep { color: var(--c97-line); }
.c97-subtitle { margin: 18px auto 0; max-width: 640px; font-size: 20px; line-height: 1.5; font-weight: 300; color: var(--c97-muted-2); text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   8. PROSE (the_content) — long-form article & page body
   ------------------------------------------------------------------------- */
.c97-prose p          { font-size: var(--c97-fs-body); line-height: 1.68; color: var(--c97-body); margin: 0 0 22px; }
.c97-prose > p.lead   { font-size: var(--c97-fs-lead); line-height: 1.55; color: var(--c97-ink); font-weight: 300; }
.c97-prose h2         { font-size: var(--c97-fs-h2); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--c97-ink); margin: 44px 0 14px; scroll-margin-top: 80px; }
.c97-prose h3         { font-size: var(--c97-fs-h3); line-height: 1.25; letter-spacing: -.01em; font-weight: 600; color: var(--c97-ink); margin: 32px 0 10px; }
.c97-prose ul,
.c97-prose ol         { margin: 0 0 22px; padding-left: 22px; }
.c97-prose li         { font-size: var(--c97-fs-body); line-height: 1.6; color: var(--c97-body); margin: 0 0 10px; }
.c97-prose a          { color: var(--c97-blue); font-weight: 500; }
.c97-prose code       { font-family: var(--c97-mono); font-size: 15px; background: var(--c97-fill); border-radius: 6px; padding: 2px 7px; color: var(--c97-ink); }
.c97-prose blockquote { margin: 30px 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--c97-blue); font-size: 23px; line-height: 1.42; letter-spacing: -.01em; color: var(--c97-ink); }
.c97-prose blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.c97-prose figure     { margin: 32px 0; }
.c97-prose figure img { width: 100%; display: block; border-radius: var(--c97-r-sm); }
.c97-prose figcaption { margin-top: 10px; font-size: var(--c97-fs-meta); color: var(--c97-muted); text-align: center; }
.c97-prose hr         { border: none; border-top: 1px solid var(--c97-line-soft); margin: 36px 0; }

/* ---------------------------------------------------------------------------
   9. SHARE ROW / AUTHOR BIO / TOC / RELATED
   ------------------------------------------------------------------------- */
.c97-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--c97-line-faint); }
.c97-share a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c97-line-soft); display: flex; align-items: center; justify-content: center; color: var(--c97-ink); }
.c97-share a:hover { background: var(--c97-blue-tint); color: var(--c97-blue); text-decoration: none; }

.c97-bio { display: flex; gap: 18px; align-items: flex-start; margin-top: 32px; background: var(--c97-wash); border-radius: var(--c97-r-md); padding: 24px 26px; }
.c97-bio__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #e6e6ea; }
.c97-bio__name { font-size: 17px; font-weight: 600; color: var(--c97-ink); margin-top: 3px; }
.c97-bio p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--c97-muted-2); }

.c97-toc { border: 1px solid var(--c97-line-soft); border-radius: var(--c97-r-sm); padding: 20px; }
.c97-toc a { display: block; font-size: var(--c97-fs-ui); color: var(--c97-ink); padding: 7px 10px; border-radius: 9px; }
.c97-toc a:hover { background: var(--c97-blue-tint); color: var(--c97-blue); text-decoration: none; }

.c97-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.c97-related-card { display: flex; flex-direction: column; gap: 12px; }
.c97-related-card:hover { text-decoration: none; }

/* ---------------------------------------------------------------------------
   10. ADVERTISEMENT SLOTS (labeled placeholders)
   ------------------------------------------------------------------------- */
.c97-ad { background: var(--c97-wash); border: 1px dashed var(--c97-dash); border-radius: var(--c97-r-xs); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--c97-faint); }
.c97-ad__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c97-ad__size  { font-size: 12px; }
.c97-ad--mrec  { width: var(--c97-rail-w); max-width: 100%; height: 250px; }   /* 300×250 */
.c97-ad--half  { width: var(--c97-rail-w); max-width: 100%; height: 600px; }   /* 300×600 */
.c97-ad--lead  { width: 100%; min-height: 90px; }                              /* 728×90 responsive */

/* ---------------------------------------------------------------------------
   11. NEWSLETTER CARD (rail + inline)
   ------------------------------------------------------------------------- */
.c97-news { background: var(--c97-blue); border-radius: var(--c97-r-md); padding: 24px 22px; color: #fff; }
.c97-news h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.c97-news p  { margin: 7px 0 15px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.c97-news input  { width: 100%; border: none; border-radius: 10px; padding: 11px 13px; font-size: var(--c97-fs-ui); color: var(--c97-ink); outline: none; font-family: inherit; }
.c97-news button { width: 100%; margin-top: 9px; background: #fff; color: var(--c97-blue); border: none; border-radius: var(--c97-r-pill); padding: 11px; font-size: var(--c97-fs-ui); font-weight: 600; cursor: pointer; }
.c97-news button:hover { background: #eaf1fb; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------------- */
.c97-footer { border-top: 1px solid var(--c97-line); background: var(--c97-wash-2); }
.c97-footer__inner { max-width: var(--c97-container); margin: 0 auto; padding: 44px var(--c97-gutter) 52px; }
.c97-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.c97-footer__col { display: flex; flex-direction: column; gap: 10px; }
.c97-footer__head { font-size: 12px; font-weight: 600; color: var(--c97-ink); }
.c97-footer a, .c97-footer span { font-size: 12px; color: var(--c97-footer-txt); text-decoration: none; }
.c97-footer__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c97-line); font-size: 12px; color: var(--c97-muted); }

/* ---------------------------------------------------------------------------
   13. WORDPRESS COMMENTS — two skins
   ----------------------------------------------------------------------------
   Stock wp_list_comments() + comment_form() markup. Toggle a skin by putting
   `cskin-imessage` (default) or `cskin-clean` on a wrapper around #comments.
   All rules are scoped under #comments so the block drops in unchanged.
   ------------------------------------------------------------------------- */
#comments { max-width: 760px; margin: 52px 0 0; padding: 42px 0 0; border-top: 1px solid #e8e8ec; }
#comments ol, #comments ul { list-style: none; margin: 0; padding: 0; }
#comments .says { display: none; }
#comments .comment-author cite { font-style: normal; }

/* ---- CLEAN skin (threaded list) ---- */
.cskin-clean #comments .comments-title { margin: 0 0 8px; font-size: var(--c97-fs-h2); font-weight: 600; letter-spacing: -.012em; color: var(--c97-ink); }
.cskin-clean #comments .comments-intro { margin: 0 0 22px; font-size: 15px; color: var(--c97-muted); }
.cskin-clean #comments .comment-body { position: relative; padding: 22px 0 22px 60px; border-top: 1px solid #f0f0f2; }
.cskin-clean #comments .comment-list > li:first-child > .comment-body { border-top: none; padding-top: 6px; }
.cskin-clean #comments .comment-author .avatar { position: absolute; left: 0; top: 24px; width: 44px; height: 44px; border-radius: 50%; background: #e6e6ea; object-fit: cover; display: block; }
.cskin-clean #comments .comment-list > li:first-child > .comment-body .avatar { top: 8px; }
.cskin-clean #comments .comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.cskin-clean #comments .comment-author { display: inline; font-style: normal; }
.cskin-clean #comments .comment-author .fn { font-style: normal; font-size: 15px; font-weight: 600; color: var(--c97-ink); }
.cskin-clean #comments .comment-author .fn a { color: var(--c97-ink); text-decoration: none; }
.cskin-clean #comments .comment-author .fn a:hover { color: var(--c97-blue); }
.cskin-clean #comments .comment-metadata { font-size: var(--c97-fs-meta); }
.cskin-clean #comments .comment-metadata a { color: var(--c97-muted); text-decoration: none; }
.cskin-clean #comments .comment-metadata a:hover { color: var(--c97-blue); }
.cskin-clean #comments .comment-content { margin-top: 6px; }
.cskin-clean #comments .comment-content p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--c97-ink); }
.cskin-clean #comments .comment-content p:last-child { margin-bottom: 0; }
.cskin-clean #comments .comment-awaiting-moderation { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--c97-amber-fg); background: var(--c97-amber-bg); border: 1px solid var(--c97-amber-bd); border-radius: var(--c97-r-pill); padding: 3px 11px; }
.cskin-clean #comments .reply { margin-top: 10px; }
.cskin-clean #comments .comment-reply-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--c97-fs-meta); font-weight: 500; color: var(--c97-blue); background: var(--c97-blue-tint); border: 1px solid #dbe4f0; border-radius: var(--c97-r-pill); padding: 5px 14px; }
.cskin-clean #comments .comment-reply-link:hover { background: var(--c97-blue-tint-2); text-decoration: none; }
.cskin-clean #comments .children { margin: 0 0 0 60px; border-left: 2px solid #eef0f3; }
.cskin-clean #comments .children .comment-body { padding-left: 60px; padding-right: 0; margin-left: 14px; }
.cskin-clean #comments .bypostauthor > .comment-body .fn::after { content: "Author"; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c97-green-fg); background: var(--c97-green-bg); border: 1px solid var(--c97-green-bd); border-radius: var(--c97-r-pill); padding: 2px 8px; vertical-align: middle; }

/* ---- iMESSAGE skin (group chat) ---- */
.cskin-imessage #comments .comments-title { margin: 0 0 4px; font-size: var(--c97-fs-h3); font-weight: 600; letter-spacing: -.01em; color: var(--c97-ink); }
.cskin-imessage #comments .comments-intro { margin: 0 0 22px; font-size: var(--c97-fs-meta); color: #8e8e93; }
.cskin-imessage #comments .comment-body { position: relative; padding: 1px 0 1px 40px; margin: 12px 0 0; text-align: left; }
.cskin-imessage #comments .comment-author .avatar { position: absolute; left: 0; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; background: #e6e6ea; object-fit: cover; display: block; }
.cskin-imessage #comments .comment-meta { display: block; margin: 0 0 3px 6px; }
.cskin-imessage #comments .comment-author { display: inline; font-style: normal; }
.cskin-imessage #comments .comment-author .fn { font-style: normal; font-size: 12px; font-weight: 600; color: #8e8e93; }
.cskin-imessage #comments .comment-author .fn a { color: #8e8e93; text-decoration: none; }
.cskin-imessage #comments .comment-metadata { display: inline; font-size: 12px; }
.cskin-imessage #comments .comment-metadata::before { content: "\00b7"; margin: 0 5px; color: #c7c7cc; }
.cskin-imessage #comments .comment-metadata a { color: #a1a1a6; text-decoration: none; }
.cskin-imessage #comments .comment-content { position: relative; display: inline-block; max-width: 80%; background: #e9e9eb; color: #000; border-radius: 19px; padding: 8px 15px; text-align: left; }
.cskin-imessage #comments .comment-content p { margin: 0 0 4px; font-size: 15px; line-height: 1.4; color: inherit; }
.cskin-imessage #comments .comment-content p:last-child { margin: 0; }
.cskin-imessage #comments .comment-content::before { content: ""; position: absolute; z-index: 0; bottom: 0; left: -7px; width: 18px; height: 18px; background: #e9e9eb; border-bottom-right-radius: 16px; }
.cskin-imessage #comments .comment-content::after  { content: ""; position: absolute; z-index: 1; bottom: 0; left: -11px; width: 11px; height: 18px; background: #fff; border-bottom-right-radius: 12px; }
.cskin-imessage #comments .comment-awaiting-moderation { display: block; margin: 5px 0 0 6px; font-size: 11px; color: var(--c97-amber-fg); }
.cskin-imessage #comments .reply { margin: 3px 0 0 8px; }
.cskin-imessage #comments .comment-reply-link { font-size: 12px; color: var(--c97-blue); text-decoration: none; }
.cskin-imessage #comments .comment-reply-link:hover { text-decoration: underline; }
.cskin-imessage #comments .children { margin: 0; border: none; }
.cskin-imessage #comments .bypostauthor > .comment-body { padding-left: 0; text-align: right; }
.cskin-imessage #comments .bypostauthor > .comment-body .avatar,
.cskin-imessage #comments .bypostauthor > .comment-body .comment-meta { display: none; }
.cskin-imessage #comments .bypostauthor > .comment-body .comment-content { background: var(--c97-blue); color: #fff; }
.cskin-imessage #comments .bypostauthor > .comment-body .comment-content::before { left: auto; right: -7px; background: var(--c97-blue); border-bottom-right-radius: 0; border-bottom-left-radius: 16px; }
.cskin-imessage #comments .bypostauthor > .comment-body .comment-content::after  { left: auto; right: -11px; background: #fff; border-bottom-right-radius: 0; border-bottom-left-radius: 12px; }
.cskin-imessage #comments .bypostauthor > .comment-body .reply { margin: 3px 8px 0 0; }

/* ---- Comment form (shared by both skins) ---- */
#comments #respond { margin-top: 40px; background: var(--c97-wash); border-radius: var(--c97-r-md); padding: 28px 30px; }
#comments .comment-reply-title { margin: 0 0 4px; font-size: var(--c97-fs-h3); font-weight: 600; letter-spacing: -.01em; color: var(--c97-ink); }
#comments .comment-reply-title small { margin-left: 12px; font-size: var(--c97-fs-ui); font-weight: 400; }
#comments .comment-reply-title small a { color: var(--c97-blue); }
#comments .comment-notes, #comments .logged-in-as { margin: 0 0 18px; font-size: var(--c97-fs-meta); line-height: 1.5; color: var(--c97-muted); }
#comments .comment-notes .required { color: #c0392b; }
#comments .comment-form { display: flex; flex-wrap: wrap; gap: 16px; }
#comments .comment-form > p { margin: 0; }
#comments .comment-form-comment { flex: 0 0 100%; }
#comments .comment-form-author, #comments .comment-form-email, #comments .comment-form-url { flex: 1 1 200px; }
#comments .comment-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c97-muted); margin-bottom: 8px; }
#comments .comment-form label .required { color: #c0392b; margin-left: 2px; }
#comments .comment-form input[type=text],
#comments .comment-form input[type=email],
#comments .comment-form input[type=url],
#comments .comment-form textarea { width: 100%; border: 1px solid var(--c97-line); border-radius: var(--c97-r-xs); padding: 12px 16px; font-size: 16px; font-family: inherit; color: var(--c97-ink); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
#comments .comment-form input:focus, #comments .comment-form textarea:focus { border-color: var(--c97-blue); box-shadow: 0 0 0 3px rgba(0,96,169,.12); }
#comments .comment-form textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
#comments .comment-form-cookies-consent { flex: 0 0 100%; display: flex; align-items: flex-start; gap: 10px; }
#comments .comment-form-cookies-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c97-blue); }
#comments .comment-form-cookies-consent label { margin: 0; font-size: var(--c97-fs-meta); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--c97-muted-2); }
#comments .form-submit { flex: 0 0 100%; margin: 4px 0 0; }
#comments .form-submit .submit { background: var(--c97-blue); color: #fff; border: none; border-radius: var(--c97-r-pill); padding: 13px 28px; font-size: 16px; font-weight: 500; font-family: inherit; cursor: pointer; }
#comments .form-submit .submit:hover { background: var(--c97-blue-press); }

/* NOTE: the iMessage skin removes the Website/URL field in the mockups — the
   comment_form() there is filtered to Name + Email only. Keep that filter. */

/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .c97-nav__links, .c97-nav .c97-btn:not(.c97-nav__burger) { display: none !important; }
  .c97-nav__burger { display: flex !important; }
  .c97-title { font-size: 38px; }
  .c97-layout { grid-template-columns: 1fr !important; }
  .c97-rail { position: static; top: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 760px) {
  .c97-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .c97-title { font-size: 31px; }
  .c97-search-input { font-size: 20px; }
  .c97-rail { flex-direction: column; align-items: center; }
}