/***************************************************************/
/******************* Testimonial Slider and Showcase Pro **********************/
/******************* support@radiustheme.com *******************/
/*************** copyright (c) 2017 @ RadiusTheme.com ***********/
/***************************************************************/

/*********************** Design tokens *************************/
/* Shared by the layout 1 card and the global pagination design. */

.tss-wrapper {
	--tss-primary: #3858e9;
	--tss-primary-hover: #2843c4;
	--tss-primary-soft: #eef1fe;
	--tss-star: #f5b800;
	--tss-ink: #1f2330;
	--tss-muted: #6a6f7e;
	--tss-line: #e7e8ee;
	--tss-card: #ffffff;
	--tss-panel: #f7f8fb;
	--tss-slide: #f8f9fc;
	--tss-line-soft: #ebecf1;
	--tss-radius: 16px;
}

/*********************** Grid System **************************/

.rt-container,
.rt-container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

.rt-row {
	margin-left: -15px;
	margin-right: -15px;
}

.rt-row:after,
.rt-row:before {
	display: table;
	content: " ";
}

.rt-row:after {
	clear: both;
}

.rt-col-xs-1,
.rt-col-sm-1,
.rt-col-md-1,
.rt-col-lg-1,
.rt-col-xs-2,
.rt-col-sm-2,
.rt-col-md-2,
.rt-col-lg-2,
.rt-col-xs-3,
.rt-col-sm-3,
.rt-col-md-3,
.rt-col-lg-3,
.rt-col-xs-4,
.rt-col-sm-4,
.rt-col-md-4,
.rt-col-lg-4,
.rt-col-xs-5,
.rt-col-sm-5,
.rt-col-md-5,
.rt-col-lg-5,
.rt-col-xs-6,
.rt-col-sm-6,
.rt-col-md-6,
.rt-col-lg-6,
.rt-col-xs-7,
.rt-col-sm-7,
.rt-col-md-7,
.rt-col-lg-7,
.rt-col-xs-8,
.rt-col-sm-8,
.rt-col-md-8,
.rt-col-lg-8,
.rt-col-xs-9,
.rt-col-sm-9,
.rt-col-md-9,
.rt-col-lg-9,
.rt-col-xs-10,
.rt-col-sm-10,
.rt-col-md-10,
.rt-col-lg-10,
.rt-col-xs-11,
.rt-col-sm-11,
.rt-col-md-11,
.rt-col-lg-11,
.rt-col-xs-12,
.rt-col-sm-12,
.rt-col-md-12,
.rt-col-lg-12,
.rt-col-xs-24,
.rt-col-sm-24,
.rt-col-md-24,
.rt-col-lg-24 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.rt-col-xs-1,
.rt-col-xs-2,
.rt-col-xs-3,
.rt-col-xs-4,
.rt-col-xs-5,
.rt-col-xs-6,
.rt-col-xs-7,
.rt-col-xs-8,
.rt-col-xs-9,
.rt-col-xs-10,
.rt-col-xs-11,
.rt-col-xs-12,
.rt-col-xs-24 {
	float: left;
}

.rt-col-xs-12 {
	width: 20%;
}

.rt-col-xs-12 {
	width: 100%;
}

.rt-col-xs-11 {
	width: 91.66666667%;
}

.rt-col-xs-10 {
	width: 83.33333333%;
}

.rt-col-xs-9 {
	width: 75%;
}

.rt-col-xs-8 {
	width: 66.66666667%;
}

.rt-col-xs-7 {
	width: 58.33333333%;
}

.rt-col-xs-6 {
	width: 50%;
}

.rt-col-xs-5 {
	width: 41.66666667%;
}

.rt-col-xs-4 {
	width: 33.33333333%;
}

.rt-col-xs-3 {
	width: 25%;
}

.rt-col-xs-2 {
	width: 16.66666667%;
}

.rt-col-xs-1 {
	width: 8.33333333%;
}

.tss-wrapper[data-layout*="layout"] .rt-row.tss-even {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/************************ End Grid System *********************/

/* Common CSS */

/* Start loading */
.tss-wrapper .tss-pre-loader {
	position: relative;
	overflow: hidden;
	max-height: 300px;
	min-height: 200px;
}

.tss-wrapper .tss-even .tss-grid-item {
	margin-bottom: 30px;
}

.tss-wrapper .tss-even .tss-grid-item .video-testimonial-wrap iframe {
	max-width: 100%;
}

.tss-wrapper .rt-loading-overlay {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #fff;
	-webkit-transition: opacity 0.1s, visibility 0.1s;
	transition: opacity 0.1s, visibility 0.1s;
}

.tss-wrapper .rt-loading {
	color: #fb4c35;
	position: absolute;
	/* top: 60px; */
	top: 50%;
	margin-top: -16px;
	left: 50%;
	margin-left: -16px;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
}

.tss-wrapper .tss-pre-loader .rt-loading-overlay {
	opacity: 0.8;
	visibility: visible;
}

.tss-wrapper .tss-pre-loader .rt-loading {
	opacity: 1;
	visibility: visible;
}

.rt-ball-clip-rotate {
	width: 32px;
	height: 32px;
}

.rt-ball-clip-rotate {
	display: block;
	font-size: 0;
	color: #fff;
}

.rt-ball-clip-rotate,
.rt-ball-clip-rotate > div {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.rt-ball-clip-rotate > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor;
}

.rt-ball-clip-rotate > div {
	width: 32px;
	height: 32px;
	background: transparent;
	border-width: 2px;
	border-bottom-color: transparent;
	border-radius: 100%;
	-webkit-animation: ball-clip-rotate 0.75s linear infinite;
	-moz-animation: ball-clip-rotate 0.75s linear infinite;
	-o-animation: ball-clip-rotate 0.75s linear infinite;
	animation: ball-clip-rotate 0.75s linear infinite;
}

/* end loading */
.tss-wrapper .rt-responsive-img {
	max-width: 100%;
	height: auto;
}

.tss-wrapper[data-layout*="carousel"] .rt-responsive-img {
	/* width: auto !important;
	height: auto !important;
	max-width: 100% !important; */
}

.tss-carousel.swiper .profile-img-wrapper {
	position: relative;
}

.tss-carousel-thumb.swiper .rt-dummy-img + .swiper-lazy-preloader,
.tss-carousel.swiper .rt-dummy-img + .swiper-lazy-preloader {
	display: none;
}

.tss-wrapper .swiper-lazy-preloader {
	border: 4px solid #2550ea;
	border-top-color: transparent;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	margin-top: -17px;
	opacity: 0.75;
	border-radius: 50%;
}

.tss-carousel-thumb.swiper .rt-responsive-img,
.tss-carousel.swiper .rt-responsive-img {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.tss-carousel-thumb.swiper .swiper-lazy:not(.swiper-lazy-loaded),
.tss-carousel.swiper .swiper-lazy:not(.swiper-lazy-loaded) {
	min-height: 150px;
	opacity: 0;
}

.tss-wrapper[data-layout="carousel12"] .tss-carousel-thumb .swiper-lazy:not(.swiper-lazy-loaded),
.tss-wrapper[data-layout="carousel11"] .tss-carousel-thumb .swiper-lazy:not(.swiper-lazy-loaded) {
	min-height: 132px;
}

.tss-wrapper .swiper-lazy-preloader:after {
	background: none;
}

.tss-wrapper img.rt-responsive-img.rt-dummy-img {
	width: 150px;
}

.tss-wrapper .tss-load-more .rt-button {
	display: inline-block;
}

.tss-wrapper .tss-img-circle .profile-img-wrapper img {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.tss-wrapper .author-social a,
.tss-wrapper .tss-social-share a {
	display: inline-flex;
	text-decoration: none;
	box-shadow: none !important;
	margin: 5px;
	color: #2529ed;
}

.tss-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-social-share i.fa,
.tss-wrapper .author-social span.dashicons {
	width: auto;
	height: auto;
}

.tss-wrapper .tss-social-share .dashicons::before,
.tss-wrapper .author-social span.dashicons::before {
	transition: all 0.3s;
}

.tss-wrapper .tss-social-share a:hover .dashicons::before,
.tss-wrapper .author-social a:hover span.dashicons::before {
	opacity: 0.8;
}

.rt-sm-sortable-list .social-item span.dashicons-skype:before,
.rt-sm-sortable-list .social-item span.dashicons-telegram:before,
.tss-wrapper .author-social .dashicons-skype:before,
.tss-wrapper .author-social .dashicons-telegram:before {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: center;
	margin: auto;
	background-color: #2529ed;
}

.rt-sm-sortable-list .social-item span.dashicons::before {
	color: #333;
}

.rt-sm-sortable-list .social-item span.dashicons-skype:before,
.rt-sm-sortable-list .social-item span.dashicons-telegram:before {
	background-color: #333;
}

.rt-sm-sortable-list .social-item span.dashicons-skype:before,
.tss-wrapper .author-social .dashicons-skype:before {
	-webkit-mask-image: url(../images/skype.svg);
	mask-image: url(../images/skype.svg);
}

.rt-sm-sortable-list .social-item span.dashicons-telegram:before,
.tss-wrapper .author-social .dashicons-telegram:before {
	-webkit-mask-image: url(../images/telegram.svg);
	mask-image: url(../images/telegram.svg);
}

/* ---- Social + share icon normalisation (all layouts) ----
   Left alone, a row mixes three sizing systems: dashicon glyphs (20px font),
   the X mask (the unscoped ".dashicons-twitter" is a 15px box with a 3px top
   margin, so it sits low and off-centre in its link, and its :before is
   painted a hard-coded black) and the Skype/Telegram masks (painted a
   hard-coded blue). These base rules put every icon in the same 1em box,
   centred, painted in the link colour. They stay at base specificity so a
   layout's own ".tss-layoutN ..." rules (chip sizes, colours) still win, and
   so do the shortcode and Elementor style controls. */
.tss-wrapper .author-social a,
.tss-wrapper .tss-social-share a {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
}

.tss-wrapper .author-social .dashicons,
.tss-wrapper .tss-social-share .dashicons {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	/* When the row is squeezed, a flex item's automatic minimum size is its
	   content (the X mask is only 0.8em), so width/height alone would let it
	   shrink. */
	min-width: 1em;
	min-height: 1em;
	margin: 0;
	line-height: 1;
}

/* rtShare prints a "Share on:" label ahead of the icons. Layouts that design
   it style it themselves at higher specificity; everywhere else it used to
   fall back to the theme's body text, far larger and darker than the icons. */
.tss-wrapper .tss-social-share .share-icons,
.tss-wrapper .author-social .tss-social-label {
	margin-right: 4px;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--tss-muted, #6a6f7e);
}

/* These three put the author block on a dark photo overlay with white icons. */
.tss-wrapper .tss-layout9 .tss-social-share .share-icons,
.tss-wrapper .tss-isotope4 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel9 .tss-social-share .share-icons,
.tss-wrapper .tss-layout9 .author-social .tss-social-label,
.tss-wrapper .tss-isotope4 .author-social .tss-social-label,
.tss-wrapper .tss-carousel9 .author-social .tss-social-label {
	color: rgba(255, 255, 255, 0.8);
}

.tss-wrapper .author-social .dashicons-skype:before,
.tss-wrapper .author-social .dashicons-telegram:before,
.tss-wrapper .author-social .dashicons-twitter:before,
.tss-wrapper .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-social-share .dashicons-twitter:before {
	width: 1em;
	height: 1em;
	margin: 0;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs, which sit
   inside theirs with padding - shrink it to match their optical size. */
.tss-wrapper .author-social .dashicons-twitter:before,
.tss-wrapper .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* "dashicons-facebook" is the rounded-square logo with the "f" drawn off
   centre inside it, so it reads as misaligned next to the plain glyphs. Use
   the plain "f" (dashicons-facebook-alt), as the social share row does. */
.tss-wrapper .author-social .dashicons-facebook:before {
	content: "\f305";
}

.tss-wrapper .tss-utility {
	margin: 15px 0;
	text-align: center;
}

/*************** Isotope filter bar (all isotope layouts) *************/
/* One segmented pill for every isotope wall. It began as isotope 1's and was
   unscoped once isotope 2 moved onto layout 4's card and turned up under the
   old flat grey buttons — the filter row is chrome around the wall, not part
   of any one layout's card, so it belongs here with the other shared pieces.

   The Button style controls still win: they are emitted from an inline <style>
   keyed on #layoutID, which outranks everything below. */
/* ---------- Filter row: segmented pill control ---------- */
.tss-wrapper .tss-iso-filter {
	margin: 0 0 40px;
}

/* Elementor editor only: the section's "+ / move / x" tab hangs over the top
   centre of the section - exactly where the filter buttons sit - so hovering a
   button landed on the tab and the button's tooltip closed at once. */
.elementor-editor-active .tss-wrapper .tss-iso-filter {
	padding-top: 32px;
}

.tss-wrapper .tss-isotope-button-wrapper {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 5px;
	background: #f1f3f9;
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 999px;
	-webkit-box-shadow: inset 0 1px 2px rgba(27, 31, 42, 0.05);
	box-shadow: inset 0 1px 2px rgba(27, 31, 42, 0.05);
	vertical-align: middle;
}

/* Beats the generic ".tss-isotope-button-wrapper .rt-iso-button { background:
   #6f6f6f }" further up this file. The Button style controls emit from an
   inline <style> keyed on #layoutID, so a user-set filter colour still wins. */
.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button {
	position: relative;
	z-index: 1;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tss-muted, #6a6f7e);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	/* The buttons are <span>, not <button>: without this they show a text
	   caret. The flat rules they replaced carried it on :hover only. */
	cursor: pointer;
	-webkit-transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button:hover {
	background: rgba(27, 31, 42, 0.05);
	color: var(--tss-ink, #1f2330);
}

.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button.selected,
.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button.selected:hover {
	background: var(--tss-primary, #3858e9);
	color: #ffffff;
	-webkit-box-shadow: 0 6px 16px rgba(56, 88, 233, 0.32);
	box-shadow: 0 6px 16px rgba(56, 88, 233, 0.32);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 32%, transparent);
}

/* The sliding pill. It has to be its own element rather than the selected
   button's background in order to animate from one button to the next, and it is
   created by wptestimonial.js rather than emitted with the filter row because
   that row is built by three separate renderers (TSSProSC, TSSElementorRender,
   TSSPreview) and none of them know which layout they are building it for.

   Until the script has measured the buttons the wrapper carries no
   .tss-glider-ready, so the selected button keeps its own solid pill above and
   the glider stays invisible - the filter is never left showing white text on
   the light track. The admin Layout Preview loads admin-preview.js, not
   wptestimonial.js, and therefore stays on that fallback: correct, unanimated.

   The pill's colour is set inline by the script, copied from whatever the
   selected button resolved to, so the Button "Background" and "Active
   Background" style controls keep driving it. The declaration here is the
   colour for the default case and the value the script reads. */
.tss-wrapper .tss-glider {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: 999px;
	background: var(--tss-primary, #3858e9);
	-webkit-box-shadow: 0 6px 16px rgba(56, 88, 233, 0.32);
	box-shadow: 0 6px 16px rgba(56, 88, 233, 0.32);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 32%, transparent);
	pointer-events: none;
	z-index: 0;
	-webkit-transition: -webkit-transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), width 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), height 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-isotope-button-wrapper:not(.tss-glider-ready) .tss-glider {
	opacity: 0;
}

/* Once the pill is live it carries the drop shadow, so the button underneath
   drops its own. The background is handed over inline by the script instead of
   here: a user-set button colour is emitted at ID specificity and no rule in
   this file could outrank it. */
.tss-wrapper .tss-isotope-button-wrapper.tss-glider-ready .rt-iso-button.selected,
.tss-wrapper .tss-isotope-button-wrapper.tss-glider-ready .rt-iso-button.selected:hover {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* The pill still moves to the right button, it just arrives immediately. */
@media (prefers-reduced-motion: reduce) {
	.tss-wrapper .tss-glider {
		-webkit-transition: none;
		transition: none;
	}
}

/* The per-category count. isoFilterCounter() in wptestimonial.js fills
   data-filter-counter on isotope init - the same number the hover tooltip
   shows - so the chip needs no new markup. It stays hidden until the
   attribute is populated so an empty pill never flashes on first paint. */
.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button:after {
	content: attr(data-filter-counter);
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(27, 31, 42, 0.08);
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button[data-filter-counter=""]:after {
	display: none;
}

.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button.selected:after {
	background: rgba(255, 255, 255, 0.24);
}

/* Star glyphs inside a rating-mode filter button. */
.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button i {
	margin: 0 1px;
	font-size: 15px;
	line-height: 1;
}

.tss-wrapper .iso-search {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

.tss-wrapper .iso-search input {
	height: 44px;
	padding: 0 18px;
	background: #ffffff;
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 999px;
	font-size: 15px;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: border-color 0.16s ease, box-shadow 0.16s ease;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tss-wrapper .iso-search input:focus {
	border-color: var(--tss-primary, #3858e9);
	-webkit-box-shadow: 0 0 0 4px rgba(56, 88, 233, 0.14);
	box-shadow: 0 0 0 4px rgba(56, 88, 233, 0.14);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tss-primary, #3858e9) 14%, transparent);
}

@media only screen and (max-width: 640px) {
	.tss-wrapper .tss-isotope-button-wrapper .rt-iso-button {
		padding: 9px 16px;
		font-size: 14px;
	}

	.tss-wrapper .iso-search {
		margin: 10px 0 0;
	}
}

.tss-wrapper .tss-utility .rt-button {
	background: #6f6f6f;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	padding: 10px 15px;
	text-transform: capitalize;
	margin-right: 4px;
	position: relative;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.tss-wrapper .tss-utility .rt-button:hover {
	cursor: pointer;
	background: #000;
}

.tss-wrapper .single-item-wrapper h3.author-name {
	font-size: 24px;
	margin: 15px 0 8px;
	padding: 0px;
	line-height: 1.25;
	font-weight: 400;
	color: #2550ea;
}

.tss-wrapper .rt-read-more {
	color: #2550ea;
}

.tss-wrapper .single-item-wrapper h3.author-name a {
	text-decoration: none;
}

.tss-wrapper .single-item-wrapper h4.author-bio {
	font-size: 18px;
	margin-top: 8px;
	margin-bottom: 15px;
	padding: 0px;
	line-height: 1.4;
	text-transform: none;
	font-weight: 400;
	color: #333;
}

.tss-wrapper .single-item-wrapper .author-social,
.tss-wrapper .single-item-wrapper .tss-social-share {
	text-align: center;
	margin-bottom: 8px;
}

.tss-carousel-thumb.swiper:not(.swiper-initialized) .swiper-wrapper,
.tss-carousel.swiper:not(.swiper-initialized) .swiper-wrapper {
	opacity: 0;
}
.tlp-average-rating i,
.tss-wrapper .tss-isotope-button-wrapper i{
	color: gold;
}
.tlp-average-rating i{
	margin: 3px 0 0 ;
}
.tss-wrapper .tss-meta-info.tss-left {
	/* max-width: 165px; */
}

.tss-wrapper .tss-carousel_video > .carousel-wrapper {
	width: 100%;
}

/************ Carousel Button Style ****************/

.tss-wrapper[data-layout="carousel12"] .carousel-wrapper,
.tss-wrapper[data-layout="carousel11"] .carousel-wrapper,
.tss-wrapper[data-layout*="carousel"] {
	position: relative;
}

.tss-carousel-main.swiper,
.tss-carousel.swiper {
	position: static;
}

.tss-carousel-main .swiper-arrow,
.tss-carousel .swiper-arrow {
	background: #2550ea;
	width: 30px;
	height: 30px;
	display: block;
	border-radius: 4px;
	text-align: center;
	line-height: 30px;
	/* margin-top: -15px; */
	margin-top: -55px;
	opacity: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border: 1px solid transparent;
}

.tss-wrapper[data-layout="carousel12"] .carousel-wrapper .swiper-arrow,
.tss-wrapper[data-layout="carousel11"] .carousel-wrapper .swiper-arrow {
	margin-top: -35px;
}

.tss-wrapper[data-layout="carousel12"] .carousel-wrapper .swiper-pagination,
.tss-wrapper[data-layout="carousel11"] .carousel-wrapper .swiper-pagination {
	display: none;
}

.tss-carousel-main.swiper .swiper-pagination,
.tss-carousel.swiper .swiper-pagination {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	bottom: -10px !important;
	width: 100%;
}

.tss-carousel-main.swiper:not(.swiper-initialized) .swiper-pagination,
.tss-carousel.swiper:not(.swiper-initialized) .swiper-pagination {
	opacity: 0;
}

.tss-carousel-main.swiper.swiper.swiper-container-initialized .swiper-pagination,
.tss-carousel.swiper.swiper.swiper-container-initialized .swiper-pagination,
.tss-carousel-thumb.swiper.swiper-container-initialized .swiper-wrapper,
.tss-carousel.swiper.swiper-container-initialized .swiper-wrapper,
.swiper-container-initialized.tss-carousel-main .swiper-button-next:not(.swiper-button-disabled),
.swiper-container-initialized.tss-carousel-main .swiper-button-prev:not(.swiper-button-disabled),
.swiper-container-initialized.tss-carousel .swiper-button-next:not(.swiper-button-disabled),
.swiper-container-initialized.tss-carousel .swiper-button-prev:not(.swiper-button-disabled),
.swiper-initialized.tss-carousel-main .swiper-button-next:not(.swiper-button-disabled),
.swiper-initialized.tss-carousel-main .swiper-button-prev:not(.swiper-button-disabled),
.swiper-initialized.tss-carousel .swiper-button-next:not(.swiper-button-disabled),
.swiper-initialized.tss-carousel .swiper-button-prev:not(.swiper-button-disabled) {
	opacity: 1 !important;
}

.tss-carousel-main .swiper-button-next::after,
.tss-carousel-main .swiper-button-prev::after,
.tss-carousel .swiper-button-next::after,
.tss-carousel .swiper-button-prev::after {
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	content: none !important;
}

.tss-carousel-main .swiper-arrow > i,
.tss-carousel .swiper-arrow > i {
	color: #fff;
	font-size: 16px;
	display: block;
	line-height: 30px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.tss-carousel-main.swiper-rtl .swiper-button-next > i::before,
.tss-carousel.swiper-rtl .swiper-button-next > i::before {
	content: "\f053";
}

.tss-carousel-main.swiper-rtl .swiper-button-prev > i::before,
.tss-carousel.swiper-rtl .swiper-button-prev > i::before {
	content: "\f054";
}

.tss-carousel-main .swiper-button-next,
.tss-carousel .swiper-button-next {
	right: -10px;
}

.tss-carousel-main:not(.swiper-rtl) .swiper-button-prev,
.tss-carousel .swiper-button-prev {
	left: -10px;
}

.tss-carousel.swiper-autoheight[data-dots='true'] .swiper-wrapper {
	margin-bottom: 50px;
}

.tss-carousel-main .swiper-pagination-bullet,
.tss-carousel .swiper-pagination-bullet {
	margin: 0 5px !important;
	width: 10px;
	height: 10px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background: #2550ea;
}

.tss-carousel-main .swiper-pagination-bullet:hover,
.tss-carousel-main .swiper-pagination-bullet-active,
.tss-carousel .swiper-pagination-bullet:hover,
.tss-carousel .swiper-pagination-bullet-active {
	opacity: 1;
	background: #2550ea;
}

/* Submit form */
#tss-submit-form {
	position: relative;
	padding: 20px;
}

#tss-submit-form.rtcessing:after {
	content: "";
	background: rgba(0, 0, 0, .4);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tss-submit-wrapper #tss-submit-response.error,
#tss-submit-form .field-holder .error {
	color: red;
}

#tss-submit-form .field-holder input.error,
#tss-submit-form .field-holder textarea.error {
	border-color: red;
}

#tss-submit-form .field-holder .valid {
	border-color: green;
}

.tss-submit-wrapper #tss-submit-response.success {
	color: green;
}

#tss-submit-form .field-holder:after {
	clear: both;
	display: block;
	content: "";
}

#tss-submit-form .field-holder {
	margin-bottom: 15px;
}

#tss-submit-form .rt-label {
	font-weight: 600;
	margin-bottom: 5px;
}

#tss-submit-form .rt-field-wrapper + .rt-field-wrapper {
	margin-top: 13px;
}

#tss-submit-form .field-holder .field > input,
#tss-submit-form .field-holder .field input[type=url],
#tss-submit-form .field-holder .field > textarea {
	width: 100%;
	box-sizing: border-box;
}

.rt-sm-sortable-list .social-item {
	margin-bottom: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.rt-sm-sortable-list .social-item span.dashicons {
	margin-right: 10px;
}
.tss-wrapper.tss-submit-wrapper {
	max-width: 700px;
	margin: 0 auto;
	border: 1px solid #0000001a;
	padding: 20px;
	border-radius: 10px;
}
.tss-wrapper.tss-submit-wrapper select:focus{
	border-width: 1px;
	box-shadow: none;
	outline: none;
}
.tss-wrapper.tss-submit-wrapper input,
.tss-wrapper.tss-submit-wrapper select,
.tss-wrapper.tss-submit-wrapper select:focus,
.tss-wrapper.tss-submit-wrapper textarea{
	border: 1px solid #0000001a;
}
.tss-wrapper.tss-submit-wrapper input:focus,
.tss-wrapper.tss-submit-wrapper textarea:focus{
	border-color: #999;
	outline: none;
}
#tss-submit-response p {
	font-size: 16px;
}
#tss-submit-form input[type=text],
#tss-submit-form input[type=url] {
	padding: 8px 8px;
	width: 100%;
}
#tss-submit-form textarea {
	height: 200px;
}
.field-holder.submit-holder input.tss-submit-button {
	font-size: 14px;
	padding: 10px 25px;
}
.tss-submit-wrapper .rt-rating > span {
	margin: 0;
	cursor: pointer;
}

.tss-submit-wrapper .rt-rating {
	display: inline-block;
}

.tss-submit-wrapper .rt-rating.selected span:before,
.tss-submit-wrapper .rt-rating:hover span:before,
.tss-submit-wrapper .rt-rating.selected:hover span:before {
	content: "\f155";
}

.tss-submit-wrapper .rt-rating:hover span:hover ~ span:before,
.tss-submit-wrapper .rt-rating span.active ~ span:before,
.tss-submit-wrapper .rt-rating.selected:hover span:hover ~ span:before {
	content: "\f154";
}
.tss-submit-wrapper #tss_social_media_holder .rt-label{
	 margin: 0 0 15px;
}
.tss-submit-wrapper #tss_social_media_holder .dashicons-skype,
.tss-submit-wrapper #tss_social_media_holder .dashicons-telegram,
.tss-submit-wrapper #tss_social_media_holder .dashicons-twitter{
	position: relative;
}
.tss-submit-wrapper #tss_social_media_holder .dashicons-skype:before,
.tss-submit-wrapper #tss_social_media_holder .dashicons-telegram:before,
.tss-submit-wrapper #tss_social_media_holder .dashicons-twitter:before{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.tss-submit-wrapper #tss_social_media_holder input:focus{
	outline: none;
	border: 1px solid #999;
}
.rt-sm-sortable-list .social-item span.dashicons {
	margin: 0;
	width: 44px;
	height: 44px;
	border: 1px solid;
	text-align: center;
	display: inline-block;
	line-height: 44px;
	border-radius: 3px 0 0 3px;
	border-right-width: 0;
	border-color: #0000001a;
}
.tss-submit-wrapper #tss_social_media_holder input{
	border-radius: 0 3px 3px 0;
}
/* single testimonial */
.rt-single-testimonial-detail {
	padding: 30px 0;
	margin: 30px 0 !important;
	overflow: hidden;
}

.rt-single-testimonial-detail .testi-meta {
	text-align: center;
}

.rt-single-testimonial-detail .tss-social-share a {
	display: inline-block;
	padding: 5px;
	margin-right: 5px;
}

.rt-single-testimonial-detail .tss-social-share a:last-child {
	margin-right: 0;
}

.clearfix:before,
.clearfix:after,
.rt-container-fluid:before,
.rt-container-fluid:after,
.rt-row:before,
.rt-row:after {
	content: " ";
	display: table;
}

.rt-single-testimonial-detail .testimonial + .author-social {
	margin-top: 20px;
}

.rt-single-testimonial-detail .testimonial + .tss-social-share,
.rt-single-testimonial-detail .author-social + .tss-social-share {
	margin-top: 10px;
}

.rt-single-testimonial-detail .author-social > a {
	display: inline-block;
	padding: 5px;
	margin-right: 5px;
}

/*
/* ---- Shared carousel arrows -------------------------------------------
   One arrow treatment for every carousel layout. Previously only carousel 1
   and carousel 3 carried the round design and each kept its own copy; every
   other carousel still had the legacy 30px blue square.

   Swiper's container is overflow:hidden, so an arrow offset outside it would
   be clipped. Making .carousel-wrapper the containing block (and the swiper
   container static) lets the arrows escape that clip: an absolutely positioned
   box is not clipped by an intermediate overflow ancestor when its containing
   block sits outside it.

   The thumbnail carousels (11 and 12) are deliberately excluded - they place
   their arrows over the thumb strip with their own margin-top offset. */
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper {
	position: relative;
	/* The bottom band is reserved for the dots. Without it the pagination
	   hangs at bottom:-10px over whatever fills the track, which collides
	   with the card on any layout whose slides stretch to equal height. */
	padding: 0 64px 34px;
}

/* The side gutter and the dot band are only earned when the controls are
   actually rendered. Arrows and pagination are printed conditionally by the
   render paths, so a carousel with navigation and dots switched off was
   still losing 128px of width and 34px of height to empty reservations.
   Written as :not(:has()) on purpose - a browser without :has() drops these
   rules and simply keeps the reservation, which is the old behaviour. */
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-arrow)) {
	padding-left: 0;
	padding-right: 0;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-pagination)) {
	padding-bottom: 0;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper > .tss-carousel,
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper > .tss-carousel-main {
	position: static;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow {
	/* half the reserved dot band, so the arrow keeps the track's centre line */
	top: calc(50% - 17px);
	width: 48px;
	height: 48px;
	margin-top: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	box-shadow: 0 6px 18px rgba(27, 31, 42, 0.10);
	display: -ms-grid;
	display: grid;
	place-items: center;
	line-height: 48px;
	cursor: pointer;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

/* The bundled fontello glyph is far heavier than this design's thin chevron, so
   the arrow mark is drawn in CSS instead (same approach as the read-more
   chevron - printHtml() runs wp_kses_post(), which would strip an inline SVG).
   The glyph is suppressed rather than the <i> hidden, so colour, hover and the
   button-colour style controls all still apply through currentColor. */
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow > i {
	color: var(--tss-ink, #1b1f2a);
	font-size: 0;
	line-height: 0;
	display: -ms-grid;
	display: grid;
	place-items: center;
	-webkit-transition: color 0.16s ease;
	transition: color 0.16s ease;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow > i::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	border-radius: 1px;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-button-next > i::before {
	-webkit-transform: translateX(-2px) rotate(45deg);
	transform: translateX(-2px) rotate(45deg);
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-button-prev > i::before {
	-webkit-transform: translateX(2px) rotate(-135deg);
	transform: translateX(2px) rotate(-135deg);
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:hover {
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	box-shadow: 0 10px 24px rgba(56, 88, 233, 0.32);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--tss-primary, #3858e9) 32%, transparent);
	-webkit-transform: translateY(-50%) scale(1.06);
	transform: translateY(-50%) scale(1.06);
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:hover > i {
	color: #ffffff;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:active {
	-webkit-transform: translateY(-50%) scale(0.97);
	transform: translateY(-50%) scale(0.97);
}

/* Keyboard users get the same affordance - swiper renders the arrow with
   role="button" and tabindex, so it is focusable but had no visible state. */
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:focus-visible {
	outline: none;
	border-color: var(--tss-primary, #3858e9);
	box-shadow: 0 0 0 4px #dbe1fb;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-button-prev {
	left: 0;
}

.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-button-next {
	right: 0;
}

/* Pagination resolves against .carousel-wrapper too - keep it centred. */
.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-pagination {
	left: 0;
	right: 0;
	width: auto;
	text-align: center;
	bottom: 0 !important;
}

/******************************************************/
/***************** Read more toggle  *****************/
/******************************************************/

/* One design for every layout's Read more button. Colours come from the
   --tss-primary tokens, so Elementor / shortcode style settings (which target
   .single-item-wrapper .tss-readmore-toggle at higher specificity) still win.
   Per-layout differences are listed right below — add new ones there, not as
   another full copy. */
.tss-wrapper .single-item-wrapper .tss-readmore-toggle {
	display: none;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-item-align: start;
	align-self: flex-start;
	gap: 6px;
	margin-top: 14px;
	padding: 2px 0;
	background: none;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--tss-primary, #3858e9);
	text-decoration: none;
	text-underline-offset: 3px;
	cursor: pointer;
	-webkit-transition: color 0.15s ease, box-shadow 0.15s ease;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.tss-wrapper .single-item-wrapper .tss-readmore-toggle.tss-is-visible {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.tss-wrapper .single-item-wrapper .tss-readmore-toggle:hover,
.tss-wrapper .single-item-wrapper .tss-readmore-toggle:focus {
	background: none;
	color: var(--tss-primary-hover, #2843c4);
	text-decoration: underline;
}

.tss-wrapper .single-item-wrapper .tss-readmore-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.25);
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.tss-wrapper .single-item-wrapper .tss-readmore-icon {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: -webkit-transform 0.2s ease, margin 0.2s ease;
	transition: transform 0.2s ease, margin 0.2s ease;
}

.tss-wrapper .single-item-wrapper.tss-expanded .tss-readmore-icon {
	margin-top: 2px;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}

/* ---- Per-layout differences ---- */

.tss-wrapper .tss-layout2 .tss-readmore-toggle,
.tss-wrapper .tss-layout4 .tss-readmore-toggle,
.tss-wrapper .tss-isotope2 .tss-readmore-toggle {
	margin-top: 16px;
}

.tss-wrapper .tss-isotope1 .tss-readmore-toggle,
.tss-wrapper .tss-carousel4 .tss-readmore-toggle,
.tss-wrapper .tss-carousel7 .tss-readmore-toggle,
.tss-wrapper .tss-carousel8 .tss-readmore-toggle {
	margin-top: 12px;
}

.tss-wrapper .tss-isotope1 .tss-readmore-toggle {
	font-size: 13.5px;
}

/* Centred-text layouts. */
.tss-wrapper .tss-carousel3 .tss-readmore-toggle,
.tss-wrapper .tss-layout3 .tss-readmore-toggle,
.tss-wrapper .tss-isotope3 .tss-readmore-toggle {
	-ms-flex-item-align: center;
	align-self: center;
}

.tss-wrapper .tss-carousel4 .tss-readmore-toggle {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
}

/* Hidden with visibility, not display, so the slot is reserved and the slides
   keep equal heights when the toggle appears. */
.tss-wrapper .tss-carousel11 .tss-readmore-toggle,
.tss-wrapper .tss-carousel12 .tss-readmore-toggle {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	visibility: hidden;
	-ms-flex-item-align: auto;
	align-self: auto;
	margin: 10px auto 0;
}

.tss-wrapper .tss-carousel11 .tss-readmore-toggle.tss-is-visible,
.tss-wrapper .tss-carousel12 .tss-readmore-toggle.tss-is-visible {
	visibility: visible;
}


/******************************************************/
/****************** Read more link  *******************/
/******************************************************/

/* The text-limit "Read more" link (.rt-read-more, links to the testimonial
   page). Same type, colour, hover and focus treatment as the toggle above, with
   a right-pointing chevron. Elementor's Read More controls and the shortcode
   button colours target it at higher specificity and still win. */
.tss-wrapper .single-item-wrapper .rt-read-more {
	display: inline-block;
	margin-top: 10px;
	padding: 2px 0;
	border-radius: 4px;
	box-shadow: none;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	color: var(--tss-primary, #3858e9);
	text-decoration: none;
	text-underline-offset: 3px;
	-webkit-transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.tss-wrapper .single-item-wrapper .rt-read-more::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: 1px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
}

.tss-wrapper .single-item-wrapper .rt-read-more:hover,
.tss-wrapper .single-item-wrapper .rt-read-more:focus {
	color: var(--tss-primary-hover, #2843c4);
	text-decoration: underline;
}

.tss-wrapper .single-item-wrapper .rt-read-more:hover::after,
.tss-wrapper .single-item-wrapper .rt-read-more:focus::after {
	-webkit-transform: translateX(3px) rotate(45deg);
	transform: translateX(3px) rotate(45deg);
}

.tss-wrapper .single-item-wrapper .rt-read-more:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.25);
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* ---- Per-layout differences ---- */

.tss-wrapper .tss-layout4 .rt-read-more,
.tss-wrapper .tss-isotope2 .rt-read-more {
	margin-top: 12px;
}

.tss-wrapper .tss-isotope1 .rt-read-more {
	font-size: 13.5px;
}

/* Carousel 4 prints the link below .item-content, as its own flex item. */
.tss-wrapper .tss-carousel4 .rt-read-more {
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3;
	-ms-flex-item-align: start;
	align-self: flex-start;
	margin-top: 12px;
}


/******************************************************/
/********************** Carousel 1  ******************/
/******************************************************/
.tss-wrapper .tss-carousel1 .single-item-wrapper,
.tss-wrapper .tss-carousel1 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Split slide: author rail on the left, quote on the right. */
.tss-wrapper .tss-carousel1 .single-item-wrapper {
	height: 100%;
	overflow: hidden;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 210px 1fr;
	grid-template-columns: 210px 1fr;
	/* The rail must not keep a fixed width once slides get narrow (3+ per view). */
	grid-template-columns: clamp(150px, 38%, 210px) minmax(0, 1fr);
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
}

/* Author rail */
.tss-wrapper .tss-carousel1 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 30px 22px;
	text-align: center;
	background: #ffffff;
	border-right: 1px solid var(--tss-line-soft, #ebecf1);
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	flex: none;
}

.tss-wrapper .tss-carousel1 .profile-img-wrapper {
	margin: 0 0 16px;
	line-height: 0;
}

.tss-wrapper .tss-carousel1 .profile-img-wrapper img {
	width: 92px;
	height: 92px;
	border-radius: 18px;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	box-shadow: 0 8px 20px rgba(27, 31, 42, 0.14);
}


.tss-wrapper .tss-carousel1 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--tss-primary, #3858e9);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel1 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-carousel1 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel1 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary-hover, #2843c4);
}

.tss-wrapper .tss-carousel1 .single-item-wrapper h4.author-bio {
	margin: 4px 0 12px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	text-align: center;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel1 .rating-wrapper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: 3px;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: center;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-carousel1 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel1 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel1 .tss-meta-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 12px;
}

/* The rail is only 150-210px wide, so a label beside its icons would wrap
   mid-run: each label takes a line of its own above the icons. The groups stay
   block boxes, because the pro Elementor "Alignment" controls set text-align. */
.tss-wrapper .tss-carousel1 .author-social,
.tss-wrapper .tss-carousel1 .tss-social-share {
	width: 100%;
	max-width: 100%;
	margin: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel1 .author-social .tss-social-label,
.tss-wrapper .tss-carousel1 .tss-social-share .share-icons {
	display: block;
	margin: 0 0 2px;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel1 .author-social a,
.tss-wrapper .tss-carousel1 .tss-social-share a {
	margin: 3px 5px;
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel1 .author-social a:hover,
.tss-wrapper .tss-carousel1 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Social Media and Social Share both on: they used to sit run-on in the rail,
   two look-alike icon runs with nothing between them. Each is now its own
   labelled row, split by a dashed hairline. */
.tss-wrapper .tss-carousel1 .tss-meta-actions:has(.author-social):has(.tss-social-share) .tss-social-share {
	padding-top: 10px;
	border-top: 1px dashed var(--tss-line, #e7e8ee);
}

/* Quote column */
.tss-wrapper .tss-carousel1 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* The rail beside this column is vertically centred, so a top-aligned
	   quote left the card visibly lopsided: with a short testimonial the text
	   stuck to the ceiling and up to 165px of the card floor sat empty. Centre
	   the quote too, so the slack splits evenly and matches the rail. */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 30px 30px 28px;
	margin-top: 0;
	background: transparent;
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
	flex: none;
}

/* The legacy quote glyph and speech-bubble arrow are replaced by a real
   .tss-quote-mark element; the item background control still emits a
   border-right rule for :after, so both stay suppressed. */
.tss-wrapper .tss-carousel1 .item-content-wrapper:before,
.tss-wrapper .tss-carousel1 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-carousel1 .tss-quote-mark {
	display: block;
	margin-bottom: 10px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 48px;
	line-height: 0.5;
	font-weight: 700;
	color: #c5cffc;
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 30%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel1 .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3c4150;
	margin: 0;
	padding-top: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	overflow: hidden;
}

.tss-wrapper .tss-carousel1 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel1 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel1 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-carousel1 .tss-card-spacer {
	/* No longer grows: the column is centred now, and a growing spacer
	   would push the quote back to the top. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 0;
}

/* ---- Carousel 1 dots: pill-expanding ---- */
.tss-wrapper .tss-carousel1 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 5px !important;
	border-radius: 999px;
	background: #d3d7e3;
	opacity: 1;
	-webkit-transition: all 0.25s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.25s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel1 .swiper-pagination-bullet:hover {
	background: #aab1c7;
}

.tss-wrapper .tss-carousel1 .swiper-pagination-bullet-active {
	width: 30px;
	background: var(--tss-primary, #3858e9);
}

/* Slides-per-view is a user setting, so a viewport query cannot know how wide a
   slide actually is. Stack the rail above the quote once the slide is narrow. */
.tss-wrapper .tss-carousel1 .slide-item {
	container-type: inline-size;
	container-name: tss-c1-slide;
}

@container tss-c1-slide (max-width: 430px) {
	.tss-wrapper .tss-carousel1 .single-item-wrapper {
		grid-template-columns: 1fr;
	}

	.tss-wrapper .tss-carousel1 .tss-meta-info {
		border-right: 0;
		border-bottom: 1px solid var(--tss-line-soft, #ebecf1);
	}

	.tss-wrapper .tss-carousel1 .item-content-wrapper {
		padding: 24px 22px 22px;
	}
}

/******************************************************/
/********************** Layout 1  ********************/
/******************************************************/
.tss-wrapper .tss-layout1 .tss-grid-item {
	margin-bottom: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's 32px padding + 1px border were being ADDED to height:100%, making
   every card 66px taller than its column and overlapping the row below. */
.tss-wrapper .tss-layout1 .single-item-wrapper,
.tss-wrapper .tss-layout1 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-layout1 .single-item-wrapper {
	height: 100%;
}

/* The card. .item-content-wrapper is kept as the card element so the existing
   item-background and item-padding style controls still target it. */
.tss-wrapper .tss-layout1 .item-content-wrapper {
	position: relative;
	margin-top: 0;
	overflow: hidden;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 32px;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line, #e7e8ee);
	border-radius: var(--tss-radius, 16px);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.04), 0 8px 24px rgba(31, 35, 48, 0.06);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.22s ease;
}

/* Accent bar that wipes in on hover. */
.tss-wrapper .tss-layout1 .item-content-wrapper:before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: -webkit-linear-gradient(left, var(--tss-primary, #3858e9), #6f86ff);
	background: linear-gradient(90deg, var(--tss-primary, #3858e9), #6f86ff);
	/* Second stop follows the Primary colour control where color-mix is supported. */
	background: linear-gradient(90deg, var(--tss-primary, #3858e9), color-mix(in srgb, var(--tss-primary, #3858e9) 62%, #fff));
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: transform 0.3s cubic-bezier(0.4, 0.22, 0.28, 1);
	font-family: inherit;
	font-size: 0;
	color: transparent;
}

/* Legacy speech-bubble arrow is not part of this layout any more. The item
   background style control still emits a border-right rule for this pseudo
   element, so it has to stay suppressed here. */
.tss-wrapper .tss-layout1 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-layout1 .single-item-wrapper:hover .item-content-wrapper {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 16px 40px rgba(56, 88, 233, 0.12);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 16px 40px color-mix(in srgb, var(--tss-primary, #3858e9) 12%, transparent);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 16px 40px color-mix(in srgb, var(--tss-primary, #3858e9) 12%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-layout1 .single-item-wrapper:hover .item-content-wrapper:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

/* Card head: rating + quote mark */
.tss-wrapper .tss-layout1 .tss-card-head {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	min-height: 24px;
}

.tss-wrapper .tss-layout1 .rating-wrapper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: 3px;
	margin: 0;
	line-height: 1;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-layout1 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 18px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout1 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout1 .tss-quote-mark {
	margin-left: auto;
	margin-top: -6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	line-height: 0.8;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Testimonial body */
.tss-wrapper .tss-layout1 .item-content {
	font-size: 16px;
	line-height: 1.7;
	color: #3c4150;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

/* Absorbs the leftover card height so the author footer sits on the card floor.
   This must NOT be flex:1 on .item-content itself — a growing box stretches
   past the six-line clamp, the clamp never engages, and the read-more toggle
   never appears. */
.tss-wrapper .tss-layout1 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 24px;
}

.tss-wrapper .tss-layout1 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout1 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout1 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author footer */
.tss-wrapper .tss-layout1 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 14px;
	margin-top: 0;
	padding-top: 22px;
	border-top: 1px solid var(--tss-line, #e7e8ee);
	/* With pro's social + social-share both enabled the footer runs out of room;
	   let the action icons drop to their own row instead of squeezing the name. */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.tss-wrapper .tss-layout1 .profile-img-wrapper {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	line-height: 0;
	margin: 0;
}

.tss-wrapper .tss-layout1 .profile-img-wrapper img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef0f4;
}

/* The basis stays auto, so a long name still claims the whole row and pushes
   the icons onto their own line. max-width is what keeps it beside the photo:
   flex line-breaking uses the clamped size, so the block can never be wider
   than the row minus the 52px photo and 14px gap, and the name wraps inside
   its column instead of dropping the whole block under the photo. */
.tss-wrapper .tss-layout1 .tss-author-meta {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(100% - 66px);
}

.tss-wrapper .tss-layout1 .tss-meta-info:not(:has(.profile-img-wrapper)) .tss-author-meta {
	max-width: none;
}

.tss-wrapper .tss-layout1 h3.author-name {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout1 h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout1 h3.author-name:hover,
.tss-wrapper .tss-layout1 h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout1 h4.author-bio {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
}

/* No margin-left:auto. On the first row .tss-author-meta (flex: 1 1 auto)
   already absorbs the spare width, so the icons still sit at the right edge;
   once they wrap onto their own row nothing pushes them, so they start at
   the left edge under the photo instead of hanging off to the right. */
.tss-wrapper .tss-layout1 .tss-meta-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	row-gap: 6px;
}

/* Each icon group (social, share) drops to its own row first - its
   flex-basis is its full one-line width - and only wraps per icon when even
   that row is narrower than the group. A nowrap group there overflowed the
   card, and .item-content-wrapper's overflow:hidden cut the trailing icons
   off. */
.tss-wrapper .tss-layout1 .tss-meta-actions {
	min-width: 0;
	max-width: 100%;
}

.tss-wrapper .tss-layout1 .author-social,
.tss-wrapper .tss-layout1 .tss-social-share {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.tss-wrapper .tss-layout1 .author-social a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout1 .author-social a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Social share: the Elementor "Social Share" typography control sets
   font-size on the link and on i.dashicons only, so a size set on the icon
   itself would leave the <span> icons (Facebook, Email) behind when that
   control is used. The default size sits on the link and every icon
   inherits it. (Box and centring come from the base social/share icon
   rules near the top of this file; colour is set here, because the base
   rule paints share links #2529ed, which clashed with the muted social
   icons beside them.) */
.tss-wrapper .tss-layout1 .tss-social-share .share-icons {
	margin-right: 4px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout1 .tss-social-share a {
	font-size: 20px;
	line-height: 1;
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout1 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout1 .tss-social-share .dashicons {
	font-size: inherit;
}

/* "Follow us:" ahead of the social profile icons, set exactly like the
   "Share on:" label above, so the two rows read as two different things. */
.tss-wrapper .tss-layout1 .author-social .tss-social-label {
	margin-right: 4px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--tss-muted, #6a6f7e);
}

/* Social Media and Social Share both on: they used to share one line, two
   look-alike icon runs side by side. Each now gets its own row under the
   author, set off from it by a dashed hairline, and both labels take the same
   width so the two icon runs start on one vertical line. */
.tss-wrapper .tss-layout1 .tss-meta-actions:has(.author-social):has(.tss-social-share) {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px dashed var(--tss-line, #e7e8ee);
}

.tss-wrapper .tss-layout1 .tss-meta-actions:has(.author-social):has(.tss-social-share) .tss-social-label,
.tss-wrapper .tss-layout1 .tss-meta-actions:has(.author-social):has(.tss-social-share) .share-icons {
	min-width: 64px;
	text-align: left;
}

/* The pro "read more" detail-page link, when the word limit option is on. */

/******************************************************/
/********************** Layout 2  ********************/
/******************************************************/
/* ---- Carousel 2: horizontal split slide, quote left / author rail right ----
   The mirror of the redesigned Carousel 1. A slide can be far narrower than the
   viewport (3 or 4 per view is a setting, not a breakpoint), so the rail is
   clamped rather than fixed, every string in it is allowed to wrap, and the
   split is abandoned for a stack once the slide itself gets too narrow. That
   last step is a container query, because no media query can see slide width. */
.tss-wrapper .tss-carousel2 .single-item-wrapper,
.tss-wrapper .tss-carousel2 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Swiper always sets a numeric slidesPerView, and its own CSS gives
   .swiper-slide an explicit width, so inline-size containment here can never
   collapse a slide. */
.tss-wrapper .tss-carousel2 .tss-grid-item {
	container-type: inline-size;
	container-name: tss-c2-slide;
	/* Swiper's own .swiper-slide{height:100%} resolves to the slide's own
	   content height, so slides in a view end up unequal and the card's
	   height:100% has nothing to fill. Releasing the height lets the flex
	   line stretch every slide to the tallest, which keeps the rail divider
	   on the same line across cards. */
	height: auto;
}

.tss-wrapper .tss-carousel2 .single-item-wrapper {
	height: 100%;
	overflow: hidden;
	margin-bottom: 0;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 210px;
	grid-template-columns: 1fr 210px;
	/* The rail must not keep a fixed width once slides get narrow. */
	grid-template-columns: minmax(0, 1fr) clamp(140px, 36%, 210px);
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
}

/* Quote column (left) */
.tss-wrapper .tss-carousel2 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* The rail beside this column is vertically centred, so a top-aligned
	   quote left the card visibly lopsided: with a short testimonial the text
	   stuck to the ceiling and up to 165px of the card floor sat empty. Centre
	   the quote too, so the slack splits evenly and matches the rail. */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	/* Without this the quote column refuses to shrink below its longest word
	   and pushes the rail off the card. */
	min-width: 0;
	padding: 30px 30px 28px;
	margin-top: 0;
	background: transparent;
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	flex: none;
}

/* The legacy quote glyph and speech-bubble tail are replaced by a real
   .tss-quote-mark element; the item background control still emits a
   border-left rule for :after, so both stay suppressed. */
.tss-wrapper .tss-carousel2 .item-content-wrapper:before,
.tss-wrapper .tss-carousel2 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-carousel2 .tss-quote-mark {
	display: block;
	margin-bottom: 10px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 48px;
	line-height: 0.5;
	font-weight: 700;
	color: #c5cffc;
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 30%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel2 .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3c4150;
	margin: 0;
	padding-top: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	overflow: hidden;
}

.tss-wrapper .tss-carousel2 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel2 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel2 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-carousel2 .tss-card-spacer {
	/* No longer grows: the column is centred now, and a growing spacer
	   would push the quote back to the top. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 0;
}

/* Author rail (right) */
.tss-wrapper .tss-carousel2 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-width: 0;
	padding: 30px 18px;
	text-align: center;
	background: #ffffff;
	border-left: 1px solid var(--tss-line-soft, #ebecf1);
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
	flex: none;
	/* A long name or company must wrap inside a 140px rail, never overflow it. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.tss-wrapper .tss-carousel2 .profile-img-wrapper {
	margin: 0 0 16px;
	max-width: 100%;
	line-height: 0;
}

.tss-wrapper .tss-carousel2 .profile-img-wrapper img {
	width: 92px;
	height: 92px;
	max-width: 100%;
	border-radius: 18px;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	box-shadow: 0 8px 20px rgba(27, 31, 42, 0.14);
}

.tss-wrapper .tss-carousel2 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--tss-primary, #3858e9);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel2 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-carousel2 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel2 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary-hover, #2843c4);
}

.tss-wrapper .tss-carousel2 .single-item-wrapper h4.author-bio {
	margin: 4px 0 12px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	text-align: center;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel2 .rating-wrapper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: center;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-carousel2 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel2 .author-social,
.tss-wrapper .tss-carousel2 .tss-social-share {
	max-width: 100%;
	margin-top: 10px;
}

.tss-wrapper .tss-carousel2 .author-social a,
.tss-wrapper .tss-carousel2 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel2 .author-social a:hover,
.tss-wrapper .tss-carousel2 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* ---- Carousel 2 at narrow SLIDE widths (3-4 per view), independent of the
   viewport. Step one: shrink the rail furniture so the quote keeps its room. */
@container tss-c2-slide (max-width: 520px) {
	.tss-wrapper .tss-carousel2 .item-content-wrapper {
		padding: 26px 24px 24px;
	}

	.tss-wrapper .tss-carousel2 .tss-meta-info {
		padding: 24px 12px;
	}

	.tss-wrapper .tss-carousel2 .profile-img-wrapper {
		margin-bottom: 12px;
	}

	.tss-wrapper .tss-carousel2 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
		border-radius: 14px;
	}

	.tss-wrapper .tss-carousel2 .single-item-wrapper h3.author-name {
		font-size: 16.5px;
	}

	.tss-wrapper .tss-carousel2 .single-item-wrapper h4.author-bio {
		font-size: 12.5px;
		margin-bottom: 10px;
	}

	.tss-wrapper .tss-carousel2 .single-item-wrapper .rating-wrapper span.dashicons {
		font-size: 15px;
		width: 1em;
		height: 1em;
		line-height: 1em;
	}

	.tss-wrapper .tss-carousel2 .tss-quote-mark {
		font-size: 40px;
		margin-bottom: 8px;
	}

	.tss-wrapper .tss-carousel2 .item-content {
		font-size: 15px;
		-webkit-line-clamp: 8;
	}
}

/* Step two: below this the split stops working at all - the rail would eat the
   quote - so stack them, quote first, and move the divider to the top edge. */
@container tss-c2-slide (max-width: 400px) {
	.tss-wrapper .tss-carousel2 .single-item-wrapper {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
		/* Let the quote row absorb the slack so the divider - and the author
		   block under it - line up across cards of unequal text length. */
		grid-template-rows: 1fr auto;
	}

	.tss-wrapper .tss-carousel2 .tss-meta-info {
		border-left: 0;
		border-top: 1px solid var(--tss-line-soft, #ebecf1);
		padding: 22px 20px;
	}

	.tss-wrapper .tss-carousel2 .profile-img-wrapper img {
		width: 64px;
		height: 64px;
	}

	.tss-wrapper .tss-carousel2 .item-content {
		-webkit-line-clamp: 6;
	}
}

.tss-wrapper .single-item-wrapper .author-social,
.tss-wrapper .single-item-wrapper .tss-social-share {
	text-align: center;
	margin-bottom: 0px;
}

/* ---- Layout 2: horizontal split card, quote left / author rail right ---- */
.tss-wrapper .tss-layout2 .single-item-wrapper,
.tss-wrapper .tss-layout2 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-layout2 .tss-grid-item {
	margin-bottom: 28px;
	container-type: inline-size;
	container-name: tss-l2-card;
}

.tss-wrapper .tss-layout2 .single-item-wrapper {
	height: 100%;
	overflow: hidden;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 224px;
	grid-template-columns: 1fr 224px;
	/* The rail is 224px at the design's card width, but must not keep that width
	   as cards get narrower (3+ columns, or 2 columns near 992px) — at a 446px
	   card a fixed rail is wider than the quote panel it sits beside. */
	grid-template-columns: minmax(0, 1fr) clamp(150px, 40%, 224px);
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line, #e7e8ee);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.04), 0 10px 28px rgba(31, 35, 48, 0.06);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.22s ease;
}

.tss-wrapper .tss-layout2 .single-item-wrapper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 20px 48px rgba(56, 88, 233, 0.13);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 20px 48px color-mix(in srgb, var(--tss-primary, #3858e9) 13%, transparent);
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 20px 48px color-mix(in srgb, var(--tss-primary, #3858e9) 13%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

/* Quote panel */
.tss-wrapper .tss-layout2 .item-content-wrapper {
	/* Generic mobile rules reorder .tss-left and add a top margin; the new
	   split card must keep DOM order (quote first) and sit flush in the card. */
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	margin-top: 0;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 32px 30px 28px;
	background: var(--tss-card, #ffffff);
}

/* The legacy quote glyph and speech-bubble arrow are replaced by a real
   .tss-quote-mark element; the item background control still emits a
   border-left rule for :after, so both stay suppressed. */
.tss-wrapper .tss-layout2 .item-content-wrapper:before,
.tss-wrapper .tss-layout2 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-layout2 .tss-quote-mark {
	display: block;
	margin-bottom: 8px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 60px;
	line-height: 0.7;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout2 .item-content {
	font-size: 16px;
	line-height: 1.72;
	color: #3c4150;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}

.tss-wrapper .tss-layout2 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout2 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout2 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-layout2 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* Author rail */
.tss-wrapper .tss-layout2 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 4px;
	padding: 32px 24px;
	text-align: center;
	background: var(--tss-panel, #f7f8fb);
	border-left: 1px solid var(--tss-line, #e7e8ee);
}

.tss-wrapper .tss-layout2 .profile-img-wrapper {
	margin: 0 0 14px;
	line-height: 0;
}

.tss-wrapper .tss-layout2 .profile-img-wrapper img {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	border: 3px solid #fff;
	box-shadow: 0 6px 18px rgba(31, 35, 48, 0.16);
}

.tss-wrapper .tss-layout2 h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout2 h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout2 h3.author-name:hover,
.tss-wrapper .tss-layout2 h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout2 h4.author-bio {
	margin: 2px 0 14px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout2 .rating-wrapper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: 3px;
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-layout2 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout2 .author-social,
.tss-wrapper .tss-layout2 .tss-social-share {
	margin-top: 10px;
}

.tss-wrapper .tss-layout2 .author-social a,
.tss-wrapper .tss-layout2 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout2 .author-social a:hover,
.tss-wrapper .tss-layout2 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* The split only works while the card is wide enough for two usable panels.
   Column count is a user setting, so a viewport breakpoint cannot know this —
   at 3 columns a 992px viewport still yields a 287px card, where a fixed rail
   is wider than the quote beside it. Query the card, not the screen.
   Must come after the base rules above: same specificity, so order decides. */
@container tss-l2-card (max-width: 400px) {
	.tss-wrapper .tss-layout2 .single-item-wrapper {
		grid-template-columns: 1fr;
	}

	.tss-wrapper .tss-layout2 .tss-meta-info {
		border-left: 0;
		border-top: 1px solid var(--tss-line, #e7e8ee);
	}

	.tss-wrapper .tss-layout2 .item-content-wrapper {
	/* Generic mobile rules reorder .tss-left and add a top margin; the new
	   split card must keep DOM order (quote first) and sit flush in the card. */
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	margin-top: 0;
		padding: 26px 24px 22px;
	}
}

/******************************************************/
/********************** Carousel 3  ******************/
/******************************************************/
.tss-wrapper .tss-carousel3 .single-item-wrapper,
.tss-wrapper .tss-carousel3 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-carousel3 .single-item {
	padding: 0;
}

/* Centred stack: avatar, rating, name, role, then the quote in an inset panel.
   text-align is declared once on the card and inherited, so every per-element
   alignment control (which targets the element itself, at a higher specificity)
   stays live on both the shortcode and the Elementor arm. */
.tss-wrapper .tss-carousel3 .single-item-wrapper {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* Every slide equalises to the tallest, so a short testimonial left a
	   hole at the card floor. Centring splits that slack evenly instead of
	   pinning the content to the ceiling. */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 32px 28px 28px;
	text-align: center;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	-webkit-transition: border-color 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tss-wrapper .tss-carousel3 .single-item-wrapper:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	border-color: #dcdfe8;
	box-shadow: 0 14px 30px rgba(27, 31, 42, 0.10);
}

/* Avatar */
.tss-wrapper .tss-carousel3 .profile-img-wrapper {
	display: block;
	margin: 0 0 14px;
	line-height: 0;
	text-align: center;
}

/* The ring is a box-shadow rather than a border so the image border style
   control keeps the border to itself. */
.tss-wrapper .tss-carousel3 .profile-img-wrapper img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	box-shadow: 0 0 0 5px var(--tss-primary-soft, #eef1fe), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* Rating */
.tss-wrapper .tss-carousel3 .rating-wrapper {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: 1;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-carousel3 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel3 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* Author */
.tss-wrapper .tss-carousel3 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel3 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-carousel3 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel3 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel3 .single-item-wrapper h4.author-bio {
	margin: 4px 0 18px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel3 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel3 .single-item-wrapper .tss-social-share {
	margin: 0 0 14px;
}

.tss-wrapper .tss-carousel3 .author-social a,
.tss-wrapper .tss-carousel3 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel3 .author-social a:hover,
.tss-wrapper .tss-carousel3 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Quote panel */
.tss-wrapper .tss-carousel3 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* The tinted panel hugs its text. Stretching it to fill the card left
	   a slab of empty tint under a short quote - the panel is a visible
	   surface, so the slack shows. The card itself is centred, so the
	   leftover height splits above and below the whole stack instead. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 100%;
	margin-top: 0;
	padding: 26px 24px 22px;
	background: var(--tss-panel, #f7f8fb);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 12px;
}

/* The legacy quote glyph is replaced by a real .tss-quote-mark element; the
   Quote Icon control still emits a colour for :before, so both stay suppressed. */
.tss-wrapper .tss-carousel3 .item-content-wrapper:before,
.tss-wrapper .tss-carousel3 .item-content-wrapper:after {
	content: none;
	display: none;
}

/* Badge straddling the panel's top edge. Primary drives it, same as the other
   token-based layouts. */
.tss-wrapper .tss-carousel3 .tss-quote-mark {
	position: absolute;
	top: -17px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: -ms-grid;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding-top: 12px;
	border-radius: 50%;
	background: var(--tss-primary, #3858e9);
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.30);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel3 .item-content {
	margin: 8px 0 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.7;
	font-style: normal;
	color: #3c4150;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-carousel3 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel3 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel3 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-carousel3 .tss-card-spacer {
	/* No longer grows: a growing spacer would push the content back to
	   the top and defeat the centring above. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 0;
}

.tss-wrapper .tss-carousel3 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 5px !important;
	border-radius: 999px;
	background: #d3d7e3;
	opacity: 1;
	-webkit-transition: all 0.25s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.25s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel3 .swiper-pagination-bullet:hover {
	background: #aab1c7;
}

.tss-wrapper .tss-carousel3 .swiper-pagination-bullet-active {
	width: 30px;
	background: var(--tss-primary, #3858e9);
}

/* Slides-per-view is a user setting, so a viewport query cannot know how wide a
   slide actually is. Tighten the card once the slide itself is narrow.

   height:auto is load-bearing, not cosmetic: swiper ships .swiper-slide with
   height:100%, and a cross-size that is not `auto` switches off flex stretch —
   so every slide sized to its own content and two cards in the same view ended
   at different heights. With auto, the flex row stretches them to the tallest
   and the card's own height:100% then fills the slide. */
.tss-wrapper .tss-carousel3 .slide-item {
	height: auto;
	container-type: inline-size;
	container-name: tss-c3-slide;
}

@container tss-c3-slide (max-width: 380px) {
	.tss-wrapper .tss-carousel3 .single-item-wrapper {
		padding: 26px 20px 22px;
	}

	.tss-wrapper .tss-carousel3 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
	}

	.tss-wrapper .tss-carousel3 .item-content-wrapper {
		padding: 24px 18px 20px;
	}
}

/******************************************************/
/********************** Layout 3  ********************/
/******************************************************/
.tss-wrapper .tss-layout3 .single-item-wrapper,
.tss-wrapper .tss-layout3 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-layout3 .single-item {
	padding: 0;
}

/* Centred stack: avatar, rating, name, role, then the quote in an inset panel.
   text-align is declared once on the card and inherited, so every per-element
   alignment control (which targets the element itself, at a higher specificity)
   stays live on both the shortcode and the Elementor arm. */
.tss-wrapper .tss-layout3 .single-item-wrapper {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 32px 28px 28px;
	text-align: center;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	-webkit-transition: border-color 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tss-wrapper .tss-layout3 .single-item-wrapper:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	border-color: #dcdfe8;
	box-shadow: 0 14px 30px rgba(27, 31, 42, 0.10);
}

/* Avatar */
.tss-wrapper .tss-layout3 .profile-img-wrapper {
	display: block;
	margin: 0 0 14px;
	line-height: 0;
	text-align: center;
}

/* The ring is a box-shadow rather than a border so the image border style
   control keeps the border to itself. */
.tss-wrapper .tss-layout3 .profile-img-wrapper img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	box-shadow: 0 0 0 5px var(--tss-primary-soft, #eef1fe), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* Rating */
.tss-wrapper .tss-layout3 .rating-wrapper {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: 1;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-layout3 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout3 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* Author */
.tss-wrapper .tss-layout3 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout3 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-layout3 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout3 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout3 .single-item-wrapper h4.author-bio {
	margin: 4px 0 18px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout3 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout3 .single-item-wrapper .tss-social-share {
	margin: 0 0 14px;
}

.tss-wrapper .tss-layout3 .author-social a,
.tss-wrapper .tss-layout3 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout3 .author-social a:hover,
.tss-wrapper .tss-layout3 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Quote panel */
.tss-wrapper .tss-layout3 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 100%;
	margin-top: 0;
	padding: 26px 24px 22px;
	background: var(--tss-panel, #f7f8fb);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 12px;
}

/* The legacy quote glyph is replaced by a real .tss-quote-mark element; the
   Quote Icon control still emits a colour for :before, so both stay suppressed. */
.tss-wrapper .tss-layout3 .item-content-wrapper:before,
.tss-wrapper .tss-layout3 .item-content-wrapper:after {
	content: none;
	display: none;
}

/* Badge straddling the panel's top edge. Primary drives it, same as the other
   token-based layouts. */
.tss-wrapper .tss-layout3 .tss-quote-mark {
	position: absolute;
	top: -17px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: -ms-grid;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding-top: 12px;
	border-radius: 50%;
	background: var(--tss-primary, #3858e9);
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.30);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout3 .item-content {
	margin: 8px 0 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.7;
	font-style: normal;
	color: #3c4150;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-layout3 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout3 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout3 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-layout3 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* Grid mechanics (see layout 1): the row gives every column the same height, so
   the card fills it and every card in a row ends level. box-sizing is declared
   explicitly rather than inherited from the theme reset — wp-admin has none, so
   in the Layout Preview the padding would be added to height:100% instead.

   Card width is a column-count setting, so a viewport query cannot know how
   wide a card actually is either — query the card, not the screen.
   container-type: inline-size resolves against the CONTENT box, so the
   threshold below is the card width, not the column's outer width. */
.tss-wrapper .tss-layout3 .tss-grid-item {
	margin-bottom: 28px;
	container-type: inline-size;
	container-name: tss-l3-card;
}

@container tss-l3-card (max-width: 400px) {
	.tss-wrapper .tss-layout3 .single-item-wrapper {
		padding: 26px 20px 22px;
	}

	.tss-wrapper .tss-layout3 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
	}

	.tss-wrapper .tss-layout3 .item-content-wrapper {
		padding: 24px 18px 20px;
	}
}

/******************************************************/
/**************** Isotope 1 / Video 1  ***************/
/******************************************************/
/* Video 1 is a separate layout family that only ever borrowed isotope 1's quote
   box, so it keeps the original rules verbatim - nothing below this pair is
   shared with the redesigned isotope 1 card. */
.tss-wrapper .tss-video1 .item-content-wrapper {
	padding: 20px;
	background: #f8f8f8;
	position: relative;
}

.tss-wrapper .tss-video1 .item-content-wrapper:before {
	content: "\F10D";
	color: #eaeaea;
	position: absolute;
	left: 0px;
	top: -15px;
	font-family: "tss-font", serif;
	font-size: 30px;
}

/* Isotope 1: a centred masonry card - avatar, name, role, rating, social chips,
   a short accent rule, then the quote - under a segmented pill filter. Built on
   the shared design tokens at the top of this file, so the Primary colour
   control drives the selected filter pill, the avatar ring, the divider, the
   social chips, the name hover and the read-more link at once.

   Three deliberate constraints, the same ones carousel 5 and carousel 8 carry:
     - the avatar declares NO border-radius. The "Image Type -> Circle" switch
       (.tss-img-circle, line ~342) and the Elementor image Border Radius
       control both sit at the same specificity as a layout avatar rule, so any
       radius declared here would silently beat them. The design's round avatar
       is exactly what that switch is for.
     - the star and social-icon boxes stay auto. Those controls emit only
       font-size, so a fixed px box crops a larger glyph and makes the stars
       overlap; the chip is padding-based so it grows with the icon instead.
     - the narrow-card steps are container queries, not viewport media queries:
       an isotope column count is a setting, so a 4-up wall is just as narrow as
       a phone.

   The card itself is .item-content-wrapper, matching the template, so the
   "Content Background" and "Content Padding" controls paint the whole card. */

/* ---------- The card ---------- */
.tss-wrapper .tss-isotope1 .tss-grid-item {
	margin-bottom: 26px;
	container-type: inline-size;
	container-name: tss-iso1-card;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's padding and border would be ADDED to the column width and the
   wall would overflow its container. */
.tss-wrapper .tss-isotope1 .single-item-wrapper,
.tss-wrapper .tss-isotope1 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-isotope1 .item-content-wrapper {
	position: relative;
	/* The shared @media (max-width: 767px) tail near the end of this file gives
	   every .item-content-wrapper a 15px margin-top. Three classes beat its two
	   at any width, so this cancels it without a media query of its own. */
	margin-top: 0;
	padding: 28px 26px 24px;
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	text-align: center;
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), -webkit-box-shadow 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.tss-wrapper .tss-isotope1 .single-item-wrapper:hover .item-content-wrapper {
	background: #ffffff;
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #ffffff);
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	-webkit-box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 18px 40px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 18px 40px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 18px 40px color-mix(in srgb, var(--tss-primary, #3858e9) 12%, transparent);
}

/* ---------- Avatar ---------- */
.tss-wrapper .tss-isotope1 .tss-meta-info {
	display: block;
}

.tss-wrapper .tss-isotope1 .profile-img-wrapper {
	display: block;
	margin: 0 0 14px;
	line-height: 0;
}

.tss-wrapper .tss-isotope1 .profile-img-wrapper a {
	display: inline-block;
	line-height: 0;
}

/* No border-radius here on purpose - see the note at the top of this section. */
.tss-wrapper .tss-isotope1 .profile-img-wrapper img {
	display: inline-block;
	width: 84px;
	height: 84px;
	max-width: 84px;
	-o-object-fit: cover;
	object-fit: cover;
	background: #eef0f4;
	border: 4px solid #ffffff;
	-webkit-box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 18%, #ffffff), 0 8px 18px rgba(27, 31, 42, 0.12);
}

/* ---------- Name / role ---------- */
.tss-wrapper .tss-isotope1 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
}

.tss-wrapper .tss-isotope1 .single-item-wrapper h3.author-name a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-isotope1 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-isotope1 .single-item-wrapper h4.author-bio {
	margin: 3px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tss-muted, #6a6f7e);
}

/* ---------- Rating ---------- */
.tss-wrapper .tss-isotope1 .rating-wrapper {
	display: block;
	margin: 10px 0 0;
	line-height: 1;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. The box stays auto so the Rating "Font size" control
   scales the glyph instead of cropping it. */
.tss-wrapper .tss-isotope1 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1px;
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	line-height: 1;
}

.tss-wrapper .tss-isotope1 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* ---------- Social chips ---------- */
/* Block containers so the Social / Social Share "Alignment" controls, which
   emit text-align here, still have something to act on. */
.tss-wrapper .tss-isotope1 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope1 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 12px 0 0;
}

.tss-wrapper .tss-isotope1 .tss-social-share .share-icons,
.tss-wrapper .tss-isotope1 .author-social .tss-social-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based chip: the Social "Font size" control emits only font-size, so a
   fixed 32px box would crop a larger icon. min-width/min-height hold the round
   shape at the default size and the padding grows it from there. */
.tss-wrapper .tss-isotope1 .author-social a,
.tss-wrapper .tss-isotope1 .tss-social-share a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 32px;
	min-height: 32px;
	padding: 8px;
	margin: 0 4px;
	vertical-align: middle;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	border: 1px solid #dde3fc;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #ffffff);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-isotope1 .author-social a:hover,
.tss-wrapper .tss-isotope1 .tss-social-share a:hover {
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	-webkit-box-shadow: 0 6px 14px rgba(56, 88, 233, 0.28);
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.28);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 28%, transparent);
}

.tss-wrapper .tss-isotope1 .author-social span.dashicons,
.tss-wrapper .tss-isotope1 .author-social i,
.tss-wrapper .tss-isotope1 .tss-social-share span.dashicons,
.tss-wrapper .tss-isotope1 .tss-social-share i.dashicons,
.tss-wrapper .tss-isotope1 .tss-social-share i.fa {
	/* margin:0 is load-bearing. An unscoped ".dashicons-twitter" near the end
	   of this file sets margin-top:3px, which made the X chip 3px taller than
	   its round neighbours. */
	margin: 0;
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

/* The mask-image icons (the X glyph especially) paint themselves with
   background-color, and the global ".dashicons-twitter:before" hard-codes #000
   - so without this they stay black on the tinted chip and never turn white on
   hover. Sized in em, not px: the shortcode arm's Social "Font size" control
   emits an explicit :before width/height, the Elementor arm has no equivalent
   emission, and 1em makes both arms scale the same way. */
.tss-wrapper .tss-isotope1 .author-social .dashicons-skype:before,
.tss-wrapper .tss-isotope1 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-isotope1 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-isotope1 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-isotope1 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-isotope1 .tss-social-share .dashicons-twitter:before {
	/* margin:0 for the same reason as the glyph rule above - the global
	   .dashicons-twitter:before carries a margin that collapses out of the
	   span and un-rounds the chip. */
	margin: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-isotope1 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-isotope1 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* ---------- Divider ---------- */
.tss-wrapper .tss-isotope1 .tss-divider {
	display: block;
	width: 40px;
	height: 2px;
	margin: 18px auto 16px;
	border-radius: 2px;
	background: var(--tss-primary-soft, #eef1fe);
}

/* ---------- Quote ---------- */
.tss-wrapper .tss-isotope1 .tss-quote-col {
	display: block;
	min-width: 0;
}

.tss-wrapper .tss-isotope1 .item-content {
	margin: 0;
	padding: 0;
	font-style: italic;
	font-size: 14.5px;
	line-height: 1.68;
	color: #3c4150;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-isotope1 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-isotope1 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-isotope1 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* Read-more toggle. Hidden until clampReadMore() decides the text is actually
   clamped, so a two-line quote never gets a dead control. */

/* The pro "read more" detail-page link, when the word limit option is on. */

/* ---------- Narrow card ---------- */
/* Container queries, not media queries: an isotope column count is a setting,
   so a 4-up wall on a desktop is just as narrow as a phone. */
@container tss-iso1-card (max-width: 320px) {
	.tss-wrapper .tss-isotope1 .item-content-wrapper {
		padding: 24px 20px 20px;
	}

	.tss-wrapper .tss-isotope1 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
		max-width: 72px;
		border-width: 3px;
	}

	.tss-wrapper .tss-isotope1 .single-item-wrapper h3.author-name {
		font-size: 17px;
	}
}


/******************************************************/
/********************** Layout 4  ********************/
/******************************************************/
.tss-wrapper .tss-layout4 .single-item-wrapper,
.tss-wrapper .tss-layout4 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Grid mechanics (see layout 1): the row gives every column the same height, so
   the card fills it and cards in a row end level. box-sizing is declared
   explicitly rather than inherited from the theme reset — wp-admin has none, so
   in the Layout Preview the padding would be added to height:100% instead.

   Card width is a column-count setting, so a viewport query cannot know how
   wide a card actually is — query the card, not the screen. */
.tss-wrapper .tss-layout4 .tss-grid-item {
	margin-bottom: 28px;
	container-type: inline-size;
	container-name: tss-l4-card;
}

/* Split card: tinted author rail on the left, quote on the right. */
.tss-wrapper .tss-layout4 .single-item-wrapper {
	height: 100%;
	margin-bottom: 0;
	overflow: hidden;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 210px 1fr;
	grid-template-columns: 210px minmax(0, 1fr);
	/* The rail must not keep its full width once the card gets narrow. */
	grid-template-columns: clamp(150px, 36%, 210px) minmax(0, 1fr);
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line, #e7e8ee);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.04), 0 10px 28px rgba(31, 35, 48, 0.06);
	-webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tss-wrapper .tss-layout4 .single-item-wrapper:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	border-color: #dcdfe8;
	box-shadow: 0 2px 4px rgba(31, 35, 48, 0.05), 0 16px 36px rgba(31, 35, 48, 0.10);
}

/* Author rail */
.tss-wrapper .tss-layout4 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 32px 22px;
	text-align: center;
	background: var(--tss-panel, #f7f8fb);
	border-right: 1px solid var(--tss-line, #e7e8ee);
}

.tss-wrapper .tss-layout4 .profile-img-wrapper {
	display: block;
	-ms-flex: none;
	flex: none;
	margin: 0 0 14px;
	padding: 0;
	line-height: 0;
	text-align: center;
}

/* The white ring is a border and the lift a shadow, so the image border style
   control still has the border to itself only when the user sets one. */
.tss-wrapper .tss-layout4 .profile-img-wrapper img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 3px solid #ffffff;
	box-shadow: 0 6px 18px rgba(31, 35, 48, 0.16);
}

.tss-wrapper .tss-layout4 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout4 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-layout4 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout4 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout4 .single-item-wrapper h4.author-bio {
	margin: 3px 0 14px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout4 .rating-wrapper {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: center;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-layout4 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout4 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout4 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout4 .single-item-wrapper .tss-social-share {
	margin: 12px 0 0;
	text-align: center;
}

.tss-wrapper .tss-layout4 .author-social a,
.tss-wrapper .tss-layout4 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout4 .author-social a:hover,
.tss-wrapper .tss-layout4 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Quote column */
.tss-wrapper .tss-layout4 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-top: 0;
	padding: 30px 32px 28px;
	background: transparent;
}

/* The legacy quote glyph and speech-bubble arrow are replaced by a real
   .tss-quote-mark element; the item background control still emits rules for
   :after, so both stay suppressed. */
.tss-wrapper .tss-layout4 .item-content-wrapper:before,
.tss-wrapper .tss-layout4 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-layout4 .tss-quote-mark {
	display: block;
	margin-bottom: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	line-height: 0.7;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout4 .item-content {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.72;
	font-style: italic;
	color: #41475a;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}

.tss-wrapper .tss-layout4 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout4 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout4 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-layout4 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* The split is the design's identity, so it is kept at every column count and
   only breaks on mobile (see the max-width:767px block). What a narrow card
   gets instead is a tighter version of the same split: slimmer rail, smaller
   avatar and type. Card width is a column-count setting, so this has to query
   the card — and container-type: inline-size resolves against the CONTENT box,
   so the value below is the card width, not the column's outer width.

   Nested inside min-width:768px so it cannot also fire once the card is already
   stacked and full-width on mobile, where the full-size design belongs. */
@media (min-width: 768px) {
	@container tss-l4-card (max-width: 520px) {
		.tss-wrapper .tss-layout4 .single-item-wrapper {
			-ms-grid-columns: 160px 1fr;
			grid-template-columns: clamp(140px, 42%, 180px) minmax(0, 1fr);
		}

		.tss-wrapper .tss-layout4 .tss-meta-info {
			padding: 22px 12px;
		}

		.tss-wrapper .tss-layout4 .profile-img-wrapper {
			margin-bottom: 8px;
		}

		.tss-wrapper .tss-layout4 .profile-img-wrapper img {
			width: 60px;
			height: 60px;
			border-width: 2px;
		}

		.tss-wrapper .tss-layout4 .single-item-wrapper h3.author-name {
			font-size: 15.5px;
			line-height: 1.35;
		}

		.tss-wrapper .tss-layout4 .single-item-wrapper h4.author-bio {
			margin: 2px 0 8px;
			font-size: 12px;
			line-height: 1.4;
		}

		.tss-wrapper .tss-layout4 .single-item-wrapper .rating-wrapper span.dashicons {
			font-size: 13px;
			width: 1em;
			height: 1em;
			line-height: 1em;
		}

		.tss-wrapper .tss-layout4 .item-content-wrapper {
			padding: 22px 20px 20px;
		}

		.tss-wrapper .tss-layout4 .tss-quote-mark {
			margin-bottom: 4px;
			font-size: 40px;
		}

		.tss-wrapper .tss-layout4 .item-content {
			font-size: 14.5px;
			line-height: 1.65;
		}

		.tss-wrapper .tss-layout4 .tss-readmore-toggle {
			margin-top: 10px;
			font-size: 13px;
		}
	}
}

/******************************************************/
/********************** Carousel 4  ******************/
/******************************************************/
/* ---- Carousel 4: minimal media object, circular portrait left ----
   Carousel 4 is not a twin of layout 4 (which is a tinted-rail split). Its own
   shape is a media object: the portrait sits alone in the left column and every
   piece of text runs down one left-aligned column on the right. This redesign
   keeps that and drops the card entirely - a circular portrait with a soft
   Primary ring, the quote carrying the weight, and one hairline per slide.

   NOTE: for carousel 4 the item-background control targets .single-item-wrapper
   (not .item-content-wrapper as it does for carousel 2), so the background is
   declared here at class specificity only; the control's ID-level rule still
   wins and paints a surface for anyone who wants one. */
.tss-wrapper .tss-carousel4 .single-item-wrapper,
.tss-wrapper .tss-carousel4 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Swiper's .swiper-slide{height:100%} resolves to the slide's own content
   height, which both leaves slides unequal and stops the flex line stretching
   them. Releasing it lets every slide match the tallest, so the credit blocks
   line up across a row. Card width is a column-count setting, so the narrow
   case is a container query on the slide, not a viewport media query. */
.tss-wrapper .tss-carousel4 .tss-grid-item {
	container-type: inline-size;
	container-name: tss-c4-slide;
	height: auto;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper {
	height: 100%;
	margin-bottom: 0;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 120px 24px 1fr;
	grid-template-columns: 120px minmax(0, 1fr);
	grid-template-columns: clamp(88px, 20%, 120px) minmax(0, 1fr);
	gap: 24px;
	/* Centred, not top-aligned: every slide equalises to the tallest and
	   the card is closed by a bottom hairline, so a short testimonial left
	   a visible gap between the stars and that line. */
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 8px 4px 22px;
	background: transparent;
	border-bottom: 1px solid var(--tss-line, #e7e8ee);
}

/* Portrait */
.tss-wrapper .tss-carousel4 .profile-img-wrapper {
	margin: 4px 0 0;
	padding: 0;
	max-width: 100%;
	line-height: 0;
}

/* The legacy rule forced width:auto !important on a linked image, which is why
   portraits used to render at whatever size the source happened to be. */
.tss-wrapper .tss-carousel4 .profile-img-wrapper img,
.tss-wrapper .tss-carousel4 .profile-img-wrapper a img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 50%;
	background: #eef0f4;
	box-shadow: 0 0 0 5px var(--tss-primary-soft, #eef1fe);
}

/* Text column. Source order is name, role, social, share, rating, quote,
   read-more; the design wants the quote first and the credit underneath, so
   every child is ordered explicitly - an unordered child would default to 0
   and jump to the top. */
.tss-wrapper .tss-carousel4 .item-content-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* Every slide equalises to the tallest, so a short testimonial left a
	   hole at the card floor. Centring splits that slack evenly instead of
	   pinning the content to the ceiling. */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-width: 0;
	padding: 0;
	margin-top: 0;
	background: transparent;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.tss-wrapper .tss-carousel4 .tss-quote-mark {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	display: block;
	margin: 0 0 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 38px;
	line-height: 0.55;
	font-weight: 700;
	color: #c1cbfa;
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 24%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel4 .item-content {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.68;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--tss-ink, #1f2330);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.tss-wrapper .tss-carousel4 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel4 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-carousel4 .tss-card-spacer {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	/* No longer grows: a growing spacer would push the content back to
	   the top and defeat the centring above. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 0;
}

/* Credit block */
.tss-wrapper .tss-carousel4 .single-item-wrapper h3.author-name {
	-webkit-box-ordinal-group: 6;
	-ms-flex-order: 5;
	order: 5;
	margin: 18px 0 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel4 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel4 .single-item-wrapper h4.author-bio {
	-webkit-box-ordinal-group: 7;
	-ms-flex-order: 6;
	order: 6;
	margin: 3px 0 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 500;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel4 .rating-wrapper {
	-webkit-box-ordinal-group: 8;
	-ms-flex-order: 7;
	order: 7;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-item-align: start;
	align-self: flex-start;
	gap: 2px;
	margin: 10px 0 0;
	padding: 0;
	line-height: 1;
	text-align: left;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-carousel4 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 14px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper .author-social {
	-webkit-box-ordinal-group: 9;
	-ms-flex-order: 8;
	order: 8;
	-ms-flex-item-align: start;
	align-self: flex-start;
	margin: 12px 0 0;
	text-align: left;
}

.tss-wrapper .tss-carousel4 .single-item-wrapper .tss-social-share {
	-webkit-box-ordinal-group: 10;
	-ms-flex-order: 9;
	order: 9;
	-ms-flex-item-align: start;
	align-self: flex-start;
	margin: 10px 0 0;
	text-align: left;
}

.tss-wrapper .tss-carousel4 .author-social a,
.tss-wrapper .tss-carousel4 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel4 .author-social a:hover,
.tss-wrapper .tss-carousel4 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Narrow SLIDE (3-4 per view), independent of the viewport. */
@container tss-c4-slide (max-width: 360px) {
	.tss-wrapper .tss-carousel4 .single-item-wrapper {
		-ms-grid-columns: 64px 16px 1fr;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 16px;
	}

	.tss-wrapper .tss-carousel4 .item-content {
		-webkit-line-clamp: 4;
	}

	.tss-wrapper .tss-carousel4 .tss-quote-mark {
		font-size: 32px;
	}
}

.tss-wrapper .tss-carousel2 .rt-responsive-img {
	margin: auto;
}

/******************************************************/
/*********************** Isotope 2  ******************/
/******************************************************/
/* Isotope 2 is the isotope sibling of layout 4 - same DOM, same anatomy - so
   it takes the same split card: tinted author rail on the left, quote on the
   right. It previously took layout 5's card, which left layout 5 and carousel 5
   as a trio; they are a pair now.

   Two deliberate differences from layout 4, both because the wall is isotope
   rather than a row of equal-height columns:
     - the card does not stretch to height:100%. Isotope positions every item
       absolutely at its own height, which is the whole point of a masonry
       wall - forcing 100% there would resolve against an auto-height parent
       and do nothing useful.
     - the bottom margin is isotope's gutter rather than a grid row gap.

   Everything else, including the container-query narrow-card step and the
   mobile stack in the shared max-width:767px tail, is layout 4's. Keep the two
   in step when either changes. */
.tss-wrapper .tss-isotope2 .single-item-wrapper,
.tss-wrapper .tss-isotope2 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* box-sizing is declared explicitly rather than inherited from the theme reset —
   wp-admin has none, so in the shortcode Layout Preview the card's padding would
   be added to its width and the wall would overflow its container.

   Card width is a column-count setting, so a viewport query cannot know how wide
   a card actually is — query the card, not the screen. */
.tss-wrapper .tss-isotope2 .tss-grid-item {
	margin-bottom: 28px;
	container-type: inline-size;
	container-name: tss-iso2-card;
}

/* Split card: tinted author rail on the left, quote on the right. */
.tss-wrapper .tss-isotope2 .single-item-wrapper {
	/* Not height:100% as on layout 4 — isotope sizes each item to its own
	   content, which is what makes the wall a wall. */
	height: auto;
	margin-bottom: 0;
	overflow: hidden;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 210px 1fr;
	grid-template-columns: 210px minmax(0, 1fr);
	/* The rail must not keep its full width once the card gets narrow. */
	grid-template-columns: clamp(150px, 36%, 210px) minmax(0, 1fr);
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line, #e7e8ee);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(31, 35, 48, 0.04), 0 10px 28px rgba(31, 35, 48, 0.06);
	-webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	border-color: #dcdfe8;
	box-shadow: 0 2px 4px rgba(31, 35, 48, 0.05), 0 16px 36px rgba(31, 35, 48, 0.10);
}

/* Author rail */
.tss-wrapper .tss-isotope2 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 32px 22px;
	text-align: center;
	background: var(--tss-panel, #f7f8fb);
	border-right: 1px solid var(--tss-line, #e7e8ee);
}

.tss-wrapper .tss-isotope2 .profile-img-wrapper {
	display: block;
	-ms-flex: none;
	flex: none;
	margin: 0 0 14px;
	padding: 0;
	line-height: 0;
	text-align: center;
}

/* The white ring is a border and the lift a shadow, so the image border style
   control still has the border to itself only when the user sets one. */
.tss-wrapper .tss-isotope2 .profile-img-wrapper img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 3px solid #ffffff;
	box-shadow: 0 6px 18px rgba(31, 35, 48, 0.16);
}

.tss-wrapper .tss-isotope2 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-isotope2 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-isotope2 .single-item-wrapper h4.author-bio {
	margin: 3px 0 14px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-isotope2 .rating-wrapper {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: center;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-isotope2 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope2 .single-item-wrapper .tss-social-share {
	margin: 12px 0 0;
	text-align: center;
}

.tss-wrapper .tss-isotope2 .author-social a,
.tss-wrapper .tss-isotope2 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-isotope2 .author-social a:hover,
.tss-wrapper .tss-isotope2 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Quote column */
.tss-wrapper .tss-isotope2 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-top: 0;
	padding: 30px 32px 28px;
	background: transparent;
}

/* The legacy quote glyph and speech-bubble arrow are replaced by a real
   .tss-quote-mark element; the item background control still emits rules for
   :after, so both stay suppressed. */
.tss-wrapper .tss-isotope2 .item-content-wrapper:before,
.tss-wrapper .tss-isotope2 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-isotope2 .tss-quote-mark {
	display: block;
	margin-bottom: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	line-height: 0.7;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-isotope2 .item-content {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.72;
	font-style: italic;
	color: #41475a;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}

.tss-wrapper .tss-isotope2 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-isotope2 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-isotope2 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-isotope2 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* The split is the design's identity, so it is kept at every column count and
   only breaks on mobile (see the max-width:767px block). What a narrow card
   gets instead is a tighter version of the same split: slimmer rail, smaller
   avatar and type. Card width is a column-count setting, so this has to query
   the card — and container-type: inline-size resolves against the CONTENT box,
   so the value below is the card width, not the column's outer width.

   Nested inside min-width:768px so it cannot also fire once the card is already
   stacked and full-width on mobile, where the full-size design belongs. */
@media (min-width: 768px) {
	@container tss-iso2-card (max-width: 520px) {
		.tss-wrapper .tss-isotope2 .single-item-wrapper {
			-ms-grid-columns: 160px 1fr;
			grid-template-columns: clamp(140px, 42%, 180px) minmax(0, 1fr);
		}

		.tss-wrapper .tss-isotope2 .tss-meta-info {
			padding: 22px 12px;
		}

		.tss-wrapper .tss-isotope2 .profile-img-wrapper {
			margin-bottom: 8px;
		}

		.tss-wrapper .tss-isotope2 .profile-img-wrapper img {
			width: 60px;
			height: 60px;
			border-width: 2px;
		}

		.tss-wrapper .tss-isotope2 .single-item-wrapper h3.author-name {
			font-size: 15.5px;
			line-height: 1.35;
		}

		.tss-wrapper .tss-isotope2 .single-item-wrapper h4.author-bio {
			margin: 2px 0 8px;
			font-size: 12px;
			line-height: 1.4;
		}

		.tss-wrapper .tss-isotope2 .single-item-wrapper .rating-wrapper span.dashicons {
			font-size: 13px;
			width: 1em;
			height: 1em;
			line-height: 1em;
		}

		.tss-wrapper .tss-isotope2 .item-content-wrapper {
			padding: 22px 20px 20px;
		}

		.tss-wrapper .tss-isotope2 .tss-quote-mark {
			margin-bottom: 4px;
			font-size: 40px;
		}

		.tss-wrapper .tss-isotope2 .item-content {
			font-size: 14.5px;
			line-height: 1.65;
		}

		.tss-wrapper .tss-isotope2 .tss-readmore-toggle {
			margin-top: 10px;
			font-size: 13px;
		}
	}
}

/******************************************************/
/********************** Layout 5  ********************/
/******************************************************/
/* Redesigned card: avatar / rating / social rail on the left, quote column on
   the right, author footer across the card floor. Built on the shared design
   tokens at the top of this file, so the Primary colour control drives the
   avatar ring, quote mark, social chips, read-more link and name hover. */

.tss-wrapper .tss-layout5 .tss-grid-item {
	margin-bottom: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's 30px padding + 1px border would be ADDED to height:100% and every
   card would overlap the row below. */
.tss-wrapper .tss-layout5 .single-item-wrapper,
.tss-wrapper .tss-layout5 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The old shared rule painted this #f8f8f8 and made it a flex row; the card
   itself is .item-content-wrapper now. */
.tss-wrapper .tss-layout5 .single-item-wrapper {
	display: block;
	height: 100%;
	margin-bottom: 0;
	background: transparent;
}

/* The card. .item-content-wrapper is kept as the card element so the existing
   item-background and content-padding style controls still target it. */
.tss-wrapper .tss-layout5 .item-content-wrapper {
	position: relative;
	height: 100%;
	margin-top: 0;
	padding: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.06), 0 6px 18px rgba(27, 31, 42, 0.14);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Legacy speech-bubble arrow is not part of this layout. The item background
   style control still emits border rules for this pseudo element on some
   layouts, so keep it suppressed here. */
.tss-wrapper .tss-layout5 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-layout5 .single-item-wrapper:hover .item-content-wrapper {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px rgba(56, 88, 233, 0.26);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

/* Card body: rail + quote column. Growing the body (not the quote) is what
   pins the author footer to the card floor; a growing .item-content would
   stretch past the line clamp and the read-more toggle would never appear. */
.tss-wrapper .tss-layout5 .tss-card-body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	/* Wrapping is the safety net for narrow CARDS, which no media query can
	   detect: the card width depends on the column count the user picked, so a
	   4-up desktop grid is just as tight as a 2-up tablet one. Once the quote
	   can no longer hold its 220px basis it drops below the rail and takes the
	   full card width, instead of being squeezed to a few characters a line. */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 24px;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* Rail */
.tss-wrapper .tss-layout5 .tss-meta-info {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 116px;
	flex: 0 0 116px;
	width: 116px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	text-align: center;
	background: transparent;
}

.tss-wrapper .tss-layout5 .profile-img-wrapper {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: inline-block;
	margin: 0;
	padding: 3px;
	line-height: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--tss-primary-soft, #eef1fe);
	-webkit-transition: box-shadow 0.22s ease;
	transition: box-shadow 0.22s ease;
}

.tss-wrapper .tss-layout5 .profile-img-wrapper a {
	display: block;
	line-height: 0;
}

.tss-wrapper .tss-layout5 .profile-img-wrapper img {
	width: 92px;
	height: 92px;
	max-width: 92px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	border: 3px solid #fff;
}

/* Rating + social icons travel together when the rail turns horizontal.
   Full width of the rail so the text-align below has something to work against. */
.tss-wrapper .tss-layout5 .tss-rail-info {
	width: 100%;
	min-width: 0;
}

/* These containers are deliberately block-level, not flex. The Rating and
   Social "Alignment" style controls emit text-align on exactly these elements
   (both arms), and a flex container would ignore it — the icons would stay
   centred whatever the user picked. Block + inline-block children keeps the
   controls live; the spacing that a flex gap would give comes from the
   children's own margins. */
.tss-wrapper .tss-layout5 .rating-wrapper {
	display: block;
	margin: 16px 0 12px;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-layout5 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 16px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout5 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* Social chips. Block container for the same reason as .rating-wrapper above —
   the Social / Social Share "Alignment" controls emit text-align here. */
.tss-wrapper .tss-layout5 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout5 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 0;
	text-align: center;
}

.tss-wrapper .tss-layout5 .single-item-wrapper .tss-social-share {
	margin-top: 10px;
}

/* rtShare prints a "Share on:" label inline with the icons. In a 116px rail
   that pushes the icons onto their own ragged line, so give the label a line
   of its own and tone it down. */
.tss-wrapper .tss-layout5 .tss-social-share .share-icons,
.tss-wrapper .tss-layout5 .author-social .tss-social-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* 3px margins keep three 32px chips (3 x 38 = 114px) inside the 116px rail. */
.tss-wrapper .tss-layout5 .author-social a,
.tss-wrapper .tss-layout5 .tss-social-share a {
	width: 32px;
	height: 32px;
	margin: 3px;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	border: 1px solid #dde3fc;
	border: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-layout5 .author-social a:hover,
.tss-wrapper .tss-layout5 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-layout5 .author-social span.dashicons,
.tss-wrapper .tss-layout5 .tss-social-share span.dashicons,
.tss-wrapper .tss-layout5 .tss-social-share i.dashicons,
.tss-wrapper .tss-layout5 .tss-social-share i.fa {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-layout5 .author-social .dashicons-skype:before,
.tss-wrapper .tss-layout5 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-layout5 .author-social .dashicons-twitter:before {
	width: 15px;
	height: 15px;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-layout5 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout5 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Quote column. Takes the whole card width on its own when every rail item
   (avatar, rating, social) is switched off and the rail is not rendered. */
.tss-wrapper .tss-layout5 .tss-quote-col {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 220px;
	flex: 1 1 220px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
}

.tss-wrapper .tss-layout5 .tss-quote-mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: 0.5;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	margin-bottom: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout5 .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3c4150;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}

.tss-wrapper .tss-layout5 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout5 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout5 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author footer */
.tss-wrapper .tss-layout5 .tss-card-foot {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--tss-line-soft, #ebecf1);
}

.tss-wrapper .tss-layout5 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout5 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout5 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout5 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout5 .single-item-wrapper h4.author-bio {
	margin: 4px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

/* Narrow columns: keep the two-column card body but tighten the rail. */
@media (max-width: 767px) {
	.tss-wrapper .tss-layout5 .tss-card-body {
		gap: 20px;
	}

	.tss-wrapper .tss-layout5 .tss-meta-info {
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		width: 100px;
	}

	.tss-wrapper .tss-layout5 .profile-img-wrapper img {
		width: 80px;
		height: 80px;
		max-width: 80px;
	}
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout5 .item-content-wrapper {
		padding: 24px;
	}

	.tss-wrapper .tss-layout5 .tss-card-body {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 18px;
	}

	.tss-wrapper .tss-layout5 .tss-meta-info {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 16px;
		text-align: left;
	}

	/* Shrink-to-fit rather than filling the row, so the rating and icons sit
	   right next to the avatar. Deliberately NOT done with text-align: left —
	   Elementor's rating and social "Alignment" controls both ship
	   'default' => 'center' and emit it at ~(0,5,0), which beats any stylesheet
	   rule here. That would leave the Elementor arm centred while the shortcode
	   arm went left. Sizing the box to its content instead renders identically
	   on both arms whatever the alignment value is. */
	.tss-wrapper .tss-layout5 .tss-rail-info {
		width: auto;
		-webkit-box-flex: 0;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		min-width: 0;
	}

	.tss-wrapper .tss-layout5 .rating-wrapper {
		margin: 0 0 6px;
	}

	.tss-wrapper .tss-layout5 .single-item-wrapper .tss-social-share {
		margin-top: 6px;
	}
}

/******************************************************/
/********************** Carousel 5  ******************/
/******************************************************/
/* Carousel 5 is the carousel twin of layout 5 - same DOM, same anatomy -
   so it takes the same card. Two deliberate differences:
     * the avatar carries NO border-radius. The "Image Type -> Circle"
       switch (.tss-img-circle, line ~342) and the Elementor image Border
       Radius control both sit at (0,3,1), the same specificity as a
       layout avatar rule, so any radius declared here would silently beat
       them. Declaring none keeps both controls live.
     * the narrow-card steps are container queries on the slide, not
       viewport media queries: slides-per-view is a setting, so a 4-up
       desktop carousel is just as narrow as a phone. */
/* Redesigned card: avatar / rating / social rail on the left, quote column on
   the right, author footer across the card floor. Built on the shared design
   tokens at the top of this file, so the Primary colour control drives the
   avatar ring, quote mark, social chips, read-more link and name hover. */

.tss-wrapper .tss-carousel5 .tss-grid-item {
	margin-bottom: 0;
	container-type: inline-size;
	container-name: tss-c5-slide;
	/* Swiper's own .swiper-slide{height:100%} resolves to the slide's content
	   height and opts it out of the flex line stretch, leaving slides unequal.
	   Releasing it lets every slide match the tallest. */
	height: auto;
	/* Breathing room for the card INSIDE the slide. The swiper track is
	   overflow:hidden, so with the card flush against the slide edges its
	   drop shadow had nowhere to render and the 4px hover lift was clipped
	   off the top - the card read as flat and the hover looked dead. The
	   horizontal room matters just as much: at the default 15px gutter the
	   hover glow was sliced by a hard vertical line at the track edge. The
	   four longhands are set (not the shorthand) so the gutter style control
	   can still override any side it wants. Expanding the track's own clip
	   box with padding + negative margin was tried and rejected: it lets the
	   neighbouring slide peek through the widened strip. */
	padding-top: 20px;
	padding-right: 28px;
	padding-bottom: 38px;
	padding-left: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's 30px padding + 1px border would be ADDED to height:100% and every
   card would overlap the row below. */
.tss-wrapper .tss-carousel5 .single-item-wrapper,
.tss-wrapper .tss-carousel5 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The old shared rule painted this #f8f8f8 and made it a flex row; the card
   itself is .item-content-wrapper now. */
.tss-wrapper .tss-carousel5 .single-item-wrapper {
	display: block;
	height: 100%;
	margin-bottom: 0;
	background: transparent;
}

/* The card. .item-content-wrapper is kept as the card element so the existing
   item-background and content-padding style controls still target it. */
.tss-wrapper .tss-carousel5 .item-content-wrapper {
	position: relative;
	height: 100%;
	margin-top: 0;
	padding: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.06), 0 6px 18px rgba(27, 31, 42, 0.14);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Legacy speech-bubble arrow is not part of this layout. The item background
   style control still emits border rules for this pseudo element on some
   layouts, so keep it suppressed here. */
.tss-wrapper .tss-carousel5 .item-content-wrapper:after {
	content: none;
	display: none;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper:hover .item-content-wrapper {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px rgba(56, 88, 233, 0.26);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

/* Card body: rail + quote column. Growing the body (not the quote) is what
   pins the author footer to the card floor; a growing .item-content would
   stretch past the line clamp and the read-more toggle would never appear. */
.tss-wrapper .tss-carousel5 .tss-card-body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	/* Wrapping is the safety net for narrow CARDS, which no media query can
	   detect: the card width depends on the column count the user picked, so a
	   4-up desktop grid is just as tight as a 2-up tablet one. Once the quote
	   can no longer hold its 220px basis it drops below the rail and takes the
	   full card width, instead of being squeezed to a few characters a line. */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 24px;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* Rail */
.tss-wrapper .tss-carousel5 .tss-meta-info {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 116px;
	flex: 0 0 116px;
	width: 116px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	text-align: center;
	background: transparent;
}

.tss-wrapper .tss-carousel5 .profile-img-wrapper {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: inline-block;
	margin: 0;
	padding: 3px;
	line-height: 0;
	box-shadow: 0 0 0 2px var(--tss-primary-soft, #eef1fe);
	-webkit-transition: box-shadow 0.22s ease;
	transition: box-shadow 0.22s ease;
}

.tss-wrapper .tss-carousel5 .profile-img-wrapper a {
	display: block;
	line-height: 0;
}

.tss-wrapper .tss-carousel5 .profile-img-wrapper img {
	width: 92px;
	height: 92px;
	max-width: 92px;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	border: 3px solid #fff;
}

/* Rating + social icons travel together when the rail turns horizontal.
   Full width of the rail so the text-align below has something to work against. */
.tss-wrapper .tss-carousel5 .tss-rail-info {
	width: 100%;
	min-width: 0;
}

/* These containers are deliberately block-level, not flex. The Rating and
   Social "Alignment" style controls emit text-align on exactly these elements
   (both arms), and a flex container would ignore it — the icons would stay
   centred whatever the user picked. Block + inline-block children keeps the
   controls live; the spacing that a flex gap would give comes from the
   children's own margins. */
.tss-wrapper .tss-carousel5 .rating-wrapper {
	display: block;
	margin: 16px 0 12px;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-carousel5 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 16px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* Social chips. Block container for the same reason as .rating-wrapper above —
   the Social / Social Share "Alignment" controls emit text-align here. */
.tss-wrapper .tss-carousel5 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel5 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper .tss-social-share {
	margin-top: 10px;
}

/* rtShare prints a "Share on:" label inline with the icons. In a 116px rail
   that pushes the icons onto their own ragged line, so give the label a line
   of its own and tone it down. */
.tss-wrapper .tss-carousel5 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel5 .author-social .tss-social-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* 3px margins keep three 32px chips (3 x 38 = 114px) inside the 116px rail. */
.tss-wrapper .tss-carousel5 .author-social a,
.tss-wrapper .tss-carousel5 .tss-social-share a {
	width: 32px;
	height: 32px;
	margin: 3px;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	border: 1px solid #dde3fc;
	border: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel5 .author-social a:hover,
.tss-wrapper .tss-carousel5 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-carousel5 .author-social span.dashicons,
.tss-wrapper .tss-carousel5 .tss-social-share span.dashicons,
.tss-wrapper .tss-carousel5 .tss-social-share i.dashicons,
.tss-wrapper .tss-carousel5 .tss-social-share i.fa {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-carousel5 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel5 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel5 .author-social .dashicons-twitter:before {
	width: 15px;
	height: 15px;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel5 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel5 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Quote column. Takes the whole card width on its own when every rail item
   (avatar, rating, social) is switched off and the rail is not rendered. */
.tss-wrapper .tss-carousel5 .tss-quote-col {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 220px;
	flex: 1 1 220px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
}

.tss-wrapper .tss-carousel5 .tss-quote-mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: 0.5;
	font-weight: 700;
	color: var(--tss-primary-soft, #eef1fe);
	margin-bottom: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel5 .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3c4150;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}

.tss-wrapper .tss-carousel5 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel5 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author footer */
.tss-wrapper .tss-carousel5 .tss-card-foot {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--tss-line-soft, #ebecf1);
}

.tss-wrapper .tss-carousel5 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel5 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel5 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel5 .single-item-wrapper h4.author-bio {
	margin: 4px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

/* Narrow SLIDE, independent of the viewport. Step one: tighten the rail. */
@container tss-c5-slide (max-width: 520px) {
	.tss-wrapper .tss-carousel5 .tss-card-body {
		gap: 20px;
	}

	.tss-wrapper .tss-carousel5 .tss-meta-info {
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		width: 100px;
	}

	.tss-wrapper .tss-carousel5 .profile-img-wrapper img {
		width: 80px;
		height: 80px;
		max-width: 80px;
	}
}

/* Step two: the rail turns horizontal and sits above the quote. */
@container tss-c5-slide (max-width: 420px) {
	.tss-wrapper .tss-carousel5 .item-content-wrapper {
		padding: 24px;
	}

	.tss-wrapper .tss-carousel5 .tss-card-body {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 18px;
	}

	.tss-wrapper .tss-carousel5 .tss-meta-info {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 16px;
		text-align: left;
	}

	/* Shrink-to-fit rather than filling the row. Deliberately NOT done with
	   text-align: left - Elementor's rating and social "Alignment" controls both
	   ship 'default' => 'center' and emit it at ~(0,5,0), which beats any
	   stylesheet rule here. Sizing the box to its content renders identically on
	   both arms whatever the alignment value is. */
	.tss-wrapper .tss-carousel5 .tss-rail-info {
		width: auto;
		-webkit-box-flex: 0;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		min-width: 0;
	}

	.tss-wrapper .tss-carousel5 .rating-wrapper {
		margin: 0 0 6px;
	}

	.tss-wrapper .tss-carousel5 .single-item-wrapper .tss-social-share {
		margin-top: 6px;
	}
}


/* Viewport fallback for browsers without @container. Gated with @supports so it
   can never fire alongside the container queries above - on a capable browser
   the card width decides, not the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.tss-wrapper .tss-carousel5 .tss-card-body {
			gap: 20px;
		}

		.tss-wrapper .tss-carousel5 .tss-meta-info {
			-ms-flex: 0 0 100px;
			flex: 0 0 100px;
			width: 100px;
		}

		.tss-wrapper .tss-carousel5 .profile-img-wrapper img {
			width: 80px;
			height: 80px;
			max-width: 80px;
		}
	}

	@media (max-width: 480px) {
		.tss-wrapper .tss-carousel5 .item-content-wrapper {
			padding: 24px;
		}

		.tss-wrapper .tss-carousel5 .tss-card-body {
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 18px;
		}

		.tss-wrapper .tss-carousel5 .tss-meta-info {
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			width: auto;
			-ms-flex-direction: row;
			flex-direction: row;
			-ms-flex-align: center;
			align-items: center;
			gap: 16px;
			text-align: left;
		}

		.tss-wrapper .tss-carousel5 .tss-rail-info {
			width: auto;
			-ms-flex: 0 1 auto;
			flex: 0 1 auto;
			min-width: 0;
		}
	}
}

/******************************************************/
/*********************** Carousel 6  *****************/
/******************************************************/
/* Carousel 6 is the carousel twin of layout 6 - same DOM, same anatomy -
   so it takes the same speech-bubble card. Carousel-specific differences:
     * the slide gets room on all four sides. The swiper track is
       overflow:hidden, so a card flush to the slide edge has nowhere to
       cast its shadow and its hover lift is sliced off.
     * the narrow step is a container query on the slide, not a viewport
       media query - slides-per-view is a setting, not a breakpoint.
   NOTE: the tail is a rotated square that takes the item background as a
   BACKGROUND, not a border-triangle. carousel6 was moved to the background
   emitter in TSSProHelper::layoutStyle() and ElementorFilters to match. */
.tss-wrapper .tss-carousel6 .single-item {
	padding: 0;
}

.tss-wrapper .tss-carousel6 .tss-grid-item {
	margin-bottom: 0;
	container-type: inline-size;
	container-name: tss-c6-slide;
	/* Swiper's .swiper-slide{height:100%} resolves to the slide's own
	   content height and opts it out of the flex line stretch. */
	height: auto;
	/* Room for the card shadow and the hover lift inside the clipped
	   track. Four longhands, so the gutter control can still override
	   any single side. */
	padding-top: 20px;
	padding-right: 28px;
	padding-bottom: 38px;
	padding-left: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the bubble's padding would be ADDED to height:100%. */
.tss-wrapper .tss-carousel6 .single-item-wrapper,
.tss-wrapper .tss-carousel6 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Column so the bubble can absorb the spare height and the author rows of a
   row of cards line up on the same baseline. */
.tss-wrapper .tss-carousel6 .single-item-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* Every slide equalises to the tallest, so a short testimonial left a
	   hole at the card floor. Centring splits that slack evenly instead of
	   pinning the content to the ceiling. */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	background: transparent;
}

/* The bubble. .item-content-wrapper is kept as the bubble element so the
   existing item-background and content-padding style controls still target it. */
.tss-wrapper .tss-carousel6 .item-content-wrapper {
	position: relative;
	/* The bubble hugs its text. With flex:1 it stretched to fill the card,
	   and because every card equalises to the tallest in its row (or, in the
	   carousel, to the tallest slide) a short quote left up to 144px of dead
	   space inside the bubble. The leftover height now falls below the author
	   row, where there is no card surface to show it. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-top: 0;
	padding: 28px 30px 26px;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.06), 0 6px 18px rgba(27, 31, 42, 0.14);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* The legacy icon-font quote mark is replaced by the .tss-quote-mark span, so
   this pseudo element has to be suppressed. The Elementor "Quote Icon" control
   still emits a colour for it — harmless once there is no glyph. */
.tss-wrapper .tss-carousel6 .item-content-wrapper:before {
	content: none;
	display: none;
}

/* Downward tail: a rotated square carrying two of the bubble's borders, so the
   1px outline runs continuously around the tail. NOTE this is why the item
   background control emits "background" for layout 6 and "border-top" for
   carousel 6 — see TSSProHelper::layoutStyle() and pro's ElementorFilters. */
.tss-wrapper .tss-carousel6 .item-content-wrapper:after {
	content: "";
	position: absolute;
	left: var(--tss-a6-tail-l, 46px);
	right: var(--tss-a6-tail-r, auto);
	bottom: -9px;
	width: 18px;
	height: 18px;
	background: var(--tss-card, #ffffff);
	border-right: 1px solid var(--tss-line-soft, #ebecf1);
	border-bottom: 1px solid var(--tss-line-soft, #ebecf1);
	border-bottom-right-radius: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.22s ease;
	transition: border-color 0.22s ease;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper:hover .item-content-wrapper {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px rgba(56, 88, 233, 0.26);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-carousel6 .single-item-wrapper:hover .item-content-wrapper:after {
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-carousel6 .tss-quote-mark {
	display: block;
	margin-bottom: 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 50px;
	line-height: 0.5;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel6 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.72;
	color: #3c4150;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}

.tss-wrapper .tss-carousel6 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel6 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author row, below the bubble */
.tss-wrapper .tss-carousel6 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 18px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin-top: 26px;
	padding-left: 6px;
	flex-direction: var(--tss-a6-dir, row);
	text-align: var(--tss-a6-ta, left);
}

.tss-wrapper .tss-carousel6 .profile-img-wrapper {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: inline-block;
	margin: 0;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel6 .profile-img-wrapper a {
	display: block;
	line-height: 0;
}

.tss-wrapper .tss-carousel6 .profile-img-wrapper img {
	width: 78px;
	height: 78px;
	max-width: 78px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 18px rgba(27, 31, 42, 0.12);
}

.tss-wrapper .tss-carousel6 .tss-meta-info .tss-right {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	position: relative;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel6 .single-item-wrapper h4.author-bio {
	margin: 3px 0 8px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

/* This author row is left-aligned by design, but Elementor's rating and social
   "Alignment" controls both ship 'default' => 'center' and emit it at ~(0,5,0),
   which beats any stylesheet rule here — the Elementor arm centred the stars
   and icons while the shortcode arm kept them left. Sizing each container to
   its own content makes the alignment value a no-op (there is no slack inside
   the box to align within), so both arms render identically. They stay
   block-level so they still stack vertically. */
.tss-wrapper .tss-carousel6 .rating-wrapper,
.tss-wrapper .tss-carousel6 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel6 .single-item-wrapper .tss-social-share {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}

/* Image Style → Alignment on this layout re-flows the author row (the
   tss_el_image_row_alignment control sets the --tss-a6-* variables). Unset,
   every variable falls back to today's value, so the default is untouched. */
.tss-wrapper .tss-carousel6 .tss-meta-info .author-social,
.tss-wrapper .tss-carousel6 .tss-meta-info .tss-social-share {
	margin-left: var(--tss-a6-ml, 0);
	margin-right: var(--tss-a6-mr, 0);
}

.tss-wrapper .tss-carousel6 .rating-wrapper {
	display: block;
	margin: 0 var(--tss-a6-mr, 0) 0 var(--tss-a6-ml, 0);
	line-height: 1;
	text-align: left;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-carousel6 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.5px 0 0;
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel6 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 8px 0 0;
	text-align: left;
}

.tss-wrapper .tss-carousel6 .single-item-wrapper .tss-social-share {
	margin-top: 6px;
}

.tss-wrapper .tss-carousel6 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel6 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-carousel6 .author-social a,
.tss-wrapper .tss-carousel6 .tss-social-share a {
	width: 28px;
	height: 28px;
	margin: 2px 4px 2px 0;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel6 .author-social a:hover,
.tss-wrapper .tss-carousel6 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-carousel6 .author-social span.dashicons,
.tss-wrapper .tss-carousel6 .tss-social-share span.dashicons,
.tss-wrapper .tss-carousel6 .tss-social-share i.dashicons,
.tss-wrapper .tss-carousel6 .tss-social-share i.fa {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-carousel6 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel6 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel6 .author-social .dashicons-twitter:before {
	width: 14px;
	height: 14px;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel6 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel6 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Narrow SLIDE, independent of the viewport. */
@container tss-c6-slide (max-width: 420px) {
	.tss-wrapper .tss-carousel6 .item-content-wrapper {
		padding: 24px 22px 22px;
	}

	.tss-wrapper .tss-carousel6 .item-content-wrapper:after {
		left: var(--tss-a6-tail-l, 32px);
	}

	.tss-wrapper .tss-carousel6 .tss-meta-info {
		gap: 14px;
		margin-top: 22px;
		padding-left: 2px;
	}

	.tss-wrapper .tss-carousel6 .profile-img-wrapper img {
		width: 64px;
		height: 64px;
		max-width: 64px;
		border-width: 3px;
	}

	.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}
}

/* Viewport fallback for browsers without @container, gated so the two can
   never both fire. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.tss-wrapper .tss-carousel6 .item-content-wrapper {
			padding: 24px 22px 22px;
		}

		.tss-wrapper .tss-carousel6 .item-content-wrapper:after {
			left: var(--tss-a6-tail-l, 32px);
		}

		.tss-wrapper .tss-carousel6 .tss-meta-info {
			gap: 14px;
			margin-top: 22px;
			padding-left: 2px;
		}

		.tss-wrapper .tss-carousel6 .profile-img-wrapper img {
			width: 64px;
			height: 64px;
			max-width: 64px;
			border-width: 3px;
		}

		.tss-wrapper .tss-carousel6 .single-item-wrapper h3.author-name {
			font-size: 19px;
		}
	}
}

/******************************************************/
/********************** Layout 6  ********************/
/******************************************************/
/* Redesigned speech-bubble card: quote mark + testimonial in a bordered bubble
   with a downward tail, author row below it. Built on the shared design tokens
   at the top of this file, so the Primary colour control drives the quote mark,
   read-more link, avatar ring and name hover. */

.tss-wrapper .tss-layout6 .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout6 .tss-grid-item {
	margin-bottom: 34px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the bubble's padding would be ADDED to height:100%. */
.tss-wrapper .tss-layout6 .single-item-wrapper,
.tss-wrapper .tss-layout6 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Column so the bubble can absorb the spare height and the author rows of a
   row of cards line up on the same baseline. */
.tss-wrapper .tss-layout6 .single-item-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	background: transparent;
}

/* The bubble. .item-content-wrapper is kept as the bubble element so the
   existing item-background and content-padding style controls still target it. */
.tss-wrapper .tss-layout6 .item-content-wrapper {
	position: relative;
	/* The bubble hugs its text. With flex:1 it stretched to fill the card,
	   and because every card equalises to the tallest in its row (or, in the
	   carousel, to the tallest slide) a short quote left up to 144px of dead
	   space inside the bubble. The leftover height now falls below the author
	   row, where there is no card surface to show it. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-top: 0;
	padding: 28px 30px 26px;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.06), 0 6px 18px rgba(27, 31, 42, 0.14);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* The legacy icon-font quote mark is replaced by the .tss-quote-mark span, so
   this pseudo element has to be suppressed. The Elementor "Quote Icon" control
   still emits a colour for it — harmless once there is no glyph. */
.tss-wrapper .tss-layout6 .item-content-wrapper:before {
	content: none;
	display: none;
}

/* Downward tail: a rotated square carrying two of the bubble's borders, so the
   1px outline runs continuously around the tail. NOTE this is why the item
   background control emits "background" for layout 6 and "border-top" for
   carousel 6 — see TSSProHelper::layoutStyle() and pro's ElementorFilters. */
.tss-wrapper .tss-layout6 .item-content-wrapper:after {
	content: "";
	position: absolute;
	left: var(--tss-a6-tail-l, 46px);
	right: var(--tss-a6-tail-r, auto);
	bottom: -9px;
	width: 18px;
	height: 18px;
	background: var(--tss-card, #ffffff);
	border-right: 1px solid var(--tss-line-soft, #ebecf1);
	border-bottom: 1px solid var(--tss-line-soft, #ebecf1);
	border-bottom-right-radius: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.22s ease;
	transition: border-color 0.22s ease;
}

.tss-wrapper .tss-layout6 .single-item-wrapper:hover .item-content-wrapper {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px rgba(56, 88, 233, 0.26);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.08), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 26%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-layout6 .single-item-wrapper:hover .item-content-wrapper:after {
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-layout6 .tss-quote-mark {
	display: block;
	margin-bottom: 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 50px;
	line-height: 0.5;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout6 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.72;
	color: #3c4150;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}

.tss-wrapper .tss-layout6 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout6 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout6 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author row, below the bubble */
.tss-wrapper .tss-layout6 .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 18px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin-top: 26px;
	padding-left: 6px;
	flex-direction: var(--tss-a6-dir, row);
	text-align: var(--tss-a6-ta, left);
}

.tss-wrapper .tss-layout6 .profile-img-wrapper {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: inline-block;
	margin: 0;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-layout6 .profile-img-wrapper a {
	display: block;
	line-height: 0;
}

.tss-wrapper .tss-layout6 .profile-img-wrapper img {
	width: 78px;
	height: 78px;
	max-width: 78px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 18px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 18px rgba(27, 31, 42, 0.12);
}

.tss-wrapper .tss-layout6 .tss-meta-info .tss-right {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	position: relative;
}

.tss-wrapper .tss-layout6 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout6 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout6 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout6 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout6 .single-item-wrapper h4.author-bio {
	margin: 3px 0 8px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

/* This author row is left-aligned by design, but Elementor's rating and social
   "Alignment" controls both ship 'default' => 'center' and emit it at ~(0,5,0),
   which beats any stylesheet rule here — the Elementor arm centred the stars
   and icons while the shortcode arm kept them left. Sizing each container to
   its own content makes the alignment value a no-op (there is no slack inside
   the box to align within), so both arms render identically. They stay
   block-level so they still stack vertically. */
.tss-wrapper .tss-layout6 .rating-wrapper,
.tss-wrapper .tss-layout6 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout6 .single-item-wrapper .tss-social-share {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}

/* Image Style → Alignment on this layout re-flows the author row (the
   tss_el_image_row_alignment control sets the --tss-a6-* variables). Unset,
   every variable falls back to today's value, so the default is untouched. */
.tss-wrapper .tss-layout6 .tss-meta-info .author-social,
.tss-wrapper .tss-layout6 .tss-meta-info .tss-social-share {
	margin-left: var(--tss-a6-ml, 0);
	margin-right: var(--tss-a6-mr, 0);
}

.tss-wrapper .tss-layout6 .rating-wrapper {
	display: block;
	margin: 0 var(--tss-a6-mr, 0) 0 var(--tss-a6-ml, 0);
	line-height: 1;
	text-align: left;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-layout6 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.5px 0 0;
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-layout6 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout6 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout6 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 8px 0 0;
	text-align: left;
}

.tss-wrapper .tss-layout6 .single-item-wrapper .tss-social-share {
	margin-top: 6px;
}

.tss-wrapper .tss-layout6 .tss-social-share .share-icons,
.tss-wrapper .tss-layout6 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout6 .author-social a,
.tss-wrapper .tss-layout6 .tss-social-share a {
	width: 28px;
	height: 28px;
	margin: 2px 4px 2px 0;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-layout6 .author-social a:hover,
.tss-wrapper .tss-layout6 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-layout6 .author-social span.dashicons,
.tss-wrapper .tss-layout6 .tss-social-share span.dashicons,
.tss-wrapper .tss-layout6 .tss-social-share i.dashicons,
.tss-wrapper .tss-layout6 .tss-social-share i.fa {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-layout6 .author-social .dashicons-skype:before,
.tss-wrapper .tss-layout6 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-layout6 .author-social .dashicons-twitter:before {
	width: 14px;
	height: 14px;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-layout6 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout6 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout6 .item-content-wrapper {
		padding: 24px 22px 22px;
	}

	.tss-wrapper .tss-layout6 .item-content-wrapper:after {
		left: var(--tss-a6-tail-l, 32px);
	}

	.tss-wrapper .tss-layout6 .tss-meta-info {
		gap: 14px;
		margin-top: 22px;
		padding-left: 2px;
	}

	.tss-wrapper .tss-layout6 .profile-img-wrapper img {
		width: 64px;
		height: 64px;
		max-width: 64px;
		border-width: 3px;
	}

	.tss-wrapper .tss-layout6 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}
}

/******************************************************/
/*********************** Isotope 3  ******************/
/******************************************************/
/* Isotope 3 is the isotope sibling of layout 3 — same DOM, same anatomy — so
   it takes the same centred card: avatar, rating, name and role above a tinted
   quote panel with the floating quote badge. Derived from the layout 3 section
   above by renaming the selector; keep the two in step when either changes.

   The one difference is the same one isotope 2 carries: the card is not
   stretched to height:100%, because isotope sizes every item to its own
   content — that is what makes the wall a wall. */
.tss-wrapper .tss-isotope3 .single-item-wrapper,
.tss-wrapper .tss-isotope3 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-isotope3 .single-item {
	padding: 0;
}

/* Centred stack: avatar, rating, name, role, then the quote in an inset panel.
   text-align is declared once on the card and inherited, so every per-element
   alignment control (which targets the element itself, at a higher specificity)
   stays live on both the shortcode and the Elementor arm. */
.tss-wrapper .tss-isotope3 .single-item-wrapper {
	/* Not height:100% as on layout 3 — isotope sizes each item to its own
	   content, which is what makes the wall a wall. */
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 32px 28px 28px;
	text-align: center;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: var(--tss-radius, 16px);
	-webkit-transition: border-color 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tss-wrapper .tss-isotope3 .single-item-wrapper:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	border-color: #dcdfe8;
	box-shadow: 0 14px 30px rgba(27, 31, 42, 0.10);
}

/* Avatar */
.tss-wrapper .tss-isotope3 .profile-img-wrapper {
	display: block;
	margin: 0 0 14px;
	line-height: 0;
	text-align: center;
}

/* The ring is a box-shadow rather than a border so the image border style
   control keeps the border to itself. */
.tss-wrapper .tss-isotope3 .profile-img-wrapper img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	box-shadow: 0 0 0 5px var(--tss-primary-soft, #eef1fe), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* Rating */
.tss-wrapper .tss-isotope3 .rating-wrapper {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: 1;
}

/* Beats the generic ".single-item-wrapper .rating-wrapper span.dashicons { gold }". */
.tss-wrapper .tss-isotope3 .single-item-wrapper .rating-wrapper span.dashicons {
	color: var(--tss-star, #f5b800);
	font-size: 17px;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

.tss-wrapper .tss-isotope3 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* Author */
.tss-wrapper .tss-isotope3 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-isotope3 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-isotope3 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-isotope3 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-isotope3 .single-item-wrapper h4.author-bio {
	margin: 4px 0 18px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-isotope3 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope3 .single-item-wrapper .tss-social-share {
	margin: 0 0 14px;
}

.tss-wrapper .tss-isotope3 .author-social a,
.tss-wrapper .tss-isotope3 .tss-social-share a {
	color: var(--tss-muted, #6a6f7e);
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-isotope3 .author-social a:hover,
.tss-wrapper .tss-isotope3 .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
}

/* Quote panel */
.tss-wrapper .tss-isotope3 .item-content-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 100%;
	margin-top: 0;
	padding: 26px 24px 22px;
	background: var(--tss-panel, #f7f8fb);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 12px;
}

/* The legacy quote glyph is replaced by a real .tss-quote-mark element; the
   Quote Icon control still emits a colour for :before, so both stay suppressed. */
.tss-wrapper .tss-isotope3 .item-content-wrapper:before,
.tss-wrapper .tss-isotope3 .item-content-wrapper:after {
	content: none;
	display: none;
}

/* Badge straddling the panel's top edge. Primary drives it, same as the other
   token-based layouts. */
.tss-wrapper .tss-isotope3 .tss-quote-mark {
	position: absolute;
	top: -17px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: -ms-grid;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding-top: 12px;
	border-radius: 50%;
	background: var(--tss-primary, #3858e9);
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.30);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-isotope3 .item-content {
	margin: 8px 0 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.7;
	font-style: normal;
	color: #3c4150;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-isotope3 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-isotope3 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-isotope3 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* See layout 1: the clamped element must not flex-grow or the clamp never fires. */
.tss-wrapper .tss-isotope3 .tss-card-spacer {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* Grid mechanics (see layout 1): the row gives every column the same height, so
   the card fills it and every card in a row ends level. box-sizing is declared
   explicitly rather than inherited from the theme reset — wp-admin has none, so
   in the Layout Preview the padding would be added to height:100% instead.

   Card width is a column-count setting, so a viewport query cannot know how
   wide a card actually is either — query the card, not the screen.
   container-type: inline-size resolves against the CONTENT box, so the
   threshold below is the card width, not the column's outer width. */
.tss-wrapper .tss-isotope3 .tss-grid-item {
	margin-bottom: 28px;
	container-type: inline-size;
	container-name: tss-iso3-card;
}

@container tss-iso3-card (max-width: 400px) {
	.tss-wrapper .tss-isotope3 .single-item-wrapper {
		padding: 26px 20px 22px;
	}

	.tss-wrapper .tss-isotope3 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
	}

	.tss-wrapper .tss-isotope3 .item-content-wrapper {
		padding: 24px 18px 20px;
	}
}


/******************************************************/
/*********************** Carousel 7  *****************/
/******************************************************/
/* Redesigned cameo card: a tinted head panel with the avatar straddling its
   lower edge, the quote on clean white below it, and the author identity on
   the card floor. Carousel 7 used the original layout-7 card until this
   redesign; isotope 3 still does and now has that block to itself, above.
   Notes specific to this layout:
     - the head is a separate .tss-card-head element, NOT .item-content-wrapper.
       The item background control paints that wrapper generically at ID
       specificity, so a tint declared there would be flattened the moment a
       user picks an item colour.
     - that same control repaints the card, so the head uses a translucent
       neutral wash instead of the --tss-panel token: an opaque panel colour
       would sit as a light grey band across a dark card.
     - the card carries no padding of its own. The Elementor Content Padding
       control targets the card for carousel 7 and the head has to reach the
       card edges, so the padding lives on the three inner blocks instead.
     - the avatar declares NO border-radius. The Image Type -> Circle switch
       and the Elementor image Border Radius control both sit at the same
       specificity as a layout avatar rule, so any radius declared here would
       silently beat them.
     - the slide gets room on all four sides: the swiper track is
       overflow:hidden, so a card flush to the slide edge has nowhere to cast
       its shadow and its hover lift is sliced off the top.
     - the narrow step is a container query on the slide, not a viewport media
       query - slides-per-view is a setting, not a breakpoint.
   Built on the shared design tokens at the top of this file, so the Primary
   colour control drives the quote mark, the rule, the avatar ring, the social
   chips, the read-more link and the name hover. */

.tss-wrapper .tss-carousel7 .single-item {
	padding: 0;
}

.tss-wrapper .tss-carousel7 .tss-grid-item {
	margin-bottom: 0;
	container-type: inline-size;
	container-name: tss-c7-slide;
	/* Swiper's own .swiper-slide{height:100%} resolves to the slide's content
	   height and opts it out of the flex line stretch, leaving slides unequal.
	   Releasing it lets every slide match the tallest. */
	height: auto;
	/* Room for the card shadow and the hover lift inside the clipped track.
	   The four longhands are set, not the shorthand, so the gutter style
	   control can still override any single side. */
	padding-top: 20px;
	padding-right: 28px;
	padding-bottom: 38px;
	padding-left: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the inner blocks' padding would be ADDED to height:100%. */
.tss-wrapper .tss-carousel7 .single-item-wrapper,
.tss-wrapper .tss-carousel7 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The card. .single-item-wrapper is the card element for carousel 7 - that is
   what the item background and content padding controls target here. Column
   flex so the foot can be pushed to the floor and every slide's author name
   lines up; overflow clips the head panel to the card radius. */
.tss-wrapper .tss-carousel7 .single-item-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
	text-align: center;
	background: var(--tss-card, #ffffff);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 18px;
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* NOTE: deliberately no background change on hover. The item background control
   paints BOTH this card and the nested .item-content-wrapper (the generic
   "#id.tss-wrapper .item-content-wrapper" selector), and it wins on ID
   specificity - so lightening only the card on hover would leave the inner
   block showing the old colour as a visible rectangle. */
.tss-wrapper .tss-carousel7 .single-item-wrapper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

/* The tinted head. Translucent on purpose - see the section note. */
.tss-wrapper .tss-carousel7 .tss-card-head {
	padding: 26px 26px 0;
	background: rgba(31, 35, 48, 0.035);
	border-bottom: 1px solid rgba(31, 35, 48, 0.07);
}

/* Half the avatar's height, so it straddles the seam between head and body.
   The stacking order is load-bearing: .item-content-wrapper is a LATER sibling
   and the item background control paints it generically at ID specificity, so
   without a z-index its background covers the half of the avatar that overlaps
   it and the cameo collapses the moment a user picks an item colour. */
.tss-wrapper .tss-carousel7 .tss-meta-info {
	display: block;
	position: relative;
	z-index: 2;
	margin-bottom: -42px;
}

.tss-wrapper .tss-carousel7 .profile-img-wrapper {
	display: block;
	margin: 0 auto;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel7 .profile-img-wrapper a {
	display: inline-block;
	line-height: 0;
}

.tss-wrapper .tss-carousel7 .profile-img-wrapper img {
	width: 84px;
	height: 84px;
	max-width: 84px;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* Three classes, so it also neutralises the generic
   ".tss-wrapper .item-content-wrapper { padding: 20px; margin-top: 15px }" in
   the max-width:767px tail at the end of this file. */
.tss-wrapper .tss-carousel7 .item-content-wrapper {
	position: relative;
	margin-top: 0;
	padding: 56px 30px 0;
}

.tss-wrapper .tss-carousel7 .tss-quote-mark {
	display: block;
	margin: 0 auto 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 0.3;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel7 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.74;
	color: #41475a;
	margin: 0 auto;
	padding: 0;
	max-width: 42ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-carousel7 .item-content-wrapper .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel7 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel7 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* The author floor. margin-top:auto pins it to the bottom of the equal-height
   card so every slide's name sits on the same line. */
.tss-wrapper .tss-carousel7 .tss-card-foot {
	margin-top: auto;
	padding: 0 30px 24px;
}

.tss-wrapper .tss-carousel7 .tss-divider {
	display: block;
	width: 44px;
	height: 2px;
	margin: 14px auto 12px;
	border-radius: 2px;
	background: var(--tss-primary-soft, #eef1fe);
}

.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	text-align: center;
	display: inline-block;
	clear: none;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel7 .single-item-wrapper h4.author-bio {
	margin: 5px 0 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
	clear: none;
}

/* Block-level with text-align, not flex: the Rating and Social "Alignment"
   style controls emit text-align on exactly these elements, and a flex
   container would ignore them. Centre matches Elementor's own default, so both
   arms agree out of the box. */
.tss-wrapper .tss-carousel7 .rating-wrapper {
	display: block;
	margin: 10px 0 0;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { gold }"
   further down this file. */
/* width/height stay auto so the Rating "Font size" control actually resizes the
   star: it only emits font-size, and a fixed box crops a larger glyph and makes
   the stars overlap each other. */
.tss-wrapper .tss-carousel7 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 18px;
	line-height: 1;
}

.tss-wrapper .tss-carousel7 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel7 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel7 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 10px 0 0;
	text-align: center;
}

.tss-wrapper .tss-carousel7 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel7 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed 30px box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it.
   min-width/min-height hold the resting chip at 30px. */
.tss-wrapper .tss-carousel7 .author-social a,
.tss-wrapper .tss-carousel7 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 30px;
	min-height: 30px;
	padding: 7px;
	margin: 0 3px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--tss-primary-soft, #eef1fe);
	color: var(--tss-primary, #3858e9);
	-webkit-transition: background 0.15s ease, color 0.15s ease, -webkit-transform 0.15s ease;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tss-wrapper .tss-carousel7 .author-social a:hover,
.tss-wrapper .tss-carousel7 .tss-social-share a:hover {
	background: var(--tss-primary, #3858e9);
	color: #fff;
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-carousel7 .author-social a span.dashicons,
.tss-wrapper .tss-carousel7 .author-social a i,
.tss-wrapper .tss-carousel7 .tss-social-share a span.dashicons,
.tss-wrapper .tss-carousel7 .tss-social-share a i {
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

/* The mask-image icons (the X glyph especially) paint themselves with
   background-color, and the global ".dashicons-twitter:before" hard-codes #000
   - so without this they stay black on the tinted chip and never turn white on
   hover. Sized in em, not px: the shortcode arm's Social "Font size" control
   emits an explicit :before width/height, the Elementor arm has no equivalent
   emission, and 1em makes both arms scale the same way. */
.tss-wrapper .tss-carousel7 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel7 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel7 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel7 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-carousel7 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-carousel7 .tss-social-share .dashicons-twitter:before {
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel7 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel7 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Narrow slide. slides-per-view is a setting, so a 4-up desktop carousel is
   just as narrow as a phone - the card's own width has to decide. */
@container tss-c7-slide (max-width: 340px) {
	.tss-wrapper .tss-carousel7 .tss-card-head {
		padding: 20px 18px 0;
	}

	.tss-wrapper .tss-carousel7 .profile-img-wrapper img {
		width: 68px;
		height: 68px;
		max-width: 68px;
		border-width: 3px;
	}

	.tss-wrapper .tss-carousel7 .tss-meta-info {
		margin-bottom: -34px;
	}

	.tss-wrapper .tss-carousel7 .item-content-wrapper {
		padding: 46px 20px 0;
	}

	.tss-wrapper .tss-carousel7 .item-content-wrapper .item-content {
		font-size: 15px;
		-webkit-line-clamp: 5;
	}

	.tss-wrapper .tss-carousel7 .tss-card-foot {
		padding: 0 20px 20px;
	}

	.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name {
		font-size: 18px;
	}
}

/* Viewport fallback for browsers without @container. Gated with @supports so it
   can never fire alongside the container query above - on a capable browser the
   card width decides, not the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.tss-wrapper .tss-carousel7 .tss-card-head {
			padding: 20px 18px 0;
		}

		.tss-wrapper .tss-carousel7 .profile-img-wrapper img {
			width: 68px;
			height: 68px;
			max-width: 68px;
			border-width: 3px;
		}

		.tss-wrapper .tss-carousel7 .tss-meta-info {
			margin-bottom: -34px;
		}

		.tss-wrapper .tss-carousel7 .item-content-wrapper {
			padding: 46px 20px 0;
		}

		.tss-wrapper .tss-carousel7 .item-content-wrapper .item-content {
			font-size: 15px;
			-webkit-line-clamp: 5;
		}

		.tss-wrapper .tss-carousel7 .tss-card-foot {
			padding: 0 20px 20px;
		}

		.tss-wrapper .tss-carousel7 .single-item-wrapper h3.author-name {
			font-size: 18px;
		}
	}
}

/******************************************************/
/********************** Layout 7  ********************/
/******************************************************/
/* Redesigned centred card: avatar, author identity, a short rule, then the
   quote mark and testimonial. Built on the shared design tokens at the top of
   this file, so the Primary colour control drives the quote mark, the rule,
   the avatar ring, the social chips, the read-more link and the name hover. */

.tss-wrapper .tss-layout7 .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout7 .tss-grid-item {
	margin-bottom: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's padding would be ADDED to height:100%. */
.tss-wrapper .tss-layout7 .single-item-wrapper,
.tss-wrapper .tss-layout7 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The card. .single-item-wrapper is the card element for layout 7 — that is
   what the item background and content padding controls target here. */
.tss-wrapper .tss-layout7 .single-item-wrapper {
	position: relative;
	height: 100%;
	padding: 36px 36px 32px;
	text-align: center;
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 18px;
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* The legacy icon-font quote mark is replaced by the .tss-quote-mark span. */
.tss-wrapper .tss-layout7 .single-item-wrapper:before {
	content: none;
	display: none;
}

/* NOTE: deliberately no background change on hover. The item background control
   paints BOTH this card and the nested .item-content-wrapper (the generic
   "#id.tss-wrapper .item-content-wrapper" selector), and it wins on ID
   specificity — so lightening only the card on hover would leave the inner
   block showing the old colour as a visible rectangle. */
.tss-wrapper .tss-layout7 .single-item-wrapper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-layout7 .tss-meta-info {
	display: block;
}

.tss-wrapper .tss-layout7 .profile-img-wrapper {
	display: block;
	margin: 0 auto 18px;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-layout7 .profile-img-wrapper a {
	display: inline-block;
	line-height: 0;
}

.tss-wrapper .tss-layout7 .profile-img-wrapper img {
	width: 88px;
	height: 88px;
	max-width: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
}

.tss-wrapper .tss-layout7 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	text-align: center;
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout7 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout7 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout7 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout7 .single-item-wrapper h4.author-bio {
	margin: 5px 0 12px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
}

/* Block-level with text-align, not flex: the Rating and Social "Alignment"
   style controls emit text-align on exactly these elements, and a flex
   container would ignore them. Centre matches Elementor's own default, so both
   arms agree out of the box. */
.tss-wrapper .tss-layout7 .rating-wrapper {
	display: block;
	margin: 0;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-layout7 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	/* width/height stay auto so the Rating "Font size" control actually resizes
	   the star: it only emits font-size, and a fixed box crops a larger glyph
	   and makes the stars overlap each other. */
	width: auto;
	height: auto;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 18px;
	line-height: 1;
}

.tss-wrapper .tss-layout7 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout7 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout7 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 10px 0 0;
	text-align: center;
}

.tss-wrapper .tss-layout7 .tss-social-share .share-icons,
.tss-wrapper .tss-layout7 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed 30px box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it.
   min-width/min-height hold the resting chip at 30px. */
.tss-wrapper .tss-layout7 .author-social a,
.tss-wrapper .tss-layout7 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 30px;
	min-height: 30px;
	padding: 7px;
	margin: 2px 3px;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-layout7 .author-social a:hover,
.tss-wrapper .tss-layout7 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

.tss-wrapper .tss-layout7 .author-social span.dashicons,
.tss-wrapper .tss-layout7 .author-social i,
.tss-wrapper .tss-layout7 .tss-social-share span.dashicons,
.tss-wrapper .tss-layout7 .tss-social-share i.dashicons,
.tss-wrapper .tss-layout7 .tss-social-share i.fa {
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-layout7 .author-social .dashicons-skype:before,
.tss-wrapper .tss-layout7 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-layout7 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout7 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-layout7 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-layout7 .tss-social-share .dashicons-twitter:before {
	/* em, not px: the shortcode arm's Social size control emits an explicit
	   :before width/height but the Elementor arm has no equivalent emission,
	   so a px value would stop the X scaling on Elementor only. */
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-layout7 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout7 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Short rule between the author identity and the quote. */
.tss-wrapper .tss-layout7 .tss-divider {
	display: block;
	width: 44px;
	height: 2px;
	margin: 22px auto 18px;
	border-radius: 2px;
	background: var(--tss-primary-soft, #eef1fe);
}

.tss-wrapper .tss-layout7 .item-content-wrapper {
	position: relative;
	padding: 0;
	margin-top: 0;
}

.tss-wrapper .tss-layout7 .tss-quote-mark {
	display: block;
	margin: 0 auto 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 0.3;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout7 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.74;
	color: #41475a;
	margin: 0 auto;
	padding: 0;
	max-width: 40ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.tss-wrapper .tss-layout7 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout7 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout7 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


@media (max-width: 480px) {
	.tss-wrapper .tss-layout7 .single-item-wrapper {
		padding: 28px 22px 26px;
	}

	.tss-wrapper .tss-layout7 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
		max-width: 72px;
		border-width: 3px;
	}

	.tss-wrapper .tss-layout7 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}

	.tss-wrapper .tss-layout7 .tss-divider {
		margin: 18px auto 14px;
	}
}

/******************************************************/
/*********************** Carousel 8  *****************/
/******************************************************/
/* Carousel 8 is the carousel twin of layout 8 - same DOM, same anatomy - so it
   takes the same centred, quote-first card. Four deliberate differences:
     - the avatar carries NO border-radius. The "Image Type -> Circle" switch
       (.tss-img-circle) and the Elementor image Border Radius control both sit
       at the same specificity as a layout avatar rule, so any radius declared
       here would silently beat them. Layout 8 hard-codes 50% and thereby
       disables both controls for itself; carousel 8 keeps them live.
     - the star and social-icon boxes stay auto. Those controls emit only
       font-size, so a fixed px box crops a larger glyph and makes the stars
       overlap; the chip is padding-based so it grows with the icon.
     - the mask-image icons are sized in em and cover the share row too. The
       shortcode arm's Social size control emits an explicit :before width but
       the Elementor arm has no equivalent emission, so px would diverge the
       two arms, and the global ".dashicons-twitter:before" hard-codes #000.
     - the narrow step is a container query on the slide, not a viewport media
       query - slides-per-view is a setting, not a breakpoint.
   Built on the shared design tokens at the top of this file, so the Primary
   colour control drives the quote mark, the author name, the avatar ring, the
   social chips and the read-more link. */

.tss-wrapper .tss-carousel8 .single-item {
	padding: 0;
}

.tss-wrapper .tss-carousel8 .tss-grid-item {
	margin-bottom: 0;
	container-type: inline-size;
	container-name: tss-c8-slide;
	/* Swiper's own .swiper-slide{height:100%} resolves to the slide's content
	   height and opts it out of the flex line stretch, leaving slides unequal.
	   Releasing it lets every slide match the tallest. */
	height: auto;
	/* Room for the card shadow and the hover lift inside the clipped track.
	   The four longhands are set, not the shorthand, so the gutter style
	   control can still override any single side. */
	padding-top: 20px;
	padding-right: 28px;
	padding-bottom: 38px;
	padding-left: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's padding would be ADDED to height:100%. */
.tss-wrapper .tss-carousel8 .single-item-wrapper,
.tss-wrapper .tss-carousel8 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The card. .single-item-wrapper is the card element for carousel 8 - that is
   what the item background and content padding controls target here. Column
   flex so the author block can be pushed to the floor and every slide's name
   lines up. */
.tss-wrapper .tss-carousel8 .single-item-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	padding: 34px 32px 32px;
	text-align: center;
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 18px;
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* The legacy icon-font quote mark is replaced by the .tss-quote-mark span. It
   was white on the old #f8f8f8 card, so it has been invisible since it shipped. */
.tss-wrapper .tss-carousel8 .single-item-wrapper:before {
	content: none;
	display: none;
}

/* NOTE: deliberately no background change on hover. The item background control
   paints BOTH this card and the nested .item-content-wrapper (the generic
   "#id.tss-wrapper .item-content-wrapper" selector), and it wins on ID
   specificity - so lightening only the card on hover would leave the inner
   block showing the old colour as a visible rectangle. */
.tss-wrapper .tss-carousel8 .single-item-wrapper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

/* Three classes, so it also neutralises the generic
   ".tss-wrapper .item-content-wrapper { padding: 20px; margin-top: 15px }" in
   the max-width:767px tail at the end of this file. */
.tss-wrapper .tss-carousel8 .item-content-wrapper {
	position: relative;
	padding: 0;
	margin-top: 0;
}

.tss-wrapper .tss-carousel8 .tss-quote-mark {
	display: block;
	margin: 0 auto 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: 0.4;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-carousel8 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.74;
	color: #41475a;
	margin: 0 auto;
	padding: 0;
	max-width: 42ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.tss-wrapper .tss-carousel8 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel8 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author block. margin-top:auto pins it to the bottom of the equal-height card
   so every slide's avatar and name sit on the same line. */
.tss-wrapper .tss-carousel8 .tss-meta-info {
	display: block;
	margin-top: auto;
}

.tss-wrapper .tss-carousel8 .profile-img-wrapper {
	display: block;
	margin: 24px auto 16px;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel8 .profile-img-wrapper a {
	display: inline-block;
	line-height: 0;
}

.tss-wrapper .tss-carousel8 .profile-img-wrapper img {
	width: 92px;
	height: 92px;
	max-width: 92px;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* This layout puts the author name in the accent colour, not the ink colour. */
.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-primary, #3858e9);
	text-align: center;
	display: inline-block;
	clear: none;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary-hover, #2843c4);
}

.tss-wrapper .tss-carousel8 .single-item-wrapper h4.author-bio {
	margin: 5px 0 12px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
	clear: none;
}

/* Block-level with text-align, not flex: the Rating and Social "Alignment"
   style controls emit text-align on exactly these elements, and a flex
   container would ignore them. Centre matches Elementor's own default, so both
   arms agree out of the box. */
.tss-wrapper .tss-carousel8 .rating-wrapper {
	display: block;
	margin: 0 0 14px;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. width/height stay auto so the Rating "Font size"
   control actually resizes the star instead of being cropped by a fixed box. */
.tss-wrapper .tss-carousel8 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 18px;
	line-height: 1;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel8 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 0;
	text-align: center;
}

.tss-wrapper .tss-carousel8 .single-item-wrapper .tss-social-share {
	margin-top: 8px;
}

.tss-wrapper .tss-carousel8 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel8 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed 36px box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it.
   min-width/min-height hold the resting chip at 36px. */
.tss-wrapper .tss-carousel8 .author-social a,
.tss-wrapper .tss-carousel8 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 36px;
	min-height: 36px;
	padding: 9px;
	margin: 3px 5px;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	border: 1px solid #dde3fc;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel8 .author-social a:hover,
.tss-wrapper .tss-carousel8 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.28);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 28%, transparent);
}

.tss-wrapper .tss-carousel8 .author-social a span.dashicons,
.tss-wrapper .tss-carousel8 .author-social a i,
.tss-wrapper .tss-carousel8 .tss-social-share a span.dashicons,
.tss-wrapper .tss-carousel8 .tss-social-share a i {
	width: auto;
	height: auto;
	font-size: 16px;
	line-height: 1;
}

/* The mask-image icons (the X glyph especially) paint themselves with
   background-color, and the global ".dashicons-twitter:before" hard-codes #000
   - so without this they stay black on the tinted chip and never turn white on
   hover. Sized in em so both arms scale the same way; see the section note. */
.tss-wrapper .tss-carousel8 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel8 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel8 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel8 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-carousel8 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-carousel8 .tss-social-share .dashicons-twitter:before {
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel8 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel8 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/* Narrow slide. slides-per-view is a setting, so a 4-up desktop carousel is
   just as narrow as a phone - the card's own width has to decide. */
@container tss-c8-slide (max-width: 340px) {
	.tss-wrapper .tss-carousel8 .single-item-wrapper {
		padding: 26px 22px 26px;
	}

	.tss-wrapper .tss-carousel8 .tss-quote-mark {
		font-size: 40px;
		margin-bottom: 14px;
	}

	.tss-wrapper .tss-carousel8 .item-content-wrapper .item-content {
		font-size: 15px;
		-webkit-line-clamp: 4;
	}

	.tss-wrapper .tss-carousel8 .profile-img-wrapper {
		margin: 20px auto 14px;
	}

	.tss-wrapper .tss-carousel8 .profile-img-wrapper img {
		width: 74px;
		height: 74px;
		max-width: 74px;
		border-width: 3px;
	}

	.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}

	.tss-wrapper .tss-carousel8 .author-social a,
	.tss-wrapper .tss-carousel8 .tss-social-share a {
		min-width: 32px;
		min-height: 32px;
		padding: 8px;
		margin: 3px 4px;
	}
}

/* Viewport fallback for browsers without @container. Gated with @supports so it
   can never fire alongside the container query above - on a capable browser the
   card width decides, not the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.tss-wrapper .tss-carousel8 .single-item-wrapper {
			padding: 26px 22px 26px;
		}

		.tss-wrapper .tss-carousel8 .tss-quote-mark {
			font-size: 40px;
			margin-bottom: 14px;
		}

		.tss-wrapper .tss-carousel8 .item-content-wrapper .item-content {
			font-size: 15px;
			-webkit-line-clamp: 4;
		}

		.tss-wrapper .tss-carousel8 .profile-img-wrapper {
			margin: 20px auto 14px;
		}

		.tss-wrapper .tss-carousel8 .profile-img-wrapper img {
			width: 74px;
			height: 74px;
			max-width: 74px;
			border-width: 3px;
		}

		.tss-wrapper .tss-carousel8 .single-item-wrapper h3.author-name {
			font-size: 19px;
		}

		.tss-wrapper .tss-carousel8 .author-social a,
		.tss-wrapper .tss-carousel8 .tss-social-share a {
			min-width: 32px;
			min-height: 32px;
			padding: 8px;
			margin: 3px 4px;
		}
	}
}

/******************************************************/
/********************** Layout 8  ********************/
/******************************************************/
/* Redesigned centred card, quote first: quote mark and testimonial on top, then
   the avatar and the author identity beneath. Built on the shared design tokens
   at the top of this file, so the Primary colour control drives the quote mark,
   the author name, the avatar ring, the social chips and the read-more link. */

.tss-wrapper .tss-layout8 .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout8 .tss-grid-item {
	margin-bottom: 28px;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the card's padding would be ADDED to height:100%. */
.tss-wrapper .tss-layout8 .single-item-wrapper,
.tss-wrapper .tss-layout8 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The card. .single-item-wrapper is the card element for layout 8 — that is
   what the item background and content padding controls target here. */
.tss-wrapper .tss-layout8 .single-item-wrapper {
	position: relative;
	height: 100%;
	padding: 36px 36px 34px;
	text-align: center;
	background: var(--tss-slide, #f8f9fc);
	border: 1px solid var(--tss-line-soft, #ebecf1);
	border-radius: 18px;
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* The legacy icon-font quote mark is replaced by the .tss-quote-mark span. */
.tss-wrapper .tss-layout8 .single-item-wrapper:before {
	content: none;
	display: none;
}

/* NOTE: deliberately no background change on hover. The item background control
   paints BOTH this card and the nested .item-content-wrapper (the generic
   "#id.tss-wrapper .item-content-wrapper" selector), and it wins on ID
   specificity — so lightening only the card on hover would leave the inner
   block showing the old colour as a visible rectangle. */
.tss-wrapper .tss-layout8 .single-item-wrapper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px rgba(56, 88, 233, 0.1);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 20px 46px color-mix(in srgb, var(--tss-primary, #3858e9) 10%, transparent);
	border-color: #d8def8;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 22%, #fff);
}

.tss-wrapper .tss-layout8 .item-content-wrapper {
	position: relative;
	padding: 0;
	margin-top: 0;
}

.tss-wrapper .tss-layout8 .tss-quote-mark {
	display: block;
	margin: 0 auto 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: 0.4;
	font-weight: 700;
	color: #c5cffc;
	/* Follows the Primary colour control where color-mix is supported. */
	color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tss-wrapper .tss-layout8 .item-content-wrapper .item-content {
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.74;
	color: #41475a;
	margin: 0 auto;
	padding: 0;
	max-width: 42ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.tss-wrapper .tss-layout8 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout8 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-layout8 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}


/* Author block */
.tss-wrapper .tss-layout8 .tss-meta-info {
	display: block;
}

.tss-wrapper .tss-layout8 .profile-img-wrapper {
	display: block;
	margin: 26px auto 18px;
	line-height: 0;
	text-align: center;
}

.tss-wrapper .tss-layout8 .profile-img-wrapper a {
	display: inline-block;
	line-height: 0;
}

.tss-wrapper .tss-layout8 .profile-img-wrapper img {
	width: 96px;
	height: 96px;
	max-width: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: #eef0f4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px #dde3fc, 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 8px 20px rgba(27, 31, 42, 0.12);
}

/* This layout puts the author name in the accent colour, not the ink colour. */
.tss-wrapper .tss-layout8 .single-item-wrapper h3.author-name {
	margin: 0;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tss-primary, #3858e9);
	text-align: center;
	display: inline-block;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout8 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout8 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-layout8 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary-hover, #2843c4);
}

.tss-wrapper .tss-layout8 .single-item-wrapper h4.author-bio {
	margin: 5px 0 12px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
}

/* Block-level with text-align, not flex: the Rating and Social "Alignment"
   style controls emit text-align on exactly these elements, and a flex
   container would ignore them. Centre matches Elementor's own default, so both
   arms agree out of the box. */
.tss-wrapper .tss-layout8 .rating-wrapper {
	display: block;
	margin: 0 0 16px;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. */
.tss-wrapper .tss-layout8 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	/* width/height stay auto so the Rating "Font size" control actually resizes
	   the star: it only emits font-size, and a fixed box crops a larger glyph
	   and makes the stars overlap each other. */
	width: auto;
	height: auto;
	margin: 0 1.5px;
	color: var(--tss-star, #f5b800);
	font-size: 18px;
	line-height: 1;
}

.tss-wrapper .tss-layout8 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout8 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout8 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 0;
	text-align: center;
}

.tss-wrapper .tss-layout8 .single-item-wrapper .tss-social-share {
	margin-top: 8px;
}

.tss-wrapper .tss-layout8 .tss-social-share .share-icons,
.tss-wrapper .tss-layout8 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed 36px box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it.
   min-width/min-height hold the resting chip at 36px. */
.tss-wrapper .tss-layout8 .author-social a,
.tss-wrapper .tss-layout8 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 36px;
	min-height: 36px;
	padding: 9px;
	margin: 3px 5px;
	vertical-align: middle;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	border: 1px solid #dde3fc;
	border: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-layout8 .author-social a:hover,
.tss-wrapper .tss-layout8 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(56, 88, 233, 0.28);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 28%, transparent);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tss-primary, #3858e9) 28%, transparent);
}

.tss-wrapper .tss-layout8 .author-social span.dashicons,
.tss-wrapper .tss-layout8 .author-social i,
.tss-wrapper .tss-layout8 .tss-social-share span.dashicons,
.tss-wrapper .tss-layout8 .tss-social-share i.dashicons,
.tss-wrapper .tss-layout8 .tss-social-share i.fa {
	width: auto;
	height: auto;
	font-size: 16px;
	line-height: 1;
}

/* The mask-image icons paint themselves with background-color, which would
   stay blue against the filled chip on hover. */
.tss-wrapper .tss-layout8 .author-social .dashicons-skype:before,
.tss-wrapper .tss-layout8 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-layout8 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout8 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-layout8 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-layout8 .tss-social-share .dashicons-twitter:before {
	/* em, not px: the shortcode arm's Social size control emits an explicit
	   :before width/height but the Elementor arm has no equivalent emission,
	   so a px value would stop the X scaling on Elementor only. The share
	   row is covered too, or its X keeps the global #000. */
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-layout8 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-layout8 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout8 .single-item-wrapper {
		padding: 28px 22px 26px;
	}

	.tss-wrapper .tss-layout8 .profile-img-wrapper img {
		width: 78px;
		height: 78px;
		max-width: 78px;
		border-width: 3px;
	}

	.tss-wrapper .tss-layout8 .profile-img-wrapper {
		margin: 22px auto 14px;
	}

	.tss-wrapper .tss-layout8 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}

	.tss-wrapper .tss-layout8 .author-social a,
	.tss-wrapper .tss-layout8 .tss-social-share a {
		min-width: 32px;
		min-height: 32px;
		padding: 8px;
		margin: 3px 4px;
	}
}

/******************************************************/
/********* Layout 9 / Isotope 4 / Carousel 9  *********/
/******************************************************/
/* Redesigned portrait medallion. The whole card is a disc filled by the author's
   photo; hovering it — or focusing it, or tapping it on touch — fades in a tinted
   overlay carrying the rating, the quote and the author's identity. The three
   layout keys share this block deliberately: the grid, the isotope filter and the
   carousel all present the same medallion.

   Built on the shared design tokens at the top of this file, so the Primary
   colour control drives the photo ring, the quote badge and the overlay tint at
   once. Element roles, kept in step with the two style-control arms
   (TSSProHelper::layoutStyle() and pro's ElementorFilters / free's
   TSSElementorStyleSections):

   - overlay tint  is .profile-img-wrapper:before  <- Overlay colour + opacity
   - quote badge   is .profile-img-wrapper:after   <- Quote Icon colour
   - the photo     is .profile-img-wrapper img     <- Image border width/style/colour
   - overlay text  is .item-content-wrapper        <- Item background

   The medallion is a disc in BOTH image-shape modes: the circle is this layout's
   identity, so "Image Type -> Normal" does not square it off the way it does on
   the card layouts. */

.tss-wrapper .tss-layout9 .single-item,
.tss-wrapper .tss-isotope4 .single-item,
.tss-wrapper .tss-carousel9 .single-item {
	padding: 0;
}

/* Grid rows need their own separation. The carousel takes its spacing from the
   swiper gutter, so only the grid cell carries a bottom margin. */
.tss-wrapper .tss-layout9 .tss-grid-item,
.tss-wrapper .tss-isotope4 .tss-grid-item {
	margin-bottom: 28px;
}

/* The swiper track is overflow:hidden and the disc fills its slide edge to edge,
   so the hover scale(1.02) and the medallion's drop shadow were both sliced off
   the TOP - the circle rendered with a flat cut across it on hover. The slide's
   own margin-bottom is converted to padding: margin leaves room inside the track
   but the shadow needs the room to belong to the slide box.
   Vertical longhands only - the horizontal padding belongs to the rt-col gutter
   and the gutter style control, and adding any here would shrink the disc, whose
   size is derived from the slide width via aspect-ratio. */
.tss-wrapper .tss-carousel9 .tss-grid-item {
	margin-bottom: 0;
	padding-top: 26px;
	padding-bottom: 34px;
}

/* border-box is declared explicitly rather than inherited from the theme's global
   reset: wp-admin has no such reset, so in the admin Layout Preview the overlay's
   padding would be ADDED to inset 0 and push the text outside the disc. */
.tss-wrapper .tss-layout9 .single-item-wrapper,
.tss-wrapper .tss-layout9 .single-item-wrapper *,
.tss-wrapper .tss-isotope4 .single-item-wrapper,
.tss-wrapper .tss-isotope4 .single-item-wrapper *,
.tss-wrapper .tss-carousel9 .single-item-wrapper,
.tss-wrapper .tss-carousel9 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* The medallion. .single-item-wrapper is the card element for this layout.
   The gradient sits BEHIND the photo, so it only shows on a testimonial with no
   author image — there the overlay pseudo-element does not exist either, and this
   is what keeps the white overlay text readable. */
.tss-wrapper .tss-layout9 .single-item-wrapper,
.tss-wrapper .tss-isotope4 .single-item-wrapper,
.tss-wrapper .tss-carousel9 .single-item-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: 0;
	aspect-ratio: 1 / 1;
	text-align: center;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--tss-primary, #3858e9), var(--tss-primary-hover, #2843c4));
	outline: none;
}

/* Photo layer, filling the disc. No overflow clipping here — the badge below is
   positioned inside the disc but its shadow spills past the curve. */
.tss-wrapper .tss-layout9 .profile-img-wrapper,
.tss-wrapper .tss-isotope4 .profile-img-wrapper,
.tss-wrapper .tss-carousel9 .profile-img-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: 0;
}

.tss-wrapper .tss-layout9 .profile-img-wrapper a,
.tss-wrapper .tss-isotope4 .profile-img-wrapper a,
.tss-wrapper .tss-carousel9 .profile-img-wrapper a {
	display: block;
	width: 100%;
	height: 100%;
}

.tss-wrapper .tss-layout9 .profile-img-wrapper img,
.tss-wrapper .tss-isotope4 .profile-img-wrapper img,
.tss-wrapper .tss-carousel9 .profile-img-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 3px solid var(--tss-primary, #3858e9);
	border-radius: 50%;
	background: var(--tss-panel, #f7f8fb);
	/* The medallion carries NO drop shadow, at rest or on hover - the 3px primary
	   border is the only edge treatment. box-shadow is deliberately absent from
	   the transition list too, so nothing is left animating a property that is
	   never set. */
	-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.22, 0.28, 1), filter 0.35s ease;
	transition: transform 0.35s cubic-bezier(0.4, 0.22, 0.28, 1), filter 0.35s ease;
}

/* Overlay tint. The Overlay colour / opacity control replaces this background
   wholesale, which is why it is a shorthand and not a background-image. */
.tss-wrapper .tss-layout9 .profile-img-wrapper:before,
.tss-wrapper .tss-isotope4 .profile-img-wrapper:before,
.tss-wrapper .tss-carousel9 .profile-img-wrapper:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: auto;
	height: auto;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--tss-primary, #3858e9), var(--tss-primary-hover, #2843c4));
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: opacity 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), -webkit-transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: opacity 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	pointer-events: none;
}

/* Quote badge, top-right of the disc. Fades out as the overlay takes over. */
.tss-wrapper .tss-layout9 .profile-img-wrapper:after,
.tss-wrapper .tss-isotope4 .profile-img-wrapper:after,
.tss-wrapper .tss-carousel9 .profile-img-wrapper:after {
	content: "\F10D";
	position: absolute;
	top: 6%;
	right: 6%;
	left: auto;
	z-index: 4;
	width: 46px;
	height: 46px;
	font-family: "tss-font";
	font-size: 20px;
	line-height: 46px;
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border-radius: 50%;
	-webkit-box-shadow: 0 6px 16px rgba(56, 88, 233, 0.4);
	-webkit-box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 40%, transparent);
	box-shadow: 0 6px 16px rgba(56, 88, 233, 0.4);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 40%, transparent);
	-webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

/* Overlay text layer. The Item background control paints this element, so it
   carries the disc shape too — otherwise a custom item background would draw a
   square behind a round photo. pointer-events is off while hidden so the links
   inside cannot be clicked through an invisible overlay. */
.tss-wrapper .tss-layout9 .item-content-wrapper,
.tss-wrapper .tss-isotope4 .item-content-wrapper,
.tss-wrapper .tss-carousel9 .item-content-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0;
	padding: 17%;
	border-radius: 50%;
	text-align: center;
	/* Last-resort clip. The disc can be narrow at any viewport — column count is a
	   user setting — and the font-size controls take px, so content can always be
	   pushed past what the circle holds. Clipping keeps it inside the medallion
	   instead of spilling across the photo. */
	overflow: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: opacity 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), -webkit-transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: opacity 0.32s cubic-bezier(0.4, 0.22, 0.28, 1), transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	pointer-events: none;
}

/* ---- Revealed state: hover, keyboard focus, or the tap-to-reveal class ---- */

.tss-wrapper .tss-layout9 .single-item-wrapper:hover .profile-img-wrapper img,
.tss-wrapper .tss-layout9 .single-item-wrapper:focus-within .profile-img-wrapper img,
.tss-wrapper .tss-layout9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper img,
.tss-wrapper .tss-isotope4 .single-item-wrapper:hover .profile-img-wrapper img,
.tss-wrapper .tss-isotope4 .single-item-wrapper:focus-within .profile-img-wrapper img,
.tss-wrapper .tss-isotope4 .single-item-wrapper.tss-is-revealed .profile-img-wrapper img,
.tss-wrapper .tss-carousel9 .single-item-wrapper:hover .profile-img-wrapper img,
.tss-wrapper .tss-carousel9 .single-item-wrapper:focus-within .profile-img-wrapper img,
.tss-wrapper .tss-carousel9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper img {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	-webkit-filter: saturate(0.6) brightness(0.9);
	filter: saturate(0.6) brightness(0.9);
}

.tss-wrapper .tss-layout9 .single-item-wrapper:hover .profile-img-wrapper:before,
.tss-wrapper .tss-layout9 .single-item-wrapper:focus-within .profile-img-wrapper:before,
.tss-wrapper .tss-layout9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:before,
.tss-wrapper .tss-isotope4 .single-item-wrapper:hover .profile-img-wrapper:before,
.tss-wrapper .tss-isotope4 .single-item-wrapper:focus-within .profile-img-wrapper:before,
.tss-wrapper .tss-isotope4 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:before,
.tss-wrapper .tss-carousel9 .single-item-wrapper:hover .profile-img-wrapper:before,
.tss-wrapper .tss-carousel9 .single-item-wrapper:focus-within .profile-img-wrapper:before,
.tss-wrapper .tss-carousel9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.tss-wrapper .tss-layout9 .single-item-wrapper:hover .profile-img-wrapper:after,
.tss-wrapper .tss-layout9 .single-item-wrapper:focus-within .profile-img-wrapper:after,
.tss-wrapper .tss-layout9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:after,
.tss-wrapper .tss-isotope4 .single-item-wrapper:hover .profile-img-wrapper:after,
.tss-wrapper .tss-isotope4 .single-item-wrapper:focus-within .profile-img-wrapper:after,
.tss-wrapper .tss-isotope4 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:after,
.tss-wrapper .tss-carousel9 .single-item-wrapper:hover .profile-img-wrapper:after,
.tss-wrapper .tss-carousel9 .single-item-wrapper:focus-within .profile-img-wrapper:after,
.tss-wrapper .tss-carousel9 .single-item-wrapper.tss-is-revealed .profile-img-wrapper:after {
	opacity: 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.tss-wrapper .tss-layout9 .single-item-wrapper:hover .item-content-wrapper,
.tss-wrapper .tss-layout9 .single-item-wrapper:focus-within .item-content-wrapper,
.tss-wrapper .tss-layout9 .single-item-wrapper.tss-is-revealed .item-content-wrapper,
.tss-wrapper .tss-isotope4 .single-item-wrapper:hover .item-content-wrapper,
.tss-wrapper .tss-isotope4 .single-item-wrapper:focus-within .item-content-wrapper,
.tss-wrapper .tss-isotope4 .single-item-wrapper.tss-is-revealed .item-content-wrapper,
.tss-wrapper .tss-carousel9 .single-item-wrapper:hover .item-content-wrapper,
.tss-wrapper .tss-carousel9 .single-item-wrapper:focus-within .item-content-wrapper,
.tss-wrapper .tss-carousel9 .single-item-wrapper.tss-is-revealed .item-content-wrapper {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	pointer-events: auto;
}

/* ---- Overlay contents, in reading order: stars, quote, identity ---- */

.tss-wrapper .tss-layout9 .rating-wrapper,
.tss-wrapper .tss-isotope4 .rating-wrapper,
.tss-wrapper .tss-carousel9 .rating-wrapper {
	margin: 0 0 10px;
	line-height: 1;
}

/* The star glyphs are dashicons, whose 20px font-size and matching box come from
   the icon font's own rules — reset the box so the Rating size control drives it.
   Keep .single-item-wrapper in the chain: the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   near the end of this file is (0,4,1) and outranks a shorter selector. */
.tss-wrapper .tss-layout9 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-isotope4 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-carousel9 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1px;
	font-size: 15px;
	line-height: 1;
	color: var(--tss-star, #f5b800);
}

/* Unearned stars stay legible against the tinted overlay rather than going grey. */
.tss-wrapper .tss-layout9 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-isotope4 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-carousel9 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: rgba(255, 255, 255, 0.45);
}

.tss-wrapper .tss-layout9 .item-content,
.tss-wrapper .tss-isotope4 .item-content,
.tss-wrapper .tss-carousel9 .item-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	margin: 0 0 12px;
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95);
}

.tss-wrapper .tss-layout9 .item-content p:last-child,
.tss-wrapper .tss-isotope4 .item-content p:last-child,
.tss-wrapper .tss-carousel9 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout9 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-isotope4 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-carousel9 .single-item-wrapper h3.author-name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: center;
	color: #ffffff;
}

.tss-wrapper .tss-layout9 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-isotope4 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-carousel9 .single-item-wrapper h3.author-name a {
	color: inherit;
}

.tss-wrapper .tss-layout9 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-isotope4 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-carousel9 .single-item-wrapper h4.author-bio {
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: rgba(255, 255, 255, 0.82);
}

/* Social icons and share links share one chip treatment inside the overlay. */
.tss-wrapper .tss-layout9 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share {
	margin: 10px 0 0;
	line-height: 1;
}

.tss-wrapper .tss-layout9 .single-item-wrapper .author-social a,
.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social a,
.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social a,
.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	margin: 0 3px;
	font-size: 15px;
	line-height: 28px;
	text-align: center;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
	border: 0;
	border-radius: 50%;
	-webkit-transition: background 0.2s ease, color 0.2s ease;
	transition: background 0.2s ease, color 0.2s ease;
}

.tss-wrapper .tss-layout9 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share a:hover {
	color: var(--tss-primary, #3858e9);
	background: #ffffff;
}

.tss-wrapper .tss-layout9 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share a .dashicons {
	/* A 1em box centred by the flex chip, not a glyph riding the chip's
	   line-height: the X/Skype/Telegram masks are block-level :before boxes
	   and sat above centre on a line-height-sized box. */
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

/* ---- Responsive ----
   The disc scales with its column, so these breakpoints only retune the type and
   the padding. Note that column count is a user setting: a 4-up desktop grid
   produces discs as small as a 2-up tablet grid, so keep the text tolerant of a
   narrow disc at every width rather than relying on the viewport alone. */

@media (max-width: 991px) {
	.tss-wrapper .tss-layout9 .item-content-wrapper,
	.tss-wrapper .tss-isotope4 .item-content-wrapper,
	.tss-wrapper .tss-carousel9 .item-content-wrapper {
		padding: 15%;
	}

	.tss-wrapper .tss-layout9 .item-content,
	.tss-wrapper .tss-isotope4 .item-content,
	.tss-wrapper .tss-carousel9 .item-content {
		-webkit-line-clamp: 4;
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.tss-wrapper .tss-layout9 .tss-grid-item,
	.tss-wrapper .tss-isotope4 .tss-grid-item {
		margin-bottom: 22px;
	}

	.tss-wrapper .tss-layout9 .profile-img-wrapper:after,
	.tss-wrapper .tss-isotope4 .profile-img-wrapper:after,
	.tss-wrapper .tss-carousel9 .profile-img-wrapper:after {
		width: 38px;
		height: 38px;
		font-size: 17px;
		line-height: 38px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope4 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel9 .single-item-wrapper h3.author-name {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout9 .item-content-wrapper,
	.tss-wrapper .tss-isotope4 .item-content-wrapper,
	.tss-wrapper .tss-carousel9 .item-content-wrapper {
		padding: 13%;
	}

	.tss-wrapper .tss-layout9 .item-content,
	.tss-wrapper .tss-isotope4 .item-content,
	.tss-wrapper .tss-carousel9 .item-content {
		-webkit-line-clamp: 3;
		margin-bottom: 8px;
		font-size: 12px;
	}

	.tss-wrapper .tss-layout9 .rating-wrapper,
	.tss-wrapper .tss-isotope4 .rating-wrapper,
	.tss-wrapper .tss-carousel9 .rating-wrapper {
		margin-bottom: 6px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .rating-wrapper span.dashicons {
		font-size: 13px;
	}

	.tss-wrapper .tss-layout9 .profile-img-wrapper:after,
	.tss-wrapper .tss-isotope4 .profile-img-wrapper:after,
	.tss-wrapper .tss-carousel9 .profile-img-wrapper:after {
		width: 32px;
		height: 32px;
		font-size: 15px;
		line-height: 32px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope4 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel9 .single-item-wrapper h3.author-name {
		font-size: 15px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-isotope4 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-carousel9 .single-item-wrapper h4.author-bio {
		font-size: 11.5px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share a {
		width: 24px;
		height: 24px;
		margin: 0 2px;
		font-size: 13px;
		line-height: 24px;
	}
}

/* A one-column grid on a 320px screen leaves a disc around 230px across, and a
   circle loses height fast as it narrows. Trim the padding, drop the quote to two
   lines and shrink the chips so rating, quote, name, role, social AND share still
   fit inside the medallion rather than being clipped by the overflow rule above. */
@media (max-width: 400px) {
	.tss-wrapper .tss-layout9 .item-content-wrapper,
	.tss-wrapper .tss-isotope4 .item-content-wrapper,
	.tss-wrapper .tss-carousel9 .item-content-wrapper {
		padding: 11%;
	}

	.tss-wrapper .tss-layout9 .item-content,
	.tss-wrapper .tss-isotope4 .item-content,
	.tss-wrapper .tss-carousel9 .item-content {
		-webkit-line-clamp: 2;
		margin-bottom: 6px;
	}

	.tss-wrapper .tss-layout9 .rating-wrapper,
	.tss-wrapper .tss-isotope4 .rating-wrapper,
	.tss-wrapper .tss-carousel9 .rating-wrapper {
		margin-bottom: 4px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper .author-social,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social,
	.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share {
		margin-top: 6px;
	}

	.tss-wrapper .tss-layout9 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-layout9 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-isotope4 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-carousel9 .single-item-wrapper .tss-social-share a {
		width: 22px;
		height: 22px;
		font-size: 12px;
		line-height: 22px;
	}
}

/******************************************************/
/******** Layout 10 / Isotope 5 / Carousel 10  ********/
/******************************************************/
/* Redesigned author-head + speech-bubble card. The author's name, role and rating
   sit at the top with the avatar pulled out to the right, and the quote follows in
   a bubble whose tab points back up at the head. The three layout keys share this
   block deliberately: the grid, the isotope filter and the carousel all present
   the same card.

   Element roles, kept in step with the two style-control arms
   (TSSProHelper::layoutStyle() and pro's ElementorFilters / free's
   TSSElementorStyleSections):

   - the bubble       is .item-content              <- Item background
   - the bubble tab   is .item-content:after        <- Item background (as background,
                                                       not a border triangle)
   - the wrapper      is .item-content-wrapper      <- forced transparent by both arms
   - the avatar       is .profile-img-wrapper img   <- Image border width/style/colour

   The quote text lives in an inner .tss-quote so the clamp and the read-more button
   can coexist inside the bubble; .tss-quote inherits colour, size, alignment and
   style from .item-content, so the Testimonial controls still reach it. */

.tss-wrapper .tss-layout10,
.tss-wrapper .tss-isotope5,
.tss-wrapper .tss-carousel10 {
	padding: 0;
}

.tss-wrapper .tss-layout10 .single-item,
.tss-wrapper .tss-isotope5 .single-item,
.tss-wrapper .tss-carousel10 .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout10 .tss-grid-item,
.tss-wrapper .tss-isotope5 .tss-grid-item {
	margin-bottom: 34px;
}

/* border-box is declared explicitly rather than inherited from the theme's global
   reset: wp-admin has no such reset, so in the admin Layout Preview the bubble's
   padding would be ADDED to its width and push the card out of its column. */
.tss-wrapper .tss-layout10 .single-item-wrapper,
.tss-wrapper .tss-layout10 .single-item-wrapper *,
.tss-wrapper .tss-isotope5 .single-item-wrapper,
.tss-wrapper .tss-isotope5 .single-item-wrapper *,
.tss-wrapper .tss-carousel10 .single-item-wrapper,
.tss-wrapper .tss-carousel10 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* flow-root contains the floated avatar, so the card always wraps it even when a
   testimonial is missing and there is no bubble below to clear it. */
.tss-wrapper .tss-layout10 .single-item-wrapper,
.tss-wrapper .tss-isotope5 .single-item-wrapper,
.tss-wrapper .tss-carousel10 .single-item-wrapper {
	position: relative;
	display: flow-root;
	background: none;
	border: 0;
	padding: 0;
}

/* The wrapper is a bare grouping element here — the padded surface is the bubble
   inside it. The generic ".tss-wrapper .item-content-wrapper { padding: 20px;
   margin-top: 15px }" in the max-width:767px block near the end of this file
   applies to every layout, and on this one it pushed the head 35px below the
   floated avatar on every screen under 768px. Higher specificity, so it holds at
   any width without needing its own media query. */
.tss-wrapper .tss-layout10 .item-content-wrapper,
.tss-wrapper .tss-isotope5 .item-content-wrapper,
.tss-wrapper .tss-carousel10 .item-content-wrapper {
	margin: 0;
	padding: 0;
}

/* The avatar floats rather than being absolutely positioned: the head's height
   varies with which of name / role / rating the shortcode enables, and a float
   plus "clear" on the bubble reserves exactly the right amount of room at any
   combination without a magic min-height. */
.tss-wrapper .tss-layout10 .tss-meta-info,
.tss-wrapper .tss-isotope5 .tss-meta-info,
.tss-wrapper .tss-carousel10 .tss-meta-info {
	float: var(--tss-a10-float, right);
	display: var(--tss-a10-md, block);
	margin: var(--tss-a10-m, 0 4px 10px 18px);
}

.tss-wrapper .tss-layout10 .profile-img-wrapper,
.tss-wrapper .tss-isotope5 .profile-img-wrapper,
.tss-wrapper .tss-carousel10 .profile-img-wrapper {
	position: static;
	display: block;
	width: 84px;
	height: 84px;
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-layout10 .profile-img-wrapper img,
.tss-wrapper .tss-isotope5 .profile-img-wrapper img,
.tss-wrapper .tss-carousel10 .profile-img-wrapper img {
	display: block;
	width: 84px;
	height: 84px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	background: #eef0f4;
	border: 4px solid #ffffff;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 1.5px #dde3fc, 0 10px 22px rgba(27, 31, 42, 0.16);
	-webkit-box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 10px 22px rgba(27, 31, 42, 0.16);
	box-shadow: 0 0 0 1.5px #dde3fc, 0 10px 22px rgba(27, 31, 42, 0.16);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 10px 22px rgba(27, 31, 42, 0.16);
}

/* ---- Author head ---- */

/* clear:none is load-bearing, not tidying. Themes routinely ship
   "h1, h2, h3, h4, h5, h6 { clear: both }" (Astra does), which drops the whole
   head below the floated avatar. WordPress's ".entry-content :where(h1…)" resets
   it on a normal page, but an Elementor canvas template has no .entry-content, so
   without this the Elementor arm rendered the head 94px lower than the shortcode
   arm — and any theme with that rule would break the layout the same way. */
.tss-wrapper .tss-layout10 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-isotope5 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-carousel10 .single-item-wrapper h3.author-name {
	clear: none;
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: var(--tss-a10-ta, left);
	color: var(--tss-ink, #1b1f2a);
}

.tss-wrapper .tss-layout10 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-isotope5 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-carousel10 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout10 .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-isotope5 .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-carousel10 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout10 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-isotope5 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-carousel10 .single-item-wrapper h4.author-bio {
	clear: none;
	display: block;
	margin: 3px 0 8px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
	text-align: var(--tss-a10-ta, left);
	color: var(--tss-muted, #6a6f7e);
}

/* width:fit-content sizes the row to the stars themselves. The Elementor rating
   alignment control ships 'default' => 'center', which would otherwise centre the
   stars on the Elementor arm only and silently diverge it from the shortcode arm —
   with no slack inside the box, both arms render identically. */
.tss-wrapper .tss-layout10 .rating-wrapper,
.tss-wrapper .tss-isotope5 .rating-wrapper,
.tss-wrapper .tss-carousel10 .rating-wrapper {
	display: var(--tss-a10-rd, block);
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 var(--tss-a10-mr, 0) 4px var(--tss-a10-rml, 0);
	line-height: 1;
}

/* Centres with the head when Image Style → Alignment is Center. */
.tss-wrapper .tss-layout10 .item-content-wrapper > .author-social,
.tss-wrapper .tss-isotope5 .item-content-wrapper > .author-social,
.tss-wrapper .tss-carousel10 .item-content-wrapper > .author-social {
	text-align: var(--tss-a10-ta, left);
}

/* Keep .single-item-wrapper in the chain: the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   near the end of this file is (0,4,1) and outranks a shorter selector. */
.tss-wrapper .tss-layout10 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-isotope5 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-carousel10 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1.5px 0 0;
	font-size: 17px;
	line-height: 1;
	color: var(--tss-star, #f5b800);
}

.tss-wrapper .tss-layout10 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-isotope5 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-carousel10 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

/* ---- Quote bubble ---- */

/* clear drops the bubble below the floated avatar, so it always spans the full
   card width no matter how tall the head turned out. */
.tss-wrapper .tss-layout10 .item-content,
.tss-wrapper .tss-isotope5 .item-content,
.tss-wrapper .tss-carousel10 .item-content {
	position: relative;
	clear: both;
	margin: 18px 0 0;
	padding: 28px 30px 26px;
	background: #f5f7ff;
	border: 1px solid #e4e8fb;
	border: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 12%, #fff);
	border-radius: var(--tss-radius, 16px);
	font-size: 15.5px;
	line-height: 1.72;
	text-align: left;
	color: #3c4150;
	-webkit-box-shadow: 0 1px 2px rgba(27, 31, 42, 0.03), 0 10px 26px rgba(56, 88, 233, 0.07);
	-webkit-box-shadow: 0 1px 2px rgba(27, 31, 42, 0.03), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 7%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.03), 0 10px 26px rgba(56, 88, 233, 0.07);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.03), 0 10px 26px color-mix(in srgb, var(--tss-primary, #3858e9) 7%, transparent);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* No overflow clipping on the bubble — the tab below sits outside its box. The
   clamp lives on .tss-quote, which does its own clipping. */
.tss-wrapper .tss-layout10 .single-item-wrapper:hover .item-content,
.tss-wrapper .tss-isotope5 .single-item-wrapper:hover .item-content,
.tss-wrapper .tss-carousel10 .single-item-wrapper:hover .item-content {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
	border-color: #cdd6ff;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
	-webkit-box-shadow: 0 1px 2px rgba(27, 31, 42, 0.04), 0 18px 40px rgba(56, 88, 233, 0.12);
	-webkit-box-shadow: 0 1px 2px rgba(27, 31, 42, 0.04), 0 18px 40px color-mix(in srgb, var(--tss-primary, #3858e9) 12%, transparent);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.04), 0 18px 40px rgba(56, 88, 233, 0.12);
	box-shadow: 0 1px 2px rgba(27, 31, 42, 0.04), 0 18px 40px color-mix(in srgb, var(--tss-primary, #3858e9) 12%, transparent);
}

/* The tab: a rotated square poking up out of the bubble's top-left, carrying the
   two edges that read as its outline. Painted after the bubble's own border, so it
   covers the segment of border it straddles. */
.tss-wrapper .tss-layout10 .item-content:after,
.tss-wrapper .tss-isotope5 .item-content:after,
.tss-wrapper .tss-carousel10 .item-content:after {
	content: "";
	position: absolute;
	top: -9px;
	left: var(--tss-a10-tail-l, 34px);
	right: auto;
	bottom: auto;
	width: 16px;
	height: 16px;
	background: #f5f7ff;
	border: 0;
	border-left: 1px solid #e4e8fb;
	border-left: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 12%, #fff);
	border-top: 1px solid #e4e8fb;
	border-top: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 12%, #fff);
	border-top-left-radius: 3px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.22s ease;
	transition: border-color 0.22s ease;
}

.tss-wrapper .tss-layout10 .single-item-wrapper:hover .item-content:after,
.tss-wrapper .tss-isotope5 .single-item-wrapper:hover .item-content:after,
.tss-wrapper .tss-carousel10 .single-item-wrapper:hover .item-content:after {
	border-color: #cdd6ff;
	border-color: color-mix(in srgb, var(--tss-primary, #3858e9) 28%, #fff);
}

.tss-wrapper .tss-layout10 .tss-quote,
.tss-wrapper .tss-isotope5 .tss-quote,
.tss-wrapper .tss-carousel10 .tss-quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 9;
	overflow: hidden;
}

.tss-wrapper .tss-layout10 .tss-quote p:last-child,
.tss-wrapper .tss-isotope5 .tss-quote p:last-child,
.tss-wrapper .tss-carousel10 .tss-quote p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-layout10 .single-item-wrapper.tss-expanded .tss-quote,
.tss-wrapper .tss-layout10 .single-item-wrapper.tss-no-clamp .tss-quote,
.tss-wrapper .tss-isotope5 .single-item-wrapper.tss-expanded .tss-quote,
.tss-wrapper .tss-isotope5 .single-item-wrapper.tss-no-clamp .tss-quote,
.tss-wrapper .tss-carousel10 .single-item-wrapper.tss-expanded .tss-quote,
.tss-wrapper .tss-carousel10 .single-item-wrapper.tss-no-clamp .tss-quote {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}


/* ---- Social and share, below the bubble ---- */

/* width:fit-content for the same reason as the rating row above — the Elementor
   social alignment control also ships 'default' => 'center'. */
.tss-wrapper .tss-layout10 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope5 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel10 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout10 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-isotope5 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-carousel10 .single-item-wrapper .tss-social-share {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 14px 0 0;
	text-align: left;
	line-height: 1;
}

.tss-wrapper .tss-layout10 .single-item-wrapper .author-social a,
.tss-wrapper .tss-isotope5 .single-item-wrapper .author-social a,
.tss-wrapper .tss-carousel10 .single-item-wrapper .author-social a,
.tss-wrapper .tss-layout10 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-isotope5 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-carousel10 .single-item-wrapper .tss-social-share a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	margin: 0 6px 0 0;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
	color: var(--tss-muted, #6a6f7e);
	background: #f5f7ff;
	border: 1px solid #e4e8fb;
	border: 1px solid color-mix(in srgb, var(--tss-primary, #3858e9) 12%, #fff);
	border-radius: 50%;
	-webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tss-wrapper .tss-layout10 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-isotope5 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-carousel10 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-layout10 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-isotope5 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-carousel10 .single-item-wrapper .tss-social-share a:hover {
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout10 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-isotope5 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-carousel10 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-layout10 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-isotope5 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-carousel10 .single-item-wrapper .tss-social-share a .dashicons {
	/* A 1em box centred by the flex chip, not a glyph riding the chip's
	   line-height: the X/Skype/Telegram masks are block-level :before boxes
	   and sat above centre on a line-height-sized box. */
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.tss-wrapper .tss-layout10 .tss-grid-item,
	.tss-wrapper .tss-isotope5 .tss-grid-item {
		margin-bottom: 26px;
	}

	.tss-wrapper .tss-layout10 .item-content,
	.tss-wrapper .tss-isotope5 .item-content,
	.tss-wrapper .tss-carousel10 .item-content {
		padding: 24px 24px 22px;
		font-size: 15px;
	}

	.tss-wrapper .tss-layout10 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope5 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel10 .single-item-wrapper h3.author-name {
		font-size: 19px;
	}
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout10 .tss-meta-info,
	.tss-wrapper .tss-isotope5 .tss-meta-info,
	.tss-wrapper .tss-carousel10 .tss-meta-info {
		margin-left: var(--tss-a10-ml, 14px);
	}

	.tss-wrapper .tss-layout10 .profile-img-wrapper,
	.tss-wrapper .tss-isotope5 .profile-img-wrapper,
	.tss-wrapper .tss-carousel10 .profile-img-wrapper,
	.tss-wrapper .tss-layout10 .profile-img-wrapper img,
	.tss-wrapper .tss-isotope5 .profile-img-wrapper img,
	.tss-wrapper .tss-carousel10 .profile-img-wrapper img {
		width: 64px;
		height: 64px;
	}

	.tss-wrapper .tss-layout10 .profile-img-wrapper img,
	.tss-wrapper .tss-isotope5 .profile-img-wrapper img,
	.tss-wrapper .tss-carousel10 .profile-img-wrapper img {
		border-width: 3px;
	}

	.tss-wrapper .tss-layout10 .item-content,
	.tss-wrapper .tss-isotope5 .item-content,
	.tss-wrapper .tss-carousel10 .item-content {
		margin-top: 16px;
		padding: 20px 20px 18px;
		font-size: 14.5px;
		line-height: 1.66;
	}

	.tss-wrapper .tss-layout10 .item-content:after,
	.tss-wrapper .tss-isotope5 .item-content:after,
	.tss-wrapper .tss-carousel10 .item-content:after {
		left: var(--tss-a10-tail-l, 24px);
	}

	.tss-wrapper .tss-layout10 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope5 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel10 .single-item-wrapper h3.author-name {
		font-size: 18px;
	}

	.tss-wrapper .tss-layout10 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-isotope5 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-carousel10 .single-item-wrapper h4.author-bio {
		font-size: 13.5px;
	}

	.tss-wrapper .tss-layout10 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-isotope5 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-carousel10 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-layout10 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-isotope5 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-carousel10 .single-item-wrapper .tss-social-share a {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		font-size: 14px;
		line-height: 28px;
	}
}

/******************************************************/
/********************** Carousel 11 ********************/
/******************************************************/
/* Redesigned "focus carousel": the thumb strip becomes a row of faces with the
   active one enlarged and ringed, the neighbours shrunk, desaturated and faded;
   the quote, author and rating sit centred beneath it; and the prev / dots /
   next controls collapse into a single centred row at the bottom.
   Structural notes:
     - carousel 11 renders the thumb strip BEFORE the main slider
       (TSSProSC::renderThumbSlider), and each thumb slide is itself the
       the .profile-img-wrapper element - its photo lives one level deeper,
       inside .profile-img-wrapper-inner.
       The main slides carry no avatar at all, so every avatar rule here is
       scoped to .tss-carousel-thumb.
     - the arrows and the pagination are children of .tss-carousel-main, not of
       the carousel wrapper, so the control row is laid out with grid on the swiper
       container. The swiper wrapper spans every column and keeps its full
       width, which leaves swiper's own measurements untouched - verified as
       identical slide widths before and after.
     - carousel 11 is excluded from the shared arrow treatment near the top of
       this file via :not([data-layout="carousel11"]), so the arrow, pagination
       and reserved-space rules there do not apply and this section owns them.
   Built on the shared design tokens, so the Primary colour control drives the
   active face's ring, the quote badge, the active dot and the author name. */

.tss-wrapper .tss-carousel11 .single-item {
	padding: 0;
}

.tss-wrapper .tss-carousel11 .tss-grid-item {
	margin-bottom: 0;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the ring and border widths would be ADDED to the face sizes below. */
.tss-wrapper .tss-carousel11 .single-item-wrapper,
.tss-wrapper .tss-carousel11 .single-item-wrapper *,
.tss-wrapper .tss-carousel11 .tss-carousel-thumb,
.tss-wrapper .tss-carousel11 .tss-carousel-thumb * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper {
	background: transparent;
	text-align: center;
}

/*** The face strip ***/

/* Horizontal padding, NOT a max-width, is what keeps the outer faces whole.
   The strip runs with centeredSlides, so the neighbour beside the active one
   sits exactly one slide-width from the centre - and with an even
   slides-per-view that lands it straddling the container edge, where swiper's
   overflow:hidden slices it in half. overflow clips at the PADDING box while
   swiper lays the slides out across the CONTENT box, so padding widens the
   visible window without widening the slide row, and the neighbour renders
   whole. A max-width cannot do this job at every setting: narrow enough to
   group two faces tightly, it packs five into overlapping slots. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb {
	max-width: 554px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 70px;
	padding-right: 70px;
}

/* Vertical room for the enlarged active face and its ring; the strip is a
   swiper with overflow:hidden, so without it the active face is clipped. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-wrapper {
	/* Pinned so the row cannot change height no matter what a face does:
	   128px for the focused face plus the padding below. */
	min-height: 176px;
	padding: 22px 0 26px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/* Each thumb slide IS the .profile-img-wrapper. The legacy dark disc that used
   to mask the inactive faces is replaced by opacity + grayscale. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	text-align: center;
	cursor: pointer;
	background: none;
	border-radius: 50%;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper:before {
	content: none;
	display: none;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper:focus {
	outline: none;
}

/* Only the focused face and its two neighbours are shown. Swiper labels those
   three itself, so this holds at every slides-per-view and every width - which
   is what makes the strip immune to edge slicing. With centeredSlides the faces
   beyond prev/next are exactly the ones that straddle the clip edge, and where
   they land depends on BOTH the column count and the container width, so no
   fixed padding can keep all of them whole: a value wide enough for an even
   column count exposes a sliced extra pair for an odd one. Three faces is also
   the arrangement this design is drawn from. Hidden with opacity/visibility
   rather than display:none, so swiper keeps measuring every slide. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper-inner {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	line-height: 0;
	opacity: 0.5;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	/* width/height are deliberately NOT transitioned. Swiper swaps the active
	   class instantly, so animating the size made the incoming face grow 84->128
	   while the outgoing one shrank 128->84 - and mid-crossover both were small,
	   collapsing the flex row by 21px and jolting everything below it. The
	   reference animates opacity, filter and transform only, and snaps the size. */
	-webkit-transition: opacity 0.2s ease, -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper-inner a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

/* No transform here - the size change is animated on width/height so the ring
   and the badge stay crisp instead of being scaled up with the bitmap. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 50%;
	background: var(--tss-line-soft, #ebecf1);
	border: 1px solid var(--tss-line, #e7e8ee);
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper:hover .profile-img-wrapper-inner {
	opacity: 0.85;
	-webkit-filter: grayscale(0.3);
	filter: grayscale(0.3);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

/* The focused face. Swiper marks it .swiper-slide-active because the thumb
   strip runs with centeredSlides, so the active one is always the middle. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner {
	width: 128px;
	height: 128px;
	opacity: 1;
	-webkit-filter: none;
	filter: none;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active:hover .profile-img-wrapper-inner {
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active img {
	border: 2px solid #fff;
	-webkit-box-shadow: 0 0 0 3px #3858e9, 0 2px 6px rgba(26, 26, 26, 0.1);
	-webkit-box-shadow: 0 0 0 3px var(--tss-primary, #3858e9), 0 2px 6px rgba(26, 26, 26, 0.1);
	box-shadow: 0 0 0 3px #3858e9, 0 2px 6px rgba(26, 26, 26, 0.1);
	box-shadow: 0 0 0 3px var(--tss-primary, #3858e9), 0 2px 6px rgba(26, 26, 26, 0.1);
}

/* Quote badge on the focused face. Drawn as a CSS background, not markup:
   printHtml() runs wp_kses_post(), which strips <svg> from a template. */
.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid #fff;
	background-color: var(--tss-primary, #3858e9);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.5 7C7 7 5 9 5 11.5V17h5.5v-5.5H8c0-1.4 1.1-2.5 2.5-2.5V7zm9 0C16 7 14 9 14 11.5V17h5.5v-5.5H17c0-1.4 1.1-2.5 2.5-2.5V7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
}

/*** The quote and author block ***/

/* Three classes, so it also neutralises the generic
   ".tss-wrapper .item-content-wrapper { padding: 20px; margin-top: 15px }" in
   the max-width:767px tail at the end of this file. */
.tss-wrapper .tss-carousel11 .item-content-wrapper {
	padding: 0;
	margin-top: 0;
}

/* Clamped AND min-heighted to the same six lines, so every slide is the same
   height. This carousel animates its height between slides (swiper autoHeight),
   and with unclamped quotes the block jumped by ~190px on the way past a short
   testimonial - the shake. The clamp caps the tall ones and the min-height
   floors the short ones; both are expressed in em so the Testimonial "Font
   size" style control carries them with it. */
.tss-wrapper .tss-carousel11 .item-content-wrapper .item-content {
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	color: var(--tss-ink, #1f2330);
	max-width: 62ch;
	margin: 0 auto;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	min-height: 9em;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel11 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* Read-more toggle. Hidden with visibility rather than display, so its row is
   reserved on every slide: with display:none the slides that do not need a
   toggle were 32px shorter than the ones that do, and this carousel animates
   its height between slides, so that difference read as a jump. visibility
   also keeps the hidden button out of the tab order. */

/* Typographic quotes wrap the copy itself, matching the reference. They sit on
   the first and last paragraph so they hug the text rather than the block. */
.tss-wrapper .tss-carousel11 .item-content p {
	width: auto;
	margin: 0 auto 12px;
}

.tss-wrapper .tss-carousel11 .item-content p:first-of-type:before {
	content: "\201C";
}

.tss-wrapper .tss-carousel11 .item-content p:last-of-type:after {
	content: "\201D";
}

/* A trimmed testimonial arrives as bare text with no paragraph wrapper, so the
   two rules above never match it. These carry the quotes for that case, and the
   :not(:has(p)) guard keeps them from doubling up when a wrapper IS present.
   A browser without :has() drops the rule and simply shows no quotes, which is
   the safe direction to fail. */
.tss-wrapper .tss-carousel11 .item-content:not(:has(p)):before {
	content: "\201C";
}

.tss-wrapper .tss-carousel11 .item-content:not(:has(p)):after {
	content: "\201D";
}

.tss-wrapper .tss-carousel11 .item-content p:last-child {
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper h3.author-name {
	margin: 24px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	text-align: center;
	display: block;
	clear: none;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel11 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel11 .single-item-wrapper h4.author-bio {
	margin: 4px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.43;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
	clear: none;
}

/* Block-level with text-align, not flex: the Rating "Alignment" style control
   emits text-align on exactly this element, and a flex container would ignore
   it. Centre matches Elementor's own default, so both arms agree out of the box. */
.tss-wrapper .tss-carousel11 .rating-wrapper {
	display: block;
	margin: 16px 0 0;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. width/height stay auto so the Rating "Font size"
   control actually resizes the star instead of being cropped by a fixed box. */
.tss-wrapper .tss-carousel11 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1px;
	color: var(--tss-star, #f5b800);
	font-size: 20px;
	line-height: 1;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel11 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel11 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 14px 0 0;
	text-align: center;
}

.tss-wrapper .tss-carousel11 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel11 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it. */
.tss-wrapper .tss-carousel11 .author-social a,
.tss-wrapper .tss-carousel11 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 32px;
	min-height: 32px;
	padding: 8px;
	margin: 0 3px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel11 .author-social a:hover,
.tss-wrapper .tss-carousel11 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel11 .author-social a span.dashicons,
.tss-wrapper .tss-carousel11 .author-social a i,
.tss-wrapper .tss-carousel11 .tss-social-share a span.dashicons,
.tss-wrapper .tss-carousel11 .tss-social-share a i {
	/* margin:0 is load-bearing. An unscoped ".dashicons-twitter" near the end
	   of this file sets margin-top:3px, which made the X chip 2px taller than
	   its neighbours - so a slide carrying an X was taller than one without,
	   and this carousel animates its height between slides. */
	margin: 0;
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

/* The mask-image icons paint themselves with background-color, and the global
   ".dashicons-twitter:before" hard-codes #000 - so without this the X stays
   black on the tinted chip and never turns white on hover. Sized in em because
   the shortcode arm's Social size control emits an explicit :before width and
   the Elementor arm has no equivalent emission. */
.tss-wrapper .tss-carousel11 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel11 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel11 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel11 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-carousel11 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-carousel11 .tss-social-share .dashicons-twitter:before {
	/* margin:0 is load-bearing. The global .dashicons-twitter:before carries a
	   margin-top:3px, which collapses out of the span and makes the X chip 2px
	   taller than the others - so a slide with an X was taller than one without,
	   and this carousel animates its height between slides. */
	margin: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel11 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel11 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/*** The control row: prev, dots, next on one centred line ***/

/* Grid on the swiper container, because the arrows and the pagination are its
   children rather than the carousel wrapper's. The wrapper spans every column,
   so swiper still measures a full-width track. */
.tss-wrapper[data-layout="carousel11"] .tss-carousel-main.swiper {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr auto 16px auto 16px auto 1fr;
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas:
		"main main main main main"
		". prev dots next .";
	row-gap: 40px;
	column-gap: 16px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-items: center;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main.swiper > .swiper-wrapper {
	grid-area: main;
	width: 100%;
}

/* Everything below overrides the shared "Carousel Button Style" block near the
   top of this file, which parks the arrows off to the sides at opacity 0. */
.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-arrow {
	position: static;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 1;
	line-height: 1;
	color: var(--tss-ink, #1f2330);
	background: #fff;
	border: 1px solid #8a8a8a;
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1), inset 0 -1px 0 rgba(26, 26, 26, 0.2);
	box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1), inset 0 -1px 0 rgba(26, 26, 26, 0.2);
	-webkit-transition: background 0.1s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.1s ease;
	transition: background 0.1s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.1s ease;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-arrow:hover {
	background: var(--tss-panel, #f1f1f1);
	border-color: #616161;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-arrow:after {
	content: none;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-arrow i {
	font-size: 16px;
	line-height: 1;
	color: inherit;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-button-prev {
	grid-area: prev;
	left: auto;
	right: auto;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-button-next {
	grid-area: next;
	left: auto;
	right: auto;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* The shared block hides the pagination for carousel 11 and 12; this section
   sits later in the file and at the same specificity, so it wins it back. */
.tss-wrapper[data-layout="carousel11"] .carousel-wrapper .swiper-pagination,
.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-pagination {
	grid-area: dots;
	position: static;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	bottom: auto;
	left: auto;
	right: auto;
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	opacity: 1;
	border: none;
	border-radius: 9999px;
	background: #cdcdcd;
	-webkit-transition: background 0.2s cubic-bezier(0.4, 0.22, 0.28, 1), width 0.2s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: background 0.2s cubic-bezier(0.4, 0.22, 0.28, 1), width 0.2s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-pagination-bullet:hover {
	background: #8a8a8a;
}

.tss-wrapper[data-layout="carousel11"] .tss-carousel-main .swiper-pagination-bullet-active {
	width: 24px;
	background: var(--tss-primary, #3858e9);
}

/* Narrow step. The face strip is the part that has to give first. */
@media (max-width: 600px) {
	.tss-wrapper .tss-carousel11 .tss-carousel-thumb .profile-img-wrapper-inner {
		width: 60px;
		height: 60px;
	}

	.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-wrapper {
		min-height: 152px;
	}

	.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner {
		width: 104px;
		height: 104px;
	}

	.tss-wrapper .tss-carousel11 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner:after {
		width: 28px;
		height: 28px;
		background-size: 16px;
		border-width: 2px;
	}

	/* The faces shrink at this step, so the strip has to shrink with them or the
	   gap grows. 390 = three 114px slots + the 48px of padding that keeps the
	   outer faces whole. */
	.tss-wrapper .tss-carousel11 .tss-carousel-thumb {
		max-width: 390px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.tss-wrapper .tss-carousel11 .item-content-wrapper .item-content {
		font-size: 15px;
	}

	.tss-wrapper[data-layout="carousel11"] .tss-carousel-main.swiper {
		row-gap: 28px;
	}
}

/******************************************************/
/******************* Carousel 12  ********************/
/******************************************************/
/* Carousel 12 is carousel 11 inverted: the same focus carousel, but its thumb
   strip renders AFTER the main slider (TSSProSC::renderThumbSlider is called
   below the carousel wrapper), so the faces read as a picker under the quote
   rather than a header above it. It takes carousel 11's face and type
   treatment; the differences are all structural:
     - the control row holds the arrows only. The dots are hidden for this
       layout by the shared block near the top of this file, and the face strip
       sitting directly below them already does that job. carousel 12 is also
       still excluded from the Elementor Dot Pagination control, so leaving the
       dots off keeps the two arms rendering the same elements.
     - the strip's padding is weighted to the top, because it now follows the
       content instead of leading it.
   Everything else - the 84/128 faces, the ring, the quote badge, the grayscale
   neighbours, the pinned row height - matches carousel 11 so the pair stay
   recognisably the same design. */

.tss-wrapper .tss-carousel12 .single-item {
	padding: 0;
	margin-bottom: 0;
}

.tss-wrapper .tss-carousel12 .tss-grid-item {
	margin-bottom: 0;
}

/* border-box is declared explicitly rather than inherited from the theme's
   global reset: wp-admin has no such reset, so in the shortcode Layout Preview
   the ring and border widths would be ADDED to the face sizes below. */
.tss-wrapper .tss-carousel12 .single-item-wrapper,
.tss-wrapper .tss-carousel12 .single-item-wrapper *,
.tss-wrapper .tss-carousel12 .tss-carousel-thumb,
.tss-wrapper .tss-carousel12 .tss-carousel-thumb * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper {
	background: transparent;
	text-align: center;
}

/*** The quote and author block ***/

/* Three classes, so it also neutralises the generic
   ".tss-wrapper .item-content-wrapper { padding: 20px; margin-top: 15px }" in
   the max-width:767px tail at the end of this file. */
.tss-wrapper .tss-carousel12 .item-content-wrapper {
	padding: 0;
	margin-top: 0;
}

/* Clamped AND min-heighted to the same six lines, so every slide is the same
   height. This carousel animates its height between slides (swiper autoHeight),
   and with unclamped quotes the block jumps on the way past a short
   testimonial. The clamp caps the tall ones and the min-height floors the short
   ones; both are in em so the Testimonial "Font size" control carries them. */
.tss-wrapper .tss-carousel12 .item-content-wrapper .item-content {
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	color: var(--tss-ink, #1f2330);
	max-width: 62ch;
	margin: 0 auto;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	min-height: 9em;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper.tss-expanded .item-content,
.tss-wrapper .tss-carousel12 .single-item-wrapper.tss-no-clamp .item-content {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* Typographic quotes wrap the copy itself. They sit on the first and last
   paragraph so they hug the text rather than the block. */
.tss-wrapper .tss-carousel12 .item-content p {
	width: auto;
	margin: 0 auto 12px;
}

.tss-wrapper .tss-carousel12 .item-content p:first-of-type:before {
	content: "\201C";
}

.tss-wrapper .tss-carousel12 .item-content p:last-of-type:after {
	content: "\201D";
}

.tss-wrapper .tss-carousel12 .item-content p:last-child {
	margin-bottom: 0;
}

/* A trimmed testimonial arrives as bare text with no paragraph wrapper, so the
   two rules above never match it. These carry the quotes for that case, and the
   :not(:has(p)) guard keeps them from doubling up when a wrapper IS present.
   A browser without :has() drops the rule and simply shows no quotes, which is
   the safe direction to fail. */
.tss-wrapper .tss-carousel12 .item-content:not(:has(p)):before {
	content: "\201C";
}

.tss-wrapper .tss-carousel12 .item-content:not(:has(p)):after {
	content: "\201D";
}

/* Read-more toggle. Hidden with visibility rather than display, so its row is
   reserved on every slide: with display:none the slides that do not need a
   toggle are shorter than the ones that do, and this carousel animates its
   height between slides, so that difference reads as a jump. visibility also
   keeps the hidden button out of the tab order. */

.tss-wrapper .tss-carousel12 .single-item-wrapper h3.author-name {
	margin: 24px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tss-ink, #1f2330);
	text-align: center;
	display: block;
	clear: none;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper h3.author-name:hover,
.tss-wrapper .tss-carousel12 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel12 .single-item-wrapper h4.author-bio {
	margin: 4px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.43;
	font-weight: 400;
	color: var(--tss-muted, #6a6f7e);
	text-align: center;
	clear: none;
}

/* Block-level with text-align, not flex: the Rating "Alignment" style control
   emits text-align on exactly this element, and a flex container would ignore
   it. Centre matches Elementor's own default, so both arms agree out of the box. */
.tss-wrapper .tss-carousel12 .rating-wrapper {
	display: block;
	margin: 16px 0 0;
	line-height: 1;
	text-align: center;
}

/* Specificity has to beat the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   further down this file. width/height stay auto so the Rating "Font size"
   control actually resizes the star instead of being cropped by a fixed box. */
.tss-wrapper .tss-carousel12 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 1px;
	color: var(--tss-star, #f5b800);
	font-size: 20px;
	line-height: 1;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-carousel12 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel12 .single-item-wrapper .tss-social-share {
	display: block;
	margin: 14px 0 0;
	text-align: center;
}

.tss-wrapper .tss-carousel12 .tss-social-share .share-icons,
.tss-wrapper .tss-carousel12 .author-social .tss-social-label {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tss-muted, #6a6f7e);
}

/* Padding-based, not a fixed box: the Social "Font size" control emits
   font-size on the glyph, so the chip has to grow with it rather than crop it. */
.tss-wrapper .tss-carousel12 .author-social a,
.tss-wrapper .tss-carousel12 .tss-social-share a {
	width: auto;
	height: auto;
	min-width: 32px;
	min-height: 32px;
	padding: 8px;
	margin: 0 3px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tss-primary, #3858e9);
	background: var(--tss-primary-soft, #eef1fe);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-carousel12 .author-social a:hover,
.tss-wrapper .tss-carousel12 .tss-social-share a:hover {
	color: #fff;
	background: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-carousel12 .author-social a span.dashicons,
.tss-wrapper .tss-carousel12 .author-social a i,
.tss-wrapper .tss-carousel12 .tss-social-share a span.dashicons,
.tss-wrapper .tss-carousel12 .tss-social-share a i {
	/* margin:0 is load-bearing. An unscoped ".dashicons-twitter" near the end
	   of this file sets margin-top:3px, which made the X chip 2px taller than
	   its neighbours - so a slide carrying an X was taller than one without,
	   and this carousel animates its height between slides. */
	margin: 0;
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

/* The mask-image icons paint themselves with background-color, and the global
   ".dashicons-twitter:before" hard-codes #000 - so without this the X stays
   black on the tinted chip and never turns white on hover. Sized in em because
   the shortcode arm's Social size control emits an explicit :before width and
   the Elementor arm has no equivalent emission. */
.tss-wrapper .tss-carousel12 .author-social .dashicons-skype:before,
.tss-wrapper .tss-carousel12 .author-social .dashicons-telegram:before,
.tss-wrapper .tss-carousel12 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel12 .tss-social-share .dashicons-skype:before,
.tss-wrapper .tss-carousel12 .tss-social-share .dashicons-telegram:before,
.tss-wrapper .tss-carousel12 .tss-social-share .dashicons-twitter:before {
	/* margin:0 is load-bearing. The global .dashicons-twitter:before carries a
	   margin-top:3px, which collapses out of the span and makes the X chip 2px
	   taller than the others - so a slide with an X was taller than one without,
	   and this carousel animates its height between slides. */
	margin: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
}

/* The X artwork fills its whole box, unlike the dashicon glyphs - draw it
   at 0.8em so it matches their optical size (and scales with them). */
.tss-wrapper .tss-carousel12 .author-social .dashicons-twitter:before,
.tss-wrapper .tss-carousel12 .tss-social-share .dashicons-twitter:before {
	width: 0.8em;
	height: 0.8em;
}

/*** The face strip, below the content ***/

/* Padding, NOT a max-width alone, is what keeps the outer faces whole: the
   strip runs with centeredSlides, so the neighbour beside the active face sits
   exactly one slide-width from the centre, which with an even slides-per-view
   lands it straddling the container edge where overflow:hidden would slice it.
   overflow clips at the PADDING box while swiper lays slides out across the
   CONTENT box, so padding widens the visible window without widening the slide
   row. The cap then sets the spacing: 554 = three 138px slots + the padding,
   which puts 32px between faces. The strip's slides-per-view is pinned to 3 in
   wptestimonial.js, so that arithmetic holds at any column setting. */
.tss-wrapper .tss-carousel12 .tss-carousel-thumb {
	max-width: 554px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 70px;
	padding-right: 70px;
}

/* Weighted to the top because the strip follows the content here. Pinned so the
   row cannot change height no matter what a face does. */
.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-wrapper {
	min-height: 176px;
	padding: 30px 0 18px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/* Each thumb slide IS the .profile-img-wrapper. The legacy dark disc that used
   to mask the inactive faces is replaced by opacity + grayscale. */
.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	text-align: center;
	cursor: pointer;
	background: none;
	border-radius: 50%;
	outline: 0;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper:before {
	content: none;
	display: none;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper:focus,
.tss-wrapper .tss-carousel12 .tss-meta-info:focus {
	outline: none;
}

/* Only the focused face and its two neighbours are shown. Swiper labels those
   three itself, so this holds at every slides-per-view and every width - which
   is what makes the strip immune to edge slicing, since the faces beyond
   prev/next are exactly the ones that straddle the clip edge. */
.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper-inner {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	line-height: 0;
	opacity: 0.5;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	/* width/height are deliberately NOT transitioned. Swiper swaps the active
	   class instantly, so animating the size makes the incoming face grow
	   84->128 while the outgoing one shrinks 128->84 - and mid-crossover both
	   are small, collapsing the flex row and jolting the page. */
	-webkit-transition: opacity 0.2s ease, -webkit-filter 0.2s ease, -webkit-transform 0.2s ease;
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper-inner a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 50%;
	background: var(--tss-line-soft, #ebecf1);
	border: 1px solid var(--tss-line, #e7e8ee);
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper:hover .profile-img-wrapper-inner {
	opacity: 0.85;
	-webkit-filter: grayscale(0.3);
	filter: grayscale(0.3);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner {
	width: 128px;
	height: 128px;
	opacity: 1;
	-webkit-filter: none;
	filter: none;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active:hover .profile-img-wrapper-inner {
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active img {
	border: 2px solid #fff;
	-webkit-box-shadow: 0 0 0 3px #3858e9, 0 2px 6px rgba(26, 26, 26, 0.1);
	-webkit-box-shadow: 0 0 0 3px var(--tss-primary, #3858e9), 0 2px 6px rgba(26, 26, 26, 0.1);
	box-shadow: 0 0 0 3px #3858e9, 0 2px 6px rgba(26, 26, 26, 0.1);
	box-shadow: 0 0 0 3px var(--tss-primary, #3858e9), 0 2px 6px rgba(26, 26, 26, 0.1);
}

/* Quote badge on the focused face. Drawn as a CSS background, not markup:
   printHtml() runs wp_kses_post(), which strips <svg> from a template. */
.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid #fff;
	background-color: var(--tss-primary, #3858e9);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.5 7C7 7 5 9 5 11.5V17h5.5v-5.5H8c0-1.4 1.1-2.5 2.5-2.5V7zm9 0C16 7 14 9 14 11.5V17h5.5v-5.5H17c0-1.4 1.1-2.5 2.5-2.5V7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
}

/*** The control row: arrows only, centred under the content ***/

/* Grid on the swiper container, because the arrows are its children rather than
   the carousel wrapper's. The wrapper spans every column, so swiper still
   measures a full-width track. The dots have no column: the shared block hides
   the pagination for this layout and the face strip below already navigates. */
/* The controls are lifted out of the main swiper container and dropped in below
   the face strip by wptestimonial.js, because the render paths print them
   inside that container - one level deeper than the strip they have to follow -
   and no amount of CSS can reorder across that boundary. This row is their
   destination. The same rules also cover the pre-script state, so the layout is
   sane for the instant before the move and if the script never runs. */
.tss-wrapper[data-layout="carousel12"] .tss-carousel-controls {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
}

/* The nodes arrive in DOM order next, prev, pagination - order puts them back
   into the reading order the design wants. */
.tss-wrapper[data-layout="carousel12"] .tss-carousel-controls .swiper-button-prev {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.tss-wrapper[data-layout="carousel12"] .tss-carousel-controls .swiper-pagination {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
}

.tss-wrapper[data-layout="carousel12"] .tss-carousel-controls .swiper-button-next {
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3;
}

/* Overrides the shared "Carousel Button Style" block near the top of this file,
   which parks the arrows off to the sides at opacity 0. */
.tss-wrapper[data-layout="carousel12"] .swiper-arrow {
	position: static;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 1;
	line-height: 1;
	color: var(--tss-ink, #1f2330);
	background: #fff;
	border: 1px solid #8a8a8a;
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1), inset 0 -1px 0 rgba(26, 26, 26, 0.2);
	box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1), inset 0 -1px 0 rgba(26, 26, 26, 0.2);
	-webkit-transition: background 0.1s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.1s ease;
	transition: background 0.1s cubic-bezier(0.4, 0.22, 0.28, 1), border-color 0.1s ease;
}

.tss-wrapper[data-layout="carousel12"] .swiper-arrow:hover {
	background: var(--tss-panel, #f1f1f1);
	border-color: #616161;
}

.tss-wrapper[data-layout="carousel12"] .swiper-arrow:after {
	content: none;
}

.tss-wrapper[data-layout="carousel12"] .swiper-arrow i {
	font-size: 16px;
	line-height: 1;
	color: inherit;
}

.tss-wrapper[data-layout="carousel12"] .swiper-button-prev {
	left: auto;
	right: auto;
}

.tss-wrapper[data-layout="carousel12"] .swiper-button-next {
	left: auto;
	right: auto;
}

.tss-wrapper[data-layout="carousel12"] .swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* The shared block near the top of this file hides the pagination for carousel
   11 and 12; this section sits later at the same specificity, so it wins it
   back. Both selectors are listed because the shared rule qualifies the
   pagination with the carousel wrapper while the element itself lives inside
   the main swiper container. */
.tss-wrapper[data-layout="carousel12"] .carousel-wrapper .swiper-pagination,
.tss-wrapper[data-layout="carousel12"] .swiper-pagination {
	position: static;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	bottom: auto;
	left: auto;
	right: auto;
	-webkit-transform: none;
	transform: none;
}

.tss-wrapper[data-layout="carousel12"] .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	opacity: 1;
	border: none;
	border-radius: 9999px;
	background: #cdcdcd;
	-webkit-transition: background 0.2s cubic-bezier(0.4, 0.22, 0.28, 1), width 0.2s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: background 0.2s cubic-bezier(0.4, 0.22, 0.28, 1), width 0.2s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper[data-layout="carousel12"] .swiper-pagination-bullet:hover {
	background: #8a8a8a;
}

.tss-wrapper[data-layout="carousel12"] .swiper-pagination-bullet-active {
	width: 24px;
	background: var(--tss-primary, #3858e9);
}

/* Narrow step. The face strip is the part that has to give first. */
@media (max-width: 600px) {
	.tss-wrapper .tss-carousel12 .tss-carousel-thumb {
		max-width: 390px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-wrapper {
		min-height: 152px;
		padding: 24px 0 14px;
	}

	.tss-wrapper .tss-carousel12 .tss-carousel-thumb .profile-img-wrapper-inner {
		width: 60px;
		height: 60px;
	}

	.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner {
		width: 104px;
		height: 104px;
	}

	.tss-wrapper .tss-carousel12 .tss-carousel-thumb .swiper-slide-active .profile-img-wrapper-inner:after {
		width: 28px;
		height: 28px;
		background-size: 16px;
		border-width: 2px;
	}

	.tss-wrapper .tss-carousel12 .item-content-wrapper .item-content {
		font-size: 15px;
	}

	.tss-wrapper[data-layout="carousel12"] .tss-carousel-controls {
		margin-top: 20px;
		gap: 12px;
	}
}

.tss-wrapper .video-testimonial-wrap + .tss-meta-info + .rating-wrapper,
.tss-wrapper .video-testimonial-wrap + .tss-meta-info .profile-img-wrapper {
	margin-top: 20px;
}

/******************************************************/
/**** Layout Video / Carousel Video / Isotope Video ***/
/******************************************************/
/* Redesigned video card: a rounded 16:9 frame that lifts on hover, then one
   author row — avatar, name and role, rating pushed to the far end.

   The player stays a real WordPress oEmbed iframe rather than a poster plus a
   lightbox, so YouTube's own thumbnail, play button and duration badge are what
   the visitor sees at rest. Everything here therefore styles the frame AROUND
   the embed and never the embed itself.

   Scoped to these three keys only. `.video-testimonial-wrap` is an unprefixed
   global shared with layout_video2 / carousel_video2 / isotope_video2, which keep
   their existing popup design — do not restyle it unscoped. */

.tss-wrapper .tss-layout_video .single-item,
.tss-wrapper .tss-carousel_video .single-item,
.tss-wrapper .tss-isotope_video .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout_video .tss-grid-item,
.tss-wrapper .tss-isotope_video .tss-grid-item {
	margin-bottom: 36px;
}

/* border-box is declared explicitly rather than inherited from the theme's global
   reset: wp-admin has no such reset, so in the admin Layout Preview the meta row's
   padding would be ADDED to its width and push the card out of its column. */
.tss-wrapper .tss-layout_video .single-item-wrapper,
.tss-wrapper .tss-layout_video .single-item-wrapper *,
.tss-wrapper .tss-carousel_video .single-item-wrapper,
.tss-wrapper .tss-carousel_video .single-item-wrapper *,
.tss-wrapper .tss-isotope_video .single-item-wrapper,
.tss-wrapper .tss-isotope_video .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-layout_video .single-item-wrapper,
.tss-wrapper .tss-carousel_video .single-item-wrapper,
.tss-wrapper .tss-isotope_video .single-item-wrapper {
	position: relative;
}

/* ---- The video frame ---- */

/* The shared .video-testimonial-wrap adds padding-top: 25px on top of the 56.25%
   ratio box, which makes the frame taller than 16:9. Zero it here so the rounded
   frame matches the embed exactly and the corners clip cleanly. */
.tss-wrapper .tss-layout_video .video-testimonial-wrap,
.tss-wrapper .tss-carousel_video .video-testimonial-wrap,
.tss-wrapper .tss-isotope_video .video-testimonial-wrap {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: #0f1118;
	border-radius: var(--tss-radius, 16px);
	-webkit-box-shadow: 0 10px 30px rgba(27, 31, 42, 0.16);
	box-shadow: 0 10px 30px rgba(27, 31, 42, 0.16);
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.25s ease;
	transition: transform 0.25s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.25s ease;
}

.tss-wrapper .tss-layout_video .single-item-wrapper:hover .video-testimonial-wrap,
.tss-wrapper .tss-carousel_video .single-item-wrapper:hover .video-testimonial-wrap,
.tss-wrapper .tss-isotope_video .single-item-wrapper:hover .video-testimonial-wrap {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	-webkit-box-shadow: 0 20px 44px rgba(56, 88, 233, 0.22);
	-webkit-box-shadow: 0 20px 44px color-mix(in srgb, var(--tss-primary, #3858e9) 22%, transparent);
	box-shadow: 0 20px 44px rgba(56, 88, 233, 0.22);
	box-shadow: 0 20px 44px color-mix(in srgb, var(--tss-primary, #3858e9) 22%, transparent);
}

.tss-wrapper .tss-layout_video .video-testimonial-wrap iframe,
.tss-wrapper .tss-carousel_video .video-testimonial-wrap iframe,
.tss-wrapper .tss-isotope_video .video-testimonial-wrap iframe,
.tss-wrapper .tss-layout_video .video-testimonial-wrap video,
.tss-wrapper .tss-carousel_video .video-testimonial-wrap video,
.tss-wrapper .tss-isotope_video .video-testimonial-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border: 0;
}

/* ---- Written testimonial, between the video and the author row ---- */

.tss-wrapper .tss-layout_video .item-content-wrapper,
.tss-wrapper .tss-carousel_video .item-content-wrapper,
.tss-wrapper .tss-isotope_video .item-content-wrapper {
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-layout_video .item-content,
.tss-wrapper .tss-carousel_video .item-content,
.tss-wrapper .tss-isotope_video .item-content {
	margin: 18px 0 0;
	padding: 20px;
	font-size: 15.5px;
	line-height: 1.7;
	text-align: left;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout_video .item-content p:last-child,
.tss-wrapper .tss-carousel_video .item-content p:last-child,
.tss-wrapper .tss-isotope_video .item-content p:last-child {
	margin-bottom: 0;
}

/* ---- Author row ---- */

.tss-wrapper .tss-layout_video .tss-meta-info,
.tss-wrapper .tss-carousel_video .tss-meta-info,
.tss-wrapper .tss-isotope_video .tss-meta-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--tss-line, #ebecf1);
}

/* A shared rule gives the avatar margin-top: 20px whenever .tss-meta-info follows
   the video directly — which happens as soon as the testimonial text is switched
   off. In a centred flex row that just knocks the avatar out of alignment, so the
   margin is zeroed here. */
.tss-wrapper .tss-layout_video .tss-meta-info .profile-img-wrapper,
.tss-wrapper .tss-carousel_video .tss-meta-info .profile-img-wrapper,
.tss-wrapper .tss-isotope_video .tss-meta-info .profile-img-wrapper {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-layout_video .tss-meta-info .profile-img-wrapper img,
.tss-wrapper .tss-carousel_video .tss-meta-info .profile-img-wrapper img,
.tss-wrapper .tss-isotope_video .tss-meta-info .profile-img-wrapper img {
	display: block;
	width: 50px;
	height: 50px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	background: #eef0f4;
	border: 3px solid #ffffff;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 1.5px #dde3fc, 0 5px 14px rgba(27, 31, 42, 0.12);
	-webkit-box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 5px 14px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px #dde3fc, 0 5px 14px rgba(27, 31, 42, 0.12);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tss-primary, #3858e9) 20%, #fff), 0 5px 14px rgba(27, 31, 42, 0.12);
}

/* min-width:0 lets a long name ellipsize instead of forcing the row wider. */
.tss-wrapper .tss-layout_video .tss-meta-text,
.tss-wrapper .tss-carousel_video .tss-meta-text,
.tss-wrapper .tss-isotope_video .tss-meta-text {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* clear:none is load-bearing. Themes routinely ship "h1…h6 { clear: both }"
   (Astra does); WordPress cancels it via ".entry-content :where(h1…)" on a normal
   page, but an Elementor canvas template has no .entry-content, so without this the
   name drops onto its own line on the Elementor arm only. */
.tss-wrapper .tss-layout_video .single-item-wrapper h3.author-name,
.tss-wrapper .tss-carousel_video .single-item-wrapper h3.author-name,
.tss-wrapper .tss-isotope_video .single-item-wrapper h3.author-name {
	clear: none;
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--tss-ink, #1b1f2a);
}

.tss-wrapper .tss-layout_video .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-carousel_video .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-isotope_video .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout_video .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-carousel_video .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-isotope_video .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout_video .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-carousel_video .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-isotope_video .single-item-wrapper h4.author-bio {
	clear: none;
	display: block;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	color: var(--tss-muted, #6a6f7e);
}

/* ---- Rating, at the far end of the row ---- */

/* margin-left:auto does the pushing, and width:fit-content sizes the box to the
   stars themselves. The Elementor rating alignment control ships
   'default' => 'center', which would otherwise centre the stars on the Elementor
   arm only; with no slack inside the box both arms render identically. */
.tss-wrapper .tss-layout_video .rating-wrapper,
.tss-wrapper .tss-carousel_video .rating-wrapper,
.tss-wrapper .tss-isotope_video .rating-wrapper {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 0 0 auto;
	padding: 0;
	line-height: 1;
}

.tss-wrapper .tss-layout_video .tss-rating-stars,
.tss-wrapper .tss-carousel_video .tss-rating-stars,
.tss-wrapper .tss-isotope_video .tss-rating-stars {
	display: block;
	white-space: nowrap;
}

/* Keep .single-item-wrapper in the chain: the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   near the end of this file is (0,4,1) and outranks a shorter selector. */
.tss-wrapper .tss-layout_video .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-carousel_video .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-isotope_video .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 0 0 1px;
	font-size: 16px;
	line-height: 1;
	color: var(--tss-star, #f5b800);
}

.tss-wrapper .tss-layout_video .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-carousel_video .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-isotope_video .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout_video .tss-rating-score,
.tss-wrapper .tss-carousel_video .tss-rating-score,
.tss-wrapper .tss-isotope_video .tss-rating-score {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tss-muted, #6a6f7e);
}

/* ---- Social and share ---- */

/* width:fit-content for the same reason as the rating row above — the Elementor
   social alignment control also ships 'default' => 'center'. */
.tss-wrapper .tss-layout_video .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel_video .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope_video .single-item-wrapper .author-social,
.tss-wrapper .tss-layout_video .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-carousel_video .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-isotope_video .single-item-wrapper .tss-social-share {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 14px 0 0;
	text-align: left;
	line-height: 1;
}

.tss-wrapper .tss-layout_video .single-item-wrapper .author-social a,
.tss-wrapper .tss-carousel_video .single-item-wrapper .author-social a,
.tss-wrapper .tss-isotope_video .single-item-wrapper .author-social a,
.tss-wrapper .tss-layout_video .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-carousel_video .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-isotope_video .single-item-wrapper .tss-social-share a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	margin: 0 6px 0 0;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
	color: var(--tss-muted, #6a6f7e);
	background: var(--tss-panel, #f7f8fb);
	border: 1px solid var(--tss-line, #ebecf1);
	border-radius: 50%;
	-webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tss-wrapper .tss-layout_video .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-carousel_video .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-isotope_video .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-layout_video .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-carousel_video .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-isotope_video .single-item-wrapper .tss-social-share a:hover {
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout_video .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-carousel_video .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-isotope_video .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-layout_video .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-carousel_video .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-isotope_video .single-item-wrapper .tss-social-share a .dashicons {
	/* A 1em box centred by the flex chip, not a glyph riding the chip's
	   line-height: the X/Skype/Telegram masks are block-level :before boxes
	   and sat above centre on a line-height-sized box. */
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.tss-wrapper .tss-layout_video .tss-grid-item,
	.tss-wrapper .tss-isotope_video .tss-grid-item {
		margin-bottom: 28px;
	}

	.tss-wrapper .tss-layout_video .item-content,
	.tss-wrapper .tss-carousel_video .item-content,
	.tss-wrapper .tss-isotope_video .item-content {
		font-size: 15px;
	}

	.tss-wrapper .tss-layout_video .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel_video .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope_video .single-item-wrapper h3.author-name {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout_video .tss-meta-info,
	.tss-wrapper .tss-carousel_video .tss-meta-info,
	.tss-wrapper .tss-isotope_video .tss-meta-info {
		gap: 11px;
		margin-top: 14px;
		padding-top: 14px;
	}

	.tss-wrapper .tss-layout_video .tss-meta-info .profile-img-wrapper,
	.tss-wrapper .tss-carousel_video .tss-meta-info .profile-img-wrapper,
	.tss-wrapper .tss-isotope_video .tss-meta-info .profile-img-wrapper,
	.tss-wrapper .tss-layout_video .tss-meta-info .profile-img-wrapper img,
	.tss-wrapper .tss-carousel_video .tss-meta-info .profile-img-wrapper img,
	.tss-wrapper .tss-isotope_video .tss-meta-info .profile-img-wrapper img {
		width: 42px;
		height: 42px;
	}

	.tss-wrapper .tss-layout_video .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel_video .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope_video .single-item-wrapper h3.author-name {
		font-size: 16.5px;
	}

	.tss-wrapper .tss-layout_video .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-carousel_video .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-isotope_video .single-item-wrapper h4.author-bio {
		font-size: 13px;
	}

	.tss-wrapper .tss-layout_video .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-carousel_video .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-isotope_video .single-item-wrapper .rating-wrapper span.dashicons {
		font-size: 14px;
	}

	.tss-wrapper .tss-layout_video .item-content,
	.tss-wrapper .tss-carousel_video .item-content,
	.tss-wrapper .tss-isotope_video .item-content {
		margin-top: 14px;
		font-size: 14.5px;
	}

	.tss-wrapper .tss-layout_video .single-item-wrapper .author-social a,
	.tss-wrapper .tss-carousel_video .single-item-wrapper .author-social a,
	.tss-wrapper .tss-isotope_video .single-item-wrapper .author-social a,
	.tss-wrapper .tss-layout_video .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-carousel_video .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-isotope_video .single-item-wrapper .tss-social-share a {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		font-size: 14px;
		line-height: 28px;
	}
}

/******************************************************/
/** Layout Video 2 / Carousel Video 2 / Isotope Video 2 */
/******************************************************/
/* Redesigned poster card. The author image doubles as the video poster: a rounded
   16:9 frame that lifts on hover, with a filled play button over a scrim, opening
   the video in a magnific popup. Below it the written testimonial, then one author
   row — name and role left, rating pushed right — matching layout_video so the two
   video families read as a pair.

   Scoped to these three keys. The trigger hooks are load bearing and must not be
   renamed: wptestimonial.js delegates the popup off the tlp-openPopup anchor, the
   Elementor image radius control targets tlp-video-image-2, and the Video Icon
   Color control targets the dashicons glyph inside the anchor.

   The scrim deepens on hover rather than clearing. The old rule cleared it, which
   removed the play button's contrast at exactly the moment the pointer was on it. */

.tss-wrapper .tss-layout_video2 .single-item,
.tss-wrapper .tss-carousel_video2 .single-item,
.tss-wrapper .tss-isotope_video2 .single-item {
	padding: 0;
}

.tss-wrapper .tss-layout_video2 .tss-grid-item,
.tss-wrapper .tss-isotope_video2 .tss-grid-item {
	margin-bottom: 36px;
}

/* border-box is declared explicitly rather than inherited from the theme's global
   reset: wp-admin has no such reset, so in the admin Layout Preview the author
   row's padding would be ADDED to its width and push the card out of its column. */
.tss-wrapper .tss-layout_video2 .single-item-wrapper,
.tss-wrapper .tss-layout_video2 .single-item-wrapper *,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper *,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper {
	position: relative;
	background: none;
	border: 0;
	padding: 0;
}

/* ---- Poster ---- */

.tss-wrapper .tss-layout_video2 .tss-meta-info,
.tss-wrapper .tss-carousel_video2 .tss-meta-info,
.tss-wrapper .tss-isotope_video2 .tss-meta-info {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-layout_video2 .profile-img-wrapper,
.tss-wrapper .tss-carousel_video2 .profile-img-wrapper,
.tss-wrapper .tss-isotope_video2 .profile-img-wrapper {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #0f1118;
	border-radius: var(--tss-radius, 16px);
	-webkit-box-shadow: 0 10px 30px rgba(27, 31, 42, 0.16);
	box-shadow: 0 10px 30px rgba(27, 31, 42, 0.16);
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.25s ease;
	transition: transform 0.25s cubic-bezier(0.4, 0.22, 0.28, 1), box-shadow 0.25s ease;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .profile-img-wrapper,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .profile-img-wrapper,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .profile-img-wrapper {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	-webkit-box-shadow: 0 20px 44px rgba(56, 88, 233, 0.22);
	box-shadow: 0 20px 44px rgba(56, 88, 233, 0.22);
	-webkit-box-shadow: 0 20px 44px color-mix(in srgb, var(--tss-primary, #3858e9) 22%, transparent);
	box-shadow: 0 20px 44px color-mix(in srgb, var(--tss-primary, #3858e9) 22%, transparent);
}

/* Carousel Video 2 keeps its poster flat: no drop shadow at rest and no
   glow on hover. The hover lift stays. A thin line outlines the frame
   instead; it sits on the frame, not the image, because the image zooms on
   hover and the frame clips it. */
.tss-wrapper .tss-carousel_video2 .profile-img-wrapper,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .profile-img-wrapper {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.tss-wrapper .tss-carousel_video2 .profile-img-wrapper {
	border: 1px solid var(--tss-line, #e7e8ee);
}

/* The anchor is the click target and the scrim host, so it has to fill the frame. */
.tss-wrapper .tss-layout_video2 .tlp-openPopup,
.tss-wrapper .tss-carousel_video2 .tlp-openPopup,
.tss-wrapper .tss-isotope_video2 .tlp-openPopup,
.tss-wrapper .tss-layout_video2 .tlp-openinline,
.tss-wrapper .tss-carousel_video2 .tlp-openinline,
.tss-wrapper .tss-isotope_video2 .tlp-openinline {
	position: relative;
	display: block;
	width: 100%;
	/* A poster reads as a video still, so the author image is framed 16:9. The crop
	   is biased upward because a portrait's face sits above centre. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: inherit;
	line-height: 0;
}

.tss-wrapper .tss-layout_video2 .profile-img-wrapper img,
.tss-wrapper .tss-carousel_video2 .profile-img-wrapper img,
.tss-wrapper .tss-isotope_video2 .profile-img-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 0;
	-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: transform 0.35s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .profile-img-wrapper img,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .profile-img-wrapper img,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .profile-img-wrapper img {
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

/* Scrim. Deepens on hover so the play button keeps its contrast. */
.tss-wrapper .tss-layout_video2 .tlp-openPopup:before,
.tss-wrapper .tss-carousel_video2 .tlp-openPopup:before,
.tss-wrapper .tss-isotope_video2 .tlp-openPopup:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: auto;
	height: auto;
	background: rgba(15, 17, 24, 0.28);
	-webkit-transition: background 0.25s ease;
	transition: background 0.25s ease;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .tlp-openPopup:before,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .tlp-openPopup:before,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .tlp-openPopup:before {
	background: rgba(15, 17, 24, 0.44);
}

/* Play button. The Video Icon Color control drives the glyph colour and the ring,
   so both are declared here as real properties for it to override.

   The element keeps its .dashicons class because that is what the control targets,
   but the icon-font glyph is replaced below with a drawn triangle: the shipped
   dashicons-video-alt2 is a camcorder, which reads as "this is a video" rather
   than "press this to play". A triangle is the universal play affordance. */
.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	-webkit-box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38);
	box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: -webkit-transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
	transition: transform 0.22s cubic-bezier(0.4, 0.22, 0.28, 1), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
	/* A slow ring breathing out of the button at rest, so a poster reads as
	   playable before the pointer ever reaches it. Driven on the spread of a second
	   shadow layer rather than a third element, since :before and :after are already
	   spent on the glyph and the hover halo. */
	-webkit-animation: tssVideoPulse 2.8s cubic-bezier(0.4, 0.22, 0.28, 1) infinite;
	animation: tssVideoPulse 2.8s cubic-bezier(0.4, 0.22, 0.28, 1) infinite;
}

@-webkit-keyframes tssVideoPulse {
	0%   { -webkit-box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 0 rgba(255, 255, 255, 0.5); }
	70%  { -webkit-box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 20px rgba(255, 255, 255, 0); }
	100% { -webkit-box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes tssVideoPulse {
	0%   { box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 0 rgba(255, 255, 255, 0.5); }
	70%  { box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 20px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 10px 26px rgba(15, 17, 24, 0.38), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* The play glyph. Base declaration is a plain drawn triangle, which every browser
   can render; the @supports block below upgrades it to a rounded-corner play mark.
   Both use currentColor, so the Video Icon Color control still drives the icon
   exactly as it drove the dashicon it replaced.

   The icon is a CSS mask rather than an inline <svg> in the template because the
   markup goes out through TSSProHelper::printHtml(), whose wp_kses_post() strips
   svg elements entirely — the same reason layout 8 draws its chevron in CSS.

   margin-left nudges the glyph off geometric centre: a play mark's visual mass
   sits left of its bounding box, so a centred one looks like it is drifting back. */
.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid currentColor;
	border-right: 0;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before {
		width: 30px;
		height: 30px;
		margin-left: 3px;
		border: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 6.9 17.6 12l-8.3 5.1z' fill='%23000' stroke='%23000' stroke-width='2.9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 6.9 17.6 12l-8.3 5.1z' fill='%23000' stroke='%23000' stroke-width='2.9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* Halo that blooms out of the button on hover — the affordance cue that the old
   flat circle lacked. Sits behind the button and never intercepts the click. */
.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after,
.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after,
.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after {
	content: "";
	position: absolute;
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px;
	z-index: -1;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0;
	-webkit-transform: scale(0.72);
	transform: scale(0.72);
	-webkit-transition: opacity 0.32s ease, -webkit-transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0.22, 0.28, 1);
	pointer-events: none;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after {
	opacity: 0.45;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* On hover the pulse stops and hands over to the held halo below, so the two
   effects never read as competing. The glow picks up the Primary colour. */
.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons {
	background: var(--tss-primary-hover, #2843c4);
	border-color: #ffffff;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	-webkit-transform: translate(-50%, -50%) scale(1.12);
	transform: translate(-50%, -50%) scale(1.12);
	-webkit-box-shadow: 0 14px 34px rgba(15, 17, 24, 0.44), 0 0 26px rgba(56, 88, 233, 0.55);
	box-shadow: 0 14px 34px rgba(15, 17, 24, 0.44), 0 0 26px rgba(56, 88, 233, 0.55);
	-webkit-box-shadow: 0 14px 34px rgba(15, 17, 24, 0.44), 0 0 26px color-mix(in srgb, var(--tss-primary, #3858e9) 55%, transparent);
	box-shadow: 0 14px 34px rgba(15, 17, 24, 0.44), 0 0 26px color-mix(in srgb, var(--tss-primary, #3858e9) 55%, transparent);
}

/* Tactile press: the button dips under the pointer before the popup opens. */
.tss-wrapper .tss-layout_video2 .tlp-openPopup:active .dashicons,
.tss-wrapper .tss-carousel_video2 .tlp-openPopup:active .dashicons,
.tss-wrapper .tss-isotope_video2 .tlp-openPopup:active .dashicons {
	-webkit-transform: translate(-50%, -50%) scale(0.94);
	transform: translate(-50%, -50%) scale(0.94);
	-webkit-transition-duration: 0.08s;
	transition-duration: 0.08s;
}

/* Keyboard parity: tabbing to the poster gets the same treatment as hovering it,
   plus a visible focus ring that survives on top of any poster image. */
.tss-wrapper .tss-layout_video2 .tlp-openPopup:focus-visible .dashicons,
.tss-wrapper .tss-carousel_video2 .tlp-openPopup:focus-visible .dashicons,
.tss-wrapper .tss-isotope_video2 .tlp-openPopup:focus-visible .dashicons {
	background: var(--tss-primary-hover, #2843c4);
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	-webkit-transform: translate(-50%, -50%) scale(1.12);
	transform: translate(-50%, -50%) scale(1.12);
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.tss-wrapper .tss-layout_video2 .tlp-openPopup:focus-visible,
.tss-wrapper .tss-carousel_video2 .tlp-openPopup:focus-visible,
.tss-wrapper .tss-isotope_video2 .tlp-openPopup:focus-visible {
	outline: none;
}

/* Everything above is decorative motion, so it all comes off for anyone who has
   asked the OS to reduce it. Colour and the focus ring stay. */
@media (prefers-reduced-motion: reduce) {
	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons {
		-webkit-animation: none;
		animation: none;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons {
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper:hover .tlp-openPopup .dashicons:after {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/* ---- Written testimonial ---- */

.tss-wrapper .tss-layout_video2 .item-content-wrapper,
.tss-wrapper .tss-carousel_video2 .item-content-wrapper,
.tss-wrapper .tss-isotope_video2 .item-content-wrapper {
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .item-content,
.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .item-content,
.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .item-content {
	margin: 18px 0 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.7;
	text-align: left;
	color: var(--tss-muted, #6a6f7e);
}

.tss-wrapper .tss-layout_video2 .item-content p:last-child,
.tss-wrapper .tss-carousel_video2 .item-content p:last-child,
.tss-wrapper .tss-isotope_video2 .item-content p:last-child {
	margin-bottom: 0;
}

/* ---- Author row ---- */

.tss-wrapper .tss-layout_video2 .tss-author-row,
.tss-wrapper .tss-carousel_video2 .tss-author-row,
.tss-wrapper .tss-isotope_video2 .tss-author-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--tss-line, #ebecf1);
}

.tss-wrapper .tss-layout_video2 .tss-meta-text,
.tss-wrapper .tss-carousel_video2 .tss-meta-text,
.tss-wrapper .tss-isotope_video2 .tss-meta-text {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* clear:none is load-bearing. Themes routinely ship "h1…h6 { clear: both }"
   (Astra does); WordPress cancels it via ".entry-content :where(h1…)" on a normal
   page, but an Elementor canvas template has no .entry-content, so without this the
   name drops onto its own line on the Elementor arm only. */
.tss-wrapper .tss-layout_video2 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper h3.author-name,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper h3.author-name {
	clear: none;
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--tss-ink, #1b1f2a);
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper h3.author-name a,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper h3.author-name a {
	color: inherit;
	-webkit-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper h3.author-name a:hover,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper h3.author-name a:hover {
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper h4.author-bio,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper h4.author-bio {
	clear: none;
	display: block;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	color: var(--tss-muted, #6a6f7e);
}

/* margin-left:auto does the pushing, and width:fit-content sizes the box to the
   stars themselves. The Elementor rating alignment control ships
   'default' => 'center', which would otherwise centre the stars on the Elementor
   arm only; with no slack inside the box both arms render identically. */
.tss-wrapper .tss-layout_video2 .rating-wrapper,
.tss-wrapper .tss-carousel_video2 .rating-wrapper,
.tss-wrapper .tss-isotope_video2 .rating-wrapper {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 0 0 auto;
	padding: 0;
	line-height: 1;
}

.tss-wrapper .tss-layout_video2 .tss-rating-stars,
.tss-wrapper .tss-carousel_video2 .tss-rating-stars,
.tss-wrapper .tss-isotope_video2 .tss-rating-stars {
	display: block;
	white-space: nowrap;
}

/* Keep .single-item-wrapper in the chain: the generic
   ".tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons { color: gold }"
   near the end of this file is (0,4,1) and outranks a shorter selector. */
.tss-wrapper .tss-layout_video2 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .rating-wrapper span.dashicons,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .rating-wrapper span.dashicons {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 0 0 1px;
	font-size: 16px;
	line-height: 1;
	color: var(--tss-star, #f5b800);
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .rating-wrapper span.dashicons-star-empty {
	color: #dcdfe8;
}

.tss-wrapper .tss-layout_video2 .tss-rating-score,
.tss-wrapper .tss-carousel_video2 .tss-rating-score,
.tss-wrapper .tss-isotope_video2 .tss-rating-score {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: right;
	color: var(--tss-muted, #6a6f7e);
}

/* ---- Social and share ---- */

/* width:fit-content for the same reason as the rating row above — the Elementor
   social alignment control also ships 'default' => 'center'. */
.tss-wrapper .tss-layout_video2 .single-item-wrapper .author-social,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .author-social,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .author-social,
.tss-wrapper .tss-layout_video2 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .tss-social-share,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .tss-social-share {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 14px 0 0;
	text-align: left;
	line-height: 1;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper .author-social a,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .author-social a,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .author-social a,
.tss-wrapper .tss-layout_video2 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .tss-social-share a,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .tss-social-share a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	margin: 0 6px 0 0;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
	color: var(--tss-muted, #6a6f7e);
	background: var(--tss-panel, #f7f8fb);
	border: 1px solid var(--tss-line, #ebecf1);
	border-radius: 50%;
	-webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .author-social a:hover,
.tss-wrapper .tss-layout_video2 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .tss-social-share a:hover,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .tss-social-share a:hover {
	color: #ffffff;
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-layout_video2 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .author-social a .dashicons,
.tss-wrapper .tss-layout_video2 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-carousel_video2 .single-item-wrapper .tss-social-share a .dashicons,
.tss-wrapper .tss-isotope_video2 .single-item-wrapper .tss-social-share a .dashicons {
	/* A 1em box centred by the flex chip, not a glyph riding the chip's
	   line-height: the X/Skype/Telegram masks are block-level :before boxes
	   and sat above centre on a line-height-sized box. */
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.tss-wrapper .tss-layout_video2 .tss-grid-item,
	.tss-wrapper .tss-isotope_video2 .tss-grid-item {
		margin-bottom: 28px;
	}

	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .item-content,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .item-content,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .item-content {
		font-size: 15px;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper h3.author-name {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons {
		width: 52px;
		height: 52px;
	}

	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before {
		margin-left: 3px;
		border-top-width: 8px;
		border-bottom-width: 8px;
		border-left-width: 13px;
	}

	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
		.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
		.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before,
		.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:before {
			width: 24px;
			height: 24px;
			margin-left: 2px;
			border: 0;
		}
	}

	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .tlp-openPopup .dashicons:after {
		top: -9px;
		right: -9px;
		bottom: -9px;
		left: -9px;
	}

	.tss-wrapper .tss-layout_video2 .tss-author-row,
	.tss-wrapper .tss-carousel_video2 .tss-author-row,
	.tss-wrapper .tss-isotope_video2 .tss-author-row {
		gap: 11px;
		margin-top: 14px;
		padding-top: 14px;
	}

	.tss-wrapper .tss-layout_video2 .tlp-popup-wrapper .item-content,
	.tss-wrapper .tss-carousel_video2 .tlp-popup-wrapper .item-content,
	.tss-wrapper .tss-isotope_video2 .tlp-popup-wrapper .item-content {
		margin-top: 14px;
		font-size: 14.5px;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper h3.author-name,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper h3.author-name {
		font-size: 16.5px;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper h4.author-bio,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper h4.author-bio {
		font-size: 13px;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper .rating-wrapper span.dashicons,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper .rating-wrapper span.dashicons {
		font-size: 14px;
	}

	.tss-wrapper .tss-layout_video2 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper .author-social a,
	.tss-wrapper .tss-layout_video2 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-carousel_video2 .single-item-wrapper .tss-social-share a,
	.tss-wrapper .tss-isotope_video2 .single-item-wrapper .tss-social-share a {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		font-size: 14px;
		line-height: 28px;
	}
}

/************************ pagination **********************/
/* Global pagination design — shared by every layout (grid, isotope, video and
   the carousel load-more), on both the shortcode and the Elementor path. */

.tss-wrapper .tss-pagination {
	margin-top: 52px;
	text-align: center;
}

.tss-wrapper .tss-pagination ul.pagination-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tss-wrapper .tss-pagination ul.pagination-list li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tss-wrapper .tss-pagination ul.pagination-list li:before {
	content: none;
}

.tss-wrapper .tss-pagination ul.pagination-list li span,
.tss-wrapper .tss-pagination ul.pagination-list li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	background: #ffffff;
	border: 1px solid var(--tss-line, #e7e8ee);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	color: var(--tss-ink, #1f2330);
	-webkit-transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
	transition: all 0.16s cubic-bezier(0.4, 0.22, 0.28, 1);
}

.tss-wrapper .tss-pagination ul.pagination-list li a:hover,
.tss-wrapper .tss-pagination ul.pagination-list li a:focus {
	background: var(--tss-primary-soft, #eef1fe);
	border-color: var(--tss-primary, #3858e9);
	color: var(--tss-primary, #3858e9);
}

.tss-wrapper .tss-pagination ul.pagination-list li.active span {
	background: var(--tss-primary, #3858e9);
	border-color: var(--tss-primary, #3858e9);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(56, 88, 233, 0.3);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tss-primary, #3858e9) 30%, transparent);
}

.tss-wrapper .tss-pagination .tss-loading-holder {
	padding: 15px 0;
}

/* common isotope */
.tss-wrapper .single-item-wrapper .rating-wrapper span.dashicons {
	color: gold;
}

.tss-wrapper .tss-iso-filter {
	text-align: center;
}

.tss-wrapper .iso-search {
	display: inline-block;
}

.tss-wrapper .iso-search {
	margin: 0 10px;
}

.tss-wrapper .iso-search input {
	width: auto;
	padding: 10px;
	font-size: 16px;
	outline: none !important;
	height: 37px;
}

.rt-container-fluid [class*='rt-col-'],
.rt-container [class*='rt-col-'] {
	box-sizing: border-box;
}

/*************************** Tool Tip ****************/

body > .tss-tooltip {
	font-size: 100%;
	position: absolute;
	z-index: 9999;
	-o-box-shadow: 0 0 5px #aaa;
	-moz-box-shadow: 0 0 5px #aaa;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
	color: #fff;
	border-radius: 3px;
	background: #666;
	padding: 0 10px;
	border-width: 2px;
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

body > .tss-tooltip,
body > .tss-tooltip .tss-tooltip-bottom:after {
	background: #000;
	border-radius: 2px;
}

body > .tss-tooltip .tss-tooltip-bottom {
	width: 70px;
	height: 18px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -32px;
	bottom: -16px;
}

body > .tss-tooltip .tss-tooltip-bottom:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	tranform: rotate(45deg);
}

/********************* Media Query *************************/
@media (min-width: 768px) {
	.rt-container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.rt-container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.rt-container {
		width: 1170px;
	}
}

@media (min-width: 768px) {

	.rt-col-sm-24,
	.rt-col-sm-1,
	.rt-col-sm-2,
	.rt-col-sm-3,
	.rt-col-sm-4,
	.rt-col-sm-5,
	.rt-col-sm-6,
	.rt-col-sm-7,
	.rt-col-sm-8,
	.rt-col-sm-9,
	.rt-col-sm-10,
	.rt-col-sm-11,
	.rt-col-sm-12 {
		float: left;
	}

	.rt-col-sm-24 {
		width: 20%;
	}

	.rt-col-sm-12 {
		width: 100%;
	}

	.rt-col-sm-11 {
		width: 91.66666667%;
	}

	.rt-col-sm-10 {
		width: 83.33333333%;
	}

	.rt-col-sm-9 {
		width: 75%;
	}

	.rt-col-sm-8 {
		width: 66.66666667%;
	}

	.rt-col-sm-7 {
		width: 58.33333333%;
	}

	.rt-col-sm-6 {
		width: 50%;
	}

	.rt-col-sm-5 {
		width: 41.66666667%;
	}

	.rt-col-sm-4 {
		width: 33.33333333%;
	}

	.rt-col-sm-3 {
		width: 25%;
	}

	.rt-col-sm-2 {
		width: 16.66666667%;
	}

	.rt-col-sm-1 {
		width: 8.33333333%;
	}
}

@media (min-width: 992px) {

	.rt-col-md-24,
	.rt-col-md-1,
	.rt-col-md-2,
	.rt-col-md-3,
	.rt-col-md-4,
	.rt-col-md-5,
	.rt-col-md-6,
	.rt-col-md-7,
	.rt-col-md-8,
	.rt-col-md-9,
	.rt-col-md-10,
	.rt-col-md-11,
	.rt-col-md-12 {
		float: left;
	}

	.rt-col-md-24 {
		width: 20%;
	}

	.rt-col-md-12 {
		width: 100%;
	}

	.rt-col-md-11 {
		width: 91.66666667%;
	}

	.rt-col-md-10 {
		width: 83.33333333%;
	}

	.rt-col-md-9 {
		width: 75%;
	}

	.rt-col-md-8 {
		width: 66.66666667%;
	}

	.rt-col-md-7 {
		width: 58.33333333%;
	}

	.rt-col-md-6 {
		width: 50%;
	}

	.rt-col-md-5 {
		width: 41.66666667%;
	}

	.rt-col-md-4 {
		width: 33.33333333%;
	}

	.rt-col-md-3 {
		width: 25%;
	}

	.rt-col-md-2 {
		width: 16.66666667%;
	}

	.rt-col-md-1 {
		width: 8.33333333%;
	}
}

@media (min-width: 1200px) {

	.rt-col-lg-24,
	.rt-col-lg-1,
	.rt-col-lg-2,
	.rt-col-lg-3,
	.rt-col-lg-4,
	.rt-col-lg-5,
	.rt-col-lg-6,
	.rt-col-lg-7,
	.rt-col-lg-8,
	.rt-col-lg-9,
	.rt-col-lg-10,
	.rt-col-lg-11,
	.rt-col-lg-12 {
		float: left;
	}

	.rt-col-lg-24 {
		width: 20%;
	}

	.rt-col-lg-12 {
		width: 100%;
	}

	.rt-col-lg-11 {
		width: 91.66666667%;
	}

	.rt-col-lg-10 {
		width: 83.33333333%;
	}

	.rt-col-lg-9 {
		width: 75%;
	}

	.rt-col-lg-8 {
		width: 66.66666667%;
	}

	.rt-col-lg-7 {
		width: 58.33333333%;
	}

	.rt-col-lg-6 {
		width: 50%;
	}

	.rt-col-lg-5 {
		width: 41.66666667%;
	}

	.rt-col-lg-4 {
		width: 33.33333333%;
	}

	.rt-col-lg-3 {
		width: 25%;
	}

	.rt-col-lg-2 {
		width: 16.66666667%;
	}

	.rt-col-lg-1 {
		width: 8.33333333%;
	}
}

@media (max-width: 991px) {
	.rt-single-testimonial-detail .testimonial {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	.tss-wrapper .single-item-wrapper {
		flex-direction: column;
	}

	.tss-wrapper .item-content-wrapper {
		padding: 20px;
		margin-top: 15px;
	}

	.item-content-wrapper.tss-left {
		order: 2;
	}

	.item-content-wrapper.tss-right {
		order: 1;
	}

	.tss-wrapper .profile-img-wrapper a,
	.tss-wrapper .profile-img-wrapper {
		display: flex;
		justify-content: center;
	}

	/* The layout 10 family is deliberately absent here. This block sits AFTER the
	   layout sections, so `content: none` removed the redesigned bubble's tab on
	   every screen under 768px. */
	.tss-wrapper .item-content-wrapper:after,
	.tss-wrapper .single-item-wrapper:before {
		content: none;
	}

	/* Layout 8 and carousel 8 are deliberately absent here. This block sits AFTER
	   the layout sections, so at the same specificity it beat their own card
	   padding and collapsed it to 5px on every screen under 768px. */

	.tss-wrapper .tss-carousel8 .item-content-wrapper,
	.tss-wrapper .tss-isotope2 .item-content-wrapper {
		margin-top: 0;
	}

	/* Carousel 4 stacks nothing - the portrait stays beside the text at every
	   width - but the column tightens. The container query above already does
	   this whenever the SLIDE is narrow; this is the fallback for browsers
	   without @container. The old `padding: 10px` here belonged to the flat
	   design and would have re-padded the circular portrait. */
	@supports not (container-type: inline-size) {
		.tss-wrapper .tss-carousel4 .single-item-wrapper {
			-ms-grid-columns: 64px 16px 1fr;
			grid-template-columns: 64px minmax(0, 1fr);
			gap: 16px;
		}

		.tss-wrapper .tss-carousel4 .item-content {
			-webkit-line-clamp: 4;
		}

		.tss-wrapper .tss-carousel4 .tss-quote-mark {
			font-size: 32px;
		}
	}

	/* The layout 10 family's avatar position, rating margin and bubble padding used
	   to be re-declared here. They belonged to the old card and, sitting after the
	   layout sections, silently beat the redesigned one — the bubble collapsed to
	   15px of padding under 768px. Its own section now owns all three. */

	/* Carousel 1: no room for arrows beside the track — tuck them inside. */
	/* ---- Carousel arrows on small screens ----------------------------
	   Side arrows have nowhere to go once the track fills the viewport, so
	   they used to sit ON the card - 35px of overlap on carousel 1 at 320px,
	   with the prev arrow half off-screen. Drop them below the track instead,
	   flanking the dots, so the card keeps its full width at every size. */
	/* Dots go on their own line above the arrows. Side by side they collide
	   as soon as there are many slides - 14 dots at 20px each is 280px, wider
	   than the gap between two 40px arrows on a 320px screen. */
	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper {
		padding: 0 0 92px;
	}

	/* Same idea on small screens, where the band stacks a dot row above an
	   arrow row: reserve only the rows that exist. */
	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-arrow)) {
		padding-bottom: 40px;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-arrow)) .swiper-pagination {
		bottom: 12px !important;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-pagination)) {
		padding-bottom: 52px;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .carousel-wrapper:not(:has(.swiper-arrow)):not(:has(.swiper-pagination)) {
		padding-bottom: 0;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow {
		width: 40px;
		height: 40px;
		line-height: 40px;
		top: auto;
		bottom: 0;
		margin-top: 0;
		-webkit-transform: none;
		transform: none;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-pagination {
		bottom: 52px !important;
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:hover {
		-webkit-transform: scale(1.06);
		transform: scale(1.06);
	}

	.tss-wrapper[data-layout*="carousel"]:not([data-layout="carousel11"]):not([data-layout="carousel12"]) .swiper-arrow:active {
		-webkit-transform: scale(0.97);
		transform: scale(0.97);
	}

	.tss-wrapper .tss-carousel3 .single-item-wrapper {
		padding: 26px 22px 24px;
	}

	.tss-wrapper .tss-layout1 .item-content-wrapper {
		padding: 26px;
	}

	.tss-wrapper .tss-layout1 .tss-grid-item {
		margin-bottom: 20px;
	}

	.tss-wrapper .tss-layout3 .single-item-wrapper {
		padding: 26px 22px 24px;
	}

	.tss-wrapper .tss-layout3 .tss-grid-item {
		margin-bottom: 20px;
	}

	/* Isotope 3 breaks where layout 3 breaks — same card, so the same mobile
	   padding and the same gutter. */
	.tss-wrapper .tss-isotope3 .single-item-wrapper {
		padding: 26px 22px 24px;
	}

	.tss-wrapper .tss-isotope3 .tss-grid-item {
		margin-bottom: 20px;
	}

	/* Mobile is the one place the split breaks: the rail goes above the quote and
	   its divider moves with it. The generic mobile rule above also re-pads
	   .item-content-wrapper and adds a top margin, which the card overrides so it
	   still sits flush. */
	.tss-wrapper .tss-layout4 .single-item-wrapper {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.tss-wrapper .tss-layout4 .tss-meta-info {
		border-right: 0;
		border-bottom: 1px solid var(--tss-line, #e7e8ee);
	}

	.tss-wrapper .tss-layout4 .item-content-wrapper {
		padding: 26px 24px 24px;
		margin-top: 0;
	}

	.tss-wrapper .tss-layout4 .tss-grid-item {
		margin-bottom: 20px;
	}
	/* Isotope 2 breaks where layout 4 breaks — the rail goes above the quote and
	   its divider moves with it. The generic mobile rule above also re-pads
	   .item-content-wrapper and adds a top margin, which the card overrides so it
	   still sits flush. */
	.tss-wrapper .tss-isotope2 .single-item-wrapper {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.tss-wrapper .tss-isotope2 .tss-meta-info {
		border-right: 0;
		border-bottom: 1px solid var(--tss-line, #e7e8ee);
	}

	.tss-wrapper .tss-isotope2 .item-content-wrapper {
		padding: 26px 24px 24px;
		margin-top: 0;
	}

	.tss-wrapper .tss-isotope2 .tss-grid-item {
		margin-bottom: 20px;
	}

	.tss-wrapper .tss-pagination {
		margin-top: 36px;
	}

	.tss-wrapper .tss-pagination ul.pagination-list {
		gap: 6px;
	}

	.tss-wrapper .tss-pagination ul.pagination-list li span,
	.tss-wrapper .tss-pagination ul.pagination-list li a {
		min-width: 38px;
		height: 38px;
		border-radius: 10px;
		font-size: 14px;
	}

	/* Carousel 2 card collapses to a single column; the author rail moves below.
	   The container query above already does this whenever the SLIDE is narrow;
	   this is the viewport-level fallback for browsers without @container. */
	.tss-wrapper .tss-carousel2 .single-item-wrapper {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
		/* Let the quote row absorb the slack so the divider - and the author
		   block under it - line up across cards of unequal text length. */
		grid-template-rows: 1fr auto;
	}

	.tss-wrapper .tss-carousel2 .item-content-wrapper {
	/* Generic mobile rules reorder .tss-left and add a top margin; the new
	   split card must keep DOM order (quote first) and sit flush in the card. */
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		order: 0;
		margin-top: 0;
		padding: 26px 24px 22px;
	}

	.tss-wrapper .tss-carousel2 .tss-meta-info {
		border-left: 0;
		border-top: 1px solid var(--tss-line-soft, #ebecf1);
		padding: 22px 20px;
	}

	.tss-wrapper .tss-carousel2 .profile-img-wrapper img {
		width: 72px;
		height: 72px;
	}

	/* Layout 2 card collapses to a single column; the author rail moves below. */
	.tss-wrapper .tss-layout2 .single-item-wrapper {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.tss-wrapper .tss-layout2 .tss-meta-info {
		border-left: 0;
		border-top: 1px solid var(--tss-line, #e7e8ee);
	}

	.tss-wrapper .tss-layout2 .item-content-wrapper {
	/* Generic mobile rules reorder .tss-left and add a top margin; the new
	   split card must keep DOM order (quote first) and sit flush in the card. */
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	margin-top: 0;
		padding: 26px 24px 22px;
	}

	.tss-wrapper .tss-layout2 .tss-grid-item {
		margin-bottom: 20px;
	}

}

/***********************
   Animation for spinners
*******************************/
.rt-animate-spin {
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
	display: inline-block;
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-o-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-ms-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

/*
 * Animation
 */

@-webkit-keyframes ball-clip-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes ball-clip-rotate {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-o-keyframes ball-clip-rotate {
	0% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes ball-clip-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes ball-scale-multiple {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: .75;
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@-moz-keyframes ball-scale-multiple {
	0% {
		opacity: 0;
		-moz-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: .75;
	}

	100% {
		opacity: 0;
		-moz-transform: scale(1);
		transform: scale(1);
	}
}

@-o-keyframes ball-scale-multiple {
	0% {
		opacity: 0;
		-o-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: .75;
	}

	100% {
		opacity: 0;
		-o-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes ball-scale-multiple {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: .75;
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

/* Fix carousel width conflict with portfolio */
.rt-row.tss-carousel1,
.rt-row.tss-carousel2,
.rt-row.tss-carousel3,
.rt-row.tss-carousel4,
.rt-row.tss-carousel5,
.rt-row.tss-carousel6,
.rt-row.tss-carousel7,
.rt-row.tss-carousel8,
.rt-row.tss-carousel9,
.rt-row.tss-carousel10,
.rt-row.tss-carousel11,
.rt-row.tss-carousel12,
.rt-row.carousel_video {
	display: block !important;
}

/* .tss-wrapper .tss-layout10 .tss-grid-item { margin-bottom: 30px } used to live
   here. At the very end of the file it outranked the redesigned layout 10 section
   at equal specificity, so the card spacing could not be changed from there. */

.video-testimonial-wrap {
	float: none;
	clear: both;
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}

.video-testimonial-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* .tss-wrapper .tss-layout5.tss-masonry .tss-grid-item { */
.tss-wrapper .tss-masonry .tss-grid-item {
	margin-bottom: 30px;
}

/* Single page */
.rt-single-testimonial-detail .rating-wrapper span.dashicons {
	color: gold;
}

.rt-single-testimonial-detail .rating-wrapper {
	margin-bottom: 5px;
}

.rt-single-testimonial-detail .testi-meta h2 {
	margin-top: 10px;
	margin-bottom: 5px;
}
.dashicons-twitter{
	width:15px;
	height:15px;
	margin-top: 3px;
}
.dashicons-twitter:before {
	content: "";
	height: 15px;
	-webkit-mask-image: url(../images/twitter-x.svg);
	mask-image: url(../images/twitter-x.svg);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 15px;
	z-index: 1;
	display: block;
	background-color: #000;
}
.rt-single-testimonial-detail .ast-oembed-container {
	margin: 0 0 20px;
}

/*Video Layout Two CSS*/
body .mfp-iframe-holder .mfp-close{
	width: auto;
}
body .mfp-iframe-holder .mfp-close:focus,
body .mfp-iframe-holder .mfp-close:hover{
	background-color: transparent;
	color: #ff0000;
}
.tlp-popup-wrapper .tlp-openPopup .dashicons{
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 45px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	background-color: transparent;
	z-index: 9;
	color: #fff;
}
.tlp-popup-wrapper .item-content{
	margin: 10px 0;
}
.tss-wrapper .tlp-openinline{
	pointer-events: none;
}
.tss-wrapper .tlp-openinline,
.tss-wrapper .tlp-openPopup{
	display: inline-block;
}
.tss-wrapper .tlp-openPopup{
	position: relative;
}
.tss-wrapper .tlp-openPopup:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba( 0,0,0,0.3 );
	left: 0;
	top: 0;
	transition: 0.3s;
}
.tss-wrapper .tlp-openPopup:hover:before{
	background-color: transparent;
}
.tss-wrapper .rt-responsive-img{
	display: block;
}
.tlp-popup-wrapper .tss-meta-info{
	position: relative;
}

.tlp-average-rating{
	text-align: center;
	font-size: 18px;
}
.tlp-average-rating .tlp-rating-title{
	font-size: 24px;
	font-weight: 700;
	display: block;
	margin: 0 0 5px;
}
.dashicons-skype:before,
.dashicons-telegram:before {
	content: "";
	height: 20px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 20px;
	z-index: 1;
	display: block;
	background-color: #000;
}
.dashicons-skype:before {
	-webkit-mask-image: url(../images/skype.svg);
	mask-image: url(../images/skype.svg);
}
.dashicons-telegram:before {
	-webkit-mask-image: url(../images/telegram.svg);
	mask-image: url(../images/telegram.svg);
}
.tss-social-share .share-icons{
	font-weight: 500;
}
.rt-single-testimonial-detail .tss-social-share{
	text-align: right;
}
.rt-single-testimonial-detail iframe{
	width: 100%
}
.tss-wrapper.tss-submit-wrapper input,
.tss-wrapper.tss-submit-wrapper .rt-simple-image-preview{
	cursor: pointer;
}
.tlp-portfolio-block-footer .wp-block-group-is-layout-flex,
.tlp-portfolio-block-header .wp-block-group-is-layout-flex{
	justify-content: space-between;
}
.wp-site-blocks .rt-single-testimonial-detail .profile-img{
	overflow: hidden;
}
/* Quote badges that belong to the testimonial text. Hidden when "Show
   Testimonial" is off, so no .item-content is rendered. The Layout 9 family
   draws its badge on the card's photo; Carousel 11/12 draw theirs on the
   active thumbnail, which sits outside the slide, so they check the whole row.
   A browser without :has() drops these rules and keeps the badge. */
.tss-wrapper .tss-layout9 .single-item-wrapper:not(:has(.item-content)) .profile-img-wrapper:after,
.tss-wrapper .tss-isotope4 .single-item-wrapper:not(:has(.item-content)) .profile-img-wrapper:after,
.tss-wrapper .tss-carousel9 .single-item-wrapper:not(:has(.item-content)) .profile-img-wrapper:after,
.tss-wrapper .tss-carousel11:not(:has(.item-content)) .tss-carousel-thumb .profile-img-wrapper-inner:after,
.tss-wrapper .tss-carousel12:not(:has(.item-content)) .tss-carousel-thumb .profile-img-wrapper-inner:after {
	display: none;
}

/* Image Type (shortcode, Elementor slider). Normal (.tss-img-normal) turns the layouts that
   draw a round photo into soft 16px corners, so Normal never looks like
   Circle; the layouts already designed square or rounded (carousel 1, 2, 5,
   7, 8 and isotope 1) keep their shape. Circle and Square override every
   layout, and Circle comes after Normal so a legacy tss_image_shape=circle
   still wins over the Normal class. Circle also rounds carousel 5's
   ring, a box-shadow drawn on the wrapper around the photo. The
   :not() list skips the video 2 layouts, whose .profile-img-wrapper is the
   video thumbnail rather than an author photo. Carousel 11 / 12 show their
   photos only in the thumbnail strip, outside the slide items that carry the
   class, so they check the whole row. Square also straightens the rings drawn
   on the wrapper (layout 5) and its ::before (layout 9 family); the round
   quote badge on ::after is a separate element and keeps its shape. */
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2):not(.tss-carousel1):not(.tss-carousel2):not(.tss-carousel5):not(.tss-carousel7):not(.tss-carousel8):not(.tss-isotope1) .tss-img-normal .single-item-wrapper .profile-img-wrapper,
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2):not(.tss-carousel1):not(.tss-carousel2):not(.tss-carousel5):not(.tss-carousel7):not(.tss-carousel8):not(.tss-isotope1) .tss-img-normal .single-item-wrapper .profile-img-wrapper:before,
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2):not(.tss-carousel1):not(.tss-carousel2):not(.tss-carousel5):not(.tss-carousel7):not(.tss-carousel8):not(.tss-isotope1) .tss-img-normal .single-item-wrapper .profile-img-wrapper img,
.tss-wrapper .rt-row:has(.tss-img-normal) .tss-carousel-thumb .profile-img-wrapper,
.tss-wrapper .rt-row:has(.tss-img-normal) .tss-carousel-thumb .profile-img-wrapper .profile-img-wrapper-inner,
.tss-wrapper .rt-row:has(.tss-img-normal) .tss-carousel-thumb .profile-img-wrapper img {
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}

.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2) .tss-img-circle .single-item-wrapper .profile-img-wrapper img,
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2).tss-carousel5 .tss-img-circle .single-item-wrapper .profile-img-wrapper {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2) .tss-img-square .single-item-wrapper .profile-img-wrapper,
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2) .tss-img-square .single-item-wrapper .profile-img-wrapper:before,
.tss-wrapper .rt-row:not(.tss-layout_video2):not(.tss-carousel_video2):not(.tss-isotope_video2) .tss-img-square .single-item-wrapper .profile-img-wrapper img,
.tss-wrapper .rt-row:has(.tss-img-square) .tss-carousel-thumb .profile-img-wrapper,
.tss-wrapper .rt-row:has(.tss-img-square) .tss-carousel-thumb .profile-img-wrapper .profile-img-wrapper-inner,
.tss-wrapper .rt-row:has(.tss-img-square) .tss-carousel-thumb .profile-img-wrapper img {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}