.cocktailPopup {
  width: min(780px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #b3936259;
  border-radius: 8px;
  color: #f9f2e9;
  background: #171411;
  box-shadow: 0 28px 100px #0009;
}
.cocktailPopup::backdrop { background: #080706bf; backdrop-filter: blur(7px); }
body.cocktailPopupOpen { overflow: hidden; }
.cocktailPopupCard { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; }
.cocktailPopupPhoto { display: block; width: 100%; height: 560px; object-fit: cover; object-position: center 58%; }
.cocktailPopupCopy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 42px 30px; }
.cocktailPopupBrand { margin: 0 0 58px; color: #b9aa97; font-size: 9px; letter-spacing: .22em; }
.cocktailPopupEyebrow { margin: 0 0 18px; color: #d7b787; font-size: 10px; letter-spacing: .2em; }
.cocktailPopup h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(36px, 5vw, 48px); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.cocktailPopup h2 em { color: #e9b5bc; font-weight: 400; }
.cocktailPopupCopy > .cocktailPopupDescription { margin: 20px 0 0; color: #c8bdae; font-size: 14px; line-height: 1.6; }
.cocktailPopupPrice { margin: 22px 0 30px; color: #e4c494; font-size: 42px; font-family: Georgia, serif; line-height: 1; }
.cocktailPopupContinue { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 15px 0; border: 0; border-top: 1px solid #b3936266; color: #f9f2e9; background: transparent; font: inherit; font-size: 10px; letter-spacing: .14em; cursor: pointer; }
.cocktailPopupContinue span[aria-hidden] { font-size: 20px; }
.cocktailPopup h2, .cocktailPopupCopy > p { overflow-wrap: anywhere; }
.cocktailPopup h2 { max-width: 100%; }
.cocktailPopupClose { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff4d; border-radius: 50%; background: #171411b3; color: #fff; font: 30px/1 Arial, sans-serif; cursor: pointer; }
.cocktailPopup button:hover { color: #e9b5bc; }
.cocktailPopup button:focus-visible { outline: 2px solid #e4c494; outline-offset: 3px; }
@media (max-width: 600px) {
  .cocktailPopup { width: min(400px, calc(100vw - 28px)); }
  .cocktailPopupCard { display: block; }
  .cocktailPopupPhoto { height: min(660px, calc(100dvh - 30px)); min-height: 430px; object-position: center 57%; }
  .cocktailPopupCopy { position: absolute; inset: 0; justify-content: flex-end; padding: 26px; background: linear-gradient(180deg, #17141133, transparent 32%, #17141133 45%, #171411f2 82%); }
  .cocktailPopupBrand { position: absolute; top: 28px; left: 24px; font-size: 8px; color: #fff; }
  .cocktailPopupEyebrow { margin-bottom: 10px; }
  .cocktailPopup h2 { font-size: 38px; }
  .cocktailPopup h2 br { display: none; }
  .cocktailPopup h2 em::before { content: ' '; }
  .cocktailPopupCopy > .cocktailPopupDescription { margin-top: 10px; }
  .cocktailPopupPrice { margin: 14px 0 18px; font-size: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cocktailPopup[open] { animation: cocktailPopupEnter .35s ease-out; }
  @keyframes cocktailPopupEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}