/**
 * ==========================================================
 * SHELVING STORE
 * CATEGORY FEATURED SCROLL
 * ==========================================================
 */


/* ==========================================================
   MAIN LAYOUT
   ========================================================== */

.ss-cfs-layout {
	width: 100%;

	margin: 0 0 48px;
	padding: 30px 28px 24px;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f7faf7 100%
		);

	border-top: 4px solid #33cc33;
	border-radius: 6px;

	box-shadow:
		0 2px 14px rgba(0, 0, 0, 0.045);
}


.ss-cfs-layout,
.ss-cfs-layout * {
	box-sizing: border-box;
}



/* ==========================================================
   CATEGORY HEADING
   ========================================================== */

.ss-cfs-category-title {
	margin: 0 0 18px;

	color: #4a4540;

	font-size:
		clamp(
			28px,
			3vw,
			40px
		);

	font-weight: 700;

	line-height: 1.15;
}



/* ==========================================================
   STANDARD COLUMN LAYOUT
   ========================================================== */

.ss-cfs-columns {
	display: grid;

	grid-template-columns:
		minmax(
			0,
			var(
				--ss-cfs-featured-width,
				44%
			)
		)
		minmax(
			0,
			1fr
		);

	align-items: start;

	gap: 30px;
}



/* ==========================================================
   SINGLE POST LAYOUT
   ========================================================== */

.ss-cfs-layout-single
.ss-cfs-columns {
	display: block;
}

.ss-cfs-layout-single
.ss-cfs-featured {
	width: var(--ss-cfs-featured-width, 44%);
	max-width: 760px;
}

.ss-cfs-layout-single.ss-cfs-layout-reversed
.ss-cfs-featured {
	margin-left: auto;
}


/* ==========================================================
   REVERSED COLUMN LAYOUT
   ========================================================== */

.ss-cfs-layout-reversed
.ss-cfs-columns {
	grid-template-columns:
		minmax(
			0,
			1fr
		)
		minmax(
			0,
			var(
				--ss-cfs-featured-width,
				44%
			)
		);
}


.ss-cfs-layout-reversed
.ss-cfs-featured {
	grid-column: 2;

	grid-row: 1;
}


.ss-cfs-layout-reversed
.ss-cfs-scroll-shell {
	grid-column: 1;

	grid-row: 1;
}



/* ==========================================================
   FEATURED POST
   ========================================================== */

.ss-cfs-featured {
	width: 100%;

	margin: 0;

	overflow: hidden;

	background: #f2f2f2;

	border:
		1px
		solid
		#dedede;

	border-radius: 3px;
}


.ss-cfs-featured-link {
	display: block;

	color: #4a4540;

	text-decoration: none;
}


.ss-cfs-featured-link:hover,
.ss-cfs-featured-link:focus {
	color: #4a4540;

	text-decoration: none;
}


.ss-cfs-featured-image {
	width: 100%;

	overflow: hidden;

	background: #e5e5e5;
}


.ss-cfs-featured-image-file {
	display: block;

	width: 100%;

	max-width: 100%;

	height: auto;

	margin: 0;

	transition:
		transform
		0.25s
		ease;
}


.ss-cfs-featured-link:hover
.ss-cfs-featured-image-file {
	transform: scale(1.02);
}


.ss-cfs-featured-content {
	padding:
		17px
		20px
		21px;
}


.ss-cfs-featured-title {
	margin:
		0
		0
		7px;

	color: #4a4540;

	font-size:
		clamp(
			21px,
			2vw,
			27px
		);

	font-weight: 700;

	line-height: 1.2;
}


.ss-cfs-featured-excerpt {
	margin: 0;

	color: #555;

	font-size: 16px;

	line-height: 1.45;
}


.ss-cfs-read-more {
	display: inline-block;

	margin-top: 14px;

	color: #269e26;

	font-size: 15px;

	font-weight: 700;
}



/* ==========================================================
   SCROLL SHELL
   ========================================================== */

.ss-cfs-scroll-shell {
	position: relative;

	width: 100%;

	min-width: 0;

	min-height: 0;
}



/* ==========================================================
   SCROLL COLUMN
   ========================================================== */

.ss-cfs-scroll-column {
	width: 100%;

	height: 100%;

	min-width: 0;

	min-height: 0;

	overflow-x: hidden;

	overflow-y: auto;

	background: #f2f2f2;

	border:
		1px
		solid
		#dedede;

	border-radius: 3px;

	scroll-behavior: smooth;

	scrollbar-color:
		#858585
		#dedede;

	scrollbar-width: thin;
}


.ss-cfs-scroll-column:focus {
	outline:
		2px
		solid
		#33cc33;

	outline-offset: 3px;
}


.ss-cfs-scroll-column::-webkit-scrollbar {
	width: 12px;
}


.ss-cfs-scroll-column::-webkit-scrollbar-track {
	background: #dedede;
}


.ss-cfs-scroll-column::-webkit-scrollbar-thumb {
	background: #858585;

	border:
		3px
		solid
		#dedede;

	border-radius: 20px;
}


.ss-cfs-scroll-column::-webkit-scrollbar-thumb:hover {
	background: #666;
}


.ss-cfs-scroll-content {
	padding:
		0
		20px;
}



/* ==========================================================
   VERTICAL NAVIGATION BUTTONS
   ========================================================== */

.ss-cfs-scroll-button {
	position: absolute;

	z-index: 30;

	left: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 44px;

	height: 44px;

	padding: 0;

	margin: 0;

	background: #c7652a;

	border: 0;

	border-radius: 50%;

	color: #ffffff;

	cursor: pointer;

	box-shadow:
		0
		3px
		10px
		rgba(
			0,
			0,
			0,
			0.28
		);

	transform:
		translateX(
			-50%
		);

	transition:
		background-color
		0.2s
		ease,
		color
		0.2s
		ease,
		box-shadow
		0.2s
		ease,
		transform
		0.2s
		ease;
}


.ss-cfs-scroll-up {
	top: 10px;
}


.ss-cfs-scroll-down {
	bottom: 10px;
}


.ss-cfs-scroll-button:hover,
.ss-cfs-scroll-button:focus-visible {
	background: #33cc33;

	color: #ffffff;

	transform:
		translateX(
			-50%
		)
		scale(
			1.08
		);
}


.ss-cfs-scroll-button:focus-visible {
	outline:
		3px
		solid
		rgba(
			51,
			204,
			51,
			0.35
		);

	outline-offset: 3px;
}


.ss-cfs-scroll-button:disabled {
	background: #d9d9d9;

	color: #8a8a8a;

	cursor: not-allowed;

	box-shadow:
		0
		2px
		6px
		rgba(
			0,
			0,
			0,
			0.12
		);

	transform:
		translateX(
			-50%
		)
		scale(
			1
		);
}


.ss-cfs-scroll-button:disabled:hover,
.ss-cfs-scroll-button:disabled:focus,
.ss-cfs-scroll-button:disabled:focus-visible {
	background: #d9d9d9;

	color: #8a8a8a;

	outline: none;

	transform:
		translateX(
			-50%
		)
		scale(
			1
		);
}


.ss-cfs-scroll-button[hidden] {
	display: none;
}



/* ==========================================================
   BUTTON ICONS
   ========================================================== */

.ss-cfs-scroll-button svg {
	display: block;

	width: 25px;

	height: 25px;

	overflow: visible;
}


.ss-cfs-scroll-button path {
	fill: none;

	stroke: currentColor;

	stroke-width: 3.3;

	stroke-linecap: round;

	stroke-linejoin: round;
}



/* ==========================================================
   SCROLLABLE POST LIST
   ========================================================== */

.ss-cfs-list-post {
	margin: 0;

	padding:
		17px
		0;

	border-bottom:
		1px
		solid
		#949494;
}


.ss-cfs-list-post:last-child {
	border-bottom: 0;
}


.ss-cfs-list-link {
	display: grid;

	grid-template-columns:
		minmax(
			160px,
			32%
		)
		minmax(
			0,
			1fr
		);

	align-items: start;

	gap: 18px;

	color: #4a4540;

	text-decoration: none;
}


.ss-cfs-list-link:hover,
.ss-cfs-list-link:focus {
	color: #4a4540;

	text-decoration: none;
}


.ss-cfs-list-image {
	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #e3e3e3;
}


.ss-cfs-list-image-file {
	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	object-fit: cover;

	transition:
		transform
		0.25s
		ease;
}


.ss-cfs-list-link:hover
.ss-cfs-list-image-file {
	transform: scale(1.04);
}


.ss-cfs-list-content {
	min-width: 0;

	padding:
		0
		10px
		0
		0;
}


.ss-cfs-list-title {
	margin:
		0
		0
		5px;

	color: #4a4540;

	font-size:
		clamp(
			18px,
			1.65vw,
			24px
		);

	font-weight: 700;

	line-height: 1.2;
}


.ss-cfs-list-excerpt {
	margin: 0;

	color: #555;

	font-size: 15px;

	line-height: 1.4;
}


.ss-cfs-list-read-more {
	display: inline-block;

	margin-top: 9px;

	color: #269e26;

	font-size: 14px;

	font-weight: 700;
}



/* ==========================================================
   PLACEHOLDERS
   ========================================================== */

.ss-cfs-image-placeholder {
	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	min-height: 110px;

	padding: 20px;

	color: #777;

	font-size: 14px;

	text-align: center;
}


.ss-cfs-featured-placeholder {
	min-height: 300px;
}



/* ==========================================================
   EMPTY LIST AND ERROR
   ========================================================== */

.ss-cfs-no-posts {
	padding: 30px;

	color: #666;

	font-size: 15px;

	text-align: center;
}


.ss-cfs-error {
	padding:
		18px
		20px;

	background: #fff2f2;

	border-left:
		5px
		solid
		#b62c2c;

	color: #682323;

	font-size: 15px;
}



/* ==========================================================
   CATEGORY ARCHIVE BUTTON
   ========================================================== */

.ss-cfs-archive-row {
	display: flex;
	justify-content: flex-end;

	margin-top: 20px;
}

.ss-cfs-archive-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 10px 16px;

	background: #c7652a;
	border-radius: 4px;

	color: #ffffff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.ss-cfs-archive-link:hover,
.ss-cfs-archive-link:focus-visible {
	background: #33cc33;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.ss-cfs-archive-link:focus-visible {
	outline: 3px solid rgba(51, 204, 51, 0.28);
	outline-offset: 3px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(
	max-width: 950px
) {

	.ss-cfs-columns {
		grid-template-columns:
			minmax(
				0,
				42%
			)
			minmax(
				0,
				1fr
			);

		gap: 20px;
	}


	.ss-cfs-layout-reversed
	.ss-cfs-columns {
		grid-template-columns:
			minmax(
				0,
				1fr
			)
			minmax(
				0,
				42%
			);
	}


	.ss-cfs-list-link {
		grid-template-columns:
			135px
			minmax(
				0,
				1fr
			);

		gap: 14px;
	}


	.ss-cfs-list-excerpt {
		font-size: 14px;
	}


	.ss-cfs-scroll-button {
		width: 42px;

		height: 42px;
	}

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media
(
	max-width: 700px
) {

	.ss-cfs-layout {
		padding: 24px 16px 20px;
	}


	.ss-cfs-columns {
		display: flex;

		flex-direction: column;
	}


	.ss-cfs-layout-single
	.ss-cfs-featured {
		width: 100%;
		max-width: none;
	}



	/* STANDARD MOBILE ORDER */

	.ss-cfs-featured {
		order: 1;

		margin-bottom: 24px;
	}


	.ss-cfs-scroll-shell {
		order: 2;
	}



	/* REVERSED MOBILE ORDER */

	.ss-cfs-layout-reversed
	.ss-cfs-scroll-shell {
		order: 1;

		grid-column: auto;

		grid-row: auto;

		margin-bottom: 24px;
	}


	.ss-cfs-layout-reversed
	.ss-cfs-featured {
		order: 2;

		grid-column: auto;

		grid-row: auto;

		margin-bottom: 0;
	}



	/* MOBILE SCROLL HEIGHT */

	.ss-cfs-scroll-shell {
		height:
			min(
				70vh,
				650px
			)
			!important;

		max-height:
			min(
				70vh,
				650px
			)
			!important;
	}


	.ss-cfs-scroll-column {
		height: 100%;

		max-height: 100%;
	}


	.ss-cfs-list-link {
		grid-template-columns:
			125px
			minmax(
				0,
				1fr
			);

		gap: 14px;
	}


	.ss-cfs-list-title {
		font-size: 18px;
	}


	.ss-cfs-list-excerpt {
		display: -webkit-box;

		overflow: hidden;

		-webkit-box-orient: vertical;

		-webkit-line-clamp: 3;
	}

}



/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media
(
	max-width: 480px
) {

	.ss-cfs-category-title {
		font-size: 27px;
	}


	.ss-cfs-scroll-content {
		padding:
			0
			13px;
	}


	.ss-cfs-list-link {
		grid-template-columns:
			105px
			minmax(
				0,
				1fr
			);

		gap: 12px;
	}


	.ss-cfs-list-title {
		font-size: 16px;
	}


	.ss-cfs-list-excerpt {
		font-size: 13px;

		-webkit-line-clamp: 2;
	}


	.ss-cfs-list-read-more {
		margin-top: 6px;

		font-size: 13px;
	}

}


/* ==========================================================
   LIST ONLY  (shortcode option featured="no")
   ==========================================================

   The featured post is switched off, so the scrollable list
   takes the full width of the layout.

   Height: the list grows with its posts up to the height set
   by the list_height shortcode option, then scrolls.
   ========================================================== */

.ss-cfs-layout-list-only
.ss-cfs-columns {

	display: block;

}


.ss-cfs-layout-list-only
.ss-cfs-scroll-shell {

	height: auto;

}


.ss-cfs-layout-list-only
.ss-cfs-scroll-column {

	height: auto;

	max-height:
		var(
			--ss-cfs-list-height,
			600px
		);

}


/*
 * Desktop only: keep the post images the same size as they are
 * beside a featured post, instead of stretching with the wider
 * list. Tablet and mobile already use fixed image widths.
 */

@media
(
	min-width: 951px
) {

	.ss-cfs-layout-list-only
	.ss-cfs-list-link {

		grid-template-columns:
			240px
			minmax(
				0,
				1fr
			);

	}

}


/*
 * Mobile: let a short list shrink to fit its posts, and never
 * let the list grow taller than the standard mobile scroll
 * height, whatever list_height is set to.
 */

@media
(
	max-width: 700px
) {

	.ss-cfs-layout-list-only
	.ss-cfs-scroll-shell {

		height: auto !important;

		max-height: none !important;

	}


	.ss-cfs-layout-list-only
	.ss-cfs-scroll-column {

		height: auto;

		max-height:
			min(
				var(
					--ss-cfs-list-height,
					600px
				),
				70vh,
				650px
			);

	}

}