/*
 * KESHO Compare — Compact mobile only
 *
 * Scope:
 * Home Compare only.
 *
 * No Desktop/Wide/Medium changes.
 */

@media (max-width: 599px) {

	/*
	 * Horizontal viewport.
	 *
	 * Swipe remains enabled.
	 * Native scrollbar is visually hidden.
	 *
	 * 16px horizontal gutter keeps the comparison
	 * content away from the physical screen edges.
	 */
	#brxe-ssbhks {
		position: relative;

		box-sizing: border-box;

		overflow-x: auto !important;
		overflow-y: visible !important;

		-webkit-overflow-scrolling: touch;

		scrollbar-width: none;
		-ms-overflow-style: none;

		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;

		scroll-padding-inline: 16px;

		overscroll-behavior-x: contain;

		touch-action: pan-x pan-y;

		padding-top: 0 !important;
		padding-right: 16px !important;
		padding-bottom: 4px !important;
		padding-left: 16px !important;
	}

	#brxe-ssbhks::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}


	/*
	 * Entire comparison rail.
	 */
	#brxe-cmpstg {
		width: 540px !important;
		min-width: 540px !important;
		max-width: 540px !important;

		flex: 0 0 540px !important;
	}


	/*
	 * Green spine.
	 */
	#brxe-cmpccL,
	#brxe-cmphct {
		width: 108px !important;
		min-width: 108px !important;
		max-width: 108px !important;

		flex: 0 0 108px !important;
	}


	/*
	 * No visual gap between side strips and spine.
	 */
	#brxe-cmpbdy,
	#brxe-cmphdr {
		column-gap: 0 !important;
	}


	/*
	 * Side columns remain flexible.
	 */
	#brxe-cmppcl,
	#brxe-cmptcl {
		min-width: 0 !important;
		flex: 1 1 0 !important;

		scroll-snap-align: center;
		scroll-snap-stop: always;
	}


	/*
	 * Compact white rows.
	 */
	#brxe-cmppr1,
	#brxe-cmppr2,
	#brxe-cmppr3,
	#brxe-cmppr4,
	#brxe-cmptr1,
	#brxe-cmptr2,
	#brxe-cmptr3,
	#brxe-cmptr4 {
		min-height: 72px !important;
		height: auto !important;
	}


	/*
	 * Package side:
	 * extra clearance next to green spine.
	 */
	#brxe-cmppr1,
	#brxe-cmppr2,
	#brxe-cmppr3,
	#brxe-cmppr4 {
		padding:
			7px
			10px
			7px
			22px
			!important;
	}


	/*
	 * Test side:
	 * extra clearance next to green spine.
	 */
	#brxe-cmptr1,
	#brxe-cmptr2,
	#brxe-cmptr3,
	#brxe-cmptr4 {
		padding:
			7px
			22px
			7px
			10px
			!important;
	}


	/*
	 * Side text.
	 */
	#brxe-cmppt1,
	#brxe-cmppt2,
	#brxe-cmppt3,
	#brxe-cmppt4,
	#brxe-cmptt1,
	#brxe-cmptt2,
	#brxe-cmptt3,
	#brxe-cmptt4 {
		width: 100% !important;

		font-size: 14px !important;
		line-height: 1.55 !important;

		text-align: center !important;

		overflow-wrap: normal;
		word-break: normal;
	}


	/*
	 * Center cells.
	 */
	#brxe-cmpcr1,
	#brxe-cmpcr2,
	#brxe-cmpcr3,
	#brxe-cmpcr4 {
		min-height: 79px !important;
	}


	#brxe-cmpct1,
	#brxe-cmpct2,
	#brxe-cmpct3,
	#brxe-cmpct4 {
		font-size: 15px !important;
		line-height: 1.4 !important;
	}


	/*
	 * Pagination / scroll affordance.
	 */
	.ksh-compare-mobile-pagination {
		width: max-content;

		display: flex;
		align-items: center;
		justify-content: center;

		gap: 7px;

		margin:
			14px
			auto
			0;

		padding:
			6px
			9px;

		border-radius: 999px;

		background:
			rgba(6, 116, 141, 0.09);
	}


	.ksh-compare-mobile-dot {
		appearance: none;
		-webkit-appearance: none;

		display: block;

		width: 7px;
		height: 7px;

		margin: 0;
		padding: 0;

		border: 0;
		border-radius: 999px;

		background:
			rgba(6, 116, 141, 0.28);

		cursor: pointer;

		transition:
			width 180ms ease,
			background-color 180ms ease,
			opacity 180ms ease;
	}


	.ksh-compare-mobile-dot.is-active {
		width: 20px;

		background: #06748D;
	}


	.ksh-compare-mobile-dot:focus-visible {
		outline:
			2px solid
			rgba(6, 116, 141, 0.28);

		outline-offset: 3px;
	}
}


@media (min-width: 600px) {

	.ksh-compare-mobile-pagination {
		display: none !important;
	}
}