.fashion-popup[data-fashion-popup][hidden] { display: none !important; }
.fashion-popup[data-fashion-popup] {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  place-items: center !important;
  overflow: hidden !important;
  direction: ltr;
  opacity: 0;
  isolation: isolate;
  transform: none !important;
  transition: opacity 260ms ease;
}
.fashion-popup[data-fashion-popup].is-open { opacity: 1 !important; }
.fashion-popup__backdrop { position: absolute !important; z-index: 0; inset: 0 !important; width: 100%; height: 100%; background: color-mix(in srgb, var(--popup-overlay) var(--popup-overlay-opacity, 45%), transparent); cursor: pointer; }
.fashion-popup__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, .82fr) minmax(260px, 1fr);
  width: min(680px, 100%);
  max-height: min(620px, calc(100svh - 40px));
  overflow: auto;
  background: var(--popup-bg);
  color: var(--popup-text);
  box-shadow: 0 18px 70px rgb(0 0 0 / 18%);
  transform: translateY(18px) scale(.97);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.fashion-popup__panel--image-only { display: block; width: min(560px, 100%); max-height: min(760px, calc(100svh - 40px)); }
.fashion-popup__image-only { display: block; line-height: 0; }
.fashion-popup__image-only img { display: block; width: 100%; height: auto; max-height: min(760px, calc(100svh - 40px)); object-fit: contain; }
.fashion-popup.is-open .fashion-popup__panel { transform: translateY(0) scale(1); }
.fashion-popup__media { min-height: 100%; background: var(--fashion-soft-bg, #fff1f2); }
.fashion-popup__media img { display: block; width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
.fashion-popup__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 5vw, 52px); }
.fashion-popup__close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; width: 44px; height: 44px; place-items: center; border: 0; background: color-mix(in srgb, var(--popup-bg) 88%, transparent); color: var(--popup-text); font-size: 22px; line-height: 1; cursor: pointer; }
.fashion-popup__eyebrow { color: var(--popup-accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.fashion-popup h2 { max-width: 290px; margin: 10px 0 12px; font-family: var(--font-heading-family); font-size: clamp(28px, 4vw, 46px); font-weight: 400; line-height: 1.04; }
.fashion-popup p { max-width: 320px; margin: 0; font-size: 13px; line-height: 1.65; }
.fashion-popup__offer { margin-top: 18px; color: var(--popup-accent); font-size: 13px; }
.fashion-popup__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 22px; padding: 11px 20px; background: var(--popup-accent); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.fashion-popup__button:hover { filter: brightness(.93); }
.fashion-popup__dismiss { margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--popup-text); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .72; }
.fashion-popup--bottom-right { place-items: end; }
.fashion-popup--bottom-left { place-items: end start; }
.fashion-popup--bottom-right .fashion-popup__panel, .fashion-popup--bottom-left .fashion-popup__panel { width: min(480px, 100%); grid-template-columns: 1fr; }
.fashion-popup--bottom-right .fashion-popup__media, .fashion-popup--bottom-left .fashion-popup__media { display: none; }
body.fashion-popup-open { overflow: hidden; }
@media (max-width: 600px) {
  .fashion-popup[data-fashion-popup] { padding: 14px !important; }
  .fashion-popup__panel { grid-template-columns: 1fr; max-height: calc(100svh - 28px); }
  .fashion-popup__panel--image-only { max-height: calc(100svh - 28px); }
  .fashion-popup__image-only img { max-height: calc(100svh - 28px); object-fit: contain; }
  .fashion-popup__media { max-height: 210px; }
  .fashion-popup__media img { min-height: 0; height: 210px; }
  .fashion-popup__content { padding: 26px 24px 28px; }
  .fashion-popup h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .fashion-popup, .fashion-popup__panel { transition: none; }
}