/* ============================================================================
   Warehouse Clearance Deals — Master Theme Stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the redesigned warehouseclearancedeals.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 --- */
  /* Placeholder WCD reskin (Task 9 + fix round) — Jeff's real branding pass replaces these later.
     The costco97 fork's pervasive brand blue (--wcd-blue and its press/tint shades — the
     "single action/accent color, from the logo") has been retired entirely so the theme stops
     reading as costco97. Every former --wcd-blue consumer now resolves through one of the two
     tokens below, chosen per usage site (small/interactive chrome vs. big solid fills):
       --wcd-primary / --wcd-primary-dark / --wcd-primary-tint / --wcd-primary-tint-2
         -> accent roles: links, buttons, interactive highlights, badges, chips, small chrome.
       --wcd-navy / --wcd-navy-dark
         -> large-surface roles: big solid card/panel fills where full-saturation orange would
            overwhelm (previously large solid --wcd-blue fills).
     --wcd-primary already had live consumers (wcd-discount-badge/wcd-cta-btn/wcd-disclosure
     below used var(--wcd-primary, #E8590C) with an inline fallback before this token existed);
     defining it here backs those with a real custom property instead of relying on the fallback. */
  --wcd-primary:        #E8590C;   /* clearance orange — placeholder brand primary (accent/small-chrome) */
  --wcd-primary-dark:   #C2410C;   /* hover / active state for --wcd-primary */
  --wcd-primary-tint:   #fdf0e6;   /* pale orange — pill/chip/badge backgrounds, hero washes (was --wcd-blue-tint) */
  --wcd-primary-tint-2: #fbe2cc;   /* deeper pale-orange tint on hover (was --wcd-blue-tint-2) */
  --wcd-navy:        #243447;   /* charcoal-blue (placeholder; replaces the old Costco navy) — ".97" price accent, feature cards, and large solid-fill panels/cards (was --wcd-blue) */
  --wcd-navy-dark:   #1A2635;   /* darker charcoal — border/press state alongside a solid --wcd-navy fill (was --wcd-blue-press) */

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

  /* --- Category accents (post-type color set) --- */
  --wcd-cat-deal:    #E8590C;   /* Deals            — orange (= --wcd-primary; was the retired brand blue) */
  --wcd-cat-new:     #1F8A5B;   /* New Products     — green */
  --wcd-cat-blog:    #6E56CF;   /* Blog             — purple */
  --wcd-cat-recall:  #B4231F;   /* Recalls          — red */
  --wcd-cat-recipe:  #BE4A1E;   /* Recipe           — terracotta */

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

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

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

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

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

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

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

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

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

/* ---------------------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--wcd-bg);
  font-family: var(--wcd-font);
  color: var(--wcd-ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--wcd-primary); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
a:hover { text-decoration: underline; }
::selection { background: var(--wcd-primary); 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(--wcd-shadow-btn); }
button:not(:disabled):active { transform: translateY(0);   box-shadow: 0 2px 6px -3px rgba(0,0,0,.3); }

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

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.wcd-container { max-width: var(--wcd-container); margin: 0 auto; padding-left: var(--wcd-gutter); padding-right: var(--wcd-gutter); }
.wcd-reading   { max-width: var(--wcd-reading);   margin: 0 auto; padding-left: var(--wcd-gutter); padding-right: var(--wcd-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). */
.wcd-layout {
  max-width: var(--wcd-container);
  margin: 0 auto;
  padding: 44px var(--wcd-gutter) 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wcd-rail-w);
  gap: var(--wcd-gap);
  align-items: start;
}
.wcd-layout.full { max-width: var(--wcd-reading-fw); grid-template-columns: minmax(0, 1fr); }
.wcd-layout.full .wcd-rail { display: none; }
.wcd-rail { position: sticky; top: calc(var(--wcd-navh) + 20px); display: flex; flex-direction: column; gap: 22px; }

/* ---------------------------------------------------------------------------
   4. NAVIGATION (sticky, blurred)
   ------------------------------------------------------------------------- */
.wcd-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(--wcd-line);
}
.wcd-nav__inner { max-width: var(--wcd-container); margin: 0 auto; padding: 0 var(--wcd-gutter); display: flex; align-items: center; justify-content: space-between; height: var(--wcd-navh); }
/* Text wordmark fallback (no custom logo uploaded) — placeholder until Jeff's branding pass */
.wcd-wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.wcd-wordmark--accent { color: var(--wcd-primary, #E8590C); }
.wcd-nav__links { display: flex; gap: 6px; align-items: center; }
.wcd-nav__link  { font-size: var(--wcd-fs-ui); color: var(--wcd-ink); padding: 7px 13px; border-radius: var(--wcd-r-pill); }
.wcd-nav__link:hover,
.wcd-nav__link.is-active { background: var(--wcd-primary-tint); color: var(--wcd-primary); text-decoration: none; }
.wcd-nav__icon  { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.wcd-nav__icon:hover { background: var(--wcd-primary-tint); text-decoration: none; }
.wcd-nav__burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; cursor: pointer; }
.wcd-nav__burger:hover { background: var(--wcd-primary-tint); }

/* Search overlay (window-shade) */
.wcd-search-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; }
.wcd-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(--wcd-line); box-shadow: var(--wcd-shadow-pop); transform-origin: top; animation: wcdshade .28s var(--wcd-ease); }
.wcd-search-scrim   { flex: 1; background: rgba(0,0,0,.28); cursor: pointer; animation: wcdfade .28s ease; }
.wcd-search-input   { flex: 1; border: none; outline: none; background: transparent; font-size: 28px; letter-spacing: -.01em; color: var(--wcd-ink); }
.wcd-search-input::placeholder { color: #c4c4cc; font-weight: 300; }

/* ---------------------------------------------------------------------------
   5. BUTTONS & PILLS
   ------------------------------------------------------------------------- */
.wcd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--wcd-primary); color: #fff; border: none;
  border-radius: var(--wcd-r-pill); padding: 11px 22px;
  font-size: var(--wcd-fs-ui); font-weight: 500; font-family: inherit; cursor: pointer;
}
.wcd-btn:hover { background: var(--wcd-primary-dark); color: #fff; text-decoration: none; }
.wcd-btn--sm  { padding: 8px 16px; }
.wcd-btn--ghost { background: #fff; color: var(--wcd-primary); }
.wcd-btn--ghost:hover { background: var(--wcd-primary-dark); } /* base hover turns text white — needs a blue deep enough to carry it */

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------------- */
.wcd-footer { border-top: 1px solid var(--wcd-line); background: var(--wcd-wash-2); }
.wcd-footer__inner { max-width: var(--wcd-container); margin: 0 auto; padding: 44px var(--wcd-gutter) 52px; }
.wcd-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.wcd-footer__col { display: flex; flex-direction: column; gap: 10px; }
.wcd-footer__head { font-size: 12px; font-weight: 600; color: var(--wcd-ink); }
.wcd-footer a, .wcd-footer span { font-size: 12px; color: var(--wcd-footer-txt); text-decoration: none; }
.wcd-footer__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--wcd-line); font-size: 12px; color: var(--wcd-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(--wcd-fs-h2); font-weight: 600; letter-spacing: -.012em; color: var(--wcd-ink); }
.cskin-clean #comments .comments-intro { margin: 0 0 22px; font-size: 15px; color: var(--wcd-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(--wcd-ink); }
.cskin-clean #comments .comment-author .fn a { color: var(--wcd-ink); text-decoration: none; }
.cskin-clean #comments .comment-author .fn a:hover { color: var(--wcd-primary); }
.cskin-clean #comments .comment-metadata { font-size: var(--wcd-fs-meta); }
.cskin-clean #comments .comment-metadata a { color: var(--wcd-muted); text-decoration: none; }
.cskin-clean #comments .comment-metadata a:hover { color: var(--wcd-primary); }
.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(--wcd-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(--wcd-amber-fg); background: var(--wcd-amber-bg); border: 1px solid var(--wcd-amber-bd); border-radius: var(--wcd-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(--wcd-fs-meta); font-weight: 500; color: var(--wcd-primary); background: var(--wcd-primary-tint); border: 1px solid var(--wcd-primary-tint-2); border-radius: var(--wcd-r-pill); padding: 5px 14px; }
.cskin-clean #comments .comment-reply-link:hover { background: var(--wcd-primary-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(--wcd-green-fg); background: var(--wcd-green-bg); border: 1px solid var(--wcd-green-bd); border-radius: var(--wcd-r-pill); padding: 2px 8px; vertical-align: middle; }

/* ---- iMESSAGE skin (group chat) ---- */
.cskin-imessage #comments .comments-title { margin: 0 0 4px; font-size: var(--wcd-fs-h3); font-weight: 600; letter-spacing: -.01em; color: var(--wcd-ink); }
.cskin-imessage #comments .comments-intro { margin: 0 0 22px; font-size: var(--wcd-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(--wcd-amber-fg); }
.cskin-imessage #comments .reply { margin: 3px 0 0 8px; }
.cskin-imessage #comments .comment-reply-link { font-size: 12px; color: var(--wcd-primary); 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(--wcd-primary); color: #fff; }
.cskin-imessage #comments .bypostauthor > .comment-body .comment-content::before { left: auto; right: -7px; background: var(--wcd-primary); 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(--wcd-wash); border-radius: var(--wcd-r-md); padding: 28px 30px; }
#comments .comment-reply-title { margin: 0 0 4px; font-size: var(--wcd-fs-h3); font-weight: 600; letter-spacing: -.01em; color: var(--wcd-ink); }
#comments .comment-reply-title small { margin-left: 12px; font-size: var(--wcd-fs-ui); font-weight: 400; }
#comments .comment-reply-title small a { color: var(--wcd-primary); }
#comments .comment-notes, #comments .logged-in-as { margin: 0 0 18px; font-size: var(--wcd-fs-meta); line-height: 1.5; color: var(--wcd-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(--wcd-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(--wcd-line); border-radius: var(--wcd-r-xs); padding: 12px 16px; font-size: 16px; font-family: inherit; color: var(--wcd-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(--wcd-primary); box-shadow: 0 0 0 3px rgba(232,89,12,.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(--wcd-primary); }
#comments .comment-form-cookies-consent label { margin: 0; font-size: var(--wcd-fs-meta); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--wcd-muted-2); }
#comments .form-submit { flex: 0 0 100%; margin: 4px 0 0; }
#comments .form-submit .submit { background: var(--wcd-primary); color: #fff; border: none; border-radius: var(--wcd-r-pill); padding: 13px 28px; font-size: 16px; font-weight: 500; font-family: inherit; cursor: pointer; }
#comments .form-submit .submit:hover { background: var(--wcd-primary-dark); }

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

/* --- WCD deal components ------------------------------------------- */
.wcd-price-block { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.wcd-price { font-size: 1.75rem; font-weight: 700; }
.wcd-price-original { opacity: .55; }
.wcd-discount-badge { background: var(--wcd-primary, #E8590C); color: #fff;
  padding: .15rem .5rem; border-radius: .35rem; font-weight: 600; font-size: .85rem; }
.wcd-price-block.is-expired .wcd-price { text-decoration: line-through; opacity: .6; }
.wcd-expired-flag { background: #6b7280; color: #fff; padding: .15rem .5rem;
  border-radius: .35rem; font-size: .85rem; }
.wcd-cta-btn { display: inline-block; background: var(--wcd-primary, #E8590C);
  color: #fff; padding: .75rem 1.5rem; border-radius: .5rem; font-weight: 700; }
.wcd-cta-btn:hover { filter: brightness(.92); }
.wcd-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.wcd-chip { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: .8; }

/* --- Store brand identity (tinted treatment) ------------------------ */
/* Identity surfaces only: the store chip on deal pages + store lines on
   cards. Never buttons, badges, or CTAs - action colors stay the theme's.
   A store without a mapping (future sites) falls back to the theme tint
   via the var() defaults on the consumers below. Home Depot's text color
   is darker than the logo orange for AA contrast on the tint. */
.wcd-store--costco           { --brand: #005DAA; --brand-tint: rgba(0, 93, 170, .12); }
.wcd-store--walmart          { --brand: #0071CE; --brand-tint: rgba(0, 113, 206, .12); }
.wcd-store--sams-club        { --brand: #0067A0; --brand-tint: rgba(0, 103, 160, .12); }
.wcd-store--bjs-wholesale    { --brand: #C8102E; --brand-tint: rgba(200, 16, 46, .10); }
.wcd-store--home-depot       { --brand: #C24E02; --brand-tint: rgba(249, 99, 2, .12); }
.wcd-store--target           { --brand: #CC0000; --brand-tint: rgba(204, 0, 0, .09); }
.wcd-store--amazon-warehouse { --brand: #8A5200; --brand-tint: rgba(255, 153, 0, .16); }
.wcd-store--best-buy-outlet  { --brand: #0046BE; --brand-tint: rgba(0, 70, 190, .10); }

/* Card store lines (home grid, deal archives, related rows). */
.wcd-brandpill { display: inline-block; background: var(--brand-tint, var(--wcd-primary-tint));
  color: var(--brand, var(--wcd-primary-dark)); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; line-height: 1.5; }

/* The store chip on deal pages: same colors, keeps chip geometry. */
.wcd-chip.wcd-chip--brand { background: var(--brand-tint, var(--wcd-primary-tint));
  color: var(--brand, var(--wcd-primary-dark)); border-color: transparent;
  opacity: 1; font-weight: 600; }
.wcd-disclosure { font-size: .85rem; opacity: .75; border-left: 3px solid
  var(--wcd-primary, #E8590C); padding: .5rem .75rem; margin-bottom: 1rem; }
.wcd-footer-disclaimer { font-size: .8rem; opacity: .7; }
.wcd-brand-card { display: flex; flex-direction: column; gap: .25rem; }
.wcd-crumb { font-size: .85rem; opacity: .8; }