.venue-header.marbottom{margin-bottom:0 !important;} /*super-hack with cover photo*/
body.modeless-open .navigation-section{display:none !important;}
.cover-photo{width:100%; background-repeat:no-repeat;background-position:50% 35%;background-size:100%;}
.cover-photo-interior{padding-top:20px;padding-bottom:80px;width:1000px;margin:0px auto; overflow:auto;}
.cover-photo-interior h1,.cover-photo-interior h2{text-align:center;}



a.arrow-before{padding-left:6px;}
a.arrow-before:before{content: "\25BA";font-size:80%;pointer-events:none;padding-right:3px;text-decoration:none !important;display: inline-block;}


#section-rows-description div{background:#F1F1F1;border-radius:22px;width:44px;text-align:center;font-size:18px;color:#333;height:44px;line-height:44px;float:left;margin-right:10px;font-weight:bold;}
#section-rows-description span{line-height:44px;float:left;font-weight:bold;color:#999;font-size:11px; margin-right:30px;}
#section-rows-description div.multi-line{font-size:12px;line-height:inherit;padding-top:8px;height:36px;}
#section-rows-description span.last{margin-right:0;}

#section-table-description li{border-bottom:1px solid #F1F1F1;padding:15px;color:black;line-height:18px;overflow:auto;}
#section-table-description li label {width:150px;color:#999;font-size:14px;float:left;}
#section-table-description li div{float:left;width:420px;}
#section-table-description li span.negative,#section-table-description li span.positive,#section-table-description li span.neutral {padding:4px 6px;border-radius:4px;}
#section-table-description li span.positive{background:#6AA30F;color:white;}
#section-table-description li span.negative{background:#FF3333;color:white;}
#section-table-description li span.neutral{background:orange;color:white;}


.mobile #section-rows-description{border-top:none;}
.mobile #section-rows-description li{width:50%;float:left;margin-bottom:15px;}
.mobile #section-table-description li label{display:block;margin-bottom:3px;float:none;width:auto;}
.mobile #section-table-description li div{width:auto;}
.mobile #section-table-description li label div{display:block;}


th.sortable:hover{cursor:pointer;color:#333;}









.modal-wrapper .compare-card.active{z-index:100 !important;}

.modal-wrapper ul.ticket-list li.active{background:lightyellow;box-shadow:0px 2px 4px #CCC;}











.search-tickets-response ul.ticket-list-header{margin-right:-10px;padding:7px 0;border-bottom:1px solid #F1F1F1;overflow:auto;}
.search-tickets-response ul.ticket-list-header li{float:left;font-size:11px;color:#666;width:55px;text-align:center;}
.search-tickets-response ul.ticket-list-header li.price{width:90px;text-align:center;}
.search-tickets-response ul.ticket-list .price{width:90px;}
.search-tickets-response ul.ticket-list{margin-right:10px;}
.search-tickets-response li.listing{padding:10px 0;border-bottom:1px solid #F1F1F1;overflow:auto;line-height:26px;padding-right:10px;}
.search-tickets-response li.listing div{float:left;width:55px;text-align:center;}
.search-tickets-response button.buy{width:100%;padding:5px 0;line-height:16px;}

.search-tickets-response li.listing .price{color:#009933;font-weight:bold;font-size:16px;}





.has-tickets #fixed-ad-container{display:block !important;}
#fixed-ad-container.fixed{top:10px;}
#grid-right #fixed-ad-container.fixed{width:353px;}

.has-tickets .hide-if-has-tickets{display:none;}

/*sticky header start*/
body.sticky #sticky-header-marker{height:60px;}
#venue-header2{background:white;height:44px;font-size:14px;line-height:44px;width:100%;z-index:5000;}
body.sticky #venue-header2{height:60px;position:fixed;top:0;-moz-box-shadow:1px 2px 2px 0px #666;-webkit-box-shadow:1px 2px 2px 0px #666;box-shadow:1px 2px 2px 0px #666;}
#venue-header2 img.v{height:22px;top:11px;left:10px;}
body.sticky #venue-header2 img.v{height:30px;top:15px;}
#venue-header2 button{height:32px;top:6px;right:10px;}
body.sticky #venue-header2 button{height:40px;top:10px;right:10px;}
#venue-header2 ul.main-nav{position:absolute;left:40px;}
body.sticky #venue-header2 ul{left:60px;}
#venue-header2 ul.main-nav li{height:40px;line-height:40px;float:left;padding:0 15px;border-top:2px solid #FFF;border-bottom:2px solid #FFF;}
body.sticky #venue-header2 ul li{height:56px;line-height:56px;}
#venue-header2 ul.main-nav li.active{border-bottom-color:#0067CE;}
#venue-header2 ul.main-nav li:hover{border-bottom-color:#0067CE;cursor:pointer;}
#venue-header2 ul.main-nav li.active:hover{cursor:default;}
ul.main-nav li.ignored{border-bottom-color:#FFF !important;color:#999 !important;}


#venue-header2 ul.sub-nav{position:absolute;left:inherit;padding:10px;background:white;z-index:500;min-width:300px;margin-top:2px;margin-left:-22px;}
#venue-header2 ul.sub-nav li{border:none;line-height:34px;float:none;height:34px;padding:none;color:#444 !important;border-radius:3px;position:relative;}
#venue-header2 ul.sub-nav li:hover{color:white !important;background:#0067CE;}

ul.main-nav li.trigger .sub-nav{display:none;}
ul.main-nav li.trigger:hover .sub-nav{display:block;}





body.sticky #venue-header2 ul.main-nav li.non-essential{display:none;}
body.sticky #resizable-event-list-wrapper{margin-bottom:-60px;}
/*sticky header end*/

.cover-photo-interior{padding:60px 0;}








.cover-photo h1, .cover-photo h2{font-weight:normal !important;text-shadow:none !important;}

.photo-thumbnails-container img{height:90px;width:90px; margin-right:15px;}

.photo-thumbnails-container .thumbnail-holder .caption{padding:3px 0;width:100%;}


.header-content{color:black;}




.open-in-dialog img:hover{opacity:0.80;}

ul.pro-con-list li{padding:7px 0; padding-left:25px;line-height:15px;position:relative;}
ul.pro-con-list i{position:absolute;left:0;top:7px;}

.image-crop{height:360px;}

.other-seat-view{float:left;width:120px;height:90px;margin-right:10px;position:relative;}
.other-seat-view img{opacity:0.40;  filter:alpha(opacity = 40);height:90px;width:120px;-webkit-transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out;transition: opacity .25s ease-in-out;}
.other-seat-view:hover img{opacity:1;  filter:alpha(opacity = 100);}
.other-seat-view div{position:absolute;top:30px;text-align:center;width:100%;color:#333;font-weight:500;font-size:16px;}
.other-seat-view:hover div{display:none;}
  
  
.mobile body.fix-price-div #ticket-prices{top:0;width:100%;-webkit-box-shadow:0 2px 2px 0 #CCC !important;box-shadow:0 2px 2px 0 #CCC !important;-moz-box-shadow: 1px 2px 2px 0px #CCC;z-index:5000000000000000;border-bottom:1px solid #999;position:fixed;}
.mobile body.fix-price-div #seating-content{padding-top:62px;}
.mobile table.list-sections th{background:white;border-bottom:1px solid #CCC;font-weight:normal;}
.mobile  table.list-sections th.textRight{text-align:right;}
.mobile table.list-sections td{background:white;font-size:12px;}
.mobile table.list-sections td.fsize-14{font-size:14px;}


.mobile .cover-photo h1, .cover-photo h2{font-weight:normal !important;text-shadow:none !important;}  



[data-scene='header']{
   display: flex;
   flex-direction: column;
   gap: 16px;
}

[data-scene='header'] img{
   border-radius: 6px;
   height: 72px;
}

[data-scene='header'] .content{
   display: flex;
   flex-direction: row;
   gap: 16px;
}

[data-pattern="avatar-list"] [data-slot="title"] {
   font-weight: 500;
   font-size: 16px;
}

.avatar-list-zone-heading{
   font-size: var(--size-title);
}


ul[data-pattern="avatar-list"]{
   margin-block-end: var(--scene-gap);
}

[data-pattern="avatar-list"]{
   gap: 24px;
}

[data-pattern="avatar-list"] [data-slot="avatar"] img{
   border-radius: 999px;   
}
[data-pattern="avatar-list"] [data-slot="avatar"]{
   height: 44px;
   width: 44px;
}

@media (min-width: 768px) {
   [data-layout='rail'] {
       box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 16px;
       background: white;
       padding: 16px;
       border-radius: 12px;
       border: 1px solid #F8F8F8;
   }

   #primary-event-list{
      margin-bottom: 0;
   }
}

.avatar-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 24px;
   list-style: none;
   margin: 0;
   padding: 0;
 }


 
 /* Flex Container for Content */
 [data-layout='pit'] .pit-body {
   display: flex;
   flex-direction: column;
   padding: clamp(16px, 3vw, 24px);
   gap: 6px;
 }
 
 /* Title Styling */
 [data-layout='pit'] .pit-title {
   font-size: 18px;
   font-weight: 700;
 }

 [data-layout='pit'] .pit-content{
   display: flex;
   align-items: center;
   gap: 24px; /* space between subtitle and button */
   width: 100%;
}
 
 /* Subtitle Container */
 [data-layout='pit'] .pit-subtitle {
   display: flex;
   flex: 1;
   gap: 6px;
   font-size: 13px;
   color: var(--color-primary-dim);
 }

 [data-layout='pit'] .pit-subtitle .u-truncate{
    width: calc(100% - 24px);
 }

 [data-layout='pit'] .pit-subtitle div{
    gap: 6px;
 }


  /* Button Styling */
  [data-layout='pit'] a[data-is='btn'].btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 24px;
   width: clamp(160px, 40vw, 400px);
   white-space: nowrap;
}



 [data-layout='pit'] .pit-actions{
    gap: 4px;
 }

 [data-layout='pit'] .pit-note {

   text-align: right;
   color: var(--color-primary-subtitle);
 }
 [data-layout='pit'] .pit-note [data-is='icon']{
    height: 24px;
    width: 24px;
 }
 
 /* Icon Styling */
 [data-layout='pit'] i[data-is='icon'] {
   display: inline-block;
   width: 16px;
   height: 16px;

 }



/* ===========================================================================
   SEAT VIEWS / SECTIONS PAGE  (added 2026-09-24)
   Built and verified in _lab/KH/seat-views-seo/.
     - the reserved have-tickets slot (#ht-slot)
     - the feature column reserving the rail from first paint
     - the section list's search box
   No h1-h6 sizing here: the design system owns headers. Light UI only.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   THE RESERVED HAVE-TICKETS SLOT
   One height per breakpoint, on the box itself. Every part fills it.
   overflow:hidden + contain make it impossible for any part (or the real
   widget's later steps) to push the page. Width-based breakpoints only:
   the height must be identical across states at a given viewport.
   --------------------------------------------------------------------------- */
#ht-slot{
   --ht-slot-h: 224px;
   position: relative;
   height: var(--ht-slot-h);
   box-sizing: border-box;
   overflow: hidden;
   contain: layout paint;
   margin-block-end: var(--scene-gap, 24px);
}
@media (min-width: 600px){
   #ht-slot{
      --ht-slot-h: 200px;
   }
}

#ht-slot > [data-ht-part]{
   display: none;
   height: 100%;
   box-sizing: border-box;
}
#ht-slot[data-ht-view='widget']   > [data-ht-part='widget'],
#ht-slot[data-ht-view='event']    > [data-ht-part='event'],
#ht-slot[data-ht-view='events']   > [data-ht-part='events'],
#ht-slot[data-ht-view='selected'] > [data-ht-part='selected']{
   display: block;
}

/* The selected-event card (venue-app.js VenueRail, hosted here rather than in
   the rail). The box is already at the card's height before it renders, because
   the static event card stands in at the same size — so the swap moves nothing.
   The card's own shadow needs the room, hence the padding. */
#ht-slot{
   --ht-event-h: 248px;
}
@media (max-width: 599px){
   #ht-slot{
      --ht-event-h: 276px;
   }
}
#ht-slot[data-ht-size='event']{
   --ht-slot-h: var(--ht-event-h);
}
/* A long event name wraps to another line, so this state keeps the reserved
   height as a FLOOR and grows instead of clipping the card's button. */
#ht-slot[data-ht-view='selected']{
   height: auto;
   min-height: var(--ht-event-h);
   overflow: visible;
   contain: none;
}
#ht-slot > [data-ht-part='selected']{
   padding: 4px 4px 12px;
}
/* The card's height varies with the event (a price line, a name that wraps),
   so centre it in the reserved box rather than letting short cards hang from
   the top. */
#ht-slot[data-ht-view='selected'] > [data-ht-part='selected']{
   display: flex;
   flex-direction: column;
   justify-content: center;
}
#ht-slot > [data-ht-part='selected'] .ver-selected-event{
   margin: 0;
}

/* A returning Yes visitor opens on the widget's own "Claim Your Exclusive
   Discount" screen, which is taller than its first question. Reserved
   pre-paint (views/ht-slot.php sets data-ht-size). Heights measured in
   headless Chrome: natural 436px at 360/390, 441px at 768, 448px at 960/1280,
   Scott Stadium event line. The extra room is for a longer event name (the
   event line sits at the top of that screen); the widget centres its content,
   so spare height shows as padding, never as a gap below. */
#ht-slot{
   --ht-capture-h: 468px;
}
@media (min-width: 600px){
   #ht-slot{
      --ht-capture-h: 464px;
   }
}
#ht-slot[data-ht-size='capture']{
   --ht-slot-h: var(--ht-capture-h);
}

/* After the visitor's first click inside the widget, the box grows straight
   to the email-capture height and follows the widget from there. Growing all
   at once matters: the widget reaches its email step ~700ms after "Next" (two
   chained 350ms fades), which is outside the 500ms a browser excuses after a
   click, so growing step by step would count as layout shift (measured 0.014
   on desktop). One jump on the click is excused; every later step fits. */
#ht-slot[data-ht-grow]{
   height: auto;
   min-height: max(var(--ht-slot-h), var(--ht-capture-h));
   overflow: visible;
   contain: none;
}

/* the real widget, filling the box */
#ht-slot #have-tickets-widget{
   height: 100%;
   border-radius: 8px;
}
#ht-slot[data-ht-grow] #have-tickets-widget{
   height: auto;
   min-height: max(var(--ht-slot-h), var(--ht-capture-h));
}
#ht-slot .ht-widget{
   height: 100%;
   min-height: inherit;
   box-sizing: border-box;
}

/* event / events: the site's event-list row inside the widget's grey panel */
#ht-slot > [data-ht-part='event'],
#ht-slot > [data-ht-part='events']{
   background: #F8F8F8;
   border-radius: 8px;
   padding: clamp(16px, 3vw, 24px);
}
/* Centred, but every child has a fixed height (kicker 16px, row 104px), so the
   stack's total height is constant and centring cannot move anything when
   fonts or late styles settle. */
#ht-slot[data-ht-view='event'] > [data-ht-part='event'],
#ht-slot[data-ht-view='events'] > [data-ht-part='events']{
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 8px;
}
#ht-slot .list-events li.is-event{
   height: 104px;
   box-sizing: border-box;
   overflow: hidden;
}
#ht-slot .list-events li.is-event a.link-wrapper{
   height: 100%;
   box-sizing: border-box;
   padding: 16px;
   align-items: start;
}
#ht-slot .list-events .event-name{
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
/* Fill the column from first paint. Measured: the button painted at its
   content width (98px) and was stretched to its column (128px) after load,
   a 0.0002 shift inside the slot. */
#ht-slot .list-events li.is-event button{
   width: 100%;
   justify-self: stretch;
   box-sizing: border-box;
   height: 40px;
   line-height: 40px;
   margin-top: 10px;
}
/* events.css sizes these columns in rem + %. Measured: the columns resolved
   differently at first paint than after load (button 90px -> 120px, CLS
   0.0007 inside the slot). Pixel columns take the slot out of that. The narrow
   variant mirrors events.css's own @container breakpoint. */
#ht-slot .list-events li.is-event a.link-wrapper{
   grid-template-columns: 96px minmax(0, 1fr) 128px;
}
@container (max-width: 539px){
   #ht-slot .list-events li.is-event a.link-wrapper{
      grid-template-columns: 64px minmax(0, 1fr) 16px;
   }
}
/* events.css labels EventSchedule's empty buttons with ::after "See Tickets".
   These buttons carry their own label, so switch that off inside the slot. */
#ht-slot .list-events li.is-event button:after{
   content: none;
}
/* Explicit line box: line-height:normal differs between the fallback font and
   the web font, so a swap would move everything under the kicker. */
#ht-slot [data-ht-part] [data-slot='kicker']{
   font-size: 12px;
   line-height: 16px;
   height: 16px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--color-60);
}
#ht-slot .list-events{
   list-style: none;
   margin: 0;
   padding: 0;
}
#ht-slot .list-events .date-block i[data-is='icon']{
   font-size: 28px;
   color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   FEATURE COLUMN RESERVES THE RAIL FROM FIRST PAINT (desktop)

   Measured in headless Chrome: with ~165 server-rendered photo cards ahead of
   the rail in source order, the first paint happens BEFORE the rail element is
   parsed. The feature column paints at its 768px max, then shrinks to 722px
   when the rail arrives, and everything in it reflows sideways (CLS). The live
   page is short enough that the rail is parsed before first paint, so it
   doesn't show this.

   layout.css: stage is flex; feature flex 1 1 768px (max 768px); rail flex
   1 1 464px; gap clamp(48px, 6vw, 72px). With both present, flex-shrink
   settles the feature at (100% - gap) * 768 / 1232, capped at 768px. Setting
   that width directly gives the same result whether or not the rail exists
   yet. Below 960px the stage stacks and none of this applies.
   The general fix belongs in layout.css (or rail-first source order); this
   keeps it scoped to this page.
   --------------------------------------------------------------------------- */
@media (min-width: 960px){
   main[data-show='feature+rail|pit'] [data-layout='feature']{
      flex: 0 0 auto;
      width: min(768px, calc((100% - clamp(48px, 6vw, 72px)) * 768 / 1232));
   }
}


/* ---------------------------------------------------------------------------
   SECTION LIST
   The list is the .avatar-grid + avatar-list pattern. Only the search box and
   the hide rule are added.
   --------------------------------------------------------------------------- */
/* The avatar-list pattern gives its rows a display value, and an author
   display beats the UA's [hidden]{display:none}. Without this the search
   can't hide anything. */
#section-list [hidden],
[data-role='search-empty'][hidden]{
   display: none !important;
}
/* Same look as the teams page's search (themes/teams/lib/styles.css). */
[data-role='section-search']{
   display: flex;
   margin: 0 0 24px;
}
#section-search{
   width: 100%;
   height: 56px;
   box-sizing: border-box;
   padding: 16px;
   border: none;
   border-radius: 36px;
   background-color: #F1F1F1;
   outline: none;
   font-size: 16px;
   line-height: 24px;
   transition: box-shadow .3s ease, background-color .3s ease;
}
#section-search::placeholder{
   color: #888;
   opacity: 1;
}
#section-search:focus{
   box-shadow: 0 0 5px rgba(0, 123, 255, .5);
   background-color: #f8f8f8;
}
#section-list [data-role='zone-group'] h3{
   margin-block: 24px 12px;
}
/* The rule under the section list is a divider between the list and the
   questions, so it needs the same air above it as below it. The scene's own
   margin only spaces what comes AFTER the line, which read as a line hung off
   the bottom of the list. */
#find-your-seats.u-outline-bottom{
   padding-block-end: calc(var(--scene-gap) * 2);
   margin-block-end: calc(var(--scene-gap) * 2);
}
/* FAQ answer lists (best views). The bullets and the indent come from the base
   dot-list (lib/base/styles/src/lists.css, ul[data-is='list'].list-dots li):
   defs.css sets list-style-type:none on EVERY li, which beats a list-style set
   on the ul, so styling the ul here printed no bullets at all. Only the row
   spacing is left to the lab. */
#seat-questions ul[data-role='faq-list'] li{
   /* margin-block only: the shorthand would zero the base list's margin-left
      and leave the bullets hanging outside the text column. */
   margin-block: 4px;
}