/* Kasper Core - block output.
   Colours come from the theme's Astra global variables, with fallbacks so
   the blocks still look right if the plugin is used under another theme. */

.kas-block { margin-block: 1.5rem; }

/* --- key specification chips --- */
.kas-metrics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.kas-metric {
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	padding: 10px 16px;
	border-radius: 2px;
	min-width: 120px;
}
.kas-metric-value {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ast-global-color-0, #E53935);
	line-height: 1.2;
}
.kas-metric-label {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ast-global-color-3, #5A5A5F);
	margin-top: 3px;
}

/* --- downloads --- */
.kas-downloads { list-style: none; margin: 0; padding: 0; }
.kas-download { border-bottom: 1px solid var(--ast-global-color-8, #dcdce0); }
.kas-download-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	text-decoration: none;
}
.kas-download-name { font-weight: 500; }
.kas-download-meta {
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ast-global-color-3, #5A5A5F);
	white-space: nowrap;
}
.kas-download-link:hover .kas-download-name { color: var(--ast-global-color-0, #E53935); }

/* --- gallery --- */
.kas-gallery { display: grid; grid-template-columns: 88px 1fr; gap: 14px; }
.kas-gallery-thumbs { display: flex; flex-direction: column; gap: 10px; }
/* Element + class, because Astra paints every <button> in the brand red and a
   bare class ties with it unpredictably. A light panel behind the image, not
   none: the product shots are transparent cutouts and need a surface. */
button.kas-gallery-thumb {
	padding: 4px;
	background: #F5F5F6;
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	cursor: pointer;
	line-height: 0;
	transition: border-color .3s ease;
}
button.kas-gallery-thumb:hover,
button.kas-gallery-thumb:focus {
	background: #F5F5F6;
}
button.kas-gallery-thumb.is-active { border-color: var(--ast-global-color-0, #E53935); }
.kas-gallery-thumb img { display: block; width: 100%; height: auto; }
.kas-gallery-main-item { display: none; }
.kas-gallery-main-item.is-active { display: block; }
.kas-gallery-main-item img { width: 100%; height: auto; display: block; }

/* --- hover to zoom ---------------------------------------------------------
   Asked for on 31 Aug, the behaviour Amazon and Flipkart use. The zoomed
   layer sits over the ordinary image rather than replacing it, so the image
   below is untouched and a failed or slow load simply shows nothing.

   The item has to establish a containing block for the layer, and has to clip
   it, or a 2.5x image would spill across the specification column beside it. */
.kas-gallery-main-item {
	position: relative;
	overflow: hidden;
}

/* Only inside a real pointer: a touch device fires hover on first tap and
   would strand the image zoomed. Matches the guard in gallery.js, which is
   what actually creates the layer, so this is belt and braces rather than
   the only defence. */
@media (hover: hover) and (pointer: fine) {

	/* has-zoom, not [data-zoom]: the class is only set once the file has
	   loaded and proved it carries enough pixels to be worth magnifying, so
	   the cursor never offers a zoom that will not happen. */
	.kas-gallery-main-item.has-zoom { cursor: zoom-in; }

	.kas-gallery-zoom {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		/* contain, not cover: these are product cutouts on a light panel and
		   cropping one to fill the box would cut the product itself. */
		object-fit: contain;
		opacity: 0;
		transform: scale(1);
		transition: opacity .18s ease, transform .18s ease;
		pointer-events: none;
	}

	/* is-ready is added a frame after the layer is appended, so it grows in
	   rather than appearing already at size. */
	/* The factor is written per item by gallery.js from that image's own
	   resolution; 2.5 is only the fallback if the property is missing. */
	.kas-gallery-main-item:hover .kas-gallery-zoom.is-ready {
		opacity: 1;
		transform: scale(var(--kas-zoom, 2.5));
	}
}

/* The zoom is the point, so it still works; only the growing is dropped. */
@media (prefers-reduced-motion: reduce) {
	.kas-gallery-zoom { transition: opacity .18s ease; }
}

@media (max-width: 600px) {
	.kas-gallery { grid-template-columns: 1fr; }
	.kas-gallery-thumbs { flex-direction: row; overflow-x: auto; }
	.kas-gallery-thumb { flex: 0 0 72px; }
}

/* --- enquiry form ------------------------------------------------------
   Lead capture. Two columns on wide screens, one on narrow, with the
   message field spanning. */

.kas-enquiry-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
}
.kas-enquiry-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kas-enquiry-field.is-wide,
.kas-enquiry-submit,
.kas-enquiry-context { grid-column: 1 / -1; }

.kas-enquiry-field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ast-global-color-3, #5A5A5F);
}
.kas-enquiry-field label span { color: var(--ast-global-color-0, #E53935); }

.kas-enquiry-field input,
.kas-enquiry-field select,
.kas-enquiry-field textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--ast-global-color-8, #DCDCE0);
	border-radius: 2px;
	background: #fff;
	color: var(--ast-global-color-2, #2B2B2B);
	/* The theme fixes form controls at 40px, which is less than 12px of
	   padding top and bottom plus a 15px line needs, so the chosen option sat
	   half outside its own box and looked cut off. Letting the height follow
	   the content puts it back inside. */
	height: auto;
	line-height: 1.4;
}
.kas-enquiry-field input:focus,
.kas-enquiry-field select:focus,
.kas-enquiry-field textarea:focus {
	outline: 2px solid var(--ast-global-color-0, #E53935);
	outline-offset: 1px;
	border-color: transparent;
}
.kas-enquiry-field textarea { resize: vertical; min-height: 120px; }

/* Which product this enquiry is about. */
/* A caption for the products beneath it, not a banner. The band this used to
   be was written when the product was a single line of text inside it; with
   the products now sitting below as chips it read as an empty header with
   things loose underneath. The panel moved to .kas-enquiry-products so the
   label, the chips and the search read as one block. */
.kas-enquiry-context {
	margin: 0 0 10px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ast-global-color-3, #5A5A5F);
}

.kas-enquiry-submit { margin: 4px 0 0; }
.kas-enquiry-submit button {
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 32px;
	border: 0;
	border-radius: 2px;
	background: var(--ast-global-color-0, #E53935);
	color: #fff;
	cursor: pointer;
	transition: background-color .3s ease;
}
.kas-enquiry-submit button:hover { background: var(--ast-global-color-1, #C62828); }

.kas-enquiry-notice {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-left: 3px solid;
	font-size: 15px;
}
.kas-enquiry-notice.is-good { border-color: #2e7d32; background: #f1f8f2; color: #1b5e20; }
.kas-enquiry-notice.is-bad  { border-color: var(--ast-global-color-0, #E53935); background: #fdf2f2; color: #a02020; }

/* Honeypot. Hidden without display:none, which some bots detect. */
.kas-enquiry-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.kas-enquiry-form { grid-template-columns: 1fr; }
}

/* --- enquiry: the products being asked about ---
   An enquiry can name several. PHP renders whatever the URL asked for, and the
   picker adds more. Each row carries a hidden input, so what is on screen is
   what gets sent. */
.kas-enquiry-products {
	grid-column: 1 / -1;
	background: var(--ast-global-color-5, #F5F5F6);
	border-left: 3px solid var(--ast-global-color-0, #E53935);
	border-radius: 0 3px 3px 0;
	padding: 16px 18px 18px;
}
.kas-enquiry-picked { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kas-enquiry-pick {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	border-radius: 3px;
	padding: 8px 8px 8px 13px;
	font-size: 13.5px;
	font-weight: 500;
}
button.kas-enquiry-drop {
	background: none;
	border: 0;
	border-radius: 2px;
	color: var(--ast-global-color-3, #5A5A5F);
	font-size: 17px;
	line-height: 1;
	padding: 2px 5px;
	cursor: pointer;
}
button.kas-enquiry-drop:hover { background: none; color: var(--ast-global-color-0, #E53935); }
.kas-enquiry-empty { margin: 0 0 10px; font-size: 13px; color: var(--ast-global-color-3, #5A5A5F); }

/* The picker. Hidden until the script is ready, because searching needs it.
   The chips above and their hidden inputs work regardless. */
.kas-enquiry-add { display: none; position: relative; }
[data-kas-enquiry-products][data-ready] .kas-enquiry-add { display: block; }

.kas-enquiry-search {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	border-radius: 3px;
	font: inherit;
	font-size: 14px;
	background: #fff;
}
.kas-enquiry-search:focus {
	outline: 2px solid var(--ast-global-color-0, #E53935);
	outline-offset: 1px;
}
.kas-enquiry-search:disabled { opacity: .5; }

/* A panel of cards, not a native list: these are pieces of hardware and the
   picture is how they are recognised. Floated over the form so adding a
   product never pushes the fields around. */
.kas-enquiry-results {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 340px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	border-radius: 4px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
.kas-enquiry-results[hidden] { display: none; }

.kas-enquiry-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 3px;
	cursor: pointer;
}
.kas-enquiry-result[hidden] { display: none; }
.kas-enquiry-result:hover,
.kas-enquiry-result.is-active { background: var(--ast-global-color-5, #F5F5F6); }

/* Products the visitor has already looked at sort to the top. The label is
   what stops that reordering looking arbitrary. */
.kas-enquiry-result.is-recent .kas-enquiry-result-title::after {
	content: "Viewed";
	margin-left: 8px;
	padding: 2px 6px;
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	border-radius: 2px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ast-global-color-3, #5A5A5F);
	vertical-align: middle;
}

.kas-enquiry-result-media {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ast-global-color-5, #F5F5F6);
	border: 1px solid var(--ast-global-color-8, #dcdce0);
	border-radius: 3px;
	overflow: hidden;
}
.kas-enquiry-result-media img { max-width: 100%; max-height: 100%; display: block; }

.kas-enquiry-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kas-enquiry-result-title { font-size: 14px; font-weight: 600; }
.kas-enquiry-result-models {
	font-size: 11.5px;
	color: var(--ast-global-color-3, #5A5A5F);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kas-enquiry-noresult {
	padding: 14px 12px;
	font-size: 13px;
	color: var(--ast-global-color-3, #5A5A5F);
}
.kas-enquiry-noresult[hidden] { display: none; }

/* --- enquiry overlay ---
   The design system's Enquire screen, brought into a modal so the visitor
   never leaves the product. Fields stay in two columns on a wide screen and
   stack below it, and the card scrolls inside itself rather than the page. */
.kas-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(20, 20, 22, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 20px;
	overflow-y: auto;
}
.kas-modal[hidden] { display: none; }

.kas-modal-card {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: #fff;
	border-radius: 4px;
	padding: 36px 40px 40px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

/* Only the corner control is positioned. The received panel reuses the same
   class as its behavioural hook, and without the child combinator that button
   was pulled into the corner on top of this one. */
.kas-modal-card > button.kas-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	/* Sized rather than padded, because padding alone left it 35 by 32 and the
	   rest of the site holds to 44. */
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ast-global-color-3, #5A5A5F);
	cursor: pointer;
}
.kas-modal-card > button.kas-modal-close:hover { background: none; color: var(--ast-global-color-0, #E53935); }

.kas-modal-title { margin: 0 0 8px; font-size: 30px; }
.kas-modal-sub {
	margin: 0 0 26px;
	max-width: 62ch;
	color: var(--ast-global-color-3, #5A5A5F);
}

/* The received state, which replaces the form rather than sitting under it. */
.kas-modal-done { text-align: center; padding: 30px 10px 20px; }
.kas-modal-done[hidden] { display: none; }
.kas-modal-done svg { color: var(--ast-global-color-0, #E53935); }
.kas-modal-done h3 { margin: 14px 0 6px; }
.kas-modal-done p { margin: 0 0 22px; color: var(--ast-global-color-3, #5A5A5F); }
.kas-modal-body[hidden] { display: none; }

/* The overlay is roomier than a page column, so the fields go two across. */
@media (min-width: 700px) {
	.kas-modal .kas-enquiry-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
	.kas-modal { padding: 0; }
	.kas-modal-card { max-height: 100vh; border-radius: 0; padding: 30px 20px 34px; }
	.kas-modal-title { font-size: 24px; }
}