/* H Medical design system — header & footer chrome */

:root {
  --hm-accent: #1B6E9C;
  --hm-accent-dark: #155477;
  --hm-accent-tint: #E8F0F5;
  --hm-text: #0F2A33;
  --hm-muted: #45606B;
  --hm-subtle: #5C7680;
  --hm-border: #E4EBEE;
  --hm-border-light: #EEF3F5;
  --hm-surface: #F5F9FA;
  --hm-surface-alt: #F8FBFC;
  --hm-success: #127A5E;
  --hm-success-tint: #EAF6F0;
  --hm-danger: #C0392B;
  --hm-content: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

/* WordPress core auto-injects a "skip to content" accessibility link
   (#wp-skip-link, invisible except on keyboard focus) into every block
   theme via wp_body_open — not something this theme adds, and there's no
   matching closure reference to unhook it by. Per explicit instruction:
   hide it outright, do not reintroduce a skip-link anywhere else. */
#wp-skip-link { display: none !important; }

/* Force the brand font everywhere, including form controls, which browsers
   and WooCommerce/theme block-library CSS often exclude from inheritance. */
html body,
h1, h2, h3, h4, h5, h6,
p, a, span, li,
button, input, select, textarea, label {
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}

body {
  color: var(--hm-text);
  -webkit-font-smoothing: antialiased;
}

/* Twenty Twenty-Four's default a11y styles put an outline on plain :focus,
   which fires on every mouse click (not just keyboard nav) — that's the
   "border on anything you click" complaint. Reset it and rely only on
   :focus-visible, which browsers already restrict to keyboard/programmatic
   focus, so clicking still gets no ring but Tab-navigation still does. */
a, button, input, select, textarea, [tabindex] {
  outline: none !important;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--hm-accent) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

button { transition: transform .12s ease; cursor: pointer; }
button:active { transform: scale(0.96); }

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

/* ---------- Header ---------- */

/* WordPress wraps a header-area template part in its own <header
   class="wp-block-template-part">, sized exactly to fit this block — so
   sticky positioning must live on THAT wrapper, not on .hmedical-header:
   a sticky element can't stay pinned past the bottom edge of its own
   immediate parent, and that parent here is only as tall as the header
   itself. The outer wrapper's parent (.wp-site-blocks) spans the full
   page, which is what actually gives the sticky effect room to work. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
}

.hmedical-header {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-border);
}

.hmedical-topbar {
  background: var(--hm-accent-dark);
  color: #FFFFFF;
}

.hmedical-topbar__inner {
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hmedical-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.hmedical-topbar__phone span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.hmedical-topbar__hours { font-size: 12.5px; color: #A9C3CB; }

.hmedical-header__main {
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hmedical-icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  color: var(--hm-text);
}
.hmedical-icon-btn:hover { border-color: var(--hm-accent); color: var(--hm-accent); }

.hmedical-menu-toggle { background: transparent; }

.hmedical-logo { display: flex; align-items: center; min-width: 0; }
.hmedical-logo img { width: 176px; max-width: 46vw; height: auto; object-fit: contain; display: block; }

.hmedical-nav-desktop { display: none; align-items: center; gap: 24px; }
.hmedical-nav-desktop a { font-size: 15px; font-weight: 500; color: var(--hm-muted); text-decoration: none; }
.hmedical-nav-desktop a:hover { color: var(--hm-accent); }
.hmedical-nav-desktop a.is-active { color: var(--hm-accent); font-weight: 600; }

.hmedical-header__icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.hmedical-header__cart .wp-block-woocommerce-mini-cart { display: flex; }

.hmedical-header__cart .wc-block-mini-cart__button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  color: var(--hm-text);
}
.hmedical-header__cart .wc-block-mini-cart__button:hover {
  border-color: var(--hm-accent);
  color: var(--hm-accent);
}

@media (max-width: 899px) {
  .hmedical-header__cart { display: none; }
}

@media (min-width: 900px) {
  .hmedical-header__main { gap: 26px; }
  .hmedical-menu-toggle { display: none; }
  .hmedical-nav-desktop { display: flex; margin-inline-start: 26px; }
  .hmedical-logo img { max-width: none; }
}

/* ---------- Search panel ---------- */

.hmedical-search-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 42, 51, .35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.hmedical-search-panel[hidden] { display: none; }

.hmedical-search-panel__inner {
  width: calc(100% - 24px);
  max-width: 620px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px;
}

.hmedical-search-block { width: 100%; }
.hmedical-search-block .wp-block-search__inside-wrapper {
  border-radius: 13px;
  border: 1px solid var(--hm-border);
  overflow: hidden;
}
.hmedical-search-block input.wp-block-search__input { height: 48px; padding: 0 13px; font-size: 15.5px; border: 0; }
.hmedical-search-block .wp-block-search__button {
  background: var(--hm-accent);
  border: 0;
  color: #FFFFFF;
  font-weight: 600;
}

/* Live suggestion dropdown, populated by hmedical.js from
   /hmedical/v1/search-suggest as the visitor types (mobile + desktop share
   the same overlay panel, so this one block covers both). */
.hmedical-search-suggest { margin-top: 10px; }
.hmedical-search-suggest[hidden] { display: none; }

.hmedical-search-suggest__loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 22px 8px;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hm-subtle);
}
.hmedical-search-suggest__loading[hidden] { display: none; }
.hmedical-search-suggest__spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  border: 2px solid var(--hm-border);
  border-top-color: var(--hm-accent);
  animation: hmedical-spin .7s linear infinite;
}
@keyframes hmedical-spin {
  to { transform: rotate(360deg); }
}

.hmedical-search-suggest__list { display: flex; flex-direction: column; gap: 2px; }

.hmedical-search-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.hmedical-search-suggest__item:hover { background: var(--hm-surface); }

.hmedical-search-suggest__img {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--hm-surface-alt);
  border: 1px solid var(--hm-border-light);
  border-radius: 10px;
  overflow: hidden;
}
.hmedical-search-suggest__img img { width: 100%; height: 100%; object-fit: contain; }

.hmedical-search-suggest__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hmedical-search-suggest__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Targets the price span itself, not a ".price" descendant — WooCommerce's
   get_price_html() (and this file's own hand-formatted fast-search.php
   equivalent) doesn't actually wrap simple-product output in a ".price"
   class, only in template code elsewhere that adds its own wrapper. */
.hmedical-search-suggest__price { font-size: 13px; font-weight: 700; color: var(--hm-accent); }

.hmedical-search-suggest__all {
  display: block;
  margin-top: 6px;
  padding: 11px 8px;
  border-top: 1px solid var(--hm-border-light);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hm-accent);
  text-decoration: none;
}
.hmedical-search-suggest__all[hidden] { display: none; }
.hmedical-search-suggest__all:hover { color: var(--hm-accent-dark); }

.hmedical-search-suggest__empty {
  margin: 0;
  padding: 16px 8px;
  text-align: center;
  font-size: 13.5px;
  color: var(--hm-subtle);
}
.hmedical-search-suggest__empty[hidden] { display: none; }

/* ---------- Mobile drawer ---------- */

.hmedical-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  /* flex-start resolves to the inline-start edge, which in a dir="rtl"
     document is the RIGHT edge — exactly where the drawer should rest,
     matching the hamburger button's position. Do not force flex-end here;
     that pins it to the visual left instead. */
  justify-content: flex-start;
}
.hmedical-drawer[hidden] { display: none; }

/* Open/close is driven by the .is-open class (toggled in hmedical.js) so both
   directions can transition — the [hidden] attribute alone can only ever
   cut instantly to/from display:none, which is why there was no closing
   animation before. hmedical.js removes [hidden] before adding .is-open on
   open, and re-adds [hidden] only after the close transition finishes. */
.hmedical-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 51, .4);
  opacity: 0;
  transition: opacity .28s ease;
}
.hmedical-drawer.is-open .hmedical-drawer__overlay { opacity: 1; }

.hmedical-drawer__panel {
  position: relative;
  width: min(84vw, 340px);
  height: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.hmedical-drawer.is-open .hmedical-drawer__panel { transform: translateX(0); }

.hmedical-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hm-border-light);
}
.hmedical-drawer__head img { width: 168px; height: auto; }
.hmedical-drawer__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--hm-surface); border: 0; border-radius: 11px;
  color: var(--hm-muted); font-size: 19px; line-height: 1;
}

.hmedical-drawer__nav { display: flex; flex-direction: column; padding: 8px 8px 4px; }
.hmedical-drawer__nav a {
  padding: 14px 12px; border-radius: 12px; font-size: 16px; font-weight: 500;
  color: var(--hm-text); text-decoration: none;
}
.hmedical-drawer__nav a:hover { background: var(--hm-surface); }
.hmedical-drawer__nav a.is-active { color: var(--hm-accent); background: var(--hm-surface); font-weight: 600; }

.hmedical-drawer__foot {
  padding: 12px 16px 18px; margin-top: auto; border-top: 1px solid var(--hm-border-light);
  display: flex; flex-direction: column; gap: 10px;
}

.hmedical-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.hmedical-btn--accent { background: var(--hm-accent); color: #FFFFFF; }
.hmedical-btn--outline { border: 1px solid var(--hm-border); color: var(--hm-text); }

@media (min-width: 900px) {
  /* The desktop nav (.hmedical-nav-desktop) already replaces the drawer's
     job, so the drawer itself stays mobile-only. The search panel/icon
     stays available on both — it was the only entry point to search on
     desktop until this was force-hidden here; see the AJAX search feature
     in inc/search-blocks.php. */
  .hmedical-drawer { display: none !important; }
}

/* ---------- Bottom mobile nav ---------- */

.hmedical-bottomnav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hm-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.hmedical-bottomnav__item {
  min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--hm-muted); font-size: 11.5px; font-weight: 500; text-decoration: none;
}
.hmedical-bottomnav__item:hover, .hmedical-bottomnav__item.is-active { color: var(--hm-accent); }
.hmedical-bottomnav__item.is-active { font-weight: 600; }

.hmedical-bottomnav__cart-icon { position: relative; display: block; }
.hmedical-bottomnav__badge {
  position: absolute; top: -5px; inset-inline-start: -7px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--hm-accent); color: #FFFFFF; border-radius: 9px;
  font-size: 11px; font-weight: 700;
}

@media (min-width: 900px) {
  .hmedical-bottomnav { display: none; }
}

/* ---------- Footer ---------- */

.hmedical-footer {
  margin-top: 34px;
  border-top: 1px solid var(--hm-border);
  background: var(--hm-surface);
}

.hmedical-footer__grid {
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 28px 16px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}

.hmedical-footer__logo { width: min(186px, 56%); height: auto; margin-bottom: 14px; display: block; }

.hmedical-footer__col p { margin: 0; font-size: 13.5px; color: var(--hm-muted); line-height: 1.75; max-width: 34ch; }

.hmedical-footer__col h4 {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--hm-subtle); letter-spacing: .06em;
}

.hmedical-footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.hmedical-footer__links a { color: var(--hm-text); text-decoration: none; }
.hmedical-footer__links a:hover { color: var(--hm-accent); }

.hmedical-footer__address { margin: 0 0 10px !important; max-width: 32ch !important; }

.hmedical-footer__contact-links { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.hmedical-footer__contact-links a:first-child { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hm-text); text-decoration: none; }
.hmedical-footer__contact-links a:last-child { color: var(--hm-muted); text-decoration: none; }

.hmedical-footer__social { display: flex; gap: 8px; margin-top: 14px; }
.hmedical-footer__social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #FFFFFF; border: 1px solid var(--hm-border); border-radius: 11px;
  font-size: 13px; font-weight: 700; color: var(--hm-muted); text-decoration: none;
}
.hmedical-footer__social a:hover { border-color: var(--hm-accent); color: var(--hm-accent); }

.hmedical-footer__bottom {
  border-top: 1px solid var(--hm-border);
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--hm-subtle);
}

@media (max-width: 899px) {
  .hmedical-footer { padding-bottom: 78px; }
}

/* ---------- Homepage ---------- */

.hmedical-main {
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 16px 16px 0;
}

.hmedical-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hmedical-section__head h2 {
  margin: 0;
  font-size: clamp(22px, 5.8vw, 31px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hmedical-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hm-accent);
  padding: 6px 12px;
  background: var(--hm-accent-tint);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.hmedical-pill-link:hover { background: var(--hm-accent); color: #FFFFFF; }

/* Hero */
.hmedical-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.hmedical-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,26,32,.86) 0%, rgba(10,26,32,.42) 55%, rgba(10,26,32,.08) 100%);
}
.hmedical-hero__body {
  position: relative;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #FFFFFF;
  max-width: 560px;
}
.hmedical-hero__badge {
  padding: 4px 10px;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.hmedical-hero__body h1 {
  margin: 0;
  font-size: clamp(22px, 5.6vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.hmedical-hero__body p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .hmedical-hero { min-height: 420px; }
}

/* Quick info strip */
.hmedical-info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.hmedical-info-strip__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--hm-border);
  border-radius: 14px;
}
.hmedical-info-strip__icon {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--hm-accent-tint);
  border-radius: 11px;
  color: var(--hm-accent);
}
.hmedical-info-strip__text {
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.hmedical-info-strip__text small {
  display: block;
  font-weight: 400;
  color: var(--hm-subtle);
  font-size: 12px;
}

/* Category grid */
.hmedical-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 11px;
}
.hmedical-category-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,42,51,.05);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hmedical-category-card:hover {
  border-color: var(--hm-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,42,51,.14);
}
/* aspect-ratio alone doesn't reliably hold here: this box is a column-flex
   item, and an aspect-ratio flex item with a height:100% image child lets
   the browser size it from the image's own intrinsic ratio instead of the
   box's — which is exactly why cards were different heights per category
   photo. The padding-top percentage trick sizes the box purely from its
   width, immune to that, giving every card the same square footprint
   (matching الاربطة, the reference image) regardless of each photo's shape. */
.hmedical-category-card__img {
  position: relative;
  display: block;
  height: 0;
  padding-top: 100%;
  background: var(--hm-surface-alt);
}
.hmedical-category-card__img img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  display: block;
}
.hmedical-category-card__label {
  padding: 11px 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--hm-border-light);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.hmedical-count-pill {
  flex: none;
  padding: 3px 8px;
  background: var(--hm-surface);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hm-subtle);
}
.hmedical-category-card--all {
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(135deg, var(--hm-accent), var(--hm-accent-dark));
  color: #FFFFFF;
  min-height: 150px;
  box-shadow: 0 8px 20px rgba(15,42,51,.2);
}
.hmedical-category-card--all:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,42,51,.2); }
.hmedical-category-card--all__title { font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.hmedical-category-card--all__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-top: 12px; }

/* Product row */
.hmedical-product-row {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 8px 2px 18px;
  scroll-snap-type: x proximity;
}
.hmedical-product-row::-webkit-scrollbar { display: none; }
.hmedical-product-row { scrollbar-width: none; }

.hmedical-product-card {
  flex: 0 0 clamp(158px, 46vw, 210px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15,42,51,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hmedical-product-card:hover { box-shadow: 0 10px 26px rgba(15,42,51,.14); transform: translateY(-3px); }

/* aspect-ratio alone doesn't reliably hold on this box: it's a column-flex
   item, and (as with the category cards earlier) that lets the browser
   size it from each product photo's own intrinsic ratio instead of the
   box's, so cards ended up different heights per photo. The padding-top
   percentage trick sizes the box purely from its width — immune to that —
   giving every card the same square footprint, matching "ماس مساج رقبة كف"
   (3000×2999, effectively 1:1), the reference photo used as the standard. */
.hmedical-product-card__img-wrap {
  position: relative;
  height: 0;
  padding-top: 100%;
  background: var(--hm-surface-alt);
}
.hmedical-product-card__img {
  position: absolute;
  inset: 10px;
  display: block;
}
.hmedical-product-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hmedical-product-card__tag {
  position: absolute; top: 8px; inset-inline-start: 8px;
  padding: 3px 8px; background: var(--hm-accent-dark); color: #FFFFFF;
  border-radius: 8px; font-size: 10.5px; font-weight: 600;
}

.hmedical-product-card__body { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hmedical-product-card__name {
  font-size: 13px; font-weight: 600; line-height: 1.4; min-height: 2.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--hm-text); text-decoration: none;
}
.hmedical-product-card__price .price { font-size: 17px; font-weight: 800; color: var(--hm-accent); }
.hmedical-product-card__price ins { text-decoration: none; }
.hmedical-product-card__price del { opacity: .55; font-size: 13px; margin-inline-end: 6px; }

.hmedical-stock-pill {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.hmedical-stock-pill.is-in-stock { background: var(--hm-success-tint); color: var(--hm-success); }
.hmedical-stock-pill.is-out { background: var(--hm-surface); color: var(--hm-subtle); }
.hmedical-stock-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.hmedical-add-btn {
  margin-top: auto;
  height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--hm-accent-tint);
  color: var(--hm-accent-dark);
  border: 0; border-radius: 11px;
  font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.hmedical-add-btn:hover { background: var(--hm-accent); color: #FFFFFF; }
.hmedical-add-btn.loading { opacity: .6; pointer-events: none; }
.hmedical-add-btn.added::after { content: " ✓"; }

/* Wishlist heart (TI WooCommerce Wishlist plugin) — the shortcode's own
   markup/CSS isn't enqueued outside normal shop/product contexts, so this
   reproduces the mockup's icon-only button regardless, on top of the
   plugin's real add/remove behavior (its data-tinv-wl-* attributes and JS
   still work; we're only replacing what it looks like). */
.hmedical-product-card__img-wrap .tinv-wraper { position: static; }
.hmedical-product-card__img-wrap .tinv-wishlist-clear { display: none; }
.hmedical-product-card__img-wrap .tinvwl-tooltip { display: none !important; }
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist_button {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hm-border);
  border-radius: 10px;
  color: var(--hm-subtle);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist_button:hover { color: var(--hm-danger); border-color: var(--hm-danger); }
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist_button.tinv-wishlist-added { color: var(--hm-danger); }
/* The plugin's own icon-font CSS (tinvwl-webfont) sets its own ::before
   content/font-family and loads after ours, winning the cascade at equal
   specificity — !important forces our plain-text heart glyph to win instead. */
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist_button::before {
  content: "\2661" !important;
  font-family: inherit !important;
}
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist_button.tinv-wishlist-added::before { content: "\2665" !important; }
.hmedical-product-card__img-wrap .tinvwl_add_to_wishlist-text { display: none; }

/* About/team section */
.hmedical-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--hm-accent-tint);
  border-radius: 22px;
}
.hmedical-about__eyebrow { font-size: 12.5px; font-weight: 600; color: var(--hm-accent); letter-spacing: .04em; }
.hmedical-about h2 { margin: 0; font-size: clamp(20px, 5vw, 27px); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.hmedical-about p { margin: 0; font-size: 14.5px; color: var(--hm-muted); line-height: 1.8; max-width: 60ch; }
.hmedical-about__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }

.hmedical-btn-lg {
  display: inline-flex; align-items: center; height: 46px; padding: 0 18px;
  border-radius: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.hmedical-btn-lg--accent { background: var(--hm-accent); color: #FFFFFF; box-shadow: 0 6px 18px rgba(27,110,156,.26); }
.hmedical-btn-lg--accent:hover { background: var(--hm-accent-dark); color: #FFFFFF; }
.hmedical-btn-lg--outline { border: 1px solid var(--hm-border); color: var(--hm-text); background: #FFFFFF; }
.hmedical-btn-lg--outline:hover { border-color: var(--hm-accent); color: var(--hm-accent); }

/* Brand strip */
.hmedical-brands {
  margin-top: 30px;
  padding: 18px 0;
  border-top: 1px solid var(--hm-border-light);
  border-bottom: 1px solid var(--hm-border-light);
}
.hmedical-brands__label { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; color: var(--hm-subtle); letter-spacing: .04em; }
.hmedical-brands__row { display: flex; align-items: center; gap: 26px; overflow-x: auto; }
.hmedical-brands__row::-webkit-scrollbar { display: none; }
.hmedical-brands__row { scrollbar-width: none; }
.hmedical-brands__row img { height: 30px; flex: none; object-fit: contain; opacity: .72; }

/* Testimonials */
.hmedical-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; }
.hmedical-testimonial {
  margin: 0; padding: 22px; background: var(--hm-accent-tint); border-radius: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.hmedical-testimonial blockquote { margin: 0; font-size: 14.5px; line-height: 1.75; color: #22434D; }
.hmedical-testimonial figcaption { display: flex; align-items: center; gap: 10px; }
.hmedical-testimonial__avatar {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  background: #FFFFFF; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--hm-accent);
}
.hmedical-testimonial__name { font-size: 13px; line-height: 1.4; }
.hmedical-testimonial__name strong { font-weight: 600; }
.hmedical-testimonial__name span { color: var(--hm-subtle); display: block; }

/* WhatsApp CTA band */
.hmedical-cta-band {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 22px;
  background: linear-gradient(135deg, var(--hm-accent-dark), var(--hm-accent));
  border-radius: 24px;
  color: #FFFFFF;
  box-shadow: 0 16px 36px rgba(15,42,51,.22);
}
.hmedical-cta-band__text { flex: 1 1 220px; min-width: 0; }
.hmedical-cta-band__text h3 { margin: 0 0 6px; font-size: clamp(17px, 4.4vw, 21px); font-weight: 700; }
.hmedical-cta-band__text p { margin: 0; font-size: 13.5px; color: #A9C3CB; line-height: 1.6; }
.hmedical-cta-band__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.hmedical-cta-band__actions a {
  display: inline-flex; align-items: center; height: 48px; padding: 0 20px;
  border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.hmedical-cta-band__actions a.is-solid { background: #FFFFFF; color: #0F2A33; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.hmedical-cta-band__actions a.is-solid:hover { background: var(--hm-accent-tint); }
.hmedical-cta-band__actions a.is-outline { border: 1px solid rgba(255,255,255,.25); color: #FFFFFF; }
.hmedical-cta-band__actions a.is-outline:hover { border-color: #FFFFFF; }

/* ---------- Shop page ---------- */

.hmedical-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--hm-subtle); margin: 14px 0 4px;
}
.hmedical-breadcrumb a { color: var(--hm-subtle); text-decoration: none; }
.hmedical-breadcrumb a:hover { color: var(--hm-accent); }
.hmedical-breadcrumb .is-current { color: var(--hm-text); font-weight: 600; }

.hmedical-shop__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 6px 0 14px;
}
.hmedical-shop__head h1 { margin: 0; font-size: clamp(20px, 4.8vw, 26px); font-weight: 700; letter-spacing: -0.01em; }
.hmedical-shop__count { font-size: 13px; color: var(--hm-subtle); flex: none; }

.hmedical-shop-chips-wrap { position: relative; }
.hmedical-shop-chips {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-behavior: smooth;
}
.hmedical-shop-chips::-webkit-scrollbar { display: none; }
.hmedical-shop-chips { scrollbar-width: none; }

/* Scroll-hint arrows: shown only when the row actually overflows (toggled
   in shop.js based on scrollWidth), and only on the edge there's still more
   to reveal — a fade + circular chevron button, the common "this scrolls"
   affordance for a horizontal chip list with no visible scrollbar. */
.hmedical-chips-arrow {
  position: absolute; top: 0; bottom: 2px; z-index: 5;
  width: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; color: var(--hm-text);
}
.hmedical-chips-arrow[hidden] { display: none; }
/* dir="rtl" is forced site-wide (see functions.php), so the visual left/right
   edges are fixed regardless of inset-inline-start/end's logical direction —
   .hmedical-chips-arrow--start is the RIGHT edge, --end is the LEFT edge. */
.hmedical-chips-arrow--start {
  inset-inline-start: -2px;
  background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF 55%);
}
.hmedical-chips-arrow--end {
  inset-inline-end: -2px;
  background: linear-gradient(to left, rgba(255,255,255,0), #FFFFFF 55%);
}
.hmedical-chips-arrow svg {
  width: 26px; height: 26px; padding: 5px;
  background: #FFFFFF; border: 1px solid var(--hm-border); border-radius: 999px;
  color: var(--hm-accent); box-shadow: 0 2px 8px rgba(15,42,51,.12);
}
.hmedical-chip {
  flex: none; height: 38px; padding: 0 16px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--hm-border); background: #FFFFFF; color: var(--hm-text);
}
.hmedical-chip:hover { border-color: var(--hm-accent); }
.hmedical-chip.is-active { border-color: var(--hm-accent); background: var(--hm-accent); color: #FFFFFF; }

.hmedical-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; position: relative;
}
.hmedical-shop-sort { position: relative; }
.hmedical-shop-sort__btn {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  background: #FFFFFF; border: 1px solid var(--hm-border); border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--hm-text);
}
.hmedical-shop-sort__btn:hover { border-color: var(--hm-accent); }
.hmedical-shop-sort__menu {
  position: absolute; top: 46px; inset-inline-start: 0; z-index: 30;
  width: 200px; background: #FFFFFF; border: 1px solid var(--hm-border);
  border-radius: 14px; box-shadow: 0 14px 34px rgba(15,42,51,.14);
  padding: 6px; display: flex; flex-direction: column;
}
/* [hidden] and this class both have single-selector specificity, so without
   this the browser's default "[hidden] { display: none }" loses the tie to
   whichever rule happens to come later in the stylesheet — which was this
   one, so the menu stayed visible (as flex) even with the hidden attribute
   set. Same fix applied to .hmedical-shop-loadmore below. */
.hmedical-shop-sort__menu[hidden] { display: none; }
.hmedical-shop-sort__option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: var(--hm-text); background: transparent; text-align: start; border: 0;
}
.hmedical-shop-sort__option:hover { background: var(--hm-surface); }
.hmedical-shop-sort__option.is-active { font-weight: 700; color: var(--hm-accent); background: var(--hm-accent-tint); }
.hmedical-shop-sort__check { visibility: hidden; }
.hmedical-shop-sort__option.is-active .hmedical-shop-sort__check { visibility: visible; }

.hmedical-shop-filter-btn {
  position: relative; flex: none; width: 42px; height: 42px;
  display: grid; place-items: center; background: #FFFFFF;
  border: 1px solid var(--hm-border); border-radius: 12px; color: var(--hm-text);
}
.hmedical-shop-filter-btn:hover { border-color: var(--hm-accent); color: var(--hm-accent); }
.hmedical-shop-filter-dot {
  position: absolute; top: -4px; inset-inline-end: -4px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--hm-accent); border: 2px solid #FFFFFF;
}

.hmedical-shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 16px;
}
@media (min-width: 900px) {
  .hmedical-shop-grid { grid-template-columns: repeat(4, 1fr); }
}
.hmedical-shop-grid[aria-busy="true"] { opacity: .5; }

.hmedical-shop-empty { text-align: center; padding: 44px 16px; color: var(--hm-subtle); }
.hmedical-shop-empty__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--hm-text); }
.hmedical-shop-empty__sub { margin: 0 0 16px; font-size: 13.5px; }
.hmedical-shop-empty__reset {
  height: 42px; padding: 0 18px; background: var(--hm-accent); color: #FFFFFF;
  border: 0; border-radius: 11px; font-size: 13.5px; font-weight: 600;
}
.hmedical-shop-empty__reset:hover { background: var(--hm-accent-dark); }
/* Also used as a real <a> on the search results' empty state (a link to
   the shop, not a filter-reset action there) — buttons center this way by
   default, an inline <a> needs it stated explicitly. */
a.hmedical-shop-empty__reset { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.hmedical-shop-loadmore { display: flex; justify-content: center; margin-top: 18px; }
.hmedical-shop-loadmore[hidden] { display: none; }
.hmedical-loadmore-btn {
  height: 46px; padding: 0 22px; background: #FFFFFF; border: 1px solid var(--hm-border);
  border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--hm-text);
}
.hmedical-loadmore-btn:hover { border-color: var(--hm-accent); color: var(--hm-accent); }
.hmedical-loadmore-btn.is-loading { opacity: .6; pointer-events: none; }

/* Filter bottom sheet — same [hidden]+.is-open animation pattern as the
   mobile drawer (see hmedical.js), but sliding up from the bottom edge. */
.hmedical-filter-sheet {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: flex-end; justify-content: center;
}
.hmedical-filter-sheet[hidden] { display: none; }
.hmedical-filter-sheet__overlay {
  position: absolute; inset: 0; background: rgba(15,42,51,.4);
  opacity: 0; transition: opacity .28s ease;
}
.hmedical-filter-sheet.is-open .hmedical-filter-sheet__overlay { opacity: 1; }
.hmedical-filter-sheet__panel {
  position: relative; width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto;
  background: #FFFFFF; border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.hmedical-filter-sheet.is-open .hmedical-filter-sheet__panel { transform: translateY(0); }

.hmedical-filter-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.hmedical-filter-sheet__head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.hmedical-filter-sheet__close {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--hm-surface); border: 0; border-radius: 10px; color: var(--hm-muted); font-size: 18px;
}

.hmedical-filter-row { display: flex; align-items: center; justify-content: space-between; }
.hmedical-filter-row span { font-size: 14px; font-weight: 600; }

.hmedical-switch {
  width: 46px; height: 26px; border-radius: 999px; border: 0; padding: 0;
  background: var(--hm-border); position: relative;
}
.hmedical-switch[aria-checked="true"] { background: var(--hm-accent); }
.hmedical-switch__knob {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 999px; background: #FFFFFF;
  transition: inset-inline-start .18s ease;
}
.hmedical-switch[aria-checked="true"] .hmedical-switch__knob { inset-inline-start: 23px; }

.hmedical-filter-group__label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 10px; }
.hmedical-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hmedical-pill-toggle {
  height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--hm-border); background: #FFFFFF; color: var(--hm-text);
}
.hmedical-pill-toggle.is-active { border-color: var(--hm-accent); background: var(--hm-accent-tint); color: var(--hm-accent-dark); }

.hmedical-filter-actions { display: flex; gap: 10px; margin-top: 4px; }
.hmedical-filter-reset {
  flex: 1; height: 48px; background: #FFFFFF; border: 1px solid var(--hm-border);
  border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--hm-muted);
}
.hmedical-filter-apply {
  flex: 1.4; height: 48px; background: var(--hm-accent); border: 0;
  border-radius: 12px; font-size: 14.5px; font-weight: 700; color: #FFFFFF;
}
.hmedical-filter-apply:hover { background: var(--hm-accent-dark); }

/* ---------- Single product page ---------- */

.hmedical-pdp .wc-block-breadcrumbs,
.hmedical-pdp .woocommerce-breadcrumb {
  font-size: 12.5px;
  color: var(--hm-subtle);
  margin: 14px 0 4px;
}
.hmedical-pdp .woocommerce-breadcrumb a { color: var(--hm-subtle); text-decoration: none; }
.hmedical-pdp .woocommerce-breadcrumb a:hover { color: var(--hm-accent); }

.hmedical-pdp-columns {
  gap: 0 !important;
  margin-top: 6px;
}
.hmedical-pdp-gallery-col { flex-basis: 100% !important; }
.hmedical-pdp-summary-col {
  flex-basis: 100% !important;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 900px) {
  .hmedical-pdp-columns { gap: 36px !important; align-items: flex-start; }
  /* WordPress's own column CSS gives every .wp-block-column flex-grow:1 by
     default — without pinning the gallery's grow/shrink to 0 here, it and
     the summary column split the leftover space evenly instead of the
     gallery staying at 46% and the summary claiming the rest, which is
     what was leaving the summary column's content stranded in a narrow
     strip with a large empty gap beside it. */
  .hmedical-pdp-gallery-col { flex: 0 0 46% !important; }
  .hmedical-pdp-summary-col { flex: 1 1 0 !important; margin-top: 0; }
}

/* Gallery: hide the thumbnail strip and turn WooCommerce's own thumbnail
   nav into small dot indicators instead — reuses the real Flexslider
   instance already driving the gallery (data-columns, flex-viewport,
   translate3d) rather than building a parallel swipe/carousel. */
.hmedical-pdp-gallery-col { position: relative; }
.hmedical-pdp-gallery-col .woocommerce-product-gallery {
  background: var(--hm-surface-alt);
  border-radius: 18px;
  overflow: hidden;
  padding: 14px;
}
/* WooCommerce's own zoom-trigger icon otherwise sits above the sticky
   header (z-index: 40) once the gallery scrolls under it — its own rule
   (.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
   4 classes) is more specific than a 2-class override, so this needs
   !important to actually win. */
.hmedical-pdp-gallery-col .woocommerce-product-gallery__trigger { z-index: 2 !important; }
.hmedical-pdp-gallery-col .flex-control-nav {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 0;
  margin: 0;
}
/* WooCommerce's thumbnail-nav markup is <li><img class="flex-active">...
   with no <a> wrapper — the <li> itself is the click target flexslider
   binds to, so it's turned into the dot directly (the now-hidden <img>
   keeps working as the click target's content, just invisible). */
.hmedical-pdp-gallery-col .flex-control-nav li {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #D3DFE3 !important;
  overflow: hidden;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.hmedical-pdp-gallery-col .flex-control-nav li img { display: none !important; }
.hmedical-pdp-gallery-col .flex-control-nav li:has(img.flex-active) { width: 22px !important; background: var(--hm-accent) !important; }

/* Explicit prev/next controls (JS-inserted) — the hover-zoom on the main
   image makes the tiny dots hard to reach/notice, so these give a larger,
   more discoverable way to move between photos. Same visual language as
   the shop page's chip scroll arrows. */
.hmedical-pdp-gallery-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--hm-border);
  border-radius: 999px;
  color: var(--hm-accent);
  box-shadow: 0 4px 14px rgba(15,42,51,.16);
}
.hmedical-pdp-gallery-arrow:hover { background: var(--hm-accent); color: #FFFFFF; border-color: var(--hm-accent); }
.hmedical-pdp-gallery-arrow--prev { inset-inline-start: 14px; }
.hmedical-pdp-gallery-arrow--next { inset-inline-end: 14px; }

/* Sits in the same visual strip as the gallery's dot indicators (below the
   image, not overlaid on it) — matching the design: dots centered, the
   favorite pill anchored to one side of that same row. */
.hmedical-pdp-wishlist {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 14px;
  z-index: 2;
}
.hmedical-pdp-wishlist .tinvwl_add_to_wishlist_button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hm-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hm-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.hmedical-pdp-wishlist .tinvwl_add_to_wishlist_button:hover,
.hmedical-pdp-wishlist .tinvwl_add_to_wishlist_button.tinv-wishlist-added { color: var(--hm-danger); border-color: var(--hm-danger); }
.hmedical-pdp-wishlist .tinvwl-tooltip { display: none !important; }
/* The wishlist plugin auto-inserts its own default-position link(s)
   somewhere in the summary column (position depends on its own settings) —
   hide any/all of those unconditionally, since the only wishlist control
   in the summary column should ever be the plugin's own auto-inserted
   copy, never hmedical-pdp-wishlist (that one only ever lives in the
   gallery column). */
.hmedical-pdp-summary-col .tinv-wraper { display: none; }

.hmedical-pdp-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hm-accent);
}
.hmedical-pdp-summary-col .wp-block-post-title {
  margin: 0;
  font-size: clamp(20px, 4.4vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hmedical-pdp-summary-col .price {
  font-size: 26px;
  font-weight: 700;
  color: var(--hm-accent);
}
.hmedical-pdp-summary-col .price ins { text-decoration: none; }
.hmedical-pdp-summary-col .price del { opacity: .55; font-size: 15px; margin-inline-end: 6px; font-weight: 500; }
.hmedical-discount-badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 3px 9px;
  background: #A9652B;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: middle;
}

.hmedical-pdp-hidden-excerpt { display: none; }

/* Add-to-cart form: quantity stepper + button, restyled to the design
   system's pill language. WooCommerce's own quantity/variation/AJAX JS
   keeps driving this markup — only the CSS skin changes. */
.hmedical-pdp-summary-col .wp-block-woocommerce-add-to-cart-form,
.hmedical-pdp-summary-col .wc-block-add-to-cart-form { margin-top: 4px; margin-bottom: 0; }
.hmedical-pdp-summary-col .stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}
.hmedical-pdp-summary-col .stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.hmedical-pdp-summary-col .stock.in-stock { color: var(--hm-success); }
.hmedical-pdp-summary-col .stock.out-of-stock,
.hmedical-pdp-summary-col .stock.available-on-backorder { color: var(--hm-subtle); }

.hmedical-pdp-summary-col form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* WooCommerce's own stylesheet gives form.cart a clearfix (::before/::after
   with content:"" + display:table), meant for its old float-based layout.
   Once this rule turns the form into a flex container, those two empty
   pseudo-elements become real flex items — each one still claims a "gap"
   slot next to it, which is what was pushing the quantity stepper and the
   button in 10px from either edge with no visible content there. Content
   from actual browser inspection, not a guess: killing them entirely is
   safe since nothing here depends on the old float-clearing behavior. */
.hmedical-pdp-summary-col form.cart::before,
.hmedical-pdp-summary-col form.cart::after {
  content: none !important;
  display: none !important;
}
/* WooCommerce's own block CSS sets padding/line-height on the quantity
   input that make it taller than this 46px pill, which is what was
   pushing the number visually off-center — box-sizing plus explicit
   zeroed padding and a line-height equal to the pill's own height forces
   it back to sitting dead-center regardless of what WC's stylesheet does. */
.hmedical-pdp-summary-col .quantity {
  display: flex !important;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  height: 46px !important;
  margin: 0;
  overflow: hidden;
}
.hmedical-pdp-summary-col .quantity .qty {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: center !important;
  line-height: 46px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--hm-text) !important;
  -moz-appearance: textfield;
}
.hmedical-pdp-summary-col .quantity .qty::-webkit-inner-spin-button,
.hmedical-pdp-summary-col .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hmedical-pdp-summary-col .wc-block-components-quantity-selector__button {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 46px !important;
  flex: none;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 18px;
  line-height: 1;
  color: var(--hm-muted);
  cursor: pointer;
}
.hmedical-pdp-summary-col .wc-block-components-quantity-selector__button:hover { color: var(--hm-accent); }
.hmedical-pdp-summary-col button.single_add_to_cart_button {
  flex: 1;
  min-width: 130px;
  height: 46px;
  background: var(--hm-accent) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 15px;
  font-weight: 700 !important;
  transition: opacity .15s ease, background .15s ease;
}
.hmedical-pdp-summary-col button.single_add_to_cart_button:hover { background: var(--hm-accent-dark) !important; }
.hmedical-pdp-summary-col .woocommerce-variation-add-to-cart { flex: 1 1 100%; display: flex; gap: 10px; }

/* Disabled/loading state, from click until the AJAX add-to-cart request
   resolves (success or failure) — applies to both the real button and the
   sticky bar's own CTA, since a click on either disables both. */
.hmedical-pdp-summary-col button.single_add_to_cart_button:disabled,
.hmedical-pdp-summary-col button.single_add_to_cart_button.loading,
.hmedical-pdp-sticky-bar__cta:disabled,
.hmedical-pdp-sticky-bar__cta.loading {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.hmedical-pdp-summary-col button.single_add_to_cart_button:disabled:hover { background: var(--hm-accent) !important; }

/* Quick actions: WhatsApp order + call, one row of two buttons matching
   the site's own .hmedical-btn-lg system (12px radius, 14.5px/600 text) —
   the WhatsApp button only differs by a flat green background. Both
   stretch to the row's tallest sibling (align-items: stretch, no fixed
   height) so the WhatsApp button's longer label wrapping to two lines
   doesn't leave it taller than the call button.
   #sendbtn (the WhatsApp order plugin's own element id, left untouched
   since a Code Snippet keys the Google Ads conversion event off it) ships
   with its OWN !important-laden CSS — 4px radius, a glow box-shadow, a
   10px vertical margin (which alone was enough to throw off the row's
   height-matching), translateY hover lift, letter-spacing, etc. Every one
   of those has to be fought with an equally-!important rule of our own,
   scoped by the exact same selector so nothing here is guessing at
   specificity. */
.hmedical-pdp-quick-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.hmedical-pdp-quick-actions a#sendbtn.shortcode_wa_button,
.hmedical-pdp-call-btn {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  min-height: 44px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: center;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.hmedical-pdp-quick-actions a#sendbtn.shortcode_wa_button {
  background: #22A559 !important;
  color: #FFFFFF !important;
  border: 0 !important;
}
.hmedical-pdp-quick-actions a#sendbtn.shortcode_wa_button:hover {
  background: #1C8C4C !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.hmedical-pdp-call-btn {
  border: 1px solid var(--hm-border);
  color: var(--hm-text);
  background: #FFFFFF;
}
.hmedical-pdp-call-btn:hover { border-color: var(--hm-accent); color: var(--hm-accent); }

.hmedical-pdp-summary-col .wp-block-woocommerce-product-meta {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hm-border-light);
  font-size: 12.5px;
  color: var(--hm-subtle);
}
.hmedical-pdp-summary-col .wp-block-woocommerce-product-meta a { color: var(--hm-subtle); }

.hmedical-pdp-trust { margin-top: 26px; }

/* Tabs (description / additional information / reviews) — WooCommerce's
   own classic tabs markup and review form, restyled only. */
.hmedical-pdp-tabs { margin-top: 28px; }
.hmedical-pdp-tabs ul.tabs.wc-tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hm-border);
  overflow-x: auto;
}
.hmedical-pdp-tabs ul.tabs.wc-tabs li { margin: 0; }
.hmedical-pdp-tabs ul.tabs.wc-tabs li a {
  display: block;
  padding: 12px 14px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--hm-subtle) !important;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  background: none !important;
}
.hmedical-pdp-tabs ul.tabs.wc-tabs li.active a {
  color: var(--hm-accent) !important;
  font-weight: 700;
  border-bottom-color: var(--hm-accent) !important;
}
.hmedical-pdp-tabs .woocommerce-Tabs-panel {
  padding: 18px 0;
  font-size: 14px;
  line-height: 1.9;
  color: #333F41;
}
.hmedical-pdp-tabs .star-rating { color: var(--hm-accent); }
.hmedical-pdp-tabs #review_form .form-submit input {
  height: 44px;
  padding: 0 20px;
  background: var(--hm-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.hmedical-pdp-related { margin-top: 28px; }

/* Sticky add-to-cart bar — shown on every viewport width (the mockup
   doesn't hide it on desktop either), stacked above the site's own
   persistent bottom nav on mobile since that's only present <900px. Always
   in-flow (no display:none/hidden toggling, which can't be animated) and
   instead slides/fades via opacity+transform so appearing/disappearing is
   a transition, not an instant cut. */
/* z-index 20: below the header (40), bottom nav (50), search panel (70)
   and drawer (80) — it was at 45 before, which let it paint above the
   mobile side menu since both are position:fixed. */
/* WordPress's own global-styles CSS constrains every direct child of a
   .is-layout-constrained <main> to the site's content width (unless it
   carries an alignfull/alignwide class this dynamic block doesn't declare
   support for) — that's what was capping this at 1120px instead of the
   real viewport width, so max-width/margin need an explicit override. */
.hmedical-pdp-sticky-bar {
  position: fixed;
  bottom: 62px;
  inset-inline: 0;
  max-width: none !important;
  margin: 0 !important;
  z-index: 20;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hm-border);
  padding: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 -8px 24px rgba(15,42,51,.08);
}
.hmedical-pdp-sticky-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* The bar's own background/border spans the full browser width; its
   content is capped to the site's normal content width and centered,
   same as .hmedical-main, instead of stretching edge-to-edge on wide
   desktop screens. */
.hmedical-pdp-sticky-bar__inner {
  max-width: var(--hm-content);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 900px) {
  .hmedical-pdp-sticky-bar { bottom: 0; }
}

/* Floating "added to cart" toast — sits above the (always-visible) sticky
   bar and mobile bottom nav rather than behind/under them. */
.hmedical-pdp-toast {
  position: fixed;
  bottom: 150px;
  inset-inline: 16px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: var(--hm-accent-dark);
  color: #FFFFFF;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(15,42,51,.22);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.hmedical-pdp-toast.is-visible { opacity: 1; transform: translateY(0); }
.hmedical-pdp-toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hm-accent);
  border-radius: 999px;
}
.hmedical-pdp-toast__text { flex: 1; min-width: 0; }
@media (min-width: 900px) {
  .hmedical-pdp-toast { bottom: 90px; inset-inline-start: auto; inset-inline-end: 24px; max-width: 340px; }
}
.hmedical-pdp-sticky-bar__price { flex: none; }
.hmedical-pdp-sticky-bar__price-label { display: block; font-size: 11px; color: var(--hm-subtle); }
.hmedical-pdp-sticky-bar__price-value { font-size: 16px; font-weight: 700; color: var(--hm-accent); }
.hmedical-pdp-sticky-bar__price-value .price { font-size: inherit; font-weight: inherit; color: inherit; }
.hmedical-pdp-sticky-bar__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  height: 42px;
  margin-inline-start: auto;
  flex: none;
}
.hmedical-pdp-sticky-bar__qty-btn {
  width: 36px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--hm-muted);
}
.hmedical-pdp-sticky-bar__qty-value { width: 28px; text-align: center; font-size: 13.5px; font-weight: 700; }
.hmedical-pdp-sticky-bar__cta {
  flex: 1.2;
  height: 42px;
  background: var(--hm-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  transition: opacity .15s ease, background .15s ease;
}
.hmedical-pdp-sticky-bar__cta:hover { background: var(--hm-accent-dark); }

/* ---------- Cart page ---------- */

.hmedical-main.hmedical-cart-page { max-width: 780px; padding-bottom: 128px; }
@media (min-width: 900px) {
  .hmedical-main.hmedical-cart-page { padding-bottom: 90px; }
}

.hmedical-cart__heading {
  margin: 6px 0 16px;
  font-size: clamp(20px, 4.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hmedical-cart-empty { text-align: center; padding: 60px 16px; }
.hmedical-cart-empty__icon {
  width: 76px; height: 76px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--hm-accent-tint); border-radius: 999px; color: var(--hm-accent);
}
.hmedical-cart-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.hmedical-cart-empty__sub { margin: 0 0 18px; font-size: 13.5px; color: var(--hm-subtle); }
.hmedical-cart-empty .hmedical-btn-lg { display: inline-flex; }

.hmedical-cart__items { display: flex; flex-direction: column; }
.hmedical-cart-item {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--hm-border-light);
  transition: opacity .15s ease;
}
.hmedical-cart-item.is-busy { opacity: .55; pointer-events: none; }
.hmedical-cart-item__img {
  flex: none; width: 74px; height: 74px;
  background: var(--hm-surface-alt); border-radius: 12px; padding: 8px; display: block;
}
.hmedical-cart-item__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hmedical-cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hmedical-cart-item__row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hmedical-cart-item__name { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--hm-text); text-decoration: none; }
.hmedical-cart-item__remove {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  background: transparent; border: 0; color: #B7C4C8; font-size: 17px; cursor: pointer; line-height: 1;
}
.hmedical-cart-item__remove:hover { color: var(--hm-danger); }
.hmedical-cart-item__unit-price { font-size: 13px; color: var(--hm-subtle); }
.hmedical-cart-item__row-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.hmedical-cart-item__line-total { font-size: 14.5px; font-weight: 700; color: var(--hm-accent); }

.hmedical-cart-qty { display: flex; align-items: center; border: 1px solid var(--hm-border); border-radius: 10px; height: 34px; }
.hmedical-cart-qty__btn {
  width: 32px; height: 100%; background: transparent; border: 0;
  font-size: 16px; color: var(--hm-muted); cursor: pointer; line-height: 1;
}
.hmedical-cart-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.hmedical-cart-qty__btn:hover:not(:disabled) { color: var(--hm-accent); }
.hmedical-cart-qty__value { width: 26px; text-align: center; font-size: 13.5px; font-weight: 700; }

.hmedical-cart-coupon { margin-top: 18px; }
.hmedical-cart-coupon__form { display: flex; gap: 8px; }
.hmedical-cart-coupon__input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--hm-border); border-radius: 12px; font-size: 14px; outline: none;
}
.hmedical-cart-coupon__input:focus { border-color: var(--hm-accent); }
.hmedical-cart-coupon__apply {
  flex: none; height: 46px; padding: 0 16px;
  background: var(--hm-text); color: #FFFFFF; border: 0; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.hmedical-cart-coupon__apply:disabled { opacity: .6; cursor: not-allowed; }
.hmedical-cart-coupon__msg { margin: 8px 0 0; font-size: 12.5px; }
.hmedical-cart-coupon__msg.is-error { color: var(--hm-danger); }
.hmedical-cart-coupon__msg.is-success { color: var(--hm-success); }
.hmedical-cart-coupon__applied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hmedical-cart-coupon__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; background: var(--hm-success-tint); color: var(--hm-success);
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.hmedical-cart-coupon__chip button {
  width: 18px; height: 18px; display: grid; place-items: center;
  background: rgba(18,122,94,.15); border: 0; border-radius: 999px; color: inherit; font-size: 13px; cursor: pointer; line-height: 1;
}

.hmedical-cart-totals {
  margin-top: 20px; padding: 16px; border: 1px solid var(--hm-border); border-radius: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.hmedical-cart-totals__row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--hm-text); }
.hmedical-cart-totals__row span:first-child { color: var(--hm-muted); }
.hmedical-cart-totals__row span:last-child { font-weight: 600; }
.hmedical-cart-totals__row--discount span:last-child { color: var(--hm-success); }
.hmedical-cart-totals__shipping-note { font-size: 13px; }
.hmedical-cart-totals__row--grand {
  border-top: 1px dashed var(--hm-border); margin-top: 4px; padding-top: 10px;
  align-items: baseline;
}
.hmedical-cart-totals__row--grand span:first-child { font-size: 15px; font-weight: 700; color: var(--hm-text); }
.hmedical-cart-totals__grand-amount { font-size: 21px; font-weight: 700; color: var(--hm-accent); }

.hmedical-cart__continue {
  display: flex; align-items: center; justify-content: center; margin-top: 14px;
  height: 44px; font-size: 13.5px; font-weight: 600; color: var(--hm-muted); text-decoration: none;
}
.hmedical-cart__continue:hover { color: var(--hm-accent); }
.hmedical-cart__badges {
  margin-top: 20px; display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 12px; background: var(--hm-surface); border-radius: 12px;
  font-size: 12px; color: var(--hm-muted); flex-wrap: wrap;
}
.hmedical-cart__badge { display: flex; align-items: center; gap: 6px; }

/* Sticky checkout bar — same full-width-bg/content-capped-inner pattern as
   .hmedical-pdp-sticky-bar (WordPress's global-styles CSS otherwise
   constrains any direct .is-layout-constrained <main> child to
   --hm-content), stacked above the persistent bottom nav on mobile. */
.hmedical-cart-sticky {
  position: fixed; bottom: 62px; inset-inline: 0; z-index: 20;
  max-width: none !important; margin: 0 !important;
  background: rgba(255,255,255,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hm-border);
  box-shadow: 0 -8px 24px rgba(15,42,51,.08);
}
.hmedical-cart-sticky__inner {
  max-width: var(--hm-content); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.hmedical-cart-sticky__total-label { display: block; font-size: 11px; color: var(--hm-subtle); }
.hmedical-cart-sticky__total-amount { font-size: 16px; font-weight: 700; color: var(--hm-accent); }
.hmedical-cart-sticky__cta {
  flex: 1; display: flex; align-items: center; justify-content: center; height: 44px;
  background: var(--hm-accent); color: #FFFFFF; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.hmedical-cart-sticky__cta:hover { background: var(--hm-accent-dark); color: #FFFFFF; }
@media (min-width: 900px) {
  .hmedical-cart-sticky { bottom: 0; }
}

/* Toast — mirrors .hmedical-pdp-toast's positioning/animation, kept as a
   separate rule set since it's a distinct component instance on this page. */
.hmedical-cart-toast {
  position: fixed; bottom: 150px; inset-inline: 16px; z-index: 25;
  padding: 13px 15px; background: var(--hm-accent-dark); color: #FFFFFF;
  border-radius: 14px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(15,42,51,.22);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.hmedical-cart-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 900px) {
  .hmedical-cart-toast { bottom: 24px; inset-inline-start: auto; inset-inline-end: 24px; max-width: 340px; }
}

/* ---------- Checkout page ---------- */

.hmedical-main.hmedical-checkout-page { max-width: 780px; padding-bottom: 108px; }
@media (min-width: 900px) {
  .hmedical-main.hmedical-checkout-page { padding-bottom: 70px; }
}

/* Redirect-gateway payment notices (e.g. SuperPay's real "Payment was not
   completed" wc_add_notice() on return from an offsite payment page) — a
   fixed top banner rather than an inline block, since it needs to grab
   attention on a page the shopper is landing back on mid-flow, not just be
   part of the scroll. Slides/fades in on load and stays until dismissed
   (unlike the add-to-cart toasts, which auto-hide — a payment failure
   shouldn't disappear on its own). WooCommerce's own real notice markup is
   rendered as-is inside; only its own default appearance is reset below. */
.hmedical-checkout-notice {
  position: fixed;
  top: 12px;
  inset-inline: 12px;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 44px 14px 16px;
  background: var(--hm-danger);
  color: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,42,51,.28);
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .28s ease, transform .28s ease;
}
.hmedical-checkout-notice.is-visible { opacity: 1; transform: translateY(0); }
.hmedical-checkout-notice__icon {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
}
.hmedical-checkout-notice__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.hmedical-checkout-notice__close:hover { background: rgba(255,255,255,.3); }
.hmedical-checkout-notice__body { flex: 1; min-width: 0; }
.hmedical-checkout-notice__body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hmedical-checkout-notice__body li { font-size: 13.5px; line-height: 1.5; }
.hmedical-checkout-notice__body li:first-child { font-weight: 700; font-size: 14.5px; }
/* This WooCommerce version's real notices/error.php template renders WC
   Blocks' own notice-banner component (`.wc-block-components-notice-banner`,
   with its own embedded icon), not the older plain `<ul class="woocommerce-
   error">` markup — confirmed live, not assumed. It carries its own default
   pink-card look (light background, dark text, its own icon) completely
   independent of this banner's red/white design, rendering as a second,
   mismatched card nested inside this one. Reset to flow as plain text. */
.hmedical-checkout-notice__body .wc-block-components-notice-banner {
  display: block !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hmedical-checkout-notice__body .wc-block-components-notice-banner > svg { display: none !important; }
.hmedical-checkout-notice__body .wc-block-components-notice-banner__content {
  padding: 0 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.hmedical-checkout-notice__body a { color: inherit; text-decoration: underline; }
@media (min-width: 640px) {
  .hmedical-checkout-notice { inset-inline: auto; inset-inline-end: 20px; max-width: 400px; }
}

.hmedical-checkout__login-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; background: var(--hm-accent-tint); border-radius: 13px;
  font-size: 13.5px;
}
.hmedical-checkout__login-hint a { font-weight: 700; }

.hmedical-checkout__form { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; margin-bottom: 22px; }
.hmedical-checkout__section-title { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; }
.hmedical-checkout__fields { display: flex; flex-direction: column; gap: 10px; }

.hmedical-input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--hm-border); border-radius: 12px;
  font-size: 14.5px; color: var(--hm-text); background: #FFFFFF; outline: none;
  font-family: inherit;
}
.hmedical-input:focus { border-color: var(--hm-accent); }
.hmedical-input::placeholder { color: #93A9B2; }
.hmedical-input--textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
/* type=tel inputs get browser LTR heuristics by default even inside an RTL
   page; force the field (and its Arabic placeholder) back to right-aligned.
   The WAWP plugin's own flag/country-code widget (see PHP: name="billing_phone")
   later sets its own inline direction/alignment once it attaches — this is
   just the correct-looking baseline before/without that JS. */
.hmedical-input[type="tel"] { text-align: right; }

.hmedical-checkout__checkbox-row {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--hm-muted);
  margin-top: 2px; cursor: pointer;
}
.hmedical-checkout__checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--hm-accent); }
.hmedical-checkout__shipping-fields { margin-top: 10px; }
.hmedical-checkout__shipping-fields[hidden] { display: none; }

.hmedical-checkout__gateways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hmedical-checkout__gateway {
  border: 1.5px solid var(--hm-border); border-radius: 13px; overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.hmedical-checkout__gateway.is-active { border-color: var(--hm-accent); background: var(--hm-accent-tint); }
.hmedical-checkout__gateway-row {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer;
}
.hmedical-checkout__gateway:focus-within { outline: 2px solid var(--hm-accent); outline-offset: 2px; }
.hmedical-checkout__gateway input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.hmedical-checkout__gateway-icon { flex: none; display: flex; align-items: center; color: var(--hm-accent-dark); }
.hmedical-checkout__gateway-icon img { height: 22px; width: auto; max-width: 40px; object-fit: contain; }
.hmedical-checkout__gateway-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.hmedical-checkout__gateway-dot {
  flex: none; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--hm-border);
  position: relative;
}
.hmedical-checkout__gateway.is-active .hmedical-checkout__gateway-dot { border-color: var(--hm-accent); }
.hmedical-checkout__gateway.is-active .hmedical-checkout__gateway-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--hm-accent);
}
/* Drawer: the real $gateway->payment_fields() output (description text
   today; potentially an embedded Paymob widget/iframe once its own JS
   mounts into this exact .payment_box.payment_method_{id} container —
   see the PHP comment above hmedical_checkout_payment_methods_html()).
   max-height is the animatable property (display:none/[hidden] can't
   transition); assets/js/checkout.js sets the exact inline px height on
   open/close so the slide duration matches real content height instead of
   a fixed guess. The is-open max-height below is just the pre-JS/first-paint
   fallback (immediately overridden by JS on DOMContentLoaded). */
.hmedical-checkout__gateway-drawer {
  max-height: 0; overflow: hidden; opacity: 0; padding: 0 14px;
  transition: max-height .28s ease, opacity .22s ease, padding .28s ease;
}
.hmedical-checkout__gateway-drawer.is-open {
  max-height: none; opacity: 1; padding: 0 14px 14px;
}
.hmedical-checkout__gateway-drawer p { margin: 0; }
.hmedical-checkout__no-gateways { font-size: 13.5px; color: var(--hm-danger); }

.hmedical-checkout__summary-bar { display: flex; align-items: center; gap: 8px; }
.hmedical-checkout__summary-toggle {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--hm-surface); border: 0; border-radius: 13px;
  font-size: 14.5px; font-weight: 700; color: var(--hm-text); cursor: pointer;
}
.hmedical-checkout__summary-edit {
  flex: none; font-size: 13px; font-weight: 600; color: var(--hm-accent); text-decoration: none;
  padding: 0 4px;
}
.hmedical-checkout__summary-edit:hover { color: var(--hm-accent-dark); }
.hmedical-checkout__summary-chevron { transition: transform .18s ease; }
.hmedical-checkout__summary-toggle.is-open .hmedical-checkout__summary-chevron { transform: rotate(180deg); }
.hmedical-checkout__summary-items { padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 10px; }
.hmedical-checkout__summary-items[hidden] { display: none; }
.hmedical-checkout__summary-item { display: flex; align-items: center; gap: 10px; }
.hmedical-checkout__summary-item-img { flex: none; width: 44px; height: 44px; background: var(--hm-surface-alt); border-radius: 9px; padding: 5px; display: block; }
.hmedical-checkout__summary-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hmedical-checkout__summary-item-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.hmedical-checkout__summary-item-name span { color: var(--hm-subtle); font-weight: 500; }
.hmedical-checkout__summary-item-total { flex: none; font-size: 13px; font-weight: 700; }

.hmedical-checkout__totals {
  margin-top: 14px; padding: 16px; border: 1px solid var(--hm-border); border-radius: 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.hmedical-checkout__totals-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--hm-text); }
.hmedical-checkout__totals-row span:first-child { color: var(--hm-muted); }
.hmedical-checkout__totals-row span:last-child { font-weight: 600; }
.hmedical-checkout__totals-row--discount span:last-child { color: var(--hm-success); }
.hmedical-checkout__shipping-note { font-size: 12.5px; }
.hmedical-checkout__totals-row--grand {
  border-top: 1px dashed var(--hm-border); margin-top: 2px; padding-top: 9px; align-items: baseline;
}
.hmedical-checkout__totals-row--grand span:first-child { font-size: 14.5px; font-weight: 700; color: var(--hm-text); }
.hmedical-checkout__totals-grand-amount { font-size: 19px; font-weight: 700; color: var(--hm-accent); }

/* Sticky submit bar — same full-width-bg/content-capped-inner pattern
   documented for .hmedical-pdp-sticky-bar / .hmedical-cart-sticky (see
   TECHNICAL_DOCS.md §4 "Reusable pattern"): WordPress's global-styles CSS
   otherwise constrains any direct .is-layout-constrained <main> child to
   --hm-content, so max-width/margin need the !important overrides below. */
.hmedical-checkout-sticky {
  position: fixed; bottom: 62px; inset-inline: 0; z-index: 20;
  max-width: none !important; margin: 0 !important;
  background: rgba(255,255,255,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hm-border);
  box-shadow: 0 -8px 24px rgba(15,42,51,.08);
}
.hmedical-checkout-sticky__inner {
  max-width: var(--hm-content); margin: 0 auto; padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.hmedical-checkout-sticky__error { margin: 0; font-size: 12px; color: var(--hm-danger); text-align: center; }
.hmedical-checkout-sticky__cta {
  height: 50px; background: var(--hm-accent); color: #FFFFFF; border: 0; border-radius: 13px;
  font-size: 15.5px; font-weight: 700; cursor: pointer; width: 100%;
}
.hmedical-checkout-sticky__cta:hover { background: var(--hm-accent-dark); }
.hmedical-checkout-sticky__cta:disabled { opacity: .6; cursor: not-allowed; }
@media (min-width: 900px) {
  .hmedical-checkout-sticky { bottom: 0; }
}

.hmedical-checkout-thankyou { text-align: center; padding: 60px 16px; max-width: 420px; margin: 0 auto; }
.hmedical-checkout-thankyou__icon {
  width: 84px; height: 84px; margin: 0 auto 18px; display: grid; place-items: center;
  background: var(--hm-success-tint); border-radius: 999px; color: var(--hm-success);
}
.hmedical-checkout-thankyou__title { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.hmedical-checkout-thankyou__label { margin: 0 0 4px; font-size: 14px; color: var(--hm-muted); }
.hmedical-checkout-thankyou__number { margin: 0 0 20px; font-size: 19px; font-weight: 700; color: var(--hm-accent); font-variant-numeric: tabular-nums; }
.hmedical-checkout-thankyou__desc { margin: 0 0 22px; font-size: 13.5px; color: var(--hm-muted); line-height: 1.7; }
.hmedical-checkout-thankyou__actions { display: flex; flex-direction: column; gap: 10px; }
.hmedical-checkout-thankyou__actions .hmedical-btn-lg { justify-content: center; }

/* ---------- My Account page ----------
   Real WooCommerce classic `[woocommerce_my_account]` markup (+ the
   wishlist plugin's own tab, now a genuine account endpoint — see
   TECHNICAL_DOCS.md), CSS-skinned only. No markup rebuilt: every selector
   below targets WooCommerce/plugin-authored classes as they already are. */

.hmedical-main.hmedical-account-page { max-width: 900px; }

.hmedical-account-page .wc-block-breadcrumbs,
.hmedical-account-page .woocommerce-breadcrumb {
  font-size: 12.5px;
  color: var(--hm-subtle);
  margin: 14px 0 4px;
}
.hmedical-account-page .woocommerce-breadcrumb a { color: var(--hm-subtle); text-decoration: none; }
.hmedical-account-page .woocommerce-breadcrumb a:hover { color: var(--hm-accent); }

.hmedical-account-page .wp-block-post-title {
  font-size: 21px;
  margin: 6px 0 18px;
}

/* Notices — WooCommerce login/save-success/error banners and the
   WC-Blocks-styled notice used by the downloads tab, unified to one look. */
.hmedical-account-page .woocommerce-message,
.hmedical-account-page .woocommerce-error,
.hmedical-account-page .woocommerce-info,
.hmedical-account-page .wc-block-components-notice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--hm-accent-tint);
  color: var(--hm-text);
}
.hmedical-account-page .woocommerce-message svg,
.hmedical-account-page .woocommerce-info svg,
.hmedical-account-page .wc-block-components-notice-banner svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--hm-accent);
}
.hmedical-account-page .woocommerce-error { background: #FBEAE7; color: var(--hm-danger); }
.hmedical-account-page .wc-block-components-notice-banner__content { flex: 1; min-width: 0; }
.hmedical-account-page .woocommerce-message a.button,
.hmedical-account-page .woocommerce-info a.button,
.hmedical-account-page .wc-block-components-notice-banner a.button {
  height: 36px;
  padding: 0 16px;
  font-size: 12.5px;
}

/* Layout: nav + content side by side on desktop, nav stacked above content
   on mobile as a 2-column grid of icon tiles — the same visual language as
   the homepage's .hmedical-info-strip cards — instead of a scrolling pill
   bar. The old pill row scrolled 8 tabs off-screen with no visual hint that
   more existed, which is what made it hard to use on a phone. */
.hmedical-account-page div.woocommerce {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 880px) {
  .hmedical-account-page div.woocommerce { flex-direction: row; align-items: flex-start; gap: 26px; }
}

.hmedical-account-page .woocommerce-MyAccount-navigation { flex: none; }
@media (min-width: 880px) {
  /* flex:0 (not 0 0 220px) — confirmed via live inspect-element testing:
     lets the sidebar shrink to its pill-buttons' real content width instead
     of reserving a fixed 220px, leaving more room for the table next to it. */
  .hmedical-account-page .woocommerce-MyAccount-navigation { flex: 0; position: sticky; top: 90px; }
}
.hmedical-account-page .woocommerce-MyAccount-navigation ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 880px) {
  .hmedical-account-page .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; gap: 5px; }
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link { margin: 0; }
.hmedical-account-page .woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px;
  border: 1px solid var(--hm-border);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--hm-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
@media (min-width: 880px) {
  .hmedical-account-page .woocommerce-MyAccount-navigation-link a { padding: 8px 10px; border-radius: 12px; font-size: 13.5px; }
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link a:hover { border-color: var(--hm-accent); color: var(--hm-accent); }
.hmedical-account-page .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--hm-accent);
  border-color: var(--hm-accent);
  color: #FFFFFF;
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--hm-danger); }
.hmedical-account-page .woocommerce-MyAccount-navigation-link--customer-logout a:hover { border-color: var(--hm-danger); color: var(--hm-danger); }

/* Icon badge — a 34x34 tinted rounded square per tab, same shape/size
   language as .hmedical-info-strip__icon on the homepage. Icons are baked
   as flat-colored SVGs (not masks) so each tab can carry its own fixed
   accent/danger tint without extra markup. */
.hmedical-account-page .woocommerce-MyAccount-navigation-link a::before {
  content: '';
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background-color: var(--hm-accent-tint);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link.is-active a::before { background-color: rgba(255,255,255,.25); }
.hmedical-account-page .woocommerce-MyAccount-navigation-link--customer-logout a::before { background-color: #FBEAE7; }

.hmedical-account-page .woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B6E9C'%3E%3Ccircle cx='6' cy='6' r='1.7'/%3E%3Ccircle cx='12' cy='6' r='1.7'/%3E%3Ccircle cx='18' cy='6' r='1.7'/%3E%3Ccircle cx='6' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='18' cy='12' r='1.7'/%3E%3Ccircle cx='6' cy='18' r='1.7'/%3E%3Ccircle cx='12' cy='18' r='1.7'/%3E%3Ccircle cx='18' cy='18' r='1.7'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4-8 4-8-4z'/%3E%3Cpath d='M4 8v8l8 4 8-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5.5 20c.7-3.4 3.4-5 6.5-5s5.8 1.6 6.5 5'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--saved-cards a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--wishlist a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6E9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.2A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 2.8C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}
.hmedical-account-page .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

.hmedical-account-page .woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  padding: 20px;
}
@media (max-width: 640px) {
  .hmedical-account-page .woocommerce-MyAccount-content { padding: 16px; border-radius: 14px; }
}
.hmedical-account-page .woocommerce-MyAccount-content > p { font-size: 14px; line-height: 1.9; color: var(--hm-muted); margin: 0 0 10px; }
.hmedical-account-page .woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }
.hmedical-account-page .woocommerce-MyAccount-content strong { color: var(--hm-text); }
.hmedical-account-page .woocommerce-MyAccount-content h2 { font-size: 16px; margin: 0 0 14px; }
/* WAWP's own phone field injects a bare, unstyled <h3> straight into the
   edit-account form (no class to hook) — falls back to the browser/theme
   default heading size otherwise. */
.hmedical-account-page .woocommerce-MyAccount-content h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hm-border-light);
}
.hmedical-account-page .woocommerce-MyAccount-content > p a { color: var(--hm-accent); font-weight: 600; text-decoration: none; }
.hmedical-account-page .woocommerce-MyAccount-content > p a:hover { color: var(--hm-accent-dark); text-decoration: underline; }

/* Buttons — every real "view order", "save changes", "add to cart",
   "download" etc. button/link WooCommerce or the wishlist plugin renders. */
.hmedical-account-page .button,
.hmedical-account-page button.button,
.hmedical-account-page input.button,
.hmedical-account-page a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--hm-accent) !important;
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  border: 0;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.hmedical-account-page .button:hover,
.hmedical-account-page button.button:hover,
.hmedical-account-page input.button:hover,
.hmedical-account-page a.button:hover { background: var(--hm-accent-dark) !important; }

/* WooCommerce's own woocommerce-blocktheme-rtl.css sets the orders-table
   action links (pay/view/cancel) to `display:block; text-align:center`
   with a higher-specificity selector than the generic .button rule above,
   which put the text at the top of the 42px-tall button instead of
   centered. Force flex centering back with matching specificity + !important. */
.hmedical-account-page .woocommerce-orders-table__cell-order-actions a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.hmedical-account-page .woocommerce-orders-table__cell-order-actions a.button:last-child { margin-bottom: 0; }

/* Orders table + wishlist table — same visual treatment, both real
   `shop_table`-style tables (core WC / wishlist plugin markup). */
.hmedical-account-page table.shop_table,
.hmedical-account-page table.tinvwl-table-manage-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hmedical-account-page table.shop_table th,
.hmedical-account-page table.tinvwl-table-manage-list th {
  text-align: right;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hm-subtle);
  border-bottom: 1px solid var(--hm-border);
  white-space: nowrap;
}
.hmedical-account-page table.shop_table td,
.hmedical-account-page table.tinvwl-table-manage-list td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hm-border-light);
  vertical-align: middle;
}
.hmedical-account-page table.shop_table tr:last-child td,
.hmedical-account-page table.tinvwl-table-manage-list tr:last-child td { border-bottom: 0; }
/* WooCommerce's own mobile stylesheet (woocommerce-smallscreen.css) hides
   every stacked-row <th> outright below ~768px — for the orders table
   that's the order-number cell, so "#15969" silently disappeared on
   mobile with nothing marking which order a stacked card even was. */
.hmedical-account-page table.shop_table_responsive tbody th {
  display: block !important;
  padding: 12px 10px 2px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 0;
}
.hmedical-account-page table.shop_table_responsive tbody th a { color: var(--hm-text); text-decoration: none; }
.hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail img { border-radius: 8px; }
/* Both confirmed via live inspect-element testing (fixes the parent-sizing
   bug tracked since the mobile-card rebuild above): the table's real box
   was still sizing off the plugin's own default rules at some widths even
   with table-layout:fixed set below. `display:inline-grid` (bare-class
   selector, lower specificity than `table.tinvwl-table-manage-list` used
   for the mobile display:block override further down) gives the table a
   proper shrink-to-fit/grid formatting context on desktop without
   touching the mobile card layout, which still wins there on specificity. */
.hmedical-account-page .tinvwl-table-manage-list { display: inline-grid; }
.hmedical-account-page .tinv-wishlist .product-thumbnail img { max-width: 100%; }

/* `.tinv-wishlist` (real title + form) is the plugin's own flex container —
   and its real CSS switches it to `flex-direction:row` above ~768px (only
   `column` below that), putting `.tinv-header` and the real `<form>` side
   by side as two ~half-width flex items. That's the actual cause of the
   title reading as "inline with the table" rather than a spacing issue:
   both boxes really were sitting next to each other, each a separate
   column. `align-items` there also resolves to `flex-start` at that width
   (vs. an effective stretch below 768px), so the form never got a definite
   width either and shrank to fit its own content — collapsing the whole
   table (which is `table-layout:fixed` below) down to its columns' minimum
   size instead of spreading across the card. Forcing column + stretch here
   fixes both: the title becomes a real full-width block above the form,
   and the form gets a definite width for the table to actually fill. */
.hmedical-account-page .tinv-wishlist {
  flex-direction: column !important;
  align-items: stretch !important;
}
.hmedical-account-page .tinv-header h2 {
  font-size: 16px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hm-border);
}
.hmedical-account-page .tinv-wishlist form { overflow-x: auto; }
.hmedical-account-page table.tinvwl-table-manage-list tfoot td { border-bottom: 0; padding-top: 16px; }
.hmedical-account-page .tinvwl-to-left,
.hmedical-account-page .tinvwl-to-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.hmedical-account-page .tinvwl-input-group { display: flex; align-items: center; gap: 8px; }
.hmedical-account-page .tinvwl-input-group select { width: auto; min-width: 150px; }
/* The plugin bundles Bootstrap 3, whose `.input-group-btn{width:1%}` trick
   only makes sense inside Bootstrap's own `.input-group{display:table}`
   layout (it works together with `display:table-cell` to size the button
   to its content). Overriding `.tinvwl-input-group` to `display:flex`
   above breaks that pairing — the leftover `width:1%` gets taken literally
   as a flex-item width instead, squashing the button/span down to a few
   px and pushing its real ~73px-wide content out past its own left edge,
   which is what was forcing the horizontal scroll on this row specifically
   (both here and on the "تطبيق" button below). */
.hmedical-account-page .tinvwl-input-group-btn { width: auto; flex: none; }
/* Confirmed via live inspect-element testing — the bulk-action cluster
   (select + apply button) was still overflowing/misaligned in its footer
   cell at some widths under the flex rule above; sizing it to its own
   content instead fixes that. Higher specificity (.look_in added) than the
   base .tinvwl-to-right flex rule above, so this wins without touching
   .tinvwl-to-left. */
.hmedical-account-page .tinvwl-to-right.look_in { display: inline-block; }
@media (max-width: 640px) {
  .hmedical-account-page table.shop_table { display: block; overflow-x: auto; }
}

/* ≥768px: a real, fluid table that always fits its card with no horizontal
   scroll — `table-layout:fixed` makes column widths a fixed % of the table
   itself (unlike the default `auto` layout used before, which sized every
   column from its content and made the table wider than the card at any
   realistic width, forcing the scroll this replaces). The date column is
   dropped here only — not hidden data, just not worth a column at this
   card's real width (max 900px main, minus the nav sidebar, is ~600-650px
   for the table itself even on a wide monitor, since the layout is
   deliberately centered/capped rather than growing forever) — it's still
   shown as plain text in each mobile card below. */
@media (min-width: 768px) {
  .hmedical-account-page table.tinvwl-table-manage-list { table-layout: fixed; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-cb,
  .hmedical-account-page table.tinvwl-table-manage-list .product-remove { width: 5%; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail { width: 14%; padding-left: 4px; padding-right: 4px; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-price { width: 12%; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-stock { width: 17%; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-action { width: 20%; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-date { display: none; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-name,
  .hmedical-account-page table.tinvwl-table-manage-list .product-stock p { white-space: normal; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-action .button {
    width: 100%;
    padding: 0 10px;
    font-size: 12.5px;
    white-space: normal;
    text-align: center;
  }
  /* Bulk-action footer row — confirmed via live inspect-element testing
     (the `.tinvwl-to-right.look_in { display:inline-block }` fix alone
     wasn't enough to actually straighten out the row on desktop). The
     footer `<td>` holds both `.tinvwl-to-left` (bulk-select controls) and
     `.tinvwl-to-right.look_in` (the action dropdown + apply button) as
     direct children — switching the `<td>` itself to `display:grid` stacks
     those two as real grid rows with a defined gap, instead of leaving
     them to whatever inline/flex layout each one resolves to on its own. */
  .hmedical-account-page table.tinvwl-table-manage-list tfoot { display: grid; }
  .hmedical-account-page table.tinvwl-table-manage-list tfoot td { display: grid; row-gap: 10px; }
}

/* <768px: real product cards instead of a squeezed table row — same visual
   language as the shop page's product cards (.hmedical-product-card):
   a big square photo on top, name, price, then this table's own real
   controls (select checkbox, remove, add-to-cart) laid out underneath via
   CSS Grid `grid-template-areas`, which can freely re-place each real `<td>`
   regardless of its position in the markup — no HTML rebuilt, every cell is
   still the plugin's own real element. */
@media (max-width: 767px) {
  .hmedical-account-page table.tinvwl-table-manage-list,
  .hmedical-account-page table.tinvwl-table-manage-list tbody { display: block; width: 100%; }
  .hmedical-account-page table.tinvwl-table-manage-list thead { display: none; }
  .hmedical-account-page table.tinvwl-table-manage-list tr.wishlist_item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "thumb thumb thumb thumb"
      "name  name  name  name"
      "price price price price"
      "stock stock date  date"
      "cb    cb    remove remove"
      "action action action action";
    gap: 10px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--hm-border);
    border-radius: 16px;
    background: #FFFFFF;
  }
  .hmedical-account-page table.tinvwl-table-manage-list tr.wishlist_item:last-child { margin-bottom: 0; }
  .hmedical-account-page table.tinvwl-table-manage-list tr.wishlist_item td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail {
    grid-area: thumb;
    position: relative;
    height: 0;
    /* !important: same specificity trap as .product-cb below — the
       sibling `tr.wishlist_item td { padding:0 }` reset ties on class
       count and wins on tag count, so it would otherwise zero this back
       out and collapse the whole image box to 0 height. */
    padding-top: 100% !important;
    background: var(--hm-surface-alt);
    border-radius: 12px;
    overflow: hidden;
  }
  .hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail a { position: absolute; inset: 6px; display: block; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-thumbnail img {
    width: 100%; height: 100%; object-fit: contain; border-radius: 0;
  }

  .hmedical-account-page table.tinvwl-table-manage-list .product-name { grid-area: name; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-name a {
    color: var(--hm-text); text-decoration: none; font-size: 14.5px; font-weight: 700; line-height: 1.4;
  }

  .hmedical-account-page table.tinvwl-table-manage-list .product-price { grid-area: price; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-price .woocommerce-Price-amount {
    font-size: 17px; font-weight: 800; color: var(--hm-accent);
  }

  .hmedical-account-page table.tinvwl-table-manage-list .product-stock { grid-area: stock; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-date { grid-area: date; text-align: left; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-stock .stock {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--hm-surface); color: var(--hm-subtle);
  }
  .hmedical-account-page table.tinvwl-table-manage-list .product-stock .stock.in-stock { background: var(--hm-success-tint); color: var(--hm-success); }
  .hmedical-account-page table.tinvwl-table-manage-list .product-date time { font-size: 12px; color: var(--hm-subtle); }

  /* Real checkbox + remove button, both given visible Arabic labels via
     generated content on the elements themselves (no markup added — a
     `<button>` legitimately supports ::after; the checkbox `<input>` is a
     replaced element that can't reliably render its own pseudo-content, so
     the label is attached to its wrapping `<td>` instead). */
  .hmedical-account-page table.tinvwl-table-manage-list .product-cb {
    grid-area: cb;
    /* !important on display/padding: a more specific sibling rule just
       above (`tr.wishlist_item td { display:block; padding:0; }`) ties on
       class-count and wins on tag-count, so plain specificity alone isn't
       enough to turn this cell into the checkbox+label row it needs to be. */
    display: flex !important;
    align-items: center; gap: 7px;
    padding: 0 12px !important;
    height: 42px;
    border: 1px solid var(--hm-border);
    border-radius: 12px;
  }
  .hmedical-account-page table.tinvwl-table-manage-list .product-cb input { width: 16px; height: 16px; margin: 0; flex: none; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-cb::after {
    content: "تحديد"; font-size: 12.5px; font-weight: 600; color: var(--hm-muted);
  }
  .hmedical-account-page table.tinvwl-table-manage-list .product-remove { grid-area: remove; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-remove button {
    width: 100%; height: 42px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #FBEAE7 !important; color: var(--hm-danger) !important;
    border: 0; border-radius: 12px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
  }
  .hmedical-account-page table.tinvwl-table-manage-list .product-remove button i { display: none; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-remove button::after { content: "حذف من المفضلة"; }

  .hmedical-account-page table.tinvwl-table-manage-list .product-action { grid-area: action; }
  .hmedical-account-page table.tinvwl-table-manage-list .product-action .button { width: 100%; }

  /* Bulk-action footer — same full-card-width treatment as the product
     cards above it, instead of the select/button cluster sizing itself
     from its own content and ending up narrower than every row above it. */
  .hmedical-account-page table.tinvwl-table-manage-list tfoot,
  .hmedical-account-page table.tinvwl-table-manage-list tfoot tr,
  .hmedical-account-page table.tinvwl-table-manage-list tfoot td { display: block; width: 100%; padding: 0; }
  .hmedical-account-page table.tinvwl-table-manage-list tfoot td { padding-top: 16px; }
  .hmedical-account-page .tinvwl-to-left.look_in { width: 100%; margin-bottom: 10px; }
  .hmedical-account-page .tinvwl-input-group { width: 100%; }
  .hmedical-account-page .tinvwl-input-group select#tinvwl_product_actions { flex: 1; min-width: 0; width: auto; }
  .hmedical-account-page .tinvwl-to-right.look_in { flex-direction: column; align-items: stretch; }
  .hmedical-account-page .tinvwl-to-right.look_in .button { width: 100%; }
}

/* Addresses tab */
.hmedical-account-page .woocommerce-Addresses.col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hmedical-account-page .woocommerce-Addresses .woocommerce-Address {
  flex: 1 1 240px;
  min-width: 220px;
  border: 1px solid var(--hm-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--hm-surface-alt);
}
.hmedical-account-page .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hmedical-account-page .woocommerce-Address-title h2 { font-size: 14.5px; margin: 0; }
.hmedical-account-page .woocommerce-Address-title .edit {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--hm-accent);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--hm-border);
  border-radius: 999px;
  background: #FFFFFF;
}
.hmedical-account-page .woocommerce-Address-title .edit:hover { border-color: var(--hm-accent); }
.hmedical-account-page address { font-size: 13.5px; line-height: 1.9; color: var(--hm-muted); font-style: normal; }

/* Forms — edit-account, edit-address (real + Checkout Field Editor's
   markup), login/register. `.input-text` covers both; `woocommerce-Input`
   is the plain-WC variant, kept for anything that doesn't go through the
   field-editor plugin. */
.hmedical-account-page .form-row { margin: 0 0 14px; }
.hmedical-account-page .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hm-muted);
  margin-bottom: 6px;
}
.hmedical-account-page .form-row label .required { color: var(--hm-danger); }
.hmedical-account-page input.input-text,
.hmedical-account-page input.woocommerce-Input,
.hmedical-account-page select:not(.select2-hidden-accessible),
.hmedical-account-page textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--hm-text);
  background: #FFFFFF;
  font-family: inherit;
}
.hmedical-account-page textarea { height: auto; padding: 12px 14px; line-height: 1.6; }
.hmedical-account-page input.input-text:focus,
.hmedical-account-page input.woocommerce-Input:focus,
.hmedical-account-page select:focus,
.hmedical-account-page textarea:focus { border-color: var(--hm-accent); }
.hmedical-account-page fieldset { border: 0; padding: 0; margin: 20px 0 0; }
.hmedical-account-page fieldset legend { font-size: 14.5px; font-weight: 700; padding: 0; margin-bottom: 12px; }
.hmedical-account-page .password-input { position: relative; display: block; }
.hmedical-account-page .password-input input { padding-inline-end: 42px; }
.hmedical-account-page .show-password-input {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
}

/* Enhanced-select (select2) country/state dropdowns — same field-editor
   plugin used on checkout's own address fields, but this classic template
   still uses the real select2 widget rather than a plain <select>. */
.hmedical-account-page .select2-container .select2-selection--single {
  height: 46px;
  border: 1px solid var(--hm-border) !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.hmedical-account-page .select2-container .select2-selection__rendered {
  padding: 0 !important;
  line-height: 44px !important;
  color: var(--hm-text);
}
.hmedical-account-page .select2-container .select2-selection__arrow { height: 44px !important; }
.hmedical-account-page .select2-container--open .select2-selection--single { border-color: var(--hm-accent) !important; }

@media (min-width: 480px) {
  .hmedical-account-page .woocommerce-address-fields__field-wrapper .form-row-first,
  .hmedical-account-page .woocommerce-address-fields__field-wrapper .form-row-last { width: 48%; }
  .hmedical-account-page .woocommerce-address-fields__field-wrapper .form-row-first { float: right; clear: right; }
  .hmedical-account-page .woocommerce-address-fields__field-wrapper .form-row-last { float: left; clear: left; }
}

/* ---------- About page ---------- */

.hmedical-main.hmedical-about-page,
.hmedical-main.hmedical-contact-page { max-width: var(--hm-content); padding-bottom: 32px; }

/* Chairman/founder photo + name card. Real content (see post 211's own
   original text) — not the mockup's placeholder team bios. */
.hmedical-chairman {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.hmedical-chairman img {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  object-position: top center;
}
.hmedical-chairman__body { display: flex; flex-direction: column; gap: 2px; }
.hmedical-chairman__body strong { font-size: 15.5px; font-weight: 700; color: var(--hm-text); }
.hmedical-chairman__body span { font-size: 13px; color: var(--hm-subtle); }

/* Vision / mission / how-we-started — three short real blurbs (split out
   of the original page's one combined "Vision & Mission" paragraph into
   their own cards, wording unchanged) instead of the excluded numeric
   stats counters. */
.hmedical-value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 11px;
  margin-top: 22px;
}
.hmedical-value-card {
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid var(--hm-border);
  border-radius: 18px;
}
.hmedical-value-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--hm-accent); }
.hmedical-value-card p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--hm-muted); }

/* ---------- Contact page ---------- */

.hmedical-contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 11px;
  margin-top: 18px;
}
.hmedical-contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--hm-surface);
  border-radius: 16px;
}
.hmedical-contact-info__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}
.hmedical-contact-info__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hmedical-contact-info__label { font-size: 12px; font-weight: 600; color: var(--hm-subtle); }
.hmedical-contact-info__value {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--hm-text);
  text-decoration: none;
  font-weight: 500;
}
a.hmedical-contact-info__value:hover { color: var(--hm-accent); }

.hmedical-contact-form { margin-top: 30px; }
.hmedical-contact-form h2 { margin: 0 0 16px; font-size: clamp(19px, 4.6vw, 23px); font-weight: 700; }
/* Contact Form 7's own real markup (`.wpcf7`/`.wpcf7-form`), restyled to
   match the account page's input fields — not rebuilt. `.wpcf7-form-control`
   covers text/email/textarea/submit alike on this CF7 version (6.0.6). */
.hmedical-contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.hmedical-contact-form .wpcf7-form p { margin: 0; }
/* Browsers force LTR on url/email/tel inputs regardless of the form's own
   dir="rtl" (confirmed live: CF7's wrapper is lang="ar" dir="rtl", but the
   email field's text/placeholder still rendered LTR-aligned) — confirmed
   fix via live inspect-element testing. */
.hmedical-contact-page .wpcf7 input[type="url"],
.hmedical-contact-page .wpcf7 input[type="email"],
.hmedical-contact-page .wpcf7 input[type="tel"] { direction: inherit; }
.hmedical-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  margin: 0 0 5px;
  border: 1px solid var(--hm-border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--hm-text);
  background: #FFFFFF;
}
.hmedical-contact-form .wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--hm-accent); outline: none; }
.hmedical-contact-form textarea.wpcf7-form-control { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.hmedical-contact-form .wpcf7-submit {
  align-self: flex-start;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  background: var(--hm-accent);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.hmedical-contact-form .wpcf7-submit:hover { background: var(--hm-accent-dark); }
.hmedical-contact-form .wpcf7-spinner { margin: 0 8px; }
.hmedical-contact-form .wpcf7-response-output {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  border-color: var(--hm-border) !important;
}
.hmedical-contact-form form.invalid .wpcf7-response-output,
.hmedical-contact-form form.failed .wpcf7-response-output,
.hmedical-contact-form form.aborted .wpcf7-response-output { color: var(--hm-danger); border-color: var(--hm-danger) !important; }
.hmedical-contact-form form.sent .wpcf7-response-output { color: var(--hm-success); border-color: var(--hm-success) !important; }

.hmedical-contact-map {
  margin-top: 26px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hm-border);
}
.hmedical-contact-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ---------- Loading screen (one-time "new design" splash) ---------- */
/* See functions.php's wp_body_open hook for the toggle + full writeup. */
.hmedical-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  transition: opacity .5s ease, visibility .5s ease;
}
.hmedical-loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.hmedical-loading-screen__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hmedical-loading-screen__logo { width: 132px; height: auto; }
.hmedical-loading-screen__heart { color: var(--hm-accent); line-height: 0; animation: hmedical-heartbeat 1.1s ease-in-out infinite; }
.hmedical-loading-screen__heart svg { width: 34px; height: 34px; }
.hmedical-loading-screen__text { margin: 0; font-size: 17px; font-weight: 800; color: var(--hm-text); letter-spacing: -0.01em; }
.hmedical-loading-screen__dots { display: flex; gap: 6px; }
.hmedical-loading-screen__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hm-accent);
  animation: hmedical-dot-bounce 1s ease-in-out infinite;
}
.hmedical-loading-screen__dots i:nth-child(2) { animation-delay: .15s; }
.hmedical-loading-screen__dots i:nth-child(3) { animation-delay: .3s; }

@media (min-width: 900px) {
  .hmedical-loading-screen__inner { gap: 20px; }
  .hmedical-loading-screen__logo { width: 190px; }
  .hmedical-loading-screen__heart svg { width: 48px; height: 48px; }
  .hmedical-loading-screen__text { font-size: 24px; }
  .hmedical-loading-screen__dots { gap: 9px; }
  .hmedical-loading-screen__dots i { width: 11px; height: 11px; }
}

@keyframes hmedical-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  30% { transform: scale(1); }
  45% { transform: scale(1.14); }
  60% { transform: scale(1); }
}
@keyframes hmedical-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ---------- Rate us page ---------- */
.hmedical-rate { margin: 20px auto 0; max-width: 560px; }

.hmedical-rate__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The [hidden] attribute and this rule have equal specificity — since this
   rule comes later in the cascade it would otherwise win and silently keep
   the intro panel visible (as flex) even when JS sets hidden=true, so the
   result panel appends below it instead of replacing it. */
.hmedical-rate__intro[hidden] { display: none; }
.hmedical-rate__lead { margin: 0 0 18px; font-size: 15px; color: var(--hm-muted); }

.hmedical-rate__stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
.hmedical-rate__star {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--hm-border); transition: color .15s ease, transform .1s ease;
}
.hmedical-rate__star:hover { transform: scale(1.08); }
.hmedical-rate__star.is-filled { color: #F5A623; }

/* Every other .hmedical-btn on the site is an <a> — anchors don't carry a
   browser's default button chrome, so this is the first place a real
   <button> uses the class and needs its own UA-style reset instead of the
   harsh default border/shadow. The soft shadow below replaces it with the
   same blue tint already used for .hmedical-btn-lg--accent elsewhere. */
.hmedical-rate__submit,
.hmedical-rate__submit-complaint {
  appearance: none; -webkit-appearance: none; border: none;
  padding: 0 32px;
  box-shadow: 0 8px 20px rgba(27,110,156,.28);
}
.hmedical-rate__submit:hover,
.hmedical-rate__submit-complaint:hover { box-shadow: 0 10px 26px rgba(27,110,156,.34); }
.hmedical-rate__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.hmedical-rate__thanks { margin: 0 0 18px; font-size: 15px; color: var(--hm-text); font-weight: 600; text-align: center; }

.hmedical-rate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hmedical-rate-card {
  display: flex; align-items: center; gap: 12px;
  padding: 18px; border: 1px solid var(--hm-border); border-radius: 16px;
  background: var(--hm-surface); text-decoration: none; color: var(--hm-text);
  transition: border-color .15s ease, background .15s ease;
}
.hmedical-rate-card:hover { border-color: var(--hm-accent); background: var(--hm-accent-tint); }
.hmedical-rate-card__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.hmedical-rate-card__label { font-size: 14.5px; font-weight: 600; }

.hmedical-rate__low h2 { margin: 0 0 8px; font-size: clamp(19px, 4.6vw, 23px); font-weight: 700; color: var(--hm-text); }
.hmedical-rate__low > p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--hm-muted); }

.hmedical-rate__textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; margin: 0 0 16px;
  border: 1px solid var(--hm-border); border-radius: 12px;
  font-size: 14px; font-family: inherit; line-height: 1.6; color: var(--hm-text);
  background: #FFFFFF; resize: vertical;
}
.hmedical-rate__textarea:focus { border-color: var(--hm-accent); outline: none; }

.hmedical-rate__low-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hmedical-rate__low-actions .hmedical-btn { flex: 1 1 200px; }
.hmedical-rate__whatsapp { padding: 0 20px; }

.hmedical-rate__complaint-status { margin-top: 12px; font-size: 13.5px; color: var(--hm-success); }
.hmedical-rate__complaint-status.is-error { color: var(--hm-danger); }