/*
 * Shaheen Medicare - custom front-end styles
 * ------------------------------------------------------------------
 * Lives in the child theme so the Medibazar parent theme and the
 * Medibazar Core plugin stay untouched and safe to update.
 *
 *  1. Homepage hero (main promo banner + two secondary boxes)
 *  2. Featured Promotion section
 *  3. Footer layout
 *
 * Sizing uses clamp()/vw so it scales with the viewport instead of
 * being pinned to one screen resolution.
 */


/* ==================================================================
   1. HOMEPAGE HERO
   ================================================================== */

/* --- Main promotional banner ------------------------------------- */
.shm-hero .banners-active .banner-img img {
	display: block;
	width: 100%;
	height: clamp(220px, 27vw, 400px);
	object-fit: cover;
	object-position: center;
}

/* --- The two secondary promotional boxes ------------------------- */
.shm-hero-side .banner-wrapper .banner-img img {
	display: block;
	width: 100%;
	height: clamp(120px, 12.6vw, 188px);
	object-fit: cover;
	object-position: center;
}

/* Space the two secondary boxes evenly against the main banner */
.shm-hero-side > .elementor-widget-wrap {
	align-content: space-between;
}

/* --- Overlay copy, rescaled to the reduced banner height ---------- */
.shm-hero .banner-content {
	top: 14%;
	right: 4%;
}

.shm-hero .banner-content span {
	font-size: clamp(18px, 2.1vw, 30px);
	line-height: 1.35;
}

.shm-hero .banner-content h2 {
	font-size: clamp(28px, 3.6vw, 52px);
	line-height: 1.08;
	margin-bottom: 8px;
}

.shm-hero .banner-content p {
	font-size: clamp(13px, 1.15vw, 16px);
	line-height: 1.6;
	margin-bottom: 18px;
	max-width: 34ch;
}

.shm-hero .banner-content .c-btn {
	padding: 14px 34px;
}

.shm-hero-side .banner-text {
	top: clamp(14px, 1.6vw, 24px);
	left: clamp(15px, 1.7vw, 26px);
	right: clamp(15px, 1.7vw, 26px);
}

.shm-hero-side .banner-text span {
	font-size: clamp(14px, 1.35vw, 19px);
}

.shm-hero-side .banner-text h2 {
	font-size: clamp(18px, 1.95vw, 28px);
	line-height: 1.2;
	margin-top: 4px;
	margin-bottom: clamp(8px, 1vw, 14px);
}

/* Keep the heading clear of the product photo on the right */
.shm-hero-side .banner-text span,
.shm-hero-side .banner-text h2 {
	max-width: 62%;
}

.shm-hero-side .banner-text h2 {
	text-wrap: balance;
}

/* --- Category banner row -----------------------------------------
   Deliberately left at its native proportions. These cards are composed
   with the heading over empty space at the top and the product at the
   bottom, so forcing a shorter height crops one into the other. Left as
   designed rather than damaged. */

/* Pagination dots: reposition, and hide when there is only one slide */
.shm-hero .banners-active .slick-dots {
	bottom: 20px;
	left: clamp(15px, 2.8vw, 40px);
}

.shm-hero .banners-active .slick-dots li:only-child {
	display: none;
}

/* --- Tablet ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

	/* Elementor stacks the hero columns here, so sit the two secondary
	   boxes side by side instead of one above the other. */
	.shm-hero-side > .elementor-widget-wrap {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 20px;
	}

	.shm-hero-side > .elementor-widget-wrap > .elementor-element {
		width: calc(50% - 10px);
	}

	/* At this width the banners already fit comfortably, so let them keep
	   their natural proportions instead of cropping them. */
	.shm-hero .banners-active .banner-img img,
	.shm-hero-side .banner-wrapper .banner-img img {
		height: auto;
	}

	.shm-hero .banner-content h2 {
		font-size: clamp(30px, 4.4vw, 44px);
	}
}

/* --- Mobile ------------------------------------------------------- */
@media (max-width: 767px) {

	/* Natural proportions on phones: the banners are already small here,
	   and cropping them would cut into the product shots. */
	.shm-hero .banners-active .banner-img img,
	.shm-hero-side .banner-wrapper .banner-img img {
		height: auto;
	}

	/* The banner is short on phones and the product shot fills its right
	   half, so keep the wording in the left column and scale it down. */
	.shm-hero .banner-content {
		top: 10%;
		left: 15px;
		max-width: 56%;
	}

	.shm-hero .banner-content span {
		font-size: 14px;
		line-height: 1.3;
	}

	.shm-hero .banner-content h2 {
		font-size: 20px;
		line-height: 1.15;
		margin-bottom: 6px;
	}

	.shm-hero .banner-content p {
		display: none; /* keep the small banner legible: heading + CTA only */
	}

	.shm-hero .banner-content .c-btn {
		padding: 9px 18px;
		font-size: 12px;
	}

	.shm-hero-side .banner-wrapper + .banner-wrapper,
	.shm-hero-side > .elementor-widget-wrap > .elementor-element + .elementor-element {
		margin-top: 18px;
	}
}


/* ==================================================================
   2. FEATURED PROMOTION
   ================================================================== */

/* Promotional image: never stretched, never upscaled past its size */
.shm-featured-promotion .deal-img {
	text-align: center;
}

.shm-featured-promotion .deal-img img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: clamp(190px, 26vw, 330px);
	object-fit: contain;
	margin: 0 auto;
	/* the source image carries its own light background, so present it as a
	   deliberate card rather than a floating rectangle */
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Countdown is removed server-side when no end date is set; this is a
   belt-and-braces guard so an empty timer can never take up space. */
.shm-featured-promotion .deal-count:empty,
.shm-featured-promotion .deal-time:empty {
	display: none;
}

/* Drop the price line entirely when no price is configured */
.shm-featured-promotion .deal-content span:empty {
	display: none;
}

@media (max-width: 991px) {
	.shm-featured-promotion .deal-bg {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* ==================================================================
   3. FOOTER
   ================================================================== */

.footer-area > .container > .row {
	display: flex;
	flex-wrap: wrap;
}

/* --- Desktop: three balanced columns, Contact Us widest --------- */
@media (min-width: 1200px) {

	.footer-area > .container > .row > [class*="col-"] {
		padding-right: 28px;
	}

	.footer-area > .container > .row > [class*="col-"]:nth-child(1) {
		flex: 0 0 34%;
		max-width: 34%;
	}

	.footer-area > .container > .row > [class*="col-"]:nth-child(2) {
		flex: 0 0 24%;
		max-width: 24%;
	}

	.footer-area > .container > .row > [class*="col-"]:nth-child(3) {
		flex: 0 0 42%;
		max-width: 42%;
	}

	.footer-area > .container > .row > [class*="col-"]:nth-child(4) {
		flex: 0 0 42%;
		max-width: 42%;
		padding-right: 0;
	}
}

/* --- Tablet: two balanced columns --------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

	.footer-area > .container > .row > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 34px;
		padding-right: 28px;
	}
}

/* --- Mobile: clean single-column stack ---------------------------- */
@media (max-width: 767px) {

	.footer-area > .container > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 30px;
	}

	.footer-area > .container > .row > [class*="col-"]:last-child {
		margin-bottom: 0;
	}
}

/* --- Contact Us: readable address, email and phone ---------------- */
.footer-area .contacts-info .phone-footer {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.footer-area .contacts-info .phone-footer i {
	flex: 0 0 auto;
	margin-top: 0;
}

.footer-area .contacts-info .phone-footer p {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	/* centre the first line of text against the 45px icon circle */
	padding-top: calc((45px - 1.7em) / 2);
	max-width: 42ch;
	line-height: 1.7;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

/* Long email addresses stay on the line rather than overflowing */
.footer-area .contacts-info .phone-footer p a[href^="mailto:"],
.footer-area .contacts-info .phone-footer p a[href^="tel:"] {
	overflow-wrap: anywhere;
}

/* Never split a phone number across two lines */
.footer-area .contacts-info .phone-footer:nth-child(2) p {
	white-space: nowrap;
}

@media (max-width: 400px) {
	.footer-area .contacts-info .phone-footer:nth-child(2) p {
		white-space: normal;
	}
}

/* Comfortable breathing room between the footer blocks */
.footer-area .footer-text p {
	max-width: 46ch;
	line-height: 1.75;
}

/* ==================================================================
   4. FEATURED PRODUCTS GRID
   Cards are sized by the grid, not by each photo's own proportions, so
   every tile matches. Product images are never cropped or stretched -
   they are fitted inside a fixed square with object-fit: contain.
   ================================================================== */

/* Let each card fill the full height of its grid cell. Scoped to the product
   row: the heading row above it (.row.mb-30) must stay a normal block so the
   "View All Products" link can align to the right edge. */
.shm-product-grid .product-area .row:not(.mb-30) > [class*="col-"] {
	display: flex;
}

.shm-product-grid .product-03-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Identical image box on every card, whatever the photo's shape */
.shm-product-grid .product-02-img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.shm-product-grid .product-02-img > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.shm-product-grid .product-02-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(8px, 1.2vw, 18px);
}

/* Push the text block to the bottom so prices line up across a row */
.shm-product-grid .product-text {
	margin-top: auto;
}

/* Two lines for the product name keeps every card the same height */
.shm-product-grid .product-text h4 {
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.4;
	min-height: 2.8em;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "View All Products" sits in a Bootstrap 4 'text-md-right' wrapper, a class
   this build of the framework no longer honours, so the link was stranded in
   the middle of the row. Align it to the right edge of the product grid. */
@media (min-width: 768px) {
	.shm-product-grid .product-area .b-button.shop-btn {
		width: 100%;
		text-align: right;
	}

	/* inline-block so the underline hugs the words rather than the whole row */
	.shm-product-grid .product-area .b-button.shop-btn > a {
		display: inline-block;
	}
}

/* The back-to-top button is fixed 77px from the bottom, which lands it on the
   seam between the red footer and the white copyright strip (80px tall). Being
   the same red, it read as a bump in that edge. Lift it clear of the seam. */
#scrollUp {
	bottom: 104px;
}

@media (max-width: 767px) {
	#scrollUp {
		bottom: 88px;
	}
}

/* ==================================================================
   5. FOOTER REFINEMENTS
   ================================================================== */

/* The theme indents some footer widgets with ml-30 / ml-50 utility classes
   sized for its original five-column layout. The column widths above own the
   spacing now, so every column starts flush. */
.footer-area .footer-wrapper {
	margin-left: 0;
}

/* Contact Us takes its own full-width row on tablet rather than sitting in a
   half-empty third slot. */
@media (min-width: 768px) and (max-width: 1199px) {
	.footer-area > .container > .row > [class*="col-"]:nth-child(3) {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Footer menu links are display:inline with 15px of padding reserved for their
   bullet, so a wrapped second line fell back under the bullet instead of
   lining up with the first line. inline-block gives the link a hanging
   indent, so every line starts at the same place. */
.footer-area .widget_nav_menu .menu li a {
	display: inline-block;
}

/* Four social icons needed 208px but had only 207px, so the fourth wrapped
   onto a line of its own. Lay them out as one non-wrapping row. */
.footer-area .footer-icon {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
}

.footer-area .footer-icon a {
	margin-right: 0;
	flex: 0 0 auto;
}

/* ==================================================================
   6. SHOP PRODUCT GRID
   The theme prints Bootstrap column classes on each card (and carries a
   typo, "cl-lg-" instead of "col-lg-", so the large breakpoint never
   applied). Rather than patch those classes, the loop is laid out as a
   CSS grid, which guarantees identical column widths at every size.
   ================================================================== */

.pro-ful-tab .product-tab-content > .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 768px) {
	.pro-ful-tab .product-tab-content > .row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
	}
}

@media (min-width: 1200px) {
	.pro-ful-tab .product-tab-content > .row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

/* Neutralise the Bootstrap column classes the theme prints on each card */
.pro-ful-tab .product-tab-content > .row > .klb-product {
	display: flex;
	width: auto;
	max-width: none;
	flex: none;
	padding-left: 0;
	padding-right: 0;
}

/* Every card fills its cell, so a row is always level */
.pro-ful-tab .product-tab-content .product-03-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 0;
	padding: 34px 10px 20px;
}

/* Identical image area on every card. contain (not cover) keeps the whole
   manually uploaded product photo visible - nothing is cropped, and a
   portrait bottle and a square box produce the same card height. */
.pro-ful-tab .product-tab-content .product-02-img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.pro-ful-tab .product-tab-content .product-02-img > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.pro-ful-tab .product-tab-content .product-02-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(6px, 1.2vw, 18px);
}

/* Sale badge pinned to the same corner on every card */
.pro-ful-tab .product-tab-content .badge-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	margin: 0;
}

/* Title block sits at the bottom, so prices line up across a row */
.pro-ful-tab .product-tab-content .product-text {
	margin-top: auto;
	padding-top: 16px;
}

.pro-ful-tab .product-tab-content .product-text h4 {
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 1.4;
	min-height: 2.8em;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pro-ful-tab .product-tab-content .product-text .price,
.pro-ful-tab .product-tab-content .product-text del,
.pro-ful-tab .product-tab-content .product-text ins {
	font-size: clamp(12px, 0.95vw, 15px);
}

/* Very narrow phones: keep two usable cards per row, nothing overflowing */
@media (max-width: 420px) {
	.pro-ful-tab .product-tab-content > .row {
		gap: 10px;
	}

	.pro-ful-tab .product-tab-content .product-03-wrapper {
		padding: 26px 6px 14px;
	}

	.pro-ful-tab .product-tab-content .product-text h4 {
		font-size: 12px;
	}
}


/* ==================================================================
   7. SHOP SEARCH BAR
   ================================================================== */

.shm-shop-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.shm-shop-search__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.shm-shop-search__field input[type="search"] {
	width: 100%;
	height: 48px;
	padding: 0 46px 0 18px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	line-height: 48px;
	color: #333;
	appearance: none;
	-webkit-appearance: none;
}

.shm-shop-search__field input[type="search"]:focus {
	outline: none;
	border-color: #dd3333;
	box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.12);
}

.shm-shop-search__field input[type="search"]::placeholder {
	color: #9b9b9b;
	opacity: 1;
}

/* hide the browser's own clear widget; the theme provides its own */
.shm-shop-search__field input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.shm-shop-search__submit {
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: #dd3333;
	font-size: 16px;
	cursor: pointer;
	line-height: 48px;
}

.shm-shop-search__submit:hover {
	color: #c73838;
}

.shm-shop-search__clear {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 16px;
	border-radius: 6px;
	background: #f4f4f4;
	color: #555;
	font-size: 14px;
	line-height: 48px;
	white-space: nowrap;
	transition: 0.2s;
}

.shm-shop-search__clear:hover {
	background: #dd3333;
	color: #fff;
}

.shm-shop-search__count {
	margin: -10px 0 18px;
	font-size: 14px;
	color: #6b6b6b;
}

@media (max-width: 575px) {
	.shm-shop-search__field input[type="search"],
	.shm-shop-search__submit,
	.shm-shop-search__clear {
		height: 44px;
		line-height: 44px;
	}

	.shm-shop-search__clear {
		padding: 0 12px;
	}
}

/* ==================================================================
   8. SHOP CATEGORY SIDEBAR - NESTED CATEGORIES
   The expand toggle is an inline span that follows the link, so a long
   parent name such as Beauty & Personal Care ran straight into it. Pin
   the toggle to the right edge and keep the label clear of it.
   ================================================================== */

.shop1-sidebar ul.product-categories li.cat-parent {
	position: relative;
}

.shop1-sidebar ul.product-categories li.cat-parent > a {
	display: inline-block;
	padding-right: 26px;
}

.shop1-sidebar ul.product-categories .subDropdown {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1.6;
	cursor: pointer;
}

/* Indent the nested list so the hierarchy reads clearly */
.shop1-sidebar ul.product-categories ul.children {
	padding-left: 16px;
	margin-top: 8px;
}

/* ==================================================================
   9. PRODUCT CARD HOVER
   Applied to both the Shop grid and the homepage Featured Products
   grid so the two behave identically. The image box already has
   overflow:hidden, so the zoom is clipped neatly by the card.
   ================================================================== */

.pro-ful-tab .product-tab-content .product-03-wrapper,
.shm-product-grid .product-03-wrapper {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pro-ful-tab .product-tab-content .product-03-wrapper:hover,
.shm-product-grid .product-03-wrapper:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
}

.pro-ful-tab .product-tab-content .product-02-img img,
.shm-product-grid .product-02-img img {
	transition: transform 0.45s ease;
}

.pro-ful-tab .product-tab-content .product-03-wrapper:hover .product-02-img img,
.shm-product-grid .product-03-wrapper:hover .product-02-img img {
	transform: scale(1.08);
}

/* Respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

	.pro-ful-tab .product-tab-content .product-03-wrapper,
	.shm-product-grid .product-03-wrapper,
	.pro-ful-tab .product-tab-content .product-02-img img,
	.shm-product-grid .product-02-img img {
		transition: none;
	}

	.pro-ful-tab .product-tab-content .product-03-wrapper:hover,
	.shm-product-grid .product-03-wrapper:hover,
	.pro-ful-tab .product-tab-content .product-03-wrapper:hover .product-02-img img,
	.shm-product-grid .product-03-wrapper:hover .product-02-img img {
		transform: none;
	}
}

/* ==================================================================
   10. CLINIC PAGE
   ================================================================== */

/* --- Service cards ------------------------------------------------
   The cards can now show a Font Awesome icon in place of an image
   (Font Awesome 5 Pro ships with the theme), so the four services
   read as one set instead of four unrelated stock graphics. */
.shm-services .feature-02-icon i,
.shm-services .p-feature-icon i {
	display: inline-block;
	font-size: clamp(36px, 3.2vw, 50px);
	line-height: 1;
	color: #dd3333;
}

.shm-services .row > [class*="col-"] {
	display: flex;
}

.shm-services .feature-02-wrapper,
.shm-services .product-feature-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.shm-services .p-feature-text {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Reserve two lines for the service name so the descriptions line up */
.shm-services .p-feature-text h3 {
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.35;
	min-height: 2.7em;
}

.shm-services .p-feature-text p {
	flex: 1 1 auto;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.7;
}

/* --- Statistics ---------------------------------------------------
   Counters with no trustworthy value are removed server-side, so the
   row simply centres whatever remains rather than leaving a gap. */
.shm-counters .counter-wrapper {
	padding: 10px 6px;
}

.shm-counters .counter-text h2 {
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1.1;
}

.shm-counters .counter-text span {
	display: block;
	font-size: clamp(12px, 1.05vw, 15px);
	line-height: 1.5;
	word-break: normal;
	overflow-wrap: break-word;
}

@media (max-width: 575px) {
	.shm-counters .counter-icon i {
		font-size: 30px;
	}
}

/* --- Doctors ------------------------------------------------------ */
.shm-doctors {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 26px;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 576px) {
	.shm-doctors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.shm-doctors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Neutralise the Bootstrap column classes so the grid controls width */
.shm-doctors > .shm-doctor {
	display: flex;
	width: auto;
	max-width: none;
	flex: none;
	padding-left: 0;
	padding-right: 0;
}

.shm-doctors .team-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Every portrait occupies the same frame, whatever its source size */
.shm-doctors .team-img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f3f3f3;
}

.shm-doctors .team-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Placeholder frame when a doctor has no photograph yet */
.shm-doctors .shm-doctor-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #c9c9c9;
	font-size: 54px;
}

.shm-doctors .inner-team {
	flex: 1 1 auto;
}

.shm-doctors .team-text h4 {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.35;
	margin-bottom: 4px;
}

.shm-doctors .team-text span {
	display: block;
	font-size: clamp(12px, 1.05vw, 14px);
	color: #dd3333;
}

.shm-doctors .team-text p {
	margin-top: 10px;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.7;
}

/* Editor-only prompt shown while no doctors have been added */
.shm-doctors-empty {
	margin: 0;
	padding: 22px 24px;
	border: 1px dashed #d8d8d8;
	border-radius: 8px;
	background: #fafafa;
	color: #666;
	font-size: 15px;
	text-align: center;
}

/* --- Mission image ------------------------------------------------ */
.about-img img {
	max-width: 100%;
	height: auto;
}
/* A block that is switched off, or a counter with no trustworthy value,
   leaves a marker instead of rendering. Collapse its Elementor column so the
   remaining items close up rather than sitting beside empty quarters, and
   centre whatever is left. Browsers without :has() simply keep the columns. */
.shm-counters .elementor-column:has(.shm-block-hidden),
.shm-services .elementor-column:has(.shm-block-hidden) {
	display: none;
}

.shm-counters > .elementor-container,
.shm-counters .elementor-container,
.shm-services > .elementor-container,
.shm-services .elementor-container {
	justify-content: center;
}

.shm-block-hidden {
	display: none !important;
}
/* Four service cards squeeze to about 158px each on a tablet, which forced
   the titles onto three lines and left the cards uneven. Two-up reads better
   at that width, and a full-height wrapper keeps every card level. */
@media (min-width: 576px) and (max-width: 991px) {
	.shm-services .elementor-column {
		width: 50%;
	}
}

/* service cards two-up on tablet - equal heights at every width */
.shm-services .elementor-column > .elementor-widget-wrap {
	height: 100%;
}

.shm-services .elementor-column > .elementor-widget-wrap > .elementor-element {
	width: 100%;
	height: 100%;
}

.shm-services .elementor-widget-container {
	height: 100%;
}

.shm-services .feature-02-wrapper,
.shm-services .product-feature-wrapper {
	height: 100%;
}