/* ==========================================================================
   Healthcare DME — Design System
   --------------------------------------------------------------------------
   Tokens and primitives only. No page-specific rules belong in this file.

   Context that shaped these choices:
   - This is a durable medical equipment store. A large share of visitors are
     older, are managing a condition, or are a carer acting for someone else.
     That pushes toward larger base type, higher contrast and generous targets
     rather than a dense, fashionable layout.
   - Brand blue #427ed1 was already in use on the site (rental agreement page
     background, buttons), so it is kept as the anchor rather than replaced.
   - Every interactive element is given a 44px minimum touch target. The audit
     found 21-81 sub-24px targets per page; 44px is the Apple/WCAG-comfortable
     figure and is deliberately stricter than the 24px WCAG 2.2 floor.
   ========================================================================== */

:root {
	/* ---- Brand ------------------------------------------------------- */
	--hdme-blue-50:  #eef4fc;
	--hdme-blue-100: #d6e5f7;
	--hdme-blue-200: #aecbef;
	--hdme-blue-300: #7fabe3;
	--hdme-blue-400: #5b93da;
	--hdme-blue-500: #427ed1;   /* the existing brand blue */
	--hdme-blue-600: #3366ad;
	--hdme-blue-700: #28518a;
	--hdme-blue-800: #1e3d68;
	--hdme-blue-900: #152b49;

	/* ---- Neutrals ---------------------------------------------------- */
	--hdme-grey-0:   #ffffff;
	--hdme-grey-25:  #fbfcfd;
	--hdme-grey-50:  #f4f6f8;
	--hdme-grey-100: #e8ecf0;
	--hdme-grey-200: #d4dae1;
	--hdme-grey-300: #b3bdc7;
	--hdme-grey-400: #8b98a5;
	--hdme-grey-500: #66727f;
	--hdme-grey-600: #4c5661;
	--hdme-grey-700: #363e47;
	--hdme-grey-800: #232a31;
	--hdme-grey-900: #141a1f;

	/* ---- Status ------------------------------------------------------
	   Chosen for contrast against white at >= 4.5:1 for text use. Red is
	   deliberately not the default for "in stock / price" emphasis — on a
	   medical site red reads as a warning, not a highlight.           */
	--hdme-success:     #1a7f4b;
	--hdme-success-bg:  #e7f5ed;
	--hdme-warning:     #8a5a00;
	--hdme-warning-bg:  #fdf3e0;
	--hdme-danger:      #b3261e;
	--hdme-danger-bg:   #fceceb;
	--hdme-info:        var(--hdme-blue-600);
	--hdme-info-bg:     var(--hdme-blue-50);

	/* ---- Semantic ---------------------------------------------------- */
	--hdme-text:            var(--hdme-grey-800);
	--hdme-text-muted:      var(--hdme-grey-500);
	--hdme-text-inverse:    var(--hdme-grey-0);
	--hdme-surface:         var(--hdme-grey-0);
	--hdme-surface-sunken:  var(--hdme-grey-50);
	--hdme-page-bg:         #dce8f6;
	--hdme-border:          var(--hdme-grey-200);
	--hdme-border-strong:   var(--hdme-grey-300);
	--hdme-link:            var(--hdme-blue-600);
	--hdme-link-hover:      var(--hdme-blue-800);
	--hdme-focus:           var(--hdme-blue-500);

	/* ---- Typography --------------------------------------------------
	   Fluid scale. Base is 17px on mobile rising to 18px on desktop —
	   larger than a typical 16px because of the audience.             */
	--hdme-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hdme-font-head: var(--hdme-font-body);

	--hdme-text-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
	--hdme-text-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
	--hdme-text-base: clamp(1.06rem, 1.02rem + 0.20vw, 1.13rem);
	--hdme-text-lg:   clamp(1.20rem, 1.14rem + 0.30vw, 1.35rem);
	--hdme-text-xl:   clamp(1.40rem, 1.30rem + 0.50vw, 1.65rem);
	--hdme-text-2xl:  clamp(1.70rem, 1.52rem + 0.85vw, 2.15rem);
	--hdme-text-3xl:  clamp(2.05rem, 1.75rem + 1.45vw, 2.85rem);

	--hdme-leading-tight:  1.22;
	--hdme-leading-snug:   1.38;
	--hdme-leading-normal: 1.62;

	--hdme-weight-normal: 400;
	--hdme-weight-medium: 500;
	--hdme-weight-semi:   600;
	--hdme-weight-bold:   700;

	/* ---- Spacing (4px base) ------------------------------------------ */
	--hdme-space-1:  0.25rem;
	--hdme-space-2:  0.5rem;
	--hdme-space-3:  0.75rem;
	--hdme-space-4:  1rem;
	--hdme-space-5:  1.5rem;
	--hdme-space-6:  2rem;
	--hdme-space-7:  2.5rem;
	--hdme-space-8:  3rem;
	--hdme-space-9:  4rem;
	--hdme-space-10: 5rem;

	/* ---- Radius / elevation ------------------------------------------ */
	--hdme-radius-sm:   4px;
	--hdme-radius:      8px;
	--hdme-radius-lg:   14px;
	--hdme-radius-pill: 999px;

	--hdme-shadow-sm: 0 1px 2px rgba(20, 26, 31, 0.06), 0 1px 3px rgba(20, 26, 31, 0.08);
	--hdme-shadow:    0 2px 6px rgba(20, 26, 31, 0.07), 0 6px 16px rgba(20, 26, 31, 0.08);
	--hdme-shadow-lg: 0 8px 24px rgba(20, 26, 31, 0.10), 0 16px 40px rgba(20, 26, 31, 0.10);

	/* ---- Layout ------------------------------------------------------ */
	--hdme-container:     1240px;
	--hdme-container-text: 68ch;   /* readable measure for prose */
	--hdme-gutter:        1rem;
	--hdme-tap-min:       44px;    /* the audit's key accessibility fix */

	--hdme-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 768px) {
	:root { --hdme-gutter: 1.5rem; }
}
@media (min-width: 1200px) {
	:root { --hdme-gutter: 2rem; }
}

/* ==========================================================================
   Accessibility primitives
   ========================================================================== */

/* A single, consistent, high-contrast focus ring everywhere. Avada's default
   focus styling is inconsistent across components and in places absent. */
.hdme-scope :focus-visible,
.hdme-scope a:focus-visible,
.hdme-scope button:focus-visible,
.hdme-scope input:focus-visible,
.hdme-scope select:focus-visible,
.hdme-scope textarea:focus-visible {
	outline: 3px solid var(--hdme-focus);
	outline-offset: 2px;
	border-radius: var(--hdme-radius-sm);
}

/* Minimum touch target without changing visual size: the ::after pad extends
   the hit area outward. Used on small icon links, pagination, swatches. */
.hdme-tap {
	position: relative;
}
.hdme-tap::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, var(--hdme-tap-min));
	height: max(100%, var(--hdme-tap-min));
	transform: translate(-50%, -50%);
}

.hdme-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — the site currently has none. */
.hdme-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--hdme-space-3) var(--hdme-space-5);
	background: var(--hdme-blue-700);
	color: var(--hdme-text-inverse);
	font-weight: var(--hdme-weight-semi);
	border-radius: 0 0 var(--hdme-radius) 0;
}
.hdme-skip-link:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hdme-scope *,
	.hdme-scope *::before,
	.hdme-scope *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.hdme-container {
	width: 100%;
	max-width: var(--hdme-container);
	margin-inline: auto;
	padding-inline: var(--hdme-gutter);
}

.hdme-stack > * + * { margin-top: var(--hdme-space-4); }
.hdme-stack-lg > * + * { margin-top: var(--hdme-space-6); }

/* ---- Buttons ------------------------------------------------------- */
.hdme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hdme-space-2);
	min-height: var(--hdme-tap-min);
	padding: var(--hdme-space-3) var(--hdme-space-5);
	border: 1px solid transparent;
	border-radius: var(--hdme-radius);
	font: inherit;
	font-size: var(--hdme-text-base);
	font-weight: var(--hdme-weight-semi);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hdme-transition), border-color var(--hdme-transition), color var(--hdme-transition);
}

.hdme-btn--primary {
	background: var(--hdme-blue-600);
	color: var(--hdme-text-inverse);
}
.hdme-btn--primary:hover { background: var(--hdme-blue-700); color: var(--hdme-text-inverse); }

.hdme-btn--secondary {
	background: var(--hdme-surface);
	color: var(--hdme-blue-700);
	border-color: var(--hdme-blue-300);
}
.hdme-btn--secondary:hover { background: var(--hdme-blue-50); border-color: var(--hdme-blue-500); }

.hdme-btn--ghost {
	background: transparent;
	color: var(--hdme-blue-700);
}
.hdme-btn--ghost:hover { background: var(--hdme-blue-50); }

.hdme-btn--block { width: 100%; }

.hdme-btn[disabled],
.hdme-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---- Forms ---------------------------------------------------------
   Sized so a label + field + help text is comfortable on a phone. 16px
   minimum font-size on inputs prevents iOS Safari zooming on focus. */
.hdme-field { display: block; margin-bottom: var(--hdme-space-5); }

.hdme-label {
	display: block;
	margin-bottom: var(--hdme-space-2);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-semi);
	color: var(--hdme-grey-700);
}
.hdme-label .hdme-required { color: var(--hdme-danger); }

.hdme-input,
.hdme-select,
.hdme-textarea {
	display: block;
	width: 100%;
	min-height: var(--hdme-tap-min);
	padding: var(--hdme-space-3) var(--hdme-space-4);
	font-family: inherit;
	font-size: max(16px, var(--hdme-text-base));
	color: var(--hdme-text);
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border-strong);
	border-radius: var(--hdme-radius);
	transition: border-color var(--hdme-transition), box-shadow var(--hdme-transition);
}
.hdme-input:hover,
.hdme-select:hover,
.hdme-textarea:hover { border-color: var(--hdme-grey-400); }

.hdme-input:focus,
.hdme-select:focus,
.hdme-textarea:focus {
	border-color: var(--hdme-blue-500);
	box-shadow: 0 0 0 3px var(--hdme-blue-100);
	outline: none;
}

.hdme-input[aria-invalid="true"] {
	border-color: var(--hdme-danger);
}

.hdme-help {
	margin-top: var(--hdme-space-2);
	font-size: var(--hdme-text-sm);
	color: var(--hdme-text-muted);
}
.hdme-error {
	margin-top: var(--hdme-space-2);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-medium);
	color: var(--hdme-danger);
}

/* ---- Card ----------------------------------------------------------- */
.hdme-card {
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	box-shadow: var(--hdme-shadow-sm);
}
.hdme-card__body { padding: var(--hdme-space-5); }

/* ---- Notices --------------------------------------------------------- */
.hdme-notice {
	display: flex;
	gap: var(--hdme-space-3);
	padding: var(--hdme-space-4) var(--hdme-space-5);
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--hdme-radius);
	font-size: var(--hdme-text-base);
}
.hdme-notice--info    { background: var(--hdme-info-bg);    border-color: var(--hdme-info);    color: var(--hdme-blue-900); }
.hdme-notice--success { background: var(--hdme-success-bg); border-color: var(--hdme-success); color: #0c4429; }
.hdme-notice--warning { background: var(--hdme-warning-bg); border-color: var(--hdme-warning); color: #5c3d00; }
.hdme-notice--danger  { background: var(--hdme-danger-bg);  border-color: var(--hdme-danger);  color: #7a1a15; }

/* ---- Badges ---------------------------------------------------------- */
.hdme-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--hdme-space-1);
	padding: var(--hdme-space-1) var(--hdme-space-3);
	border-radius: var(--hdme-radius-pill);
	font-size: var(--hdme-text-xs);
	font-weight: var(--hdme-weight-semi);
	letter-spacing: 0.01em;
}
.hdme-badge--stock    { background: var(--hdme-success-bg); color: var(--hdme-success); }
.hdme-badge--backorder{ background: var(--hdme-warning-bg); color: var(--hdme-warning); }
.hdme-badge--out      { background: var(--hdme-grey-100);   color: var(--hdme-grey-600); }
.hdme-badge--rental   { background: var(--hdme-blue-50);    color: var(--hdme-blue-700); }

/* ---- Trust row -------------------------------------------------------
   Replaces the three <h1> emoji badges found on product pages. Same
   information, correct semantics: a list, not a set of page headings. */
.hdme-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdme-space-3);
	padding: 0;
	margin: var(--hdme-space-5) 0;
	list-style: none;
}
.hdme-trust__item {
	display: flex;
	align-items: center;
	gap: var(--hdme-space-2);
	padding: var(--hdme-space-2) var(--hdme-space-4);
	background: var(--hdme-surface-sunken);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-medium);
	color: var(--hdme-grey-700);
}
.hdme-trust__icon { font-size: 1.15em; line-height: 1; }

@media (max-width: 480px) {
	.hdme-trust { flex-direction: column; }
	.hdme-trust__item { width: 100%; }
}