/* Village Food Wholesale — shared styles: fonts, base, buttons, header, footer.
   Page-specific styles live in their own files (home.css, about.css, ...).
   Values match the WordPress/Elementor site this replaces. Breakpoints:
   tablet <= 1024px, mobile <= 767px (same as Elementor's). */

@font-face {
  font-family: "Tanker";
  src: url("../fonts/Tanker-Regular.woff2") format("woff2"), url("../fonts/Tanker-Regular.ttf") format("truetype");
  /* "block": headings and the menu wait (briefly; the file is preloaded) for Tanker rather
     than flashing in a plain stand-in font and jumping when it arrives */
  font-display: block;
}
/* The old site served its own copy of Ballinger Condensed for the regular weight
   (bold still comes from the Adobe Fonts kit). Its line metrics differ slightly from
   Adobe's, so it's kept for identical text layout. */
@font-face {
  font-family: "ballinger-condensed";
  src: url("../fonts/ballinger.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --red: #9b1919;
  --red-hover: #b91c1c;
  --red-deep: #9d1819;
  --green: #364e38;
  --green-dark: #133115;
  --cream: #ebe5df;
  --ink: #514d7c;
  --tile: url("/media/textures/paper-background.jpg");
  --container: 1140px;
  --tanker: "Tanker", sans-serif;
  --ballinger: "ballinger-condensed", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 17px/1.6 Helvetica, sans-serif;
  color: var(--ink);
  background: #deddeb;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
/* Keyboard focus uses the browser's own focus ring, as the old site did. */

/* Text for screen readers only. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* "Skip to content" link: hidden until it gets keyboard focus (Kadence's style). */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  top: 5px; left: 5px; z-index: 100000;
  display: block; width: auto; height: auto; clip: auto; clip-path: none;
  padding: 12px 24px; border-radius: 3px;
  background: #eee; color: #333; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  font: 700 16px/normal Helvetica, sans-serif; text-decoration: none;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.tiled { background-image: var(--tile); background-size: contain; }

/* Elementor-style "grow" hover animation */
.grow { transition: transform .3s; }
.grow:hover { transform: scale(1.1); }

/* ---------- loading screen between pages ----------
   The WordPress site's Elementor Pro page transition, with its settings: red cover,
   logo at 7% width that fades out over .5s while the page loads, and a 1.5s hold
   before leaving for another page. site.js switches the states. The logo's "bounce"
   only exists on Products (where the old carousel loaded it), so it's defined there. */
.page-transition {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--red-deep);
}
.page-transition__logo {
  position: absolute; max-width: 7%; opacity: 0;
}
.page-transition.is-entering .page-transition__logo {
  animation: bounce 1500ms linear infinite, page-transition-fade-out .5s both;
}
/* Leaving: the logo would only fade in after the 1.5s hold, so in practice the
   cover is plain red until the next page starts loading. */
.page-transition.is-exiting .page-transition__logo {
  animation: page-transition-fade-in .5s 1500ms both;
}
.page-transition.is-entered { display: none; }
@keyframes page-transition-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-transition-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .page-transition { display: none; } }

/* Entrance animations (Elementor's): hidden until scrolled into view, then site.js
   adds .animated plus the animation name. */
[data-animate] { visibility: hidden; }
[data-animate].animated { visibility: visible; animation-duration: 1.25s; }
[data-animate].animated.animated-slow { animation-duration: 2s; }
.animated.fadeIn { animation-name: fadeIn; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .animated { animation: none !important; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  text-align: center;
  transition: background-color .3s, transform .3s;
}
.btn:hover { background: var(--red-hover); color: #fff; }

/* "Learn More" / "Schedule Demo" style used across pages */
.btn--main {
  font: 600 22px/1 var(--ballinger);
  padding: 15px 30px;
}
.btn--grow:hover { transform: scale(1.1); }

.btn--order {
  font: 500 24px/1 var(--tanker);
  text-transform: uppercase;
  padding: 10px 15px;
}

/* ---------- header ---------- */

.site-header { position: relative; z-index: 9999; }

.topbar { background: var(--green-dark); padding: 8px 0; }
.topbar__in { display: flex; align-items: center; min-height: 30px; }
.topbar__contact, .topbar__social { flex: 1 1 50%; padding: 0 15px; }
.topbar__contact { display: flex; flex-wrap: wrap; }
.topbar__contact li { margin-right: 12px; }
.topbar__contact a {
  display: block;
  padding-left: 5px;
  font: 400 17px/27px Roboto, sans-serif;
  color: #fff;
}
.topbar__social { text-align: right; } /* the gaps between icons are word spaces, as on the old site */
.topbar__social li { display: inline-block; vertical-align: top; margin-right: 6px; }
.topbar__social a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: #fff;
  transition: color .3s;
}
.topbar__social .icon { width: auto; height: 17px; fill: currentColor; }
.topbar__social li:nth-child(1) a:hover { color: #4852ba; }
.topbar__social li:nth-child(2) a:hover { color: #1da1f2; }
.topbar__social li:nth-child(3) a:hover { color: #0077b5; }
.topbar__social li:nth-child(4) a:hover { color: #e4405f; }

.mainbar {
  position: relative;
  z-index: 2;
  padding: 10px 0;
  background: #ece4de var(--tile) 0 0 / contain;   /* the paper's colour until the texture loads */
}
.mainbar__in { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 80px; }
.brand { position: absolute; left: 0; top: 0; width: 135px; }
.brand img { width: 135px; }

.menu-toggle-wrap, .site-menu__overlay, .site-menu__head, .site-menu__social { display: none; }
.site-menu { display: flex; align-items: center; }
/* The off-canvas wrappers only matter on tablet and phone. */
.site-menu__panel, .site-menu__body, .site-menu__card { display: contents; }

.nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.nav li { margin-right: 10px; }
.nav a {
  display: flex; align-items: center;
  height: 62px;
  padding: 10px 15px;
  border-radius: 5px;
  font: 500 26px/41.6px var(--tanker);
  text-transform: uppercase;
  color: var(--red);
  transition: color .3s, background-color .3s;
}
.nav a:hover { color: #fff; background: var(--red); }
.nav a.is-active { color: #fff; background: var(--red); }
/* Desktop: one size for the hover and current-page highlight on every page, the height of
   the Order Now button (2026-10-11). The old site varied it per page: 62px tall boxes on most
   pages, 40px on Home with a narrower current link, and a tighter hover on Contact. */
@media (min-width: 1025px) {
  .nav a { height: 44px; padding: 0 15px; border-radius: 4px; }
}

/* Tablet and mobile: centered logo, menu button, slide-down menu */
@media (max-width: 1024px) {
  .topbar { display: none; }
  .mainbar { padding: 20px 0 0; background-size: contain; }
  .mainbar__in { flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; }
  /* Elementor's default: logo and menu button each in a 10px-padded box, the button a
     small square. Some pages stretch the button full width on some devices (devices/*.css). */
  .brand-wrap, .menu-toggle-wrap { display: flex; justify-content: center; padding: 10px; }
  .brand { position: static; width: auto; }
  .brand img { width: 155px; }

  .menu-toggle {
    display: flex; justify-content: center; align-items: center;
    width: 55px; height: 54px;
    padding: 4px 7px 5px;
    border: 0;
    border-radius: 3%;
    background: var(--red-deep);
    color: #fff;
  }
  .menu-toggle .icon { width: 41px; height: 41px; fill: currentColor; }

  /* Off-canvas menu: ElementsKit's header off-canvas with the old site's settings (0.5s).
     Opening: the black overlay slides/fades in, the white panel follows from the right
     after .4s, and the menu card rises 150px into place from 1.2s. Closing runs it back. */
  /* No box of its own, so the closed menu takes no space in the header. */
  .site-menu { display: contents; }
  .site-menu__overlay {
    display: block;
    position: fixed; top: 0; left: 100%; z-index: 1002;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .9);
    opacity: 0; visibility: hidden;
    cursor: url("../img/cross-out.svg"), pointer;
    transition: all .4s ease-in .5s;
  }
  .site-menu__panel {
    display: block;
    position: fixed; top: 0; bottom: 0; right: -100%; z-index: 999999;
    width: 100%; max-width: 360px;
    overflow: hidden auto;
    /* The old custom CSS asked for the paper texture here but used a broken path
       (/blog1/...), so it showed white; v3 uses the real file (see FIXES.md). */
    background: #fff var(--tile);
    opacity: 0; visibility: hidden;
    transition: all .5s cubic-bezier(.9, .03, 0, .96) .5s;
  }
  .site-menu__body {
    display: block;
    position: relative; top: 150px;
    padding: 60px 20px 20px;
    opacity: 0; visibility: hidden;
    backface-visibility: hidden;
    transition: all .3s ease-in .3s;
  }
  .site-menu.is-open .site-menu__overlay { left: 0; opacity: 1; visibility: visible; transition: all .5s ease-out 0s; }
  .site-menu.is-open .site-menu__panel { right: 0; opacity: 1; visibility: visible; transition: all .5s cubic-bezier(.9, .03, 0, .96) .4s; }
  .site-menu.is-open .site-menu__body { top: 0; opacity: 1; visibility: visible; transition: all 1s ease-out 1.2s; }
  .site-menu__head { display: contents; }
  .site-menu__close {
    position: absolute; top: 15px; right: 15px; z-index: 1;
    display: block;
    padding: 4px 7px 5px;
    border: 1px solid #ccc; border-radius: 50%;
    background: #fff;
    font-size: 15px; line-height: 1; text-align: center;
    transition: all .3s;
  }
  .site-menu__close .icon { display: inline; width: 20px; height: auto; vertical-align: middle; fill: #333; }
  /* Home used its own copy of the header: once open, a full-width panel (it widens from
     360px as it slides in) and a red close button. */
  body.page-home .site-menu.is-open .site-menu__panel { max-width: 100%; }
  body.page-home .site-menu.is-open .site-menu__close { background: #9b1919; }
  body.page-home .site-menu.is-open .site-menu__close .icon { fill: #fff; }
  .site-menu__card {
    display: flex;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 10px;
    background: var(--tile) 0 0 / contain;
  }

  .nav ul { flex-direction: column; padding-left: 0; }
  .nav li { margin: 0; }
  .nav a, .nav a.is-active {
    justify-content: center;
    height: auto;
    padding: 13px 20px;
    border-radius: 0;
    font-size: 28px; line-height: 20px;
    text-transform: none;
    color: var(--red-deep);
  }
  .nav a.is-active { color: #fff; background: var(--red); }

  .site-menu .btn--order {
    align-self: center;
    font-size: 22px;
    padding: 10px 20px;
    background: var(--red-deep);
  }
  .site-menu__social { display: flex; justify-content: center; gap: 10px; }
  .site-menu__social a, .site-menu__social span {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px;
  }
  .site-menu__social .icon { height: 25px; width: auto; fill: var(--red); }
}

/* Recipe pages had their own copy of the mobile header: 10px all round, a full-width
   square-cornered menu bar, and a bigger logo with no padding round the bar on phones. */
@media (max-width: 1024px) {
  body.page-recipe .mainbar { padding: 0 10px; }
  body.page-recipe .mainbar__in { padding: 10px 0; }
  body.page-recipe .menu-toggle { width: 100%; border-radius: 0; }
}
@media (max-width: 767px) {
  body.page-recipe .brand img { width: 200px; }
  body.page-recipe .menu-toggle-wrap { padding: 0; }
}

/* ---------- inner page banner (About, Products, Recipes, Contact, recipes) ---------- */

.page-banner {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  min-height: 500px;
  /* web-sized photo over a blurred preview that shows until it arrives (banner_style()) */
  background: var(--banner-image) var(--banner-position) / cover no-repeat,
    var(--banner-lqip, none) var(--banner-position) / cover no-repeat, #7a6a5a;
  text-align: center;
}
@media (max-width: 767px) { .page-banner { background-image: var(--banner-image-sm, var(--banner-image)), var(--banner-lqip, none); } }
/* The old flat tint (--banner-dim, 20%; lighter on Contact and Recipes), plus a soft shade
   behind the middle where the words sit so they stay readable on busy photos (2026-10-11). */
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 54%, rgba(24, 12, 6, .5), rgba(24, 12, 6, 0) 78%),
    rgba(0, 0, 0, var(--banner-dim, .2));
}
.page-banner > * { position: relative; }
.page-banner__title {
  width: 100%; max-width: var(--container);
  font: 400 72px/1 var(--tanker);
  text-transform: capitalize;
  color: #fff;
}
.page-banner__subtitle {
  width: 79%; max-width: calc(var(--container) * .79);
  font: 400 22px/35px var(--ballinger);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 2px 14px rgba(0, 0, 0, .55);
}
/* Torn paper edge that overlaps the bottom of the banner */
.page-banner--torn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 42px;
  /* Sized by height so the paper always reaches the bottom; "contain" shrank it on
     screens under ~500px and left a strip of photo showing below it. */
  background: url("/media/textures/torn-paper-edge.png") left bottom / auto 100% repeat-x;
}

/* Phone sizes for the banner differ per page and device; they're in devices/*.css. */

/* ---------- footer ---------- */
/* Elementor breakpoints used below: laptop <=1366, tablet-extra <=1200,
   tablet <=1024, mobile-extra <=880, mobile <=767. */

.footer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 26px;
  padding: 2%;
  border-bottom: 5px solid var(--green);
  background: rgba(5, 5, 8, .45);
}
.bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-video iframe {
  position: absolute; top: 50%; left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; /* sized to cover by site.js */
}
.footer-cta__in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.footer-cta__title {
  font: 400 38px/1 var(--tanker);
  text-transform: uppercase;
  text-align: center;
  color: #fbfbfb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
}
.footer-cta__text {
  font: 500 22px/1.2 var(--ballinger);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
  margin-bottom: 1em;
}
.footer-cta .btn { align-self: flex-start; }

.footer-main { padding: 0 8%; background: #fff var(--tile); }
.footer-main__in { display: flex; max-width: var(--container); margin: 0 auto; padding: 4% 0; }
.footer-col { display: flex; flex-direction: column; }
.footer-col--links { flex: 0 0 17%; }
.footer-col--story { flex: 0 0 45%; padding-right: 3%; }
.footer-col--contact { flex: 0 0 20%; }
.footer-col--social { flex: 1 1 auto; gap: 20px; }
.footer-col__title {
  font: 400 26px/2 var(--tanker);
  text-transform: capitalize;
  color: var(--red);
}
.footer-links li + li { margin-top: 5px; }
.footer-links li:not(:last-child) { padding-bottom: 5px; }
.footer-links a {
  display: block;
  font: 400 18px/1.5 var(--ballinger);
  text-transform: uppercase;
  color: #000;
  transition: color .3s;
}
.footer-links a:hover { color: var(--red-deep); }
.footer-story { max-width: 479px; font: 400 18px/1.6 var(--ballinger); color: #000; }
.footer-address, .footer-contact { font: 400 18px/1.5 var(--ballinger); color: #000; }
.footer-contact a { display: block; }
.footer-social { display: flex; gap: 20px; padding-top: 10px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: transform .3s; }
.footer-social a:hover { transform: scale(1.1); opacity: .9; }
.footer-social .icon { width: auto; height: 28px; max-width: 28px; fill: var(--red); transition: fill .3s; }
.footer-social a:hover .icon { fill: var(--green-dark); }

.footer-copyright {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 45px;
  padding: 0 8%;
  background: var(--red);
  text-align: center;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 300;
}
.footer-copyright__line { font-size: 16px; line-height: 1.5; }
.footer-copyright__credit { padding-top: 6px; font-size: 8px; line-height: 1.5; }

@media (min-width: 1201px) {
  .footer-cta__title { margin-right: 6px; } /* the old title box was 6px narrower */
}
@media (max-width: 1366px) {
  .footer-cta__text { padding: 25px 50px; text-align: center; }
  .footer-cta .btn { align-self: center; }
}
@media (max-width: 1200px) {
  .footer-cta__title { font-size: 48px; }
  .footer-cta__text { font-size: 20px; padding: 20px 50px; }
}
@media (max-width: 1024px) {
  .footer-cta { flex-direction: column; justify-content: center; gap: 62px; min-height: 50vh; padding: 15% 5%; }
  .footer-cta__title { font-size: 44px; }

  .footer-main { padding: 0 5%; }
  .footer-main__in { flex-direction: row-reverse; flex-wrap: wrap; padding: 8% 0; }
  .footer-col--links, .footer-col--social { flex: 0 0 25%; }
  .footer-col--contact { flex: 0 0 50%; padding-right: 15%; }
  .footer-col--story { flex: 0 0 100%; order: 1; gap: 30px; margin-top: 8%; padding-right: 35%; }
  .footer-story { max-width: none; }
  .footer-links a, .footer-story, .footer-address, .footer-contact { font-size: 14px; }
  .footer-social .icon { height: 18px; }
  .footer-copyright { padding: 0 5%; }
  .footer-copyright__line, .footer-copyright__credit { font-size: 14px; }
}
@media (max-width: 880px) {
  .footer-cta { min-height: 60vh; }
  .footer-cta__title { font-size: 43px; }
}
@media (max-width: 767px) {
  .footer-cta { flex-direction: column-reverse; gap: 24px; min-height: 50vh; }
  .footer-cta__title { font-size: 35px; }
  .footer-cta__text { font-size: 18px; padding: 10px; }
  .footer-cta .btn--main { font-size: 16px; }

  .footer-main__in { flex-direction: column; padding: 20% 0; }
  .footer-col, .footer-col--story { flex: none; margin: 0; padding: 0; gap: 0; }
  .footer-col--contact { order: -1; padding-bottom: 35px; }
  .footer-col--links { padding-bottom: 35px; }
  .footer-col--story { order: 0; }
  .footer-col--social { order: 2; padding-top: 50px; }
  .footer-col__title { font-size: 35px; }
  .footer-links li + li { margin-top: 4px; }
  .footer-links li:not(:last-child) { padding-bottom: 4px; }
  .footer-address, .footer-contact { font-size: 18px; }
  .footer-contact li + li { margin-top: 4px; }
  .footer-contact li:not(:last-child) { padding-bottom: 4px; }
  .footer-social .icon { height: 26px; }
}

/* ---------- footer call-to-action styles (lab, 2026-10-10) ----------
   body[data-cta] picks one (FOOTER_CTAS in bootstrap.php; try them on staging with ?cta=).
   'classic' is the old site's band, styled above; the rest restyle the same markup.
   "body[data-cta]" outranks the old theme's per-device footer rules (devices/site.css). */
body:not([data-cta="classic"]) .footer-cta { border-bottom: 0; }
body:not([data-cta="classic"]) .footer-cta__title { text-shadow: none; -webkit-text-stroke: 0; }
body:not([data-cta="classic"]) .footer-cta__in { z-index: 2; }

/* torn: the video tinted maroon, torn like paper along the top and bottom. The band
   overlaps its neighbours by 30px so they show through the tears. */
body[data-cta="torn"] .footer-cta {
  z-index: 2;
  margin: -30px 0;
  padding: 120px 5%;
  min-height: 0;
  background: var(--red-deep);
  -webkit-mask: url("/media/textures/torn-paper-edge.png") left top / auto 44px repeat-x,
    linear-gradient(#000, #000) left 0 top 43px / 100% calc(100% - 86px) no-repeat,
    url("../img/torn-edge-down.png") left bottom / auto 44px repeat-x;
  mask: url("/media/textures/torn-paper-edge.png") left top / auto 44px repeat-x,
    linear-gradient(#000, #000) left 0 top 43px / 100% calc(100% - 86px) no-repeat,
    url("../img/torn-edge-down.png") left bottom / auto 44px repeat-x;
}
body[data-cta="torn"] .footer-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(70, 6, 6, .2), rgba(70, 6, 6, .55)), rgba(155, 25, 25, .62);
}
body[data-cta="torn"] .footer-cta__in { align-items: center; gap: 18px; }
body[data-cta="torn"] .footer-cta__title { max-width: 920px; font-size: 48px; line-height: 1.02; color: #fff; }
body[data-cta="torn"] .footer-cta__text { max-width: 700px; margin: 0 0 10px; padding: 0; text-align: center; font-size: 21px; color: #f3ebe1; text-shadow: 0 1px 3px rgba(40, 0, 0, .5); }
body[data-cta="torn"] .footer-cta .btn,
body[data-cta^="framed"] .footer-cta .btn { align-self: center; background: #ede6e0; color: var(--red-deep); }
body[data-cta="torn"] .footer-cta .btn:hover,
body[data-cta^="framed"] .footer-cta .btn:hover { background: #fff; color: var(--red-deep); }

/* framed: the video as a rounded card sitting on the paper, text over a maroon fade */
body[data-cta^="framed"] .footer-cta {
  --edge: max(16px, calc((100% - 1240px) / 2));
  display: block;
  min-height: 0;
  padding: 72px var(--edge);
  background: #fff var(--tile);
}
body[data-cta^="framed"] .bg-video,
body[data-cta^="framed"] .footer-cta::before {
  inset: 72px var(--edge);
  border-radius: 22px;
}
body[data-cta^="framed"] .bg-video { box-shadow: 0 22px 40px -22px rgba(60, 8, 8, .6); }
body[data-cta^="framed"] .footer-cta::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--tint), .95) 0%, rgba(var(--tint), .84) 40%, rgba(var(--tint), .2) 75%, rgba(var(--tint), 0));
}
body[data-cta^="framed"] .footer-cta__in {
  max-width: none; min-height: 440px; margin: 0;
  padding: 64px 0 64px 64px;
  align-items: flex-start; gap: 16px;
}
body[data-cta^="framed"] .footer-cta__title { max-width: 560px; font-size: 44px; line-height: 1.02; text-align: left; color: #fff; }
body[data-cta^="framed"] .footer-cta__text { max-width: 500px; margin: 0 0 8px; padding: 0; text-align: left; font-size: 20px; color: #f3ebe1; text-shadow: none; }
body[data-cta^="framed"] .footer-cta .btn { align-self: flex-start; }

/* split: a paper band with the words, the video beside it as a torn-edged photo */
body[data-cta="split"] .footer-cta {
  z-index: 2;
  overflow: visible;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0;
  min-height: 0; padding: 0;
  background: #ede6e0;
}
/* torn paper edges reaching over the section above and the footer below */
body[data-cta="split"] .footer-cta::before,
body[data-cta="split"] .footer-cta::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 3; height: 40px; pointer-events: none;
}
body[data-cta="split"] .footer-cta::before { bottom: 100%; margin-bottom: -1px; background: url("/media/textures/torn-paper-edge.png") left bottom / auto 100% repeat-x; }
body[data-cta="split"] .footer-cta::after { top: 100%; margin-top: -1px; background: url("../img/torn-edge-down.png") left top / auto 100% repeat-x; }
body[data-cta="split"] .bg-video {
  position: relative; inset: auto;
  grid-column: 2; grid-row: 1;
  min-height: 540px;
  -webkit-mask: url("../img/torn-edge-v.png") left top / 40px auto repeat-y, linear-gradient(#000, #000) 39px 0 / 100% 100% no-repeat;
  mask: url("../img/torn-edge-v.png") left top / 40px auto repeat-y, linear-gradient(#000, #000) 39px 0 / 100% 100% no-repeat;
}
body[data-cta="split"] .footer-cta__in {
  grid-column: 1; grid-row: 1;
  max-width: none; margin: 0;
  padding: 90px 6% 90px max(20px, calc(50vw - 570px));
  align-items: flex-start; gap: 16px;
}
body[data-cta="split"] .footer-cta__title { font-size: 46px; line-height: 1.02; text-align: left; color: var(--red); }
body[data-cta="split"] .footer-cta__text { margin: 0 0 8px; padding: 0; text-align: left; font-size: 20px; color: #1f1f1f; text-shadow: none; }
body[data-cta="split"] .footer-cta .btn { align-self: flex-start; }

@media (max-width: 1024px) {
  body[data-cta="torn"] .footer-cta__title { font-size: 40px; }
  body[data-cta^="framed"] .footer-cta__in { padding: 56px 40px; }
  body[data-cta="split"] .footer-cta { grid-template-columns: minmax(0, 1fr); }
  body[data-cta="split"] .bg-video {
    grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 16 / 10;
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat, url("../img/torn-edge-down.png") left bottom / auto 44px repeat-x;
    mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat, url("../img/torn-edge-down.png") left bottom / auto 44px repeat-x;
  }
  body[data-cta="split"] .footer-cta__in { grid-row: 2; padding: 36px 5% 70px; }
}
@media (max-width: 767px) {
  body[data-cta="torn"] .footer-cta { padding: 96px 20px; }
  body[data-cta="torn"] .footer-cta__title { font-size: 34px; }
  body[data-cta="torn"] .footer-cta__text { font-size: 18px; }
  body[data-cta^="framed"] .footer-cta { padding: 48px 12px; --edge: 12px; }
  body[data-cta^="framed"] .bg-video, body[data-cta^="framed"] .footer-cta::before { inset: 48px 12px; border-radius: 18px; }
  body[data-cta^="framed"] .footer-cta::before { background: linear-gradient(0deg, rgba(var(--tint), .96) 0%, rgba(var(--tint), .85) 55%, rgba(var(--tint), .15) 100%); }
  body[data-cta^="framed"] .footer-cta__in { min-height: 540px; padding: 40px 24px; justify-content: flex-end; }
  body[data-cta^="framed"] .footer-cta__title { font-size: 34px; }
  body[data-cta^="framed"] .footer-cta__text { font-size: 18px; }
  body[data-cta="split"] .footer-cta__in { padding: 30px 20px 64px; }
  body[data-cta="split"] .footer-cta__title { font-size: 34px; }
  body[data-cta="split"] .footer-cta__text { font-size: 18px; }
  body[data-cta] .footer-cta .btn--main { font-size: 18px; }
}

/* framed-wide: the framed card's look across the full width, flush with the sections
   around it; the words line up with the page content */
body[data-cta="framed-wide"] .footer-cta { padding: 0; }
body[data-cta="framed-wide"] .bg-video,
body[data-cta="framed-wide"] .footer-cta::before { inset: 0; border-radius: 0; box-shadow: none; }
body[data-cta="framed-wide"] .footer-cta__in { min-height: 520px; padding: 80px 20px 80px max(20px, calc(50vw - 570px)); }
@media (max-width: 1024px) {
  body[data-cta="framed-wide"] .footer-cta__in { padding: 64px 5%; }
}
@media (max-width: 767px) {
  body[data-cta="framed-wide"] .footer-cta { padding: 0; }
  body[data-cta="framed-wide"] .bg-video,
  body[data-cta="framed-wide"] .footer-cta::before { inset: 0; border-radius: 0; }
  body[data-cta="framed-wide"] .footer-cta__in { min-height: 560px; padding: 48px 20px; }
}

/* The new band content (every style except 'classic', which keeps the old copy): callouts
   with hand-drawn ticks, Schedule a Tasting + Call, opening hours, and the About page's
   badges as stickers. Colours follow each style's text colour. */
.footer-cta__points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 10px; }
.footer-cta__points li { display: flex; align-items: center; gap: 9px; font: 500 19px/1.3 var(--ballinger); }
.footer-cta__tick { flex: none; width: 22px; height: 22px; fill: none; stroke: #e2a24f; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body:not([data-cta="classic"]) .footer-cta .footer-cta__go { align-self: auto; padding: 16px 28px; font-size: 22px; }
.footer-cta__call {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 54px; padding: 0 24px; border-radius: 4px;
  border: 1.5px solid currentColor;
  font: 600 22px/1 var(--ballinger); color: inherit; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.footer-cta__call .icon { width: 17px; height: 17px; fill: currentColor; }
.footer-cta__hours { margin: 2px 0 0; font: 400 16px/1.4 var(--ballinger); opacity: .8; }
.footer-cta__stickers { display: none; }

body[data-cta="torn"] .footer-cta__in,
body[data-cta^="framed"] .footer-cta__in { color: #f3ebe1; }
body[data-cta="torn"] .footer-cta__points,
body[data-cta="torn"] .footer-cta__actions { justify-content: center; }
body[data-cta="torn"] .footer-cta__call:hover,
body[data-cta^="framed"] .footer-cta__call:hover { background: #f3ebe1; border-color: #f3ebe1; color: var(--red-deep); }
body[data-cta="split"] .footer-cta__in { color: #1f1f1f; }
body[data-cta="split"] .footer-cta__tick { stroke: var(--red); }
body[data-cta="split"] .footer-cta__call { color: var(--green-dark); }
body[data-cta="split"] .footer-cta__call:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* framed-wide (the main style): stickers on the video at the right, slightly askew */
body[data-cta^="framed"] .footer-cta__stickers {
  display: flex; align-items: center;
  position: absolute; z-index: 2; top: 50%; right: max(28px, calc(50vw - 570px));
  transform: translateY(-50%);
}
body[data-cta^="framed"] .footer-cta__stickers li {
  display: grid; place-items: center;
  width: 136px; height: 136px; margin-left: -14px; border-radius: 50%;
  background: #f3ebe1 url("/media/textures/paper-background.jpg") 0 0 / 300px;
  box-shadow: 0 10px 22px -8px rgba(30, 4, 4, .55), inset 0 0 0 4px #f3ebe1, inset 0 0 0 6px rgba(155, 25, 25, .35);
  transform: rotate(-8deg);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
body[data-cta^="framed"] .footer-cta__stickers li:nth-child(2) { transform: rotate(5deg) translateY(-18px); }
body[data-cta^="framed"] .footer-cta__stickers li:nth-child(3) { transform: rotate(-3deg) translateY(10px); }
body[data-cta^="framed"] .footer-cta__stickers li:hover { transform: rotate(0) scale(1.06); }
body[data-cta^="framed"] .footer-cta__stickers img { width: 112px; height: auto; }
body[data-cta="framed-wide"] .footer-cta__title { max-width: 600px; font-size: 50px; }
body[data-cta="framed-wide"] .footer-cta__text { max-width: 560px; }
body[data-cta="framed-wide"] .footer-cta__points { max-width: 600px; }
body[data-cta="framed"] .footer-cta__points { max-width: 480px; }
@media (min-width: 1025px) { body[data-cta="framed"] .footer-cta__stickers { right: calc(var(--edge) + 40px); } }
body[data-cta="framed-wide"] .footer-cta__in { gap: 14px; }
body[data-cta="framed-wide"] .footer-cta::before {
  background: linear-gradient(90deg, rgba(var(--tint), .95) 0%, rgba(var(--tint), .84) 42%, rgba(var(--tint), .3) 70%, rgba(var(--tint), .05));
}
@media (max-width: 1200px) {
  body[data-cta^="framed"] .footer-cta__stickers li { width: 108px; height: 108px; }
  body[data-cta^="framed"] .footer-cta__stickers img { width: 88px; }
}
@media (max-width: 1024px) {
  /* stickers move above the heading, smaller */
  body[data-cta^="framed"] .footer-cta__stickers { position: relative; top: auto; right: auto; transform: none; order: -1; padding-left: 14px; }
  body[data-cta="framed-wide"] .footer-cta { display: flex; flex-direction: column; gap: 0; }
  body[data-cta="framed-wide"] .footer-cta__stickers { margin: 48px 5% 0; }
  body[data-cta^="framed"] .footer-cta__stickers li { width: 84px; height: 84px; margin-left: -10px; }
  body[data-cta^="framed"] .footer-cta__stickers li:nth-child(2) { transform: rotate(5deg) translateY(-8px); }
  body[data-cta^="framed"] .footer-cta__stickers img { width: 68px; }
  body[data-cta="framed-wide"] .footer-cta__title { font-size: 42px; }
  body[data-cta="framed-wide"] .footer-cta__in { min-height: 0; padding: 40px 5% 64px; }
  body[data-cta="framed-wide"] .footer-cta::before {
    background: linear-gradient(0deg, rgba(var(--tint), .96) 0%, rgba(var(--tint), .86) 60%, rgba(var(--tint), .4) 100%);
  }
}
@media (max-width: 767px) {
  body[data-cta="framed-wide"] .footer-cta__stickers { margin: 40px 20px 0; }
  body[data-cta="framed-wide"] .footer-cta__in { min-height: 0; padding: 40px 20px 52px; }
  body[data-cta="framed-wide"] .footer-cta__title { font-size: 34px; }
  .footer-cta__points { flex-direction: column; gap: 8px; }
  .footer-cta__points li { font-size: 18px; }
  .footer-cta__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  body:not([data-cta="classic"]) .footer-cta .footer-cta__go,
  .footer-cta__call { justify-content: center; width: 100%; text-align: center; }
  /* phones: the framed band reads centred, stickers included */
  body[data-cta^="framed"] .footer-cta__stickers { justify-content: center; padding-left: 10px; }
  body[data-cta^="framed"] .footer-cta__in { align-items: center; }
  body[data-cta^="framed"] .footer-cta__title,
  body[data-cta^="framed"] .footer-cta__text,
  body[data-cta^="framed"] .footer-cta__hours { margin-inline: auto; text-align: center; }
  body[data-cta^="framed"] .footer-cta__points { align-items: flex-start; } /* the list sits centred, lines aligned left */
}

/* Band colour (band_tint in config.php, ?tint= on staging): the fade behind the text in
   the framed styles. Espresso and green leave the food photo its own colours and keep
   maroon for the Schedule a Tasting button; maroon tints the whole band. */
body { --tint: 30, 20, 14; }
body[data-tint="green"] { --tint: 19, 49, 21; }
body[data-tint="maroon"] { --tint: 128, 18, 18; }
body:not([data-tint="maroon"])[data-cta^="framed"] .footer-cta .footer-cta__go { background: var(--red); color: #fff; }
body:not([data-tint="maroon"])[data-cta^="framed"] .footer-cta .footer-cta__go:hover { background: var(--red-hover); color: #fff; }

/* ---------- footer, refined (2026-10-10) ----------
   body[data-foot="refined"] (FOOTERS in bootstrap.php). The old footer as it was (same
   columns and order, red Tanker headings, uppercase links, paper, red bar) with: a column
   grid lined up with the page, one text size and even spacing, links that show they're
   links, and bigger tap targets on phones. Markup unchanged (footer.php). */
body[data-foot="refined"] .footer-main { padding: 0 20px; }
body[data-foot="refined"] .footer-main__in {
  /* the old proportions: links 17%, story 45%, contact 20%, icons the rest */
  display: grid; grid-template-columns: 17% 45% 20% minmax(0, 1fr); gap: 0;
  padding: 64px 0 60px;
}
body[data-foot="refined"] .footer-col { flex: none; order: 0; margin: 0; padding: 0; gap: 0; }
body[data-foot="refined"] .footer-col__title { margin-bottom: 12px; font-size: 28px; line-height: 1.2; }
body[data-foot="refined"] .footer-links li { margin: 0; padding: 0; }
body[data-foot="refined"] .footer-links a {
  display: inline-block; padding: 4px 0;
  font-size: 18px; line-height: 1.5; letter-spacing: .5px;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat;
  transition: color .2s, background-size .25s;
}
body[data-foot="refined"] .footer-links a:hover { color: var(--red); background-size: 100% 2px; }
body[data-foot="refined"] .footer-col--story { padding-right: 3%; }
body[data-foot="refined"] .footer-story { max-width: 479px; font-size: 18px; line-height: 1.6; }
body[data-foot="refined"] .footer-address,
body[data-foot="refined"] .footer-contact { font-size: 18px; line-height: 1.6; }
body[data-foot="refined"] .footer-contact li { margin: 0; padding: 0; }
body[data-foot="refined"] .footer-contact a { display: inline; transition: color .2s; }
body[data-foot="refined"] .footer-contact a:hover { color: var(--red); }
body[data-foot="refined"] .footer-col--social { padding-top: 2px; }
body[data-foot="refined"] .footer-social { gap: 6px; padding: 0; }
body[data-foot="refined"] .footer-social a { width: 42px; height: 42px; border-radius: 50%; transition: background-color .2s, transform .2s; }
body[data-foot="refined"] .footer-social a:hover { background: rgba(155, 25, 25, .08); transform: translateY(-2px); opacity: 1; }
body[data-foot="refined"] .footer-social .icon { height: 24px; max-width: 24px; }

/* tablet: contact and company side by side, the story under them, then the icons */
@media (max-width: 1024px) {
  body[data-foot="refined"] .footer-main { padding: 0 5%; }
  body[data-foot="refined"] .footer-main__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 40px; padding: 64px 0 56px; }
  body[data-foot="refined"] .footer-col--contact { order: 1; }
  body[data-foot="refined"] .footer-col--links { order: 2; }
  body[data-foot="refined"] .footer-col--story { order: 3; grid-column: 1 / -1; }
  body[data-foot="refined"] .footer-col--social { order: 4; grid-column: 1 / -1; padding: 0; }
  body[data-foot="refined"] .footer-story { max-width: 640px; }
  body[data-foot="refined"] .footer-social { margin-left: -9px; }
}
/* phone: one column in the old order (contact, company, story, icons), one text size */
@media (max-width: 767px) {
  body[data-foot="refined"] .footer-main { padding: 0 20px; }
  body[data-foot="refined"] .footer-main__in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 60px 0 44px; }
  body[data-foot="refined"] .footer-col--story,
  body[data-foot="refined"] .footer-col--social { grid-column: auto; }
  body[data-foot="refined"] .footer-col__title { margin-bottom: 8px; font-size: 32px; }
  body[data-foot="refined"] .footer-links a { padding: 8px 0; font-size: 17px; }
  body[data-foot="refined"] .footer-story,
  body[data-foot="refined"] .footer-address,
  body[data-foot="refined"] .footer-contact { font-size: 17px; }
  body[data-foot="refined"] .footer-address,
  body[data-foot="refined"] .footer-contact { line-height: 1.85; }
}

/* ---------- phones: keep text off the screen edges ----------
   The old site ran several blocks of text to the very edge on phones; v3 keeps a 20px
   gutter (requested 2026-10-10, see FIXES.md). "body" raises these above the page files. */
@media (max-width: 767px) {
  body .intro,
  body .home-hero__titles,
  body .home-trade__title,
  body .home-trade__text,
  body .about p,
  body .recipes-list__intro,
  body .page-banner__title,
  body .page-banner__subtitle,
  body.page-recipe .page-banner__title,
  body .recipe-body__in,
  body .contact__in,
  body .home-hero__text,
  body .health__text,
  body .footer-cta__in,
  /* beats the 2px the old theme's phone rules give these (devices/home.css) */
  html body.page-home .home-cats .intro,
  html body.page-home .home-recipes .intro { padding-inline: 20px; }
  body .contact-form { margin-inline: 0; }
}

/* ---------- app feel (2026-10-10) ----------
   Page changes animate like an app (the browser's View Transitions: the header stays put,
   the page crossfades and recipe photos morph into their page), the desktop header turns
   into a compact sticky bar, sections ease in as they're scrolled to, and buttons and cards
   press in when tapped. site.js adds the classes; browsers without support just load pages. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.mbar { view-transition-name: site-mbar; }
::view-transition-old(root) { animation: vt-out .16s ease-in both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .7, .2, 1) .04s both; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* The header and phone bar switch instantly, like an app's toolbar: crossfading them
   showed both pages' menus at once (two highlighted links, half-faded text) and stretched
   the compact header into the full one. Only the page content animates. */
::view-transition-group(site-header), ::view-transition-group(site-mbar) { animation: none; }
::view-transition-old(site-header), ::view-transition-old(site-mbar) { display: none; }
::view-transition-new(site-header), ::view-transition-new(site-mbar) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
/* arriving through a morph: skip the photo's own entrance animation */
.vt-arrived .rp-photo, .vt-arrived .rp-hero__text > * { animation: none !important; }

/* "Torn paper" page change (page_transition 'tear'): a maroon sheet with the logo, torn
   top and bottom, sweeps up over the page; the new page is underneath when it has passed.
   A modern take on the old red loading screen: same brand moment, but it lasts .8s and
   never waits for loading (the next page is usually prerendered already). */
.vt-sheet {
  display: none; place-items: center;
  position: fixed; left: 0; top: 100vh; z-index: 10001;
  width: 100vw; height: 150vh;
  pointer-events: none;
  background: url("../img/lineart-light.png") 0 0 / 520px, var(--red-deep);
  -webkit-mask: url("/media/textures/torn-paper-edge.png") left top / auto 60px repeat-x,
    linear-gradient(#000, #000) left 0 top 59px / 100% calc(100% - 118px) no-repeat,
    url("../img/torn-edge-down.png") left bottom / auto 60px repeat-x;
  mask: url("/media/textures/torn-paper-edge.png") left top / auto 60px repeat-x,
    linear-gradient(#000, #000) left 0 top 59px / 100% calc(100% - 118px) no-repeat,
    url("../img/torn-edge-down.png") left bottom / auto 60px repeat-x;
}
html[data-vt="tear"] .vt-sheet { display: grid; view-transition-name: vt-sheet; }
/* welcome (first page of a visit, welcome.js): starts over the page, then lifts off */
html.vf-welcome .vt-sheet { display: grid; top: -25vh; animation: vf-welcome .85s cubic-bezier(.7, 0, .3, 1) .4s both; }
@keyframes vf-welcome { to { transform: translateY(-140vh); } }
.vt-sheet img { width: min(190px, 40vw); height: auto; filter: drop-shadow(0 8px 18px rgba(40, 0, 0, .45)); }
/* the recipe-photo morph would fly about under the sheet: off in this mode */
html[data-vt="tear"] img[style*="view-transition-name"] { view-transition-name: none !important; }
html[data-vt="tear"]::view-transition-group(vt-sheet) { animation: vt-sheet .8s cubic-bezier(.7, 0, .3, 1) both; }
html[data-vt="tear"]::view-transition-old(vt-sheet) { display: none; }
html[data-vt="tear"]::view-transition-new(vt-sheet) { animation: none; }
/* old page (and its header) until the sheet covers the screen, then the new one */
html[data-vt="tear"]::view-transition-old(root),
html[data-vt="tear"]::view-transition-old(site-header),
html[data-vt="tear"]::view-transition-old(site-mbar) { display: block; animation: vt-first-half .8s linear both; }
html[data-vt="tear"]::view-transition-new(root),
html[data-vt="tear"]::view-transition-new(site-header),
html[data-vt="tear"]::view-transition-new(site-mbar) { animation: vt-second-half .8s linear both; }
@keyframes vt-sheet {
  0%   { transform: translateY(100vh); }
  42%, 52% { transform: translateY(-25vh); }
  100% { transform: translateY(-160vh); }
}
@keyframes vt-first-half { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes vt-second-half { 0%, 46% { opacity: 0; } 47%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rv { opacity: 0; transform: translateY(26px); }
  .rv.rv-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* press feedback */
.btn, .recipe-card, .cat-box, .rp-more__card, .pp-tile, .rp-btn, .pp-btn, .mnav__btn, .mnav__links a, .nav a { -webkit-tap-highlight-color: transparent; }
.btn:active, .recipe-card:active, .cat-box:active, .rp-more__card:active { transform: scale(.97); transition: transform .08s; }

/* desktop: the header slims down and stays at the top while scrolling */
@media (min-width: 1025px) {
  .site-header { position: sticky; top: calc(var(--topbar-h, 46px) * -1); }
  .mainbar { transition: padding .25s, box-shadow .25s; }
  .mainbar__in { transition: min-height .25s; }
  .brand img { transition: width .25s cubic-bezier(.2, .7, .2, 1); }
  /* The logo shrinks only as far as it fits inside the slim bar (92px; it was 74px, asked to
     stay bigger, 2026-10-11), so nothing hangs over the page or the Products page's band. */
  .site-header.is-compact .mainbar { padding: 4px 0; box-shadow: 0 10px 24px -14px rgba(19, 49, 21, .55); }
  .site-header.is-compact .mainbar__in { min-height: 92px; }
  .site-header.is-compact .brand img { width: 92px; }
}