@layer hpds-components {
  .hpds-section-heading { display: grid; gap: var(--hpds-space-3); margin-block-end: var(--hpds-space-7); }
  .hpds-section-heading--center { justify-items: center; text-align: center; }
  .hpds-section-heading__title { margin: 0; }
  .hpds-section-heading__description { color: var(--hpds-color-text-muted); margin: 0; max-inline-size: 42rem; }

  .hpds-card {
    background: var(--hpds-color-surface-raised);
    border: var(--hpds-border);
    border-radius: var(--hpds-radius-sm);
    padding: var(--hpds-space-5);
  }

  .hpds-card--interactive {
    transition: border-color var(--hpds-duration-fast) var(--hpds-ease-standard), box-shadow var(--hpds-duration-fast) var(--hpds-ease-standard), transform var(--hpds-duration-fast) var(--hpds-ease-standard);
  }

  .hpds-card--interactive:hover { border-color: var(--hpds-color-border-strong); box-shadow: var(--hpds-shadow-sm); transform: translateY(-2px); }

  .hpds-badge {
    align-items: center;
    background: var(--hpds-color-surface-subtle);
    border-radius: var(--hpds-radius-round);
    color: var(--hpds-color-text);
    display: inline-flex;
    font-size: var(--hpds-font-size-100);
    font-weight: var(--hpds-weight-bold);
    gap: var(--hpds-space-1);
    line-height: 1;
    min-block-size: 1.75rem;
    padding-inline: var(--hpds-space-3);
  }

  .hpds-notice {
    --hpds-notice-color: var(--hpds-color-info);
    background: color-mix(in srgb, var(--hpds-notice-color) 7%, var(--hpds-color-surface));
    border: var(--hpds-border);
    border-inline-start: 0.25rem solid var(--hpds-notice-color);
    border-radius: var(--hpds-radius-sm);
    color: var(--hpds-color-text);
    padding: var(--hpds-space-4);
  }

  .hpds-notice--success { --hpds-notice-color: var(--hpds-color-success); }
  .hpds-notice--warning { --hpds-notice-color: var(--hpds-color-warning); }
  .hpds-notice--error { --hpds-notice-color: var(--hpds-color-error); }

  .hpds-tabs__list {
    border-block-end: var(--hpds-border);
    display: flex;
    gap: var(--hpds-space-5);
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0;
  }

  .hpds-tabs__trigger {
    background: transparent;
    border: 0;
    color: var(--hpds-color-text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: var(--hpds-weight-semibold);
    padding: var(--hpds-space-3) 0;
    position: relative;
    white-space: nowrap;
  }

  .hpds-tabs__trigger[aria-selected="true"] { color: var(--hpds-color-text); }
  .hpds-tabs__trigger[aria-selected="true"]::after { background: var(--hpds-color-accent); block-size: 2px; content: ""; inset: auto 0 -1px; position: absolute; }
  .hpds-tabs__panel { padding-block: var(--hpds-space-6); }
  .hpds-tabs__panel[hidden] { display: none; }

  .hpds-accordion { border-block-start: var(--hpds-border); }
  .hpds-accordion__item { border-block-end: var(--hpds-border); }
  .hpds-accordion__trigger { align-items: center; background: transparent; border: 0; color: var(--hpds-color-text); cursor: pointer; display: flex; font: inherit; font-weight: var(--hpds-weight-semibold); inline-size: 100%; justify-content: space-between; min-block-size: 3.5rem; padding: var(--hpds-space-3) 0; text-align: start; }
  .hpds-accordion__panel { color: var(--hpds-color-text-muted); padding-block: 0 var(--hpds-space-5); }
  .hpds-accordion__panel[hidden] { display: none; }

  .hpds-table-wrap { inline-size: 100%; overflow-x: auto; }
  .hpds-table { border-collapse: collapse; inline-size: 100%; }
  .hpds-table :is(th, td) { border-block-end: var(--hpds-border); padding: var(--hpds-space-3); text-align: start; }
  .hpds-table th { color: var(--hpds-color-text); font-size: var(--hpds-font-size-200); font-weight: var(--hpds-weight-bold); }

  .hpds-empty-state { align-items: center; display: flex; flex-direction: column; gap: var(--hpds-space-4); justify-content: center; min-block-size: 18rem; padding: var(--hpds-space-7); text-align: center; }
  .hpds-empty-state__title { font-size: var(--hpds-font-size-500); margin: 0; }
  .hpds-empty-state__text { color: var(--hpds-color-text-muted); margin: 0; max-inline-size: 34rem; }

  .hpds-quote { border: 0; border-inline-start: 0.25rem solid var(--hpds-color-accent); color: var(--hpds-color-text); font-size: var(--hpds-font-size-500); font-weight: var(--hpds-weight-semibold); margin: 0; padding: var(--hpds-space-4) var(--hpds-space-5); }

  .hpds-display-editorial {
    font-family: var(--hpds-font-display);
    font-weight: var(--hpds-display-weight, var(--hpds-weight-semibold));
    letter-spacing: 0;
    line-height: var(--hpds-line-tight);
  }

  .hpds-editorial-grid {
    display: grid;
    gap: var(--hpds-space-4);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hpds-editorial-grid > :nth-child(4n + 1) { grid-column: span 7; }
  .hpds-editorial-grid > :nth-child(4n + 2) { grid-column: span 5; }
  .hpds-editorial-grid > :nth-child(4n + 3) { grid-column: span 5; }
  .hpds-editorial-grid > :nth-child(4n + 4) { grid-column: span 7; }

  .hpds-category-tile {
    aspect-ratio: 4 / 5;
    background: var(--hpds-color-mist);
    color: #ffffff;
    display: grid;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    text-decoration: none;
  }

  .hpds-category-tile__media,
  .hpds-category-tile__overlay {
    grid-area: 1 / 1;
  }

  .hpds-category-tile__media :is(img, picture, picture > img) {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    transition: transform 700ms var(--hpds-ease-signature, var(--hpds-ease-emphasis));
  }

  .hpds-category-tile__overlay {
    background: rgb(13 13 13 / 0.34);
    z-index: 1;
  }

  .hpds-category-tile__content {
    align-self: end;
    grid-area: 1 / 1;
    padding: clamp(var(--hpds-space-4), 4vw, var(--hpds-space-6));
    z-index: 2;
  }

  .hpds-category-tile__title {
    color: inherit;
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-600);
    font-weight: var(--hpds-display-weight, var(--hpds-weight-semibold));
    line-height: var(--hpds-line-tight);
    margin: 0;
  }

  .hpds-category-tile:hover .hpds-category-tile__media :is(img, picture > img),
  .hpds-category-tile:focus-visible .hpds-category-tile__media :is(img, picture > img) {
    transform: scale(1.035);
  }

  .hpds-routine {
    counter-reset: hpds-routine;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(var(--hpds-routine-columns, 4), minmax(0, 1fr));
  }

  .hpds-routine__step {
    background: var(--hpds-color-mist);
    counter-increment: hpds-routine;
    min-block-size: 12rem;
    padding: var(--hpds-space-5);
  }

  .hpds-routine__step::before {
    color: var(--hpds-color-accent);
    content: counter(hpds-routine, decimal-leading-zero);
    display: block;
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-500);
    margin-block-end: var(--hpds-space-5);
  }

  .hpds-club-moment {
    align-items: center;
    background: var(--hpds-color-brand);
    color: #ffffff;
    display: grid;
    gap: var(--hpds-space-6);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(var(--hpds-space-6), 6vw, var(--hpds-space-9));
    position: relative;
  }

  .hpds-club-moment::before {
    background: var(--hpds-color-club);
    content: "";
    inset: 0 0 0 auto;
    inline-size: 0.3rem;
    position: absolute;
  }

  .hpds-club-moment :where(h2, h3, p) { color: inherit; }

  .hpds-article-card {
    border-block-start: 2px solid var(--hpds-color-text);
    display: grid;
    gap: var(--hpds-space-4);
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    padding-block-start: var(--hpds-space-4);
  }

  .hpds-article-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
  .hpds-article-card__media img { block-size: 100%; inline-size: 100%; object-fit: cover; }

  .hpds-review-feature {
    border-block: var(--hpds-border);
    display: grid;
    gap: var(--hpds-space-5);
    padding-block: var(--hpds-space-6);
  }

  .hpds-review-feature__quote {
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-500);
    font-weight: var(--hpds-display-weight, var(--hpds-weight-semibold));
    line-height: 1.45;
    margin: 0;
  }

  @media (max-width: 767px) {
    .hpds-editorial-grid > * { grid-column: 1 / -1; }
    .hpds-category-tile { aspect-ratio: 4 / 5; }
    .hpds-routine { --hpds-routine-columns: 1; }
    .hpds-club-moment { grid-template-columns: 1fr; }
    .hpds-article-card { grid-template-columns: 1fr; }
  }
}