/* eb-page.css: the /parts index (design.md: Category Product Group,
   Tabs) and the text pages (policies, 404) on top of eb-site.css. */

/* ---- shop by category ---- */
.eb-cat { padding-bottom: var(--spacing-96); }
.eb-cat__head { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-24); padding: var(--spacing-32) var(--gutter) var(--spacing-64); text-align: center; }
.eb-cat__note { max-width: 720px; }
.eb-cat-group + .eb-cat-group { margin-top: var(--spacing-96); }
.eb-cat-group__intro { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); text-align: center; }
.eb-cat-group__strapline { font-size: var(--text-heading-sm); font-weight: var(--font-weight-semibold); line-height: var(--leading-heading-sm); }
.eb-cat-group__summary { max-width: 960px; }
.eb-cat-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-48) var(--spacing-24); margin-top: var(--spacing-48); }
.eb-cat-tile { flex: 0 1 300px; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); text-align: center; }
.eb-cat-tile__img { display: block; width: 100%; padding: var(--spacing-32); overflow: hidden; background: var(--color-snow); }
.eb-cat-tile__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: transform 500ms ease; }
.eb-cat-tile:hover .eb-cat-tile__img img { transform: scale(1.1); }
.eb-cat-tile h3 { font-size: var(--text-heading-sm); font-weight: var(--font-weight-bold); line-height: var(--leading-heading-sm); text-transform: uppercase; }
.eb-cat-tile h3 a { color: var(--color-charcoal); }
.eb-cat-tile:hover h3 a { text-decoration: underline; }
.eb-cat-tile__desc { color: var(--color-ash); }
.eb-cat-tile__subs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-8) var(--spacing-16); margin-top: var(--spacing-8); }
.eb-cat-tile__subs a { color: var(--color-charcoal); font-size: var(--text-caption); font-weight: var(--font-weight-light); line-height: var(--leading-caption); text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--color-charcoal); padding-bottom: 2px; }
.eb-cat-tile__subs a:hover { text-decoration: none; font-weight: var(--font-weight-bold); box-shadow: inset 0 -3px 0 var(--color-charcoal); }

/* ---- text pages: policies, 404 ---- */
.eb-page { padding: var(--spacing-32) var(--gutter) var(--spacing-96); }
.eb-page__lede { margin-top: var(--spacing-16); }
.eb-page h2 { margin-top: var(--spacing-48); }
.eb-page p, .eb-page__list { margin-top: var(--spacing-16); line-height: var(--leading-body-feature); }
.eb-page__list li { position: relative; padding-left: var(--spacing-24); }
.eb-page__list li + li { margin-top: var(--spacing-8); }
.eb-page__list li::before { content: "\2022"; position: absolute; left: 0; color: var(--color-eibach-red); font-weight: var(--font-weight-bold); }
.eb-page--404 { padding-top: var(--spacing-96); text-align: center; }
.eb-page--404 h1 { margin-top: var(--spacing-16); }
.eb-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-16); margin-top: var(--spacing-32); }

@media (max-width: 767.98px) {
  .eb-cat-tile { flex-basis: 100%; }
  .eb-cat-tile__img { padding: var(--spacing-16); }
  .eb-cat-group + .eb-cat-group { margin-top: var(--spacing-64); }
}