/* ccu bundle: ccu-state-compliance, ccu-tokens, ccu-base, ccu-layout, creamchargersusa-child, ccu-pages, ccu-telegram-channel */

/* --- ccu-state-compliance --- */
/**
 * State compliance UI.
 *
 * Tone is deliberate: this is a trust signal, not a warning label. A trade buyer
 * reading "we check the rules for your state" should conclude the supplier is
 * competent, not that the product is dangerous. So: calm neutrals by default,
 * colour reserved for the actual answer.
 *
 * No CSS framework, no custom properties from the parent theme — this file must
 * work if the module is lifted into another build (decision D4, portability).
 * The literal colours below therefore duplicate the site palette on purpose;
 * they are warm cream/copper values, NOT the cold WordPress-admin greys and
 * blues this file originally shipped with, which made the widget look bolted on
 * to every page that embedded it (2026-10-23).
 *
 * Edges follow the same rule as the rest of the site: a surface change and a
 * soft shadow, not a 1px outline.
 */

.ccu-state-check {
	margin: 1.5rem 0;
	padding: 1.35rem 1.5rem;
	border: none;
	border-radius: 10px;
	background: linear-gradient(177deg, #fffefb 0%, #fffdf9 46%, #fbf7ef 100%);
	box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.055),
	            inset 0 1px 0 rgba(255, 255, 255, 0.85),
	            0 1px 2px rgba(28, 26, 23, 0.05),
	            0 14px 34px -16px rgba(28, 26, 23, 0.26);
	color: #1c1a17;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ccu-state-check.is-compact {
	margin: 1rem 0;
	padding: 0.9rem 1rem;
	font-size: 0.9rem;
}

.ccu-state-check__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.ccu-state-check.is-compact .ccu-state-check__title {
	font-size: 0.95rem;
}

.ccu-state-check__intro {
	margin: 0 0 0.85rem;
	color: #3a352e;
}

.ccu-state-check__select {
	width: 100%;
	max-width: 22rem;
	padding: 0.6rem 0.75rem;
	border: none;
	border-radius: 7px;
	background: #fffdf9;
	box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.12),
	            inset 0 1px 2px rgba(28, 26, 23, 0.06);
	color: #1c1a17;
	font: inherit;
}

.ccu-state-check__select:focus-visible {
	outline: 2px solid #b5652b;
	outline-offset: 1px;
}

/* The answer. Left edge rather than a filled block — reads as information,
   not as an error state, which matters when the answer is "yes". The edge is a
   soft gradient bar so it blends into the panel instead of ruling a line down it. */
.ccu-state-check__result:empty {
	display: none;
}

.ccu-state-check__result {
	position: relative;
	margin-top: 0.85rem;
	padding: 0.75rem 0.95rem 0.75rem 1.1rem;
	border: none;
	border-radius: 7px;
	background: #fffdf9;
	box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.05);
	overflow: hidden;
}

.ccu-state-check__result::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, transparent 0%, #a39c8f 22%, #a39c8f 78%, transparent 100%);
}

.ccu-state-check__result.is-ok {
	background: linear-gradient(177deg, #f4f8f1 0%, #eef4ea 100%);
}
.ccu-state-check__result.is-ok::before {
	background: linear-gradient(180deg, transparent 0%, #4d6a4d 22%, #4d6a4d 78%, transparent 100%);
}

.ccu-state-check__result.is-check {
	background: linear-gradient(177deg, #fdf8ec 0%, #faf2e0 100%);
}
.ccu-state-check__result.is-check::before {
	background: linear-gradient(180deg, transparent 0%, #a3781f 22%, #a3781f 78%, transparent 100%);
}

.ccu-state-check__result.is-no {
	background: linear-gradient(177deg, #fbf1ef 0%, #f7e8e5 100%);
}
.ccu-state-check__result.is-no::before {
	background: linear-gradient(180deg, transparent 0%, #8c3a2c 22%, #8c3a2c 78%, transparent 100%);
}

.ccu-state-check__result.is-loading {
	color: #6b6459;
	font-style: italic;
}

.ccu-state-check__foot {
	margin: 0.9rem 0 0;
}

.ccu-state-check__legal {
	margin: 0.7rem 0 0;
	color: #6b6459;
	font-size: 0.82em;
}

/* Support buttons. Always present when a state is uncertain — the owner's rule is
   that the customer is never dead-ended.
 *
 * NOTE: this file must NOT define a bare `.ccu-btn` rule. It used to, painting
 * every unmodified `.ccu-btn` on the page WordPress-admin blue (#1a5276) — which
 * is why the crypto "copy address" button rendered blue on a copper site. It only
 * failed to hijack the whole site's buttons because this stylesheet happens to be
 * enqueued with no dependencies and therefore prints BEFORE base.css; any change
 * to enqueue order would have turned every button on the site blue. Layout now
 * comes from base.css `.ccu-btn`; this file supplies channel colour only.
 */
/* Spacing the bare rule used to provide; the buttons wrap as a group. */
.ccu-btn--call,
.ccu-btn--sms,
.ccu-btn--telegram,
.ccu-btn--signal,
.ccu-btn--whatsapp {
	margin: 0 0.4rem 0.4rem 0;
}

/* Call and Text are quiet, tinted surfaces rather than solid fills. The row
   otherwise stacks five saturated buttons side by side, which fights the house
   rule about rationing accent colour — and phone/SMS have no brand colour to
   earn one. The messaging apps below keep their platform colours because those
   are recognised at a glance. */
.ccu-btn--call,
.ccu-btn--sms {
	background: #f1ebdd;
	color: #8f4d1f;
	box-shadow: inset 0 0 0 1px rgba(143, 77, 31, 0.18),
	            inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ccu-btn--call:hover, .ccu-btn--call:focus,
.ccu-btn--sms:hover, .ccu-btn--sms:focus {
	background: #f0dcc6;
	color: #8f4d1f;
}

.ccu-btn--telegram {
	background: #1a7ba9; /* AA (was #229ed9) */
	color: #fffdf9;
}

.ccu-btn--telegram:hover,
.ccu-btn--telegram:focus {
	background: #156690;
	color: #fffdf9;
}

.ccu-btn--signal {
	background: #366ee1; /* AA (was #3a76f0, 4.11:1) */
	color: #fffdf9;
}

.ccu-btn--signal:hover,
.ccu-btn--signal:focus {
	background: #2f60c7;
	color: #fffdf9;
}

.ccu-btn--whatsapp {
	background: #25d366;
	color: #0b2a15;
}

.ccu-btn--whatsapp:hover,
.ccu-btn--whatsapp:focus {
	background: #1ebc59;
	color: #0b2a15;
}

/* Support links appended to a blocking checkout notice. */
.ccu-state-support a {
	font-weight: 600;
	text-decoration: underline;
}

/* Checkout declarations. Set on their own surface so they read as a deliberate
   step rather than fine print — these are the evidence that the sale sits inside
   the trade exemption. */
.ccu-compliance-confirm {
	margin: 1rem 0;
	padding: 1rem 1.15rem;
	border: none;
	border-radius: 9px;
	background: linear-gradient(177deg, #fffefb 0%, #fbf7ef 100%);
	box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.055),
	            inset 0 1px 0 rgba(255, 255, 255, 0.85),
	            0 10px 24px -16px rgba(28, 26, 23, 0.26);
}

.ccu-compliance-confirm .form-row {
	margin-bottom: 0.55rem;
}

.ccu-compliance-confirm label {
	font-size: 0.92rem;
	line-height: 1.45;
}

/* Deliberately NO prefers-color-scheme block.
 * This file used to flip itself to a dark palette when the visitor's OS asked
 * for dark mode. Nothing else on creamchargersusa.com is dark-mode aware, so the
 * result was a near-black panel dropped into the middle of a cream page for every
 * dark-mode visitor. If the site ever gains a real dark theme, dark values belong
 * there, applied sitewide — not in one module. */

/* High contrast mode discards gradients and shadows, so put real outlines back. */
@media (forced-colors: active) {
	.ccu-state-check,
	.ccu-compliance-confirm,
	.ccu-state-check__result,
	.ccu-state-check__select {
		border: 1px solid CanvasText;
	}
}



/* --- ccu-tokens --- */
/*
 * Design tokens — Cream Chargers USA
 *
 * Palette reasoning: this is a food-grade industrial-supply catalogue, not a DTC
 * lifestyle brand. Steel, cream, burnished copper — a specialty trade-supplier feel
 * (think a well-run McMaster-Carr crossed with a serious food-service catalogue),
 * not a candy-colored consumer storefront. Deliberately avoids the two most common
 * "AI-generated site" tells: Inter/system-ui type and blue-purple gradient accents.
 */

:root {
	/* --- Neutrals: warm, not cold-blue-black --- */
	--ccu-ink:        #1c1a17;
	--ccu-ink-soft:   #3a352e;
	--ccu-steel:      #6b6459;
	--ccu-steel-mist: #a39c8f;
	--ccu-line:       #ddd5c7;
	--ccu-cream:      #f6f1e7;
	--ccu-cream-deep: #ede4d2;
	--ccu-white:      #fffdf9;

	/* --- Accent: burnished copper, used sparingly --- */
	--ccu-copper:      #ad6029; /* was #b5652b: 4.25:1 with white text, now 4.61:1 (WCAG AA, B6 2026-10-23) */
	--ccu-copper-dark: #8f4d1f;
	--ccu-copper-tint: #f0dcc6;

	/* --- Signal (compliance / trade states — kept out of the copper family
	       on purpose, so a "route to support" notice never reads as a promo) --- */
	--ccu-signal-go:    #4d6a4d;
	--ccu-signal-check: #a3781f;
	--ccu-signal-stop:  #8c3a2c;

	/* --- Type --- */
	--ccu-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ccu-font-body:    "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
	--ccu-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	/* Fluid type scale — clamps so headlines don't feel templated-in at every
	   breakpoint via fixed px jumps. */
	--ccu-size-body:     1rem;
	--ccu-size-small:    0.875rem;
	--ccu-size-eyebrow:  0.8125rem;
	--ccu-size-h4:       clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--ccu-size-h3:       clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
	--ccu-size-h2:       clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	--ccu-size-h1:       clamp(2.4rem, 1.6rem + 3.2vw, 4rem);

	--ccu-leading-tight: 1.1;
	--ccu-leading-snug:  1.3;
	--ccu-leading-body:  1.6;

	/* --- Spacing scale (4px base) --- */
	--ccu-space-1: 0.25rem;
	--ccu-space-2: 0.5rem;
	--ccu-space-3: 0.75rem;
	--ccu-space-4: 1rem;
	--ccu-space-6: 1.5rem;
	--ccu-space-8: 2rem;
	--ccu-space-12: 3rem;
	--ccu-space-16: 4rem;
	--ccu-space-24: 6rem;
	--ccu-space-32: 8rem;

	/* --- Shape / structure --- */
	--ccu-radius-sm: 4px;
	--ccu-radius-md: 10px;
	--ccu-radius-lg: 16px;
	/* DEPRECATED — the hairline-outline era. Nothing in the theme uses this any
	   more; use the edge/lift tokens below instead. Kept defined only so any
	   stray or future reference degrades to the old look rather than to
	   `border: ;` and silently nothing. */
	--ccu-border: 1px solid var(--ccu-line);
	--ccu-content-width: 1240px;
	--ccu-content-width-narrow: 780px;

	/* --- Edges: blended, not drawn ------------------------------------------
	 * The first build outlined almost every element in `1px solid --ccu-line`.
	 * At page scale that reads as a stack of identical wireframe rectangles —
	 * the single strongest "assembled from a template" tell on the site, and
	 * the thing the owner called out (2026-10-23).
	 *
	 * The replacement: an edge is a *change in surface*, not a drawn line.
	 * A card sits slightly lighter than the page and casts a soft, wide, low-
	 * opacity shadow; a hairline highlight along its top edge catches the
	 * light. The eye reads a raised surface and stops looking for the stroke.
	 *
	 * --ccu-edge keeps a near-invisible ring purely so the shape survives on
	 * cheap/uncalibrated panels and in forced-colors mode, where shadows can
	 * vanish entirely. It is ~6% ink, not a visible line.
	 */
	--ccu-edge:        0 0 0 1px rgba(28, 26, 23, 0.055);
	--ccu-edge-top:    inset 0 1px 0 rgba(255, 255, 255, 0.85);

	/* Two-stage shadow: a tight contact shadow to seat the element, plus a wide
	   diffuse one so the boundary dissolves instead of ending abruptly. */
	--ccu-lift-1: 0 1px 1px rgba(28, 26, 23, 0.04), 0 6px 16px -10px rgba(28, 26, 23, 0.20);
	--ccu-lift-2: 0 1px 2px rgba(28, 26, 23, 0.05), 0 14px 34px -16px rgba(28, 26, 23, 0.26);
	--ccu-lift-3: 0 2px 4px rgba(28, 26, 23, 0.06), 0 26px 56px -24px rgba(28, 26, 23, 0.32);

	--ccu-shadow-card: var(--ccu-lift-2);

	/* A surface a half-step off the page colour. Doing the separation with
	   tone means a card needs no outline to be legible as a card. */
	--ccu-surface:      linear-gradient(177deg, #fffefb 0%, var(--ccu-white) 46%, #fbf7ef 100%);
	--ccu-surface-sunk: linear-gradient(177deg, #f1ebdd 0%, var(--ccu-cream-deep) 100%);

	/* Rules that fade out at both ends rather than stopping dead at a corner —
	   the divider equivalent of the same idea. */
	--ccu-rule: linear-gradient(90deg,
		transparent 0%,
		rgba(28, 26, 23, 0.11) 18%,
		rgba(28, 26, 23, 0.11) 82%,
		transparent 100%);
	--ccu-rule-soft: linear-gradient(90deg,
		transparent 0%,
		rgba(28, 26, 23, 0.07) 22%,
		rgba(28, 26, 23, 0.07) 78%,
		transparent 100%);
}



/* --- ccu-base --- */
/* Base typography + element styling — Cream Chargers USA */

body {
	background: var(--ccu-cream);
	color: var(--ccu-ink);
	font-family: var(--ccu-font-body);
	font-size: var(--ccu-size-body);
	line-height: var(--ccu-leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.ccu-heading {
	font-family: var(--ccu-font-display);
	font-weight: 600;
	color: var(--ccu-ink);
	line-height: var(--ccu-leading-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ccu-space-4);
}

h1, .ccu-h1 { font-size: var(--ccu-size-h1); }
h2, .ccu-h2 { font-size: var(--ccu-size-h2); }
h3, .ccu-h3 { font-size: var(--ccu-size-h3); line-height: var(--ccu-leading-snug); }
h4, .ccu-h4 { font-size: var(--ccu-size-h4); line-height: var(--ccu-leading-snug); }

p { margin: 0 0 var(--ccu-space-4); max-width: 62ch; }

a {
	color: var(--ccu-copper-dark);
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover, a:focus-visible {
	color: var(--ccu-copper);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* An eyebrow label — the small caps kicker above section headings.
   Doing this once, well, buys "considered" more cheaply than almost anything else. */
.ccu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-family: var(--ccu-font-mono);
	font-size: var(--ccu-size-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ccu-copper-dark);
	margin-bottom: var(--ccu-space-3);
}
.ccu-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.4em;
	height: 1px;
	background: currentColor;
}

.ccu-container {
	max-width: var(--ccu-content-width);
	margin-inline: auto;
	padding-inline: var(--ccu-space-6);
	box-sizing: border-box;
}
.ccu-container--narrow { max-width: var(--ccu-content-width-narrow); }

/* Same 24px side padding on a 375px phone leaves very little room for content
   and — combined with the header's fixed-width items — was the exact cause of a
   site-wide 6px horizontal overflow (verified: every page scrolled 6px sideways
   at 390px width, traced to the header row). 16px reads as full padding on a
   small screen and removes the overflow at its source rather than patching the
   header alone. */
@media (max-width: 480px) {
	.ccu-container { padding-inline: var(--ccu-space-4); }
}

.ccu-section {
	padding-block: var(--ccu-space-24);
}
.ccu-section--tight { padding-block: var(--ccu-space-16); }
.ccu-section--ink {
	background: var(--ccu-ink);
	color: var(--ccu-cream);
}
.ccu-section--ink h1, .ccu-section--ink h2, .ccu-section--ink h3 { color: var(--ccu-white); }
.ccu-section--ink p { color: var(--ccu-steel-mist); }

/* Buttons — square-ish, not the default rounded-pill every template ships with */
.ccu-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-family: var(--ccu-font-body);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	letter-spacing: 0.01em;
	padding: 0.85em 1.6em;
	border-radius: var(--ccu-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	text-decoration: none !important;
}
.ccu-btn--primary {
	background: var(--ccu-copper);
	color: var(--ccu-white);
}
.ccu-btn--primary:hover { background: var(--ccu-copper-dark); color: var(--ccu-white); }
.ccu-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.ccu-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.ccu-section:not(.ccu-section--ink) .ccu-btn--ghost {
	border-color: var(--ccu-ink);
	color: var(--ccu-ink);
}
.ccu-section:not(.ccu-section--ink) .ccu-btn--ghost:hover { background: var(--ccu-cream-deep); }

/* Card — a raised surface, not an outlined box. See the "Edges" note in
   tokens.css for why the border came off. */
.ccu-card {
	background: var(--ccu-surface);
	border: none;
	border-radius: var(--ccu-radius-md);
	box-shadow: var(--ccu-edge), var(--ccu-edge-top), var(--ccu-lift-2);
	padding: var(--ccu-space-8);
}

/* Forced-colors (Windows high contrast) throws away background images and
   shadows, so the card would lose its boundary entirely. Put a real border
   back only there. */
@media (forced-colors: active) {
	.ccu-card { border: 1px solid CanvasText; }
}

.ccu-tag {
	display: inline-block;
	font-family: var(--ccu-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border: none;
	border-radius: 999px;
	background: var(--ccu-cream-deep);
	box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.05);
	color: var(--ccu-steel);
}

/* Fades out at both ends instead of stopping dead — a seam between sections
   rather than a line ruled across them. */
.ccu-hr {
	border: none;
	height: 1px;
	background: var(--ccu-rule);
	margin: var(--ccu-space-12) 0;
}

::selection {
	background: var(--ccu-copper-tint);
	color: var(--ccu-ink);
}



/* --- ccu-layout --- */
/* Header / footer / nav layout — Cream Chargers USA */

.ccu-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ccu-ink);
	color: var(--ccu-white);
	padding: var(--ccu-space-2) var(--ccu-space-4);
	z-index: 1000;
}
.ccu-skip-link:focus { left: var(--ccu-space-2); top: var(--ccu-space-2); }

.ccu-topbar {
	background: var(--ccu-ink);
	color: var(--ccu-steel-mist);
	font-size: var(--ccu-size-small);
}
.ccu-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccu-space-4);
	padding-block: var(--ccu-space-2);
	flex-wrap: wrap;
}
.ccu-topbar__msg { margin: 0; }
/* Groups the row's right-hand links so they stay adjacent; margin-left:auto keeps
   them right-aligned when the row wraps on narrow screens. */
.ccu-topbar__links {
	display: flex;
	align-items: center;
	gap: var(--ccu-space-6);
	margin-left: auto;
	flex-wrap: wrap;
}
.ccu-topbar__link {
	color: var(--ccu-cream);
	font-weight: 600;
	white-space: nowrap;
}
.ccu-topbar__link:hover { color: var(--ccu-copper-tint); }

/* A sticky header needs to separate from the page as it scrolls, but a hard
   1px rule across the full width is the most template-looking way to do it.
   Instead the header casts a soft shadow downward — the separation appears
   because content passes *under* it, which is what's actually happening. */
.ccu-header {
	background: linear-gradient(180deg, var(--ccu-white) 0%, #fdfaf4 100%);
	border-bottom: none;
	box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04),
	            0 10px 24px -18px rgba(28, 26, 23, 0.45);
	position: sticky;
	top: 0;
	z-index: 100;
}
.ccu-header__row {
	display: flex;
	align-items: center;
	gap: var(--ccu-space-8);
	padding-block: var(--ccu-space-4);
}

.ccu-wordmark {
	font-family: var(--ccu-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--ccu-ink) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.ccu-wordmark span { color: var(--ccu-copper); }
.ccu-wordmark--footer { font-size: 1.25rem; margin-bottom: var(--ccu-space-2); }

/* Owner-supplied logo image (2026-09-03) — replaces the text wordmark. Height-based
   sizing so it scales proportionally regardless of the source image's own crop. */
.ccu-wordmark--logo { display: inline-flex; align-items: center; line-height: 0; }
.ccu-logo-img { height: 58px; width: auto; display: block; }
.ccu-wordmark--footer .ccu-logo-img { height: 48px; }
@media (max-width: 480px) {
	.ccu-logo-img { height: 44px; }
}

.ccu-nav { flex: 1; }
.ccu-nav ul {
	list-style: none;
	display: flex;
	gap: var(--ccu-space-6);
	margin: 0;
	padding: 0;
}
.ccu-nav a {
	color: var(--ccu-ink-soft);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	text-decoration: none;
}
.ccu-nav a:hover { color: var(--ccu-copper-dark); text-decoration: underline; }

.ccu-header__actions { display: flex; align-items: center; gap: var(--ccu-space-4); }
.ccu-cart-link {
	position: relative;
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: var(--ccu-ink) !important;
	text-decoration: none !important;
}
.ccu-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.3em;
	margin-left: 0.3em;
	background: var(--ccu-copper);
	color: var(--ccu-white);
	border-radius: 999px;
	font-size: 0.7rem;
}

/* CSS-only mobile nav (checkbox hack) — no JS dependency for something this simple */
.ccu-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.ccu-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: var(--ccu-space-2);
}
.ccu-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ccu-ink);
}

@media (max-width: 860px) {
	.ccu-header__row { gap: var(--ccu-space-4); }
	.ccu-nav-toggle { display: flex; }
	.ccu-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ccu-white);
		border-bottom: none;
		box-shadow: 0 14px 28px -16px rgba(28, 26, 23, 0.45);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
	}
	.ccu-nav ul { flex-direction: column; gap: 0; padding: var(--ccu-space-4) 0; }
	/* Inset so the separators stop short of the panel edge — they divide the
	   list instead of slicing the whole panel in half. */
	.ccu-nav li {
		border-bottom: none;
		background: var(--ccu-rule-soft) bottom / 100% 1px no-repeat;
	}
	.ccu-nav li:last-child { background: none; }
	.ccu-nav a { display: block; padding: var(--ccu-space-3) var(--ccu-space-6); }
	.ccu-nav-toggle-input:checked ~ .ccu-nav { max-height: 70vh; overflow-y: auto; }
}

.ccu-footer {
	background: var(--ccu-ink);
	color: var(--ccu-steel-mist);
	margin-top: var(--ccu-space-32);
	padding-block: var(--ccu-space-16) var(--ccu-space-8);
}
.ccu-footer a { color: var(--ccu-steel-mist); }
.ccu-footer a:hover { color: var(--ccu-copper-tint); }
.ccu-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.5fr 1fr 1fr;
	gap: var(--ccu-space-8);
	padding-bottom: var(--ccu-space-12);
}
.ccu-footer__brand p { color: var(--ccu-steel-mist); max-width: 32ch; }
.ccu-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ccu-footer__col li { margin-bottom: var(--ccu-space-2); }
.ccu-footer__col--brands ul { columns: 2; column-gap: var(--ccu-space-6); }
.ccu-footer__col--brands li { break-inside: avoid; }
.ccu-footer .ccu-eyebrow { color: var(--ccu-copper-tint); }

/* ------------------------------------- Kadence-rendered page-title band -- */

/* Pages with a hand-built `page-{slug}.php` use .ccu-page-hero, but anything
   falling through to Kadence's default template (Cart, Checkout, My Account,
   Shop, and any page we haven't templated) gets Kadence's own title band, which
   is painted `--global-palette7` — a cold blue-grey. On a warm cream site that
   band is the clearest "theme default nobody touched" tell on the page.
   The inner container is cleared and the outer hero carries the site surface,
   ending in a fading seam instead of a hard colour change.
   Overriding here rather than redefining --global-palette7: that palette slot
   is used elsewhere by Kadence, and repointing a shared token to fix one
   component is how you get surprises three pages away. */
.entry-hero-container-inner {
	background: transparent;
}
.entry-hero {
	position: relative;
	background: linear-gradient(180deg, var(--ccu-white) 0%, var(--ccu-cream) 100%);
}
.entry-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--ccu-rule-soft);
	pointer-events: none;
}
.entry-hero .entry-title {
	font-family: var(--ccu-font-display);
	color: var(--ccu-ink);
}

/* Footer sits on ink, so the fading rule is built from light rather than dark. */
.ccu-footer__bottom {
	border-top: none;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.14) 18%,
		rgba(255, 255, 255, 0.14) 82%,
		transparent 100%) top / 100% 1px no-repeat;
	padding-top: var(--ccu-space-6);
	display: flex;
	justify-content: space-between;
	gap: var(--ccu-space-6);
	flex-wrap: wrap;
	font-size: var(--ccu-size-small);
}
.ccu-footer__bottom p { margin: 0; max-width: 46ch; }

@media (max-width: 780px) {
	.ccu-footer__grid { grid-template-columns: 1fr 1fr; }
	.ccu-footer__brand, .ccu-footer__col--brands { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
 * Mobile fixes — SEO batch B6, 2026-10-23 (seo-overhaul-2026-10/06_reports/UX_REDESIGN_SPEC.md U1/U2).
 * ------------------------------------------------------------------------- */
/* Footer columns could push 1px past the viewport on phones (sitewide horizontal scroll). */
.ccu-footer__grid > * { min-width: 0; }
.ccu-footer li { overflow-wrap: anywhere; }
/* With its icon now rendering, the footer Telegram button (icon + label + @handle) is wider
   than a phone-width footer column; let it wrap instead of forcing a sideways scroll. */
.ccu-footer .ccu-tg-btn { max-width: 100%; flex-wrap: wrap; white-space: normal; }

@media (max-width: 600px) {
	/* U1: the trade bar wrapped to ~141px before the logo. Keep the message; its two links
	   are already in the header, the floating buttons and the footer. */
	.ccu-topbar__links { display: none; }
	.ccu-topbar__msg { margin: 0; padding-block: 0.5rem; line-height: 1.35; }

	/* U2: smaller floating buttons, and room at the end of the page so they never hide it. */
	body { padding-bottom: 72px; }
	body .ccu-wa-fab, body .ccu-tg-fab { width: 48px; height: 48px; }
	body .ccu-wa-fab { bottom: calc(var(--ccu-space-4, 16px) + 58px); }
	/* Product pages: WhatsApp (the primary support channel) only, so a second bubble
	   doesn't sit on the product title and price. */
	body.single-product .ccu-tg-fab { display: none; }
	body.single-product .ccu-wa-fab { bottom: var(--ccu-space-4, 16px); }
}



/* --- creamchargersusa-child --- */
/*
Theme Name: Cream Chargers USA
Theme URI: https://creamchargersusa.com
Description: Kadence child theme for creamchargersusa.com — food-grade N2O trade supply.
Author: Cream Chargers USA
Template: kadence
Version: 0.1.0
Text Domain: creamchargersusa
*/



/* --- ccu-pages --- */
/* Shared components for the Priority-1 landing pages — each page still gets its own
   section structure (see front-page.php note), this file just holds the repeated atoms
   so five pages don't each reinvent a product card or an FAQ disclosure. */

/* The hero doesn't end on a ruled line — it fades into the page beneath it.
   `position: relative` + the ::after rule keeps the seam decorative, so it is
   never announced to a screen reader as content. */
.ccu-page-hero {
	position: relative;
	padding-block: var(--ccu-space-24) var(--ccu-space-16);
	background: linear-gradient(180deg, var(--ccu-white) 0%, var(--ccu-cream) 100%);
}
.ccu-page-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--ccu-rule-soft);
	pointer-events: none;
}
.ccu-page-hero__grid { max-width: 820px; }
.ccu-page-hero p.ccu-lede { font-size: 1.125rem; color: var(--ccu-ink-soft); }

/* Shared hero-with-image variant — brand hubs, tanks category, wholesale */
.ccu-page-hero--media .ccu-page-hero__grid {
	max-width: none;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: var(--ccu-space-12);
}
.ccu-page-hero__media {
	background: #000;
	border-radius: var(--ccu-radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.ccu-page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccu-page-hero__media--top img { object-position: top; }
.ccu-page-hero__media-caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: var(--ccu-space-2) var(--ccu-space-3);
	background: rgba(0,0,0,0.6);
	color: var(--ccu-white);
	font-size: var(--ccu-size-small);
	text-align: center;
}
@media (max-width: 780px) {
	.ccu-page-hero--media .ccu-page-hero__grid { grid-template-columns: 1fr; gap: var(--ccu-space-6); }
	.ccu-page-hero__media { order: -1; aspect-ratio: 16 / 10; }
}

.ccu-breadcrumb {
	font-family: var(--ccu-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ccu-steel);
	margin-bottom: var(--ccu-space-4);
}
.ccu-breadcrumb a { color: var(--ccu-steel); }

/* Product grid — used on brand hub pages once products are published */
.ccu-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ccu-space-6);
}
.ccu-product-card {
	padding: var(--ccu-space-6);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ccu-product-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ccu-edge), var(--ccu-edge-top), var(--ccu-lift-3);
}
/* The product shot sits in a recessed well rather than a bordered frame, so
   packshots on white backgrounds still read as a distinct object. */
.ccu-product-card img {
	width: 100%;
	height: auto;
	border-radius: var(--ccu-radius-sm);
	background: var(--ccu-surface-sunk);
	box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.04);
	margin-bottom: var(--ccu-space-4);
}
.ccu-product-card h3 { font-size: var(--ccu-size-h4); margin-bottom: var(--ccu-space-2); }
.ccu-product-card .ccu-spec { font-size: var(--ccu-size-small); color: var(--ccu-steel); margin: 0; }

/* Recessed rather than outlined — an empty slot should read as a hollow in the
   page, which a dashed rectangle never quite managed. */
.ccu-empty-state {
	border: none;
	border-radius: var(--ccu-radius-md);
	background: var(--ccu-surface-sunk);
	box-shadow: inset 0 1px 3px rgba(28, 26, 23, 0.06),
	            inset 0 0 0 1px rgba(28, 26, 23, 0.04);
	padding: var(--ccu-space-12);
	text-align: center;
	color: var(--ccu-steel);
}

/* FAQ — native <details>, no JS */
.ccu-faq { max-width: var(--ccu-content-width-narrow); }
.ccu-faq details {
	position: relative;
	padding-block: var(--ccu-space-4);
}
.ccu-faq details::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--ccu-rule-soft);
	pointer-events: none;
}
.ccu-faq details:last-of-type::after { display: none; }
/* Opening a question tints it, so the active row is obvious without a box
   being drawn around it. */
.ccu-faq details[open] {
	background: linear-gradient(180deg, rgba(240, 220, 198, 0.28), transparent 72%);
	border-radius: var(--ccu-radius-sm) var(--ccu-radius-sm) 0 0;
	margin-inline: calc(var(--ccu-space-4) * -1);
	padding-inline: var(--ccu-space-4);
}
.ccu-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--ccu-font-display);
	font-size: 1.05rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ccu-faq summary::-webkit-details-marker { display: none; }
.ccu-faq summary::after {
	content: "+";
	font-family: var(--ccu-font-mono);
	color: var(--ccu-copper);
	font-size: 1.3rem;
	line-height: 1;
}
.ccu-faq details[open] summary::after { content: "\2212"; }
.ccu-faq details p { margin-top: var(--ccu-space-3); color: var(--ccu-ink-soft); }

/* Numbered step list — wholesale "how it works" */
.ccu-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ccu-space-8);
	counter-reset: ccu-step;
}
.ccu-steps > div { position: relative; padding-left: var(--ccu-space-8); }
.ccu-steps > div::before {
	counter-increment: ccu-step;
	content: counter(ccu-step);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--ccu-font-display);
	font-size: 1.5rem;
	color: var(--ccu-copper-dark);
	background: radial-gradient(circle at 32% 26%, #fbe9d6 0%, var(--ccu-copper-tint) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
	            0 4px 10px -4px rgba(143, 77, 31, 0.40);
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* Big numeric callout — pallet page */
.ccu-callout-number {
	font-family: var(--ccu-font-display);
	font-size: clamp(3rem, 2rem + 5vw, 6rem);
	line-height: 1;
	color: var(--ccu-copper);
	margin-bottom: var(--ccu-space-2);
}

/* Order ladder — pallet page */
.ccu-pallet-ladder {
	display: flex;
	align-items: center;
	gap: var(--ccu-space-2);
	margin-block: var(--ccu-space-8);
	flex-wrap: wrap;
}
.ccu-pallet-step {
	padding: var(--ccu-space-3) var(--ccu-space-4);
	border: none;
	border-radius: var(--ccu-radius-sm);
	background: var(--ccu-surface);
	box-shadow: var(--ccu-edge), var(--ccu-edge-top), var(--ccu-lift-1);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	white-space: nowrap;
}
.ccu-pallet-step:not(:last-child)::after {
	content: "\2192";
	margin-left: var(--ccu-space-4);
	color: var(--ccu-steel);
}
.ccu-pallet-step--target {
	background: linear-gradient(177deg, var(--ccu-copper) 0%, var(--ccu-copper-dark) 100%);
	color: var(--ccu-white);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
	            0 2px 4px rgba(28, 26, 23, 0.06),
	            0 16px 32px -16px rgba(143, 77, 31, 0.55);
}

/* Two-path split — where-to-buy page */
.ccu-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ccu-space-8);
}
.ccu-split > div {
	border: none;
	border-radius: var(--ccu-radius-md);
	padding: var(--ccu-space-8);
	background: var(--ccu-surface);
	box-shadow: var(--ccu-edge), var(--ccu-edge-top), var(--ccu-lift-2);
}
/* Emphasis used to be a 2px copper outline. Now it's a warm wash plus a copper
   glow bled into the shadow — the panel feels warmer rather than ring-fenced. */
.ccu-split > div.ccu-split--emphasis {
	background: linear-gradient(177deg, #fffdf8 0%, var(--ccu-copper-tint) 320%);
	box-shadow: 0 0 0 1px rgba(181, 101, 43, 0.20),
	            var(--ccu-edge-top),
	            0 2px 4px rgba(28, 26, 23, 0.05),
	            0 22px 48px -22px rgba(143, 77, 31, 0.40);
}

@media (max-width: 860px) {
	.ccu-product-grid { grid-template-columns: repeat(2, 1fr); }
	.ccu-steps { grid-template-columns: 1fr; }
	.ccu-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ccu-product-grid { grid-template-columns: 1fr; }
}

/* Support channel buttons — contact page */
.ccu-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ccu-space-3);
	margin-top: var(--ccu-space-6);
}

/* Numbered technique steps — learn page */
.ccu-ordered {
	list-style: none;
	counter-reset: ccu-ordered;
	padding: 0;
	margin: var(--ccu-space-6) 0;
}
.ccu-ordered li {
	position: relative;
	padding-left: var(--ccu-space-8);
	margin-bottom: var(--ccu-space-4);
	max-width: 62ch;
}
.ccu-ordered li::before {
	counter-increment: ccu-ordered;
	content: counter(ccu-ordered);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--ccu-font-mono);
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--ccu-copper-dark);
	background: radial-gradient(circle at 32% 26%, #fbe9d6 0%, var(--ccu-copper-tint) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
	            0 3px 8px -3px rgba(143, 77, 31, 0.38);
	width: 1.7rem;
	height: 1.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* Format comparison table (ccu_format_table, SEO batch B3 2026-10-23). */
.ccu-table-wrap { overflow-x: auto; margin: var(--ccu-space-6) 0 var(--ccu-space-2); -webkit-overflow-scrolling: touch; }
.ccu-table { width: 100%; border-collapse: collapse; background: var(--ccu-surface, #fffdf8); border-radius: var(--ccu-radius-md, 10px); overflow: hidden; font-size: 0.95rem; }
.ccu-table th, .ccu-table td { padding: 0.75rem 1rem; text-align: left; white-space: nowrap; }
.ccu-table thead th { background: var(--ccu-ink); color: var(--ccu-cream); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; }
.ccu-table tbody tr + tr th, .ccu-table tbody tr + tr td { border-top: 1px solid var(--ccu-cream-deep); }
.ccu-table tbody th { font-weight: 700; color: var(--ccu-ink); }
.ccu-table__n { color: var(--ccu-steel); font-size: 0.85em; }
.ccu-table__note { color: var(--ccu-steel); font-size: 0.85rem; margin-top: var(--ccu-space-2); }



/* --- ccu-telegram-channel --- */
/*
 * Telegram channel — sitewide promotion of @smartwhipwholesales
 * Owner instruction 2026-10-04. Pairs with inc/telegram-channel.php.
 *
 * Two deliberate style decisions, both argued in DECISIONS.md:
 *  1. Square-ish corners (--ccu-radius-sm) on buttons, not rounded pills. The
 *     site's house rule is "square-ish, not the default rounded-pill every
 *     template ships with" (see .ccu-btn in base.css). The one circle is the
 *     floating button, where a circle is the platform convention rather than a
 *     template tell.
 *  2. Telegram blue is used as a flat fill, never as a gradient, and never on
 *     more than one element per viewport. tokens.css explicitly calls out
 *     candy-coloured accents as an "AI-generated site" tell, so the blue is
 *     rationed: one CTA colour + one icon colour.
 *
 * Loaded sitewide (the floating button alone forces that), at priority 20 so it
 * lands after tokens.css and can consume the custom properties.
 */

.ccu-tg-icon {
	display: block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* ---------------------------------------------------------------- buttons -- */

.ccu-tg-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	padding: 0.6em 1.05em;
	background: #1a7ba9; /* AA: white text 4.64:1 (was #229ed9, 2.97:1) */
	color: var(--ccu-white);
	font-family: var(--ccu-font-body);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	letter-spacing: 0.01em;
	line-height: 1.3;
	border: 1px solid #229ed9;
	border-radius: var(--ccu-radius-sm);
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ccu-tg-btn:hover,
.ccu-tg-btn:focus-visible {
	background: #1b84b8;
	border-color: #1b84b8;
	color: var(--ccu-white);
}

.ccu-tg-btn--lg {
	padding: 0.9em 1.7em;
	font-size: 1rem;
}
.ccu-tg-btn__suffix { font-weight: 400; opacity: 0.85; }
.ccu-tg-btn__handle {
	font-family: var(--ccu-font-mono);
	font-size: 0.85em;
	opacity: 0.9;
}

/* Transparent variant for sitting on light backgrounds next to other buttons. */
.ccu-tg-btn--ghost {
	background: transparent;
	color: #1b84b8;
	border-color: #229ed9;
}
.ccu-tg-btn--ghost:hover,
.ccu-tg-btn--ghost:focus-visible {
	background: rgba(34, 158, 217, 0.09);
	color: #166f9c;
	border-color: #1b84b8;
}

/* ------------------------------------------------------------------ panel -- */

.ccu-tg-panel {
	background: var(--ccu-ink);
	color: var(--ccu-cream);
	border-top: none;
	background-image: linear-gradient(90deg, transparent 0%, #229ed9 22%, #229ed9 78%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: top;
	padding-block: var(--ccu-space-16);
}
/* background-color, not the `background` shorthand — the shorthand would reset
   the base rule's background-image and take the fading top accent with it. */
.ccu-tg-panel--light {
	background-color: var(--ccu-cream-deep);
	color: var(--ccu-ink);
}
.ccu-tg-panel__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccu-space-2);
}
.ccu-tg-panel--center .ccu-tg-panel__inner {
	align-items: center;
	text-align: center;
}
.ccu-tg-panel__title {
	color: var(--ccu-white);
	margin-bottom: var(--ccu-space-2);
}
.ccu-tg-panel--light .ccu-tg-panel__title { color: var(--ccu-ink); }
.ccu-tg-panel__text {
	color: var(--ccu-steel-mist);
	max-width: 52ch;
	margin-bottom: var(--ccu-space-6);
}
.ccu-tg-panel--light .ccu-tg-panel__text { color: var(--ccu-steel); }
.ccu-tg-panel--center .ccu-tg-panel__text { margin-inline: auto; }
.ccu-tg-panel__handle {
	margin: var(--ccu-space-4) 0 0;
	font-family: var(--ccu-font-mono);
	font-size: var(--ccu-size-small);
	letter-spacing: 0.04em;
	color: var(--ccu-steel-mist);
}
.ccu-tg-panel__handle .ccu-tg-icon {
	display: inline-block;
	vertical-align: -0.18em;
	margin-right: 0.3em;
	color: #229ed9;
}
.ccu-tg-panel__handle span {
	color: var(--ccu-cream);
	font-weight: 600;
}
.ccu-tg-panel--light .ccu-tg-panel__handle span { color: var(--ccu-ink); }

/* ------------------------------------------------- inline prompt (products) -- */

.ccu-tg-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ccu-space-2) var(--ccu-space-4);
	margin: var(--ccu-space-8) 0 0;
	padding: var(--ccu-space-4);
	position: relative;
	border: none;
	border-radius: var(--ccu-radius-sm);
	background: var(--ccu-surface);
	box-shadow: var(--ccu-edge), var(--ccu-edge-top), var(--ccu-lift-1);
	overflow: hidden;
}
.ccu-tg-inline__text {
	margin: 0;
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: var(--ccu-ink);
}
.ccu-tg-inline__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: #1b84b8;
	text-decoration: none;
}
.ccu-tg-inline__link .ccu-tg-icon { color: #229ed9; }
.ccu-tg-inline__link:hover,
.ccu-tg-inline__link:focus-visible {
	color: #166f9c;
	text-decoration: underline;
}
.ccu-tg-inline__arrow { font-weight: 400; }

/* --------------------------------------------------------- floating button -- */

.ccu-tg-fab {
	position: fixed;
	right: var(--ccu-space-6);
	bottom: var(--ccu-space-6);
	z-index: 90; /* under .ccu-header (100) — it must never paint over the sticky header */
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	height: 56px;
	padding: 0 var(--ccu-space-5);
	background: #1a7ba9;
	color: var(--ccu-white);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	line-height: 1.2;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(28, 26, 23, 0.18), 0 10px 28px rgba(28, 26, 23, 0.16);
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ccu-tg-fab .ccu-tg-icon { width: 24px; height: 24px; }
.ccu-tg-fab:hover,
.ccu-tg-fab:focus-visible {
	background: #1b84b8;
	color: var(--ccu-white);
	transform: translateY(-1px);
}

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

/* The wholesale hero stacks two CTAs vertically (the primary trade-account button
   plus this one) — the templates have no flex row for that, and an inline-flex
   sibling would otherwise sit shoulder-to-shoulder with the primary button. */
.ccu-page-hero .ccu-tg-btn {
	display: flex;
	width: fit-content;
	margin-top: var(--ccu-space-4);
}
/* Same two-CTA stack, inside the pallet page's ink CTA band (centred). */
.ccu-section--ink > .ccu-container > .ccu-tg-btn {
	display: flex;
	width: fit-content;
	margin: var(--ccu-space-4) auto 0;
}

/* In the top bar the button is text-only on Telegram-blue: the bar's own dark
   ink background plus a filled blue button next to it was too much weight for
   the smallest type on the page. */
.ccu-topbar .ccu-tg-btn {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ccu-cream);
	font-size: inherit;
	font-weight: 600;
}
.ccu-topbar .ccu-tg-btn .ccu-tg-icon { color: #229ed9; }
.ccu-topbar .ccu-tg-btn:hover,
.ccu-topbar .ccu-tg-btn:focus-visible {
	background: transparent;
	color: var(--ccu-copper-tint);
}

/* In the sticky header the label is the first thing to go when space runs out. */
.ccu-tg-btn--compact {
	background: transparent;
	color: #1b84b8;
	border-color: #229ed9;
	padding: 0.45em 0.7em;
}
.ccu-tg-btn--compact .ccu-tg-icon { color: #229ed9; }
.ccu-tg-btn--compact:hover,
.ccu-tg-btn--compact:focus-visible {
	background: rgba(34, 158, 217, 0.09);
	color: #166f9c;
	border-color: #1b84b8;
}

/* ------------------------------------------------------------------ footer -- */

.ccu-footer .ccu-tg-btn {
	background: transparent;
	color: var(--ccu-cream);
	border-color: rgba(34, 158, 217, 0.65);
	padding: 0.55em 0.9em;
}
.ccu-footer .ccu-tg-btn .ccu-tg-icon { color: #229ed9; }
.ccu-footer .ccu-tg-btn:hover,
.ccu-footer .ccu-tg-btn:focus-visible {
	background: #1a7ba9;
	color: var(--ccu-white);
	border-color: #229ed9;
}
.ccu-footer__tg { margin-bottom: var(--ccu-space-6); }
.ccu-footer__tg p {
	margin: 0 0 var(--ccu-space-2);
	color: var(--ccu-steel-mist);
	font-size: var(--ccu-size-small);
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
	/* Nav is collapsed at this width and the header row is at its tightest
	   (this row caused a site-wide 6px overflow once before, see base.css). Icon
	   only — the accessible name stays on the link's aria-label. */
	.ccu-tg-btn--compact .ccu-tg-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (max-width: 780px) {
	.ccu-tg-panel { padding-block: var(--ccu-space-12); }
}

@media (max-width: 600px) {
	/* Circle only — the label reappears on hover/focus-capable pointers, and the
	   aria-label carries it otherwise. Keeps the button out of the way of the
	   thumb-scroll area. */
	.ccu-tg-fab {
		right: var(--ccu-space-4);
		bottom: var(--ccu-space-4);
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
	}
	.ccu-tg-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.ccu-tg-inline {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ccu-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccu-tg-btn,
	.ccu-tg-fab {
		transition: none;
	}
	.ccu-tg-fab:hover,
	.ccu-tg-fab:focus-visible {
		transform: none;
	}
}
/* Telegram accent on the inline prompt — a soft vertical bar that fades out at
   both ends rather than a hard 3px rule down the full height of the box. */
.ccu-tg-inline::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, transparent 0%, #229ed9 20%, #229ed9 80%, transparent 100%);
}