.hpn-adm-live-slot{width:100%;min-height:1px}
.hpn-adm-delivered-ad{width:100%;text-align:center}
.hpn-adm-delivered-ad a{display:inline-block;max-width:100%}
.hpn-adm-ad-image{display:block;max-width:100%;height:auto;margin:0 auto}
.hpn-adm-bridged-ad{max-width:100%}
.hpn-adm-bridged-ad .hpn-adm-ad-image{max-width:100%;height:auto}

.hpn-adm-native-header{width:100%;text-align:center}
.hpn-adm-native-header .hpn-adm-delivered-ad{width:100%}

/* Separate native Header widgets: keep only the correct responsive mount visible.
   Elementor's standard mobile breakpoint is 767px; this also prevents duplicate
   Header output when a template contains both desktop and mobile shortcode widgets. */
.hpn-adm-native-header-desktop{display:block}
.hpn-adm-native-header-mobile{display:none}
@media (max-width:767px){
  .hpn-adm-native-header-desktop{display:none!important}
  .hpn-adm-native-header-mobile{display:block!important}
}
@media (min-width:768px){
  .hpn-adm-native-header-desktop{display:block!important}
  .hpn-adm-native-header-mobile{display:none!important}
}


/* Native Sidebar MPU output. Elementor keeps control of where the widget is
   shown; this wrapper only keeps the delivered creative fluid inside it. */
/* Native Sidebar MPU output. Keep the established HPN MPU presentation:
   300px maximum creative width, centred, with the image scaling down only
   when the available viewport/container is narrower. */
.hpn-adm-native-mpu{
  width:100%;
  max-width:300px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.hpn-adm-native-mpu .hpn-adm-delivered-ad{
  width:100%;
  max-width:300px;
  margin-left:auto;
  margin-right:auto;
}
.hpn-adm-native-mpu .hpn-adm-delivered-ad a{
  display:block;
  width:100%;
  max-width:300px;
  margin-left:auto;
  margin-right:auto;
}
.hpn-adm-native-mpu .hpn-adm-ad-image{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}