/* Kasper Core - product finder panel.

   Colours resolve against the child theme's brand tokens, falling back to the
   Astra globals and then to literals, so the panel still looks right if the
   plugin is used under another theme. */

/* The panel is positioned against the header, so the header has to be the
   containing block. */
.kas-finder-host {
	position: relative;
}

.kfind {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--kas-white, #fff);
	border-top: 2px solid var(--kas-red, var(--ast-global-color-0, #E53935));
	box-shadow: 0 24px 48px -12px rgba(20, 20, 21, .18);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .18s ease, transform .18s ease;
}

.kfind.is-open {
	opacity: 1;
	transform: none;
}

.kfind[hidden] {
	display: none;
}

/* Once the script has taken over the Products item, Astra's own dropdown would
   open alongside the panel. The class is added by the script, so with
   JavaScript off this rule never applies and the ordinary dropdown remains.

   Confined to desktop: the panel itself is desktop only, so suppressing the
   submenu below the breakpoint would leave the mobile menu with no way into
   the product categories at all. */
@media (min-width: 922px) {
	.kas-finder-ready > .sub-menu,
	.kas-finder-ready > .astra-full-megamenu-wrapper {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kfind {
		transition: none;
	}
}

/* --- the panel body ----------------------------------------------------
   Image on the left, categories on the right, per KEI's feedback of
   20 August. The left column is bounded rather than fluid so the image well
   holds its size as the category columns reflow. */

.kfind-inner {
	/* Wider than the site's own 1320 container, on purpose and from a measured
	   number rather than taste. The longest category label is 173px, so five
	   segment columns need about 1000px of track; with a 400px image column
	   and the gaps and padding that comes to roughly 1560. The panel is full
	   bleed, so it has that width to take on a large screen, and it is not
	   obliged to line up with the body text.

	   Note --container is defined as 1320px by the theme, so writing this as
	   var(--container, 1560px) does nothing at all: the fallback only applies
	   when the variable is unset. That was the first attempt and it silently
	   changed nothing. */
	max-width: min(1560px, 100vw - 48px);
	margin: 0 auto;
	padding: 32px clamp(20px, 4vw, 40px) 36px;
	display: grid;
	/* Categories first, image on the right (KEI, 21 Aug), wider than it was. */
	grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 400px);
	gap: clamp(20px, 2.4vw, 36px);
	align-items: stretch;
}

/* --- the image --------------------------------------------------------- */

/* No panel behind the shot. The grey well read as a background on the
   product itself, which is what Ajit saw on 21 Aug: nearly every image is
   already a transparent cutout, and the few that are not are shot on white,
   so against the panel's own white they simply disappear. */
/* The divider lives here rather than on .kfind-cols so it belongs to the
   image area it separates, and it runs the full height of the panel rather
   than the height of the text beside it. Asked for by Ajit on 24 Aug: a
   hairline was already drawn, but it stopped where the shortest column of
   links stopped, so it read as a stray rule instead of a division. The
   negative margins take it out past the panel's own vertical padding. */
.kfind-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 20px 0 20px clamp(22px, 2.6vw, 40px);
	margin: -32px 0 -36px;
	border-left: 1px solid var(--kas-hairline, var(--ast-global-color-8, #DCDCE0));
}

/* Bigger, per the same note. 270 to 320, with the column widened to match in
   .kfind-inner; the cap is on height because these are cutouts of wildly
   different aspect ratios and height is what keeps the panel from growing. */
.kfind-media img {
	display: block;
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kfind-media img[hidden] {
	display: none;
}

/* --- the categories ---------------------------------------------------- */

/* Five segments since Cinema Speakers was added on 24 Aug, where there were
   four. auto-fit rather than a fixed count so the row drops to four and then
   three as the viewport narrows, instead of squeezing five columns until
   "Ceiling Mount Speakers" wraps. The 168px floor is set from the longest
   label at this size, not guessed. */
.kfind-cols {
	display: grid;
	/* auto-fit rather than a fixed five, so the row count follows the width.
	   The 164px floor is chosen from measured behaviour at three widths, not
	   from the longest label: at 178 a 1280 screen fell to three columns and
	   the panel grew to 641px, because two rows of eight-item segments stack.
	   164 buys four columns there, which is 425px, at the cost of the two
	   longest labels wrapping on that screen alone. Wide screens get five
	   columns either way. */
	grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
	gap: 24px clamp(16px, 1.8vw, 28px);
	align-content: start;
	padding-right: clamp(18px, 2.2vw, 32px);
}

/* Five segments across four columns: the two short ones stack under Cinema
   rather than forcing a fifth column that would squeeze the long lists. */
@media (max-width: 1180px) {
	.kfind-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Inter, not the display face, on Soham's instruction of 24 Aug: Soham Chawla
   asked for a single font and Ajit named Inter. Scoped to the menu on purpose,
   so the rest of the site still sets its headings in Orbitron and this is a
   first look rather than the finished decision.

   This was the only Orbitron left in the menu; the nav items, the category
   links and the search field were already Inter.

   Tracking goes .07em to .09em because Inter is the narrower face and a small
   uppercase label needs the air back. The theme does the same where h5 and h6
   fall back to Inter.

   To undo: font-family back to var(--kas-ff-display, inherit), tracking .07em. */
.kfind-seg-name {
	margin: 0 0 12px;
	font-family: var(--kas-ff-body, inherit);
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--kas-black, var(--ast-global-color-3, #141415));
	/* Room for two lines whether or not a heading needs them, so every
	   column's first link sits on the same baseline. "Cables & Connectors" is
	   the one that wraps at five columns, and without this it pushed its whole
	   list down a line while the other four started level. */
	min-height: 2.5em;
}

/* The heading is a link now. It stays looking like a heading at rest, because
   five underlined labels across the top would compete with the category links
   below them, and declares its own colour in every state: Astra decorates
   descendants of anything it considers content, and this has caught the
   project repeatedly. */
.kfind-seg-name a,
.kfind-seg-name a:visited {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .12s ease, border-color .12s ease;
}

.kfind-seg-name a:hover,
.kfind-seg-name a:focus-visible {
	color: var(--kas-red, var(--ast-global-color-0, #E53935));
	border-bottom-color: var(--kas-red, var(--ast-global-color-0, #E53935));
	text-decoration: none;
}

.kfind-seg-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kfind-seg-list li {
	margin: 0;
}

.kfind-seg-list a {
	display: block;
	width: fit-content;
	padding: 5px 0;
	font-size: .92rem;
	line-height: 1.35;
	color: var(--kas-ink, var(--ast-global-color-2, #5A5A5F));
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .12s ease, border-color .12s ease;
}

.kfind-seg-list a:hover,
.kfind-seg-list a:focus-visible,
.kfind-seg-list a.is-on {
	color: var(--kas-black, var(--ast-global-color-3, #141415));
	border-bottom-color: var(--kas-red, var(--ast-global-color-0, #E53935));
}

.kfind-seg-list a:focus-visible {
	outline: 2px solid var(--kas-red, var(--ast-global-color-0, #E53935));
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.kfind-seg-list a {
		transition: none;
	}
}

/* The panel is desktop only, but the image well would still reserve its
   height while the layout collapses behind it. */
@media (max-width: 921px) {
	.kfind-inner {
		grid-template-columns: 1fr;
	}

	.kfind-media {
		display: none;
	}

	/* The border and the negative margins that carry it moved to
	   .kfind-media on 24 Aug, and that is display:none here, so there is
	   nothing left to unset except the gutter the image used to sit in. */
	.kfind-cols {
		padding-right: 0;
	}
}