/**
 * ==========================================================
 * SHELVING STORE
 * CATEGORY HORIZONTAL SCROLL
 * ==========================================================
 *
 * Desktop:
 * Horizontal cards
 *
 * Tablet:
 * Horizontal cards
 *
 * Mobile:
 * Vertically scrolling post list
 *
 * News:
 * Combined posts and newsletters
 */


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

.ss-chs-layout {
	--ss-chs-gap: 18px;

	width: 100%;

	margin: 0 0 40px;
}


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



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

.ss-chs-category-title {
	margin: 0 0 16px;

	color: #4a4540;

	font-size:
		clamp(
			27px,
			3vw,
			38px
		);

	font-weight: 700;

	line-height: 1.15;
}



/* ==========================================================
   NAVIGATION SHELL
   ========================================================== */

.ss-chs-navigation-shell {
	position: relative;

	width: 100%;
}



/* ==========================================================
   SCROLL CONTAINER
   ========================================================== */

.ss-chs-scroll-wrapper {
	width: 100%;

	padding-bottom: 13px;

	overflow-x: auto;

	overflow-y: hidden;

	scroll-behavior: smooth;

	scroll-snap-type: x proximity;

	overscroll-behavior-inline: contain;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: thin;

	scrollbar-color:
		#8b8b8b
		#dedede;

	cursor: grab;
}


.ss-chs-scroll-wrapper:focus {
	outline:
		2px
		solid
		#33cc33;

	outline-offset: 4px;
}


.ss-chs-scroll-wrapper.ss-chs-is-dragging {
	cursor: grabbing;

	user-select: none;
}


.ss-chs-scroll-wrapper::-webkit-scrollbar {
	height: 10px;
}


.ss-chs-scroll-wrapper::-webkit-scrollbar-track {
	background: #dedede;

	border-radius: 20px;
}


.ss-chs-scroll-wrapper::-webkit-scrollbar-thumb {
	background: #8b8b8b;

	border:
		2px
		solid
		#dedede;

	border-radius: 20px;
}


.ss-chs-scroll-wrapper::-webkit-scrollbar-thumb:hover {
	background: #666;
}



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

.ss-chs-nav-button {
	position: absolute;

	z-index: 20;

	top: 42%;

	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
		);

	opacity: 1;

	transform:
		translateY(
			-50%
		);

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


.ss-chs-nav-button:hover,
.ss-chs-nav-button:focus-visible {
	background: #33cc33;

	color: #ffffff;

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


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

	outline-offset: 3px;
}


.ss-chs-nav-previous {
	left: 10px;
}


.ss-chs-nav-next {
	right: 10px;
}



/* ==========================================================
   DISABLED NAVIGATION BUTTONS
   ========================================================== */

.ss-chs-nav-button:disabled {
	background: #d9d9d9;

	color: #8a8a8a;

	cursor: not-allowed;

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

	opacity: 1;

	transform:
		translateY(
			-50%
		);
}


.ss-chs-nav-button:disabled:hover,
.ss-chs-nav-button:disabled:focus,
.ss-chs-nav-button:disabled:focus-visible {
	background: #d9d9d9;

	color: #8a8a8a;

	outline: none;

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


/**
 * Hide both controls when no overflow exists.
 */

.ss-chs-nav-button[hidden] {
	display: none;
}



/* ==========================================================
   NAVIGATION ICONS
   ========================================================== */

.ss-chs-icon {
	display: flex;

	align-items: center;

	justify-content: center;

	width: 25px;

	height: 25px;
}


.ss-chs-icon svg {
	display: block;

	width: 100%;

	height: 100%;

	overflow: visible;
}


.ss-chs-icon path {
	fill: none;

	stroke: currentColor;

	stroke-width: 3.3;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.ss-chs-icon-up,
.ss-chs-icon-down {
	display: none;
}



/* ==========================================================
   POST TRACK
   ========================================================== */

.ss-chs-post-track {
	display: flex;

	flex-wrap: nowrap;

	align-items: flex-start;

	gap:
		var(
			--ss-chs-gap
		);

	width: 100%;
}



/* ==========================================================
   POST CARD
   ========================================================== */

.ss-chs-post-card {
	flex:
		0
		0
		calc(
			(
				100%
				-
				(
					var(--ss-chs-gap)
					*
					(
						var(--ss-chs-visible)
						-
						1
					)
				)
			)
			/
			var(--ss-chs-visible)
		);

	width:
		calc(
			(
				100%
				-
				(
					var(--ss-chs-gap)
					*
					(
						var(--ss-chs-visible)
						-
						1
					)
				)
			)
			/
			var(--ss-chs-visible)
		);

	min-width: 0;

	margin: 0;

	scroll-snap-align: start;
}


.ss-chs-post-link {
	display: block;

	width: 100%;

	height: 100%;

	color: #4a4540;

	text-decoration: none;
}


.ss-chs-post-link:hover,
.ss-chs-post-link:focus {
	color: #4a4540;

	text-decoration: none;
}



/* ==========================================================
   STANDARD POST IMAGE
   ========================================================== */

.ss-chs-image {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #eeeeee;
}


.ss-chs-image-file {
	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	object-fit: cover;

	object-position: center;

	transition:
		transform
		0.25s
		ease;
}


.ss-chs-post-link:hover
.ss-chs-image-file {
	transform: scale(1.035);
}



/* ==========================================================
   NEWSLETTER VERTICAL PREVIEW
   ========================================================== */

/**
 * Newsletter images remain in a vertical format.
 *
 * The preview fills most of the image area while keeping
 * the top of the newsletter visible.
 *
 * The lower part may be cropped, which gives the appearance
 * of a full newsletter extending beyond the preview.
 */

.ss-chs-newsletter-card
.ss-chs-image {
	display: flex;

	align-items: flex-start;

	justify-content: center;

	aspect-ratio: 16 / 9;

	padding:
		10px
		18px
		0;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#eceae8,
			#f7f7f7
		);
}


.ss-chs-newsletter-image-file {
	display: block;

	width: 62%;

	max-width: 190px;

	height: auto;

	max-height: none;

	margin:
		0
		auto;

	object-fit: contain;

	object-position:
		center
		top;

	background: #ffffff;

	border:
		1px
		solid
		#d5d5d5;

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

	transform: none;
}


/**
 * Keep the newsletter preview stable on hover.
 */

.ss-chs-newsletter-card
.ss-chs-post-link:hover
.ss-chs-newsletter-image-file {
	transform: none;
}



/* ==========================================================
   NORMAL IMAGE PLACEHOLDER
   ========================================================== */

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

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	padding: 20px;

	background: #eeeeee;

	color: #777;

	font-size: 14px;

	text-align: center;
}



/* ==========================================================
   NEWSLETTER FALLBACK PREVIEW
   ========================================================== */

.ss-chs-newsletter-placeholder {
	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 46%;

	height: 90%;

	padding: 12px;

	background:
		linear-gradient(
			155deg,
			#4a4540 0%,
			#4a4540 68%,
			#c7652a 68%,
			#c7652a 100%
		);

	border:
		1px
		solid
		rgba(
			255,
			255,
			255,
			0.35
		);

	color: #ffffff;

	text-align: center;

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


.ss-chs-newsletter-envelope {
	width: 42px;

	height: auto;

	margin-bottom: 7px;
}


.ss-chs-newsletter-envelope svg {
	display: block;

	width: 100%;

	height: auto;
}


.ss-chs-newsletter-envelope rect,
.ss-chs-newsletter-envelope path {
	fill: none;

	stroke: #33cc33;

	stroke-width: 3;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.ss-chs-newsletter-placeholder-label {
	margin-bottom: 2px;

	color: #ffffff;

	font-size: 10px;

	font-weight: 500;

	letter-spacing: 0.03em;
}


.ss-chs-newsletter-placeholder-title {
	color: #ffffff;

	font-size:
		clamp(
			14px,
			1.25vw,
			18px
		);

	font-weight: 700;

	line-height: 1.15;
}



/* ==========================================================
   CONTENT TYPE AND DATE
   ========================================================== */

.ss-chs-content-meta {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	margin-top: 9px;
}



/* ==========================================================
   NEWSLETTER BADGE
   ========================================================== */

.ss-chs-newsletter-badge {
	display: inline-flex;

	align-items: center;

	padding:
		5px
		9px;

	background: #c7652a;

	border-radius: 3px;

	color: #ffffff;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.07em;

	line-height: 1;

	text-transform: uppercase;
}


.ss-chs-newsletter-card
.ss-chs-post-link:hover
.ss-chs-newsletter-badge {
	background: #33cc33;
}



/* ==========================================================
   CONTENT DATE
   ========================================================== */

.ss-chs-content-date {
	display: block;

	margin-top: 5px;

	color: #77716b;

	font-size: 12px;

	font-weight: 500;

	line-height: 1.25;
}


/**
 * Posts do not have a Newsletter label.
 *
 * Reduce the empty space above their date.
 */

.ss-chs-post-card:not(
	.ss-chs-newsletter-card
)
.ss-chs-content-date {
	margin-top: 0;
}



/* ==========================================================
   POST TITLE
   ========================================================== */

.ss-chs-post-title {
	display: -webkit-box;

	margin: 7px 0 0;

	overflow: hidden;

	color: #4a4540;

	font-size:
		clamp(
			15px,
			1.35vw,
			18px
		);

	font-weight: 700;

	line-height: 1.28;

	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;
}


.ss-chs-post-link:hover
.ss-chs-post-title {
	color: #269e26;
}



/* ==========================================================
   ERROR
   ========================================================== */

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

	background: #fff2f2;

	border-left:
		5px
		solid
		#b62c2c;

	color: #682323;

	font-size: 15px;
}



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

@media
(
	max-width: 900px
) {

	.ss-chs-layout {
		--ss-chs-gap: 16px;
	}


	.ss-chs-post-card {
		flex-basis:
			calc(
				(
					100%
					-
					24px
				)
				/
				2.4
			);

		width:
			calc(
				(
					100%
					-
					24px
				)
				/
				2.4
			);
	}


	.ss-chs-post-title {
		font-size: 16px;
	}


	.ss-chs-nav-button {
		width: 42px;

		height: 42px;
	}


	.ss-chs-newsletter-image-file {
		width: 64%;

		max-width: 180px;
	}


	.ss-chs-newsletter-placeholder {
		width: 50%;
	}

}



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

@media
(
	max-width: 600px
) {

	.ss-chs-layout {
		--ss-chs-gap: 0;
	}


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


	.ss-chs-navigation-shell {
		padding:
			34px
			0;
	}


	.ss-chs-scroll-wrapper {
		width: 100%;

		height:
			min(
				70vh,
				650px
			);

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

		padding: 0;

		overflow-x: hidden;

		overflow-y: auto;

		scroll-snap-type: none;

		overscroll-behavior-block: contain;

		background: #f2f2f2;

		border:
			1px
			solid
			#dedede;

		border-radius: 3px;

		cursor: default;

		scrollbar-width: thin;

		scrollbar-color:
			#858585
			#dedede;
	}


	.ss-chs-scroll-wrapper.ss-chs-is-dragging {
		cursor: default;

		user-select: auto;
	}


	.ss-chs-scroll-wrapper::-webkit-scrollbar {
		width: 10px;

		height: 0;
	}


	.ss-chs-scroll-wrapper::-webkit-scrollbar-track {
		background: #dedede;

		border-radius: 0;
	}


	.ss-chs-scroll-wrapper::-webkit-scrollbar-thumb {
		background: #858585;

		border:
			3px
			solid
			#dedede;

		border-radius: 20px;
	}



	/* ----------------------------------------------------------
	   MOBILE NAVIGATION BUTTONS
	   ---------------------------------------------------------- */

	.ss-chs-nav-button {
		left: 50%;

		right: auto;

		top: auto;

		width: 42px;

		height: 42px;
	}


	.ss-chs-nav-button:hover,
	.ss-chs-nav-button:focus-visible {
		transform:
			translateX(
				-50%
			)
			scale(
				1.08
			);
	}


	.ss-chs-nav-previous {
		top: 0;

		bottom: auto;

		transform:
			translateX(
				-50%
			);
	}


	.ss-chs-nav-next {
		top: auto;

		bottom: 0;

		transform:
			translateX(
				-50%
			);
	}


	.ss-chs-nav-button:disabled,
	.ss-chs-nav-button:disabled:hover,
	.ss-chs-nav-button:disabled:focus,
	.ss-chs-nav-button:disabled:focus-visible {
		transform:
			translateX(
				-50%
			)
			scale(
				1
			);
	}


	.ss-chs-icon-left,
	.ss-chs-icon-right {
		display: none;
	}


	.ss-chs-icon-up,
	.ss-chs-icon-down {
		display: flex;
	}



	/* ----------------------------------------------------------
	   VERTICAL POST LIST
	   ---------------------------------------------------------- */

	.ss-chs-post-track {
		display: block;

		width: 100%;

		gap: 0;
	}


	.ss-chs-post-card {
		display: block;

		flex: none;

		width: 100%;

		min-width: 0;

		margin: 0;

		padding:
			14px
			14px;

		border-bottom:
			1px
			solid
			#999;

		scroll-snap-align: none;
	}


	.ss-chs-post-card:last-child {
		border-bottom: 0;
	}


	.ss-chs-post-link {
		display: grid;

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

		grid-template-rows:
			auto
			auto;

		align-items: start;

		gap:
			5px
			14px;

		width: 100%;

		height: auto;
	}



	/* ----------------------------------------------------------
	   MOBILE IMAGE
	   ---------------------------------------------------------- */

	.ss-chs-image {
		grid-column: 1;

		grid-row:
			1
			/
			span
			2;

		width: 110px;

		aspect-ratio: 16 / 9;
	}


	.ss-chs-post-link:hover
	.ss-chs-image-file {
		transform: none;
	}



	/* ----------------------------------------------------------
	   MOBILE NEWSLETTER VERTICAL PREVIEW
	   ---------------------------------------------------------- */

	.ss-chs-newsletter-card
	.ss-chs-image {
		align-items: flex-start;

		justify-content: center;

		padding:
			4px
			6px
			0;

		overflow: hidden;
	}


	.ss-chs-newsletter-image-file {
		width: 58%;

		max-width: 58%;

		height: auto;

		max-height: none;

		margin:
			0
			auto;

		object-fit: contain;

		object-position:
			center
			top;
	}


	.ss-chs-newsletter-placeholder {
		width: 45%;

		height: 90%;

		padding: 4px;
	}


	.ss-chs-newsletter-envelope {
		width: 23px;

		margin-bottom: 2px;
	}


	.ss-chs-newsletter-placeholder-label {
		display: none;
	}


	.ss-chs-newsletter-placeholder-title {
		font-size: 10px;
	}



	/* ----------------------------------------------------------
	   MOBILE META
	   ---------------------------------------------------------- */

	.ss-chs-content-meta {
		grid-column: 2;

		grid-row: 1;

		align-self: start;

		margin: 0;
	}


	.ss-chs-newsletter-badge {
		margin: 0;

		padding:
			4px
			7px;

		font-size: 9px;
	}


	.ss-chs-content-date {
		margin-top: 4px;

		font-size: 11px;
	}



	/* ----------------------------------------------------------
	   MOBILE TITLE
	   ---------------------------------------------------------- */

	.ss-chs-post-title {
		grid-column: 2;

		grid-row: 2;

		margin: 2px 0 0;

		font-size: 17px;

		line-height: 1.25;

		-webkit-line-clamp: 3;
	}

}



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

@media
(
	max-width: 420px
) {

	.ss-chs-post-card {
		padding:
			12px
			11px;
	}


	.ss-chs-post-link {
		grid-template-columns:
			95px
			minmax(
				0,
				1fr
			);

		gap:
			4px
			12px;
	}


	.ss-chs-image {
		width: 95px;
	}


	.ss-chs-post-title {
		font-size: 16px;
	}


	.ss-chs-content-date {
		font-size: 10px;
	}

}