/* ==========================================================================
Healthcare DME — Components
--------------------------------------------------------------------------
Page- and component-level styling built on the tokens in design-system.css.
Everything is scoped under .hdme-scope (added to ) so these rules sit
at a predictable specificity against Avada rather than fighting it with
!important. !important is used only where Avada sets an inline style.
========================================================================== */
/* ==========================================================================
1. Trust badges
Replaces the 💵
/ 🚚
/ 💳
blocks that the Fusion
Template Builder section renders on product pages. functions.php demotes the
headings; these rules keep them looking like badges rather than body text.
========================================================================== */
.hdme-scope .fusion-text h2:has(> :only-child),
.hdme-scope .hdme-trust__item {
margin-block: 0;
}
/* Emoji-only headings become plain reassurance chips. */
.hdme-scope .fusion-text h2 {
font-size: var(--hdme-text-lg);
line-height: var(--hdme-leading-snug);
}
/* ==========================================================================
2. Buttons — align Avada / WooCommerce buttons with the design system
========================================================================== */
.hdme-scope .button,
.hdme-scope button.button,
.hdme-scope input[type="submit"],
.hdme-scope .fusion-button,
.hdme-scope .woocommerce a.button,
.hdme-scope .woocommerce button.button,
.hdme-scope .woocommerce input.button {
min-height: var(--hdme-tap-min);
padding: var(--hdme-space-3) var(--hdme-space-5);
border-radius: var(--hdme-radius);
font-size: var(--hdme-text-base);
font-weight: var(--hdme-weight-semi);
line-height: 1.2;
transition: background-color var(--hdme-transition), border-color var(--hdme-transition);
}
.hdme-scope .woocommerce button.button.alt,
.hdme-scope .woocommerce a.button.alt,
.hdme-scope .single_add_to_cart_button,
.hdme-scope .checkout-button {
background: var(--hdme-blue-600);
color: var(--hdme-text-inverse);
border: 1px solid var(--hdme-blue-600);
}
.hdme-scope .woocommerce button.button.alt:hover,
.hdme-scope .woocommerce a.button.alt:hover,
.hdme-scope .single_add_to_cart_button:hover,
.hdme-scope .checkout-button:hover {
background: var(--hdme-blue-700);
border-color: var(--hdme-blue-700);
color: var(--hdme-text-inverse);
}
/* The primary action on cart and checkout should be unmistakable on a phone. */
@media (max-width: 767px) {
.hdme-scope .checkout-button,
.hdme-scope #place_order,
.hdme-scope .single_add_to_cart_button {
width: 100%;
font-size: var(--hdme-text-lg);
padding-block: var(--hdme-space-4);
}
}
/* ==========================================================================
3. Forms — checkout, account, agreement
iOS Safari zooms the viewport when an input's font-size is below 16px.
Avada's default is smaller, which is why checkout "jumps" on iPhone.
========================================================================== */
.hdme-scope input[type="text"],
.hdme-scope input[type="email"],
.hdme-scope input[type="tel"],
.hdme-scope input[type="number"],
.hdme-scope input[type="password"],
.hdme-scope input[type="search"],
.hdme-scope input[type="url"],
.hdme-scope input[type="date"],
.hdme-scope select,
.hdme-scope textarea {
min-height: var(--hdme-tap-min);
font-size: max(16px, var(--hdme-text-base));
border-radius: var(--hdme-radius);
border: 1px solid var(--hdme-border-strong);
padding: var(--hdme-space-3) var(--hdme-space-4);
}
.hdme-scope input:focus,
.hdme-scope select:focus,
.hdme-scope textarea:focus {
border-color: var(--hdme-blue-500);
box-shadow: 0 0 0 3px var(--hdme-blue-100);
outline: none;
}
.hdme-scope label {
font-weight: var(--hdme-weight-medium);
color: var(--hdme-grey-700);
}
.hdme-scope .required,
.hdme-scope abbr.required {
color: var(--hdme-danger);
text-decoration: none;
border: 0;
}
/* Checkout field rows stack cleanly instead of relying on floats. */
@media (max-width: 767px) {
.hdme-scope .woocommerce form .form-row-first,
.hdme-scope .woocommerce form .form-row-last {
width: 100%;
float: none;
margin-right: 0;
}
}
/* ==========================================================================
4. Cart & checkout layout
========================================================================== */
.hdme-scope .woocommerce-cart-form table.shop_table,
.hdme-scope .woocommerce-checkout-review-order table.shop_table {
border: 1px solid var(--hdme-border);
border-radius: var(--hdme-radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.hdme-scope .cart_totals,
.hdme-scope .woocommerce-checkout-review-order {
background: var(--hdme-surface-sunken);
border: 1px solid var(--hdme-border);
border-radius: var(--hdme-radius-lg);
padding: var(--hdme-space-5);
}
/* Order summary sticks alongside the form on desktop so the total stays in view. */
@media (min-width: 992px) {
.hdme-scope .woocommerce-checkout #order_review {
position: sticky;
top: var(--hdme-space-6);
}
}
/* On phones the cart table becomes stacked rows with visible labels rather than
a horizontally squeezed table. */
@media (max-width: 767px) {
.hdme-scope .woocommerce-cart-form table.shop_table thead { display: none; }
.hdme-scope .woocommerce-cart-form table.shop_table tr {
display: block;
padding: var(--hdme-space-4);
border-bottom: 1px solid var(--hdme-border);
}
.hdme-scope .woocommerce-cart-form table.shop_table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--hdme-space-4);
border: 0;
padding: var(--hdme-space-2) 0;
text-align: right;
}
.hdme-scope .woocommerce-cart-form table.shop_table td::before {
content: attr(data-title);
font-weight: var(--hdme-weight-semi);
color: var(--hdme-grey-600);
text-align: left;
}
.hdme-scope .woocommerce-cart-form table.shop_table td.product-remove::before,
.hdme-scope .woocommerce-cart-form table.shop_table td.product-thumbnail::before {
content: "";
}
}
/* ==========================================================================
5. Notices — WooCommerce messages
========================================================================== */
.hdme-scope .woocommerce-message,
.hdme-scope .woocommerce-info,
.hdme-scope .woocommerce-error {
border-radius: var(--hdme-radius);
border-left: 4px solid;
padding: var(--hdme-space-4) var(--hdme-space-5);
font-size: var(--hdme-text-base);
}
.hdme-scope .woocommerce-message { background: var(--hdme-success-bg); border-color: var(--hdme-success); }
.hdme-scope .woocommerce-info { background: var(--hdme-info-bg); border-color: var(--hdme-info); }
.hdme-scope .woocommerce-error { background: var(--hdme-danger-bg); border-color: var(--hdme-danger); }
/* ==========================================================================
6. Product listings
========================================================================== */
.hdme-scope ul.products li.product {
display: flex;
flex-direction: column;
}
.hdme-scope ul.products li.product .price {
font-size: var(--hdme-text-lg);
font-weight: var(--hdme-weight-bold);
color: var(--hdme-grey-800);
}
/* "Log in to see prices" should read as an action, not as a price. */
.hdme-scope .hdme-login-for-price a {
display: inline-flex;
align-items: center;
min-height: var(--hdme-tap-min);
font-size: var(--hdme-text-base);
font-weight: var(--hdme-weight-semi);
color: var(--hdme-blue-700);
text-decoration: underline;
text-underline-offset: 3px;
}
.hdme-scope .hdme-login-notice .button { margin-top: var(--hdme-space-2); }
/* ==========================================================================
7. Typography defaults
========================================================================== */
.hdme-scope {
font-size: var(--hdme-text-base);
line-height: var(--hdme-leading-normal);
color: var(--hdme-text);
}
.hdme-scope h1 { font-size: var(--hdme-text-3xl); line-height: var(--hdme-leading-tight); }
.hdme-scope h2 { font-size: var(--hdme-text-2xl); line-height: var(--hdme-leading-tight); }
.hdme-scope h3 { font-size: var(--hdme-text-xl); line-height: var(--hdme-leading-snug); }
.hdme-scope h4 { font-size: var(--hdme-text-lg); line-height: var(--hdme-leading-snug); }
.hdme-scope .entry-content p,
.hdme-scope .woocommerce-product-details__short-description p {
max-width: var(--hdme-container-text);
}
/* ==========================================================================
8. Print — customers print rental agreements and order confirmations
========================================================================== */
@media print {
.hdme-scope .fusion-header-wrapper,
.hdme-scope .fusion-footer,
.hdme-scope .hdme-skip-link,
.hdme-scope .fusion-sliding-bar-wrapper,
.hdme-scope #toTop,
.hdme-scope .woocommerce-breadcrumb { display: none !important; }
.hdme-scope { font-size: 11pt; color: #000; }
.hdme-scope a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}
/* ==========================================================================
9. Page title for WooCommerce / form pages
These pages had no visible heading at all before — a customer arriving on
/cart/ or /rental-agreement/ saw content with no statement of where they were.
========================================================================== */
.hdme-scope .hdme-page-title {
margin: 0 0 var(--hdme-space-5);
font-size: var(--hdme-text-2xl);
line-height: var(--hdme-leading-tight);
font-weight: var(--hdme-weight-bold);
color: var(--hdme-grey-900);
}
/* ==========================================================================
10. Inline checkout captcha
Replaces the separate /checkout-captcha-check/ interstitial page, which cost
every guest an extra page load and verified nothing server-side.
========================================================================== */
.hdme-scope .hdme-captcha {
margin: var(--hdme-space-5) 0;
padding: var(--hdme-space-4);
background: var(--hdme-surface-sunken);
border: 1px solid var(--hdme-border);
border-radius: var(--hdme-radius);
}
.hdme-scope .hdme-captcha__label {
margin: 0 0 var(--hdme-space-3);
font-size: var(--hdme-text-sm);
font-weight: var(--hdme-weight-semi);
color: var(--hdme-grey-700);
}
.hdme-scope .hdme-captcha__help {
margin: var(--hdme-space-3) 0 0;
font-size: var(--hdme-text-xs);
color: var(--hdme-text-muted);
}
@media (max-width: 400px) {
/* reCAPTCHA's iframe is a fixed 304px; scale it so it cannot cause overflow */
.hdme-scope .hdme-captcha .g-recaptcha {
transform: scale(0.86);
transform-origin: 0 0;
height: 66px;
}
}
/* ==========================================================================
11. Checkout choice controls
Measured on the checkout at 390px: 5 payment radios, 4 shipping radios and
3 checkboxes all rendered at 13x13px with a 13.3px label — far below a
usable touch target, and below 16px so iOS Safari zooms the page on focus.
Two changes: the control itself is enlarged, and the whole label row becomes
the target, which is what people actually aim at.
========================================================================== */
.hdme-scope .woocommerce-checkout input[type="radio"],
.hdme-scope .woocommerce-checkout input[type="checkbox"],
.hdme-scope .woocommerce input[type="radio"].shipping_method,
.hdme-scope .woocommerce input[type="radio"].input-radio,
.hdme-scope .woocommerce-form__input-checkbox {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
margin-right: var(--hdme-space-3);
accent-color: var(--hdme-blue-600);
flex: 0 0 auto;
cursor: pointer;
}
/* The row, not just the 22px box, is the hit area. */
.hdme-scope .woocommerce-checkout ul.wc_payment_methods li,
.hdme-scope .woocommerce-checkout #shipping_method li,
.hdme-scope .woocommerce-checkout .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
min-height: var(--hdme-tap-min);
padding: var(--hdme-space-2) 0;
cursor: pointer;
}
.hdme-scope .woocommerce-checkout ul.wc_payment_methods li label,
.hdme-scope .woocommerce-checkout #shipping_method li label,
.hdme-scope .woocommerce-checkout .woocommerce-form__label-for-checkbox span {
font-size: max(16px, var(--hdme-text-base));
line-height: var(--hdme-leading-snug);
cursor: pointer;
margin: 0;
}
/* Payment methods read better as selectable cards than as a bare radio list. */
.hdme-scope .woocommerce-checkout ul.wc_payment_methods {
list-style: none;
margin: 0;
padding: 0;
}
.hdme-scope .woocommerce-checkout ul.wc_payment_methods li {
border: 1px solid var(--hdme-border);
border-radius: var(--hdme-radius);
padding: var(--hdme-space-3) var(--hdme-space-4);
margin-bottom: var(--hdme-space-3);
background: var(--hdme-surface);
transition: border-color var(--hdme-transition), background-color var(--hdme-transition);
}
.hdme-scope .woocommerce-checkout ul.wc_payment_methods li:hover {
border-color: var(--hdme-blue-300);
background: var(--hdme-blue-50);
}
.hdme-scope .woocommerce-checkout ul.wc_payment_methods li:has(input:checked) {
border-color: var(--hdme-blue-500);
background: var(--hdme-blue-50);
box-shadow: 0 0 0 1px var(--hdme-blue-500);
}
/* Prescription / document upload button — 21px tall before this. */
.hdme-scope .alg_checkout_files_upload_button,
.hdme-scope input[type="button"].alg_checkout_files_upload_button {
min-height: var(--hdme-tap-min);
padding: var(--hdme-space-2) var(--hdme-space-4);
font-size: max(16px, var(--hdme-text-sm));
border-radius: var(--hdme-radius);
border: 1px solid var(--hdme-blue-300);
background: var(--hdme-surface);
color: var(--hdme-blue-700);
cursor: pointer;
}
/* The shipping methods list is not inside #shipping_method as WooCommerce's
default markup suggests — on this site it renders as
ul.woocommerce-shipping-methods inside table.awb-cart-totals-table (Avada's
cart totals table). Measured, not assumed. */
.hdme-scope ul.woocommerce-shipping-methods,
.hdme-scope ul.wc_payment_methods {
list-style: none;
margin: 0;
padding: 0;
}
.hdme-scope ul.woocommerce-shipping-methods li {
display: flex;
align-items: center;
min-height: var(--hdme-tap-min);
padding: var(--hdme-space-2) 0;
cursor: pointer;
}
.hdme-scope ul.woocommerce-shipping-methods li label,
.hdme-scope ul.wc_payment_methods li label,
.hdme-scope .woocommerce-form__label-for-checkbox,
.hdme-scope .woocommerce-form__label-for-checkbox span {
font-size: max(16px, var(--hdme-text-base)) !important; /* Avada sets this inline */
line-height: var(--hdme-leading-snug);
margin: 0;
cursor: pointer;
}
/* Any remaining small control gets a 44px hit area without changing its size. */
.hdme-scope input[type="radio"],
.hdme-scope input[type="checkbox"] {
position: relative;
}
.hdme-scope input[type="radio"]::after,
.hdme-scope input[type="checkbox"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--hdme-tap-min);
height: var(--hdme-tap-min);
transform: translate(-50%, -50%);
}
/* Legacy content buttons (class="fasc-button …", 3 posts/products) formerly styled by the
retired Forget About Shortcode Buttons plugin. Background colour stays inline in the content. */
a.fasc-button {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; margin: 6px 8px 6px 0; padding: 11px 22px; box-sizing: border-box;
border: 0; border-radius: 8px; color: #fff; font-weight: 600; line-height: 1.3;
text-decoration: none; box-shadow: none; transition: filter .15s ease;
}
a.fasc-button:hover, a.fasc-button:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.1); }
a.fasc-button.fasc-size-large { font-size: 17px; padding: 13px 26px; }
a.fasc-button.fasc-size-medium { font-size: 15px; }