.layout-refrigerator-intro {
  display: grid;
  grid-template-rows: max-content var(--refrigerator-family-scene-height);
  min-width: 0;
}

.layout-refrigerator-intro > main,
#refrigerator-intro-app {
  display: grid;
  min-width: 0;
}

.layout-refrigerator-intro > .ui-breadcrumb {
  padding: var(--space-sm) var(--space-2xl);
}

.section-refrigerator-intro {
  --refrigerator-ink: var(--bento-blue-ink);
  --refrigerator-blue: var(--header-accent);
  --refrigerator-tint: color-mix(in oklab, var(--bento-blue-tint) 65%, var(--surface));
  --action: var(--refrigerator-ink);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 4dvh, var(--space-3xl)) var(--space-2xl) var(--space-xl);
  color: var(--refrigerator-ink);
  background: var(--refrigerator-room-surface);
}

.section-refrigerator-intro::before,
.section-refrigerator-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.section-refrigerator-intro::before {
  inset-block-end: -16%;
  background: var(--refrigerator-room-surface) var(--refrigerator-intro-room) center top / cover no-repeat;
  filter: var(--refrigerator-room-tone);
}

.section-refrigerator-intro::after {
  background: var(--refrigerator-room-light);
}

.section-refrigerator-intro__heading {
  text-align: center;
}

.section-refrigerator-intro__heading h1 {
  margin: 0;
  font-size: clamp(var(--text-xl), 4.6vw, 4rem);
  line-height: var(--leading-heading);
  font-weight: var(--weight-title);
  letter-spacing: -.04em;
}

.section-refrigerator-intro .ui-tabs__list--segmented {
  width: min(100%, 47.5rem);
}

.section-refrigerator-intro__stage {
  display: grid;
  align-items: center;
  container-type: size;
  width: min(100%, 73rem);
  min-height: 0;
  min-width: 0;
}

.section-refrigerator-intro__panel {
  min-width: 0;
  padding: 0;
  animation: refrigerator-intro-reveal var(--motion-fast) ease-out both;
}

@keyframes refrigerator-intro-reveal {
  from { opacity: .4; }
  to { opacity: 1; }
}

.section-refrigerator-intro__lineup {
  text-align: center;
}

.section-refrigerator-intro__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.75fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-4xl));
}

.section-refrigerator-intro__pair {
  min-width: 0;
  margin: 0;
}

.section-refrigerator-intro__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
  height: min(340px, max(0px, calc(100cqh - 4.5rem)));
}

.section-refrigerator-intro__photos img {
  display: block;
  justify-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--refrigerator-lineup-height);
  transform: translateY(var(--refrigerator-lineup-floor-offset));
}

.section-refrigerator-intro__pair figcaption {
  display: grid;
  justify-items: center;
  margin-top: var(--space-md);
}

.section-refrigerator-intro__pair strong {
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  font-weight: var(--weight-title);
  line-height: var(--leading-heading);
}

.section-refrigerator-intro__pair span {
  font-size: var(--text-sm);
}

.section-refrigerator-intro__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
}

.section-refrigerator-intro__feature:has(.section-refrigerator-intro__open) {
  max-width: 64rem;
  margin-inline: auto;
}

.section-refrigerator-intro__open,
.section-refrigerator-intro__controller {
  justify-self: center;
  display: block;
  width: 100%;
  object-fit: contain;
}

.section-refrigerator-intro__open {
  height: min(400px, 100cqh);
}

.section-refrigerator-intro__controller {
  max-height: min(365px, 100cqh);
}

.section-refrigerator-intro__metric {
  margin: 0 0 var(--space-lg);
  font-size: clamp(var(--text-lg), 2.3vw, var(--text-2xl));
  font-weight: var(--weight-title);
  line-height: var(--leading-heading);
}

.section-refrigerator-intro__metric span {
  display: block;
  font-size: var(--text-md);
  color: var(--refrigerator-blue);
}

.section-refrigerator-intro__metric strong {
  font-size: clamp(var(--text-2xl), 5.7vw, 4.75rem);
  font-weight: inherit;
  letter-spacing: -.035em;
}

.section-refrigerator-intro__features {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-refrigerator-intro__features li {
  display: grid;
  grid-template-columns: var(--control-sm) 1fr;
  align-items: start;
  gap: var(--space-md);
}

.section-refrigerator-intro__features .icon {
  color: var(--refrigerator-blue);
  width: var(--space-xl);
  height: var(--space-xl);
  margin: var(--space-xs) auto 0;
}

.section-refrigerator-intro__features h3,
.section-refrigerator-intro__features p {
  margin: 0;
}

.section-refrigerator-intro__features h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
}

.section-refrigerator-intro__features p {
  color: var(--ink);
}

.section-refrigerator-intro__specs {
  max-width: 64rem;
  margin-inline: auto;
}

.section-refrigerator-intro__specs .ui-table {
  min-width: 31rem;
  font-variant-numeric: tabular-nums;
  color: var(--refrigerator-ink);
}

.section-refrigerator-intro__specs caption,
.section-refrigerator-intro__options h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-title);
}

.section-refrigerator-intro__specs .ui-table :is(th, td) {
  padding: var(--space-xs) var(--space-lg);
}

.section-refrigerator-intro__specs thead th {
  background: var(--bento-blue-tint);
  color: var(--refrigerator-ink);
  font-size: var(--text-md);
}

.section-refrigerator-intro__specs tbody th {
  background: transparent;
  font-size: var(--text-sm);
}

.section-refrigerator-intro__specs :is(th, td):not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

.section-refrigerator-intro__specs tbody tr:hover {
  background: transparent;
}

.section-refrigerator-intro__specs .ui-table .section-refrigerator-intro__difference {
  background: var(--refrigerator-tint);
  font-weight: var(--weight-strong);
}

.section-refrigerator-intro__specs p {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
}

.section-refrigerator-intro__options {
  max-width: 58rem;
  margin-inline: auto;
}

.section-refrigerator-intro__option-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-xl);
}

.section-refrigerator-intro__option-groups section + section {
  border-inline-start: var(--border-line);
  padding-inline-start: var(--space-3xl);
}

.section-refrigerator-intro__option-groups h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-lg);
}

.section-refrigerator-intro__option-groups ul {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink);
}

.section-refrigerator-intro__action {
  width: min(17rem, 100%);
}

.section-refrigerator-intro__action .ui-button {
  width: 100%;
  font-size: var(--text-md);
  font-weight: var(--weight-title);
}

@media (min-width: 681px) and (max-height: 780px) {
  .section-refrigerator-intro {
    gap: var(--space-md);
    padding-block: var(--space-lg);
  }

  .section-refrigerator-intro__heading h1 {
    font-size: clamp(var(--text-2xl), 4vw, 3.5rem);
  }

  .section-refrigerator-intro__open,
  .section-refrigerator-intro__controller {
    max-height: min(330px, 100cqh);
  }

  .section-refrigerator-intro__specs caption {
    padding-block: var(--space-sm);
  }
}

@media (min-width: 681px) {
  .section-refrigerator-intro__panel:has(> .section-refrigerator-intro__lineup) {
    align-self: end;
  }
}

@media (max-width: 680px) {
  .layout-refrigerator-intro {
    grid-template-rows: auto 1fr;
  }

  .layout-refrigerator-intro > .ui-breadcrumb {
    padding-inline: var(--space-lg);
  }

  .section-refrigerator-intro {
    grid-template-rows: auto auto 1fr auto;
    padding-inline: var(--space-lg);
  }

  .section-refrigerator-intro::before {
    inset-block: -24% 0;
  }

  .section-refrigerator-intro__stage {
    container-type: normal;
    min-height: clamp(235px, 42dvh, 360px);
  }

  .section-refrigerator-intro__groups {
    gap: var(--space-xs);
  }

  .section-refrigerator-intro__photos {
    height: clamp(115px, 32vw, 200px);
  }

  .section-refrigerator-intro__pair span {
    font-size: var(--text-xs);
  }

  .section-refrigerator-intro__feature,
  .section-refrigerator-intro__option-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .section-refrigerator-intro__open,
  .section-refrigerator-intro__controller {
    max-height: 235px;
  }

  .section-refrigerator-intro__specs .ui-table {
    min-width: 0;
    table-layout: fixed;
  }

  .section-refrigerator-intro__specs .ui-table :is(th, td) {
    padding-inline: var(--space-sm);
    white-space: normal;
  }

  .section-refrigerator-intro__option-groups section + section {
    border-inline-start: 0;
    border-top: var(--border-line);
    padding: var(--space-lg) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-refrigerator-intro__panel {
    animation: none;
  }
}