/* Swap this asset to change the second section's can in every layout.
   Keep a transparent product cutout; the background contains no product. */
:root {
  --sw-alkaline-can-image: url('/images/streamwater-still-355ml-latest.webp');
}

/* Tilda's legacy record gate is 980px, but the layout changes at 960px.
   Match that layout boundary, including phone browsers' 980px desktop mode,
   so the mobile record cannot expose both its product arrangements. */
#rec734784656 { display: none !important; }
#rec738830048 { display: block !important; }
@media (min-width: 960px) {
  #rec734784656 { display: block !important; }
  #rec738830048 { display: none !important; }
}

#rec734784656 .tn-elem[data-elem-id="1713153104805"] .tn-atom,
#rec738830048 .tn-elem[data-elem-id="1713153104805"] .tn-atom,
#rec738830048 .tn-elem[data-elem-id="1713827357157"] .tn-atom {
  position: relative;
  display: block;
}

#rec734784656 .tn-elem[data-elem-id="1713153104805"] .tn-atom > img,
#rec738830048 .tn-elem[data-elem-id="1713153104805"] .tn-atom > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Use the original Tilda layout box so the text and callouts never move. */
#rec734784656 .sw-alkaline-can,
#rec738830048 .sw-alkaline-can {
  position: absolute;
  top: 0;
  left: 62.85%;
  width: 18.2%;
  height: 95.2%;
  background: var(--sw-alkaline-can-image) center / contain no-repeat;
  filter: drop-shadow(6px 10px 8px rgb(37 33 96 / 12%));
  pointer-events: none;
}

/* Mobile already has a separate clean backdrop. Replace only its can,
   retaining its dimensions and existing position relative to the callouts. */
#rec738830048 .tn-elem[data-elem-id="1713827357157"] .tn-atom > img {
  visibility: hidden;
}
#rec738830048 .tn-elem[data-elem-id="1713827357157"] .sw-alkaline-can {
  inset: 0;
  width: 100%;
  height: 100%;
}