/*------------------------------------*\
	#Gallery Carousel
\*------------------------------------*/

* {
	box-sizing: border-box;
}


/* Hide arrows when the slider does NOT have overflow */
.splide .splide__arrow:disabled {
  display: none !important;
}

.pss-cs-gallery__indicators .splide__list {
	justify-content: center;
	margin-top: 20px !important;
}

.splide__list {
	height: auto !important;
}

/* ==========================================================================
   Gallery Global Styles 
   ========================================================================== */

.pss-cs-gallery {
    padding: 0 15px;
    margin: 20px 0;
    clear: both;
}

.pss-cs-title {
	margin: 20px 0;
    padding: 0;
}

.pss-cs-title-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* Matches .pss-cs-info (procedure/provider lines use <small>) */
.pss-cs-procedure-case-heading {
	font-size: smaller;
}

.pss-cs-procedure-case-heading .pss-cs-case-heading__left {
	flex: 1;
	min-width: 0;
}

.pss-cs-procedure-case-heading .pss-cs-case-heading__title {
	margin: 0;
}

.pss-cs-procedure-case-heading .pss-cs-case-heading__left > p {
	margin: 0;
}

.pss-cs-procedure-case-heading .pss-cs-view-more {
	color: #000;
	text-decoration: underline;
}

.pss-cs-procedure-case-heading .pss-cs-view-more:hover,
.pss-cs-procedure-case-heading .pss-cs-view-more:focus {
	color: #000;
	text-decoration: underline;
}

.pss-cs-hr {
    border: 1px solid #f1f1f1;
}

.pss-cs-feature-img {
	max-width: 100%;
	height: auto;
    margin: 0;
}

.pss-cs-description {
	clear: both;
	padding: 15px 0;
}

.pss-cs-description__medium {
	padding: 40px 15px;
	clear: both;
}

.pss-cs-doctor-img {
	border-radius:  50%;
	max-width: 10%;
    margin-right: 20px;
}

.pss-cs-dr-description {
	padding-left: 20px;
	border-left:  10px solid #f1f1f1;
	margin-bottom: 30px;
}

.pss-cs-procedure-description {
	background-color: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	padding: 20px 25px;
	margin-bottom: 25px;
	color: #555;
	line-height: 1.7;
	font-size: 0.95em;
}

.pss-cs-procedure-cta__link {
	display: inline-block;
	margin-top: 10px;
	padding: 12px 28px;
	background-color: #f1f1f1;
	color: #000;
	text-decoration: none;
	border-radius: 5px;
	font-size: 0.95em;
	letter-spacing: 0.03em;
	transition: background-color 0.2s ease;
}

.pss-cs-procedure-cta__link:hover {
	background-color: #e0e0e0;
	color: #000;
}

.pss-cs-procedure-cta__link + .pss-cs-procedure-cta__link {
	margin-left: 10px;
}

.pss-cs-doctor a {
	color: #666;
}

.pss-cs-list {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.pss-cs-gallery__img {
	width: 100%;
    margin: 0;
}

/* Zoom/pan for before/after pairs */
.pss-cs-zoom-wrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Height comes from width:100% + the inline aspect-ratio the layout template
	   emits per before/after pair (the more-portrait image of the pair, matching
	   the admin preview's shared box). No hardcoded ratio here. */
}

/* Base (Match Height OFF): fit the WHOLE image to the frame WIDTH; it renders at
   natural aspect ratio and is centered inside the overflow-clipped frame so the
   pan/zoom transform can reach any part of it. */
.pss-cs-zoom-wrap img {
	width: 100%;
	height: auto;
	max-width: none;
	flex: 0 0 auto;
	transform: translate(calc(var(--pss-pan-x, 0) * 1%), calc(var(--pss-pan-y, 0) * 1%)) scale(var(--pss-zoom, 1));
	transform-origin: center center;
}

/* ==========================================================================
   Pair corner rounding
   A before/after pair reads as ONE rounded rectangle: the BEFORE (left) image
   rounds its two LEFT corners, the AFTER (right) image its two RIGHT corners,
   and the adjoining inner corners stay square. The radius sits on the element
   that CLIPS the image — the zoom-wrap when a zoom/pan transform is active
   (its overflow: hidden previously squared the corners of zoomed images), or
   the img itself when there is no wrap — so the rounding survives zoom/pan.
   Single images (.pss-cs-before-only) round all four corners.
   ========================================================================== */
.pss-cs-pane-before .pss-cs-zoom-wrap,
.pss-cs-pane-before .pss-cs-gallery__img {
	border-radius: 6px 0 0 6px;
}

.pss-cs-pane-after .pss-cs-zoom-wrap,
.pss-cs-pane-after .pss-cs-gallery__img {
	border-radius: 0 6px 6px 0;
}

.pss-cs-before-only .pss-cs-zoom-wrap,
.pss-cs-before-only .pss-cs-gallery__img {
	border-radius: 6px;
}

/* The wrap is the clipping shape; the img inside it must stay square (the
   theme rounds every img by default) or its own rounded corners would show
   INSIDE the pane where the shape should be square. */
.pss-cs-pane-before .pss-cs-zoom-wrap .pss-cs-gallery__img,
.pss-cs-pane-after .pss-cs-zoom-wrap .pss-cs-gallery__img,
.pss-cs-before-only .pss-cs-zoom-wrap .pss-cs-gallery__img {
	border-radius: 0;
}

/* ==========================================================================
   Gallery Next/Previous Links 
   ========================================================================== */

.pss-cs-nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.pss-css-links {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.page-template-default .pss-css-links {
	justify-content: flex-end;
}

/* ==========================================================================
   Gallery Medium 
   ========================================================================== */

.pss-cs-gallery__medium {
	display: flex;
	flex-wrap: wrap;
}

.pss-cs-gallery__medium > li {
	width: 50%;
}

.pss-cs-gallery__medium > li.pss-cs-before-only {
	width: 100%;
	display: block;
}

.pss-cs-flex {
	display: flex;
	flex-wrap: wrap;
}

.pss-cs-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0;
}

/* ==========================================================================
   #Gallery Buttons
   ========================================================================== */

.pss-cs-btn {
	display: inline-block;
	padding: 15px 20px;
	background-color: #f1f1f1;
	text-decoration: none;
	color: #000;
	margin: 15px 0;
	border: 0;
}

/* ==========================================================================
   #Gallery Pagination Numbers
   ========================================================================== */

ul.page-numbers {
	list-style-type: none;
	padding: 0;
	margin: 20px 0;
}

ul.page-numbers > li {
	display: inline-block;
    vertical-align: middle;
}

ul.page-numbers > li > a,
ul.page-numbers > li > span.current {
	padding: 10px 20px;
	display: inline-block;
	background-color: #f1f1f1;
	text-decoration: none;
	color: #000;
	border: 1px solid #ccc;
}

ul.page-numbers > li > span.current {
	background-color: #ccc;
}

/* ==========================================================================
   #Gallery Aside
   ========================================================================== */

   @media (min-width: 991px) {

   	.pss-cs-wrap {
   		display: flex;
   	}

   	.pss-cs-gallery__carousel-aside {
   		width: 80% !important;
   	}

   	.pss-cs-gallery__indicators-aside {
   		width: 20%;
   		margin: 0;
   	}

   	.pss-cs-gallery__indicators-aside .pss-cs-gallery__indicator {
   		width: 100% !important;
   	}

   	.pss-cs-gallery__indicators-aside .splide__list {
   		display: block !important;
   		margin-top: 0 !important;
   		padding-left: 20px !important;
   	}

   }


/* ==========================================================================
   Gallery Dropdown 
   ========================================================================== */

.pss-cs-dropdowns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	position: relative;
}

.pss-cs-gallery__dropdown-provider {
	margin-right: 10px !important;
}

.pss-cs-gallery__dropdown,
.pss-cs-gallery__dropdown-list {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.pss-cs-gallery__dropdown-lists {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    background-color: #fff;
    width: 300px;
    max-height: 400px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, .2);
}

.pss-cs-gallery__dropdown-btn-provider::after,
.pss-cs-gallery__dropdown-btn::after {
    content: " ▾";
}

.pss-cs-gallery__dropdown-title {
	margin-top: 0;
	margin-bottom: 5px;
	font-weight: bold;
}

@media (max-width: 768px) {

	/*
	 * .pss-cs-dropdowns is a flex item inside .pss-css-links; without this it only
	 * stays as wide as the two buttons, so "full width" panels were still narrow.
	 */
	.pss-cs-dropdowns {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Anchor panels to the full dropdown bar so neither column opens off-screen. */
	.pss-cs-gallery__dropdown {
		position: static;
	}

	.pss-cs-gallery__dropdown-lists {
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
}


/* ==========================================================================
   #Grid 
   ========================================================================== */

.pss-cs-container {
	max-width: 1170px;
    margin: 20px auto;
    padding: 0 15px;
}

.pss-cs-container:before, .pss-cs-container:after {
    content: '';
    display: table;
    clear: both;
}

.pss-cs-row {
	margin: 0 -15px;
}

.pss-cs-row:before, .pss-cs-row:after {
    content: '';
    display: table;
    clear: both;
}

.pss-cs-col-1,
.pss-cs-col-2,
.pss-cs-col-3,
.pss-cs-col-4,
.pss-cs-col-5,
.pss-cs-col-6,
.pss-cs-col-7,
.pss-cs-col-8,
.pss-cs-col-9,
.pss-cs-col-10,
.pss-cs-col-11 {
	float: left;
}

.pss-cs-col-1,
.pss-cs-col-2,
.pss-cs-col-3,
.pss-cs-col-4,
.pss-cs-col-5,
.pss-cs-col-6,
.pss-cs-col-7,
.pss-cs-col-8,
.pss-cs-col-9,
.pss-cs-col-10,
.pss-cs-col-11,
.pss-cs-col-12 {
	padding: 0 15px;
}

.pss-cs-col-1 {
    width: 8.33333%;
}
.pss-cs-col-2 {
    width: 16.66667%;
}
.pss-cs-col-3 {
    width: 25%;
}
.pss-cs-col-4 {
    width: 33.33333%;
}
.pss-cs-col-5 {
    width: 41.66667%;
}
.pss-cs-col-6 {
    width: 50%;
}
.pss-cs-col-7 {
    width: 58.33333%;
}
.pss-cs-col-8 {
    width: 66.66667%;
}
.pss-cs-col-9 {
    width: 75%;
}
.pss-cs-col-10 {
    width: 83.33333%;
}
.pss-cs-col-11 {
    width: 91.66667%;
}

@media(max-width: 768px) {
	.pss-cs-col-12 {
		width: 100%;
	}
}

/* ==========================================================================
   #Grid Reset
   ========================================================================== */

.pss-cs-reset {
	margin: 0;
}

.pss-cs-reset > [class*="pss-cs-"] {
	padding: 0;
}

/* Ensure row uses flexbox for equal height columns */
.pss-cs-row.pss-cs-reset {
	display: flex;
	align-items: stretch;
}

/* Make image containers equal height with fixed height */
.pss-cs-row.pss-cs-reset .pss-cs-col-6 {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Match Height
   ========================================================================== */

/* Main carousel pairs: make images fill column height */
.pss-cs-match-height .pss-cs-col-6 img {
    height: 100%;
    object-fit: cover;
}

/* Medium layout: per-li match height (flex row already equalizes heights) */
li.pss-cs-match-height {
    overflow: hidden;
}

li.pss-cs-match-height a {
    display: block;
    height: 100%;
}

li.pss-cs-match-height img {
    height: 100%;
    object-fit: cover;
}

/* Thumbnails always match height */
.pss-cs-gallery__indicator .pss-cs-col-6 img {
    height: 100%;
    object-fit: cover;
}

/* Uniform aspect ratio — applies to all images in a case */
.pss-cs-uniform-ratio .pss-cs-gallery__img {
    aspect-ratio: var(--pss-aspect-ratio);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Match Height ON: fit the WHOLE zoom-wrapped image to the frame HEIGHT instead
   of its width. Before & after end up equal height; a landscape image overflows
   the frame width and is clipped by the frame's overflow:hidden but stays
   pannable. This wins over the base fit-to-width rule and over the
   .pss-cs-match-height .pss-cs-col-6 img cover fill above (width:auto renders at
   natural aspect, so any leaked object-fit is a no-op). Thumbnails inside a
   match-height item inherit this same fit-to-height model. */
.pss-cs-match-height .pss-cs-zoom-wrap img {
    width: auto;
    height: 100%;
    max-width: none;
}

/* Center single before-only image when no after image exists */
.pss-cs-before-only {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.pss-cs-before-only .pss-cs-gallery__img {
	width: auto;
	max-width: 100%;
}