SShepherd

Updated code for Squarespace 7.1:
.event-time-localized:after { content: "Timezone: PDT"; padding-left: 4px; font-size: 12px; font-weight: bold; }  

I would love a code solution (or a new feature) to show days as well.
My workaround has been to add the day of the week to the event as a Tag, then display the tag as the first piece of metadata on the Summary Block, and the date as the secondary, as shown below:

Updated code for Squarespace 7.1:
.event-time-localized:after { content: "Timezone: PDT"; padding-left: 4px; font-size: 12px; font-weight: bold; }  

@JustinSeimits
Add the following to Settings > Advanced > Code Injection > HEADER. The poster doesn't need to do this step as they already have jQuery installed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page.
<script> $( ( ) => { /* begin reposition first page section background so header doesn't hide it Version : 0.2d0 SS Version : 7.1 Dependancies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ // increase section height the same amount the image is moved down const increaseSectionHeight = false; // do not change anything below, there be the borg here $( window ) .resize ( function ( ) { const h = $( '#header' ).height ( ); const $firstPageSection = $( ':not( #footer-sections ) > .page-section:first' ); if ( ! $firstPageSection.length ) return; // bail if no first section const selector = '.section-background img, ' + '.section-background .sqs-video-background'; const $e = $( selector, $firstPageSection ); $e.css ( 'top', h + 'px' ); // bail if no section height increase if ( ! increaseSectionHeight ) return; let minHeight = 0; switch ( true ) { case $firstPageSection.hasClass ( 'section-height--medium' ) : minHeight = 66; break; case $firstPageSection.hasClass ( 'section-height--small' ) : minHeight = 33; break; default : minHeight = 100; } if ( minHeight ) $firstPageSection.css ( 'min-height', 'calc( ' + minHeight + 'vh + ' + h + 'px )' ); } ) .resize ( ); // end reposition first page section background so header doesn't hide it } ); </script> Let us know how it goes.

Updated code for Squarespace 7.1:
.event-time-localized:after { content: "Timezone: PDT"; padding-left: 4px; font-size: 12px; font-weight: bold; }  

Updated code for Squarespace 7.1:
.event-time-localized:after { content: "Timezone: PDT"; padding-left: 4px; font-size: 12px; font-weight: bold; }  

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread.  
  1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.) 2) Set Section Height to minimum-10. 3) Delete the default background image.  4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below.  5) Delete the spacer that may show up in the center of the section.  6) Obtain this new Section’s section-id and its empty Text block-id.  7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above.    <style> [data-section-id=“XXXXX"] {     min-height: 1vh !important; } [data-section-id=“XXXXX"] .content-wrapper {     padding-top: 0px !important;     padding-bottom: 0px !important;     background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/ } #block-XXXXX {   padding: 0px !important;   font-size: 1px !important; } </style>  

if the font exist, this code should work
p.gallery-caption-content { font-family: LTC-Bodoni-175 !important; }  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

@JustinSeimits
I have updated my Jun 5th code post.
Whew! Hopefully that works better.
This is for the more technically inclined. My first attempt was a little ham fisted. So I went after the .background-section class element. At first blush it seemed to be as easy as setting the top property to move the top down. Just like my first attempt eh? I then discovered that SS is doing dynamic calculations on the first page section background section. So my top setting was getting blown away! 😞 

Add to Design > Custom CSS
/* header-announcement bar */ header#header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }  

Ghost has a free plugin that does this... you'd just want to change out the content from a slash to a vertical line.
https://www.ghostplugins.com/steps/9sywh58h

align-items: flex-start;

...For anyone who's wondering. This problem is still unresolved. Meanwhile for anyone who's more able at providing further insights to this thread is appreciated.

Just chiming in to say I and my clients are frustrated by this limitation as well. It seems Squarespace needs "add ons" in addition to product variants.
My current use case is a summer camp with 12 enrollment slots per week with optional extended care. I've set each week up as a service product. I can't create a separate product called "extended care" as non-campers could purchase it, or parents purchase it for the incorrect week of camp.