/**
 * Cashback Storefront — store page styles
 *
 * Every rule is scoped under .cbsf. This is not optional on this site: an
 * unscoped `#main.site-main` rule previously broke the login, signup, stores
 * and single-post layouts site-wide. Never target theme selectors bare.
 *
 * v2 (18 Aug 2026): redesign approved via interactive preview before this
 * file was touched — visible coupon codes (no reveal-on-click masking), a
 * green/gold two-accent system, serif headings + monospace codes instead of
 * an all-sans page. `--cbsf-green`/`--cbsf-green-bright` are kept as the exact
 * variable names `CBSF_Templates::assets()` overrides from the Settings
 * screen's accent-color picker — do not rename them.
 *
 * @package CashbackStorefront
 */

.cbsf {
	--cbsf-green: #2a7a26;
	--cbsf-green-bright: #2ea62a;
	--cbsf-green-deep: #1a4d18;
	--cbsf-green-soft: #e8f2e6;
	--cbsf-gold: #a8710f;
	--cbsf-gold-deep: #7c5309;
	--cbsf-gold-soft: #fbf0d9;
	--cbsf-ink: #14190f;
	--cbsf-ink-2: #4b5643;
	--cbsf-ink-3: #7a8570;
	--cbsf-line: #dfe4dc;
	--cbsf-line-2: #edf0ea;
	/* Deliberately NOT --cbsf-line (#dfe4dc) — that's a hairline-border tone,
	   too close to white to read as an "empty star" against the white card
	   background it sits on. This needs to look like a star, not disappear. */
	--cbsf-star-off: #b7c0ab;
	--cbsf-surface: #ffffff;
	--cbsf-ground: #f6f8f4;
	--cbsf-shadow: 0 1px 2px rgba(20,25,15,.04), 0 8px 24px -14px rgba(20,25,15,.16);
	--cbsf-radius: 14px;
	--cbsf-font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
	--cbsf-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

	box-sizing: border-box;
	max-width: 100%;
	overflow-x: hidden;
	color: var(--cbsf-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
}

.cbsf *,
.cbsf *::before,
.cbsf *::after { box-sizing: border-box; }

.cbsf-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 2.25rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
	align-items: start;
}
@media (max-width: 900px) {
	.cbsf-shell { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.cbsf-aside { order: 2; }
}

.cbsf-main { min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
.cbsf-aside { min-width: 0; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.25rem; }

/* ----------------------------------------------------------------- header */

.cbsf-crumbs {
	font-size: 0.8rem;
	color: var(--cbsf-ink-3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1rem;
}
.cbsf-crumbs a { color: var(--cbsf-ink-3); text-decoration: none; }
.cbsf-crumbs a:hover { color: var(--cbsf-green); text-decoration: underline; }
.cbsf-crumbs span[aria-hidden] { opacity: 0.5; }

.cbsf-head { display: flex; align-items: flex-start; gap: 1.15rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--cbsf-line); }
.cbsf-head-logo {
	width: 4.75rem; height: 4.75rem; flex: none; border-radius: 16px;
	background: var(--cbsf-green-soft); border: 1px solid var(--cbsf-line);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	font-family: var(--cbsf-font-display); font-weight: 700; font-size: 1.5rem; color: var(--cbsf-green-deep);
}
.cbsf-head-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cbsf-head-body { min-width: 0; flex: 1; } /* min-width:0 lets the h1 below actually shrink inside a flex row instead of forcing the row wider. */
.cbsf-head h1 {
	margin: 0;
	font-family: var(--cbsf-font-display);
	font-size: clamp(1.55rem, 3.4vw, 2.05rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--cbsf-ink);
	/* Always one line, any title length — storefront.js measures the actual
	   rendered width and shrinks font-size to fit (down to a readable floor).
	   text-overflow is the safety net for a title so long even the floor
	   size can't fit it, never actually expected to trigger. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cbsf-standfirst {
	margin: 0.5rem 0 0;
	font-size: 0.86rem;
	color: var(--cbsf-ink-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.cbsf-standfirst .cbsf-dot { color: var(--cbsf-line); }
.cbsf-cat-tag {
	display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px;
	background: var(--cbsf-ground); border: 1px solid var(--cbsf-line); font-size: 0.78rem; color: var(--cbsf-ink-2); text-decoration: none;
}
.cbsf-cat-tag:hover { border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); }

.cbsf-verified {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
	color: var(--cbsf-green-deep);
}
.cbsf-verified svg { width: 0.95em; height: 0.95em; flex: none; }

.cbsf-disclosure {
	margin: 0.6rem 0 0;
	font-size: 0.78rem;
	color: var(--cbsf-ink-3);
	max-width: 42rem;
}

/* ------------------------------------------------------------ cashback box */

.cbsf-claim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	border-radius: var(--cbsf-radius);
	background: linear-gradient(135deg, var(--cbsf-green-deep) 0%, var(--cbsf-green) 100%);
	color: #fff;
	box-shadow: var(--cbsf-shadow);
}
.cbsf-claim-figures { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cbsf-claim-rate {
	font-family: var(--cbsf-font-display);
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
}
.cbsf-claim-sub { font-size: 0.86rem; opacity: 0.9; }

.cbsf-claim-cta { margin-left: auto; display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; }
@media (max-width: 620px) { .cbsf-claim-cta { margin-left: 0; width: 100%; } }

.cbsf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: none !important; /* Snippet #12 applies a global button transition site-wide. */
}
.cbsf .cbsf-btn-white { background: #fff !important; color: var(--cbsf-green-deep) !important; }
.cbsf .cbsf-btn-white:hover,
.cbsf .cbsf-btn-white:focus { background: #f0f7ef !important; color: var(--cbsf-green-deep) !important; }
.cbsf-claim-note { font-size: 0.72rem; opacity: 0.85; text-align: center; }

/* --------------------------------------------------------------- section */

.cbsf-sec { display: flex; flex-direction: column; gap: 0.9rem; }
.cbsf-sec > h2 {
	margin: 0;
	font-family: var(--cbsf-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--cbsf-ink);
}
.cbsf-sec-note { margin: 0; font-size: 0.86rem; color: var(--cbsf-ink-3); }

/* --------------------------------------------------------------- subscribe */

/* Stacked top-to-bottom throughout — this box only ever renders inside the
   narrow sidebar widget column now, never full-width, so it's laid out for
   that width rather than carrying over a wide-row design that no longer
   matches where it actually appears. */
.cbsf-subscribe {
	/* One accent drives the whole box — overridable per-widget from
	   Appearance → Widgets (CBSF_Widget_Notify_Me injects a single inline
	   --cbsf-notify-accent on the wrapper); everything else here is derived
	   from it with color-mix() so there's only one value to ever pick. */
	--cbsf-notify-accent: var(--cbsf-gold);
	--cbsf-notify-bg: color-mix(in srgb, var(--cbsf-notify-accent) 12%, white);
	--cbsf-notify-deep: color-mix(in srgb, var(--cbsf-notify-accent) 65%, black);

	display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
	background: var(--cbsf-notify-bg); border: 1px solid color-mix(in srgb, var(--cbsf-notify-accent) 35%, var(--cbsf-line));
	border-radius: var(--cbsf-radius); padding: 1.1rem 1.25rem;
}
.cbsf-subscribe-icon {
	flex: none; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--cbsf-notify-accent);
	display: flex; align-items: center; justify-content: center;
}
.cbsf-subscribe-icon svg { width: 18px; height: 18px; color: #fff; }
.cbsf-subscribe-text strong { display: block; font-size: 0.95rem; color: var(--cbsf-ink); }
.cbsf-subscribe-text span { font-size: 0.8rem; color: var(--cbsf-ink-2); }
.cbsf-subscribe-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.cbsf .cbsf-subscribe-form input {
	border: 1px solid var(--cbsf-line); border-radius: 9px; padding: 0.6rem 0.85rem;
	font: inherit; font-size: 0.86rem; width: 100%; background: var(--cbsf-surface); color: var(--cbsf-ink);
}
.cbsf .cbsf-subscribe-form input::placeholder { color: var(--cbsf-ink-3); }
.cbsf .cbsf-subscribe-form button {
	border: none; background: var(--cbsf-notify-deep) !important; color: #fff !important; font-weight: 700; font-size: 0.86rem;
	border-radius: 9px; padding: 0.65rem 1.1rem; width: 100%; transition: none !important;
}
.cbsf .cbsf-subscribe-form button:hover { background: var(--cbsf-notify-accent) !important; }
.cbsf-subscribe-note { font-size: 0.74rem; color: var(--cbsf-ink-3); margin: 0.5rem 0 0; width: 100%; }

/* ----------------------------------------------------------- coupon cards */

.cbsf-offers { display: flex; flex-direction: column; gap: 1rem; }

/* CouponFollow-inspired layout (user reference, 19 Aug 2026): a plain large
   discount number on the left (no colored box — that read as a "badge",
   CouponFollow just uses bold black text), a clear title+meta column, and a
   solid pill CTA on the right. Codes still show OPEN (never masked behind a
   reveal click, unlike CouponFollow's own site) — that honesty call was
   already made and approved earlier; only the visual chrome changed here. */
.cbsf-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--cbsf-surface);
	border: 1px solid var(--cbsf-line);
	border-radius: var(--cbsf-radius);
	padding: 1.25rem 1.4rem;
	/* A flat 1px border alone reads as "text on a grid line" once several
	   cards stack up — real depth is what separates one offer from the next
	   at a glance, closer to how CouponFollow's own list reads. */
	box-shadow: 0 1px 2px rgba(20,25,15,.03), 0 6px 16px -10px rgba(20,25,15,.14);
	transition: box-shadow .15s ease, transform .15s ease;
}
.cbsf-card:hover { box-shadow: 0 2px 4px rgba(20,25,15,.04), 0 10px 24px -12px rgba(20,25,15,.18); transform: translateY(-1px); }
@media (max-width: 620px) { .cbsf-card { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .cbsf-card { transition: none; } .cbsf-card:hover { transform: none; } }

.cbsf-card-discount {
	flex: none; width: 4.4rem;
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
	text-align: center;
}
.cbsf-card-discount-num { font-family: var(--cbsf-font-display); font-size: 1.7rem; font-weight: 700; color: var(--cbsf-green-deep); font-variant-numeric: tabular-nums; }
/* "Up to 50%"-length strings need to wrap onto 2 lines cleanly inside a
   fixed-width column, not just shrink and hope — a tighter line-height and a
   further reduced size at this length are both needed or the second line
   collides with the "OFF" caption underneath. */
.cbsf-card-discount-num.cbsf-long { font-size: 1.05rem; line-height: 1.15; word-break: break-word; }
.cbsf-card-discount-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cbsf-ink-3); margin-top: 0.2rem; }
.cbsf-card-discount-deal { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cbsf-ink-3); }

.cbsf-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; padding-right: 1rem; border-right: 1px solid var(--cbsf-line-2); }
@media (max-width: 620px) { .cbsf-card-body { border-right: 0; padding-right: 0; } }
.cbsf-card-brand { display: flex; align-items: center; gap: 0.4rem; }
.cbsf-card-brand-logo { width: 1.1rem; height: 1.1rem; object-fit: contain; border-radius: 3px; flex: none; }
.cbsf-card-store {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cbsf-ink-3);
}
.cbsf-card-title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cbsf-ink);
	overflow-wrap: break-word;
}
.cbsf-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.76rem;
	color: var(--cbsf-ink-3);
	margin-top: 0.1rem;
}
.cbsf-tag {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cbsf-gold-deep);
}
.cbsf-tag-deal { color: var(--cbsf-green-deep); }
.cbsf-verified { color: var(--cbsf-green-deep); }
.cbsf-card-meta time { font-variant-numeric: tabular-nums; }

.cbsf .cbsf-details {
	align-self: flex-start; border: none; background: none !important; padding: 0; margin-top: 0.15rem;
	font-size: 0.8rem; font-weight: 600; color: var(--cbsf-green-deep) !important; text-decoration: underline;
	cursor: pointer; transition: none !important;
}
/* :hover needs its OWN !important rule, not just the base one above — the
   theme's button:hover{background-color:...!important} (see the star/button
   docblock elsewhere in this file) is MORE specific than a plain non-hover
   .cbsf .cbsf-details rule (an extra pseudo-class always outranks none), so
   it silently won on hover: a solid green fill appearing behind underlined
   text that was never meant to look like a filled button. Confirmed live. */
.cbsf .cbsf-details:hover, .cbsf .cbsf-details:focus { background: none !important; color: var(--cbsf-green-deep) !important; }
.cbsf-card-detail { margin-top: 0.3rem; padding: 0.7rem 0.85rem; background: var(--cbsf-ground); border-radius: 10px; }
.cbsf-card-detail p { margin: 0; font-size: 0.85rem; color: var(--cbsf-ink-2); line-height: 1.55; }

.cbsf-card-cta { flex: none; display: flex; align-items: center; gap: 0.5rem; }

/* The code stays OPEN in the button itself (never masked behind a reveal
   click) — the whole pill is one button, code text and copy icon together,
   so it reads as a single solid CTA the way CouponFollow's own button does. */
.cbsf .cbsf-code-pill {
	display: flex; align-items: center; gap: 0.6rem;
	background: var(--cbsf-green) !important; border: none; border-radius: 999px;
	padding: 0.6rem 0.6rem 0.6rem 1.1rem; cursor: pointer; transition: none !important;
}
.cbsf .cbsf-code-pill:hover { background: var(--cbsf-green-deep) !important; }
.cbsf .cbsf-code-pill.cbsf-copied { background: var(--cbsf-gold) !important; }
.cbsf-code-pill code { font-family: var(--cbsf-font-mono); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; color: #fff !important; background: none; }
.cbsf-code-pill-icon {
	background: rgba(255,255,255,.22); border-radius: 7px; width: 1.9rem; height: 1.9rem; flex: none;
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.cbsf-code-pill-icon svg { width: 15px; height: 15px; }

.cbsf .cbsf-btn-deal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--cbsf-green) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	transition: none !important;
}
.cbsf .cbsf-btn-deal:hover,
.cbsf .cbsf-btn-deal:focus { background: var(--cbsf-green-deep) !important; color: #fff !important; }

@media (max-width: 620px) {
	.cbsf-card-cta { width: 100%; justify-content: space-between; }
	.cbsf .cbsf-code-pill { flex: 1; justify-content: space-between; }
}

/* ------------------------------------------------------------- empty state */

.cbsf-empty {
	padding: 1.4rem 1.5rem;
	border: 1px dashed var(--cbsf-line);
	border-radius: 10px;
	background: var(--cbsf-ground);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
/* The dynamic dir-search empty state (archive-stores.php, archive-shop.php)
   starts with the `hidden` attribute and is toggled by storefront.js. The
   `display: flex` above is an author-level rule and beats the browser's
   default `[hidden] { display: none }` UA style regardless of source order,
   so without this the message showed on every page load, search or not. */
.cbsf-empty[hidden] { display: none; }
.cbsf-empty h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.cbsf-empty p { margin: 0; font-size: 0.9rem; color: var(--cbsf-ink-2); }

/* ---------------------------------------------------------------- content */

.cbsf-content, .cbsf-more { font-size: 0.95rem; color: var(--cbsf-ink-2); }
.cbsf-content > :first-child, .cbsf-more > :first-child { margin-top: 0; }
.cbsf-content > :last-child, .cbsf-more > :last-child { margin-bottom: 0; }
.cbsf-content p, .cbsf-more p { margin: 0 0 1rem; }
.cbsf-content h2, .cbsf-content h3 {
	color: var(--cbsf-ink);
	margin: 1.6rem 0 0.6rem;
	font-family: var(--cbsf-font-display);
	font-weight: 700;
}
.cbsf-content h3 { font-size: 1.08rem; }
.cbsf-content ul, .cbsf-content ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.cbsf-content li { margin-bottom: 0.35rem; }

.cbsf-steps { margin: 0; padding-left: 1.35rem; color: var(--cbsf-ink-2); font-size: 0.94rem; }
.cbsf-steps li { margin-bottom: 0.45rem; }
.cbsf-steps li::marker { color: var(--cbsf-green-deep); font-weight: 700; }

/* ----------------------------------------------------------- connect band */

.cbsf-connect {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
	background: var(--cbsf-ground); border: 1px solid var(--cbsf-line); border-radius: var(--cbsf-radius);
	padding: 1.4rem 1.6rem;
}
.cbsf-connect h3 { font-family: var(--cbsf-font-display); font-size: 1.1rem; margin: 0 0 0.3rem; }
.cbsf-connect p { margin: 0; font-size: 0.85rem; color: var(--cbsf-ink-2); max-width: 30rem; }
.cbsf .cbsf-btn-outline {
	border: 1.5px solid var(--cbsf-green); color: var(--cbsf-green-deep) !important; text-decoration: none; font-weight: 700;
	padding: 0.62rem 1.35rem; border-radius: 999px; font-size: 0.9rem; white-space: nowrap; flex: none;
	transition: none !important; background: transparent !important;
}
.cbsf .cbsf-btn-outline:hover { background: var(--cbsf-green) !important; color: #fff !important; }

/* -------------------------------------------------------------------- FAQ */

.cbsf-faq { display: flex; flex-direction: column; gap: 0.5rem; }
.cbsf-faq details {
	border: 1px solid var(--cbsf-line);
	border-radius: 12px;
	background: var(--cbsf-surface);
	padding: 0 1rem;
}
.cbsf-faq summary {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cbsf-ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}
.cbsf-faq summary::-webkit-details-marker { display: none; }
.cbsf-faq summary::after {
	content: "+";
	font-weight: 700;
	color: var(--cbsf-ink-3);
	font-size: 1.15rem;
	flex: none;
	line-height: 1;
}
.cbsf-faq details[open] summary::after { content: "\2212"; }
.cbsf-faq details > p { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--cbsf-ink-2); }

/* ----------------------------------------------------------- similar / grid */

.cbsf-similar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
}
.cbsf-similar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0.6rem;
	border: 1px solid var(--cbsf-line);
	border-radius: 12px;
	background: var(--cbsf-surface);
	text-decoration: none;
	text-align: center;
}
.cbsf-similar a:hover { border-color: var(--cbsf-green-bright); }
.cbsf-similar .cbsf-sim-logo {
	width: 2.6rem; height: 2.6rem; border-radius: 9px; background: var(--cbsf-green-soft); color: var(--cbsf-green-deep);
	display: flex; align-items: center; justify-content: center; font-family: var(--cbsf-font-display); font-weight: 700; font-size: 0.9rem;
}
.cbsf-similar .cbsf-sim-logo img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 9px; }
.cbsf-similar .cbsf-sim-name { font-size: 0.82rem; font-weight: 600; color: var(--cbsf-ink); }
.cbsf-similar .cbsf-sim-rate { font-size: 0.76rem; font-weight: 600; color: var(--cbsf-green-deep); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sidebar */

.cbsf-panel {
	border: 1px solid var(--cbsf-line);
	border-radius: var(--cbsf-radius);
	background: var(--cbsf-surface);
	padding: 1.15rem 1.25rem;
	box-shadow: var(--cbsf-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.cbsf-panel > h2 {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cbsf-ink-3);
}

.cbsf-stats { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.cbsf-stats div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 0.86rem;
	border-bottom: 1px dashed var(--cbsf-line-2);
	padding-bottom: 0.5rem;
}
.cbsf-stats div:last-child { border-bottom: 0; padding-bottom: 0; }
.cbsf-stats dt { color: var(--cbsf-ink-3); }
.cbsf-stats dd { margin: 0; font-weight: 600; color: var(--cbsf-ink); font-variant-numeric: tabular-nums; }
.cbsf-stats dd.cbsf-hi { color: var(--cbsf-green-deep); font-family: var(--cbsf-font-display); font-size: 1.05rem; }

/* Stacked layout (stars, then status, then the average+votes pill) — same
   grouping a CouponFollow reference image used, rebuilt with this plugin's
   own green/gold tokens rather than their yellow. */
.cbsf-rate-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.cbsf-stars { display: inline-flex; gap: 0.1rem; }
/* color needs !important here — GeneratePress's own site-wide button reset
   ("button:not(.wp-block-button__link) { color:#fff !important }") targets
   every plain <button>, this star included, and a non-important color from
   this stylesheet loses to that regardless of selector specificity. Confirmed
   live: without !important every star (on and off) rendered solid white,
   invisible against the white card behind it. Same theme-conflict class
   already documented for background above, and for the ledger tab buttons
   in earninger-account.php. */
.cbsf .cbsf-star {
	border: none; background: none !important; padding: 0.1rem; cursor: pointer; line-height: 0;
	color: var(--cbsf-gold) !important; transition: none !important;
}
/* The theme applies :hover to any real <button> regardless of what JS does
   with it — the cumulative-fill preview below is JS/class-driven, not
   CSS :hover, but the mouse is still physically over a <button> the whole
   time, so the theme's OWN button:hover{background-color:...!important}
   rule (more specific than the plain, non-hover rule above) would otherwise
   paint a solid green tile behind every star on hover. Same fix shape as
   .cbsf-details below. */
.cbsf .cbsf-star:hover { background: none !important; }
.cbsf .cbsf-star.cbsf-star-off { color: var(--cbsf-star-off) !important; }
.cbsf .cbsf-star.cbsf-star-off:hover { background: none !important; }
/* Cumulative hover-fill preview (star 1..N lights up together, not just the
   one under the cursor) is driven by JS toggling this class on each star up
   to the hovered index. A plain CSS :hover can only ever affect the single
   element it's applied to, which is what made the old fill look like it
   "jumped straight to 5" with nothing filling in on the way there. */
.cbsf [data-cbsf-rate]:not(.cbsf-rate-locked) .cbsf-star.cbsf-star-preview { color: var(--cbsf-gold-deep) !important; transform: scale(1.15); }
.cbsf-star svg { width: 17px; height: 17px; display: block; }
.cbsf-rate-status { font-size: 0.78rem; color: var(--cbsf-ink-3); }
/* Locked = already rated by this visitor (server-enforced, see
   CBSF_Ratings::handle()). Stars are real <button disabled> elements; this
   just makes that state visually obvious rather than looking broken. */
.cbsf .cbsf-rate-row.cbsf-rate-locked .cbsf-star { cursor: default; }
.cbsf .cbsf-rate-row.cbsf-rate-locked .cbsf-rate-status { color: var(--cbsf-green-deep); font-weight: 600; }
/* The community average+vote-count pill, separate from the status line above
   it so "what you did" and "what everyone did" never compete for the same
   sentence. Only rendered once at least one real rating exists. */
.cbsf .cbsf-rate-summary {
	display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--cbsf-gold-deep);
	background: var(--cbsf-gold-soft); border-radius: 999px; padding: 0.2rem 0.6rem;
}
.cbsf .cbsf-rate-summary strong { font-family: var(--cbsf-font-display); font-weight: 700; }
.cbsf-rate-none { font-size: 0.84rem; color: var(--cbsf-ink-3); margin: 0; }
.cbsf .cbsf-rate-btn {
	margin-top: 0.4rem; width: 100%; background: var(--cbsf-ground) !important; border: 1px solid var(--cbsf-line);
	border-radius: 9px; padding: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--cbsf-ink-2) !important; transition: none !important;
}
.cbsf .cbsf-rate-btn:hover { border-color: var(--cbsf-green); color: var(--cbsf-green-deep) !important; }

.cbsf-highlights { display: flex; flex-direction: column; gap: 0.7rem; }
.cbsf-highlight { display: flex; gap: 0.6rem; align-items: flex-start; }
.cbsf-highlight-mark {
	flex: none; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--cbsf-gold-soft); color: var(--cbsf-gold-deep);
	font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cbsf-highlight p { margin: 0; font-size: 0.85rem; }
.cbsf-highlight p strong { display: block; font-size: 0.86rem; }
.cbsf-highlight span { font-size: 0.75rem; color: var(--cbsf-ink-3); }

.cbsf-related { display: flex; flex-direction: column; gap: 0.8rem; }
.cbsf-related-item { display: flex; gap: 0.7rem; text-decoration: none; align-items: center; }
.cbsf-related-thumb { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 9px; background: var(--cbsf-ground); border: 1px solid var(--cbsf-line); overflow: hidden; }
.cbsf-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cbsf-related-item p { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--cbsf-ink); line-height: 1.35; }
.cbsf-related-item:hover p { color: var(--cbsf-green-deep); }

.cbsf-byline { display: flex; gap: 0.7rem; align-items: center; }
.cbsf-byline-av {
	width: 2.3rem;
	height: 2.3rem;
	flex: none;
	border-radius: 999px;
	background: var(--cbsf-green-deep);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
}
.cbsf-byline-av-img { object-fit: cover; background: var(--cbsf-line); }
.cbsf-byline-txt { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cbsf-byline-name { font-size: 0.85rem; font-weight: 700; color: var(--cbsf-ink); }
.cbsf-byline-role { font-size: 0.75rem; color: var(--cbsf-ink-3); }

.cbsf-trust { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--cbsf-ink-2); }

.cbsf-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cbsf-cats a {
	font-size: 0.82rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--cbsf-line);
	color: var(--cbsf-ink-2);
	text-decoration: none;
	background: var(--cbsf-surface);
}
.cbsf-cats a:hover { border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); }

.cbsf a:focus-visible,
.cbsf button:focus-visible,
.cbsf summary:focus-visible {
	outline: 2px solid var(--cbsf-green-bright);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ store grid */
/* Shared by [cbsf_stores] and the /stores/ + /cashback/ directory pages —
   not shortcode-specific any more, so it lives here rather than as an
   inline style added only when a shortcode is present. */

.cbsf-store-grid { display: grid; grid-template-columns: repeat(var(--cbsf-grid-cols, 4), 1fr); gap: 1rem; }
@media (max-width: 900px) { .cbsf-store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cbsf-store-grid { grid-template-columns: 1fr; } }
.cbsf-store-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
	background: var(--cbsf-surface); border: 1px solid var(--cbsf-line);
	border-radius: var(--cbsf-radius); padding: 1.5rem 1.1rem; text-decoration: none; color: inherit;
	transition: border-color 0.12s ease, transform 0.12s ease;
}
.cbsf-store-card:hover { border-color: var(--cbsf-green-bright); transform: translateY(-2px); }
.cbsf-store-card-logo {
	width: 4.4rem; height: 3rem; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0.4rem;
}
.cbsf-store-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cbsf-store-card-logo span {
	font-family: var(--cbsf-font-display); font-weight: 700; color: var(--cbsf-ink-2); font-size: 1.3rem;
	width: 3rem; height: 3rem; border-radius: 10px; background: var(--cbsf-ground); display: flex; align-items: center; justify-content: center;
}
.cbsf-store-card-name { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--cbsf-ink); }
.cbsf-store-card-rate-value {
	margin: 0.3rem 0 0; font-family: var(--cbsf-font-display); font-size: 1.4rem; font-weight: 700; color: var(--cbsf-green-deep);
	font-variant-numeric: tabular-nums;
}
.cbsf-store-card-rate-label { margin: 0; font-size: 0.78rem; color: var(--cbsf-ink-3); }
.cbsf-store-card-rating { font-size: 0.76rem; color: var(--cbsf-ink-3); margin-top: 0.2rem; }

/* ---------------------------------------------------------------- product grid */

.cbsf-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .cbsf-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cbsf-product-grid { grid-template-columns: 1fr; } }
.cbsf-product-card {
	display: flex; flex-direction: column; gap: 0.6rem; background: var(--cbsf-surface); border: 1px solid var(--cbsf-line);
	border-radius: var(--cbsf-radius); padding: 1.1rem; box-shadow: var(--cbsf-shadow); transition: box-shadow .15s ease, transform .15s ease;
}
.cbsf-product-card:hover { box-shadow: 0 2px 4px rgba(20,25,15,.04), 0 10px 24px -12px rgba(20,25,15,.18); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .cbsf-product-card { transition: none; } .cbsf-product-card:hover { transform: none; } }
.cbsf-product-card-image {
	width: 100%; height: 9rem; border-radius: 10px; background: var(--cbsf-ground); border: 1px solid var(--cbsf-line-2);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cbsf-product-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cbsf-product-card-image span { font-family: var(--cbsf-font-display); font-weight: 700; color: var(--cbsf-ink-2); font-size: 1.3rem; }
.cbsf-product-card-link { display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit; }
.cbsf-product-card-name { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--cbsf-ink); line-height: 1.35; }
.cbsf-product-card-link:hover .cbsf-product-card-name { color: var(--cbsf-green-deep); }
.cbsf-product-card-price { font-family: var(--cbsf-font-display); font-size: 1.1rem; font-weight: 700; color: var(--cbsf-green-deep); }
.cbsf-product-card .cbsf-btn-deal { align-self: flex-start; margin-top: 0.2rem; }

.cbsf-product-hero {
	display: grid; grid-template-columns: 18rem 1fr; gap: 2rem; align-items: start;
	background: var(--cbsf-surface); border: 1px solid var(--cbsf-line); border-radius: var(--cbsf-radius);
	box-shadow: var(--cbsf-shadow); padding: 2rem; margin-bottom: 2rem;
}
@media (max-width: 720px) { .cbsf-product-hero { grid-template-columns: 1fr; } }
.cbsf-product-hero-image {
	width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--cbsf-ground); border: 1px solid var(--cbsf-line-2);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cbsf-product-hero-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cbsf-product-hero-image span { font-family: var(--cbsf-font-display); font-weight: 700; font-size: 2.5rem; color: var(--cbsf-ink-2); }
.cbsf-product-hero-body h1 { font-family: var(--cbsf-font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0 0 0.6rem; }
.cbsf-product-hero-price { font-family: var(--cbsf-font-display); font-size: 1.8rem; font-weight: 700; color: var(--cbsf-green-deep); margin: 0 0 1rem; }
.cbsf-product-hero-cta { display: inline-block; margin-bottom: 1rem; }
.cbsf-product-hero-note { font-size: 0.82rem; color: var(--cbsf-ink-3); margin: 0; max-width: 32rem; }
.cbsf-product-content { max-width: 42rem; }

/* ------------------------------------------------------------- directory */

.cbsf-shell-wide { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.cbsf-directory { display: flex; flex-direction: column; }
.cbsf-dir-head { padding-bottom: 1.1rem; }
.cbsf-dir-head h1 { font-family: var(--cbsf-font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0 0 0.4rem; }
.cbsf-dir-head .cbsf-standfirst { margin: 0; color: var(--cbsf-ink-2); font-size: 0.95rem; max-width: 42rem; }

.cbsf-dir-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.4rem; }
.cbsf-dir-tabs a {
	padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--cbsf-line); text-decoration: none;
	font-size: 0.85rem; font-weight: 600; color: var(--cbsf-ink-2); background: var(--cbsf-surface);
}
.cbsf-dir-tabs a:hover { border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); }
.cbsf-dir-tabs a.cbsf-active { background: var(--cbsf-green-soft); border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); }

/* ------------------------------------------------------------- top offers */

.cbsf-top-offers { margin-bottom: 2rem; }
.cbsf-top-offers h2 {
	font-family: var(--cbsf-font-display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
	margin: 0 0 1rem; color: var(--cbsf-ink);
}
.cbsf-top-offers-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.cbsf-top-offers-more { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
@media (max-width: 900px) {
	.cbsf-top-offers-featured { grid-template-columns: repeat(2, 1fr); }
	.cbsf-top-offers-more { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.cbsf-top-offers-featured { grid-template-columns: 1fr; }
	.cbsf-top-offers-more { grid-template-columns: repeat(2, 1fr); }
}

.cbsf-featured-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
	background: var(--cbsf-surface); border: 1px solid var(--cbsf-line); border-radius: var(--cbsf-radius);
	box-shadow: var(--cbsf-shadow); padding: 1.5rem 1rem; text-decoration: none; color: inherit;
	transition: transform 0.12s ease, border-color 0.12s ease;
}
.cbsf-featured-card:hover { border-color: var(--cbsf-green-bright); transform: translateY(-2px); }
.cbsf-featured-card-logo {
	width: 4.4rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0.5rem;
}
.cbsf-featured-card-lg .cbsf-featured-card-logo { width: 5.4rem; height: 3.4rem; }
.cbsf-featured-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cbsf-featured-card-logo span {
	font-family: var(--cbsf-font-display); font-weight: 700; color: var(--cbsf-ink-2); font-size: 1.2rem;
	width: 3rem; height: 3rem; border-radius: 10px; background: var(--cbsf-ground); display: flex; align-items: center; justify-content: center;
}
.cbsf-featured-card-name { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--cbsf-ink); }
.cbsf-featured-card-lg .cbsf-featured-card-name { font-size: 1rem; }
.cbsf-featured-card-rate-value {
	margin: 0.2rem 0 0; font-family: var(--cbsf-font-display); font-size: 1.15rem; font-weight: 700; color: var(--cbsf-green-deep);
	font-variant-numeric: tabular-nums;
}
.cbsf-featured-card-lg .cbsf-featured-card-rate-value { font-size: 1.4rem; }
.cbsf-featured-card-rate-label { margin: 0; font-size: 0.76rem; color: var(--cbsf-ink-3); }

/* -------------------------------------------------------- sidebar + layout */

.cbsf-dir-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; }
.cbsf-dir-layout-nosidebar { grid-template-columns: 1fr; }
@media (max-width: 780px) { .cbsf-dir-layout { grid-template-columns: 1fr; } }

.cbsf-dir-sidebar {
	background: var(--cbsf-surface); border: 1px solid var(--cbsf-line); border-radius: var(--cbsf-radius);
	padding: 1.2rem 1.1rem; position: sticky; top: 1rem;
}
@media (max-width: 780px) { .cbsf-dir-sidebar { position: static; } }
.cbsf-dir-sidebar h3 {
	font-family: var(--cbsf-font-display); font-size: 0.95rem; margin: 0 0 0.8rem; color: var(--cbsf-ink);
}
.cbsf-dir-category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cbsf-dir-category-list a {
	display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 8px;
	text-decoration: none; color: var(--cbsf-ink-2); font-size: 0.88rem;
}
.cbsf-dir-category-list a:hover { background: var(--cbsf-ground); color: var(--cbsf-ink); }
.cbsf-dir-category-list a.cbsf-active { background: var(--cbsf-green-soft); color: var(--cbsf-green-deep); font-weight: 600; }
.cbsf-dir-category-list a span { color: var(--cbsf-ink-3); font-variant-numeric: tabular-nums; }
.cbsf-dir-category-list a.cbsf-active span { color: var(--cbsf-green-deep); }

/* 3 columns instead of the shortcode/no-sidebar default of 4 — this grid
   sits in a narrower column next to the category sidebar. The base
   .cbsf-store-grid rule's own 900px/480px breakpoints already collapse to
   2/1 columns via a hardcoded grid-template-columns (not the CSS variable),
   so they apply here unchanged — no extra breakpoint needed. */
.cbsf-dir-main .cbsf-store-grid { --cbsf-grid-cols: 3; }

.cbsf-dir-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--cbsf-line); margin-bottom: 1.2rem; }
.cbsf-dir-search { flex: 1 1 220px; }
.cbsf-dir-search input[type="search"] {
	width: 100%; padding: 0.6rem 0.95rem; border-radius: 999px; border: 1px solid var(--cbsf-line); background: var(--cbsf-ground);
	font-size: 0.9rem; color: var(--cbsf-ink); font-family: inherit;
}
.cbsf-dir-search input[type="search"]:focus { outline: 2px solid var(--cbsf-green-bright); outline-offset: 1px; }
.cbsf-dir-count { font-size: 0.8rem; color: var(--cbsf-ink-3); white-space: nowrap; }
.cbsf-dir-controls-count-only { justify-content: flex-end; }

.cbsf-coupon-filter { margin: 0 0 1.2rem; }
.cbsf-coupon-filter select {
	width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--cbsf-line); background: var(--cbsf-ground);
	font-size: 0.85rem; color: var(--cbsf-ink); font-family: inherit;
}

.cbsf-az-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.6rem; }
.cbsf-az-bar a, .cbsf-az-bar span {
	display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
	border-radius: 6px; font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.cbsf-az-bar a { color: var(--cbsf-green-deep); background: var(--cbsf-green-soft); }
.cbsf-az-bar a:hover { background: var(--cbsf-green-bright); color: #fff; }
.cbsf-az-bar span { color: var(--cbsf-line); background: var(--cbsf-line-2); cursor: default; }

.cbsf-dir-letter-section { scroll-margin-top: 1rem; margin-bottom: 2rem; }
.cbsf-dir-letter {
	font-family: var(--cbsf-font-display); font-size: 1.2rem; color: var(--cbsf-green-deep);
	margin: 0 0 0.9rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--cbsf-line);
}

.cbsf-dir-empty { text-align: center; border-style: solid; }

.cbsf-coupon-filter select {
	padding: 0.55rem 2.2rem 0.55rem 0.9rem; border-radius: 999px; border: 1px solid var(--cbsf-line);
	background: var(--cbsf-ground); font-size: 0.88rem; color: var(--cbsf-ink); font-family: inherit;
}
/* .cbsf-offers/.cbsf-card themselves are already styled (single-store page,
   line ~238) as a vertical list of row-style cards — reused as-is here,
   deliberately not overridden with a grid layout under the same class
   names, which would have changed the single-store page's layout too. */

.cbsf-pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 2rem 0 0; }
.cbsf-pagination .page-numbers {
	display: flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 0.6rem;
	border-radius: 8px; border: 1px solid var(--cbsf-line); background: var(--cbsf-surface); color: var(--cbsf-ink-2);
	text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.cbsf-pagination a.page-numbers:hover { border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); }
.cbsf-pagination .page-numbers.current { background: var(--cbsf-green-deep); border-color: var(--cbsf-green-deep); color: #fff; }
.cbsf-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Missing-cashback claim form ([cbsf_claim_form]) */
.cbsf-claim-wrap { max-width: 34rem; }
.cbsf-claim-signedout {
	border: 1px solid var(--cbsf-line); background: var(--cbsf-ground); border-radius: var(--cbsf-radius);
	padding: 1.4rem 1.6rem;
}
.cbsf-claim-form { display: flex; flex-direction: column; gap: 1rem; }
.cbsf-claim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .cbsf-claim-row { grid-template-columns: 1fr; } }
.cbsf-claim-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cbsf-claim-field label { font-size: 0.82rem; font-weight: 600; color: var(--cbsf-ink-2); }
.cbsf-claim-field input,
.cbsf-claim-field select,
.cbsf-claim-field textarea {
	font: inherit; font-size: 0.92rem; color: var(--cbsf-ink); padding: 0.65rem 0.85rem;
	border: 1px solid var(--cbsf-line); border-radius: 9px; background: var(--cbsf-surface);
}
.cbsf-claim-field input:focus,
.cbsf-claim-field select:focus,
.cbsf-claim-field textarea:focus { outline: 2px solid var(--cbsf-green-bright); outline-offset: 1px; }
.cbsf-claim-form > .cbsf-btn { align-self: flex-start; }
.cbsf-claim-msg { font-size: 0.88rem; color: var(--cbsf-green-deep); margin: 0; }
.cbsf-claim-msg-error { color: #a3341c; }

.cbsf-claim-list { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--cbsf-line); }
.cbsf-claim-list h3 { font-family: var(--cbsf-font-display); font-size: 1.05rem; margin: 0 0 0.8rem; }
.cbsf-claim-empty { color: var(--cbsf-ink-3); font-size: 0.9rem; }
.cbsf-claim-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cbsf-claim-item {
	display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; padding: 0.7rem 0.9rem;
	border: 1px solid var(--cbsf-line); border-radius: 9px; background: var(--cbsf-surface); font-size: 0.86rem;
}
.cbsf-claim-status { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; }
.cbsf-claim-pending .cbsf-claim-status { color: var(--cbsf-gold-deep); }
.cbsf-claim-approved .cbsf-claim-status { color: var(--cbsf-green-deep); }
.cbsf-claim-denied .cbsf-claim-status { color: #a3341c; }
.cbsf-claim-detail { color: var(--cbsf-ink-2); }

/* Coupon "did this work?" voting */
.cbsf-vote {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0;
	font-size: 0.8rem; color: var(--cbsf-ink-3);
}
.cbsf-vote-btn {
	font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px;
	border: 1px solid var(--cbsf-line); background: var(--cbsf-surface) !important; color: var(--cbsf-ink-2) !important; cursor: pointer;
}
/* Both need !important and enough specificity to beat the theme's own
   button:hover{background-color:...!important} — same fix shape as
   .cbsf-details/.cbsf-star elsewhere in this file. Without it, "Yes"/"No"
   filled solid dark green with dark green text on hover — unreadable. */
.cbsf .cbsf-vote-btn:hover:not(:disabled) { border-color: var(--cbsf-green-bright); background: var(--cbsf-surface) !important; color: var(--cbsf-green-deep) !important; }
.cbsf-vote-btn:disabled { cursor: default; opacity: 0.55; }
.cbsf-vote-locked .cbsf-vote-btn.cbsf-vote-chosen {
	background: var(--cbsf-green-soft); border-color: var(--cbsf-green-bright); color: var(--cbsf-green-deep); opacity: 1;
}
.cbsf-vote-rate { color: var(--cbsf-ink-3); }

/* [cbsf_search] — instant store/coupon search */
.cbsf-search { position: relative; max-width: 26rem; }
.cbsf-search-input {
	width: 100%; font: inherit; font-size: 0.95rem; padding: 0.7rem 1rem; border-radius: 999px;
	border: 1px solid var(--cbsf-line); background: var(--cbsf-surface); color: var(--cbsf-ink);
}
.cbsf-search-input:focus { outline: 2px solid var(--cbsf-green-bright); outline-offset: 1px; }
.cbsf-search-results {
	position: absolute; z-index: 20; top: calc(100% + 0.4rem); left: 0; right: 0;
	background: var(--cbsf-surface); border: 1px solid var(--cbsf-line); border-radius: 12px;
	box-shadow: var(--cbsf-shadow); max-height: 22rem; overflow-y: auto; padding: 0.5rem 0;
}
.cbsf-search-empty { margin: 0; padding: 0.9rem 1.1rem; font-size: 0.86rem; color: var(--cbsf-ink-3); }
.cbsf-search-group h4 {
	margin: 0.4rem 1.1rem 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; color: var(--cbsf-ink-3);
}
.cbsf-search-group ul { list-style: none; margin: 0; padding: 0; }
.cbsf-search-group li a {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; text-decoration: none; color: var(--cbsf-ink);
}
.cbsf-search-group li a:hover { background: var(--cbsf-ground); }
.cbsf-search-group li a img { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 4px; flex: none; }
.cbsf-search-coupon-store { font-weight: 700; font-size: 0.78rem; color: var(--cbsf-green-deep); flex: none; }
.cbsf-search-coupon-headline { font-size: 0.86rem; color: var(--cbsf-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [cbsf_referrals] */
.cbsf-referral { max-width: 30rem; }
.cbsf-referral-lede { color: var(--cbsf-ink-2); margin: 0 0 1rem; }
.cbsf-referral-link { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.cbsf-referral-link input {
	flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.6rem 0.85rem;
	border: 1px solid var(--cbsf-line); border-radius: 9px; background: var(--cbsf-ground); color: var(--cbsf-ink-2);
}
.cbsf-referral-stats { display: flex; gap: 1.5rem; margin-bottom: 1.6rem; }
.cbsf-referral-stat { display: flex; flex-direction: column; }
.cbsf-referral-stat .v { font-family: var(--cbsf-font-display); font-size: 1.5rem; font-weight: 700; color: var(--cbsf-green-deep); }
.cbsf-referral-stat .u { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cbsf-ink-3); }

.cbsf-referral-status {
	background: var(--cbsf-green-soft); border: 1px solid var(--cbsf-green-bright); border-radius: var(--cbsf-radius);
	padding: 0.9rem 1.1rem; font-size: 0.88rem; color: var(--cbsf-green-deep); margin: 0 0 1.2rem;
}

.cbsf-referral-share { display: flex; gap: 0.6rem; margin-bottom: 1.4rem; }
.cbsf .cbsf-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.1rem; border-radius: 999px;
	background: var(--cbsf-surface) !important; border: 1px solid var(--cbsf-line); color: var(--cbsf-ink) !important;
	font-weight: 600; font-size: 0.85rem; text-decoration: none !important; transition: border-color .15s ease, background .15s ease;
}
.cbsf .cbsf-btn-ghost:hover { border-color: var(--cbsf-green-bright); background: var(--cbsf-ground) !important; }

.cbsf-referral-invite { margin-bottom: 1.8rem; padding: 1.1rem; background: var(--cbsf-ground); border-radius: var(--cbsf-radius); }
.cbsf-referral-invite label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--cbsf-ink); margin-bottom: 0.5rem; }
.cbsf-referral-invite-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cbsf-referral-invite-row input {
	flex: 1 1 14rem; padding: 0.65rem 0.9rem; border-radius: 999px; border: 1px solid var(--cbsf-line);
	background: var(--cbsf-surface); font-size: 0.9rem; color: var(--cbsf-ink); font-family: inherit;
}
.cbsf-referral-invite-msg { font-size: 0.85rem; color: var(--cbsf-green-deep); margin: 0.6rem 0 0; }
.cbsf-referral-invite-msg.cbsf-claim-msg-error { color: #a3341c; }

.cbsf-referral-faq { border-top: 1px solid var(--cbsf-line); padding-top: 1.4rem; }
.cbsf-referral-faq h3 { font-family: var(--cbsf-font-display); font-size: 1.05rem; margin: 0 0 0.9rem; }
.cbsf-referral-faq details {
	border-bottom: 1px solid var(--cbsf-line-2); padding: 0.85rem 0;
}
.cbsf-referral-faq summary {
	cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--cbsf-ink); list-style: none;
}
.cbsf-referral-faq summary::-webkit-details-marker { display: none; }
.cbsf-referral-faq summary::before { content: '+'; display: inline-block; width: 1.1em; color: var(--cbsf-green-deep); font-weight: 700; }
.cbsf-referral-faq details[open] summary::before { content: '\2212'; }
.cbsf-referral-faq p { margin: 0.6rem 0 0 1.1em; color: var(--cbsf-ink-2); font-size: 0.88rem; line-height: 1.55; }

/* ---------------------------------------------------- sign-in popup */
/* Replaces the old behavior of opening a full standalone page in a new tab
   just to show this same message (CBSF_Click_Tracker::render_interstitial()
   still exists server-side as the no-JS fallback — a direct link visit still
   works). Lives outside .cbsf's normal document flow (appended straight to
   <body>), so every rule here needs real specificity/!important against the
   same GeneratePress button reset documented elsewhere in this file. */
body.cbsf-popup-open { overflow: hidden; }
.cbsf-popup-overlay {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(14,19,15,.55);
	display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.cbsf-popup {
	position: relative; width: 100%; max-width: 26rem;
	background: var(--cbsf-surface); border-radius: 18px; padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 20px 60px -20px rgba(14,19,15,.45);
	text-align: center;
	animation: cbsf-popup-in .18s ease-out;
}
@keyframes cbsf-popup-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cbsf-popup-close {
	position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem;
	border: none; background: var(--cbsf-ground) !important; color: var(--cbsf-ink-2) !important;
	border-radius: 999px; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: none !important;
}
.cbsf-popup-close:hover { background: var(--cbsf-line-2) !important; color: var(--cbsf-ink) !important; }
.cbsf-popup h2 { font-family: var(--cbsf-font-display); font-size: 1.3rem; margin: 0 0 0.6rem; color: var(--cbsf-ink); }
.cbsf-popup p { margin: 0 0 1.4rem; color: var(--cbsf-ink-2); font-size: 0.92rem; line-height: 1.55; }
.cbsf-popup-btn {
	display: block; width: 100%; padding: 0.8rem 1.2rem; border-radius: 999px;
	font-weight: 700; font-size: 0.94rem; text-decoration: none; margin-bottom: 0.6rem; transition: none !important;
}
.cbsf-popup-primary { background: var(--cbsf-green) !important; color: #fff !important; }
.cbsf-popup-primary:hover { background: var(--cbsf-green-deep) !important; color: #fff !important; }
.cbsf-popup-secondary { background: var(--cbsf-ground) !important; color: var(--cbsf-ink) !important; border: 1px solid var(--cbsf-line); }
.cbsf-popup-secondary:hover { background: var(--cbsf-line-2) !important; color: var(--cbsf-ink) !important; }
.cbsf-popup-continue { display: inline-block; margin-top: 0.3rem; font-size: 0.84rem; color: var(--cbsf-ink-3) !important; text-decoration: underline; }
.cbsf-popup-continue:hover { color: var(--cbsf-ink-2) !important; }

@media (prefers-reduced-motion: reduce) {
	.cbsf * { animation: none !important; transition: none !important; }
}