/* ==========================================================================
   Healthcare DME — Site-wide redesign layer
   --------------------------------------------------------------------------
   Restyles the markup Avada already outputs: header, menus, dropdowns, footer,
   cards, sliders, tables, pagination. Structural template work lives elsewhere;
   this file is what makes every page look like one designed system instead of
   an accumulation.

   Scoped under .hdme-scope so it wins against Avada's defaults on specificity
   rather than with !important. !important appears only where Avada writes an
   inline style, which cannot be beaten any other way.
   ========================================================================== */

/* ==========================================================================
   1. Page shell
   ========================================================================== */

.hdme-scope {
	background: var(--hdme-page-bg);
	-webkit-font-smoothing: antialiased;
}

.hdme-scope #main,
.hdme-scope .fusion-content-wrapper {
	background: var(--hdme-page-bg);
}

/* Consistent vertical rhythm between sections, replacing the ad-hoc padding
   values currently set per Fusion container. */
.hdme-scope .fusion-fullwidth {
	padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem) !important;
}
.hdme-scope .fusion-fullwidth.fusion-equal-height-columns {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) !important;
}

/* ==========================================================================
   2. Header
   A medical supplier's header has one job: make search, phone and cart
   findable. This flattens Avada's stacked bars into a calmer, denser header
   and makes the sticky state unobtrusive.
   ========================================================================== */

.hdme-scope .fusion-header-wrapper {
	box-shadow: var(--hdme-shadow-sm);
}

.hdme-scope .fusion-header,
.hdme-scope .fusion-secondary-header {
	background: var(--hdme-surface);
	border-bottom: 1px solid var(--hdme-border);
}

/* Contact strip above the logo — quieter, but still legible. */
.hdme-scope .fusion-secondary-header {
	background: var(--hdme-blue-700);
	border-bottom: 0;
	font-size: var(--hdme-text-sm);
}
.hdme-scope .fusion-secondary-header,
.hdme-scope .fusion-secondary-header a,
.hdme-scope .fusion-secondary-header .fusion-contact-info {
	color: rgba(255, 255, 255, 0.92);
}
.hdme-scope .fusion-secondary-header a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdme-scope .fusion-sticky-shadow,
.hdme-scope .fusion-is-sticky .fusion-header {
	box-shadow: var(--hdme-shadow);
}

.hdme-scope .fusion-logo img {
	max-height: 62px;
	width: auto;
}

/* ==========================================================================
   3. Main menu + dropdowns
   The current dropdowns are plain lists on a flat panel. These give them a
   card treatment, real spacing, and a hover state that reads as interactive.
   ========================================================================== */

.hdme-scope .fusion-main-menu > ul > li > a {
	min-height: var(--hdme-tap-min);
	padding-inline: var(--hdme-space-4);
	font-size: var(--hdme-text-base);
	font-weight: var(--hdme-weight-medium);
	color: var(--hdme-grey-800);
	border-radius: var(--hdme-radius);
	transition: color var(--hdme-transition), background-color var(--hdme-transition);
}
.hdme-scope .fusion-main-menu > ul > li > a:hover,
.hdme-scope .fusion-main-menu > ul > li.current-menu-item > a {
	color: var(--hdme-blue-700);
	background: var(--hdme-blue-50);
}

/* Avada draws the active-item highlight as a hard bar; soften it. */
.hdme-scope .fusion-main-menu .fusion-menu-highlight-bar,
.hdme-scope .fusion-main-menu > ul > li > a::after {
	border-radius: var(--hdme-radius-pill);
}

.hdme-scope .fusion-main-menu .sub-menu,
.hdme-scope .fusion-megamenu-wrapper {
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	box-shadow: var(--hdme-shadow-lg);
	padding: var(--hdme-space-3);
	overflow: hidden;
}

.hdme-scope .fusion-main-menu .sub-menu li a,
.hdme-scope .fusion-megamenu-wrapper .sub-menu li a {
	min-height: var(--hdme-tap-min);
	display: flex;
	align-items: center;
	padding: var(--hdme-space-2) var(--hdme-space-3);
	border-radius: var(--hdme-radius);
	font-size: var(--hdme-text-sm);
	line-height: var(--hdme-leading-snug);
	color: var(--hdme-grey-700);
	border-bottom: 0;
}
.hdme-scope .fusion-main-menu .sub-menu li a:hover,
.hdme-scope .fusion-megamenu-wrapper .sub-menu li a:hover {
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-700);
}

/* Mega-menu column headings */
.hdme-scope .fusion-megamenu-title,
.hdme-scope .fusion-megamenu-title a {
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hdme-grey-500);
}

/* Mobile menu */
.hdme-scope .fusion-mobile-nav-holder li a {
	min-height: var(--hdme-tap-min);
	display: flex;
	align-items: center;
	font-size: var(--hdme-text-base);
	padding-block: var(--hdme-space-3);
	border-bottom: 1px solid var(--hdme-border);
}
.hdme-scope .fusion-mobile-menu-icons a {
	min-width: var(--hdme-tap-min);
	min-height: var(--hdme-tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   4. Product cards
   The biggest single visual win: the shop and every category page is a grid
   of these. Equal heights, a real hover state, and the price given weight.
   ========================================================================== */

.hdme-scope .products .product,
.hdme-scope .fusion-post-cards .fusion-layout-column {
	height: 100%;
}

.hdme-scope ul.products li.product {
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	padding: var(--hdme-space-4);
	transition: border-color var(--hdme-transition), box-shadow var(--hdme-transition), transform var(--hdme-transition);
}
.hdme-scope ul.products li.product:hover {
	border-color: var(--hdme-blue-300);
	box-shadow: var(--hdme-shadow);
	transform: translateY(-2px);
}

.hdme-scope ul.products li.product img {
	border-radius: var(--hdme-radius);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--hdme-grey-25);
	mix-blend-mode: multiply;   /* product photos are shot on white */
}

.hdme-scope ul.products li.product .product-title,
.hdme-scope ul.products li.product h3,
.hdme-scope ul.products li.product .fusion-post-card-title {
	font-size: var(--hdme-text-base);
	font-weight: var(--hdme-weight-medium);
	line-height: var(--hdme-leading-snug);
	color: var(--hdme-grey-800);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hdme-scope ul.products li.product .price {
	margin-top: auto;
	padding-top: var(--hdme-space-3);
	font-size: var(--hdme-text-lg);
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
}
.hdme-scope ul.products li.product .price del { color: var(--hdme-text-muted); font-weight: var(--hdme-weight-normal); }
.hdme-scope ul.products li.product .price ins { text-decoration: none; color: var(--hdme-danger); }

.hdme-scope .onsale,
.hdme-scope .fusion-onsale {
	background: var(--hdme-danger);
	color: #fff;
	border-radius: var(--hdme-radius-pill);
	padding: var(--hdme-space-1) var(--hdme-space-3);
	font-size: var(--hdme-text-xs);
	font-weight: var(--hdme-weight-bold);
	letter-spacing: 0.02em;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
}

/* Grid density per breakpoint — 1 up on a phone reads better than 2 cramped. */
@media (max-width: 479px) {
	.hdme-scope ul.products { display: grid; grid-template-columns: 1fr; gap: var(--hdme-space-4); }
	.hdme-scope ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
	.hdme-scope ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hdme-space-4); }
	.hdme-scope ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }
}

/* ==========================================================================
   5. Single product
   ========================================================================== */

.hdme-scope .single-product div.product .product_title,
.hdme-scope .single-product h1.hdme-page-title {
	font-size: var(--hdme-text-2xl);
	line-height: var(--hdme-leading-tight);
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
}

.hdme-scope .single-product .price,
.hdme-scope .woocommerce-Price-amount.amount {
	font-size: var(--hdme-text-xl);
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
}

.hdme-scope .woocommerce-product-gallery img {
	border-radius: var(--hdme-radius-lg);
	background: var(--hdme-surface);
}

.hdme-scope .woocommerce-tabs ul.tabs li a {
	min-height: var(--hdme-tap-min);
	display: inline-flex;
	align-items: center;
	font-weight: var(--hdme-weight-semi);
	font-size: var(--hdme-text-base);
}
.hdme-scope .woocommerce-tabs ul.tabs li.active a { color: var(--hdme-blue-700); }

.hdme-scope .quantity input[type="number"] {
	min-width: 72px;
	min-height: var(--hdme-tap-min);
	text-align: center;
	font-size: max(16px, var(--hdme-text-base));
}

/* Stock status reads as a badge, not body text. */
.hdme-scope .stock.in-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--hdme-space-2);
	padding: var(--hdme-space-1) var(--hdme-space-3);
	border-radius: var(--hdme-radius-pill);
	background: var(--hdme-success-bg);
	color: var(--hdme-success);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-semi);
}
.hdme-scope .stock.out-of-stock {
	display: inline-flex;
	padding: var(--hdme-space-1) var(--hdme-space-3);
	border-radius: var(--hdme-radius-pill);
	background: var(--hdme-grey-100);
	color: var(--hdme-grey-600);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-semi);
}

/* ==========================================================================
   6. Sliders and carousels
   ========================================================================== */

.hdme-scope .fusion-carousel .fusion-carousel-item-wrapper,
.hdme-scope .swiper-slide {
	border-radius: var(--hdme-radius-lg);
	overflow: hidden;
}

.hdme-scope .fusion-carousel-nav .fusion-nav-prev,
.hdme-scope .fusion-carousel-nav .fusion-nav-next,
.hdme-scope .swiper-button-prev,
.hdme-scope .swiper-button-next {
	width: var(--hdme-tap-min);
	height: var(--hdme-tap-min);
	border-radius: 50%;
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	box-shadow: var(--hdme-shadow-sm);
	color: var(--hdme-grey-700);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hdme-scope .fusion-carousel-nav .fusion-nav-prev:hover,
.hdme-scope .fusion-carousel-nav .fusion-nav-next:hover {
	background: var(--hdme-blue-50);
	border-color: var(--hdme-blue-300);
	color: var(--hdme-blue-700);
}

/* Slider Revolution caption text can be anything; at least keep it legible. */
.hdme-scope .sr7-module .sr7-layer { line-height: var(--hdme-leading-snug); }

/* ==========================================================================
   7. Tables, pagination, breadcrumbs
   ========================================================================== */

.hdme-scope table:not(.shop_table) {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius);
	overflow: hidden;
	font-size: var(--hdme-text-sm);
}
.hdme-scope table th {
	background: var(--hdme-surface-sunken);
	font-weight: var(--hdme-weight-semi);
	color: var(--hdme-grey-700);
}
.hdme-scope table th,
.hdme-scope table td {
	padding: var(--hdme-space-3) var(--hdme-space-4);
	border-bottom: 1px solid var(--hdme-border);
}

.hdme-scope .pagination a,
.hdme-scope .pagination span,
.hdme-scope .woocommerce-pagination a,
.hdme-scope .woocommerce-pagination span {
	min-width: var(--hdme-tap-min);
	min-height: var(--hdme-tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--hdme-radius);
	border: 1px solid var(--hdme-border);
	background: var(--hdme-surface);
	font-weight: var(--hdme-weight-medium);
	color: var(--hdme-grey-700);
}
.hdme-scope .pagination .current,
.hdme-scope .woocommerce-pagination .current {
	background: var(--hdme-blue-600);
	border-color: var(--hdme-blue-600);
	color: #fff;
}

.hdme-scope .fusion-breadcrumbs,
.hdme-scope .woocommerce-breadcrumb {
	font-size: var(--hdme-text-sm);
	color: var(--hdme-text-muted);
	padding-block: var(--hdme-space-3);
}
.hdme-scope .fusion-breadcrumbs a,
.hdme-scope .woocommerce-breadcrumb a { color: var(--hdme-link); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.hdme-scope .fusion-footer-widget-area {
	background: var(--hdme-grey-900);
	color: var(--hdme-grey-300);
	border-top: 4px solid var(--hdme-blue-600);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.hdme-scope .fusion-footer-widget-area .widget-title,
.hdme-scope .fusion-footer-widget-area h3,
.hdme-scope .fusion-footer-widget-area h4 {
	color: #fff;
	font-size: var(--hdme-text-base);
	font-weight: var(--hdme-weight-bold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: var(--hdme-space-4);
}
.hdme-scope .fusion-footer-widget-area a { color: var(--hdme-grey-300); }
.hdme-scope .fusion-footer-widget-area a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hdme-scope .fusion-footer-widget-area li {
	padding-block: var(--hdme-space-1);
	border-bottom: 0;
}
.hdme-scope .fusion-footer-widget-area li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.hdme-scope .fusion-footer-copyright-area {
	background: #000;
	color: var(--hdme-grey-400);
	font-size: var(--hdme-text-sm);
	padding-block: var(--hdme-space-4);
}

/* ==========================================================================
   9. Widgets / sidebars
   ========================================================================== */

.hdme-scope .fusion-content-widget-area .widget,
.hdme-scope .widget_product_categories,
.hdme-scope .widget_layered_nav {
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	padding: var(--hdme-space-5);
	margin-bottom: var(--hdme-space-5);
}
.hdme-scope .widget .widget-title {
	font-size: var(--hdme-text-base);
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
	margin-bottom: var(--hdme-space-4);
	padding-bottom: var(--hdme-space-3);
	border-bottom: 1px solid var(--hdme-border);
}
.hdme-scope .widget li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	font-size: var(--hdme-text-sm);
	color: var(--hdme-grey-700);
}
.hdme-scope .widget li a:hover { color: var(--hdme-blue-700); }

/* ==========================================================================
   10. Side cart
   ========================================================================== */

.hdme-scope .xoo-wsc-modal .xoo-wsc-container,
.hdme-scope .xoo-wsc-basket {
	border-radius: var(--hdme-radius-lg);
	box-shadow: var(--hdme-shadow-lg);
}
.hdme-scope .xoo-wsc-ft-buttons-cont a {
	min-height: var(--hdme-tap-min);
	border-radius: var(--hdme-radius);
	font-weight: var(--hdme-weight-semi);
}

/* ==========================================================================
   11. Collapsed product section
   Template Builder section 45717 previously held the same block three times —
   one container per breakpoint, switched with Avada visibility classes
   (133,518 bytes, 9 <h1>, 3x the DOM). The copies differed only in cosmetic
   alignment, so they were collapsed to one container and the differences moved
   here, where they belong.
   ========================================================================== */

/* The mobile copy centred the price block; the desktop copy left-aligned it. */
@media (max-width: 767px) {
	.hdme-scope .hdme-product-main .fusion-tb-woo-price,
	.hdme-scope .hdme-product-main .fusion-title-heading {
		text-align: center;
	}
	.hdme-scope .hdme-product-main .fusion-tb-woo-price {
		justify-content: center;
	}
}

/* The per-breakpoint copies also carried different column widths. One set of
   columns now adapts instead. */
.hdme-scope .hdme-product-main .fusion-builder-row-inner {
	gap: var(--hdme-space-4);
}
@media (max-width: 767px) {
	.hdme-scope .hdme-product-main .fusion-layout-column {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================================
   12. Footer contrast fix
   Measured: footer links rendered at rgb(54,62,71) on the dark footer — a
   contrast ratio well below readable. Avada's own colour rule was winning over
   section 8 above, so these are pinned with the same specificity it uses.
   ========================================================================== */

.hdme-scope .fusion-footer-widget-area,
.hdme-scope .fusion-footer-widget-area p,
.hdme-scope .fusion-footer-widget-area li,
.hdme-scope .fusion-footer-widget-area span {
	color: #d4dae1;
}
.hdme-scope .fusion-footer-widget-area a,
.hdme-scope .fusion-footer-widget-area .widget li a,
.hdme-scope .fusion-footer-widget-area .textwidget a {
	color: #e8ecf0;
}
.hdme-scope .fusion-footer-widget-area a:hover,
.hdme-scope .fusion-footer-widget-area .widget li a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hdme-scope .fusion-footer-widget-area .widget-title,
.hdme-scope .fusion-footer-widget-area h3,
.hdme-scope .fusion-footer-widget-area h4 { color: #fff; }

.hdme-scope .fusion-footer-copyright-area,
.hdme-scope .fusion-footer-copyright-area p,
.hdme-scope .fusion-footer-copyright-area a { color: #b3bdc7; }
.hdme-scope .fusion-footer-copyright-area a:hover { color: #fff; }