/* ==========================================================================
   MedsOnTap theme: base styles
   Brand values come from CSS variables set in the Customizer.
   ========================================================================== */

:root {
  --mot-primary: #1D3F8F;
  --mot-primary-ink: #FFFFFF;
  --mot-accent: #B42318;
  --mot-accent-ink: #FFFFFF;
  --mot-ink: #0E1B2C;
  --mot-text: #3A4656;
  --mot-bg: #FFFFFF;
  --mot-surface: #F2F4F7;
  --mot-line: #DCE1E8;
  --mot-warning: #9A6700;
  --mot-band-ivermectin: #2563C9;
  --mot-band-fenbendazole: #1E7F55;
  --mot-band-mebendazole: #8A3FB0;
  --mot-band-other: #5B6878;
  --mot-font-heading: 'Schibsted Grotesk Variable', system-ui, sans-serif;
  --mot-font-body: 'Public Sans Variable', system-ui, sans-serif;
  --mot-size-base: 17px;
  --mot-heading-wght: 700;
  --mot-container: 1280px;
  --mot-btn-radius: 6px;
  --mot-card-radius: 6px;

  --mot-primary-hover: color-mix(in srgb, var(--mot-primary) 82%, #000);
  --mot-muted: color-mix(in srgb, var(--mot-text) 72%, var(--mot-bg));
  --mot-gutter: clamp(16px, 4vw, 32px);
  --mot-header-h: 76px;
  --mot-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mot-header-h) + 16px); }
body {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--mot-bg);
  color: var(--mot-text);
  font-family: var(--mot-font-body);
  font-size: var(--mot-size-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--mot-line); margin: 2em 0; }

/* Typography ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mot-font-heading);
  font-weight: var(--mot-heading-wght);
  color: var(--mot-ink);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.08rem; }
h6 { font-size: 1rem; }
p, ul, ol, dl, blockquote, pre, table { margin: 0 0 1.15em; }
p { text-wrap: pretty; }
a { color: var(--mot-primary); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--mot-primary-hover); }
strong, b { font-weight: 700; color: var(--mot-ink); }
small { font-size: .85em; }
blockquote {
  margin-left: 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--mot-primary);
  font-size: 1.12em;
  color: var(--mot-ink);
}
code, pre { font-size: .9em; background: var(--mot-surface); border-radius: 6px; }
code { padding: .1em .35em; }
pre { padding: 1em; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7em .8em; border-bottom: 1px solid var(--mot-line); text-align: left; }
th { color: var(--mot-ink); font-weight: 700; }

/* Accessibility ---------------------------------------------------------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
  left: 12px; top: 12px; z-index: 1000; padding: 12px 18px;
  background: var(--mot-ink); color: #fff; border-radius: 8px; text-decoration: none;
}
:focus-visible { outline: 2px solid var(--mot-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Layout ----------------------------------------------------------------- */
.mot-container { width: 100%; max-width: calc(var(--mot-container) + var(--mot-gutter) * 2); margin-inline: auto; padding-inline: var(--mot-gutter); }
.mot-container--read { max-width: calc(760px + var(--mot-gutter) * 2); }
.mot-section { padding-block: clamp(40px, 6vw, 80px); }
.mot-elementor-main { padding: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site > main, .site-main { flex: 1 0 auto; }

/* Buttons ---------------------------------------------------------------- */
.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .8em 1.6em;
  border: 0;
  border-radius: var(--mot-btn-radius);
  background: var(--mot-primary);
  color: var(--mot-primary-ink);
  font-family: var(--mot-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--mot-ease), transform .18s var(--mot-ease);
}
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover { background: var(--mot-primary-hover); color: var(--mot-primary-ink); }
.button:active, button[type="submit"]:active { transform: translateY(1px); }
.is-style-outline .wp-block-button__link,
.button.button--outline {
  background: transparent;
  color: var(--mot-ink);
  box-shadow: inset 0 0 0 1.5px var(--mot-ink);
}
.is-style-outline .wp-block-button__link:hover,
.button.button--outline:hover { background: var(--mot-ink); color: var(--mot-bg); }

/* Forms ------------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .7em 1em;
  border: 1.5px solid var(--mot-line);
  border-radius: 4px;
  background: var(--mot-bg);
  color: var(--mot-ink);
  font: inherit;
  transition: border-color .15s;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--mot-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mot-primary) 18%, transparent); }
label { display: inline-block; margin-bottom: .35em; color: var(--mot-ink); font-weight: 600; font-size: .95em; }
::placeholder { color: var(--mot-muted); opacity: 1; }

.mot-search-form { display: flex; gap: 8px; }
.mot-search-form .search-field { flex: 1; }

/* Utility bar ------------------------------------------------------------ */
.mot-utility { background: var(--mot-ink); color: color-mix(in srgb, #fff 82%, var(--mot-ink)); font-size: .84rem; }
.mot-utility__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.mot-utility p { margin: 0; }
.mot-utility a { color: inherit; text-decoration: none; }
.mot-utility a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) {
  .mot-utility__inner { justify-content: center; }
  .mot-utility__right { display: none; }
}

/* Header ----------------------------------------------------------------- */
.mot-header {
  position: relative;
  z-index: 60;
  background: var(--mot-bg);
  border-bottom: 1px solid var(--mot-line);
}
.mot-sticky-header .mot-header { position: sticky; top: 0; }
@media (min-width: 783px) { .admin-bar.mot-sticky-header .mot-header { top: 32px; } }
.mot-header.is-scrolled { box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--mot-ink) 60%, transparent); }

.mot-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--mot-header-h); }
.mot-header__brand { flex: 0 0 auto; }
.mot-header__brand .custom-logo { max-height: 44px; width: auto; }
.mot-wordmark {
  font-family: var(--mot-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--mot-ink);
  text-decoration: none;
  line-height: 1;
}
.mot-wordmark:hover { color: var(--mot-primary); }

.mot-header__search { flex: 1 1 auto; max-width: 620px; }
.mot-header__search form { display: flex; position: relative; }
.mot-header__search input[type="search"] {
  min-height: 46px;
  padding-right: 110px;
  border-color: var(--mot-line);
  background: var(--mot-surface);
}
.mot-header__search input[type="search"]:focus { background: var(--mot-bg); }
.mot-header__search button {
  position: absolute; top: 4px; right: 4px; bottom: 4px;
  min-height: 0; padding: 0 16px; font-size: .92rem;
}

.mot-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mot-header__account {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--mot-btn-radius);
  color: var(--mot-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.mot-header__account:hover { background: var(--mot-surface); color: var(--mot-ink); }
.mot-header__cta { min-height: 42px; padding-block: .6em; margin-left: 6px; }

.mot-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--mot-btn-radius);
  background: transparent; color: var(--mot-ink);
  cursor: pointer; text-decoration: none;
}
.mot-icon-btn:hover { background: var(--mot-surface); color: var(--mot-ink); }
.mot-cart-count {
  position: absolute; top: 2px; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--mot-primary); color: var(--mot-primary-ink);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.mot-cart-count.is-empty { display: none; }

.mot-nav { border-top: 1px solid var(--mot-line); }
.mot-nav__list, .mot-nav__list ul { list-style: none; margin: 0; padding: 0; }
.mot-nav__list { display: flex; align-items: stretch; gap: 26px; min-height: 50px; }
.mot-nav__list > li { position: relative; display: flex; }
.mot-nav__list > li > a {
  display: flex; align-items: center;
  color: var(--mot-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .15s;
}
.mot-nav__list > li > a:hover,
.mot-nav__list > .current-menu-item > a,
.mot-nav__list > .current-menu-ancestor > a { box-shadow: inset 0 -2px 0 var(--mot-primary); color: var(--mot-ink); }
.mot-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.mot-nav__list .sub-menu {
  position: absolute; top: 100%; left: -14px;
  min-width: 240px; padding: 8px;
  background: var(--mot-bg);
  border: 1px solid var(--mot-line); border-radius: var(--mot-card-radius);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--mot-ink) 55%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 5;
}
.mot-nav__list .sub-menu .sub-menu { top: -9px; left: calc(100% + 8px); }
.mot-nav__list li:hover > .sub-menu,
.mot-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mot-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--mot-ink); font-weight: 500; text-decoration: none; }
.mot-nav__list .sub-menu a:hover { background: var(--mot-surface); }

.mot-menu-toggle, .mot-search-toggle { display: none; }

.mot-search-panel { border-top: 1px solid var(--mot-line); padding-block: 14px; background: var(--mot-bg); }
.mot-search-panel form { display: flex; gap: 8px; }
.mot-search-panel input[type="search"] { flex: 1; }

@media (max-width: 959px) {
  .mot-nav, .mot-header__search { display: none; }
  .mot-menu-toggle, .mot-search-toggle { display: inline-flex; }
  .mot-menu-toggle { margin-left: -10px; }
  .mot-header__inner { gap: 6px; min-height: 64px; }
  .mot-header__brand { flex: 1; }
  .mot-header__brand .custom-logo { max-height: 34px; }
  .mot-wordmark { font-size: 1.35rem; }
}
@media (max-width: 600px) {
  .mot-hide-sm { display: none !important; }
}

/* Drawers (mobile menu, cart) -------------------------------------------- */
.mot-drawer {
  position: fixed;
  top: 0; bottom: 0;
  z-index: 200;
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  background: var(--mot-bg);
  visibility: hidden;
  transition: transform .28s var(--mot-ease), visibility .28s;
  overflow-y: auto;
}
.mot-drawer--left { left: 0; transform: translateX(-100%); }
.mot-drawer--right { right: 0; transform: translateX(100%); }
.mot-drawer.is-open { transform: none; visibility: visible; }
.mot-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mot-line);
}
.mot-drawer__head .custom-logo { max-height: 34px; width: auto; }
.mot-drawer__title { font-size: 1.3rem; margin: 0; }
.admin-bar .mot-drawer { top: 46px; }
@media (min-width: 783px) { .admin-bar .mot-drawer { top: 32px; } }

.mot-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: color-mix(in srgb, var(--mot-ink) 45%, transparent);
  opacity: 0;
  transition: opacity .25s;
}
.mot-overlay.is-visible { opacity: 1; }
body.mot-lock { overflow: hidden; }

.mot-mobile-nav__list, .mot-mobile-nav__list ul { list-style: none; margin: 0; padding: 0; }
.mot-mobile-nav { padding: 8px 12px; flex: 1; }
.mot-mobile-nav__list li { position: relative; }
.mot-mobile-nav__list a {
  display: block;
  padding: 14px 52px 14px 10px;
  border-bottom: 1px solid var(--mot-line);
  color: var(--mot-ink);
  font-family: var(--mot-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}
.mot-mobile-nav__list .sub-menu { display: none; padding-left: 14px; }
.mot-mobile-nav__list .sub-menu a { font-family: var(--mot-font-body); font-size: 1.02rem; font-weight: 500; }
.mot-mobile-nav__list li.is-expanded > .sub-menu { display: block; }
.mot-submenu-toggle {
  position: absolute; top: 4px; right: 0;
  width: 44px; height: 44px;
  border: 0; background: none; color: var(--mot-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mot-submenu-toggle svg { transition: transform .2s; }
li.is-expanded > .mot-submenu-toggle svg { transform: rotate(180deg); }
.mot-mobile-nav__account {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 22px 24px;
  color: var(--mot-ink); font-weight: 600; text-decoration: none;
}

/* Pages & posts ---------------------------------------------------------- */
.mot-page__header { margin-bottom: clamp(20px, 3vw, 36px); }
.mot-page__header .entry-title { margin-bottom: .25em; }
.entry-content > * + * { margin-top: 0; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--mot-card-radius); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .35em; }
.mot-post-meta { display: flex; gap: 14px; color: var(--mot-muted); font-size: .92rem; margin: 0; }
.mot-article__image { margin-bottom: 32px; }
.mot-article__image img { border-radius: var(--mot-card-radius); width: 100%; }
.mot-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--mot-surface); color: var(--mot-ink); font-size: .88rem; text-decoration: none; }

.mot-post-grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mot-post-card__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--mot-card-radius); margin-bottom: 16px; }
.mot-post-card__title { font-size: 1.3rem; margin-bottom: .35em; }
.mot-post-card__title a { color: var(--mot-ink); text-decoration: none; }
.mot-post-card__title a:hover { color: var(--mot-primary); }
.mot-post-card__excerpt p { margin: .6em 0 0; }

.navigation.pagination { margin-top: 48px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--mot-btn-radius);
  color: var(--mot-ink); text-decoration: none; font-weight: 600;
}
a.page-numbers:hover { background: var(--mot-surface); }
.page-numbers.current { background: var(--mot-ink); color: var(--mot-bg); }


.post-navigation .nav-links { justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mot-line); }
.post-navigation a { color: var(--mot-ink); text-decoration: none; font-weight: 600; max-width: 45%; }
.mot-nav-label { display: block; font-size: .85rem; font-weight: 500; color: var(--mot-muted); }

.mot-comments { margin-top: 56px; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--mot-line); }
.comment-author img { border-radius: 50%; float: left; margin-right: 12px; }
.comment-metadata { font-size: .85rem; }

.mot-404 { text-align: center; }
.mot-404 form { max-width: 520px; margin: 24px auto; }
.mot-empty { padding: 32px; border-radius: var(--mot-card-radius); background: var(--mot-surface); }

.alignwide { max-width: var(--mot-container); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* Widgets ---------------------------------------------------------------- */
.widget { margin-bottom: 32px; }
.widget-title { font-size: 1.05rem; margin-bottom: 14px; letter-spacing: -0.01em; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 5px 0; }
.widget a { color: inherit; text-decoration: none; }
.widget a:hover { color: var(--mot-primary); }

/* Footer ----------------------------------------------------------------- */
.mot-footer {
  margin-top: auto;
  border-top: 1px solid var(--mot-line);
  background: var(--mot-surface);
  color: var(--mot-text);
  padding-top: clamp(48px, 6vw, 72px);
  font-size: .96rem;
}
.mot-footer__grid { display: grid; gap: 36px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mot-footer__grid--default { grid-template-columns: 2fr 1fr 1fr; }
.mot-footer__brand p { max-width: 34ch; margin-top: 16px; }
.mot-footer__brand .custom-logo { max-height: 44px; width: auto; }
.mot-footer a { color: var(--mot-text); text-decoration: none; }
.mot-footer a:hover { color: var(--mot-primary); }
.mot-footer__menu, .mot-footer__legal { list-style: none; margin: 0; padding: 0; }
.mot-footer__menu li { padding: 5px 0; }

.mot-social { display: flex; gap: 6px; list-style: none; margin: 18px 0 0; padding: 0; }
.mot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--mot-btn-radius);
  background: var(--mot-bg); color: var(--mot-ink); border: 1px solid var(--mot-line);
}
.mot-social a:hover { background: var(--mot-ink); color: var(--mot-bg); }
.mot-social svg { width: 19px; height: 19px; }

.mot-footer__disclaimer {
  margin-top: 44px;
  padding: 16px 20px;
  border: 1px solid var(--mot-line);
  border-radius: var(--mot-card-radius);
  background: var(--mot-bg);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--mot-muted);
}
.mot-footer__disclaimer p { margin: 0; }

.mot-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 24px 28px;
  margin-top: 28px;
  border-top: 1px solid var(--mot-line);
  font-size: .88rem;
}
.mot-footer__bottom p { margin: 0; }
.mot-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }

@media (max-width: 900px) {
  .mot-footer__grid, .mot-footer__grid--default { grid-template-columns: 1fr 1fr; }
  .mot-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .mot-footer__grid, .mot-footer__grid--default { grid-template-columns: 1fr; }
}

/* Elementor compatibility ------------------------------------------------- */
.elementor-page .mot-elementor-main > .elementor { width: 100%; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-button { border-radius: var(--mot-btn-radius); font-family: var(--mot-font-body); font-weight: 600; }
.mot-blank .site-main { min-height: 100vh; }

/* Compound color bands ---------------------------------------------------- */
.product, .mot-box { --band: var(--mot-band-other); }
.mot-compound-ivermectin { --band: var(--mot-band-ivermectin); }
.mot-compound-fenbendazole { --band: var(--mot-band-fenbendazole); }
.mot-compound-mebendazole { --band: var(--mot-band-mebendazole); }

/* Sections ---------------------------------------------------------------- */
.mot-section--surface { background: var(--mot-surface); }
.mot-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.mot-section__head h2 { margin: 0; }
.mot-section__link { font-weight: 600; text-decoration: none; }
.mot-section__link:hover { text-decoration: underline; }

/* Homepage hero ----------------------------------------------------------- */
.mot-hero { padding-block: clamp(40px, 6vw, 88px); border-bottom: 1px solid var(--mot-line); }
.mot-hero__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .mot-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.mot-hero__title { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; margin-bottom: .4em; }
.mot-hero__text { font-size: 1.15rem; max-width: 52ch; color: var(--mot-text); margin-bottom: 28px; }
.mot-hero__search { max-width: 560px; margin-bottom: 18px; }
.mot-hero__search form { display: flex; gap: 8px; }
.mot-hero__search input[type="search"] { flex: 1; min-height: 54px; font-size: 1.05rem; border-color: var(--mot-ink); }
.mot-hero__search button { min-height: 54px; }
.mot-hero__links { margin: 0; }
.mot-hero__links .button { background: transparent; color: var(--mot-ink); box-shadow: inset 0 0 0 1.5px var(--mot-ink); }
.mot-hero__links .button:hover { background: var(--mot-ink); color: var(--mot-bg); }

/* Compound boxes (styled like medicine cartons) */
.mot-boxes { display: grid; gap: 16px; }
.mot-boxes--grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mot-boxes--stack { gap: 14px; }
@media (min-width: 960px) {
  .mot-boxes--stack .mot-box:nth-child(2) { margin-left: 28px; margin-right: -28px; }
  .mot-boxes--stack .mot-box:nth-child(3) { margin-left: 56px; margin-right: -56px; }
}
.mot-box {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--mot-bg);
  border: 1px solid var(--mot-line);
  border-radius: var(--mot-card-radius);
  color: var(--mot-ink);
  text-decoration: none;
  box-shadow: 0 1px 0 var(--mot-line), 0 16px 32px -28px color-mix(in srgb, var(--mot-ink) 70%, transparent);
  transition: border-color .15s, transform .2s var(--mot-ease);
}
.mot-box:hover { border-color: var(--band); color: var(--mot-ink); transform: translateX(-4px); }
.mot-box__band { flex: 0 0 14px; background: var(--band); }
.mot-boxes--grid .mot-box { flex-direction: column; }
.mot-boxes--grid .mot-box__band { flex-basis: 10px; }
.mot-box__body { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 20px; flex: 1; align-items: baseline; }
.mot-box__name { grid-column: 1; font-family: var(--mot-font-heading); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mot-box__count { grid-column: 2; grid-row: 1; font-size: .85rem; color: var(--mot-muted); white-space: nowrap; }
.mot-box__strengths { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mot-box__strengths span {
  padding: 3px 9px;
  border: 1.5px solid var(--band);
  border-radius: 3px;
  color: var(--band);
  font-size: .82rem; font-weight: 700;
}
.mot-box__meta { grid-column: 1 / -1; font-size: .88rem; color: var(--mot-muted); }

/* Trust items */
.mot-trust { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mot-trust__item { padding-top: 18px; border-top: 2px solid var(--mot-ink); }
.mot-trust__item h3 { font-size: 1.1rem; margin-bottom: .4em; }
.mot-trust__item p { margin: 0; color: var(--mot-text); font-size: .96rem; }

/* Steps (a real sequence, so they are numbered) */
.mot-home__how h2 { margin-bottom: 28px; }
.mot-steps { list-style: none; counter-reset: mot-step; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; margin: 0; }
.mot-steps li { counter-increment: mot-step; padding-top: 18px; border-top: 1px solid var(--mot-line); }
.mot-steps li::before {
  content: counter(mot-step);
  display: block; margin-bottom: 14px;
  font-family: var(--mot-font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--mot-primary);
}
.mot-steps h3 { font-size: 1.15rem; margin-bottom: .35em; }
.mot-steps p { margin: 0; }