/*------------------------------------*\
	#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;
}

/* Uniform aspect ratio fully controls sizing (as in 4.1.1); the fill-height model must not
   fight the forced ratio for uniform-ratio + pan/zoom cases. This is the DEFAULT (legacy)
   model: the image is object-fit: cover-cropped to the forced ratio (cover + aspect-ratio
   inherited from .pss-cs-uniform-ratio .pss-cs-gallery__img). Existing cases keep this
   untouched so a plugin update never re-frames the client's saved pan/zoom — the
   .pss-cs-render-whole override below applies ONLY to cases re-saved after the whole-image
   update. */
.pss-cs-uniform-ratio .pss-cs-zoom-wrap img {
	width: 100%;
	height: auto;
}

/* Whole-image render model — GATED. Only galleries whose case was re-saved after the
   whole-image update carry .pss-cs-render-whole (written on save as _pss_gallery_render_whole
   and echoed onto the element that also holds .pss-cs-uniform-ratio + --pss-aspect-ratio).
   For those, the viewport (zoom-wrap) takes the forced ratio while the IMAGE loads WHOLE
   (natural aspect, fit to one dimension, overflow-clipped and PANNABLE) exactly like the
   non-uniform pairs — so pan/zoom reaches every part of the image and the admin preview
   matches. cover would permanently discard the cropped-off edges; forcing the ratio on the
   img would blow up the fit — both neutralized here. Un-flagged (existing) cases are
   unaffected, so the client never has to re-adjust anything on a plain update. */
.pss-cs-render-whole .pss-cs-zoom-wrap {
	aspect-ratio: var(--pss-aspect-ratio);
}

.pss-cs-render-whole .pss-cs-zoom-wrap img {
	aspect-ratio: auto;
	object-fit: fill;
}

/* Whole-image + Match Height: fit the image to the viewport HEIGHT (the default uniform
   width:100% rule above wins the equal-specificity tie otherwise). match-height sits on the
   pair element in large/aside/medium (so it's a descendant of .pss-cs-render-whole) and on
   the same row as .pss-cs-render-whole in default (compound) — cover both forms. */
.pss-cs-render-whole .pss-cs-match-height .pss-cs-zoom-wrap img,
.pss-cs-render-whole.pss-cs-match-height .pss-cs-zoom-wrap img {
	width: auto;
	height: 100%;
}

/* Nav-thumbnail strip: on whole-image (render-whole) cases the thumbnails MIRROR their main
   slide. The gated rules above already give each thumbnail image the whole-image, forced-ratio
   viewport (same box + same saved zoom/pan transform as the main); here we pin the fit so the
   thumbnail shows the SAME framing as the main slide instead of a tighter cover crop. Default
   is fit-to-width (mirrors a non-match-height main); .pss-cs-thumb-mh — tagged on the thumb row
   per slide when that slide is match-height — switches to fit-to-height, exactly like the main.
   Explicit width/height override the indicator cover rule (.pss-cs-gallery__indicator
   .pss-cs-col-6 img) without distortion. Un-flagged (cover) thumbnails don't carry
   render-whole and are untouched. */
.pss-cs-render-whole .pss-cs-gallery__indicators .pss-cs-zoom-wrap img {
	aspect-ratio: auto;
	object-fit: fill;
	width: 100%;
	height: auto;
}

.pss-cs-render-whole .pss-cs-gallery__indicators .pss-cs-thumb-mh .pss-cs-zoom-wrap img {
	width: auto;
	height: 100%;
}

/* 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%;
}