/* GW HU listing card (.cc) — F3 markup, design approved 8 Sep 2026.
 *
 * Load AFTER the theme stylesheet AND after the inline <style> in wp_head:
 * that inline block sets article typography with 1 id + 4 classes, so it beats
 * any single-class rule here. The card avoids bare <p> for that reason — see
 * the handoff README.
 *
 * Six things that look like mistakes and are not:
 *  1. no overflow:hidden on .cc — the bonus-terms popup is a LAYER that leaves
 *     the card by 4-13 px at the top; clipping it reads as a broken corner.
 *     The radius is held by the logo plate and the rank-1 stripe instead.
 *  2. the popup has ONE geometry (absolute) in every state. Putting it in the
 *     flow on tap grows the card and drags the neighbours' CTA down with it.
 *  3. .cc--pop (set by the script) lifts the open card, not :has() — 87% of the
 *     clicks are mobile and old Safari is still in that traffic.
 *  4. .cc__pop::after (the arrow) needs pointer-events:none: it sits exactly
 *     over the "i" button and otherwise swallows the tap that opens it.
 *  5. .cc .btn-visit sets cursor:pointer because the theme ships
 *     `cursor: poInter Variable` on .btn and button (a bad find/replace).
 *  6. the green CTA is the theme's own button with --main-color swapped inside
 *     .cc. Reverting to the red CTA = deleting two values, not a rewrite.
 */

.cc{--cc-cta:var(--cta,#5C8C02);--cc-cta-h:var(--cta-h,#4E7502);--cc-cta-a:var(--cta-a,#456701); --cc-line:#ececec;--cc-ink:#171616;--cc-mut:#6D6B6B; position:relative;background:#fff;border:1px solid var(--cc-line);border-radius:7px; display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(16,14,14,.05); transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease}
@media (hover:hover){.cc:hover{border-color:#dcdee2;transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(16,14,14,.22),0 1px 2px rgba(16,14,14,.06)}}
.cc--first{border-color:#d7dfc6}
.cc--first::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3; border-radius:6px 6px 0 0;background:var(--cc-cta)}
.cc__logo{position:relative;height:100px;flex:none;border-bottom:1px solid var(--cc-line); border-radius:6px 6px 0 0; display:flex;align-items:center;justify-content:center;padding:8px 20px;overflow:hidden}
/* The plate is 100 px tall (52 px of image before: every logo hit the height
   cap and filled 25-62% of the plate width). max-width keeps a very wide
   logo off the plate's side edges. */
.cc__logo img{display:block;max-width:82%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cc__pos{position:absolute;top:6px;left:6px;z-index:2;width:20px;height:20px;border-radius:50%; background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(16,14,14,.12);color:#333; font-size:10px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.cc__body{display:flex;flex-direction:column;flex:1;padding:0 14px 11px}
.cc__ndslot{display:flex;justify-content:center;align-items:flex-start;min-height:17px}
.cc__nd{display:inline-block;margin-top:-11px;position:relative;z-index:1;max-width:100%; background:#FFE6E6;border:1px solid #f4c9c9;color:#8F1111;border-radius:12px;padding:3px 10px; font-size:11.5px;font-weight:600;line-height:1.35;text-align:center}
.cc__head{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:6px 0 7px;border-bottom:1px solid var(--cc-line)}
.cc__name{font-size:13px;font-weight:600;color:#100E0E;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc__score{display:flex;align-items:baseline;gap:2px;line-height:1;flex:none}
.cc__score b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cc__score b.good{color:#4E7502}
.cc__score b.warn{color:#B45309}
.cc__score b.bad{color:#D70304}
.cc__score small{font-size:11px;color:var(--cc-mut)}
.cc__rows{display:flex;flex-direction:column}
.cc__row{position:relative;padding:6px 0;border-bottom:1px solid var(--cc-line); display:flex;flex-direction:column}
.cc__lbl{display:flex;align-items:center;gap:4px;font-size:12.5px;line-height:1.5;color:var(--cc-mut)}
.cc__ibtn{all:unset;display:inline-flex;cursor:pointer;color:#a3a3a8;border-radius:50%}
.cc__ibtn:hover, .cc__ibtn:focus-visible{color:var(--cc-ink)}
.cc__i{width:15px;height:15px;display:block}
.cc__big{font-size:19px;font-weight:700;line-height:1.15;color:var(--cc-ink); font-variant-numeric:tabular-nums}
.cc__sub{font-size:12px;font-weight:600;color:#262626}
.cc__sub--off{font-weight:400;color:#a8a8ad}
.cc__pays{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.cc__pays i{width:31px;height:23px;flex:none;border:1px solid #e6e7ea;border-radius:4px;background:#fff; display:flex;align-items:center;justify-content:center}
.cc__pays img{width:21px;height:15px;object-fit:contain}
.cc__pays-more{font-size:10px;font-weight:600;line-height:1;font-style:normal;color:#8a8e97}
.cc__pop{--cc-arrow:111px;position:absolute;bottom:calc(100% - 7px);left:-4px;right:-4px;z-index:4; background:#171616;color:#fff;font-size:11.5px;line-height:1.45;text-align:left; padding:9px 11px;border-radius:5px;box-shadow:0 6px 18px rgba(16,14,14,.28); opacity:0;visibility:hidden;transition:opacity .12s ease}
.cc__pop::after{content:"";position:absolute;top:100%;left:calc(var(--cc-arrow) - 6px); border:6px solid transparent;border-top-color:#171616;pointer-events:none}
.cc__pop.is-down{bottom:auto;top:calc(100% - 7px)}
.cc__pop.is-down::after{top:auto;bottom:100%; border-top-color:transparent;border-bottom-color:#171616}
@media (hover:hover){.cc__lbl:hover+.cc__pop,.cc__pop:hover{opacity:1;visibility:visible}}
.cc__pop.is-open{opacity:1;visibility:visible}
/* keyboard focus on the "i". The handoff had `.cc__ibtn:focus-visible~.cc__pop`,
   which never matched: the button sits inside .cc__lbl and the popup is the
   label's sibling, not the button's. Not :focus-within - a clicked button keeps
   focus, so the popup would stay open after the script closes it. Own rule, so
   a browser without :has() drops only this line (Enter still opens it). */
.cc__lbl:has(.cc__ibtn:focus-visible)+.cc__pop{opacity:1;visibility:visible}
.cc--pop{z-index:6}
@media (hover:hover){.cc:hover{z-index:6}}
.cc__foot{margin-top:auto;padding-top:9px;display:flex;flex-direction:column;align-items:center;gap:5px}
.cc{--main-color:var(--cc-cta);--btn-visit-hover:var(--cc-cta-h)}
.cc .btn-visit{width:100%;margin-bottom:0;transition:background-color .12s ease; cursor:pointer}
.cc .btn-visit:active{background:var(--cc-cta-a)}
.cc .btn-visit:focus-visible{outline:2px solid var(--cc-cta);outline-offset:2px}
.cc__tc{font-size:13px;font-weight:600;color:#B70101;text-decoration:none}
.cc__tc:hover{text-decoration:underline}

/* The card assumed the theme's global `*{box-sizing:border-box}` and said so
   nowhere: without it the logo plate is 71 px instead of 52 (height + its own
   padding + border). The theme does ship that reset, so this changes nothing
   on the site - it makes the component survive on its own. */
.cgrid,.cc,.cc *,.cc *::before,.cc *::after{box-sizing:border-box}
/* .cc__pos and .cc__pays-more were `font:700 10px/1 inherit` in the handoff:
   a CSS-wide keyword cannot sit inside the `font` shorthand, so the browser
   dropped the whole declaration and the rank number inherited 13-16px at
   regular weight. Written as longhands instead. */
/* fallback when the bonus amount is unreadable: the raw line is printed
   instead of a dash, so it must wrap and sit smaller than a number */
.cc__big--raw{font-size:14px;line-height:1.3;white-space:normal}

/* The grid. Column counts are picked so the card never lands between its
   two calibrated widths (292 and 179): at ~240 the offer badge takes a
   third line, grows its reserved zone and drops the brand name 11 px below
   its neighbours' - measured, not guessed. */
.cgrid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 20px;padding:0;list-style:none}
@media (max-width:1199px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:959px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* minmax(0,1fr), not 1fr (= minmax(auto,1fr)): a long nowrap brand name
   widened its track 179 -> 339 px at 390 instead of ending in an ellipsis. */

/* Fake brands (Theme Options → Fake Brands): the fake grid on desktop, the real
   one on mobile - the table's own rule and breakpoint (css/additional.css). */
.cgrid--fake{display:none}
@media (min-width:993px){.cgrid--fake{display:grid}.cgrid--real{display:none}}

/* Payment tiles: five plus a desktop '+N'; below the mobile breakpoint the
   fifth tile and the desktop chip give way to the mobile '+N', because a
   sixth item wraps onto a second line and lifts the row.
   The selectors carry `i` on purpose: `.cc__pays i{display:flex}` above is
   one class + one type and beats a bare `.cc__pays-t5` - the first version
   of this file hid nothing at all because of that. */
@media (min-width:600px){.cc__pays i.cc__pays-more--m{display:none}}
@media (max-width:599px){.cc__pays i.cc__pays-t5,.cc__pays i.cc__pays-more--d{display:none}}

/* Mobile skin, generated from the approved .cc--mini values - the
   artboards used a class because both scales stood on one page; on the
   site only the viewport knows the width. */
@media (max-width:599px){.cc__logo{height:78px;padding:6px 12px} .cc__logo img{max-width:85%} .cc__body{padding:0 9px 10px} .cc__ndslot{min-height:31px} .cc__nd{font-size:10px;padding:2px 7px;line-height:1.3} .cc__name{font-size:11.5px} .cc__score b{font-size:15px} .cc__big{font-size:16px} .cc__lbl{font-size:11px} .cc__pays i{width:26px;height:20px} .cc__pays img{width:18px;height:13px} .cc__pop{--cc-arrow:93px;font-size:10.5px;padding:7px 9px;left:-6px;right:-6px}}