.catalog-header { position: sticky; z-index: var(--z-header); }
.catalog-header .ui-brand small { display: block; color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: var(--weight-regular); line-height: var(--leading-control); }
.catalog-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.catalog-login { display: inline-flex; }

.catalog-page { min-block-size: calc(100dvb - var(--header-height)); }
.catalog-intro { padding-block: var(--space-8) var(--space-12); border-block-end: var(--border-width) solid var(--color-border-soft); }
.catalog-intro__copy { max-inline-size: var(--container-reading); margin-block-start: var(--space-6); }
.catalog-eyebrow { text-transform: uppercase; }
.catalog-category-loading { max-inline-size: var(--container-reading); padding-block-start: var(--space-6); }

.catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8) var(--section-gap); }

.catalog-content { min-inline-size: 0; }
.catalog-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.catalog-search__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); inline-size: 100%; }
.catalog-search__actions .ui-button { inline-size: 100%; }
.catalog-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-4); }
.catalog-filters :disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.catalog-availability-filter { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); align-self: end; cursor: pointer; }
.catalog-availability-filter input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--color-primary); }

.catalog-results { min-block-size: calc(var(--space-16) * 5); }
.catalog-results__heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-6); padding-block-end: var(--space-3); border-block-end: var(--border-width) solid var(--color-border-soft); }
.catalog-product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.catalog-product-grid .ui-product-card { block-size: 100%; }
.catalog-product-grid .ui-product-card__body { align-items: center; text-align: center; }
.catalog-product-grid .ui-product-card__tags,
.catalog-product-grid .ui-product-card__taxonomy { inline-size: 100%; justify-content: center; }
.catalog-product-grid .ui-product-card__variant { text-align: center; }
.catalog-product-grid .ui-product-card__fact { align-items: center; }
.public-product-notice { inline-size: 100%; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1.7; text-align: center; }
.catalog-product-grid .ui-product-card__cta { align-self: center; }
.catalog-product-skeleton { overflow: hidden; }
.catalog-pagination { margin-block-start: var(--space-8); }
.catalog-pagination ol { justify-content: center; }
.catalog-not-found { min-block-size: calc(100dvb - var(--header-height)); display: grid; place-items: center; padding-block: var(--section-gap); }
.catalog-footer { margin-block-start: 0; }

@media (max-width: 39.99rem) {
  .catalog-header .ui-brand small { display: none; }
  .catalog-header__actions { gap: var(--space-1); }
  .catalog-header__actions .ui-button { padding-inline: var(--space-3); }
  .catalog-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .catalog-product-grid .ui-product-card { min-inline-size: 0; }
  .catalog-product-grid .ui-product-card__media { aspect-ratio: 4 / 3; }
  .catalog-product-grid .ui-card__body { padding: var(--space-3); }
  .catalog-product-grid .ui-product-card__body { gap: var(--space-2); }
  .catalog-product-grid .ui-badge { max-inline-size: 100%; padding-inline: var(--space-2); overflow-wrap: anywhere; }
  .catalog-product-grid .ui-product-card__taxonomy {
    min-block-size: auto;
    font-size: .75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .catalog-product-grid [data-product-title] { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
  .catalog-product-grid .ui-product-card__variant { gap: var(--space-2); padding-block: var(--space-2); font-size: .75rem; }
  .catalog-product-grid .ui-product-card__fact { min-inline-size: 0; gap: 0; }
  .catalog-product-grid .ui-product-card__fact-label { font-size: .68rem; line-height: 1.4; }
  .catalog-product-grid .ui-product-card__fact b { overflow-wrap: anywhere; }
  .catalog-product-grid .public-product-notice { padding: var(--space-2); font-size: .7rem; line-height: 1.55; }
  .catalog-product-grid .ui-product-card__cta { font-size: .75rem; }
  .catalog-product-grid .ui-product-card__image-fallback { gap: var(--space-1); padding: var(--space-2); }
  .catalog-product-grid .ui-product-card__image-fallback .ui-state__symbol { min-inline-size: 2.25rem; min-block-size: 2.25rem; }
  .catalog-product-grid .ui-product-card__image-fallback .ui-small { font-size: .72rem; line-height: 1.4; }
}

@media (min-width: 40rem) {
  .catalog-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .catalog-intro { padding-block: var(--space-12) var(--space-16); }
  .catalog-layout { padding-block-start: var(--space-12); }
  .catalog-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .catalog-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
  .catalog-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Premium catalog presentation */
.catalog-intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .48), rgb(255 255 255 / .94)),
    url("/assets/design-system/hero-refinery.png") 28% 46% / cover no-repeat;
}
[dir="ltr"] .catalog-intro { background-position: 72% 46%; }
.catalog-intro::before {
  content: "";
  position: absolute;
  inset-inline-end: -8rem;
  inset-block-start: -12rem;
  inline-size: 30rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary-line);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .028);
}
.catalog-layout { gap: var(--space-6); }
.catalog-product-grid .ui-product-card {
  border-block-start: 3px solid transparent;
  background: rgb(255 255 255 / .94);
}
@media (hover: hover) {
  .catalog-product-grid .ui-product-card:hover { border-block-start-color: var(--color-primary); }
}
.catalog-results__heading h2 { letter-spacing: -.02em; }

@media (max-width: 47.99rem) {
  .catalog-intro {
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .78), rgb(255 255 255 / .98)),
      url("/assets/design-system/hero-refinery.png") 35% center / cover no-repeat;
  }
}