.homepage-products {
  --product-ink: #171916;
  --product-muted: #686a63;
  --product-paper: #faf8f1;
  --product-paper-deep: #e5e1d5;
  --product-signal: #d94e2b;
  --product-night: #171916;
  --product-on-night: #f7f4e9;
  --product-line-on-dark: rgba(255, 255, 255, .16);
  --product-display: "Inter", "Avenir Next", "Segoe UI", "PingFang SC", Arial, sans-serif;
  --product-body: "Inter", "Avenir Next", "Segoe UI", "PingFang SC", Arial, sans-serif;
  --product-ease: cubic-bezier(.22, 1, .36, 1);
  color: var(--product-ink);
  background: var(--product-paper);
  font-family: var(--product-body);
  overflow: hidden;
}

.homepage-products *,
.homepage-products *::before,
.homepage-products *::after {
  box-sizing: border-box;
}

.homepage-products img {
  display: block;
  max-width: 100%;
}

.homepage-products button,
.homepage-products a {
  -webkit-tap-highlight-color: transparent;
}

.homepage-products button:focus-visible,
.homepage-products a:focus-visible {
  outline: 3px solid var(--product-signal);
  outline-offset: 3px;
}

.homepage-products .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.homepage-products .module-frame {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  background: var(--product-paper);
  container-name: product-module;
  container-type: inline-size;
  overflow: hidden;
}

.homepage-products .catalog-module {
  background: var(--product-paper);
}

.homepage-products .catalog-module .eyebrow,
.homepage-products .visual-card__number,
.homepage-products .visual-card__note {
  font-family: var(--product-body);
}

.homepage-products .visual-card__number {
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}

.homepage-products .visual-card__note {
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
}

.homepage-products .module-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .65fr);
  align-items: end;
  gap: clamp(28px, 5cqw, 76px);
  padding: clamp(38px, 6cqw, 92px) clamp(24px, 5.7cqw, 82px) clamp(32px, 4.6cqw, 66px);
}

.homepage-products .catalog-module .eyebrow {
  margin: 0 0 16px;
  color: var(--product-signal);
}

.homepage-products .module-head h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--product-display);
  font-size: clamp(2.45rem, 5.4cqw, 5.9rem);
  line-height: .92;
  letter-spacing: -.04em;
}

.homepage-products .module-head__copy {
  margin: 0;
  color: var(--product-muted);
  font-size: clamp(.81rem, 1.05cqw, .94rem);
  line-height: 1.72;
}

.homepage-products .visual-gallery {
  padding: 0 clamp(14px, 2.5cqw, 36px) clamp(46px, 6cqw, 86px);
}

.homepage-products .visual-gallery__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 13px;
  color: var(--product-muted);
  font-family: var(--product-body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.5;
  text-transform: none;
}

.homepage-products .visual-gallery__label strong {
  color: var(--product-signal);
  font-weight: 700;
}

.homepage-products .visual-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.2cqw, 17px);
}

.homepage-products .visual-card {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--product-ink);
  background: var(--product-paper-deep);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 360ms var(--product-ease), box-shadow 360ms var(--product-ease);
  animation: product-card-in 620ms both var(--product-ease);
  animation-delay: calc(var(--order, 0) * 70ms);
}

.homepage-products .visual-card::after {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: 4px;
  background: var(--product-signal);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--product-ease);
}

.homepage-products .visual-card:is(:hover, :focus-within, .is-open) {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(23, 25, 22, .15);
}

.homepage-products .visual-card:is(:hover, :focus-within, .is-open)::after {
  transform: scaleX(1);
}

.homepage-products .visual-card:active {
  transform: translateY(-1px);
}

.homepage-products .visual-card--feature {
  min-height: clamp(390px, 39cqw, 560px);
}

.homepage-products .visual-card--gn {
  grid-column: span 7;
  background: #deded8;
}

.homepage-products .visual-card--chafing {
  grid-column: span 5;
  color: var(--product-ink);
  background: #ebe8de;
}

.homepage-products .visual-card--minor {
  grid-column: span 3;
  min-height: clamp(260px, 25cqw, 350px);
  background: #ebe8de;
}

.homepage-products .visual-card__surface {
  position: relative;
  display: grid;
  width: 100%;
  min-height: inherit;
  grid-template-rows: minmax(0, 1fr) auto;
}

.homepage-products .visual-card__toggle {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.homepage-products .visual-card__toggle:focus-visible {
  outline: 3px solid var(--product-signal);
  outline-offset: -6px;
}

.homepage-products .visual-card__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.homepage-products .visual-card__media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 25, 22, .02), rgba(23, 25, 22, .18));
  content: "";
  pointer-events: none;
}

.homepage-products .visual-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 680ms var(--product-ease), filter 420ms ease;
}

.homepage-products .visual-card--generated .visual-card__media > img { object-position: center; }
.homepage-products .visual-card--gn-photo-shift .visual-card__media > img { object-position: 72% center; }
.homepage-products .visual-card--chafing-photo .visual-card__media > img { object-position: 50% 52%; }
.homepage-products .visual-card--kettle-photo .visual-card__media > img { object-position: 52% center; }
.homepage-products .visual-card--beverage-photo .visual-card__media > img { object-position: 50% 52%; }
.homepage-products .visual-card--bowls-photo .visual-card__media > img { object-position: 50% 52%; }
.homepage-products .visual-card--storage-photo .visual-card__media > img { object-position: 50% 52%; }

.homepage-products .visual-card:is(:hover, :focus-within, .is-open) .visual-card__media > img {
  transform: scale(1.035);
}

html.is-page-scrolling .homepage-products .visual-card {
  transform: none;
  box-shadow: none;
  transition: none;
}

html.is-page-scrolling .homepage-products .visual-card__media > img {
  transform: none;
  transition: none;
}

html.is-page-scrolling .homepage-products .visual-card:not(.is-pinned) .family-panel,
html.is-page-scrolling .homepage-products .visual-card:not(.is-pinned) .visual-card__arrow {
  transition: none;
}

html.is-page-scrolling .homepage-products .visual-card:not(.is-pinned)::after {
  transform: scaleX(0);
  transition: none;
}

html.is-page-scrolling .homepage-products .visual-card.is-pinned::after {
  transform: scaleX(1);
}

.homepage-products .visual-card__number {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--product-on-night);
  background: var(--product-night);
}

.homepage-products .visual-card--chafing .visual-card__number {
  color: var(--product-on-night);
  background: var(--product-night);
}

.homepage-products .visual-card__body {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  min-height: 116px;
  padding: clamp(18px, 2.2cqw, 30px);
  background: inherit;
}

.homepage-products .visual-card__body h3 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--product-display);
  font-size: clamp(1.1rem, 1.9cqw, 1.8rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.022em;
}

.homepage-products .visual-card__arrow {
  color: var(--product-signal);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 280ms var(--product-ease);
}

.homepage-products .visual-card.is-open .visual-card__arrow {
  transform: rotate(45deg);
}

.homepage-products .visual-card__note {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 14px;
  max-width: calc(100% - 78px);
  padding: 7px 9px;
  color: var(--product-ink);
  background: rgba(250, 248, 241, .9);
  line-height: 1.35;
  backdrop-filter: blur(8px);
}

.homepage-products .family-panel {
  position: absolute;
  z-index: 12;
  inset: 0 0 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(12px, 1.1cqw, 16px);
  color: var(--product-ink);
  background: rgba(250, 248, 241, .985);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 22, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(.985);
  transform-origin: bottom;
  transition: opacity 220ms ease, transform 320ms var(--product-ease), visibility 0s linear 320ms;
}

.homepage-products .visual-card.is-open .family-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

html:not(.has-js) .homepage-products .family-panel {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

html:not(.has-js) .homepage-products .visual-card__toggle,
html:not(.has-js) .homepage-products .visual-card__arrow {
  display: none;
}

.homepage-products .family-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(23, 25, 22, .18);
}

.homepage-products .family-panel__count {
  color: #686b65;
  font-family: var(--product-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: none;
}

.homepage-products .family-panel__all {
  display: inline-flex;
  align-items: center;
  color: var(--product-ink);
  font-family: var(--product-body);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: none;
}

.homepage-products .family-panel__all:is(:hover, :focus-visible) {
  color: var(--product-signal);
}

.homepage-products .family-panel ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: family-line;
}

.homepage-products .family-panel__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  margin: 0 -6px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(23, 25, 22, .16);
  color: var(--product-ink);
  font-family: var(--product-body);
  font-size: clamp(.82rem, 1cqw, .95rem);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.28;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}

.homepage-products .family-panel li:last-child .family-panel__link {
  border-bottom: 0;
}

.homepage-products .family-panel__link::before {
  color: #777a74;
  font-family: var(--product-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
  counter-increment: family-line;
  content: counter(family-line, decimal-leading-zero);
}

.homepage-products .family-panel__link::after {
  color: var(--product-signal);
  content: "↗";
  opacity: .72;
  transition: transform 240ms var(--product-ease), opacity 200ms ease;
}

.homepage-products .family-panel__link:is(:hover, :focus-visible) {
  padding-left: 6px;
  color: var(--product-ink);
  background: rgba(217, 78, 43, .07);
}

.homepage-products .family-panel__link:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(3px, -3px);
}

.catalog-review-status {
  position: fixed;
  z-index: 280;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(360px, calc(100% - 36px));
  gap: 6px;
  padding: 16px 18px;
  color: #f7f4e9;
  background: #171916;
  box-shadow: 0 16px 40px rgba(23, 25, 22, .24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 220ms ease, transform 300ms var(--product-ease, cubic-bezier(.22, 1, .36, 1));
}

.catalog-review-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.catalog-review-status__label {
  color: #f08a6e;
  font: 700 .67rem/1.2 "Inter", "Avenir Next", "Segoe UI", sans-serif;
}

.catalog-review-status p {
  margin: 0;
  font: 500 .81rem/1.5 "Inter", "Avenir Next", "Segoe UI", sans-serif;
}

@keyframes product-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@container product-module (max-width: 920px) {
  .homepage-products .module-head { grid-template-columns: 1fr; }
  .homepage-products .module-head h2 { max-width: 13ch; }
  .homepage-products .visual-card--gn,
  .homepage-products .visual-card--chafing,
  .homepage-products .visual-card--minor { grid-column: span 6; }
  .homepage-products .visual-card--feature,
  .homepage-products .visual-card--minor { min-height: 420px; }
}

@container product-module (min-width: 921px) {
  .homepage-products .visual-bento { gap: clamp(14px, 1.35cqw, 20px); }
  .homepage-products .visual-card--gn,
  .homepage-products .visual-card--chafing,
  .homepage-products .visual-card--minor {
    grid-column: span 4;
    min-height: clamp(460px, 36cqw, 520px);
  }
  .homepage-products .visual-card__body {
    min-height: 116px;
    padding: clamp(22px, 1.9cqw, 28px);
  }
  .homepage-products .visual-card__body h3 {
    max-width: 22ch;
    font-size: clamp(1.35rem, 1.9cqw, 1.75rem);
  }
  .homepage-products .family-panel {
    inset: 0 0 116px;
    gap: 12px;
    padding: clamp(16px, 1.5cqw, 22px);
  }
  .homepage-products .family-panel__count,
  .homepage-products .family-panel__all { font-size: .68rem; }
  .homepage-products .family-panel__link {
    min-height: 44px;
    font-size: clamp(.82rem, 1cqw, .92rem);
  }
}

@container product-module (max-width: 780px) {
  .homepage-products .visual-bento { align-items: start; }
  .homepage-products .visual-card--feature,
  .homepage-products .visual-card--minor { min-height: 0; }
  .homepage-products .visual-card--feature .visual-card__surface,
  .homepage-products .visual-card--minor .visual-card__surface { min-height: 420px; }
  .homepage-products .family-panel {
    position: relative;
    inset: auto;
    max-height: 0;
    gap: 0;
    padding: 0 17px;
    overflow: hidden;
    transform: none;
    transition: max-height 420ms var(--product-ease), opacity 220ms ease, padding 320ms var(--product-ease), visibility 0s linear 420ms;
  }
  .homepage-products .visual-card.is-open .family-panel {
    max-height: 640px;
    gap: 12px;
    padding: 18px 17px 22px;
    transition-delay: 0s;
  }
  html:not(.has-js) .homepage-products .family-panel {
    max-height: none;
    gap: 12px;
    padding: 18px 17px 22px;
  }
}

@container product-module (max-width: 560px) {
  .homepage-products .module-head { padding: 34px 20px 30px; }
  .homepage-products .module-head h2 { font-size: clamp(2.35rem, 13cqw, 3.25rem); }
  .homepage-products .module-head__copy { font-size: .82rem; }
  .homepage-products .visual-gallery { padding: 0 10px 42px; }
  .homepage-products .visual-gallery__label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .homepage-products .visual-card--gn,
  .homepage-products .visual-card--chafing,
  .homepage-products .visual-card--minor { grid-column: 1 / -1; }
  .homepage-products .visual-card--feature,
  .homepage-products .visual-card--minor { min-height: 0; }
  .homepage-products .visual-card--feature .visual-card__surface,
  .homepage-products .visual-card--minor .visual-card__surface { min-height: 360px; }
  .homepage-products .visual-card__body { min-height: 98px; padding: 17px; }
  .homepage-products .visual-card__body h3 { font-size: 1.08rem; }
  .homepage-products .visual-card__number {
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
  }
  .homepage-products .family-panel__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .homepage-products .family-panel__all {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
  }
  .homepage-products .family-panel__link { min-height: 44px; font-size: .82rem; }
}

@media (hover: none), (pointer: coarse) {
  .homepage-products .family-panel__link,
  .homepage-products .family-panel__all { min-height: 44px; }
  .homepage-products .visual-card:not(.is-open):hover {
    transform: none;
    box-shadow: none;
  }
  .homepage-products .visual-card__media > img { transition: none; }
  .homepage-products .visual-card:is(:hover, :focus-within) .visual-card__media > img { transform: none; }
}

@container product-module (min-width: 561px) {
  .homepage-products .visual-card {
    --family-surface-height: 440px;
    --family-body-height: 124px;
  }
  .homepage-products .visual-card--gn,
  .homepage-products .visual-card--chafing,
  .homepage-products .visual-card--minor { min-height: 0; }
  .homepage-products .visual-card__surface {
    height: var(--family-surface-height);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) var(--family-body-height);
  }
  .homepage-products .visual-card__media { min-height: 0; }
  .homepage-products .visual-card__body {
    height: var(--family-body-height);
    min-height: 0;
    padding: 20px;
  }
  .homepage-products .visual-card__body h3 {
    display: flex;
    height: 3.06em;
    max-height: 3.06em;
    align-items: flex-end;
    overflow: hidden;
    font-size: clamp(1.2rem, 2.2cqw, 1.5rem);
  }
  .homepage-products .visual-card__body h3 > span {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .homepage-products .visual-card__note {
    display: flex;
    min-height: 28px;
    align-items: center;
  }
}

@container product-module (min-width: 781px) {
  .homepage-products .family-panel { inset: 0 0 var(--family-body-height); }
  .homepage-products .visual-card.is-open .visual-card__toggle {
    inset: auto 0 0;
    height: var(--family-body-height);
  }
}

@container product-module (min-width: 921px) {
  .homepage-products .visual-card {
    --family-surface-height: clamp(480px, 36cqw, 520px);
    --family-body-height: 132px;
  }
  .homepage-products .visual-card__body { padding: clamp(22px, 1.9cqw, 28px); }
  .homepage-products .visual-card__body h3 { font-size: clamp(1.35rem, 1.9cqw, 1.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-products *,
  .homepage-products *::before,
  .homepage-products *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}