@layer layout {
  .em26-container { width: min(calc(100% - 2rem), var(--em26-container)); margin-inline: auto; }
  .em26-content-grid { display: grid; gap: var(--em26-space-6); padding-block: var(--em26-space-7); }
  .em26-site-header__inner { min-height: 5rem; display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: var(--em26-space-6); }
  .em26-site-main { min-height: 60vh; }
  .em26-woo-surface { padding-block: var(--em26-space-6) var(--em26-space-8); }

  @media (max-width: 63.99rem) {
    .em26-site-header__inner { min-height: 4.25rem; grid-template-columns: minmax(7.5rem, 10rem) 1fr auto; gap: var(--em26-space-4); }
    .em26-header-search { grid-column: 1 / -1; grid-row: 2; }
    /* SYS-03: profile/cart sit on the logo row instead of a third row of their own (-64 px on phones). */
    .em26-header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  }

  @media (min-width: 48rem) {
    .em26-container { width: min(calc(100% - 3rem), var(--em26-container)); }
  }

  @media (min-width: 80rem) {
    .em26-container { width: min(calc(100% - 4rem), var(--em26-container)); }
  }
}