dialog {
  border:0;
  color:var(--paper);
  padding:0;
  overscroll-behavior:contain
}
dialog::backdrop {
  background:#1c1a17c9;
  backdrop-filter:blur(6px)
}
dialog[open] {
  animation:modal-in .4s var(--ease)
}
.modal-close {
  position:absolute;
  top:16px;
  right:18px;
  z-index:5;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--paper);
  width:44px;
  height:44px;
  border-radius:0;
  font-size:32px;
  line-height:1;
  transition:color .25s
}
.modal-close:hover {
  color:#fff
}
.product-modal {
  --modal-flavor:#56110e;
  --modal-scale:1;
  position:fixed;
  inset:50% auto auto 50%;
  margin:0;
  width:min(1280px,calc(100% - 80px));
  max-width:1280px;
  max-height:none;
  min-height:700px;
  border-radius:32px;
  background:var(--modal-flavor);
  box-shadow:0 16px 64px 32px #000;
  overflow:clip;
  overscroll-behavior:none;
  touch-action:pinch-zoom;
  transform:translate(-50%,-50%) scale(var(--modal-scale));
  isolation:isolate
}
.product-modal[open] {
  animation-name:product-modal-in;
  display:grid;
  grid-template-columns:40% 60%
}
.product-modal .modal-close {
  width:calc(44px / var(--modal-scale));
  height:calc(44px / var(--modal-scale));
  font-size:calc(32px / var(--modal-scale))
}
.product-modal__visual {
  padding:60px 30px 48px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  grid-column:1
}
.product-modal__bottle {
  width:auto;
  height:min(68vh,728px);
  max-width:100%;
  object-fit:contain;
  position:relative;
  z-index:2
}
.product-modal__content {
  position:relative;
  z-index:2;
  padding:48px 48px 150px 35px;
  grid-column:2;
  font-size:16px;
  font-weight:600;
  line-height:1.3
}
.product-modal__content h2 {
  font-size:48px;
  line-height:1.3;
  font-weight:700;
  margin-bottom:12px
}
.product-modal__description {
  font-size:16px;
  font-weight:300;
  line-height:1.3
}
.product-modal__description p+p {
  margin-top:20px
}
.product-modal__divider {
  margin-top:32px;
  max-width:100%
}
.product-modal__nutrition {
  display:flex;
  gap:24px;
  font-size:16px;
  margin:24px 0 8px
}
.product-modal__nutrition>div {
  display:flex;
  gap:5px
}
.product-modal__nutrition dd,.product-modal__content>p>span {
  font-weight:300
}
.product-modal__fruit {
  position:absolute;
  bottom:-78px;
  right:-95px;
  width:539px;
  height:449px;
  pointer-events:none;
  z-index:0
}
.friend-modal {
  max-width:calc(100% - 40px);
  max-height:calc(100svh - 50px);
  width:650px;
  border-radius:24px;
  background:var(--ink);
  box-shadow:0 20px 80px #0008;
  overflow:auto
}
.friend-modal>img {
  width:100%;
  height:auto;
  max-height:65svh;
  object-fit:cover;
  object-position:50% 35%
}
.friend-modal>div {
  padding:24px
}
.friend-modal h2 {
  font-size:28px
}
.friend-modal p {
  margin-top:8px;
  font-size:18px;
  color:#c24638
}
@keyframes modal-in {
  from {
    opacity:0;
    transform:translateY(24px) scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes product-modal-in {
  from {
    opacity:0;
    transform:translate(-50%,calc(-50% + 24px)) scale(var(--modal-scale))
  }
  to {
    opacity:1;
    transform:translate(-50%,-50%) scale(var(--modal-scale))
  }
}
@media(max-width:767px) {
  .product-modal {
    width:calc(100% - 24px);
    min-height:0;
    border-radius:24px
  }
  .product-modal[open] {
    display:flex;
    flex-direction:column
  }
  .product-modal__visual {
    position:absolute;
    inset:0;
    height:100%;
    padding:24px 20px;
    opacity:.18;
    pointer-events:none;
    z-index:0
  }
  .product-modal__bottle {
    height:90%;
    max-width:90%;
    width:auto;
    object-fit:contain;
    transform:translateX(18%)
  }
  .product-modal__content {
    padding:32px 24px 28px;
    font-size:13px
  }
  .product-modal__content h2 {
    font-size:32px;
    margin-bottom:16px;
    padding-right:44px
  }
  .product-modal__description {
    font-size:13px;
    line-height:1.4
  }
  .product-modal__description p+p {
    margin-top:12px
  }
  .product-modal__divider {
    margin-top:16px
  }
  .product-modal__nutrition {
    gap:14px;
    font-size:13px;
    margin-top:12px;
    flex-wrap:wrap
  }
  .product-modal__fruit {
    width:300px;
    height:250px;
    bottom:-80px;
    right:-75px;
    opacity:.35
  }
  .modal-close {
    top:12px;
    right:12px
  }
  .friend-modal h2 {
    font-size:23px
  }
}
@media(max-width:374px) {
  .product-modal__content h2 {
    font-size:24px
  }
}