/* =============================================================================
   Treatment packages — landing layout.
   ========================================================================== */

.ho-packs__hero {
  padding-block: var(--ho-10) var(--ho-8);
  background: linear-gradient(160deg, var(--ho-green-50), var(--ho-gold-soft));
  text-align: center;
}

.ho-packs__title {
  max-width: 100%;
  margin: var(--ho-4) auto var(--ho-3);
  font-size: clamp(24px, 5vw, var(--ho-fs-3xl));
  font-weight: 900;
}

.ho-packs__lead {
  max-width: 100%;
  margin: 0 auto var(--ho-5);
  font-size: var(--ho-fs-md);
  color: var(--ho-ink-600);
  line-height: 2.2;
}
.ho-packs__lead.ho-prose {
  max-width: 100%;
}

.ho-packs__usp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ho-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ho-packs__usp li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-ink-600);
}
.ho-packs__usp .ho-icon { color: var(--ho-green-600); }

.ho-packs__jump {
  position: sticky;
  top: 62px;
  z-index: 5;
  padding-block: var(--ho-3);
  background: rgba(253, 251, 247, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ho-line-soft);
}
.ho-packs__jump .ho-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ho-packs__jump .ho-chips::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .ho-packs__jump { top: 132px; } }

/* --------------------------------------------------------------- a pack -- */

.ho-pack { padding-block: var(--ho-12); }
.ho-pack--alt { background: var(--ho-cream-100); }
.ho-packs--single .ho-pack { padding-top: var(--ho-8); }

.ho-pack__top {
  display: grid;
  gap: var(--ho-6);
  align-items: center;
}
@media (min-width: 900px) { .ho-pack__top { grid-template-columns: 1fr 1.1fr; gap: var(--ho-10); } }

.ho-pack__media { position: relative; }
.ho-pack__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-md);
}

.ho-pack__saving {
  position: absolute;
  top: var(--ho-4);
  inset-inline-start: var(--ho-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ho-3) var(--ho-4);
  border-radius: var(--ho-r-md);
  background: var(--ho-danger);
  color: #fff;
  text-align: center;
  box-shadow: var(--ho-shadow-md);
}
.ho-pack__saving b { font-size: var(--ho-fs-xl); font-weight: 900; line-height: 1.2; }
.ho-pack__saving small { font-size: 10px; opacity: .92; }

.ho-pack__title { margin: 0 0 var(--ho-4); font-size: var(--ho-fs-2xl); font-weight: 900; line-height: 1.6; }
.ho-pack__title a { color: var(--ho-ink-900); }

.ho-pack__problem,
.ho-pack__result { margin-bottom: var(--ho-4); }
/* Any heading level: on a pack's own page these are h2, on the archive h3.
   Styled for h3 only, the h2 kept its block icon on a line of its own. */
.ho-pack__problem :is(h2, h3, h4),
.ho-pack__result :is(h2, h3, h4) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: var(--ho-fs-sm);
  font-weight: 800;
}
.ho-pack__problem :is(h2, h3, h4) .ho-icon { flex: none; color: var(--ho-danger); }
.ho-pack__result :is(h2, h3, h4) .ho-icon { flex: none; color: var(--ho-green-600); }

/* The descriptions now sit after the contents, as their own block. */
.ho-pack__about {
  margin-top: var(--ho-8);
  padding: var(--ho-5);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
}
.ho-pack__about > :last-child { margin-bottom: 0; }

/* On a pack's own page the buy box holds the product page's control. */
.ho-pack__buybox { display: grid; gap: var(--ho-3); width: 100%; }
.ho-pack__problem p,
.ho-pack__result p { margin: 0; font-size: var(--ho-fs-sm); color: var(--ho-ink-600); line-height: 2.1; }

.ho-pack__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-4);
  margin-top: var(--ho-6);
  padding: var(--ho-5);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
}
.ho-pack__price { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; }
.ho-pack__price > span,
.ho-pack__price .woocommerce-Price-amount { font-size: var(--ho-fs-xl); font-weight: 900; color: var(--ho-ink-900); }
.ho-pack__price small { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }
.ho-pack__price small b { color: var(--ho-green-600); }

/* Contents ---------------------------------------------------------------- */

.ho-pack__contents,
.ho-pack__usage,
.ho-pack__faq,
.ho-pack__long { margin-top: var(--ho-10); }

.ho-pack__subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--ho-5);
  font-size: var(--ho-fs-lg);
  font-weight: 900;
}
.ho-pack__subtitle .ho-icon { color: var(--ho-amber-500); }
.ho-pack__subtitle small {
  padding: 2px 10px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
}

.ho-pack__items {
  display: grid;
  gap: var(--ho-3);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .ho-pack__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ho-pack-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--ho-4);
  padding: var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  transition: border-color var(--ho-fast), box-shadow var(--ho-fast);
}
.ho-pack-item:hover { border-color: var(--ho-amber-200); box-shadow: var(--ho-shadow-sm); }

.ho-pack-item__media {
  border-radius: var(--ho-r-sm);
  overflow: hidden;
  background: var(--ho-cream-100);
  aspect-ratio: 1 / 1;
}
.ho-pack-item__media img { width: 100%; height: 100%; object-fit: cover; }

.ho-pack-item__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ho-pack-item__title { margin: 0; font-size: var(--ho-fs-sm); font-weight: 800; line-height: 1.7; }
.ho-pack-item__title a { color: var(--ho-ink-900); }
.ho-pack-item__title a:hover { color: var(--ho-amber-600); }

.ho-pack-item__role {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-size: var(--ho-fs-xs);
  color: var(--ho-ink-500);
  line-height: 1.9;
}
.ho-pack-item__role .ho-icon { flex: none; margin-top: 4px; color: var(--ho-amber-500); }

.ho-pack-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-2);
  margin-top: auto;
  padding-top: var(--ho-2);
  font-size: var(--ho-fs-sm);
}
.ho-pack-item__qty {
  padding: 2px 9px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-cream-100);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  color: var(--ho-ink-500);
}
.ho-pack-item__price { font-weight: 800; color: var(--ho-ink-800); }

/* Comparison -------------------------------------------------------------- */

.ho-pack__compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-6);
  margin-top: var(--ho-5);
  padding: var(--ho-5);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
  border: 1px dashed var(--ho-line);
}
.ho-pack__compare > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ho-pack__compare span { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }
.ho-pack__compare b { font-size: var(--ho-fs-lg); font-weight: 900; white-space: nowrap; }
.ho-pack__compare-old { color: var(--ho-ink-300); text-decoration: line-through; }
.ho-pack__compare-new { color: var(--ho-green-600); }
.ho-pack__compare > .ho-icon { color: var(--ho-ink-200); }

.ho-packs__about { padding-bottom: var(--ho-16); }