.lineup__ornament::before *::after {
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  min-width: 320px;
  margin: 0;
  background: #111;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.product-page {
  width: 100%;
  min-height: 100vh;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.hero,
.testimonial,
.flavor,
.anniversary-thanks,
.gift,
.lineup {
  position: relative;
  overflow: hidden;
}

.hero>img,
.hero__circle,
.testimonial>img,
.flavor>img,
.gift>img {
  position: absolute;
}

.hero {
  aspect-ratio: 1920 / 2199;
  background: #ccc;
}

.hero__circle {
  z-index: 0;
  width: 53%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.hero__circle--plain {
  top: 10.5%;
  left: 1.8%;
}

.hero__circle--tea {
  top: 37.7%;
  right: -1.2%;
}

.hero__logo {
  z-index: 2;
  top: 5.05%;
  left: 58.85%;
  width: 38.33%;
}

.hero__jar {
  z-index: 1;
}

.hero__jar--plain {
  top: 7.4%;
  left: -2.7%;
  width: 57.2%;
}

.hero__jar--tea {
  top: 38.8%;
  right: -2.2%;
  width: 57%;
}

.hero__question {
  z-index: 3;
}

.hero__question--plain {
  top: 59.32%;
  left: 4.06%;
  width: 33.75%;
}

.hero__question--tea {
  top: 66.4%;
  left: 18.78%;
  width: 22.5%;
}

.hero__date {
  z-index: 3;
  top: 76.56%;
  left: 3.44%;
  width: 33.49%;
}

.hero__open {
  z-index: 3;
  top: 90.4%;
  left: 3.49%;
  width: 93.05%;
}

.testimonial {
  aspect-ratio: 1920 / 700;
  background: #fff;
}

.testimonial__pattern {
  z-index: 0;
  top: 11.9%;
  left: 2.9%;
  width: 94.2%;
}

.testimonial__person {
  z-index: 2;
  bottom: 0;
}

.testimonial__person--left {
  left: 7%;
  width: 24.3%;
}

.testimonial__person--right {
  right: 3%;
  width: 33.5%;
}

.testimonial__message {
  z-index: 1;
  top: 16.8%;
  left: 29.4%;
  width: 39.17%;
}

.flavor {
  aspect-ratio: 1920 / 1388;
  margin-top: 5%;
  margin-right: 8%;
  overflow: visible;
}

.flavor__background {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flavor__title,
.flavor__copy,
.flavor__jar,
.flavor__photo {
  z-index: 1;
}

.flavor--plain {}

.flavor--plain .flavor__title {
  top: 5%;
  left: 0;
  width: 38%;
}

.flavor--plain .flavor__copy {
  top: 2.38%;
  left: 38.33%;
  width: 47.01%;
}

.flavor--plain .flavor__jar {
  top: 21%;
  left: 9%;
  width: 31%;
}

.flavor--plain .flavor__photo--spread {
  top: 24%;
  left: 40%;
  width: 40%;
}

.flavor--plain .flavor__photo--serve {
  top: 57.5%;
  right: -4%;
  width: 33%;
}

.flavor--tea {
  aspect-ratio: 1920 / 1428;
  margin-top: 3.125%;
  margin-left: 8%;
  margin-right: 0;
  overflow: visible;
}

.flavor--tea .flavor__title {
  top: 5%;
  right: 0;
  width: 38%;
}

.flavor--tea .flavor__copy {
  top: 2%;
  left: 8%;
  width: 52.55%;
}

.flavor--tea .flavor__jar {
  top: 23%;
  right: 8%;
  width: 32%;
}

.flavor--tea .flavor__photo--spread {
  top: 25%;
  left: 17%;
  width: 42%;
}

.flavor--tea .flavor__photo--serve {
  top: 59%;
  left: -5%;
  width: 32%;
  z-index: 2;
}

.anniversary-thanks {
  display: grid;
  aspect-ratio: 1920 / 131;
  place-items: center;
  background: #fff;
}

.anniversary-thanks img {
  width: 102%;
  max-width: none;
}

.gift {
  aspect-ratio: 1920 / 616;
  background: linear-gradient(110deg, var(--plain) 0 48%, var(--tea) 48% 100%);
}

.gift__background {
  z-index: 0;
  inset: 0;
  width: 102.1%;
  height: auto;
}

.gift__products {
  z-index: 1;
  top: 3.6%;
  left: 4.8%;
  width: 57%;
}

.gift__copy {
  z-index: 2;
  top: 19.5%;
  left: 61.4%;
  width: 33.25%;
}

.gift__description {
  z-index: 2;
  top: 49.2%;
  left: 61.6%;
  width: 28.95%;
}

.lineup {
  padding: 0 4.5% 3.25% 3.5%;
  background: #ccc;
  border-radius: clamp(40px, 10vw, 190px) clamp(40px, 10vw, 190px) 0 0;
  margin-top: 15%;
  overflow: visible;
}

.lineup__intro {
  position: relative;
  padding-top: 0;
  transform: translateY(-20%);
  z-index: 2;
}

.lineup__intro h2 {
  width: 59%;
  margin: -3.7% auto 1.5%;
}

.lineup__lead,
.lineup__description {
  width: 80%;
  margin-inline: auto;
  color: #111;
  font-weight: 900;
}

.lineup__lead {
  margin-top: -5%;
  margin-bottom: 0;
  font-size: min(3.1vw, 60px);
}

.lineup__ornament {
  position: relative;
  display: block;
  width: 80%;
  height: max(1px, min(.2vw, 2px));
  margin: min(.9vw, 18px) 0 min(1.1vw, 22px) -1.35%;
  margin: 0 auto;
  border-radius: 999px;
  background: #111;
}

.lineup__ornament::before,
.lineup__ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(4px, 1vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #111;
}

.lineup__ornament::before {
  left: 0;
  transform: translate(-50%, -50%);
}

.lineup__ornament::after {
  right: 0;
  transform: translate(50%, -50%);
}


.lineup__description {
  margin-top: 1%;
  margin-bottom: 0;
  font-size: min(1.75vw, 34px);
  line-height: 1.35;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(2.3vw, 44px);
}

.product-card {
  display: flex;
  min-width: 0;
  aspect-ratio: .91;
  padding: 3.8% 2.5% 2.8%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: min(.35vw, 6px) solid #222;
  background: #fff;
  color: #111;
  text-align: center;
}

.product-card__visual {
  position: relative;
  flex: 0 0 62%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.product-card__image {
  position: absolute;
  inset: 0;
  width: 90%;
  height: 100%;
  margin: auto;
  object-fit: contain;
}

.product-card--single .product-card__image {
  width: 46%;
  height: 90%;
}

.product-card--box .product-card__image {
  width: 74%;
}

.product-card__badge {
  position: absolute;
  top: 0;
  right: 0;
}

.product-card__badge--single {
  width: 19.5%;
}

.product-card__badge--set {
  width: 31%;
}

.product-card__box-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 17%;
  aspect-ratio: 1;
  place-items: center;
  border: min(.35vw, 6px) solid #111;
  border-radius: 50%;
  background: #fff;
  font-size: min(1.75vw, 34px);
  font-weight: 900;
  line-height: 1.05;
}

.product-card h3 {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 1.2% 0 0;
  font-size: min(2.25vw, 43px);
  font-weight: 900;
  line-height: 1.25;
}

.product-card__price {
  margin: 1% 0 1.4%;
  font-size: min(2.2vw, 42px);
  font-weight: 900;
  line-height: 1;
}

.product-card__price strong {
  font-size: 1.55em;
}

.product-card__button {
  display: grid;
  margin-top: 2%;
  place-items: center;
  transition: .3s !important;
}

.product-card__button img {
  width: 60%;
}

.product-card__button:hover {
  filter: brightness(1.22);
  transform: translateY(-3%);
}

.product-card__button:focus-visible {
  outline: max(2px, .16vw) solid #7958ff;
}

.lineup__note {
  margin: 1.8% 0 0;
  font-size: min(1.3vw, 25px);
  text-align: right;
}

.footer {
  display: grid;
  width: 100%;
  aspect-ratio: 1920 / 106;
  place-items: center;
  background: #000;
}

.footer img {
  width: 18.5%;
}

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

@media (prefers-reduced-motion: reduce) {
  .product-card__button {
    transition: none;
  }
}