/* ============================================================
   CF-THEME.CSS — CouponFollow-style skin.
   Loaded LAST in header.php so it wins the cascade.

   What this file does:
   1. Re-tints the token layer: green brand (#1bbc9b), white/gray
      flat surfaces, #333/#505050 ink, #e4e4e4 hairlines.
   2. Flattens the existing components (cards, buttons, header,
      footer) so every page reads CouponFollow without new markup.
   3. Adds the CouponFollow-specific components: offer tabs, list
      coupon rows, mini coupon cards, trending-search cloud,
      popular-store tiles, FAQ accordion, article rows.

   Dark mode keeps working: the same overrides are repeated under
   [data-theme="dark"] with a dark-gray flat palette.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root,
[data-accent="violet"], [data-accent="blue"], [data-accent="emerald"],
[data-accent="amber"],  [data-accent="rose"],  [data-accent="slate"],
[data-accent="purple"] {
    /* Brand green ramp (CouponFollow) */
    --accent: #1bbc9b;
    --accent-light: #00c6a5;
    --accent-dark: #198d8a;
    --accent-glow: rgba(27, 188, 155, 0.28);
    --accent-glow-soft: rgba(27, 188, 155, 0.10);
    --accent-gradient: linear-gradient(135deg, #1bbc9b, #198d8a);

    /* Secondary: link blue used by CouponFollow for text links */
    --accent-2: #009bff;
    --accent-2-light: #4db8ff;
    --accent-2-glow-soft: rgba(0, 155, 255, 0.10);

    /* Ink */
    --text: #333333;
    --text-secondary: #505050;
    --text-muted: #767677;

    /* Flat surfaces */
    --bg: #ffffff;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f5f6f7;
    --bg-input: #f8f8f8;
    --bg-surface-t: rgba(255, 255, 255, 0.92);

    --border: #e4e4e4;
    --border-subtle: #efefef;
    --border-accent: rgba(27, 188, 155, 0.35);

    /* Flat, small shadows only */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.09);
    --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);

    --header-bg: rgba(255, 255, 255, 0.97);
    --header-border: #e4e4e4;

    /* Hero banner: soft green wash */
    --hero-bg: linear-gradient(135deg, #e9f8f4 0%, #f2fbf9 55%, #ffffff 100%);

    --card-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);

    --ok: #1bbc9b;
    --heart: #e10031;
    --heart-soft: rgba(225, 0, 49, 0.07);
    --heart-border: rgba(225, 0, 49, 0.25);

    --scrollbar-track: #f5f6f7;
    --scrollbar-thumb: #d9d9d9;
}

/* Dark mode: flat dark-gray CouponFollow variant */
[data-theme="dark"],
[data-theme="dark"][data-accent="violet"], [data-theme="dark"][data-accent="blue"],
[data-theme="dark"][data-accent="emerald"], [data-theme="dark"][data-accent="amber"],
[data-theme="dark"][data-accent="rose"], [data-theme="dark"][data-accent="slate"],
[data-theme="dark"][data-accent="purple"] {
    --accent: #1bbc9b;
    --accent-light: #2ad3b4;
    --accent-dark: #159c82;
    --accent-glow: rgba(27, 188, 155, 0.3);
    --accent-glow-soft: rgba(27, 188, 155, 0.12);
    --accent-gradient: linear-gradient(135deg, #1bbc9b, #159c82);

    --accent-2: #4db8ff;
    --accent-2-glow-soft: rgba(77, 184, 255, 0.10);

    --text: #f2f2f2;
    --text-secondary: #b9b9b9;
    --text-muted: #7f7f80;

    --bg: #17191d;
    --bg-surface: #1c1f24;
    --bg-card: #1f2227;
    --bg-elevated: #26292f;
    --bg-input: #26292f;
    --bg-surface-t: rgba(28, 31, 36, 0.94);

    --border: #33363c;
    --border-subtle: #2b2e33;
    --border-accent: rgba(27, 188, 155, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.45);

    --header-bg: rgba(23, 25, 29, 0.97);
    --header-border: #33363c;

    --hero-bg: linear-gradient(135deg, rgba(27, 188, 155, 0.14) 0%, rgba(23, 25, 29, 0.4) 60%, var(--bg) 100%);

    --card-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   2. GLOBAL RHYTHM
   ------------------------------------------------------------ */
.container { max-width: 1200px; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.ch-section { padding: 48px 0; }
.ch-section.ch-alt { background: #f8f8f8; }
[data-theme="dark"] .ch-section.ch-alt { background: var(--bg-surface); }

.ch-section-head { margin-bottom: 22px; }
.ch-section-head h1,
.ch-section-head h2 { letter-spacing: -0.01em; }
.ch-section-head p { color: var(--text-muted); margin-top: 4px; }

/* Ambient WebGL field stays but far subtler on the flat theme */
.ch-bg-scene { opacity: 0.3; }
[data-theme="dark"] .ch-bg-scene { opacity: 0.5; }

/* ------------------------------------------------------------
   3. BUTTONS — flat green, no gradient sheen
   ------------------------------------------------------------ */
.ch-btn,
.ch-btn-ghost {
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}
.ch-btn {
    background: var(--accent);
    color: #fff !important;
}
.ch-btn:hover {
    background: var(--accent-dark);
    color: #fff !important;
    transform: none;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.ch-btn-ghost {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary) !important;
}
.ch-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    background: var(--accent-glow-soft);
    transform: none;
}
.ch-btn i.ch-btn-arrow,
.ch-btn-ghost i.ch-btn-arrow { display: none; }

/* Header pill buttons follow the flat look too */
.ch-addstore-btn {
    background: var(--accent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
}
.ch-addstore-btn:hover { background: var(--accent-dark) !important; }
.ch-header .ch-addstore-btn[style*="background"] { background: var(--accent) !important; }

/* ------------------------------------------------------------
   4. HEADER — plain white bar, hairline border
   ------------------------------------------------------------ */
.ch-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--header-border);
}
.ch-header.shrunk { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); }

.ch-logo { font-weight: 800; color: var(--text); }
.ch-logo:hover { transform: none; }
.ch-logo span { color: var(--text); }
.ch-logo img { max-height: 38px; }

.ch-nav a {
    color: var(--text-secondary);
    border-radius: 6px;
}
.ch-nav a::after { height: 2px; border-radius: 2px; }
.ch-nav a:hover,
.ch-nav a.active { color: var(--accent); }

.ch-icon-btn,
.ch-theme-toggle {
    border-radius: 8px;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.ch-icon-btn:hover,
.ch-theme-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: transparent;
    transform: none;
}

/* ------------------------------------------------------------
   5. HERO — flat banner, no 3D stage
   ------------------------------------------------------------ */
.ch-hero { background: var(--hero-bg); border-bottom: 1px solid var(--border-subtle); }
.ch-hero > .container { padding-top: 40px; padding-bottom: 40px; }
.ch-hero-eyebrow {
    color: var(--accent-dark);
    background: var(--accent-glow-soft);
    border: 1px solid var(--border-accent);
    border-radius: 999px;
    display: inline-flex;
    padding: 5px 14px;
    font-weight: 600;
}
.ch-hero-eyebrow-dot { background: var(--accent); }
/* CouponFollow keeps its hero heading readable, not poster-scale */
.ch-hero-heading {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    letter-spacing: -0.02em;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: var(--text) !important;
}
.ch-hero-sub { color: var(--text-secondary); }

.ch-hero-search-field {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .ch-hero-search-field { background: var(--bg-input); }
.ch-hero-search-field > i.fa-search { color: var(--text-muted); }
.ch-hero-search-field input { background: transparent; }
.ch-hero-search-field button[type="submit"] {
    background: var(--accent);
    border-radius: 8px;
}
.ch-hero-search-field button[type="submit"]:hover { background: var(--accent-dark); }

.ch-hero-tag {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--accent-2);
    border-radius: 999px;
    font-weight: 600;
}
[data-theme="dark"] .ch-hero-tag { background: var(--bg-input); }
.ch-hero-tag:hover { border-color: var(--accent-2); }

/* No 3D stage / floating deal card / badges on the flat theme */
.ch-hero-stage { min-height: 0; }
.ch-hero-canvas, .ch-hero-badge { display: none !important; }
.ch-hero-deal {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transform: none !important;
    animation: none !important;
    padding: 22px;
}
[data-theme="dark"] .ch-hero-deal { background: var(--bg-card); }
/* Kill the decorative gradient blobs the old stage card carried */
.ch-hero-deal::before, .ch-hero-deal::after { display: none !important; }

/* ------------------------------------------------------------
   6. COUPON LIST ROW — the CouponFollow signature card.
   Markup:  <article class="ch-card ch-cf-row" data-tilt="0">
              <div class="ch-cf-offer">…big % + masked code…</div>
              <div class="ch-cf-main">…store, title, desc, meta…</div>
              <div class="ch-cf-action">…CTA + save…</div>
            </article>
   Keeps the .ch-card contract (data-coupon-id, .ch-unlock-btn,
   .ch-save-btn, .ch-card-reveal flip) so interactions.js works.
   ------------------------------------------------------------ */
.ch-card.ch-cf-row {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    padding: 0;
    border-radius: 10px;
    gap: 0;
    overflow: hidden;
    /* Flat cards never 3D-rotate: the flip's rotateY would mirror the
       reveal face (overflow:hidden + flat transform-style break the
       preserve-3d chain). Rows and offer cards reveal by crossfade
       instead: front content fades, the face shows in place. */
    transform: none !important;
}
.ch-card.ch-cf-row.is-flipped { transform: none !important; }
.ch-card.ch-cf-row::before { display: none; }
.ch-card.ch-cf-row:hover {
    border-color: #d3d3d3;
    box-shadow: var(--card-hover-shadow);
    transform: none !important;
}
[data-theme="dark"] .ch-card.ch-cf-row:hover { border-color: #4a4d53; }

/* Rows reveal flat: no rotateY, just fade the face in over the row */
.ch-card.ch-cf-row .ch-card-reveal { transform: none !important; }
.ch-card.ch-cf-row .ch-card-reveal .ch-reveal-burst { display: none; }

.ch-cf-offer {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 14px;
    background: #f8f8f8;
    border-right: 1px solid var(--border);
    text-align: center;
}
[data-theme="dark"] .ch-cf-offer { background: var(--bg-elevated); }
.ch-cf-offer-pct {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ch-cf-offer-pct small {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-top: 3px;
}
.ch-cf-offer-code {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: 0.08em;
}
[data-theme="dark"] .ch-cf-offer-code { background: var(--bg-card); }
.ch-cf-offer-type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.ch-cf-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ch-cf-main-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ch-cf-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}
.ch-cf-store img {
    width: 28px; height: 28px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
}
[data-theme="dark"] .ch-cf-store img { background: var(--bg-input); }
.ch-cf-store .ch-verified { margin-left: 2px; }
.ch-cf-exclusive {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b45309;
    background: #fef3c7;
    border-radius: 4px;
    padding: 2px 8px;
}
[data-theme="dark"] .ch-cf-exclusive { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.ch-cf-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
}
a.ch-cf-title-link:hover .ch-cf-title { color: var(--accent-dark); }
.ch-cf-desc {
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.ch-cf-meta i { font-size: 0.72rem; margin-right: 4px; }
.ch-cf-meta .ch-expiry.is-soon { color: #dc2626; }
.ch-cf-proof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-dark);
    margin: 0;
}
[data-theme="dark"] .ch-cf-proof { color: var(--accent-light); }

.ch-cf-action {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 18px;
    border-left: 1px solid var(--border-subtle);
}
/* The locked code row is not part of the row layout; the reveal
   happens on the flip face that interactions.js builds instead. */
.ch-cf-action .ch-code-row { display: none; }
.ch-cf-action .ch-unlock-btn,
.ch-cf-action .ch-cf-deal-btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.ch-cf-action .ch-unlock-btn:hover,
.ch-cf-action .ch-cf-deal-btn:hover {
    background: var(--accent-dark);
    box-shadow: 0 2px 8px var(--accent-glow);
}
.ch-cf-action .ch-save-btn {
    align-self: flex-end;
    margin: 0;
    position: static;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
}
.ch-cf-action .ch-save-btn:hover {
    color: var(--heart);
    border-color: var(--heart-border);
    background: var(--heart-soft);
}
.ch-cf-action .ch-save-btn.ch-saved { color: var(--heart); border-color: var(--heart-border); }

/* Reveal face on a row: white panel over the row */
.ch-card.ch-cf-row .ch-card-reveal {
    border-radius: 10px;
    background: var(--bg-card);
}

/* ------------------------------------------------------------
   7b. OFFER CARD — CouponFollow store-page design
     (article.offer-card on couponfollow.com/site/<store>)
   Markup: <article class="ch-card ch-cf-offer" id="C<id>">
             .ch-cf-offer-box
               .ch-cf-discount      big value + OFF + code chip
               .ch-cf-offer-details logo/store, title, desc,
                                    insights, See Details
               .ch-cf-offer-right   save + green reveal CTA with
                                    peeking code strip
   ------------------------------------------------------------ */
.ch-card.ch-cf-offer {
    flex-direction: column;
    height: auto;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    transform: none !important;
    scroll-margin-top: 90px;
}
.ch-card.ch-cf-offer.is-flipped { transform: none !important; }
.ch-card.ch-cf-offer::before { display: none; }
.ch-card.ch-cf-offer:hover {
    border-color: #d3d3d3;
    box-shadow: var(--card-hover-shadow);
    transform: none !important;
}
[data-theme="dark"] .ch-card.ch-cf-offer:hover { border-color: #4a4d53; }

.ch-cf-offer-box {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px;
    min-height: 150px;
    position: relative;
    z-index: 3;
}
/* Discount sits INLINE with its suffix, like CF's "<b>$10</b><span>OFF</span>" */
.ch-cf-discount {
    flex: 0 0 130px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 4px;
    text-align: left;
}
.ch-cf-discount-text {
    font-size: 2.45rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ch-cf-discount-suffix {
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text);
    margin-top: 0;
}
/* Legacy heading/paragraph margins leak into the offer card — kill them */
.ch-card.ch-cf-offer h3,
.ch-card.ch-cf-offer p,
.ch-card.ch-cf-offer .ch-cf-offer-title,
.ch-card.ch-cf-offer .ch-cf-offer-desc {
    margin: 0 !important;
}

.ch-cf-offer-details {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;          /* legacy .ch-card centers; offers read left */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;                  /* CF: gap 4px — tight, roomy feel */
}
.ch-cf-offer-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ch-cf-offer-store img {
    width: 26px; height: 26px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
}
[data-theme="dark"] .ch-cf-offer-store img { background: var(--bg-input); }
.ch-cf-offer-store i { color: var(--text-muted); font-size: 0.9rem; }
.ch-cf-offer-store-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}
.ch-cf-offer-title {
    font-size: 1.28rem;        /* CF title: 24px / 600 */
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    margin: 0;
}
.ch-cf-offer-desc {
    font-size: 0.94rem;        /* CF: 16px / 24px, but 2-line clamp */
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-insights {
    font-size: 0.82rem;        /* CF: 14px */
    color: var(--text-muted);
    text-align: left;
    line-height: 1.5;          /* normal inline flow: bullets stay attached */
    margin-top: 2px;
}
.ch-cf-insights b { color: var(--text); font-weight: 700; letter-spacing: 0.04em; }
.ch-cf-insights .is-ok { color: var(--accent-dark); font-weight: 600; white-space: nowrap; }
[data-theme="dark"] .ch-cf-insights .is-ok { color: var(--accent-light); }
/* the bullet separators inline, no stray line breaks */
.ch-cf-insights .is-bullet { color: var(--border); font-weight: 400; }
.ch-cf-offer-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 3px;
    width: 100%;
}
.ch-cf-details-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-2);
    text-decoration: none;
}
.ch-cf-details-link:hover { text-decoration: underline; }
.ch-cf-offer-expiry {
    font-size: 0.76rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ch-cf-offer-expiry.is-soon { color: #dc2626; }

.ch-cf-offer-right {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding-left: 16px;
}
/* Save heart sits top-right of the card instead of in the CTA column */
.ch-cf-offer .ch-save-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 4;
}
.ch-cf-offer .ch-save-btn:hover {
    color: var(--heart);
    border-color: var(--heart-border);
    background: var(--heart-soft);
}
.ch-cf-offer .ch-save-btn.ch-saved { color: var(--heart); border-color: var(--heart-border); }

/* The signature CouponFollow reveal button (btn-reveal):
   a dashed code chip full-width behind; a solid cover button on top
   that leaves a code "tail" peeking to the right. Hover slides the
   cover left AND widens the button (padding-right grows) so more of
   the real code shows through. Clicking still runs our interactions.js
   reveal (fetches the code and builds the reveal face on the card). */
.ch-cf-cta-wrap {
    width: 100%;
}
.ch-btn-reveal {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 14px 0 0;      /* room for the code tail peeking right */
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    overflow: visible;
    transition: padding 0.1s;
    font: inherit;
}
.ch-btn-reveal .ch-btn-code {
    position: absolute;
    inset: 0 0 0 auto;         /* waits behind the cover, right-aligned */
    top: 0; left: auto; right: 0; bottom: 0;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(27, 188, 155, 0.10);
    border: 2px dashed var(--accent);
    border-radius: 4px;
    color: var(--text);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
[data-theme="dark"] .ch-btn-reveal .ch-btn-code {
    background: rgba(27, 188, 155, 0.18);
}
.ch-btn-reveal .ch-btn-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    height: 50px;
    width: calc(100% - 16px);  /* the tail pokes out on the right */
    padding: 0 8px;
    background: var(--accent);
    border: 2px solid transparent;
    border-radius: 4px 0 0 4px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff !important;
    font-family: var(--font-display, inherit);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.1s, background 0.1s, padding 0.1s;
}
.ch-btn-reveal:hover { padding-right: 26px; }
.ch-btn-reveal:hover .ch-btn-cover {
    width: calc(100% - 28px);
    background: var(--accent-light);
}
[data-theme="dark"] .ch-btn-reveal .ch-btn-cover { background: var(--accent); }
[data-theme="dark"] .ch-btn-reveal:hover .ch-btn-cover { background: var(--accent-light); color: #06251f !important; }
/* Deals keep the same cover look without a code chip behind */
.ch-btn-reveal.is-deal .ch-btn-code { display: none; }
.ch-btn-reveal.is-deal { padding: 0; }
.ch-btn-reveal.is-deal .ch-btn-cover {
    width: 100%;
    border-radius: 4px;
}
/* ------------------------------------------------------------
   REVEALED STATE — CF's .btn-reveal.revealed: cover gone, the chip
   is static full-width with the code centered; a small tooltip below
   says "Click to copy code" (hover shows it, like CF's ::after).
   ------------------------------------------------------------ */
.ch-btn-reveal.is-revealed { padding: 0; }
.ch-btn-reveal.is-revealed .ch-btn-cover { display: none; }
.ch-btn-reveal.is-revealed .ch-btn-code {
    position: static;
    inset: auto;
    width: 100%;
    height: 50px;
    justify-content: center;
    padding: 0 12px;
    font-size: 1.05rem;        /* smaller than the peek so long codes fit */
    text-overflow: ellipsis;
    cursor: copy;
}
.ch-btn-reveal.is-revealed::after {
    content: "Click to copy code";
    position: absolute;
    left: 50%;
    bottom: -2.4rem;
    transform: translateX(-50%);
    z-index: 6;
    padding: 5px 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;
    pointer-events: none;
}
.ch-btn-reveal.is-revealed::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    transform: translateX(-50%);
    z-index: 6;
    border-bottom: 7px solid var(--accent);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;
    pointer-events: none;
}
.ch-btn-reveal.is-revealed:hover::after,
.ch-btn-reveal.is-revealed:hover::before,
.ch-btn-reveal.is-revealed:focus-visible::after,
.ch-btn-reveal.is-revealed:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------
   8. NAV CATEGORIES DROPDOWN — header "Categories ▾" expands to a
   live list of top-level categories with store counts.
   ------------------------------------------------------------ */
.ch-nav-drop {
    position: relative;
}
.ch-nav-drop > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ch-nav-drop-caret {
    font-size: 0.6rem !important;
    transition: transform 0.2s;
}
.ch-nav-drop:hover .ch-nav-drop-caret,
.ch-nav-drop.is-open .ch-nav-drop-caret,
.ch-mnav-toggle.is-open .ch-nav-drop-caret {
    transform: rotate(180deg);
}
.ch-nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 110;
    min-width: 380px;
    max-height: min(70vh, 460px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 2px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
}
.ch-nav-drop:hover .ch-nav-drop-menu,
.ch-nav-drop.is-open .ch-nav-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(4px);
}
.ch-nav-drop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text) !important;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ch-nav-drop-item i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.ch-nav-drop-item:hover {
    background: var(--bg-elevated);
    color: var(--accent-dark) !important;
}
.ch-nav-drop-item:hover i { color: var(--accent); }
.ch-nav-drop-item .cnt {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 999px;
    padding: 2px 8px;
}
.ch-nav-drop-all {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px !important;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-2) !important;
}
.ch-nav-drop-all:hover { color: var(--accent-dark) !important; }

/* Mobile: collapsible category list inside the off-canvas nav */
.ch-mnav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.ch-mnav-toggle .ch-nav-drop-caret { margin-left: auto; font-size: 0.8rem !important; }
.ch-mnav-cats {
    display: none;
    padding: 2px 0 6px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.ch-mnav-cats.open { display: block; }
.ch-mnav-cats a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    color: var(--text) !important;
}
.ch-mnav-cats a i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.ch-mnav-cats a .cnt {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 999px;
    padding: 2px 8px;
}
.ch-mnav-cats a:hover { color: var(--accent-dark) !important; }

/* ------------------------------------------------------------
   9. STORE DIRECTORY — the couponfollow.com/site page: plain
   3-column text-link lists ("Store Coupons (N)"), an A-Z jump bar,
   and letter groups. CSS multi-columns, CF-style.
   ------------------------------------------------------------ */
.ch-dir-section {
    padding: 26px 0;
}
.ch-dir-section + .ch-dir-section {
    border-top: 1px solid var(--border);
    margin-top: 10px;
}
.ch-dir-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 36px;
}
@media (min-width: 768px) {
    .ch-dir-list { columns: 3; }
}
.ch-dir-list li {
    margin: 0;
    padding: 0 0 3px;
    break-inside: avoid-column;
}
.ch-dir-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin-left: -4px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text) !important;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.ch-dir-list a:hover {
    color: var(--accent-dark) !important;
    background: var(--bg-elevated);
}
.ch-dir-logo {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-dir-logo { background: var(--bg-input); }
.ch-dir-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.ch-dir-logo-init {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-dark);
    background: rgba(27, 188, 155, 0.12);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ch-dir-logo-init { color: var(--accent-light); background: rgba(27, 188, 155, 0.2); }
.ch-dir-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-dir-text .cnt {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}
.ch-dir-azbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.ch-dir-azbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary) !important;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ch-dir-azbar a:hover {
    color: var(--accent-dark) !important;
    border-color: var(--accent);
    background: var(--heart-soft);
}
.ch-dir-letter {
    margin-bottom: 26px;
    scroll-margin-top: 90px;
}
.ch-dir-letter-head {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
/* Reveal face on the offer card: flat white panel */
.ch-card.ch-cf-offer .ch-card-reveal {
    border-radius: 10px;
    background: var(--bg-card);
    transform: none !important;
}
.ch-card.ch-cf-offer .ch-card-reveal .ch-reveal-burst { display: none; }

/* ------------------------------------------------------------
   POPUP MODAL — CF's deal popup: dim backdrop, white panel, ticket
   badge, dashed code chip, Copy + Continue-to-store buttons.
   ------------------------------------------------------------ */
.ch-cf-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ch-cf-modal.is-open { opacity: 1; }
.ch-cf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 27, 29, 0.6);
    cursor: pointer;
}
.ch-cf-modal-panel {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    padding: 30px 28px 24px;
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s;
}
.ch-cf-modal.is-open .ch-cf-modal-panel { transform: none; }
.ch-cf-modal-panel:focus { outline: none; }
.ch-cf-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}
.ch-cf-modal-x:hover { color: var(--text); background: var(--border-subtle); }
.ch-cf-modal-badge {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: rgba(27, 188, 155, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.ch-cf-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 4px;
}
.ch-cf-modal-store {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 18px;
}
.ch-cf-modal-code {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 188, 155, 0.10);
    border: 2px dashed var(--accent);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
[data-theme="dark"] .ch-cf-modal-code { background: rgba(27, 188, 155, 0.18); }
.ch-cf-modal-code-text {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ch-cf-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ch-cf-modal-copy {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.ch-cf-modal-copy:hover { background: var(--accent-dark); }
.ch-cf-modal-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--bg-elevated);
    color: var(--accent-2) !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.ch-cf-modal-go:hover { border-color: var(--accent); background: var(--heart-soft); }
.ch-cf-modal-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 14px 0 0;
}
body.is-modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   ROW CHIPS — coupons.php/category/list rows: after reveal the green
   button becomes the same dashed CF chip; clicking copies the code.
   ------------------------------------------------------------ */
.ch-unlock-btn.is-code-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 188, 155, 0.10) !important;
    border: 2px dashed var(--accent);
    color: var(--text) !important;
    box-shadow: none;
    padding: 0 8px;
    cursor: copy;
}
[data-theme="dark"] .ch-unlock-btn.is-code-btn { background: rgba(27, 188, 155, 0.18) !important; }
.ch-chip-code {
    display: block;
    width: 100%;
    text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   7c. STORE PAGE — CouponFollow "site/<store>" page furniture
   ------------------------------------------------------------ */
.ch-cf-storehead {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
}
.ch-cf-storehead-logo {
    flex: 0 0 110px;
    width: 110px; height: 110px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ch-cf-storehead-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.ch-cf-storehead-logo i { color: var(--text-muted); font-size: 2rem; }
.ch-cf-storehead h1 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.ch-cf-storehead-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ch-cf-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}
.ch-cf-rating .rate-box {
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 3px 9px;
    font-weight: 800;
}
.ch-cf-anchorlinks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ch-cf-anchorlinks a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-2);
}
.ch-cf-anchorlinks a:hover { text-decoration: underline; }

/* Coupon Highlights table */
.ch-cf-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 34px;
}
.ch-cf-hl-item {
    padding: 16px 18px;
    border-right: 1px solid var(--border-subtle);
    text-align: center;
}
.ch-cf-hl-item:last-child { border-right: none; }
.ch-cf-hl-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ch-cf-hl-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.ch-cf-hl-value em { font-style: normal; color: var(--accent); }

/* Type filter pills */
.ch-cf-typefilters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ch-cf-typefilters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 18px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ch-cf-typefilters a:hover { border-color: var(--border-accent); color: var(--accent-dark); }
.ch-cf-typefilters a.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}
[data-theme="dark"] .ch-cf-typefilters a { background: var(--bg-input); }
[data-theme="dark"] .ch-cf-typefilters a.is-active { background: var(--accent); }

@media (max-width: 767px) {
    .ch-cf-offer-box { flex-direction: column; padding: 14px; }
    .ch-cf-discount {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .ch-cf-discount-text { font-size: 1.6rem; }
    .ch-cf-offer-details { padding: 0; }
    .ch-cf-offer-right {
        flex: 0 0 auto;
        padding: 12px 0 0;
        margin-top: 12px;
        border-top: 1px solid var(--border-subtle);
    }
    .ch-cf-highlights { grid-template-columns: repeat(2, 1fr); }
    .ch-cf-hl-item { border-bottom: 1px solid var(--border-subtle); }
    .ch-cf-hl-item:nth-child(2n) { border-right: none; }
    .ch-cf-hl-item:nth-last-child(-n+2) { border-bottom: none; }
    .ch-cf-storehead-logo { flex: 0 0 84px; width: 84px; height: 84px; }
}

/* ------------------------------------------------------------
   7. OFFER TABS (Best Deals / Staff Picks)
   ------------------------------------------------------------ */
.ch-cf-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.ch-cf-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.ch-cf-tab:hover { color: var(--text); }
.ch-cf-tab.is-active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}
[data-theme="dark"] .ch-cf-tab.is-active { color: var(--accent-light); }
.ch-cf-tabpanel { display: none; }
.ch-cf-tabpanel.is-active { display: block; }

/* ------------------------------------------------------------
   8. MINI COUPON CARD (Staff Picks / small grids)
   ------------------------------------------------------------ */
.ch-cf-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ch-cf-mini:hover {
    border-color: var(--border-accent);
    box-shadow: var(--card-hover-shadow);
}
.ch-cf-mini-logo {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-cf-mini-logo { background: var(--bg-input); }
.ch-cf-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ch-cf-mini-logo i { color: var(--text-muted); }
.ch-cf-mini-body { min-width: 0; }
.ch-cf-mini-store {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ch-cf-mini-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-mini:hover .ch-cf-mini-title { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-mini:hover .ch-cf-mini-title { color: var(--accent-light); }
.ch-cf-mini-pct {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   9. TRENDING SEARCHES CLOUD
   ------------------------------------------------------------ */
.ch-cf-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ch-cf-cloud a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-2);
    background: var(--bg-elevated);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 16px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
[data-theme="dark"] .ch-cf-cloud a { background: var(--bg-input); }
.ch-cf-cloud a:hover {
    background: var(--accent-glow-soft);
    border-color: var(--border-accent);
    color: var(--accent-dark);
}
[data-theme="dark"] .ch-cf-cloud a:hover { color: var(--accent-light); }

/* ------------------------------------------------------------
   10. POPULAR STORES TILES
   ------------------------------------------------------------ */
.ch-cf-store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ch-cf-store-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ch-cf-store-tile:hover {
    border-color: var(--border-accent);
    box-shadow: var(--card-hover-shadow);
}
.ch-cf-store-tile-logo {
    flex: 0 0 52px;
    width: 52px; height: 52px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-cf-store-tile-logo { background: var(--bg-input); }
.ch-cf-store-tile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.ch-cf-store-tile-logo i { color: var(--text-muted); }
.ch-cf-store-tile-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.25;
}
.ch-cf-store-tile-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.ch-cf-store-tile:hover .ch-cf-store-tile-name { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-store-tile:hover .ch-cf-store-tile-name { color: var(--accent-light); }

/* ------------------------------------------------------------
   11. FAQ ACCORDION (native <details>)
   ------------------------------------------------------------ */
.ch-cf-faq { max-width: 820px; }
.ch-cf-faq details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.ch-cf-faq details[open] { border-color: var(--border-accent); }
.ch-cf-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    cursor: pointer;
}
.ch-cf-faq summary::-webkit-details-marker { display: none; }
.ch-cf-faq summary i {
    color: var(--accent);
    font-size: 0.8rem;
    transition: transform 0.25s;
}
.ch-cf-faq details[open] summary i { transform: rotate(45deg); }
.ch-cf-faq .ch-cf-faq-body {
    padding: 0 20px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ------------------------------------------------------------
   12. ARTICLE ROWS (Popular articles)
   ------------------------------------------------------------ */
.ch-cf-article-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.ch-cf-article-row:last-child { border-bottom: none; }
.ch-cf-article-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: var(--accent-glow-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ch-cf-article-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.35;
}
.ch-cf-article-row:hover .ch-cf-article-title { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-article-row:hover .ch-cf-article-title { color: var(--accent-light); }
.ch-cf-article-date { font-size: 0.76rem; color: var(--text-muted); }
.ch-cf-article-row i.fa-arrow-right {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: transform 0.2s, color 0.2s;
}
.ch-cf-article-row:hover i.fa-arrow-right { color: var(--accent); transform: translateX(3px); }

/* ------------------------------------------------------------
   13. GRID CARDS (used on saved-coupons, 404, etc.)
     flatten to the CouponFollow look
   ------------------------------------------------------------ */
.ch-card {
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.ch-card:hover { box-shadow: var(--card-hover-shadow); }
.ch-card .ch-card-cta { border-radius: 8px; }
.ch-card-logo { border-radius: 8px; }

/* ------------------------------------------------------------
   14. MISC FLATTENING
   ------------------------------------------------------------ */
/* Category panels */
.ch-cat-panel { border-radius: 10px; box-shadow: var(--shadow-sm); }
/* Newsletter box */
.ch-newsletter {
    background: var(--hero-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 40px 24px;
}
.ch-sub-btn { background: var(--accent); border-radius: 8px; }
.ch-sub-btn:hover { background: var(--accent-dark); }
/* Blog cards */
.ch-blog-card { border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
.ch-blog-card:hover { box-shadow: var(--card-hover-shadow); }
/* Pagination */
.ch-pagination a,
.ch-pagination span { border-radius: 8px; }
.ch-pagination a:hover { border-color: var(--accent); color: var(--accent); }
/* Footer: light gray, flat */
.ch-footer { background: #f8f8f8; border-top: 1px solid var(--border); }
[data-theme="dark"] .ch-footer { background: var(--bg-surface); }
/* Toasts */
.ch-toast { border-radius: 8px; }
/* Cursor glow layer off — the flat theme doesn't want it */
.ch-card-glow, .ch-card-shine { display: none; }
/* Hover hairline on grid cards: keep, already accent-tinted via tokens */

/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .ch-cf-store-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .ch-cf-row { flex-direction: column; }
    .ch-cf-offer {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 12px;
    }
    .ch-cf-offer-pct { font-size: 1.4rem; }
    .ch-cf-offer-pct small { display: inline; margin: 0 0 0 4px; }
    .ch-cf-action {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        padding: 12px 16px;
    }
    .ch-cf-action .ch-unlock-btn,
    .ch-cf-action .ch-cf-deal-btn { flex: 1; }
    .ch-cf-action .ch-save-btn { align-self: center; }
    .ch-cf-store-grid { grid-template-columns: repeat(2, 1fr); }
    .ch-cf-tabs { overflow-x: auto; }
    .ch-cf-tab { white-space: nowrap; }
}
@media (max-width: 420px) {
    .ch-cf-store-grid { grid-template-columns: 1fr; }
}