/* SEO copy — read-more accordion, 2026-09-29 (Chris).

   Covers two wrappers with identical markup shape
   (Kadence Row with an id -> .kt-inside-inner-col inside a flex column):
     #CatHero     — Kadence Element below the grid on product category archives
     #Description — row in the page content on the nav landing pages
                    (/store/vibrators/, /store/super-sale/, …)

   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/seo-copy-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/seo-copy-accordion.js and the enqueue in functions.php
   to revert. */

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

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

/* Fade the cut-off so it reads as deliberate. Page background is #fff on both
   contexts (body carries content-style-boxed). */
#CatHero.zen_seo_collapsed .kt-inside-inner-col::after,
#Description.zen_seo_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_seo_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_seo_toggle:hover,
.zen_seo_toggle:focus-visible {
	text-decoration: underline !important;
}

/* Chevron, drawn from borders so it renders identically everywhere —
   points down when collapsed, up when expanded. */
.zen_seo_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_seo_collapsed) .zen_seo_toggle::after,
#Description:not(.zen_seo_collapsed) .zen_seo_toggle::after {
	transform: translateY(0.1em) rotate(-135deg);
}