/* Concept Studio - Browse (site-wide frame)
 * Build: 0.86.5-cs-btn-trim
 * Full-bleed grid: #header and #footer span edge-to-edge; the [nav | content]
 * band is inset and centered to the site width via gutter columns, so the nav
 * aligns with the header and Blocksy's content centering can't open empty columns.
 *
 * Collapse model (v0.60.5 nav-spine, operator spec): the nav pane is a
 * FULL-HEIGHT frame -- it stretches the whole content band, header to footer,
 * holding the tree (and, later, the Slice-2 filters). The toggle is a
 * full-length colored SPINE riveted to the pane's right edge: forest green,
 * drop shadow, NAVIGATION reading downward with a grip that rides sticky at
 * mid-viewport so it follows the customer through the browse. The drawer
 * tweens left to zero width; the spine travels with it and parks at the
 * content band's left edge -- persistent in both states. Tree contents fade
 * FAST on collapse (before the width tween reads) so the close reads as a
 * clean leftward slide, not a corner-crush.
 *
 * Tunables (set on :root or body to taste):
 *   --ccc-nav-w        expanded nav width      (default 290px)
 *   --ccc-content-max  max content-pane width  (default 960px)
 *   --ccc-gutter-min   min side gutter         (default 1.25rem)
 */

/* ---- Frame layout ---- */
body.ccc-frame #main-container {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--ccc-gutter-min, 1.25rem), 1fr)
		[band-start] var(--ccc-nav-w, 290px)
		[main-start] minmax(0, var(--ccc-content-max, 960px))
		[band-end] minmax(var(--ccc-gutter-min, 1.25rem), 1fr) [full-end];
	/* 0.63.3: header AUTO, content 1fr, footer AUTO. The container is min-height
	 * viewport (theme), and the previous all-auto rows let align-content:stretch
	 * split the SURPLUS height equally across all three rows -- inflating row 1
	 * past the header's own height and painting a dead beige gap below it that
	 * belonged to no element. Worst on short pages (About), invisible on tall
	 * ones. 1fr makes the content row the sole absorber of spare height. */
	grid-template-rows: auto 1fr auto;
	column-gap: 2.75rem; /* spine (~34px) lives here; remainder is the breathing room */
	/* Same track count in both states, so the column width tweens cleanly.
	 * Browsers without animatable grid tracks simply snap -- acceptable. */
	transition: grid-template-columns 0.28s ease;
}
body.ccc-frame #main-container > #header        { grid-column: full-start / full-end; grid-row: 1; }
/* 0.60.6: the theme gives #header a bottom margin, which inflates grid row 1
 * and opens a beige gap above the nav panel. Zero it inside the frame; the
 * panel's own padding provides the breathing room. row-gap guard for the
 * same reason. */
body.ccc-frame #main-container { row-gap: 0; }
body.ccc-frame #main-container > #header { margin-bottom: 0; }
/* 0.63.4: the header wears the same moss boundary as the freeze line --
 * one consistent ruling system framing the page. */
body.ccc-frame #header { border-bottom: 4px solid var(--ccc-moss, #799268); }
/* 0.62.0 frozen-pane: the frame spans from the viewport's LEFT EDGE to the
 * freeze line, painting the whole left side as a distinct band. */
/* 0.62.1: BRAND CONSTANTS. The plugin owns its greens; it does not ask the
 * theme's palette slots, which the operator can (and does) remap in the
 * Customizer. Retune brand color here, in one place. */
body.ccc-frame {
	--ccc-green-dark:   #385c38;  /* primary brand green */
	--ccc-ink:          #2d2d2d;  /* 0.63.2: near-black for dense tree content */
	--ccc-green-darker: #2c482c;  /* pressed/hover deepening */
	--ccc-moss:         #799268;  /* sampled from the footer band */
	--ccc-band-bg:      #ecefe6;  /* light moss wash for the frozen band */
	/* 0.65.2: the freeze line's thickness, in ONE place. The frame's right
	 * border reads this, AND the tab rail anchors its right edge to it
	 * (right: -band-w lands the rail on the border-box edge = the freeze line,
	 * in every state). Collapsed = thin line; open = a tab-housing band. */
	--ccc-band-w:       4px;
}
body.ccc-frame #main-container > .ccc-nav-frame  { grid-column: full-start / main-start; grid-row: 2; }
body.ccc-frame #main-container > #main           { grid-column: main-start / band-end;  grid-row: 2; min-width: 0; }
body.ccc-frame #main-container > #footer         { grid-column: full-start / full-end; grid-row: 3; }

/* ---- States: browse/cart keep the column open; collapsed tweens to zero ---- */
body.ccc-frame.ccc-nav-collapsed #main-container { --ccc-nav-w: 0px; }
/* 0.66.3: browse AND cart share ONE open width, so switching tabs no longer
 * reflows the content column (the "jolt" / side-shrink). Collapsed still
 * tweens to zero. */
body.ccc-frame.ccc-nav-browse #main-container,
body.ccc-frame.ccc-nav-cart   #main-container { --ccc-nav-w: 320px; }
body.ccc-frame.ccc-nav-account #main-container { --ccc-nav-w: 340px; }
/* 0.65.2: open states grow the freeze line into a tab-housing band. Setting
 * the variable here cascades to BOTH the frame border-width and the tab rail
 * anchor, so they move as one. Collapsed keeps the 4px base. */
body.ccc-frame.ccc-nav-browse,
body.ccc-frame.ccc-nav-cart,
body.ccc-frame.ccc-nav-account { --ccc-band-w: 42px; }

body.ccc-nav-collapsed .ccc-nav-frame {
	padding: 1.25rem 0;
	/* band + freeze line persist when collapsed -- the pane is frozen shut,
	 * not gone. nav-w: 0 makes the gradient all-moss on its own. */
}
body.ccc-nav-collapsed .ccc-nav-tree {
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}
.ccc-nav-tree { transition: opacity 0.12s ease; }
body.ccc-nav-collapsed .ccc-nav-tree { transition: opacity 0.1s ease; }

/* ---- Nav panel (its own surface) ---- */
.ccc-nav-frame {
	position: relative;
	align-self: stretch; /* full height of the content band: header to footer */
	margin: 0;
	padding: 1.25rem 0 1.25rem; /* horizontal inset moved to the tree */
	/* The right var(--ccc-nav-w) of the band is the white pane; everything left
	 * of it, out to the viewport edge, is moss. Collapsed (nav-w: 0) the whole
	 * band is moss. One background, no extra markup. */
	background: linear-gradient(to left,
		var(--theme-palette-color-8, #ffffff) 0,
		var(--theme-palette-color-8, #ffffff) var(--ccc-nav-w, 290px),
		var(--ccc-band-bg, #ecefe6) var(--ccc-nav-w, 290px),
		var(--ccc-band-bg, #ecefe6) 100%);
	border: 0;
	/* The FREEZE LINE: a crisp Excel-style boundary between nav and content.
	 * 0.65.1: it thickens into a tab-housing band when a folder is open and
	 * returns to a thin line when collapsed; width animates with the column. */
	border-right: var(--ccc-band-w, 4px) solid var(--ccc-moss, #799268);

	background-clip: padding-box;
	border-radius: 0;
	box-shadow: none;
	overflow-x: visible; overflow-y: clip; /* x: tab rail escapes the freeze line; y: clip stops the sticky pane bleeding past the footer */
	transition: padding 0.28s ease, border-color 0.15s ease, border-right-width 0.28s ease;
}
/* The frame is page-tall; the TREE rides sticky inside it so the catalog map
 * follows the customer down long grids. */
.ccc-nav-frame .ccc-nav-tree {
	position: sticky;
	top: 1rem;
	box-sizing: border-box;
	width: var(--ccc-nav-w, 290px); /* matches the gradient's white region */
	margin-left: auto;              /* hug the freeze line */
	padding: 0 0.85rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Minimal scrollbar for the catalog rail: invisible at rest, faint moss on
 * hover. Wheel + touch scroll always work; the bar only appears when reached
 * for, so it never competes with the tree for attention. */
.ccc-nav-frame .ccc-nav-tree {
	scrollbar-width: thin;                       /* Firefox: slim track */
	scrollbar-color: transparent transparent;    /* hidden until hover */
}
.ccc-nav-frame .ccc-nav-tree:hover {
	scrollbar-color: rgba(121, 146, 104, 0.45) transparent;
}
.ccc-nav-frame .ccc-nav-tree::-webkit-scrollbar {
	width: 6px;
}
.ccc-nav-frame .ccc-nav-tree::-webkit-scrollbar-track {
	background: transparent;
}
.ccc-nav-frame .ccc-nav-tree::-webkit-scrollbar-thumb {
	background: transparent;                     /* hidden at rest */
	border-radius: 3px;
}
.ccc-nav-frame .ccc-nav-tree:hover::-webkit-scrollbar-thumb {
	background: rgba(121, 146, 104, 0.45);       /* faint moss, on hover */
}
/* 0.66.6: STICKY tab rail. The rail snaps to the top of the viewport as the
 * customer scrolls the product grid, so Cart/Browse + the count badge stay in
 * reach. The rail itself keeps position:absolute with its right:calc() freeze-
 * line anchor (below) untouched -- this wrapper adds ONLY the vertical stick.
 * height:0 so it contributes no flow space (the folders pane does not shift). */
.ccc-nav-railwrap {
	position: sticky;
	top: 0;
	width: 100%;
	height: 0;
	z-index: 6;
}
/* Operator-only: clear the fixed WP admin bar so the rail and the sticky cart/
 * tree content are not tucked under it. Logged-out customers have no admin bar,
 * so these rules never match for them. The bar is 32px wide-screen, 46px at
 * <=782px, and not fixed at all <=600px (so we revert there). */
.admin-bar .ccc-nav-railwrap { top: 32px; }
.admin-bar .ccc-nav-folders,
.admin-bar .ccc-nav-frame .ccc-nav-tree { top: calc(1rem + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .ccc-nav-railwrap { top: 46px; }
	.admin-bar .ccc-nav-folders,
	.admin-bar .ccc-nav-frame .ccc-nav-tree { top: calc(1rem + 46px); }
}
@media screen and (max-width: 600px) {
	.admin-bar .ccc-nav-railwrap { top: 0; }
	.admin-bar .ccc-nav-folders,
	.admin-bar .ccc-nav-frame .ccc-nav-tree { top: 1rem; }
}

/* The tab RAIL: rides the freeze line at the frame's right edge, top-anchored.
 * Anchored with right:0 (+ translate to sit ON the line), not left:100% --
 * left:100% depended on the frame's full computed width and was throwing the
 * tabs to the far gutter. right:0 pins to the content-facing edge regardless. */
.ccc-nav-tabs {
	position: absolute;
	top: 0;                      /* 0.65.3: snap the cart tab flush under the header */
	/* Pin the rail's RIGHT edge to the frame's border-box right edge, which is
	 * glued to the freeze line (main-start grid line) in EVERY state regardless
	 * of gutter width or --ccc-nav-w. right:0 alone lands on the padding box and
	 * drifts with the border; offsetting by the band width lands on the line. */
	right: calc(-1 * var(--ccc-band-w, 4px));
	left: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;                      /* 0.65.3: tabs stack flush; Browse tucks under Cart */
	z-index: 6;
	/* slides inward as the band thickens, in lockstep with the border tween */
	transition: right 0.28s ease;
}
.ccc-nav-toggle {
	display: block;
	width: 34px;
	margin: 0;
	padding: 0.85rem 0 1rem;
	background: var(--ccc-moss, #799268);
	border: 0;
	border-radius: 0 10px 10px 0;
	box-shadow: 4px 0 10px rgba(0, 0, 0, 0.16);
	font: inherit;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ccc-nav-toggle:hover { background: var(--ccc-green-dark, #385c38); }
/* 0.63.2: the freeze line answers the tab's hover -- line + tab read as one
 * control. :has() watches the toggle from the frame. */
.ccc-nav-frame:has(.ccc-nav-toggle:hover) { border-right-color: var(--ccc-green-dark, #385c38); }
.ccc-nav-toggle-grip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 0;
}
.ccc-nav-toggle-icon { flex: 0 0 auto; fill: currentColor; opacity: 0.95; }
.ccc-nav-toggle-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.95;
}

/* ===================================================================== *
 *  0.65.0 -- nav spine as a TAB CONTROL (Cart + Browse), sliding folders
 * ===================================================================== */

/* The two tabs share the toggle's chrome; they stack top-anchored on the
 * freeze line, Cart above Browse. */
/* 0.65.2: the rail anchors via right: calc(-1 * --ccc-band-w) on .ccc-nav-tabs
 * above -- its right edge sits on the frame's border-box edge (the freeze line)
 * in every state. No translateX, no sticky here (sticky would re-base the
 * absolute anchor and drop the rail to the frame's left/gutter edge). */
.ccc-nav-tab {
	display: block;
	width: 38px;
	margin: 0;
	padding: 0.8rem 0 0.9rem;
	background: var(--ccc-moss, #799268);
	border: 0;
	/* 0.65.3: collapsed, the tab sticks out to the LEFT of the thin freeze line,
	 * so the rounded (exposed) end is the left one and the shadow casts outward. */
	border-radius: 10px 0 0 10px;
	box-shadow: -4px 0 10px rgba(0, 0, 0, 0.16);
	font: inherit;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
	position: relative;
}
.ccc-nav-tab:hover { background: var(--ccc-green-dark, #385c38); }
.ccc-nav-frame:has(.ccc-nav-tab:hover) { border-right-color: var(--ccc-green-dark, #385c38); }

/* ---- 0.65.2: spine thickens to house the tabs when a folder is open ---- *
 * The band width is now ONE variable (--ccc-band-w): the open states set it to
 * 42px (above), collapsed keeps the 4px base. That single var feeds the frame's
 * border-right-width AND the tab rail's right-edge anchor, so the line grows
 * and the tabs slide into it together -- no per-state transforms, nothing to
 * land wrong. Collapsed: rail hangs on the thin line's outer face. Open: rail
 * nests inside the 42px band (4px inset, left). Same anchor, both states. */
body.ccc-nav-browse .ccc-nav-tab,
body.ccc-nav-cart   .ccc-nav-tab,
body.ccc-nav-account .ccc-nav-tab {
	box-shadow: none;             /* no protruding drop-shadow when nested */
	border-radius: 8px;           /* fully rounded -- it's a slot in the band now */
}
/* Active tab highlight (deeper green); inactive sits quieter in the band. */
body.ccc-nav-browse .ccc-nav-tab--browse,
body.ccc-nav-cart   .ccc-nav-tab--cart,
body.ccc-nav-account .ccc-nav-tab--account {
	background: var(--ccc-green-dark, #385c38);
}
body.ccc-nav-browse .ccc-nav-tab--cart,
body.ccc-nav-browse .ccc-nav-tab--account,
body.ccc-nav-cart   .ccc-nav-tab--browse,
body.ccc-nav-cart   .ccc-nav-tab--account,
body.ccc-nav-account .ccc-nav-tab--cart,
body.ccc-nav-account .ccc-nav-tab--browse {
	/* 0.65.4: recede with a SOLID lighter green, not opacity. opacity made the
	 * whole tab translucent -- including the part overlapping its neighbor, so
	 * the active tab's green bled through the tucked seam. */
	background: #8ba37c;
}
/* 0.65.3: when the band is open, center the 38px rail within it (the collapsed
 * state keeps the base anchor, hugging the thin line). One formula: right edge
 * sits (band - 38)/2 inside the freeze line, i.e. equal slack both sides. */
body.ccc-nav-browse .ccc-nav-tabs,
body.ccc-nav-cart   .ccc-nav-tabs,
body.ccc-nav-account .ccc-nav-tabs {
	right: calc((var(--ccc-band-w, 42px) + 38px) / -2);
}
/* 0.65.3: Cart rides ON TOP and casts a downward seam; Browse tucks up beneath
 * it like a stacked file tab. The selector (.ccc-nav-tabs descendant) outranks
 * both the base tab rule and the open-state box-shadow:none, in every state. */
.ccc-nav-tabs .ccc-nav-tab--cart {
	z-index: 2;
	box-shadow: 0 5px 8px -3px rgba(0, 0, 0, 0.28);
}
.ccc-nav-tabs .ccc-nav-tab--browse {
	z-index: 1;
	margin-top: -8px;             /* slide up under the cart's lower edge */
	padding-top: 1.55rem;         /* ...and push icon + label clear of the tuck */
}
.ccc-nav-tab-grip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
}
.ccc-nav-tab-icon { flex: 0 0 auto; opacity: 0.96; }
.ccc-nav-tab-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.96;
}
/* Cart count badge: a small bubble above the cart glyph. */
.ccc-nav-tab--cart { padding-top: 1.4rem; }
.ccc-nav-tab-badge {
	position: absolute;
	top: 0.35rem;
	left: 50%;
	transform: translateX(-50%);
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--ccc-green-dark, #385c38);   /* solid brand green, no red */
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}
.ccc-nav-tab-badge[aria-hidden="true"] { display: none; }

/* ===================================================================== *
 *  0.73.0 -- ACCOUNT tab (top of spine) + account folder (C-folder v1)
 * ===================================================================== */

/* Guest state: the tab is an anchor -- kill link chrome, keep tab chrome. */
a.ccc-nav-tab--account { text-decoration: none; text-align: center; }

/* Stack order: Account rides on top and casts the downward seam; Cart tucks
 * up beneath it (same file-tab language as Cart-over-Browse below it). The
 * tucked Cart gets taller padding + a lower badge so the count clears the
 * Account tab's lower edge. */
.ccc-nav-tabs .ccc-nav-tab--account {
	z-index: 3;
	box-shadow: 0 5px 8px -3px rgba(0, 0, 0, 0.28);
}
.ccc-nav-tabs .ccc-nav-tab--cart {
	margin-top: -8px;
	padding-top: 1.9rem;
}
.ccc-nav-tabs .ccc-nav-tab--cart .ccc-nav-tab-badge { top: 0.85rem; }

/* Signed-in mark: a small bronze check chip pinned to the glyph's corner.
 * Bronze (not green) so it survives both the moss rest fill and the dark
 * green active fill. Guests get no mark. */
.ccc-nav-tab-mark {
	position: absolute;
	right: 5px;
	bottom: 8px;
	width: 0.9rem;
	height: 0.9rem;
	box-sizing: border-box;
	border-radius: 999px;
	background: #CD7F32;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Account folder body (the C-folder browser, v1) ---- */
.ccc-nav-account { padding: 0 0.85rem; }
.ccc-acct-close { display: none; }
@media screen and (max-width: 1024px) {
	.ccc-acct-head { display: flex; align-items: center; justify-content: space-between; }
	.ccc-acct-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.06);
		color: var(--ccc-ink, #2d2d2d);
		font-size: 1.15rem;
		line-height: 1;
		cursor: pointer;
	}
	.ccc-acct-close:hover { background: rgba(0, 0, 0, 0.12); }
}
.ccc-acct-sec {
	margin: 0.95rem 0 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ccc-ink, #2f3a2f);
	opacity: 0.7;
}
.ccc-acct-sec--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.ccc-acct-newquote {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.2rem 0.6rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	opacity: 1;
	color: #fff;
	background: var(--ccc-green-dark, #385c38);
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.5;
	transition: background 0.15s ease;
}
.ccc-acct-newquote:hover { background: #2b482b; color: #fff; }
.ccc-acct-head { display: flex; align-items: center; }
.ccc-acct-viewacct {
	margin-left: auto;
	margin-right: 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ccc-green-dark, #385c38);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}
.ccc-acct-viewacct:hover { text-decoration: underline; }
/* ---- Account-request intake (premium signup + tax bolt-on) ---- */
.ccc-acctreq { margin: 0 0 1.5rem; max-width: 640px; }
.ccc-acctreq-h { margin: 0 0 0.25rem; font-size: 1.1rem; }
.ccc-acctreq-lede { margin: 0 0 1rem; opacity: 0.85; font-size: 0.9rem; }
.ccc-acctreq-form { display: flex; flex-direction: column; gap: 0.7rem; }
.ccc-acctreq-l { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; }
.ccc-acctreq-l input, .ccc-acctreq-l select, .ccc-acctreq-l textarea { font-weight: 400; padding: 0.45rem 0.55rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 0.9rem; }
.ccc-acctreq-tax { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 0.5rem 0.75rem; background: rgba(0,0,0,0.02); }
.ccc-acctreq-tax > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 0.25rem 0; }
.ccc-acctreq-tax[open] { padding-bottom: 0.9rem; }
.ccc-acctreq-tax .ccc-acctreq-l { margin-top: 0.6rem; }
.ccc-acctreq-taxlede { margin: 0.5rem 0 0.25rem; font-size: 0.82rem; opacity: 0.8; }
.ccc-acctreq-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 400; }
.ccc-acctreq-submit { align-self: flex-start; margin-top: 0.4rem; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px; background: var(--ccc-green-dark, #385c38); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.ccc-acctreq-submit:hover { background: #2b482b; }
.ccc-acctreq-note { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.86rem; }
.ccc-acctreq-note.is-ok { background: #e2ecdc; color: #385c38; }
.ccc-acctreq-note.is-pending { background: #fbf4ea; color: #7a5a2b; }
.ccc-acctreq-note.is-err { background: #f6e0e0; color: #7a2b2b; }
.ccc-acct-folder {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	margin-bottom: 0.4rem;
	overflow: hidden;
}
.ccc-acct-folder-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 0.6rem;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ccc-acct-folder-head:hover { background: rgba(121, 146, 104, 0.10); }
.ccc-acct-fold-ico { flex: 0 0 auto; color: var(--ccc-moss, #799268); }
.ccc-acct-folder.is-open .ccc-acct-fold-ico { color: var(--ccc-green-dark, #385c38); }
.ccc-acct-folder-label {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: 0.88rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccc-acct-folder-sub { flex: 0 0 auto; font-size: 0.72rem; opacity: 0.6; }
.ccc-acct-chev {
	flex: 0 0 auto;
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.55;
	transition: transform 0.18s ease;
}
.ccc-acct-folder.is-open .ccc-acct-chev { transform: rotate(90deg); }
.ccc-acct-folder-body {
	padding: 0.15rem 0.6rem 0.6rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.10);
}
.ccc-acct-empty { margin: 0.45rem 0 0.2rem; font-size: 0.82rem; opacity: 0.65; }
.ccc-acct-line {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.32rem 0;
	font-size: 0.84rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ccc-acct-line:last-of-type { border-bottom: 0; }
.ccc-acct-line-qty { flex: 0 0 auto; font-weight: 700; opacity: 0.65; }
.ccc-acct-line-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.ccc-acct-line-name { color: var(--ccc-green-dark, #385c38); text-decoration: none; }
a.ccc-acct-line-name:hover { text-decoration: underline; }
.ccc-acct-cstm {
	flex: 0 0 auto;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #CD7F32;
	color: #fff;
	padding: 2px 5px;
	border-radius: 999px;
}
.ccc-acct-cs-btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	background: #8ba37c;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 7px;
	cursor: not-allowed;
	opacity: 0.55;
}
.ccc-acct-meta {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.45rem;
	font-size: 0.78rem;
	opacity: 0.8;
}
.ccc-acct-viewfull,
.ccc-acct-viewall {
	display: block;
	margin: 0.35rem 0 0.1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ccc-green-dark, #385c38);
	text-decoration: none;
}
.ccc-acct-viewall { margin: 0.55rem 0 1rem; }
.ccc-acct-viewfull:hover,
.ccc-acct-viewall:hover { text-decoration: underline; }

/* ---- 0.74.0: past-order lines in cart-item anatomy + Reorder ---- */
.ccc-acct-olist { margin-bottom: 0.35rem; }
/* 0.80.2: real breathing room -- the cards read squished at cart density.
 * Margin clears the VIEWING outline (2px + 2px offset) with air to spare;
 * padding gives the content a card interior instead of a list row. */
ul.ccc-acct-olist li.ccc-cart-item {
	margin: 12px 7px;
	padding: 0.6rem 0.55rem;
	border-radius: 8px;
}
ul.ccc-acct-olist .ccc-ci-row + .ccc-ci-row { margin-top: 0.4rem; }
.ccc-acct-reorder {
	flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	background: var(--ccc-moss, #799268);
	color: #fff;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}
.ccc-acct-reorder:hover:not(:disabled) { background: var(--ccc-green-dark, #385c38); }
.ccc-acct-reorder:disabled { opacity: 0.7; cursor: default; }
.ccc-acct-oqty {
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 700;
	opacity: 0.65;
	white-space: nowrap;
}
/* 0.80.2: weight (0,2,0) -- the shared price-row rule sets space-between at
 * the same weight via :is(), so a bare class lost. Same lesson as the qty
 * stepper: borrow the scope, win the tie by source order. */
ul.ccc-acct-olist .ccc-acct-aspaid-row { justify-content: flex-end; }
.ccc-acct-aspaid { font-size: 0.76rem; opacity: 0.75; }
.ccc-acct-aspaid-v { font-weight: 700; opacity: 1; }
.ccc-acct-aspaid-sep { opacity: 0.5; padding: 0 0.1rem; }
.ccc-acct-err {
	margin: 0.3rem 0 0.1rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	background: #f6e8dc;
	border: 1px solid #CD7F32;
	color: #6b4a23;
	font-size: 0.76rem;
	line-height: 1.35;
}

/* ---- 0.75.0: two-state card -- action row + current-quote panel ---- */
.ccc-acct-btnrow { gap: 0.45rem; padding-top: 0.4rem; }
/* 0.80.0: View Configuration / View Product twins the Re-Order pill --
 * one action language per card. */
.ccc-acct-viewbtn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	background: var(--ccc-moss, #799268);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.ccc-acct-viewbtn:hover { background: var(--ccc-green-dark, #385c38); color: #fff; text-decoration: none; }

/* State B: the quote panel replaces the meta rows; the title row stays as
 * the card's identity. Slide-in is a light transform+fade -- judged on the
 * rendered pixel, tune on sight. */
.ccc-acct-qpanel { display: none; }
/* 0.80.0: the quote panel opens BELOW the still-visible as-paid line; a
 * dashed rule separates old information (history) from new (current). */
.ccc-acct-oline.is-quote .ccc-acct-qpanel {
	border-top: 1px dashed rgba(0, 0, 0, 0.16);
	margin-top: 0.35rem;
	padding-top: 0.3rem;
}
.ccc-acct-oline.is-quote .ccc-ci-row:not(.ccc-ci-title-row):not(.ccc-ci-mat-row):not(.ccc-acct-aspaid-row) { display: none; }
.ccc-acct-oline.is-quote .ccc-acct-oqty { display: none; }
.ccc-acct-qonly { display: none; }
.ccc-acct-oline.is-quote .ccc-acct-qonly { display: inline-flex; align-items: center; gap: 0.35rem; }
.ccc-acct-oline.is-quote .ccc-acct-qpanel {
	display: block;
	animation: ccc-acct-qslide 0.22s ease;
}
@keyframes ccc-acct-slidein {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@keyframes ccc-acct-qslide {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}
.ccc-acct-qhead {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
	margin: 0.35rem 0 0.15rem;
}
.ccc-acct-qsched {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.76rem;
	margin: 0.15rem 0 0.4rem;
}
.ccc-acct-qsched th,
.ccc-acct-qsched td { text-align: center; }
.ccc-acct-qsched th {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	padding: 0.15rem 0.3rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ccc-acct-qsched td {
	padding: 0.22rem 0.3rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ccc-acct-qnone { margin: 0.2rem 0 0.4rem; font-size: 0.78rem; opacity: 0.6; }

/* Title-row controls (quote state): X in the trash slot, stepper in the
 * counter slot -- the cart row's own geography. */
.ccc-acct-qctl { flex: 0 0 auto; margin-left: auto; }
.ccc-acct-qclose {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: rgba(0, 0, 0, 0.45);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ccc-acct-qclose:hover { background: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.75); }
/* 0.75.2: the quote stepper wears the CART quantity box's exact chrome --
 * same wrapper-owned width, same button chrome, same input release from
 * Blocksy's forced 40px height. input.ccc-acct-qval (element+class) is the
 * specificity that BEATS the theme's input[type=text] rule; a bare class
 * loses that fight, which is why the box ballooned in 0.75.1. */
/* 0.75.3: SCOPED like the cart rules are scoped. The cart wins the theme
 * fight at weight (0,2,1) -- pane class + element.class. 0.75.2 copied the
 * properties at (0,1,1) and Blocksy kept winning (forced input height,
 * border, background). Same properties, correct weight, done. */
.ccc-nav-account .ccc-acct-qstep {
	flex: 0 0 96px;
	width: 96px;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #cfc8b6;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.ccc-nav-account .ccc-acct-qstep button {
	flex: 0 0 24px;
	border: 0;
	background: #f3efe3;
	color: var(--ccc-green-dark, #385c38);
	width: 24px;
	height: auto;
	min-height: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	border-radius: 0;
}
.ccc-nav-account .ccc-acct-qstep button:hover { background: #e7e1cf; }
.ccc-nav-account input.ccc-acct-qval {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0.1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
}
.ccc-nav-account input.ccc-acct-qval:focus { outline: none; background: #fbf7ec; box-shadow: none; }

/* Set-quantity icon riding each schedule row's qty cell. */
.ccc-acct-qset {
	width: 18px;
	height: 18px;
	margin-right: 0.3rem;
	border: 0;
	border-radius: 4px;
	background: rgba(121, 146, 104, 0.16);
	color: var(--ccc-green-dark, #385c38);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
}
.ccc-acct-qset:hover { background: var(--ccc-moss, #799268); color: #fff; }

.ccc-acct-qprice { font-size: 0.78rem; margin: 0.1rem 0 0.45rem; text-align: right; }
.ccc-acct-qunit, .ccc-acct-qtotal { font-weight: 600; }
.ccc-acct-qpct { color: var(--ccc-green-dark, #385c38); font-size: 0.76rem; font-weight: 600; }
.ccc-acct-qeach, .ccc-acct-qtlabel, .ccc-acct-qtotsep { font-size: 0.76rem; opacity: 0.6; }

/* One full-width commit action, spanning the information column. */
.ccc-acct-addcart {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 6px;
	background: var(--ccc-moss, #799268);
	color: #fff;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	padding: 8px 11px;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-bottom: 0.15rem;
	box-sizing: border-box;
}
.ccc-acct-addcart:hover:not(:disabled) { background: var(--ccc-green-dark, #385c38); }
.ccc-acct-addcart:disabled { opacity: 0.7; cursor: default; }

/* 0.83.1: quote-intake bounce on the mobile Account button (bumpCart's
 * visual language, its own keyframe so timings can diverge later). */
.ccc-search-acct.is-bumped { animation: ccc-acct-bump 0.5s ease; }
@keyframes ccc-acct-bump {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.22); }
	55%  { transform: scale(0.94); }
	75%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* 0.85.0: the All-Quotes account page reuses the panel's cards; cap their
 * width so a full-page column doesn't stretch a 320px card to 900px. */
.ccc-quotes-page .ccc-acct-qline { max-width: 560px; margin-left: 0; }

/* ---- 0.83.0: Quotes folder live -- cards + lifecycle badges ---- */
.ccc-acct-qlist { list-style: none; margin: 0; padding: 0; }
.ccc-acct-qline {
	margin: 8px 4px;
	padding: 0.55rem 0.55rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
}
.ccc-acct-qtop { display: flex; align-items: center; gap: 0.45rem; }
.ccc-acct-qref { font-weight: 700; font-size: 0.8rem; }
.ccc-acct-qdate { margin-left: auto; font-size: 0.72rem; opacity: 0.55; }
.ccc-acct-qbadge {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
}
.ccc-acct-qbadge.is-pending { background: #f6ead2; color: #8a6a1f; }
.ccc-acct-qbadge.is-rendered  { background: #e2ecdc; color: var(--ccc-green-dark, #385c38); }
/* 0.84.1: No-Quote coin in washed red -- the bronze read as Pending's
 * cousin at a glance; a refusal must be visually NOT-amber. */
.ccc-acct-qbadge.is-noquote { background: #f3d9d4; color: #9c3325; }
.ccc-acct-qbadge.is-inprocess { background: #fbe8c9; color: #8a5a1f; }
.ccc-acct-qbadge.is-withdrawn { background: #e9e7e2; color: #6f6a61; }
.ccc-art-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccc-art-sku { font-size: 12px; color: #6f6a61; letter-spacing: .02em; }
.ccc-art-status { margin-top: 4px; }
.ccc-acct-qwhat { font-size: 0.78rem; margin-top: 0.3rem; }
.ccc-acct-qtype {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(121, 146, 104, 0.14);
	color: var(--ccc-green-dark, #385c38);
	border-radius: 4px;
	padding: 2px 5px;
	margin-right: 0.25rem;
}
.ccc-acct-qact { margin-top: 0.4rem; }
.ccc-acct-qremove {
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: none;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}
.ccc-acct-qremove.is-armed { border-color: #CD7F32; color: #8a4b2a; background: #f6e8dc; }
.ccc-acct-qremove:disabled { opacity: 0.6; cursor: default; }
.ccc-acct-qwhy {
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ccc-green-dark, #385c38);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}
.ccc-acct-qreply {
	margin-top: 0.35rem;
	padding: 0.4rem 0.5rem;
	border-left: 3px solid #CD7F32;
	background: #faf6ef;
	font-size: 0.76rem;
	line-height: 1.4;
}
.ccc-acct-qart { font-size: 0.78rem; font-weight: 600; }

/* ---- 0.76.0: source-line mark for View Configuration visits ----
 * Structural twin of the studio's cs-editing-line (bronze outline + corner
 * pill), applied server-side to the account panel's source order line when
 * the studio was entered through the cs_order door. Pill text is one string
 * if the wording ever changes. */
.ccc-acct-oline.ccc-acct-viewing {
	outline: 2px solid #CD7F32;
	outline-offset: 2px;
	border-radius: 8px;
	position: relative;
}
.ccc-acct-oline.ccc-acct-viewing::after {
	content: "VIEWING";
	position: absolute;
	top: -9px;
	right: 8px;
	background: #CD7F32;
	color: #fff;
	font-weight: 700;
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 3px 7px;
	border-radius: 999px;
	pointer-events: none;
}

/* ---- The folder pane: two folders, one shown, file-drawer slide ---- */
.ccc-nav-folders {
	position: sticky;
	top: 1rem;
	width: var(--ccc-nav-w, 290px);
	margin-left: auto;            /* hug the freeze line */
	max-height: calc(100vh - 2rem);
	box-sizing: border-box;
	/* 0.66.3: clip the off-folder's horizontal slide WITHOUT being a scroll
	 * container. overflow:hidden made this a scroll container that swallowed the
	 * mouse wheel over a short cart (it never chained to the page). overflow-x:
	 * clip clips the x slide; overflow-y stays visible so wheel reaches the page. */
	overflow-x: clip;
	overflow-y: visible;
}
/* Each folder occupies the pane; the inactive one is translated off-window. */
.ccc-nav-folder {
	box-sizing: border-box;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	/* 0.66.3: when the folder itself has nothing to scroll (a short cart), chain
	 * the wheel to the page. 'contain' was swallowing it. The tree still scrolls
	 * internally when it overflows; only the boundary behaviour changes. */
	overscroll-behavior: auto;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* The tree element IS the scrolling folder (it carries both .ccc-nav-folder and
 * .ccc-nav-tree). Let the .ccc-nav-folder cap (max-height + overflow-y:auto)
 * stand -- DON'T null it here, or the tree loses its ceiling and pours into the
 * footer. We only reset positioning; the folder pane owns the sticky + scroll. */
.ccc-nav-frame .ccc-nav-folders .ccc-nav-tree {
	position: static;
	width: 100%;
	margin: 0;
}
/* Stack the two folders in the same cell so one can slide over the other.
 * One explicit full-width column -- without this, grid auto-sizes the track to
 * content and squishes the cart text to one word per line. */
.ccc-nav-folders { display: grid; grid-template-columns: 100%; }
.ccc-nav-folder { grid-area: 1 / 1; min-width: 0; }

/* Browse state: tree in view, cart slid out to the right (off-window). */
body.ccc-nav-browse .ccc-nav-tree  { transform: translateX(0); opacity: 1; }
body.ccc-nav-browse .ccc-nav-cart  { transform: translateX(120%); opacity: 0; pointer-events: none; }
/* Cart state: cart in view, tree parked off to the RIGHT so it re-enters from
 * the right -- same direction as the cart, reading as "from the content pane." */
body.ccc-nav-cart .ccc-nav-cart    { transform: translateX(0); opacity: 1; }
body.ccc-nav-cart .ccc-nav-tree    { transform: translateX(120%); opacity: 0; pointer-events: none; }
/* Account state: account folder in view, tree + cart parked to the right. */
body.ccc-nav-account .ccc-nav-account  { transform: translateX(0); opacity: 1; }
body.ccc-nav-account .ccc-nav-tree,
body.ccc-nav-account .ccc-nav-cart     { transform: translateX(120%); opacity: 0; pointer-events: none; }
/* ...and the account folder parks right whenever another folder is open. */
body.ccc-nav-browse .ccc-nav-account,
body.ccc-nav-cart   .ccc-nav-account   { transform: translateX(120%); opacity: 0; pointer-events: none; }
/* Collapsed: all folders gone, column zero, tabs flip to the outer face. */
body.ccc-nav-collapsed .ccc-nav-folders { width: 0; }
body.ccc-nav-collapsed .ccc-nav-folder  { opacity: 0; pointer-events: none; }
body.ccc-nav-collapsed .ccc-nav-tree    { transform: translateX(-120%); }
body.ccc-nav-collapsed .ccc-nav-cart    { transform: translateX(120%); }
body.ccc-nav-collapsed .ccc-nav-account { transform: translateX(120%); }
/* [hidden] is only the no-JS fallback; JS removes it so both can be staged for
 * the slide. With JS on, the off-folder is positioned out, not display:none. */
.ccc-nav-folder[hidden] { display: block; }

/* ---- Cart folder body (WC mini-cart, restyled) ---- */
.ccc-nav-cart { padding: 0 0.85rem; --ccc-ctrl-w: 96px; }
.ccc-cart-head {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ccc-ink, #2d2d2d);
	padding: 0.25rem 0 0.6rem;
	border-bottom: 1px solid #e2ddcf;
	margin-bottom: 0.5rem;
}
.ccc-nav-cart .woocommerce-mini-cart__empty-message {
	color: #6b6a64;
	font-size: 0.85rem;
	padding: 0.5rem 0;
}
.ccc-nav-cart ul.cart_list,
ul.ccc-acct-olist { list-style: none; margin: 0; padding: 0; }

/* ---- 0.66.0 Cart line item: 4 rows ----------------------------------- *
 * thumb | body, where body stacks: title+count / Material+coin / stepper+
 * trash / SKU. min-width:0 on the body lets the long SKU wrap instead of
 * collapsing the column. */
.ccc-nav-cart ul.cart_list li.ccc-cart-item,
ul.ccc-acct-olist li.ccc-cart-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid #efeadd;
	font-size: 0.78rem;
	line-height: 1.3;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-thumb { flex: 0 0 46px; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-thumb img {
	width: 46px !important;
	height: 46px !important;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
	display: block;
}

/* CSTM badge over cart / mini-cart thumbnails (2026-07, relocated from
   storefront.css so it loads site-wide -- the mini-cart is a frame component
   and appears on the /conceptstudio route, where product-only storefront.css
   never loads; the coin now renders consistently everywhere the badge shows). */
.ccc-thumbwrap { position: relative; display: inline-block; line-height: 0; }
.ccc-cstm-badge {
	position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
	background: var(--forest, #2e5339); color: #fff; font-size: 9px; font-weight: 700;
	letter-spacing: .06em; line-height: 1; padding: 3px 7px; border-radius: 999px;
	pointer-events: none;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-body { flex: 1 1 auto; min-width: 0; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-row + .ccc-ci-row { margin-top: 0.28rem; }

/* Row 1: title (truncated, one line) | trash <-> update (one slot) | counter. */
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ccc-ink, #2d2d2d);
	text-decoration: none;
	font-weight: 600;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-title:hover { color: var(--ccc-green-dark, #385c38); }

/* Trash + inline Update share the slot just left of the counter: trash by
 * default, Update when the line has a staged change (it "covers" the trash).
 * Update commits ALL staged lines in one shot. */
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #9a8f86;
	border-radius: 5px;
	text-decoration: none;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-remove:hover { color: #b0392f; background: #f6ecea; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-remove svg { display: block; }
.ccc-nav-cart .ccc-cart-item.is-changed .ccc-ci-remove { display: none; }

.ccc-nav-cart .ccc-cart-lineupdate {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--ccc-moss, #799268);
	color: #fff;
	cursor: pointer;
}
.ccc-nav-cart .ccc-cart-lineupdate:hover { background: var(--ccc-green-dark, #385c38); }
.ccc-nav-cart .ccc-cart-lineupdate[aria-busy="true"] { opacity: 0.6; cursor: default; }
.ccc-nav-cart .ccc-cart-item.is-changed .ccc-cart-lineupdate { display: inline-flex; }

/* Counter: free-form numeric input flanked by -/+ (digits only, max 9999).
 * Fixed width via --ccc-ctrl-w so it column-aligns with the material pill. */
.ccc-nav-cart .ccc-cart-step {
	flex: 0 0 var(--ccc-ctrl-w, 96px);
	width: var(--ccc-ctrl-w, 96px);
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #cfc8b6;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.ccc-nav-cart .ccc-cart-step button {
	flex: 0 0 24px;
	border: 0;
	background: #f3efe3;
	color: var(--ccc-green-dark, #385c38);
	width: 24px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.ccc-nav-cart .ccc-cart-step button:hover { background: #e7e1cf; }
.ccc-nav-cart input.ccc-cart-qty {
	flex: 1 1 auto;            /* fill the gap between the - and + buttons */
	width: auto;
	min-width: 0;
	height: auto;               /* Blocksy forces text inputs to 40px -- release it */
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0.1rem;          /* vertical padding counts on a form control -- keep it 0 */
	border: 0;
	background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: inherit;         /* 0.78rem from .ccc-cart-item */
	line-height: 1.3;           /* match the row so the stepper keeps its original height */
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-ink, #2d2d2d);
}
.ccc-nav-cart input.ccc-cart-qty:focus { outline: none; background: #fbf7ec; }

/* Row 2: Size (left) ---- coloured pill (right, same width as the counter so the
 * two stack into a clean right-edge column). SOLID pill = saved, LIGHTER = the
 * line has a pending staged change (Concept Studio's publish convention). */
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-mat-row { justify-content: flex-start; gap: 0.3rem; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-size-label { flex: 0 0 auto; color: #6b6a64; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-size {
	flex: 0 0 auto;
	color: var(--ccc-ink, #2d2d2d);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-right: auto;        /* hugs the label; absorbs the slack so only the pill sits right */
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-size--cstm { font-weight: 400; font-size: 0.85em; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-coin {
	flex: 0 0 var(--ccc-ctrl-w, 96px);
	width: var(--ccc-ctrl-w, 96px);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;     /* text centred in the pill */
	text-align: center;
	padding: 0.12rem 0.4rem;
	border-radius: 999px;
	background: var(--ccc-coin, #c9bfa6);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ccc-nav-cart .ccc-cart-item.is-changed .ccc-ci-coin {
	background: color-mix(in srgb, var(--ccc-coin, #c9bfa6) 42%, #fff);
	color: var(--ccc-ink, #2d2d2d);
}

/* Row 3: discount note (reg -> discounted unit) ---- line total, right. */
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-price-row { justify-content: space-between; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-disc {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.6rem;
	line-height: 1.3;
	color: #8a857b;
	font-variant-numeric: tabular-nums;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-disc-sep { color: #c3beb4; padding: 0 0.15rem; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-disc-now { color: #2f6b3f; font-weight: 600; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-v-pct { font-weight: 700; }
/* Row 4: SKU on its own line (truncates). */
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-sku-row { justify-content: flex-start; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-sku {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.68rem;
	color: #8a857b;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-sku--cstm { font-style: italic; }
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-linetotal {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ccc-ink, #2d2d2d);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-linetotal .woocommerce-Price-amount,
:is(.ccc-nav-cart, .ccc-cart-meta, .ccc-acct-olist) .ccc-ci-linetotal .amount { color: inherit; font-weight: inherit; }

/* A line with a staged (uncommitted) change reads slightly warmer. */
.ccc-nav-cart .ccc-cart-item.is-changed { background: #fbf7ec; }

/* --- Free-shipping nudge (2026-08). Quiet by design: brand voice says no
 *     shouting -- small type, brand green, no background, no exclamation.
 *     One class, three surface modifiers. --- */
.ccc-freeship-nudge {
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--ccc-green-dark, #385c38);
	text-align: center;
}
/* Below threshold the nudge carries weight; once qualified it relaxes. */
.ccc-freeship-nudge.is-away { font-weight: 600; }
.ccc-freeship-nudge.is-qualified { font-weight: 400; }
/* --- Ship-estimate label (Rev B). Same quiet register as the nudge:
 *     one line, brand green, centered, slightly heavier than the nudge
 *     because it is the promise, not the upsell. --- */
.ccc-shipest {
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--ccc-green-dark, #385c38);
	text-align: center;
	font-weight: 600;
}
.ccc-shipest--nav {
	margin: 0.1rem 0 0.05rem;
}
.ccc-shipest--cartpage {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
}

/* Nav mini-cart: tucked directly under the subtotal row. */
.ccc-freeship-nudge--nav {
	margin: -0.25rem 0 0.35rem;
}
/* Classic cart page: sits above the table header, breathing room below. */
.ccc-freeship-nudge--cartpage {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
}
/* Block checkout: lives inside the coupon row of the order summary. */
.ccc-freeship-nudge--checkout {
	padding: 0 16px 12px;
	font-size: 0.85rem;
}
.ccc-nav-cart .woocommerce-mini-cart__total {
	padding: 0.6rem 0;
	font-size: 0.85rem;
	border-top: 1px solid #e2ddcf;
	margin-top: 0.3rem;
}
.ccc-nav-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	padding: 0.2rem 0 0.6rem;
}
.ccc-nav-cart .woocommerce-mini-cart__buttons .button {
	display: block;
	text-align: center;
	padding: 0.55rem 0;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}
.ccc-nav-cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: none;
	color: var(--ccc-green-dark, #385c38);
	border: 1.5px solid var(--ccc-green-dark, #385c38);
}
.ccc-nav-cart .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--ccc-moss, #799268);
	color: #fff;
	border: 1.5px solid var(--ccc-moss, #799268);
}
.ccc-nav-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--ccc-green-dark, #385c38);
	border-color: var(--ccc-green-dark, #385c38);
	color: #fff;
}

/* ---- Tree ---- */
.ccc-tree,
.ccc-tree ul { list-style: none; margin: 0; padding: 0; }

/* Family header: a toggle button wearing the old label's clothes. */
.ccc-fam-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	margin: 1rem 0 0.35rem;
	padding: 0.15rem 0.45rem 0.15rem 0;
	background: none;
	border: 0;
	border-radius: 6px;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ccc-fam:first-child .ccc-fam-toggle { margin-top: 0; }
/* 0.63.1: selection language is the UNDERLINE, not background paint.
 * Decoration lives on the label spans -- text-decoration does not propagate
 * into flex items, so decorating the flex container renders nothing. */
.ccc-fam-label {
	display: block;
	font-weight: 750; /* 0.63.1: operator-calibrated live in DevTools */
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ccc-ink, #2d2d2d); /* 0.63.4: ink everywhere; green is reserved for hover/selection */
	transition: color 0.15s ease;
}
.ccc-fam-toggle:hover .ccc-fam-label {
	color: var(--ccc-green-dark, #385c38); /* 0.63.4: one hover language, top to bottom */
	text-decoration: underline;
	text-decoration-color: var(--ccc-green-dark, #385c38);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Chevron: points right closed, rotates down open. Shared by families + nodes. */
.ccc-chev-icon {
	flex: 0 0 auto;
	opacity: 0.55;
	transition: transform 0.18s ease;
}
.ccc-fam.is-open > .ccc-fam-toggle .ccc-chev-icon { transform: rotate(90deg); }
.ccc-node.is-open > .ccc-node-row .ccc-node-chev .ccc-chev-icon { transform: rotate(90deg); }

/* Collapse rules: closed drawers hide their children. Server pre-opens the
 * active path (is-open classes in markup); JS toggles after load. */
.ccc-fam:not(.is-open) > .ccc-fam-children { display: none; }
.ccc-node.has-kids:not(.is-open) > .ccc-children { display: none; }

/* Split affordance row: label navigates, chevron toggles. */
.ccc-node-row { display: flex; align-items: stretch; }
.ccc-node-row .ccc-node-link { flex: 1 1 auto; min-width: 0; }
.ccc-node-chev {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 0.45rem;
	background: none;
	border: 0;
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
}
.ccc-node-chev:hover { background: rgba(0, 0, 0, 0.07); }

.ccc-node-link {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.28rem 0.45rem;
	border-radius: 6px;
	text-decoration: none;
	color: var(--ccc-ink, #2d2d2d); /* 0.63.2: ink for content, green for structure --
	 * a dense tree needs the registers separated: green caps = families,
	 * black = browsable nodes, green underline = pointing/selected. */
	transition: color 0.15s ease;
}
.ccc-node-link:hover { color: var(--ccc-green-dark, #385c38); }
.ccc-node-link:hover .ccc-node-label {
	text-decoration: underline;
	text-decoration-color: var(--ccc-green-dark, #385c38);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* 0.63.1: pill retired -- dark paint + white text was hard to read and the
 * weight bump made the active node outgrow its own family header. Selection
 * is now the same quiet underline, anchored in the dark green. */
.ccc-node.is-active > .ccc-node-link,
.ccc-node.is-active > .ccc-node-row .ccc-node-link {
	color: var(--ccc-green-dark, #385c38);
	font-weight: 600;
}
.ccc-node.is-active > .ccc-node-link .ccc-node-label,
.ccc-node.is-active > .ccc-node-row .ccc-node-link .ccc-node-label {
	text-decoration: underline;
	text-decoration-color: var(--ccc-green-dark, #385c38);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.ccc-node-count {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	opacity: 0.6;
}
.ccc-node.is-active > .ccc-node-link .ccc-node-count,
.ccc-node.is-active > .ccc-node-row .ccc-node-link .ccc-node-count { opacity: 0.7; }
.ccc-children {
	margin-left: 0.7rem !important;
	padding-left: 0.5rem !important;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.ccc-l3 .ccc-node-label { font-size: 0.9rem; }

/* ---- Home marketing card ---- */
/* The transition exists for the JS slide-away on nav-out; height is pinned
 * inline by JS. */
.ccc-home-card {
	overflow: hidden;
	margin: 0 0 1.5rem;
	transition: height 0.28s ease, opacity 0.28s ease, margin 0.28s ease;
}
.ccc-home-card.is-leaving { opacity: 0; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
	.ccc-home-card { transition: none; }
	body.ccc-frame #main-container { transition: none; }
	.ccc-nav-frame { transition: none; }
}

/* ---- Content grid (home merch strip) ---- */
.ccc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.5rem;
}
.ccc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ccc-card-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--theme-palette-color-6, #f2f5f7);
}
.ccc-card-media { padding: 6%; box-sizing: border-box; }
.ccc-card-media img {
	width: 100%; height: 100%;
	object-fit: contain; display: block; /* never crop the shape -- it IS the product */
	transition: transform 0.25s ease;
}
.ccc-card:hover .ccc-card-media img { transform: scale(1.03); }
.ccc-card-body { padding: 0.6rem 0.1rem 0; }
.ccc-card-title {
	margin: 0 0 0.2rem;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.25;
	/* Uniform two-line slot: one-line titles reserve the space, longer titles
	 * clamp -- prices align across the row either way. */
	min-height: calc(2 * 1.25em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ccc-card-price { font-size: 0.9rem; opacity: 0.85; }
.ccc-browse-empty { opacity: 0.7; padding: 2rem 0; }

/* ---- Mobile / portrait-tablet (<=1024, raised from 782 on 2026-08-02 to
   close the band where the desktop rail squeezed the stacked configurator):
   stack naturally full-width; the tab concept doesn't apply ---- */
@media (max-width: 1024px) {
	body.ccc-frame #main-container { display: block; }
	.ccc-nav-frame { margin: 1rem; }
	body.ccc-nav-collapsed .ccc-nav-frame {
		padding: 0.5rem 0.6rem;
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	.ccc-nav-frame { align-self: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
	.ccc-nav-railwrap { position: static; height: auto; } /* 0.66.7: the desktop sticky wrapper must NOT pin on mobile, or the tab floats over content */
	.ccc-nav-tabs { position: static; margin: 0; display: block; }
	.ccc-nav-frame .ccc-nav-tree { width: auto; margin: 0; padding: 0 0.9rem 0.75rem; } /* 0.63.4: breathing room off the card edge */
	.ccc-nav-frame .ccc-nav-tree { position: static; overflow: clip; transition: max-height 0.32s ease, opacity 0.2s ease; }
	/* 0.79.0-pdp-searchcard (2026-07-03): the product/studio searchcard
	 * instance (echoed by render_pdp_search) is a MOBILE affordance --
	 * desktop already has the site-wide spine -- so the wrapper is hidden
	 * at desktop (rule beside the base searchcard styles) and shown here. */
	/* 0.79.2: sticky lives on the WRAPPER. The inner card's own sticky rule
	 * is inert here -- a sticky element only sticks within its containing
	 * block, and the wrapper is exactly the card's height (zero headroom).
	 * The wrapper's containing block is the tall page flow, so it sticks. */
	.ccc-searchcard-pdpwrap { display: block; margin: 0 1rem; position: sticky; top: 0; z-index: 55; }
	/* WP's bar is 32px above 782 and 46px at/below it; this block now spans
	   both tiers, so the operator-only offset splits. Customers have no bar. */
	.admin-bar .ccc-searchcard-pdpwrap { top: 32px; }
	@media (max-width: 782px) { .admin-bar .ccc-searchcard-pdpwrap { top: 46px; } }
	/* 0.78.0-mobile-sticky-nav (2026-07-03): the collapsed toolbar itself now
	 * rides sticky on mobile, mirroring the desktop rail behaviour. The
	 * railwrap stays static (the 0.66.7 float-over bug) -- stickiness lives
	 * on the FRAME, the mechanism 0.77.0 already proved safe for the open
	 * state. The collapsed frame is transparent; the pill buttons carry
	 * their own backgrounds, matching the desktop look. Operator-only
	 * admin-bar offset mirrors the existing convention (46px at <=782px). */
	/* 0.85.0: 0.78.0's frame-sticky retired -- the collapsed frame is
	 * display:none on mobile since 0.83.2, so these rules pinned nothing.
	 * The pinned mobile bar is the lifted searchcard (.ccc-mbar, EOF). */
	/* 0.77.0-nav-pin: when Browse is open on mobile, pin the nav pane to the top
	 * of the viewport (like the sticky search toolbar) so the catalog map is in
	 * view at once instead of up-page. Sticky keeps the flow space: opening at the
	 * top still pushes content down (the existing accordion), opening mid-scroll
	 * pins it at top:0 as a drawer. (Logged-in operators: the WP admin bar may
	 * overlap the top ~46px in preview; logged-out customers have no bar.) */
	body.ccc-nav-browse .ccc-nav-frame {
		position: sticky;
		top: 0;
		margin: 0;
		z-index: 60;
		max-height: 85vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--theme-palette-color-8, #ffffff);
		border-bottom: 3px solid var(--ccc-moss, #799268);
		box-shadow: 0 10px 26px rgba(20, 40, 30, 0.18);
	}
	/* Mobile keeps the existing Browse-only accordion. The Cart tab + folder are
	 * a desktop spine feature; on mobile the header cart serves, so hide them and
	 * neutralize the desktop slide transforms. */
	.ccc-nav-tab--cart { display: none; }
	/* 0.80.1: the in-drawer Account tab hides like the Cart tab -- the
	 * sticky-bar Account button is the mobile door. */
	.ccc-nav-tab--account { display: none; }
	/* 0.80.2: in the account state the drawer shows ONLY the account panel --
	 * the full-width Browse pill at its top read as clutter. */
	body.ccc-nav-account .ccc-nav-tab--browse { display: none; }

	/* ---- 0.80.2: the account panel is a right-side SLIDE-OVER drawer on
	 * mobile (the desktop pane's file-drawer language, adapted) -- not the
	 * browse accordion's top-down push. Fixed overlay, ~86vw capped at
	 * 360px, sliding in from the right; the ::before scrim dims the page
	 * and (being the frame's own pseudo) reports taps as the frame element,
	 * which browse.js reads as close. */
	body.ccc-nav-account .ccc-nav-frame {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(86vw, 360px);
		height: 100%;
		max-height: none;
		margin: 0;
		z-index: 80;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--theme-palette-color-8, #ffffff);
		border-left: 3px solid var(--ccc-moss, #799268);
		box-shadow: -12px 0 30px rgba(20, 40, 30, 0.25);
		animation: ccc-acct-slidein 0.26s ease;
	}
	body.ccc-nav-account .ccc-nav-frame::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(30, 40, 30, 0.28);
		z-index: -1;
	}
	.ccc-nav-folders { display: block; width: auto; position: static; max-height: none; overflow: visible; }
	.ccc-nav-cart { display: none; }
	/* 0.80.1: mobile linearizes the folder grid, so without state gating the
	 * account folder rendered IN FLOW beneath the tree. Same policy as the
	 * cart folder: hidden by default, shown only in its own body state. */
	.ccc-nav-folders .ccc-nav-account { display: none; }
	body.ccc-nav-account .ccc-nav-folders .ccc-nav-account { display: block; }
	/* ...and the TREE hides in the account state the same way the collapsed
	 * state hides it (size + visibility -- the mobile opacity:1 !important on
	 * folders cannot defeat this). padding zeroed or the ghost box keeps its
	 * flow space while invisible. */
	body.ccc-nav-account .ccc-nav-frame .ccc-nav-tree {
		width: 0;
		height: 0;
		padding: 0;
		overflow: hidden;
		visibility: hidden;
	}
	.ccc-nav-folder { transform: none !important; opacity: 1 !important; transition: none; max-height: none; overflow: visible; }
	body.ccc-nav-collapsed .ccc-nav-tree,
	body.ccc-nav-cart .ccc-nav-tree,
	body.ccc-nav-browse .ccc-nav-tree,
	body.ccc-nav-account .ccc-nav-tree { transform: none; }
	.ccc-nav-tab {
		position: static;
		width: 100%;
		margin: 0 0 0.5rem;
		padding: 0.45rem 0.4rem;
		border: 0;
		border-radius: 6px;
		box-shadow: none;
		background: none;
		color: inherit;
	}
	.ccc-nav-tab-grip {
		position: static;
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.45rem;
		padding: 0;
	}
	.ccc-nav-tab-label { writing-mode: horizontal-tb; color: inherit; }
	/* 0.63.4: the desktop tab's solid-fill hover leaked into mobile, resurrecting
	 * the hard-to-read green pill. Mobile speaks the tree's quiet language. */
	.ccc-nav-tab:hover { background: none; color: var(--ccc-green-dark, #385c38); }
	body.ccc-nav-browse .ccc-nav-tab--browse { background: none; color: var(--ccc-green-dark, #385c38); }
	.ccc-nav-tab:hover .ccc-nav-tab-label {
		text-decoration: underline;
		text-decoration-color: var(--ccc-green-dark, #385c38);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
	body.ccc-nav-collapsed .ccc-nav-tab { margin: 0; }

	/* 0.62.0: mobile BROWSE bar wears the desktop moss/dark-green treatment
	 * (reverses the earlier quiet-text styling). Moss at rest, dark-green when
	 * the tree is open or on hover; white label + icon for contrast. The tree
	 * below stays on the white card so categories remain readable. */
	.ccc-nav-tab--browse {
		background: var(--ccc-moss, #799268);
		color: #fff;
		border-radius: 8px;
	}
	.ccc-nav-tab--browse .ccc-nav-tab-label { color: #fff; }
	.ccc-nav-tab--browse:hover {
		background: var(--ccc-green-dark, #385c38);
		color: #fff;
	}
	.ccc-nav-tab--browse:hover .ccc-nav-tab-label {
		color: #fff;
		text-decoration: none;
	}
	body.ccc-nav-browse .ccc-nav-tab--browse {
		background: var(--ccc-green-dark, #385c38);
		color: #fff;
	}

	/* ---- Mobile nav DRAWER (0.63.0) -------------------------------------
	 * Home / no active node -> only the moss BROWSE bar; tree slid shut.
	 * Tap BROWSE -> the full family tree slides open.
	 * Landed on a node -> the tree shows the ACTIVE FAMILY branch only (the
	 * sibling families are hidden), pre-expanded to the selected node. Tap
	 * BROWSE to bring the full family list back. JS starts the drawer collapsed
	 * at this width; the existing Browse-tab toggle flips it open. */

	/* No white card -- just the moss bar floating. */
	.ccc-nav-frame {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	/* Center the bar's icon + label. */
	.ccc-nav-tab--browse .ccc-nav-tab-grip { width: 100%; justify-content: center; }

	/* ---- Mobile nav: 75vw SIDE PANEL (0.64.0) -- RETIRED 0.83.2 --------
	 * Superseded by the 0.77.0-nav-pin sticky top-down drawer, but the rule
	 * was never removed. Its selector (two body classes) outranked the
	 * mobile linearize rule (one class), so every Browse-open on mobile
	 * re-entered a desktop-style grid: the 0.77 drawer (sticky, 85vh)
	 * rendered squeezed into a 75vw side column beside squished content --
	 * two generations of design fighting in one viewport. Retiring the grid
	 * lets #main-container stay display:block (the linearize rule), so the
	 * frame flows full-width and the 0.77 drawer behaves as documented:
	 * pinned top, content pushed below. The tree-show override below is
	 * generation-independent and stays. */
	/* Show the full tree in the open panel (override the base collapse-hide):
	 * natural height, the page scrolls -- no cap to clip a long family. */
	body.ccc-nav-browse .ccc-nav-tree {
		width: auto;
		height: auto;
		visibility: visible;
		max-height: none;
		opacity: 1;
		overflow: visible;
	}
	/* Content drops to ONE product column while the nav holds 75vw. */
	body.ccc-frame.ccc-nav-browse ul.products {
		grid-template-columns: 1fr;
	}
	/* Labels truncate with an ellipsis instead of wrapping -- any width stays
	 * single-line and interpretable (no row-height displacement). */
	.ccc-node-label {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ccc-fam-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ---- Browse moved inline (0.65.0) ----------------------------------
	 * CLOSED: the whole nav frame (and its old top bar) is hidden; Browse lives
	 * beside the search field instead. OPEN: the frame returns as the 75vw pane,
	 * and its top moss bar is the collapse control (tap to close). */
	body.ccc-nav-collapsed .ccc-nav-frame { display: none; }
	.ccc-searchcard {
		display: flex; align-items: stretch; gap: 0.5rem;
		position: sticky; top: 0; z-index: 50;   /* pin Browse+cart+search to the top */
		background: #f1eee4;                      /* page cream so content does not bleed through */
		padding: 8px 0;
		margin: 0 0 0.5rem;
	}
	.ccc-searchcard-form { flex: 1 1 auto; min-width: 0; }
	body.ccc-frame .ccc-search-browse {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		height: 40px;
		padding: 0 0.9rem;
		background: var(--ccc-moss, #799268);
		color: #fff;
		border: 0;
		border-radius: 10px;
		font: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
		transition: background 0.15s ease;
	}
	.ccc-search-browse svg { flex: 0 0 auto; }
	/* Mobile cart button: Browse-button height, right end of the row, live qty
	 * badge, jumps on add (is-bumped). */
	body.ccc-frame .ccc-search-cart {
		flex: 0 0 auto; position: relative;
		display: inline-flex; align-items: center; justify-content: center;
		height: 40px; width: 44px; border-radius: 8px;
		background: var(--ccc-moss, #799268); color: #fff; text-decoration: none;
	}
	body.ccc-frame .ccc-search-cart:hover { background: var(--ccc-green-dark, #385c38); }
	body.ccc-frame .ccc-search-cart-badge {
		position: absolute; top: -5px; right: -5px;
		min-width: 18px; height: 18px; padding: 0 4px;
		border-radius: 999px; background: var(--ccc-green-dark, #385c38);
		color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px;
		text-align: center; box-sizing: border-box;
	}
	body.ccc-frame .ccc-search-cart-badge[aria-hidden="true"] { display: none; }
	.ccc-search-browse:hover,
	body.ccc-nav-browse .ccc-search-browse { background: var(--ccc-green-dark, #385c38); }

	/* ---- 0.80.0: Account button on the mobile bar (cart-button chrome;
	 * bronze signed-in chip rides the corner like the rail tab's). ---- */
	body.ccc-frame .ccc-search-acct {
		flex: 0 0 auto; position: relative;
		display: inline-flex; align-items: center; justify-content: center;
		height: 40px; width: 44px; border-radius: 8px;
		background: var(--ccc-moss, #799268); color: #fff; text-decoration: none;
		border: 0; font: inherit; cursor: pointer;
	}
	body.ccc-frame .ccc-search-acct:hover,
	body.ccc-nav-account .ccc-search-acct { background: var(--ccc-green-dark, #385c38); }
	body.ccc-frame .ccc-search-acct .ccc-nav-tab-mark { right: -4px; bottom: -4px; }

	/* ---- 0.80.0: expanding search. Default: icon only, justified right;
	 * the field is hidden. Open: the form overlays the whole bar row. ---- */
	.ccc-searchcard { position: relative; }
	.ccc-searchcard-form { flex: 0 0 auto; margin-left: auto; }
	.ccc-searchcard-input { display: none; }
	.ccc-searchcard.is-search-open .ccc-searchcard-form {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		gap: 0.35rem;
		background: #fff;
		border: 1px solid rgba(121, 146, 104, 0.5);
		border-radius: 10px;
		padding: 0 0.4rem;
		z-index: 4;
		margin: 0;
	}
	.ccc-searchcard.is-search-open .ccc-searchcard-input {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 0.85rem;
		border: 0;
		background: transparent;
	}
	.ccc-searchcard.is-search-open .ccc-searchcard-input:focus { outline: none; }

	/* Pre-paint flash guard (0.66.0) retired 2026-08-02: the server renders
	 * collapsed by default now, so there is no open-pane flash to hide. */

	/* ---- Card fit for 2-up mobile (0.69.0) ----------------------------
	 * Single row: the material label and the stepper share one line. The stepper
	 * holds 50% of the card; the label takes the rest and ellipsis-truncates only
	 * if a name exceeds its half. The base -16px coin tuck stays (the intended
	 * in-row overlap seam). A compact label font keeps "X Baltic Birch" legible in
	 * its half. (body.ccc-frame prefix beats the later base card rules.) */
	body.ccc-frame .ccc-ms-mat { font-size: 0.72rem; }
	body.ccc-frame .ccc-card-chip { display: none; }   /* 0.71.0: mobile shows title only -- drop the size chip */
	/* Action buttons: drop the 7.5em floor + trim a touch so two share the row. */
	body.ccc-frame .ccc-card-qa { min-width: 0; }
	body.ccc-frame .ccc-card-qa,
	body.ccc-frame .ccc-card-view {
		font-size: 0.74rem;
		padding: 5px 6px;
		min-height: 36px;
	}
}

/* ------------------------------------------------------------------ *
 *  View modes -- 0.63.0. Catalog = the lean stock loop; Cards = the
 *  enhancement layer (next slice). One substrate, CSS-scoped layers.
 * ------------------------------------------------------------------ */
.ccc-view-toggle {
	float: right;
	display: inline-flex;
	margin: 0 1.25rem 0 0;
	border: 1px solid var(--ccc-moss, #799268);
	border-radius: 999px;
	overflow: hidden;
}
.ccc-view-btn {
	margin: 0;
	padding: 0.28rem 0.85rem;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 0.8rem;
	color: var(--ccc-green-dark, #385c38);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ccc-view-btn:hover { background: rgba(121, 146, 104, 0.15); }
.ccc-view-btn.is-active {
	background: var(--ccc-moss, #799268);
	color: #fff;
}
/* Catalog mode: the quick-add now renders in full (Quick add toggle + View
 * Product), identical to the related-products treatment. storefront.css/js both
 * load on the shop/archive (is_shop || is_product_taxonomy), so the toggle is
 * already styled and the panel JS is already wired -- nothing to port. */


/* ===================================================================== *
 *  0.64.0-card-slice -- trading-card chrome (5:7), Cards mode + home strip
 *  Catalog mode is untouched. Brand tokens: --ccc-green-dark / --ccc-moss
 *  / --ccc-ink (defined on body.ccc-frame above). One hover language: moss
 *  at rest, green-dark on hover/active. No background paint beyond whisper
 *  family tints (added later as a pure-CSS slice).
 * ===================================================================== */

/* The legacy .ccc-card-title 2-line clamp is fine for the strip; the grid
 * card overrides to a 1-line clamp below. Shared base stays as-is. */

/* ---- Cards-mode grid: our card replaces the stock tile innards --------- */
/* Two contexts share one stylesheet: the shop loop (body.ccc-view-cards
 * ul.products) and the home page (.ccc-content ul.products), so home renders
 * the IDENTICAL card grid -- banner above, same cards below. Home does not
 * depend on the view cookie. */
body.ccc-view-cards ul.products,
.ccc-content ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
/* Mobile: guarantee at least two cards per row. auto-fill drops to a single
 * 240px track below ~480px; force two equal tracks (tighter gap to fit). This
 * sits AFTER the base rule so it wins on source order at <=600px. */
@media (max-width: 600px) {
	body.ccc-view-cards ul.products,
	.ccc-content ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	/* 0.70.0: compact the card so a true phone-width half (~170px) fits cleanly,
	 * Etsy-style. minmax(0,1fr) above lets the track shrink below the card's
	 * min-content; these reduce that min-content so nothing overflows sideways:
	 * shorter image, smaller title, and the two CTAs STACK instead of fighting for
	 * a side-by-side row that can't fit. (body.ccc-frame beats the later base.) */
	body.ccc-frame .ccc-card--grid { padding: 10px; }                 /* less bleed */
	body.ccc-frame .ccc-card--grid .ccc-card-media { aspect-ratio: 1 / 1; padding: 3%; } /* maximize image */
	body.ccc-frame .ccc-card--grid .ccc-card-title { font-size: 0.86rem; }
	body.ccc-frame .ccc-card-actions { flex-direction: column; gap: 6px; }
}
/* Cap the natural card width so a 1-2 product result doesn't stretch a track
 * to half the viewport. auto-fill leaves empty tracks instead of inflating. */
body.ccc-view-cards ul.products li.product,
.ccc-content ul.products li.product {
	list-style: none;
	margin: 0;
	max-width: 320px;
	width: 100%;
	float: none;          /* Blocksy floats loop items; grid needs them unfloated */
	display: flex;        /* let the card fill the row-stretched li */
}
/* The card fills its li so every card in a row matches height; the art window
 * (flex:1) absorbs the slack -- lighter stat blocks get a taller picture. */
body.ccc-view-cards ul.products li.product > .ccc-card--grid,
.ccc-content ul.products li.product > .ccc-card--grid {
	width: 100%;
	height: 100%;
}
/* Suppress any stock tile bits that slip past the buffer (defensive). */
body.ccc-view-cards ul.products li.product > a.woocommerce-LoopProduct-link,
body.ccc-view-cards ul.products li.product > .button,
body.ccc-view-cards ul.products li.product > .price,
body.ccc-view-cards ul.products li.product > .woocommerce-loop-product__title {
	display: none;
}

/* ---- The card shell ---------------------------------------------------- */
.ccc-card--grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Height follows content. The art window (below) carries the picture's
	 * generous proportion; the stat block never gets pushed out of the box. */
	background: #faf7f0;
	border: 1px solid #c0b49a;
	border-radius: 14px;
	padding: 18px;
	box-sizing: border-box;
	color: var(--ccc-ink, #2d2d2d);
	text-decoration: none;
	text-align: left;
}
/* Every stat block spans the full inner width of the card. */
.ccc-card--grid > .ccc-card-moveset,
.ccc-card--grid > .ccc-card-pill,
.ccc-card--grid > .ccc-card-typeline,
.ccc-card--grid > .ccc-card-media { width: 100%; box-sizing: border-box; }

/* Title row + size chip */
.ccc-card--grid .ccc-card-head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: none;
	margin-bottom: 8px;
}
.ccc-card--grid .ccc-card-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ccc-ink, #2d2d2d);
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* override the strip's 2-line slot */
	min-height: 0;
	-webkit-line-clamp: unset;
	display: block;
}
.ccc-card--grid .ccc-card-title:hover {
	color: var(--ccc-green-dark, #385c38);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ccc-card-chip {
	flex: none;
	background: var(--ccc-green-dark, #385c38);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Art window -- the flex region; grows when the stat block is light */
.ccc-card--grid .ccc-card-media {
	flex: none;
	aspect-ratio: 1 / 1;         /* fixed square window: every image the same size,
	                                regardless of pill / move-set height below */
	width: 100%;
	border: 2px solid var(--ccc-moss, #799268);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease;
}
.ccc-card--grid:hover .ccc-card-media { border-color: var(--ccc-green-dark, #385c38); }
.ccc-card--grid .ccc-card-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;       /* never distort the silhouette -- it IS the product */
	transform: none;
}
.ccc-card--grid:hover .ccc-card-media img { transform: none; }  /* no zoom; animation handles hover */
.ccc-card--grid .ccc-card-media { position: relative; }
.ccc-card--grid .ccc-card-media video,
.ccc-card--grid .ccc-card-media .ccc-card-anim {
	position: absolute;
	top: 8px; left: 8px; right: 8px; bottom: 8px;   /* inside the frame padding */
	width: auto; height: auto;
	max-width: calc(100% - 16px); max-height: calc(100% - 16px);
	margin: auto;
	object-fit: contain;
	display: block;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.ccc-card--grid .ccc-card-media.ccc-anim-on .ccc-card-anim { opacity: 1; }

/* Classification band -- fused to the art frame's bottom edge */
.ccc-card-typeline {
	flex: none;
	border: 2px solid var(--ccc-moss, #799268);
	border-radius: 0 0 6px 6px;
	background: #eef0e6;
	padding: 3px 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition: border-color 0.2s ease;
}
.ccc-card--grid:hover .ccc-card-typeline { border-color: var(--ccc-green-dark, #385c38); }
.ccc-tl-detail {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ccc-green-dark, #385c38);
}

/* Flavor pill -- left, italic, muted, one line */
.ccc-card-pill {
	flex: none;
	margin-top: 7px;
	min-height: 1.05rem;     /* reserve the line whether filled or empty, so the
	                            art window is the same height on every card */
	font-size: 0.74rem;
	font-style: italic;
	color: #5f5e5a;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccc-card-pill--empty { min-height: 1.05rem; }

/* Move set -- name | coin grid */
.ccc-card-moveset {
	flex: none;
	margin-top: 9px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 0.74rem;
}
/* Two pills per material row: a short half-tone LABEL whose right end slides
 * UNDER the larger size/cost COIN (so it reads as nesting behind it), plus the
 * coin itself -- same shape as before, just repainted in the material's hue.
 * Every shade derives from the single --ms-base the renderer stamps inline,
 * which is the SAME value the cart pill uses (storefront material_color()). */
.ccc-ms-row {
	--ms-dark: color-mix(in srgb, var(--ms-base, #c9bfa6), #000 35%);
	--ms-half: color-mix(in srgb, var(--ms-base, #c9bfa6), #fff 60%);
	--ms-deep: color-mix(in srgb, var(--ms-base, #c9bfa6), #000 50%);
	display: flex;
	flex-wrap: wrap;              /* barbell stacks onto its own line under the label */
	align-items: center;
	row-gap: 5px;
	font-variant-numeric: tabular-nums;
}
/* Material LABEL: its own pill, ~2/3 the coin height, half-tone fill, dark
 * border, left-justified. Sits BEHIND the coin (z-index 0); its right end tucks
 * under the coin via the coin's negative left margin. Right padding keeps the
 * text clear of the tuck zone. */
.ccc-ms-mat {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 19px;                 /* ~2/3 of the ~29px coin */
	display: flex;
	align-items: center;
	background: var(--ms-half);
	border: 1.5px solid var(--ms-dark);
	border-radius: 999px;
	color: var(--ms-deep);
	font-weight: 500;
	line-height: 1;
	padding: 0 20px 0 12px;       /* right pad reserves the tuck zone */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	z-index: 0;
}
/* Size/cost COIN: unchanged shape (bordered, rounded, two chambers), repainted.
 * Pulled left over the label's right end and lifted above it (z-index 1) so the
 * label disappears behind the white price chamber. */
/* Napkin barbell -- one pill per variant: white - cap | material-tinted center
 * (the label over "size | price") | white + cap. The caps stand a touch taller
 * than the center and ride over its ends. .ccc-ms-size / .ccc-ms-price live in
 * the center; the step JS queries them on the coin, so it is unchanged. */
.ccc-ms-coin {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	font-variant-numeric: tabular-nums;
	position: relative;
}
/* Material-tinted center: label on top, "size | price" beneath. Wide side
 * padding keeps the text clear of the caps that overlap its ends. */
.ccc-ms-center {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: var(--ms-half);
	border: 1.5px solid var(--ms-dark);
	border-radius: 10px;
	color: var(--ms-deep);
	padding: 2px 26px;
	position: relative;
	z-index: 0;
}
.ccc-ms-mat {                    /* lower line now: material label (NOT the old pill) */
	display: block;
	flex: 0 1 auto;
	max-width: 100%;
	background: none;
	border: 0;
	border-radius: 0;
	height: auto;
	padding: 0;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ms-deep);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccc-ms-mid {                    /* upper line now: size | price */
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ms-deep);
	white-space: nowrap;
}
.ccc-ms-dot { opacity: 0.5; }
.ccc-ms-price, .ccc-ms-size { color: inherit; white-space: nowrap; }
/* White caps ARE the buttons: left decrements, right increments. Taller than
 * the center, riding over its ends. */
.ccc-ms-dec, .ccc-ms-inc {
	appearance: none;
	flex: 0 0 auto;
	width: 34px;
	height: 46px;
	border-radius: 8px;
	background: #fff;
	border: 1.5px solid var(--ms-dark);
	color: var(--ms-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.ccc-ms-dec { margin-right: -16px; }
.ccc-ms-inc { margin-left: -16px; }
.ccc-ms-dec-glyph, .ccc-ms-inc-glyph { line-height: 1; }
.ccc-ms-dec-glyph.is-off, .ccc-ms-inc-glyph.is-off { visibility: hidden; }

/* Armed: deepen the center border + label; the caps stay white. */
.ccc-ms-coin.is-armed .ccc-ms-center { border-color: var(--ms-deep); }
.ccc-ms-coin.is-armed .ccc-ms-mat { color: var(--ms-deep); font-weight: 700; }

/* Mobile 2-up: shrink the barbell so two cards breathe on a phone. Prefixed
 * body.ccc-frame (0,2,0) so it beats the later base rules regardless of order. */
@media (max-width: 600px) {
	body.ccc-frame .ccc-ms-mat,
	body.ccc-frame .ccc-ms-mid { font-size: 0.68rem; line-height: 1.1; }
	/* Barbell sizes to its label and centers in the card (not full-width). */
	body.ccc-frame .ccc-ms-row { justify-content: center; }
	body.ccc-frame .ccc-ms-coin { flex: 0 1 auto; }
	body.ccc-frame .ccc-ms-center { flex: 0 1 auto; padding: 3px 18px; gap: 0; }
	/* Caps stand clearly taller than the label -> read as buttons, not one bar. */
	body.ccc-frame .ccc-ms-dec,
	body.ccc-frame .ccc-ms-inc { width: 30px; height: 42px; font-size: 1.1rem; border-radius: 7px; }
	body.ccc-frame .ccc-ms-dec { margin-right: -13px; }
	body.ccc-frame .ccc-ms-inc { margin-left: -13px; }
}

/* "Pick a size" nudge: a brief pulse on the coin. */
@keyframes ccc-ms-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.ccc-ms-nudge { animation: ccc-ms-pulse 0.45s ease; }
@media (prefers-reduced-motion: reduce) {
	.ccc-ms-nudge { animation: none; outline: 2px solid var(--ccc-green-dark, #385c38); outline-offset: 2px; }
}

/* Concept Studio row -- spans both columns */
.ccc-ms-cs {
	grid-column: 1 / -1;
	color: var(--ccc-green-dark, #385c38);
	font-weight: 600;
	padding-top: 2px;
	text-align: center;
}
.ccc-ms-cs-ico { font-style: normal; }
/* Concept Studio button: a real affordance (placeholder until CS goes live).
 * Full-width, quiet moss outline at rest, fills on hover. */
a.ccc-ms-cs-btn { text-decoration: none; }
.ccc-ms-cs-signin { font-size: 0.85em; opacity: 0.8; font-weight: 600; }
.ccc-ms-cs-btn {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 6px 10px;
	background: none;
	border: 1.5px solid var(--ccc-moss, #799268);
	border-radius: 8px;
	color: var(--ccc-green-dark, #385c38);
	font: inherit;
	font-weight: 600;
	font-size: 0.72rem; /* 0.86.5: trimmed -- one line on 2-up mobile cards */
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ccc-ms-cs-btn:hover, .ccc-ms-cs-btn:focus-visible {
	background: var(--ccc-moss, #799268);
	color: #fff;
}
/* coming-soon dress: quieter, non-interactive */
.ccc-ms-cs--soon {
	color: #6f7a64;
	font-weight: 500;
	font-style: italic;
	pointer-events: none;
}

/* Action row -- pinned at the card foot */
.ccc-card-actions {
	flex: none;
	display: flex;
	gap: 8px;
	margin-top: 10px;
	align-items: stretch;
}
.ccc-card-qa, .ccc-card-view {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 6px 8px;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
}
.ccc-card-qa, .ccc-card-view {
	background: var(--ccc-moss, #799268);
	color: #fff;
	border: 1.5px solid var(--ccc-moss, #799268);
}
.ccc-card-qa:hover, .ccc-card-view:hover {
	background: var(--ccc-green-dark, #385c38);
	border-color: var(--ccc-green-dark, #385c38);
	color: #fff;
}
/* Armed (a size is chosen): the action button settles on the hover green so
 * the engaged state reads as "ready"; label text never changes (static width). */
.ccc-card-qa.is-armed { background: var(--ccc-green-dark, #385c38); border-color: var(--ccc-green-dark, #385c38); }
/* did-add: a brief scale pulse on a successful add (feedback without a resize). */
@keyframes ccc-qa-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
.ccc-card-qa.did-add { animation: ccc-qa-pop 0.5s ease; }
/* is-bumped: the slight selection bounce when a coin's +/- is pressed. */
@keyframes ccc-qa-bump {
	0% { transform: translateY(0); }
	40% { transform: translateY(-3px); }
	100% { transform: translateY(0); }
}
.ccc-card-qa.is-bumped { animation: ccc-qa-bump 0.26s ease; }
/* Hold the button width so the "Added" text swap never resizes it. */
.ccc-card-qa { min-width: 7.5em; }
/* needs-pick: no size chosen -- a small attention shake, label unchanged. */
@keyframes ccc-qa-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}
.ccc-card-qa.needs-pick { animation: ccc-qa-shake 0.32s ease; }
@media (prefers-reduced-motion: reduce) {
	.ccc-card-qa.did-add, .ccc-card-qa.needs-pick, .ccc-card-qa.is-bumped { animation: none; }
	.ccc-card-qa.needs-pick { outline: 2px solid #fff; outline-offset: -3px; }
}
.ccc-card-view {
	background: none;
	color: var(--ccc-green-dark, #385c38);
	border: 1.5px solid var(--ccc-green-dark, #385c38);
}
.ccc-card-view:hover { background: #eef0e6; }

/* ---- Home strip subset: adopt the type band + pill, no actions/move set -- */
.ccc-card--strip .ccc-card-typeline,
.ccc-card--strip .ccc-card-pill { /* inherit the chrome above */ }
.ccc-card--strip .ccc-card-media {
	border: 3px solid var(--ccc-moss, #799268);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	transition: border-color 0.2s ease;
}
.ccc-card--strip:hover .ccc-card-media { border-color: var(--ccc-green-dark, #385c38); }
.ccc-card--strip .ccc-card-typeline { border-top: none; }

/* ---- Reduced motion: no hover animation swap (JS also guards) ---------- */
@media (prefers-reduced-motion: reduce) {
	.ccc-card--grid .ccc-card-media,
	.ccc-card--grid .ccc-card-typeline { transition: none; }
}

/* ---- Touch / no-hover: condensed, no hover affordances ----------------- */
@media (hover: none) {
	.ccc-card--grid:hover .ccc-card-media,
	.ccc-card--grid:hover .ccc-card-typeline { border-color: var(--ccc-moss, #799268); }
}


/* Cache/race guard: never show the grid card while body is in catalog view.
 * Excludes the home grid (.ccc-content) -- home always renders cards. */
body.ccc-view-catalog .ccc-card--grid { display: none; }
body.ccc-view-catalog .ccc-content .ccc-card--grid { display: flex; }

/* ============================================================
 *  Search bar -- content column, above the grid toolbar.
 *  Build 0.69.0-searchbar. Scope-aware, always shown, DISABLED
 *  when the scope holds too few products to be worth filtering.
 *  Native GET, no JS. Mobile: it sits at the top of the content
 *  column, so it stacks directly under the collapsed nav for free.
 *  .ccc-searchcard-more is the stub for the future filter panel.
 *  .ccc-searchcard-pdpwrap (0.79.0): product/studio wrapper, mobile-only --
 *  hidden at desktop below, shown inside the <=782px block.
 * ============================================================ */
/* 0.79.1: min-width media, NOT a bare rule -- the bare display:none sat
   later in the sheet than the mobile display:block and beat it at every
   width (equal specificity, source order wins). Non-overlapping media
   makes source order irrelevant.
   2026-08-02: the pair MUST move together -- the show-side went to <=1024
   (nav breakpoint raise) and this counterpart follows to >=1025. Leaving it
   at 783 recreated the exact overlap the pair was built to prevent: in
   783-1024 both matched and this hide won on source order (bar vanished). */
@media (min-width: 1025px) {
	.ccc-searchcard-pdpwrap { display: none; }
}
.ccc-searchcard {
	margin: 0 0 1rem;
}
.ccc-search-browse { display: none; } /* desktop: the left rail serves; shown only on mobile */
.ccc-search-cart   { display: none; } /* desktop: the rail cart serves; shown only on mobile */
.ccc-search-acct   { display: none; } /* desktop: the rail account tab serves; shown only on mobile */
/* "Added" jump for the cart button(s); badge still updates under reduced-motion. */
@keyframes ccc-cart-jump {
	0%   { transform: translateY(0)    scale(1);    }
	30%  { transform: translateY(-6px) scale(1.08); }
	55%  { transform: translateY(0)    scale(0.96); }
	100% { transform: translateY(0)    scale(1);    }
}
.ccc-search-cart.is-bumped,
.ccc-nav-tab--cart.is-bumped { animation: ccc-cart-jump 0.42s ease; }
@media (prefers-reduced-motion: reduce) {
	.ccc-search-cart.is-bumped,
	.ccc-nav-tab--cart.is-bumped { animation: none; }
}
.ccc-searchcard-form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 520px;
}
.ccc-searchcard-go {
	position: absolute;
	left: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ccc-green-dark, #385c38);
}
.ccc-searchcard-input {
	width: 100%;
	box-sizing: border-box;
	height: 40px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 14px 0 36px !important;
	border: 1px solid var(--ccc-moss, #799268) !important;
	border-radius: 10px !important;
	background: var(--theme-palette-color-8, #ffffff) !important;
	color: var(--ccc-ink, #2d2d2d) !important;
	font-size: 0.95rem !important;
	line-height: 1.3 !important;
}
.ccc-searchcard-input:focus {
	outline: none !important;
	border-color: var(--ccc-green-dark, #385c38) !important;
	box-shadow: 0 0 0 2px rgba(56, 92, 56, 0.16) !important;
}
.ccc-searchcard.is-disabled .ccc-searchcard-input {
	background: var(--theme-palette-color-8, #ffffff) !important;  /* clean, not ghosted */
	border-color: var(--ccc-moss, #799268) !important;
	color: var(--ccc-ink, #2d2d2d) !important;
	cursor: default;
}
.ccc-searchcard.is-disabled .ccc-searchcard-go {
	background: var(--ccc-moss, #799268) !important;  /* solid moss, beats the theme's disabled grey */
	color: #fff !important;
	opacity: 1 !important;
	cursor: default;
}
.ccc-searchcard-more:not([hidden]) {
	max-width: 520px;
	margin-top: 8px;
}

/* Cart page: the shared line construction, rendered in the classic cart's
   product cell via woocommerce_after_cart_item_name (see cart_page_meta).
   The :is() additions above let the nav meta-row rules style it too. */
.ccc-cart-meta { margin-top: 0.4rem; }


/* Cart page: sticky "unsaved changes" bar. Hidden (off-screen, non-interactive)
   until a line qty is staged, then slides up from the bottom. Its button proxies
   the native bottom-of-page Update cart submit. Brand palette ink/green/cream. */
.ccc-cartbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	transform: translateY( 110% );
	transition: transform 0.22s ease;
	background: #2d2d2d;
	box-shadow: 0 -6px 18px rgba( 0, 0, 0, 0.18 );
	pointer-events: none;
}
.ccc-cartbar.is-visible { transform: translateY( 0 ); pointer-events: auto; }
.ccc-cartbar-inner {
	max-width: 920px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 1.1rem;
}
.ccc-cartbar-msg { color: #f5f0e8; font-size: 0.92rem; }
.ccc-cartbar-btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	padding: 0.55rem 1.2rem;
	background: #7a9268;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.ccc-cartbar-btn:hover { background: #688056; }
.ccc-cartbar-btn:disabled { opacity: 0.6; cursor: default; }
/* 0.68.0: iOS home-bar clearance -- the bar hugs the true bottom edge, so pad
   the inside by the safe-area inset instead of floating above a dead strip. */
.ccc-cartbar { padding-bottom: env( safe-area-inset-bottom, 0px ); }
@media ( max-width: 600px ) {
	.ccc-cartbar-inner { padding: 0.6rem 0.8rem; gap: 0.6rem; }
	.ccc-cartbar-msg { font-size: 0.82rem; }
	.ccc-cartbar-btn { padding: 0.5rem 0.9rem; }
}
/* 0.68.0: Crisp clearance. The Crisp launcher is fixed bottom-right and stacks
   ABOVE this bar (its z-index dwarfs 9999), so on narrow viewports it draws
   over the Update control at the exact commit moment. Reserve the launcher's
   footprint (~56px bubble + edge offset) on the right side of the bar while it
   is visible; the button can then never sit under the bubble. CSS-only on
   purpose -- no dependency on the Crisp config API or its load timing. */
@media ( max-width: 900px ) {
	.ccc-cartbar.is-visible .ccc-cartbar-inner { padding-right: calc( 0.8rem + 84px ); }
}


/* Cart totals: give the WooCommerce "Proceed to checkout" button breathing room
   below it, separating it from the PayPal/Venmo express buttons. PayPal's plugin
   exposes no margin control of its own, so the buffer lives here. Tune the gap by
   changing the single margin-bottom value. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
	margin-bottom: 1.1rem;
}


/* Checkout order-summary: half-tone SKU line (emitted by display_cart_item's
   'display' span). browse.css is enqueued on checkout, so this applies there. */
.ccc-ck-sku { opacity: 0.55; }


/* Checkout order-summary: hide the block-native product SHORT DESCRIPTION on each
   line (sales copy the customer is already past). Targets the block's own
   description element only -- our Size/Material/SKU list lives in a separate
   element (.wc-block-components-product-details) and is unaffected. NOTE: this is
   a WooCommerce-Blocks class; if a future WC update renames it, this rule no-ops
   and the description returns (harmless, just re-point the selector). */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none; }

/* 0.120.1: admin-only Edit Product link under the card actions. Admin view
   only -- not part of the customer card design. Blended (invisible) at rest so
   it doesn't clutter the card; revealed when the admin hovers/focuses the card.
   opacity (not display) keeps the slot reserved so reveal causes no reflow. */
.ccc-card-edit {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: #6b736d;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}
.ccc-card--grid:hover .ccc-card-edit,
.ccc-card--grid:focus-within .ccc-card-edit { opacity: 1; }
.ccc-card-edit:hover { color: #385c38; text-decoration: underline; }

/* --- Etsy trust card (Browse folder foot). Restored: was lost when browse.css
   was regenerated from a DEV export that predated it. Orange is the only Etsy
   cue, confined to the CTA (trademark-safe). Scoped to .ccc-nav-tree. */
.ccc-nav-tree .ccc-etsy-card{ margin:14px 10px 4px; background:#fff; border:1px solid #dcdccb; border-radius:12px; padding:18px 14px; text-align:center; }
.ccc-nav-tree .ccc-etsy-tag{ margin:0; color:#3f4a35; font-size:14px; font-weight:500; line-height:1.5; }
.ccc-nav-tree .ccc-etsy-rule{ height:1px; background:#eceadf; margin:14px 0; }
.ccc-nav-tree .ccc-etsy-stars{ display:flex; align-items:center; justify-content:center; gap:3px; color:#e0951b; line-height:0; }
.ccc-nav-tree .ccc-etsy-score{ margin-top:6px; color:#2f3827; font-size:20px; font-weight:500; line-height:1.1; }
.ccc-nav-tree .ccc-etsy-count{ margin-top:2px; color:#5b6650; font-size:13px; }
.ccc-nav-tree .ccc-etsy-btn{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; background:#f1641e; color:#fff; text-decoration:none; font-size:14px; font-weight:500; padding:10px 12px; border-radius:8px; }
.ccc-nav-tree .ccc-etsy-btn:hover{ background:#d95412; color:#fff; text-decoration:none; }
.ccc-nav-tree .ccc-etsy-btn:focus-visible{ outline:2px solid #3f4a35; outline-offset:2px; }
.ccc-nav-tree .ccc-etsy-disc{ margin:10px 0 0; color:#8a8f80; font-size:11px; line-height:1.4; }

/* --- Card rating: fractional gold stars INSIDE the type-line green bar,
   right-justified via margin-left:auto. ::before empty track, ::after gold fill. */
.ccc-card-rating{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; white-space:nowrap; }
.ccc-rating-avg{ display:none; } /* 0.83.3: numeric average is the MOBILE chip; desktop shows the star track */
.ccc-rating-stars{ position:relative; display:inline-block; width:66px; height:12px; }
.ccc-rating-stars::before,
.ccc-rating-stars::after{ content:"\2605\2605\2605\2605\2605"; position:absolute; top:0; left:0; font-size:12px; line-height:1; letter-spacing:1px; }
.ccc-rating-stars::before{ color:#c9cbb8; }
.ccc-rating-stars::after{ color:#e0951b; width:var(--pct); overflow:hidden; white-space:nowrap; }
.ccc-rating-n{ font-size:11px; color:#5f6b52; }

/* ---- Legacy orders (migration surface, operator-fed) ------------------- *
 * Sits at the bottom of Past Orders and only renders when a Legacy folder
 * with at least one readable manifest exists. Orders are FLAT here, not
 * nested accordions -- see Concept_Studio_Browse::acct_legacy_body() for
 * why -- so these rules give each order the visual separation the accordion
 * would otherwise have provided. Reuses .ccc-acct-olist / .ccc-ci-* for the
 * lines so a legacy line and a real order line read identically. */
.ccc-acct-legacy-note {
	margin: 0.2rem 0 0.7rem;
	font-size: 0.78rem;
	opacity: 0.7;
	line-height: 1.45;
}
.ccc-acct-legacy-order + .ccc-acct-legacy-order {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}
.ccc-acct-legacy-ohead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}
.ccc-acct-legacy-oref { font-size: 0.82rem; font-weight: 600; }
.ccc-acct-legacy-odate { font-size: 0.76rem; opacity: 0.65; }
/* Unmatched line: the design was never mapped to a current product, which is
 * NOT the same as discontinued -- the catalogue was renamed during the
 * rebuild. Reads as a quiet note, never as an error. */
.ccc-acct-legacy-nomatch {
	font-size: 0.72rem;
	opacity: 0.62;
	line-height: 1.35;
}

/* ---- 0.83.3: mobile rating = "4.9 ★ (27)" -- AT FILE END on purpose ----
 * First cut of these rules sat inside the main <=782px block (~line 1484),
 * which is EARLIER in source than the base rating rules (~line 2601). Equal
 * specificity, later source wins: base display:none on the avg and base
 * inline-block on the stars beat the mobile overrides even at phone width.
 * Same source-order defect class as the retired 0.64.0 grid and the July
 * min-width wrap. Overrides live AFTER what they override -- hence EOF.
 * Design: the five-star fractional fill depends on per-device star-glyph
 * metrics and ghosted partial stars under the count; mobile drops the trick
 * for numeric average + ONE gold star + count. Desktop keeps the track.
 * Rides the nav breakpoint (1024) so card rules match the layout tier. */
@media (max-width: 1024px) {
	.ccc-card-typeline { min-width: 0; overflow: hidden; }
	.ccc-tl-detail { font-size: 0.68rem; letter-spacing: 0.03em; }
	.ccc-card-rating { min-width: 0; gap: 3px; }
	.ccc-rating-avg {
		display: inline;
		font-size: 10.5px;
		font-weight: 600;
		color: #5f6b52;
	}
	.ccc-rating-avg::after { content: ' \2605'; color: #e0951b; font-size: 10.5px; }
	.ccc-rating-stars { display: none; }
	.ccc-rating-n { font-size: 9.5px; }
}

/* ==================================================================== *
 * 0.84.0-mobile-nav-parity -- AT FILE END on purpose (override-after-
 * target, per the 0.83.3 lesson). Three deliverables:
 *  1. The bar is FIXED on mobile, every page. The sticky approach lost a
 *     per-template lottery: sticky travels only within its parent, and
 *     the home template hosts the frame in a wrapper exactly as tall as
 *     the bar (probe: frame sticky, parent short, never pins). Fixed +
 *     a JS-measured body spacer is immune to template wrapper height by
 *     construction. Scoped :not(.ccc-nav-account) so the account
 *     slide-over keeps its own fixed-right geometry untouched.
 *  2. Browse-open keeps the BAR readable and calm: the full-width green
 *     banner treatment is retired; the open pill dims and carries an
 *     explicit close glyph, with a one-line hint beneath the bar.
 *     (Hint copy is placeholder -- Andrea owns customer wording.)
 *  3. The expanded search card gets an explicit close (styles here; the
 *     button is injected by browse.js -- keyboards have no Escape).
 * ==================================================================== */
@media (max-width: 1024px) {
	/* -- 1. fixed bar + spacer ---------------------------------------- */
	/* 0.85.0-mbar-lift: the pinned element is the LIFTED SEARCHCARD
	 * (.ccc-mbar), not the frame. Measured 2026-07-28: the collapsed
	 * frame is display:none on mobile (0.83.2 drawer model), so the
	 * 0.84.0 rules pinned a zero-height shell. browse.js moves the
	 * page's searchcard into this body-level wrapper -- body-level so
	 * no theme ancestor can form a containing block against fixed. */
	.ccc-mbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0;
		z-index: 70;
		background: #f1eee4;
		/* 0.86.1: NO padding of its own -- browse.js applies the bar's
		 * measured in-flow gutter inline, so the pinned bar is
		 * dimensionally identical to the in-flow bar (no size jump). */
		padding: 0;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	}
	/* 0.86.2: the card's own 0.5rem bottom margin (0.76.0 rule) reads
	 * as an oversized lower buffer inside the pinned band; drop it there
	 * so the band sits symmetric around the buttons. Flow is untouched. */
	.ccc-mbar .ccc-searchcard { margin-bottom: 0; }
	/* 0.86.4: the studio renders flush under the bar (which pins from
	 * load there); a small buffer keeps the Concept Studio heading off
	 * the band. Mobile-only; desktop layout untouched. */
	.cs-main { padding-top: 0.75rem; }
	body.admin-bar .ccc-mbar { top: 46px; }
	/* 0.84.2 rule carried forward: below 600px WP renders the admin bar
	 * position:absolute -- it scrolls away with the page -- so holding a
	 * 46px reservation leaves a phantom gap (operator-only; customers
	 * carry no admin-bar class). */
	@media (max-width: 600px) {
		body.admin-bar .ccc-mbar { top: 0; }
	}
	/* 0.86.0: pin-on-reach -- the body-padding spacer is retired (it
	 * opened a phantom band above the header on load). The vacated
	 * in-flow space is held by an in-place slot, sized inline by
	 * browse.js at the moment of the lift. */
	.ccc-mbar-sentinel { display: block; height: 0; }
	/* Browse-open: the drawer is the FRAME, pinned BENEATH the bar --
	 * the bar itself never moves (parity contract: permanent chrome).
	 * dvh keeps the drawer clear of mobile browser chrome. */
	body.ccc-nav-browse:not(.ccc-nav-account) .ccc-nav-frame {
		position: fixed;
		top: var(--ccc-mbar-h, 58px);
		left: 0;
		right: 0;
		margin: 0;
		z-index: 65;
		max-height: min(85vh, 90dvh);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	body.admin-bar.ccc-nav-browse:not(.ccc-nav-account) .ccc-nav-frame { top: calc(var(--ccc-mbar-h, 58px) + 46px); }
	@media (max-width: 600px) {
		body.admin-bar.ccc-nav-browse:not(.ccc-nav-account) .ccc-nav-frame { top: var(--ccc-mbar-h, 58px); }
	}

	/* -- 2. calm open-state bar --------------------------------------- */
	/* 0.84.1: the open control is a small CENTERED coin, not a banner --
	 * auto width, breathing room, medium weight. The baked-in search svg
	 * is hidden on mobile (it read as Search, not Browse) and replaced
	 * with a menu glyph; desktop rail untouched. */
	body.ccc-nav-browse .ccc-nav-tab--browse {
		display: block;
		width: auto;
		margin: 8px auto 2px;
		padding: 7px 18px;
		border-radius: 999px;
		opacity: 1;
	}
	body.ccc-nav-browse .ccc-nav-tab--browse .ccc-nav-tab-grip {
		width: auto;
		justify-content: center;
		font-weight: 500;
		letter-spacing: 0.06em;
	}
	.ccc-nav-tab--browse svg { display: none; }
	body.ccc-nav-browse .ccc-nav-tab--browse .ccc-nav-tab-grip::before {
		content: '\2630';
		margin-right: 8px;
		font-size: 0.9em;
	}
	body.ccc-nav-browse .ccc-nav-tab--browse .ccc-nav-tab-grip::after {
		content: '\2715';
		margin-left: 8px;
		font-size: 0.85em;
		opacity: 0.85;
	}
	/* Centered one-line hint. PLACEHOLDER COPY (Andrea). The glyph is
	 * concatenated as its own string: a CSS escape consumes the space
	 * after it as the terminator, which glued the glyph to "to". */
	body.ccc-nav-browse .ccc-nav-tabs::after {
		content: 'Tap Browse \2715' ' to close and keep shopping';
		display: block;
		width: 100%;
		padding: 2px 10px 6px;
		font-size: 0.7rem;
		letter-spacing: 0.02em;
		color: #5f6b52;
		text-align: center;
	}

	/* -- 3. search close ---------------------------------------------- */
	.ccc-searchcard-x {
		display: none;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: #3f4a35;
		font-size: 1.05rem;
		line-height: 1;
		padding: 8px 10px;
		cursor: pointer;
	}
	.ccc-searchcard.is-search-open .ccc-searchcard-x { display: block; }
}