/**
 * Horizon Core - the size guide page on a NON-commerce tenant (HORIZON-20261005-024, Core 1.41.108).
 *
 * Star renders `/size-guide/` wherever a store creates the page (Skeleton/manifests/shared/size-guide-page.php), but its
 * rules lived only in hp-commerce-sections.css, which loads for the commerce skeleton alone. A star-skeleton tenant (on
 * horizon-shell) got the page with no scroll wrapper on its charts: the tables (min-width 640px) pushed the whole page
 * 163px past a 390px phone (mobile ratchet doc-overflow FAIL, 2026-10-05). Loaded only on a page whose slug is
 * `size-guide`, outside the commerce skeleton (hp_enqueue_size_guide_css() in src/Commerce/storefront-styles.php).
 *
 * ⭐ COPIED VERBATIM from hp-commerce-sections.css (its size-guide rules only), so the page renders exactly as it does on
 * a commerce store. Change both or neither.
 */
.hp-size-steps { display: grid; grid-template-columns: 1fr; gap: var(--hp-sp-5); margin-bottom: var(--hp-sp-6); }
@media (min-width: 720px) {
  .hp-size-steps { grid-template-columns: repeat(3, 1fr); }
}
.hp-size-step { display: flex; flex-direction: column; gap: var(--hp-sp-2); }
.hp-size-step__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--hp-r-md); background: var(--hp-gold-muted); color: var(--hp-gold); }
.hp-size-step__label { font-family: var(--hp-font-display); font-size: var(--hp-text-lg); font-weight: 600; }
.hp-size-step__desc { font-size: var(--hp-text-sm); color: var(--hp-text-muted); line-height: 1.55; }
.hp-size-note { font-size: var(--hp-text-sm); color: var(--hp-text-muted); line-height: 1.6; padding: var(--hp-sp-4) var(--hp-sp-5); background: var(--hp-bg-surface); border-left: 3px solid var(--hp-gold); border-radius: var(--hp-r-sm); margin: 0; }
.hp-size-chart { margin-bottom: var(--hp-sp-8); }
.hp-size-chart:last-of-type { margin-bottom: 0; }
.hp-size-chart__title { font-size: var(--hp-text-xl); margin: 0 0 var(--hp-sp-4); }
.hp-size-table-wrap { overflow-x: auto; border: 1px solid var(--hp-border); border-radius: var(--hp-r-md); background: var(--hp-bg); -webkit-overflow-scrolling: touch; }
.hp-size-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--hp-text-sm); }
.hp-size-table th,
.hp-size-table td { padding: var(--hp-sp-3) var(--hp-sp-4); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--hp-border); }
.hp-size-table thead th { font-family: var(--hp-font-display); font-weight: 600; color: var(--hp-text); background: var(--hp-bg-surface); }
.hp-size-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--hp-text); }
.hp-size-table tbody tr:nth-child(odd) td,
.hp-size-table tbody tr:nth-child(odd) th[scope="row"] { background: var(--hp-bg-surface); }
.hp-size-table tbody tr:last-child th,
.hp-size-table tbody tr:last-child td { border-bottom: 0; }
.hp-size-help { margin-top: var(--hp-sp-6); font-size: var(--hp-text-sm); color: var(--hp-text-muted); }
.hp-size-help a { color: var(--hp-gold); text-decoration: underline; }