/*
Theme Name: Boulder Burgundy Festival 2026
Theme URI: https://boulderburgundy.com
Description: Festival theme for the Boulder Burgundy Festival. Child of Storefront. Type and palette are shared with Boulder Wine Merchant (BenchNine / Zilla Slab, navy on cream); the festival shifts the shop's coral accent to claret and its blue to gold.
Author: Animas Digital
Template: storefront
Version: 1.0.0
Text Domain: bbf2026
*/

:root{
  --paper:#FFF9EF;
  --paper-2:#F8EDE1;
  --edge:#E5D6C3;
  --ink:#26264D;
  --ink-soft:#5E5E7C;
  --claret:#9E1B3C;
  --gold:#9A7223;
  --gold-bright:#C79A34;
  --band:#8E1735;
  --band-ink:#FFF9EF;
  --desc:#4B4B6B;
}

/* ============ base ============ */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Zilla Slab",Georgia,serif;
  font-size:17.5px;
  line-height:1.7;
}
.bbf h1,.bbf h2,.bbf h3,
.bbf-heading{
  font-family:"BenchNine","Oswald","Arial Narrow",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:.9;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
.bbf p{margin:0}
.bbf img{display:block;max-width:100%}
.bbf :focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

.bbf-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.bbf-narrow{max-width:680px;margin-left:auto;margin-right:auto}

/* let the front page and tickets page run full bleed inside Storefront */
.bbf-full .site-content .col-full{max-width:none;padding-left:0;padding-right:0}
.bbf-full .site-content{padding-top:0;padding-bottom:0}
.bbf-full .entry-header,
.bbf-full .storefront-breadcrumb,
.bbf-full .page-header{display:none}

.bbf-appellation{
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
/* Date and time each hold a line of their own — see bbf_when_lines(). The
   tighter leading is because the body's 1.7 is set for prose and leaves a
   two-line eyebrow looking like two separate labels. */
.bbf-when-line{display:block;line-height:1.5}

/* ============ buttons ============ */
.bbf .bbf-btn,
.bbf-btn{
  display:inline-block;cursor:pointer;text-decoration:none;
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;
  font-size:14px;text-transform:uppercase;letter-spacing:.07em;line-height:1.2;
  padding:.6em 1.7em;border-radius:2em;
  background:var(--claret);color:var(--paper);border:2px solid var(--claret);
  transition:background .18s ease,color .18s ease;
}
.bbf .bbf-btn:hover,.bbf-btn:hover{background:transparent;color:var(--claret)}
.bbf-btn--quiet{background:transparent;color:var(--ink);border-color:var(--edge)}
.bbf-btn--quiet:hover{color:var(--claret);border-color:var(--claret)}
.bbf-btn--sm{font-size:13.5px;padding:.5em 1.4em}

/* ============ label rule ============ */
.bbf-rule{display:flex;align-items:center;gap:14px;color:var(--gold-bright)}
.bbf-rule::before,.bbf-rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.bbf-rule i{display:block;width:6px;height:6px;transform:rotate(45deg);background:currentColor;flex:0 0 auto}

/* ============ hero ============ */
.bbf-hero{padding:88px 0 78px;text-align:center}
.bbf-label{
  border:1px solid var(--gold-bright);padding:56px 40px 50px;position:relative;
  background:
    radial-gradient(115% 72% at 50% 30%, rgba(214,170,79,.085), transparent 62%),
    linear-gradient(180deg,var(--paper-2),transparent 62%);
}
.bbf-label::after{content:"";position:absolute;inset:7px;border:1px solid var(--gold-bright);opacity:.32;pointer-events:none}
.bbf-hero h1{font-size:clamp(52px,11vw,124px);letter-spacing:.012em;margin:24px 0}
.bbf-hero h1 em{display:block;font-style:normal;color:var(--claret)}
.bbf .bbf-dates{
  font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:.05em;font-variant-numeric:tabular-nums;
  margin-top:24px;line-height:1;
}
.bbf .bbf-place{font-size:15px;color:var(--ink-soft);margin-top:12px}
.bbf-producer{
  margin:34px auto 0;padding-top:30px;border-top:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;gap:32px;text-align:left;
}
.bbf-producer-text{min-width:0}
.bbf .bbf-producer-name{font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(27px,4vw,40px);line-height:.95;margin-top:10px}
.bbf .bbf-producer-domaine{font-size:16px;color:var(--ink-soft);margin-top:7px;font-style:italic}
.bbf-hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:36px}

.bbf-rise{opacity:0;transform:translateY(14px);animation:bbf-rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.bbf-rise:nth-child(1){animation-delay:.05s}
.bbf-rise:nth-child(2){animation-delay:.13s}
.bbf-rise:nth-child(3){animation-delay:.21s}
.bbf-rise:nth-child(4){animation-delay:.29s}
.bbf-rise:nth-child(5){animation-delay:.37s}
.bbf-rise:nth-child(6){animation-delay:.45s}
@keyframes bbf-rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bbf-rise{animation:none;opacity:1;transform:none}
  .bbf-btn,.bbf-parcel-img img{transition:none}
}

/* ============ sections ============ */
.bbf-section{padding:76px 0}
.bbf-section-head{text-align:center;margin-bottom:46px}
.bbf-section-head h2{font-size:clamp(34px,5.4vw,60px);margin:14px 0 0}
.bbf-section-head .bbf-rule{max-width:190px;margin:0 auto}
.bbf .bbf-lede{color:var(--ink-soft);margin:14px auto 0;max-width:580px}

/* ============ event parcels ============ */
/* Explicit column counts rather than auto-fit: the package band below has to
   span an exact pair of columns, and auto-fit gives no guarantee of how many
   there are. */
.bbf-parcels{display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:660px){
  .bbf-parcels{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:940px){
  .bbf-parcels{grid-template-columns:repeat(3,1fr)}
}
.bbf-parcel{border:1px solid var(--edge);background:var(--paper-2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.bbf-parcel-img{aspect-ratio:16/10;overflow:hidden;background:var(--edge)}
.bbf-parcel-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.bbf-parcel:hover .bbf-parcel-img img{transform:scale(1.04)}
.bbf-parcel-body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:13px;flex:1}
.bbf-parcel h3{font-size:32px}
.bbf-parcel-meta{font-size:15px;color:var(--ink-soft)}
.bbf-parcel p{font-size:16.5px;color:var(--ink-soft)}
.bbf-parcel .bbf-btn{align-self:flex-start;margin-top:4px}

/* ---- the Sunday package ----
   It bundles two of the three parcels above, so it is set as a band under the
   row rather than a fourth card in it: gold-edged instead of paper-2, laid out
   horizontally so it cannot be mistaken for another event. */
.bbf-package{
  padding:28px 32px;
  border:1px solid var(--gold-bright);border-radius:20px;
  background:linear-gradient(180deg,rgba(214,170,79,.1),transparent 70%);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.bbf-package-text{flex:1 1 420px;min-width:0}
.bbf .bbf-package h3{font-size:clamp(25px,3vw,31px);line-height:1.02;margin:10px 0 0}
.bbf .bbf-package p{color:var(--ink-soft);font-size:16.5px;margin-top:10px}
.bbf .bbf-package .bbf-package-meta{color:var(--gold-bright);font-size:15px;margin-top:12px}
.bbf-package .bbf-btn{flex:0 0 auto}

/* It bundles the two Sunday events, not Saturday's lunch, so at three columns
   it starts under the second card — the Saturday column stays clear beside it,
   which is what says "these two, not all three" before any copy is read.
   Below that the cards stack and the pairing is carried by the copy instead. */
.bbf-package{grid-column:1/-1}
@media (min-width:940px){
  .bbf-package{grid-column:2/-1}
}
@media (max-width:620px){
  .bbf-package{padding:24px 22px;gap:20px}
}

/* ============ bottle strip ============ */
.bbf-strip{height:clamp(260px,36vw,480px);overflow:hidden;background:var(--edge)}
.bbf-strip img{width:100%;height:100%;object-fit:cover;object-position:center 58%}

/* ============ mission band ============ */
.bbf-mission{background:var(--band);color:var(--band-ink);padding:72px 0;text-align:center}
.bbf-mission .bbf-appellation{color:var(--band-ink);opacity:.75}
.bbf-mission h2{font-size:clamp(32px,5vw,54px);margin:14px auto 0;max-width:880px;color:var(--band-ink)}
.bbf-mission p{max-width:640px;margin:20px auto 0;opacity:.88;font-size:17px}
.bbf-figures{display:flex;justify-content:center;gap:58px;flex-wrap:wrap;margin-top:44px}
.bbf-figure b{display:block;font-family:"BenchNine",sans-serif;font-weight:700;font-size:60px;line-height:.9;font-variant-numeric:tabular-nums}
.bbf-figure span{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:9px;opacity:.78}

/* ============ founder ============ */
.bbf-quote{font-family:"Zilla Slab",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(21px,3.1vw,30px);line-height:1.4;margin:18px 0 0;text-wrap:balance}
.bbf .bbf-attrib{font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.06em;color:var(--gold);margin-top:26px}

/* ============ sponsors ============ */
.bbf-sponsors{text-align:center;padding:62px 0;border-top:1px solid var(--edge)}
.bbf-sponsor-list{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0}
.bbf-sponsor-list li{font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;font-size:23px;color:var(--ink-soft)}

/* ============ tickets ============ */
.bbf-tickets{display:flex;flex-direction:column;gap:20px;max-width:900px;margin:0 auto}
.bbf-ticket{
  border:1px solid var(--edge);background:var(--paper-2);border-radius:20px;
  padding:32px 34px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
}
.bbf-ticket-when{font-weight:700;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bbf-ticket h3{font-size:30px;margin:11px 0 9px}
.bbf-ticket h3 a{text-decoration:none;color:inherit}
.bbf-ticket h3 a:hover{color:var(--claret)}
.bbf .bbf-ticket-where{font-size:15px;color:var(--ink-soft);margin-bottom:13px}
.bbf-ticket-desc{font-size:16.5px;color:var(--ink-soft);max-width:56ch}
.bbf-ticket-desc p{margin:0 0 .6em}
.bbf-ticket-buy{display:flex;flex-direction:column;align-items:flex-end;gap:13px;min-width:180px;text-align:right}
.bbf-price{font-family:"BenchNine",sans-serif;font-weight:700;font-size:44px;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.bbf-price small{display:block;font-family:"Zilla Slab",serif;font-weight:400;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
.bbf-price .amount{font-family:inherit;font-size:inherit;color:inherit}
.bbf-price del{display:none}
.bbf-stamp{font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:2em;border:2px solid currentColor}
.bbf-stamp--open{color:var(--claret)}
.bbf-stamp--out{color:var(--ink-soft)}
/* gold, not the muted ink of a sold-out ticket — this one is still to come */
.bbf-stamp--soon{color:var(--gold-bright)}
.bbf-ticket.is-out{opacity:.62}
.bbf-empty{text-align:center;color:var(--ink-soft);padding:40px 0}

/* ============ Storefront header + footer ============ */
.site-header{background:var(--paper) !important;border-bottom:1px solid var(--edge);padding-top:.7em;padding-bottom:.7em}
.site-header .site-branding .site-title a,
.site-header .site-branding .site-description{color:var(--ink)}
.site-header .site-branding .site-title a{
  font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.5em;line-height:.9;letter-spacing:.01em;text-decoration:none;
}
.site-header .site-branding .site-description{
  font-family:"Zilla Slab",serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-top:6px;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover{color:var(--claret)}
.main-navigation ul.menu > li.current-menu-item > a{color:var(--claret)}
.site-header-cart .cart-contents{color:var(--ink)}
.site-header-cart .cart-contents:hover{color:var(--claret)}
.site-header-cart .count{background:var(--claret);color:var(--paper)}

.site-footer{background:var(--ink);color:var(--paper);padding-top:2.4em;padding-bottom:2.4em}
.site-footer a{color:var(--gold-bright)}
.bbf-credit{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;font-size:15px}

/* WooCommerce buttons inherit the festival accent */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--claret);color:var(--paper);border-radius:2em;
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--band);color:var(--paper)}
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt{background:var(--claret);color:var(--paper)}

@media (max-width:820px){
  .bbf-ticket{grid-template-columns:1fr}
  .bbf-ticket-buy{align-items:flex-start;text-align:left}
  .bbf-hero{padding:52px 0 46px}
  .bbf-label{padding:38px 20px 36px}
  .bbf-figures{gap:34px}
}

/* ============ header refinements ============ */
.site-header{display:flex;align-items:center;flex-wrap:wrap;gap:34px;position:relative}
.site-header > .col-full{flex:0 0 auto;width:auto;max-width:none;padding-right:0;margin-right:0}
.site-header > .storefront-primary-navigation{flex:1 1 320px;min-width:0;background:transparent;margin:0}
.site-header > .storefront-primary-navigation > .col-full{max-width:none;padding-left:0;margin-left:0}
/* flex, not inline-block: as an inline-block the link sits on a text baseline
   and the parent's descender space padded it underneath, which made the header
   read as bottom-heavy. Flex also puts the grape mark beside the wordmark
   without either one riding the other's baseline. */
.bbf-branding .bbf-wordmark-link{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);
}
/* Sized just under the three-line wordmark rather than matching it — the mark
   is a full-bleed circle, so equal heights make it read as the larger of the
   two. The PNG is transparent outside the circle, so no plate is needed. */
.bbf-branding .bbf-mark{flex:0 0 auto;display:block;width:46px;height:auto}
.bbf .site-header .site-branding{line-height:1}
.bbf-branding .custom-logo{max-height:54px;width:auto;display:block}
.bbf-wordmark{
  display:block;font-family:"BenchNine",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:20px;line-height:.98;letter-spacing:.02em;
}
.bbf-wordmark-line{display:block;white-space:nowrap}
.site-header .main-navigation{float:none}
.site-header .site-header-cart{float:right;margin-bottom:0}
.site-header-cart .cart-contents{
  font-family:"Zilla Slab",serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;
}
.site-header-cart .cart-contents .count{
  background:transparent;color:var(--gold);font-weight:400;padding:0 0 0 .4em;
}
.site-header-cart .cart-contents .amount{color:var(--ink)}

/* ============ typographic fixes ============ */
/* BenchNine's accents sit above the cap line — .9 leading clips them. */
.bbf-parcel h3,.bbf-ticket h3,.bbf-section-head h2,.bbf-mission h2{line-height:1.02}
.bbf-hero h1{line-height:.95}

/* Storefront styles blockquote with a rule and indent; the design has neither. */
.bbf blockquote.bbf-quote{
  border:0;margin:18px 0 0;padding:0;font-size:clamp(21px,3.1vw,30px);color:var(--ink);
}
.bbf blockquote.bbf-quote p{margin:0}

.bbf-ticket-desc{margin:0}
.bbf-ticket h3{margin-top:10px}

/* branding sizing — keep the wordmark on two lines, mark at a fixed size */
.bbf-ticket-desc{color:var(--desc)}

/* ============================================================
   Dark intro — front page only.
   The masthead and hero share one deep navy block, then the page
   opens into cream at "Two days on the slope". Tokens are
   redefined on the zone so every descendant inherits them.
   ============================================================ */
.bbf-hero,
.bbf-section--dark{
  --paper:#151430;
  --paper-2:#1D1C3D;
  --edge:#343364;
  --ink:#F2ECE0;
  --ink-soft:#A7A4C6;
  --claret:#E97A93;
  --gold:#D6AA4F;
  --gold-bright:#E8C46A;
  --desc:#B9B6D4;
  background:var(--paper);
  color:var(--ink);
}

/* the hero button inverts: light claret fill, dark ink */
.bbf-hero .bbf-btn,
.bbf-section--dark .bbf-btn{background:var(--claret);color:var(--paper);border-color:var(--claret)}
.bbf-hero .bbf-btn:hover,
.bbf-section--dark .bbf-btn:hover{background:transparent;color:var(--claret)}

/* headings inside the dark zone follow the zone's ink, not Storefront's */
.bbf-section--dark h2,
.bbf-section--dark h3,
.bbf-section--dark h3 a{color:var(--ink)}
.bbf-section--dark .bbf-lede,
.bbf-section--dark .bbf-parcel p,
.bbf-section--dark .bbf-parcel-meta{color:var(--ink-soft)}

/* the strip is the boundary — close the dark block flush against it */
.bbf-section--dark{padding-bottom:86px}
.bbf-strip{margin-top:0}

/* Storefront spaces the header off the content with margin-bottom, which lets
   the page background show as a band. The designed templates set their own
   vertical rhythm, so drop it there — and collapse WooCommerce's empty
   notices wrapper, which leaves a second band of the same kind. */
/* Storefront's own rule here is four classes deep
   (.home.page:not(.page-template-template-homepage) .site-header),
   so match that weight rather than reaching for !important. */
.bbf-full .site-header,
.bbf-full.home.page .site-header,
.bbf-full.no-wc-breadcrumb .site-header{margin-bottom:0}
/* horizontal padding too, or the full-bleed sections sit in a gutter */
.bbf-full #content.site-content{padding:0}
.bbf-full .site-content > .col-full{padding:0;max-width:none;margin-left:0;margin-right:0;width:auto}
.bbf-full .site-content > .col-full > .woocommerce:not(:has(*)){display:none}


/* hero divider rhythm — equal air above and below each rule */
.bbf-rule--top{max-width:340px;margin:22px auto 0}
.bbf-rule--dates{max-width:340px;margin:0 auto}

/* featured producer portrait, matted like a plate inside the label */
.bbf-producer-photo{
  flex:0 0 auto;width:200px;margin:0;padding:6px;
  border:1px solid var(--gold-bright);
}
.bbf-producer-photo img{
  display:block;width:100%;height:250px;object-fit:cover;object-position:45% 50%;
}
@media (max-width:620px){
  .bbf-producer{flex-direction:column;gap:22px;text-align:center}
  .bbf-producer-photo{width:180px}
  .bbf-producer-photo img{height:226px}
}

/* ---------- the announcement, set as a letter ---------- */
.bbf-letter{max-width:810px;margin:0 auto;text-align:center}
.bbf .bbf-letter p{margin:0 0 1.2em;line-height:1.78}
.bbf .bbf-letter p:first-of-type{font-size:21px;line-height:1.6;color:var(--ink)}
.bbf .bbf-letter-signoff{
  font-style:italic;font-size:19px;color:var(--gold);margin:1.6em 0 0;
}
@media (max-width:620px){
    .bbf .bbf-letter p:first-of-type{font-size:18.5px}
}

@media (max-width:760px){
  .bbf-wordmark{font-size:17px}
  .bbf-branding .bbf-wordmark-link{gap:10px}
  .bbf-branding .bbf-mark{width:38px}
}

/* Nav centred on the header itself, so the branding and cart widths don't
   pull it off-centre. Absolute only where there is room; below this it
   returns to normal flow and the handheld menu takes over. */
@media (min-width:900px){
  /* Storefront sets .woocommerce-active .site-header .main-navigation to
     float:left with a percentage width — match its weight to take it back. */
  .bbf.woocommerce-active .site-header .main-navigation{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:auto;margin:0;float:none;clear:none;
  }
  .site-header .storefront-primary-navigation > .col-full{
    display:flex;align-items:center;justify-content:flex-end;
  }
  .site-header .site-header-cart{float:none;margin:0}
}

/* ---------- header: gutters, centring, cart ---------- */

/* Symmetric gutters, controlled on the header rather than the inner wrappers. */
.site-header{padding-left:52px;padding-right:52px}
.site-header > .col-full,
.site-header > .storefront-primary-navigation > .col-full{
  padding-left:0;padding-right:0;max-width:none;
  /* .col-full centres itself with auto margins; in a flex header that makes a
     wrapped item drift to the middle of its line. */
  margin-left:0;margin-right:0;
}

/* Storefront gives .site-branding margin-bottom:1.41575em, which in a flex
   header shows up as dead space under the wordmark and reads as bad centring. */
.bbf .site-header .site-branding{margin-bottom:0}

/* And sizes the cart as a 21.7% float, which spreads the total and the basket
   icon apart across a quarter of the header. */
.bbf.woocommerce-active .site-header .site-header-cart{
  width:auto;float:none;margin:0;
  display:flex;align-items:center;gap:14px;
}
.bbf .site-header .site-header-cart li{margin:0;padding:0;display:flex;align-items:center}
.bbf .site-header .site-header-cart .cart-contents{display:flex;align-items:center;gap:.85em;padding:0}

@media (max-width:760px){
  .site-header{padding-left:20px;padding-right:20px}
}

/* The cart glyph's own metrics leave it sitting a couple of pixels below the
   text beside it, so nudge it onto the same optical line. */
.bbf .site-header .site-header-cart .cart-contents::after{
  display:block;line-height:1;align-self:center;transform:translateY(-2px);
}

/* ---------- header below the desktop breakpoint ---------- */
@media (max-width:899px){
  .site-header{flex-wrap:nowrap;gap:14px;padding-top:.55em;padding-bottom:.55em}
  .site-header > .col-full{flex:1 1 auto;min-width:0}
  .site-header > .storefront-primary-navigation{flex:0 0 auto;min-width:0}
  .site-header .storefront-primary-navigation > .col-full{
    display:flex;align-items:center;justify-content:flex-end;gap:16px;
  }
  /* cart first, toggle at the outside edge */
  .bbf.woocommerce-active .site-header .site-header-cart{order:1}
  .bbf.woocommerce-active .site-header .main-navigation{
    order:2;width:auto;float:none;clear:none;margin:0;
  }
  .site-header .menu-toggle{margin:0;float:none;white-space:nowrap}

  /* The expanded menu drops below the header instead of stretching it.
     This is deliberately NOT scoped to .toggled: Storefront's JS removes that
     class as the slide-up starts, so a .toggled-scoped rule would drop the
     panel back into flow mid-animation and the links would stack in the narrow
     right-hand flex item before disappearing. */
  .site-header .main-navigation{position:static}
  .site-header .handheld-navigation{
    /* hidden when closed — without this the empty panel still paints its
       background and padding over the top of the hero. jQuery's slideUp sets
       an inline display during the animation, so it still animates correctly. */
    display:none;
    position:absolute;left:0;right:0;top:100%;z-index:999;
    background:var(--paper);border-bottom:1px solid var(--edge);
    padding:4px 20px 14px;box-shadow:0 12px 24px rgba(38,38,77,.12);
    text-align:left;
  }
  .site-header .handheld-navigation ul{margin:0;padding:0;list-style:none}
  .site-header .handheld-navigation ul li{display:block;width:100%}
}

/* Between 768 and 900 Storefront would show its full desktop menu, which
   collides with the wordmark. Keep the handheld toggle until there is room. */
@media (max-width:899px){
  .bbf .site-header .menu-toggle{display:block}
  .bbf .site-header .main-navigation .primary-navigation{display:none}
  .bbf .site-header .main-navigation.toggled .handheld-navigation{display:block}
  /* The hamburger is three absolutely-positioned bars at left:1em, so the
     label needs padding to clear them. */
  .bbf .site-header .menu-toggle{
    position:relative;
    font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:14px;
    text-transform:uppercase;letter-spacing:.06em;
    padding:.55em 1.2em .55em 2.9em;border:2px solid var(--edge);border-radius:2em;
    background:transparent;color:var(--ink);
  }
  .bbf .site-header .menu-toggle::before,
  .bbf .site-header .menu-toggle::after,
  .bbf .site-header .menu-toggle span::before{background-color:var(--ink)}
  .bbf .site-header .menu-toggle:hover{border-color:var(--claret);color:var(--claret)}
  .bbf .site-header .menu-toggle:hover::before,
  .bbf .site-header .menu-toggle:hover::after,
  .bbf .site-header .menu-toggle:hover span::before{background-color:var(--claret)}
}

/* Storefront hides the cart entirely below 768 (sfwoo.css sets
   .cart-contents{display:none} and only re-enables it at min-width:768).
   Keep it, but as an icon-only control — the totals stay for screen readers. */
@media (max-width:767px){
  .bbf .site-header .site-header-cart .cart-contents{
    display:flex;align-items:center;padding:0;text-indent:0;height:auto;width:auto;
  }
  .bbf .site-header .site-header-cart .cart-contents .amount,
  .bbf .site-header .site-header-cart .cart-contents .count{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  /* icons.css only declares the basket glyph inside @media(min-width:768px),
     so below that it has to be declared here or nothing renders. */
  .bbf .site-header .site-header-cart .cart-contents::after{
    content:"\f291";
    font-family:"Font Awesome 5 Free";font-weight:900;font-style:normal;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    display:block;float:none;font-size:21px;line-height:1;transform:none;
    color:var(--ink);
  }
}

/* Header padding on handheld read as bottom-heavy; set it explicitly and clear
   any child margins that were adding to the box. */
@media (max-width:899px){
  .bbf .site-header{padding-top:12px;padding-bottom:12px}
  .bbf .site-header > .col-full,
  .bbf .site-header > .storefront-primary-navigation,
  .bbf .site-header .site-branding,
  .bbf .site-header .main-navigation,
  .bbf .site-header .site-header-cart,
  .bbf .site-header .menu-toggle{margin-top:0;margin-bottom:0}
}

/* ---------- breadcrumb + blog roll ---------- */

/* Storefront leaves 3.7em under the breadcrumb (1.618em on handheld), which
   on every inner page reads as a band of dead space above the content. */
.bbf .storefront-breadcrumb{margin-bottom:1rem}

/* The sidebar is unhooked in bbf_header_cleanup(), but its widgets still
   exist — so is_active_sidebar() stays true, the body keeps Storefront's
   right-sidebar class, and .content-area keeps its 73.9% float with the
   sidebar's share of the row left empty on the right. Keep the measure,
   centre the column. Keyed on the layout class rather than a list of page
   types, so the roll, single posts and pages all sit the same way; the
   designed templates don't use .content-area at all, so they're untouched. */
.bbf.right-sidebar .content-area,
.bbf.left-sidebar .content-area{
  float:none;margin-left:auto;margin-right:auto;
}

/* The breadcrumb sits in its own .col-full, so it starts at the page gutter
   while the centred roll starts 13% further in. Inset the nav by the same
   share of .col-full the content column takes, so the two share a left edge.
   Only above 768px — below it Storefront's .content-area is full width and
   the breadcrumb already lines up. */
@media (min-width:768px){
  .bbf.right-sidebar .storefront-breadcrumb .woocommerce-breadcrumb,
  .bbf.left-sidebar .storefront-breadcrumb .woocommerce-breadcrumb{
    width:73.9130434783%;margin-left:auto;margin-right:auto;
  }
}

/* Storefront prints the post meta as bare inline spans directly above
   .entry-title, with no wrapper to space off — and this theme's
   `.bbf h1,.bbf h2,.bbf h3{margin:0}` strips the heading's own top margin,
   so the two sit on top of each other. Give the title back a little air. */
.bbf.blog .entry-header .entry-title,
.bbf.archive .entry-header .entry-title,
.bbf.single-post .entry-header .entry-title{margin-top:.65rem}

/* Pages have the mirror-image problem: Storefront zeroes the page header's
   bottom margin (.hentry.type-page .entry-header) because it expects the h1
   to carry its own, and `.bbf h1{margin:0}` takes that away — so the title
   sits directly on the first paragraph. */
.bbf .hentry.type-page .entry-header{margin-bottom:1.41575em}

/* `.bbf p{margin:0}` above is there for the designed front-page sections,
   which set their own rhythm — but it also flattens editor content, so post
   and page copy runs as one solid block. Restore Storefront's paragraph
   spacing wherever the content comes from the editor. */
.bbf .entry-content p{margin:0 0 1.41575em}
.bbf .entry-content p:last-child{margin-bottom:0}

/* ---------- contact page ---------- */

/* The address block was a pair of Mystile [twocol_one] shortcodes that
   Storefront never registers. Rebuilt as a plain grid in the page content,
   borrowing the event parcel's card treatment so it sits in the same
   material as the rest of the site. auto-fit stacks it below ~520px. */
.bbf .bbf-contact{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin:0 0 1.41575em;
}
.bbf .bbf-contact-card{
  border:1px solid var(--edge);background:var(--paper-2);
  border-radius:20px;padding:26px 28px;
}
.bbf .bbf-contact-card h3{font-size:26px;line-height:1.02;margin:0 0 12px}
/* overrides the .entry-content paragraph rhythm — these are stacked lines of
   one address, not separate paragraphs. */
.bbf .bbf-contact-card p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}

/* ---------- single product ---------- */

/* The image and the summary read as one pair, so the photo takes the card's
   corner radius even though it isn't carded itself. */
.bbf.single-product div.product .woocommerce-product-gallery__image img{border-radius:20px}

/* The buy column becomes the card — it is the one part of the page with
   something to do, and the border is what separates it from the description
   and the related tickets below. */
.bbf.single-product div.product .summary.entry-summary{
  border:1px solid var(--edge);background:var(--paper-2);
  border-radius:20px;padding:32px 34px;
}
.bbf.single-product div.product .summary .product_title{
  font-size:clamp(27px,3.2vw,38px);line-height:1.02;
}
/* set like the ticket price on the tickets page, so a ticket costs the same
   thing typographically wherever it is shown */
.bbf.single-product div.product p.price{
  font-family:"BenchNine",sans-serif;font-weight:700;font-size:42px;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--ink);margin:20px 0 0;
}
.bbf.single-product div.product .woocommerce-product-details__short-description{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--edge);
  font-size:16.5px;line-height:1.5;color:var(--desc);
}
/* the short description is outside .entry-content, so the global `.bbf p`
   reset still has it — give its paragraphs their own rhythm */
.bbf.single-product div.product .woocommerce-product-details__short-description p{margin:0 0 .8em}
.bbf.single-product div.product .woocommerce-product-details__short-description p:last-child{margin-bottom:0}
.bbf.single-product div.product form.cart{margin-bottom:0;padding:24px 0 0}

/* stands where the add-to-cart button would be, and takes its spacing */
.bbf.single-product div.product .bbf-soon{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0;padding:24px 0 0;font-size:16px;color:var(--ink-soft);
}

/* A single tab is not a tab — Storefront still lays the list out as a 30%
   column beside the panel, which leaves the description hanging off to one
   side. Drop the list and let the panel run full width. */
.bbf .woocommerce-tabs ul.tabs:has(li:only-child){display:none}
.bbf .woocommerce-tabs:has(ul.tabs li:only-child) .panel{
  width:100%;float:none;margin-right:0;
}

/* Related tickets sit below a rule so the page has a bottom, and their tiles
   pick up the same card as everything else. */
.bbf.single-product .related.products{
  clear:both;border-top:1px solid var(--edge);padding-top:44px;
}
.bbf.single-product .related.products > h2:first-child{
  font-size:clamp(26px,3vw,34px);line-height:1.02;margin-bottom:32px;
}
/* Storefront floats these at 29.4% with nth-child clearing, which only lines
   up at exactly three per row — a festival bill is however long it is. Grid
   instead, matching the front page's event parcels, so four tickets make two
   even rows rather than three and a stray. */
.bbf.single-product .related.products ul.products{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;margin:0;
}
/* WooCommerce clearfixes ul.products with ::before/::after{content:"";
   display:table}. Harmless around floats, but in a grid container a generated
   pseudo-element is a grid item like any other, so the two of them each took a
   cell — the first taking cell one and pushing every ticket along by one. */
.bbf.single-product .related.products ul.products::before,
.bbf.single-product .related.products ul.products::after{content:none}
.bbf.single-product .related.products ul.products li.product{
  width:auto;float:none;clear:none;margin:0;
  border:1px solid var(--edge);background:var(--paper-2);
  border-radius:20px;padding:16px 16px 22px;
}
.bbf.single-product .related.products ul.products li.product img{
  border-radius:12px;margin-bottom:14px;
}
.bbf.single-product .related.products ul.products li.product .woocommerce-loop-product__title{
  font-size:19px;line-height:1.15;
}