/* Category SEO description — read-more accordion, 2026-09-29 (Chris).
   Target: the #CatHero Kadence Element that renders the SEO copy below the
   product grid on product category archives.

   SEO NOTE: this is a purely visual collapse. The full text ships in the
   server-rendered HTML and is only hidden with CSS, so Googlebot receives it
   exactly as before. Nothing here is loaded on demand — never change this to
   fetch or inject the copy on click, as that would remove it from the crawled
   HTML.

   The collapsed state is applied by js/category-seo-accordion.js, never by CSS
   alone. If the script fails or is blocked, the block simply stays fully
   expanded rather than being clipped with no way to open it.

   Delete this file, js/category-seo-accordion.js and the enqueue in
   functions.php to revert. */

#CatHero .kt-inside-inner-col {
	position: relative;
}

/* Collapsed state — class added by the script. */
#CatHero.zen_catseo_collapsed .kt-inside-inner-col {
	max-height: 180px;
	overflow: hidden;
}

/* Fade the cut-off so it reads as deliberate. Page background is #fff. */
#CatHero.zen_catseo_collapsed .kt-inside-inner-col::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

/* ---------------------------------------------------------------
   Toggle control.

   Every visual property is reset with !important on purpose. This is a bare
   <button>, and both Kadence stylesheets style bare buttons as a solid pill:
     global.min.css        -> background: var(--global-palette-btn-bg);
                              color: var(--global-palette-btn); padding: .4em 1em
     kadence-global-inline -> padding: 10px 40px; border-radius: 50px
   Those are element selectors, so a single class normally outranks them — but
   if this stylesheet is ever slow, blocked or served stale, the button falls
   back to a black pill (which is exactly what Chris saw). Resetting each
   property explicitly keeps the control looking the same as soon as this file
   applies at all, and documents what is being overridden.

   align-self is also load-bearing: the Kadence column is a flex container, so
   the button would otherwise stretch to the full column width and strand its
   label in the middle of the row. The stretch comes from align-items, not from
   any width rule, so width:auto alone does not fix it.
   --------------------------------------------------------------- */

.zen_catseo_toggle {
	display: inline-flex !important;
	align-items: center;
	align-self: flex-start;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 10px 0 0 !important;
	padding: 6px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--global-palette-highlight, #ce2045) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
}

.zen_catseo_toggle:hover,
.zen_catseo_toggle:focus-visible {
	text-decoration: underline !important;
}

/* Chevron, drawn from borders so it renders identically everywhere —
   points down when collapsed, up when expanded. */
.zen_catseo_toggle::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

#CatHero:not(.zen_catseo_collapsed) .zen_catseo_toggle::after {
	transform: translateY(0.1em) rotate(-135deg);
}