/*
Theme Name: Breadsmith
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: 'PTSansPro', sans-serif;
font-family: 'Anodyne', sans-serif;
font-family: 'ButchHMK', cursive;
*/

:root {
  --blue: #0067A6;
  --darkblue: #00416A;
  --darkestblue: #103153;
  --lightblue: #BED4DD;
  --lighterblue: #BFD0E6;
  --lightestblue: #E0E8F3;
  --grayblue: #0B5683;
  --tan: #F0E5CF;
  --kraft: #DBCAA9;
  --cream: #F7F4EE;
  --white: #FFFFFF;
  --red: #ED243B;

  --toggle-width: 2.5rem;
  --toggle-height: 0.5rem;
  --toggle-color: var(--darkblue);

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");

  --facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z'/%3E%3C/svg%3E");

  --threads: url("data:image/svg+xml,%3Csvg viewBox='0 0 192 192' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='x19hqcy' d='M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z'%3E%3C/path%3E%3C/svg%3E");

  --twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/%3E%3C/svg%3E");

  --bluesky: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10.8c-1.087 -2.114 -4.046 -6.053 -6.798 -7.995C2.566 0.944 1.561 1.266 0.902 1.565 0.139 1.908 0 3.08 0 3.768c0 0.69 0.378 5.65 0.624 6.479 0.815 2.736 3.713 3.66 6.383 3.364 0.136 -0.02 0.275 -0.039 0.415 -0.056 -0.138 0.022 -0.276 0.04 -0.415 0.056 -3.912 0.58 -7.387 2.005 -2.83 7.078 5.013 5.19 6.87 -1.113 7.823 -4.308 0.953 3.195 2.05 9.271 7.733 4.308 4.267 -4.308 1.172 -6.498 -2.74 -7.078a8.741 8.741 0 0 1 -0.415 -0.056c0.14 0.017 0.279 0.036 0.415 0.056 2.67 0.297 5.568 -0.628 6.383 -3.364 0.246 -0.828 0.624 -5.79 0.624 -6.478 0 -0.69 -0.139 -1.861 -0.902 -2.206 -0.659 -0.298 -1.664 -0.62 -4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'%3E%3C/path%3E%3C/svg%3E");

  --youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z'/%3E%3C/svg%3E");

  --linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");

  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");

  --chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.293 15.707a1 1 0 0 0 1.414 0L12 9.414l6.293 6.293a1 1 0 0 0 1.414-1.414l-7-7a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 0 1.414'/%3E%3C/svg%3E");

  --prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 22L6 12L16 2l1.775 1.775L9.55 12l8.225 8.225z'/%3E%3C/svg%3E");

  --next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10z'/%3E%3C/svg%3E");

  --print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");

  --download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z'/%3E%3C/svg%3E");

  --header-height: 7.5rem;
  --submenu-height: 4.25rem;
  --site-width: 1162px;
}

@font-face {
  font-family: 'PTSansPro';
  src: url('fonts/PTSansPro-ExtraBold.woff2') format('woff2'),
       url('fonts/PTSansPro-ExtraBold.woff') format('woff'),
       url('fonts/PTSansPro-ExtraBold.otf') format('opentype');
  font-display: swap;
  font-weight: 800;
}

@font-face {
  font-family: 'PTSansPro';
  src: url('fonts/PTSansPro-Bold.woff2') format('woff2'),
       url('fonts/PTSansPro-Bold.woff') format('woff'),
       url('fonts/PTSansPro-Bold.otf') format('opentype');
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: 'PTSansPro';
  src: url('fonts/PTSansPro-Regular.woff2') format('woff2'),
       url('fonts/PTSansPro-Regular.woff') format('woff'),
       url('fonts/PTSansPro-Regular.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'Anodyne';
  src: url('fonts/Anodyne.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'ButchHMK';
  src: url('fonts/ButchHMK.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
}

BODY {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--darkblue);
  font-family: 'PTSansPro', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
}

IMG { border: 0; }

.site-width {
  width: var(--site-width); margin: 0 auto;

  @media (max-width: 1200px) { & { width: 96%; } }
}

H1, H2, H3 {
  margin: 0 0 0.5em; color: var(--blue); font-weight: 700; font-size: 2.5rem;
  line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
}

H2 { font-size: 1.875rem; letter-spacing: 0.1em; }
H3 { font-size: 1.5rem; letter-spacing: 0.1em; }

A { color: var(--blue); text-decoration: none; }
A:hover { color: var(--darkblue); }

.button,
#menu-footer-buttons A {
  display: inline-block; box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 26%); outline: 0;
  border: 0; border-radius: 0.35em; padding: 0.725em 0.65em 0.725em 0.75em;
  background-color: var(--blue); color: var(--white); font-weight: 700;
  font-size: 1.25rem; line-height: 1; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
}

.button:hover { background-color: var(--darkblue); color: var(--white); }

DIALOG::backdrop { background: rgba(0 0 0 / 0.8); }

DIALOG {
  overflow: visible; border: 0; box-sizing: border-box; padding: 0;
}

DIALOG > BUTTON {
  position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
  padding: 0; border: 0; border-radius: 50%; font-size: 1rem; line-height: 1;
  background: var(--lightestblue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300416A' d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.094l-4.157-4.104 4.1-4.141-1.849-1.849-4.105 4.159-4.156-4.102-1.833 1.834 4.161 4.12-4.104 4.157 1.834 1.832 4.118-4.159 4.143 4.102 1.848-1.849z'/%3E%3C/svg%3E") no-repeat center;
  cursor: pointer;
}

/* HEADER */
#header-spacer { height: var(--header-height); }

HEADER {
  position: fixed; top: 0; left: 0; z-index: 900;
  display: flex; align-items: center;
  height: var(--header-height); width: 100%; background: var(--white);
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 16%);
}

HEADER .site-width {
  display: flex; justify-content: space-between; align-items: center;
}

#header-logo {
  display: inline-block; width: 7.5rem; aspect-ratio: 800 / 507;
  margin-left: 1.75rem;
  background: url(images/logo.webp) no-repeat center; background-size: contain;

  @media (max-width: 750px) { & { margin-left: 0; } }
}

#toggle-menu { display: none; }

LABEL[for="toggle-menu"] {
  position: absolute; right: 2%;
  display: none; margin: 0; padding: calc(var(--toggle-height) * 2) 0;
  width: var(--toggle-width); height: var(--toggle-height); cursor: pointer;
  background: linear-gradient(transparent, transparent calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 3), transparent calc(var(--toggle-height) * 3), transparent ); transition: all 0.1s ease-in-out;

  @media (max-width: 620px) { & { display: inline-block; } }
}

LABEL[for="toggle-menu"]:before,
LABEL[for="toggle-menu"]:after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: var(--toggle-height); background: var(--toggle-color);
  transition: all 0.1s ease-in-out; transform-origin: 0% 0%;
}

LABEL[for="toggle-menu"]:after { top: auto; bottom: 0; }

#toggle-menu:checked + LABEL[for="toggle-menu"] { background: transparent; }

#toggle-menu:checked + LABEL[for="toggle-menu"]:before,
#toggle-menu:checked + LABEL[for="toggle-menu"]:after {
  top: 50%; left: 50%; transform: rotate(45deg) translate(-50%,-50%); width: 130%;
}

#toggle-menu:checked + LABEL[for="toggle-menu"]:after { transform: rotate(-45deg) translate(-50%,-50%); }

#toggle-menu:checked + LABEL[for="toggle-menu"] + NAV { display: flex; }

HEADER NAV {
  display: flex; justify-content: flex-end; align-items: center; gap: 0 2.375rem;

  @media (max-width: 620px) { & {
    display: none; justify-content: center; flex-direction: column-reverse;
    position: absolute; top: 100%; left: -2%; z-index: 899; width: 104%;
    background: var(--lightestblue); padding: ; padding: 0.5rem 0;
    box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 16%);
  } }
}

#menu-find { display: none; }

#menu-find A, #menu-store-name {
  color: var(--darkblue); font-weight: 700; font-size: 1.5625rem; line-height: 1;
  letter-spacing: 0.19em; text-transform: uppercase;

  @media (max-width: 750px) { & { font-size: 3.333vw; letter-spacing: 0.1em; } }
  @media (max-width: 620px) { & { font-size: 1.5625rem; letter-spacing: 0.19em; } }
}

#menu-find A:hover, #menu-store-name:hover; { color: var(--blue); }

#menu-store { display: none; flex-direction: column; gap: 0.1rem 0; }

#menu-store .change { font-size: 70%; }

#menu-store STRONG {
  color: var(--blue); font-size: 85%; letter-spacing: 0.1em; text-transform: uppercase;
}

#menu-top-menu {
  display: flex; align-items: center;
  margin: 0; padding: 0; list-style-type: none; text-transform: uppercase;
  font-weight: 700; font-size: 1.5625rem; line-height: 1; letter-spacing: 0.19em;

  @media (max-width: 750px) { & { font-size: 3.333vw; letter-spacing: 0.1em; } }
  @media (max-width: 620px) { & { font-size: 1.5625rem; letter-spacing: 0.19em; } }
}

#menu-top-menu LI {
  margin-left: 1.1875rem; text-align: center;

  @media (max-width: 620px) { & { margin: 0; padding: 0.5rem 0; } }
}

#menu-top-menu LI A { color: var(--darkblue); }
#menu-top-menu LI A:hover{ color: var(--blue); }

HEADER NAV .button { background-color: var(--darkblue); margin: 0.5rem 0; padding: 0.425em 1.275em 0.425em 1.375em; }
HEADER NAV .button:hover { background-color: var(--blue); }

/* FOOTER */
FOOTER { background: var(--darkblue); color: var(--white); }

FOOTER > .site-width {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; padding: 2.625rem 0;
}

#footer-logo {
  display: inline-block; width: 11.25rem; aspect-ratio: 800 / 507;
  background: url(images/logo-white.webp) no-repeat center; background-size: contain;

  @media (max-width: 600px) { & { margin: 0 auto; } }
}

@media (max-width: 770px) { .menu-soc { width: 100%; margin-top: 2rem; } }

#menu-footer-menu {
  display: flex; gap: 0 5rem; margin: 0; padding: 0; list-style-type: none;

  @media (max-width: 1100px) { & { gap: 0 5vw; margin: 0 1vw; } }
  @media (max-width: 1000px) { & { gap: 0 5rem; margin: 0; } }
  @media (max-width: 770px) { & { justify-content: space-between; gap: auto; } }
  @media (max-width: 600px) { & { flex-direction: column; text-align: center; gap: 1em 0; font-size: 1.5rem; } }
}

#menu-footer-menu A { color: var(--white); }
#menu-footer-menu A:hover { color: var(--lightestblue); }

#menu-footer-menu > LI > A { font-weight: 700; text-transform: uppercase; }

#menu-footer-menu LI UL { margin: 0; padding: 0; list-style-type: none; }

#menu-footer-menu LI UL LI { padding-top: 0.56em; }

FOOTER .social {
  display: flex; justify-content: flex-end; gap: 0 0.75rem;

  @media (max-width: 600px) { & { margin-top: 2em; justify-content: center; } }
}

FOOTER .social A {
  display: flex; width: 1.875rem;

  @media (max-width: 600px) { & { width: 2.5rem; } }
}

FOOTER .social A:before {
  content: ''; width: 100%; aspect-ratio: 1 / 1; background-color: var(--white);
}

FOOTER .social A:hover:before { background-color: var(--lightestblue); }

FOOTER .social A.instagram:before { mask: var(--instagram) no-repeat; }
FOOTER .social A.facebook:before { mask: var(--facebook) no-repeat; }
FOOTER .social A.linkedin:before { mask: var(--linkedin) no-repeat; }

@media (max-width: 1000px) { .menu-footer-buttons-container { width: 100%; } }

#menu-footer-buttons {
  margin: 0; padding: 0; list-style-type: none;

  @media (max-width: 1000px) { & {
    display: flex; justify-content: space-between; margin-top: 2rem;
  } }
  @media (max-width: 600px) { & { flex-direction: column; gap: 1.25rem 0; } }
}

#menu-footer-buttons LI {
  padding-bottom: 1.25rem;

  @media (max-width: 1000px) { & { padding-bottom: 0; width: 32%; } }
  @media (max-width: 600px) { & { width: 100%; } }
}

#menu-footer-buttons LI:last-of-type { padding-bottom: 0; }

#menu-footer-buttons A {
  width: 100%;

  @media (max-width: 850px) { & { font-size: 2.353vw; } }
  @media (max-width: 600px) { & { font-size: 1.5rem; } }
  @media (max-width: 375px) { & { font-size: 6.4vw; } }
}

#menu-footer-buttons A:hover { background: var(--grayblue); }

FOOTER .subfooter {
  padding: 1.25rem 0; background: var(--darkestblue);
  color: var(--lighterblue); line-height: 1.7;
}

FOOTER .subfooter .site-width {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;

  @media (max-width: 600px) { & { flex-direction: column; } }
}

#menu-subfooter-menu {
  display: flex; margin: 0; padding: 0; list-style-type: none; line-height: 1;

  @media (max-width: 600px) { & { margin-top: 1rem; } }
}

#menu-subfooter-menu LI {
  margin-left: 0.5rem; padding-left: 0.5rem;
  border-left: 0.125rem solid var(--lighterblue);
}

#menu-subfooter-menu LI:first-of-type {
  border-left: none;

  @media (max-width: 600px) { & { margin-left: 0; padding-left: 0; } }
}

#menu-subfooter-menu LI A { color: var(--lighterblue); }
#menu-subfooter-menu LI A:hover { color: var(--lightestblue); }

FOOTER .subfooter .site-width .disclaimer {
  width: 100%; margin-top: 1rem; border-top: 0.125rem solid var(--grayblue);
  padding-top: 0.8rem;
}

/* HOME PAGE */
#hero {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  color: var(--white); position: relative; height: 21.3125rem; padding-top: 10rem;
  box-sizing: border-box; overflow: hidden;

  @media (max-width: 700px) { & { padding-top: 8rem; } }
}

#hero VIDEO {
  position: absolute; z-index: 2; top: 50%; left: 50%; width: auto; height: auto;
  transform: translateY(-50%) translateX(-50%); min-width: 100%; min-height: 100%;
}

#hero:after {
  content: ''; position: absolute; z-index: 3; top: 0; left: 0;
  width: 100%; height: 100%; background: rgb(224 232 243 / 0.3);
}

#hero .site-width { position: relative; z-index: 4; }

#hero H1 {
  margin: 0 0 0.4em; font-family: 'ButchHMK', cursive; font-weight: normal;
  font-size: 3.125rem; line-height: 1; letter-spacing: 0; text-transform: none;
  text-shadow: 0.125rem 0.125rem 0.1875rem rgb(0 0 0 / 0.7); color: #A4BEDD;
}

#hero H2 {
  margin: 0; font-family: 'Anodyne', sans-serif; font-weight: normal;
  font-size: 3.75rem; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--white); text-shadow: 0.1875rem 0.1875rem 0.1875rem rgb(0 0 0 / 0.7);
}

#home-location {
  position: relative; z-index: 4; box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 16%);
  background: url(images/whitelines.webp); padding: 3.375rem 0;
}

#home-location H2 {
  display: flex; align-items: center; justify-content: center; margin: 0 0 3rem;
  padding: 0 2%; letter-spacing: 0.1em;
}

#home-location H2:before {
  content: ''; height: 1.2em; width: 1.2em; margin-right: 0.5333em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 368.553 368.553' fill='%230067A6'%3E%3Cpath d='M184.277,0c-71.683,0-130,58.317-130,130c0,87.26,119.188,229.855,124.263,235.883c1.417,1.685,3.504,2.66,5.705,2.67 c0.011,0,0.021,0,0.032,0c2.189,0,4.271-0.957,5.696-2.621c5.075-5.926,124.304-146.165,124.304-235.932 C314.276,58.317,255.96,0,184.277,0z M184.322,349.251C160.385,319.48,69.277,201.453,69.277,130c0-63.411,51.589-115,115-115 s115,51.589,115,115C299.276,203.49,208.327,319.829,184.322,349.251z'/%3E%3Cpath d='M184.277,72.293c-30.476,0-55.269,24.793-55.269,55.269s24.793,55.269,55.269,55.269s55.269-24.793,55.269-55.269 S214.753,72.293,184.277,72.293z M184.277,167.83c-22.204,0-40.269-18.064-40.269-40.269s18.064-40.269,40.269-40.269 s40.269,18.064,40.269,40.269S206.48,167.83,184.277,167.83z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

#home-location .site-width {
  width: 964px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;

  @media (max-width: 1000px) { & { width: 98%; } }
  @media (max-width: 640px) { & { flex-direction: column; gap: 1rem 0; } }
}

#locations-dropdown {
  width: 39%; position: relative;

  @media (max-width: 640px) { & { width: 75% } }
  @media (max-width: 500px) { & { width: 100% } }
}

#toggle-locations { display: none; }

#toggle-locations + LABEL {
  width: 100%; cursor: pointer; position: relative; z-index: 1;
}

#toggle-locations + LABEL:after {
  content: ""; height: 2em; width: 2em; position: absolute; top: 50%; right: 5%;
  transition: all 0.2s; transform: translateY(-50%); background-size: contain;
  mask: var(--chevron-down) no-repeat; background-color: var(--white);
}

@media (max-width: 750px) {
  #toggle-locations + LABEL:after { height: 4.267vw; width: 4.267vw; right: 0; }
}
@media (max-width: 750px) {
  #toggle-locations + LABEL:after { height: 2em; width: 2em; right: 5%; }
}

#toggle-locations:checked + LABEL:after {
  transform: rotate(180deg) translateY(50%);
}

#toggle-locations + LABEL + NAV {
  display: none; position: absolute; top: 100%; left: 0; width: 100%;
  background: var(--white); box-shadow: 0 0.375rem 0.75rem rgb(0 0 0 / 0.16);
}

#toggle-locations:checked + LABEL + NAV { display: block; }

#home-location #location-menu UL,
#home-location .menu-location-menu-container UL {
  margin: 0; padding: 0; list-style-type: none;
}

#or {
  color: var(--darkblue); font-weight: 800; font-size: 1.25rem; line-height: 1;
  text-transform: uppercase;
}

#home-location FORM {
  width: 39%;

  @media (max-width: 640px) { & { width: 75%; } }
  @media (max-width: 500px) { & { width: 100%; } }
}

#home-location #wpsl-search-input {
  width: 100%; box-sizing: border-box; outline: 0; border: 0; border-radius: 0.4em;
  font-family: 'PTSansPro', sans-serif; font-size: 1.125rem; line-height: 1;
  background: var(--white); color: var(--darkblue); padding: 12.75px 0.95em;
  transition: all 0.2s; -webkit-appearance: none; appearance: none;
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);

  @media (max-width: 570px) { & { width: 100% !important; } }
}

#home-location #wpsl-search-input:-ms-input-placeholder { color: var(--darkblue); }
#home-location #wpsl-search-input::placeholder { color: var(--darkblue); opacity: 1; }
#home-location #wpsl-search-input:focus:-ms-input-placeholder { color: transparent; }
#home-location #wpsl-search-input:focus::placeholder { color: transparent; opacity: 0; }

#home-location #wpsl-result-list { width: 100%; margin-right: 0; }

#home-location #wpsl-stores { height: auto; overflow-y: visible; }

#home-location #wpsl-stores UL { display: flex; flex-wrap: wrap; gap: 1rem; }

#home-location #wpsl-stores UL LI {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0 0.8rem; border-radius: 0.4375rem; width: calc(50% - 0.5rem);
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16); box-sizing: border-box;
  padding: 1.25rem 1.125rem; background: var(--white); font-size: 0.875rem;

  @media (max-width: 820px) { & { flex-wrap: wrap; } }
  @media (max-width: 640px) { & { flex-wrap: nowrap; width: 100%; } }
}

#home-location #wpsl-stores UL LI:first-of-type,
#home-location #wpsl-stores UL LI:nth-of-type(2) { margin-top: 5rem; }

@media (max-width: 640px) {
  #home-location #wpsl-stores UL LI:nth-of-type(2) { margin-top: 0; }
}

#home-location #wpsl-stores UL LI:not(.hp-result) {
  display: block; box-shadow: none; width: 100%; padding: 1.5rem 0 0;
  background: transparent; font-size: 24px; text-align: center;
}

#home-location #wpsl-stores UL LI.hp-result IMG {
  width: 5.1875rem; height: 5.1875rem; border-radius: 50%;
}

#home-location #wpsl-stores UL LI.hp-result .address {
  width: 100%;

  @media (max-width: 820px) { & { width: calc(100% - 5.9875rem); } }
  @media (max-width: 640px) { & { width: 100%; } }
}

#home-location #wpsl-stores UL LI.hp-result .address H3 {
  margin: 0 0 0.5em; font-weight: 800; font-size: 1rem; letter-spacing: 0.05em;
  text-transform: uppercase;
}

#home-location #wpsl-stores UL LI.hp-result A { color: var(--darkblue); }
#home-location #wpsl-stores UL LI.hp-result A:hover { color: var(--blue); }

#home-location #wpsl-stores UL LI.hp-result .address P { margin: 0 0 0.1em; }

#home-location #wpsl-stores UL LI.hp-result .address .more {
  display: inline-block; margin-top: 1em; font-weight: 700;
  font-size: 1rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
}

#home-location #wpsl-stores UL LI.hp-result .directions {
  width: 4.6875rem; text-align: right;

  @media (max-width: 820px) { & { text-align: left; margin: 1em 0 0 5.9875rem; } }
  @media (max-width: 640px) { & { width: 4.6875rem; text-align: right; margin: 0; } }
}

#home-location #wpsl-stores UL LI.hp-result .directions A {
  font-weight: 700; text-transform: uppercase;
}

#menu-location-menu { max-height: 12.5rem; overflow-y: auto; }

#menu-location-menu A {
  display: block; line-height: 1; padding: 0.39375rem 1.25rem;
}

#menu-location-menu > LI > A {
  color: var(--kraft); font-weight: 700; text-transform: uppercase;
  pointer-events: none;
}

#menu-location-menu LI UL LI A { color: var(--darkblue); }
#menu-location-menu LI UL LI A:hover { background: var(--lightblue); }

#home-branding .site-width {
  display: flex; justify-content: space-around; padding: 4.375rem 0;

  @media (max-width: 1200px) { & { justify-content: space-between; } }
  @media (max-width: 800px) { & { flex-wrap: wrap; justify-content: center; gap: 4rem 8%; } }
}

#home-branding .site-width > DIV {
  width: 26%; text-align: center;

  @media (max-width: 800px) { & { width: 46%; font-size: 1.125rem; } }
  @media (max-width: 600px) { & { width: 100%; font-size: 1.5rem; } }
}

#home-branding .site-width > DIV .image {
  height: 4.75rem; margin-bottom: 1.75rem; background-repeat: no-repeat;
  background-position: center; background-size: contain;
}

#home-branding .site-width > DIV H2 {
  margin: 0 0 0.75em; padding-left: 0.1em; font-size: 1.625rem;

  @media (max-width: 600px) { & { font-size: 2rem; } }
}

#home-branding .site-width > DIV P { margin: 0 0 1.2em; }
#home-branding .site-width > DIV P:last-of-type { margin: 0; }

#instagram {
  background: url(images/whitelines.webp); padding: 1.75rem 0;
}

@media (max-width: 440px) { #instagram .site-width { width: 100%; } }


/* MULTIPLE PAGES */
.h1-header { padding: 1em 0; }

#submenu-spacer {
  height: var(--submenu-height);

  @media (max-width: 630px) { & { height: 0; } }
}

#submenu {
  background: var(--lightestblue);
  position: fixed; top: var(--header-height); left: 0; z-index: 898; width: 100%;
  font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: 0.1em;

  @media (max-width: 630px) { & { position: static; } }
  @media (max-width: 500px) { & { font-size: 4vw; } }
}

#submenu .site-width {
  display: flex; gap: 0 1.95em; height: var(--submenu-height);

  @media (max-width: 600px) { & {
    flex-wrap: wrap; justify-content: center; gap: 0.75em 1.95em; padding: 0.75em 0;
    height: auto;
  } }
}

#submenu UL {
  width: var(--site-width); height: var(--submenu-height); margin: 0 auto;
  padding: 0; list-style-type: none; display: flex; align-items: center;
  gap: 0 1.95em; 

  @media (max-width: 1200px) { & { width: 96%; } }
  @media (max-width: 900px) { & {
    flex-wrap: wrap; justify-content: center; gap: 0.75em 1.95em; padding: 0.75em 0;
  } }
  @media (max-width: 630px) { & { height: auto; } }
}

#submenu .site-width UL {
  width: auto; height: auto; margin: 0;

  @media (max-width: 600px) { & { padding: 0; } }
}

#submenu UL A { display: inline-flex; color: var(--darkblue); text-align: center; }

#submenu UL A:hover { color: var(--blue); }

#submenu #setloc {
  margin-left: auto;

  @media (max-width: 900px) { & { margin-left: 0; } }
}

#submenu #setloc .button {
  color: var(--white); font-size: 1rem; text-transform: none;
  padding: 0.725em 0.9em 0.725em 1em;
}

#submenu ~ SECTION {
  scroll-margin-top: calc(var(--header-height) + var(--submenu-height));
}

#rewards { position: relative; z-index: 3; background: var(--lightestblue); }

#rewards .site-width {
  display: flex; justify-content: space-around; position: relative;

  @media (max-width: 1000px) { & { width: 100%; } }
  @media (max-width: 800px) { & { flex-wrap: wrap; } }
  @media (max-width: 600px) { & { flex-direction: column; padding: 3rem 2%; box-sizing: border-box; } }
}

#rewards .image {
  width: 30.3786%; background-repeat: no-repeat;
  background-position: top 0.6875rem center; background-size: cover;

  @media (max-width: 1000px) { & { background-size: 100%; } }
  @media (max-width: 800px) { & {
    position: absolute; top: 0; left: 4%; width: 55%; height: 100%; opacity: 0.4;
  } }
  @media (max-width: 600px) { & { display: none; } }
}

#rewards .logo {
  align-self: flex-start; width: 32.3580%; height: auto; margin: 3.7rem 0;

  @media (max-width: 800px) { & { width: 48%; position: relative; z-index: 2; } }
  @media (max-width: 600px) { & { margin: 0; width: 100%; } }
}

#rewards .text {
  width: 13.875rem; padding: 3.4rem 0; line-height: 1.4;

  @media (max-width: 800px) { & { width: 15rem; font-size: 1.125rem; position: relative; z-index: 2; } }
  @media (max-width: 600px) { & { width: 100%; padding: 2rem 0 0; font-size: 1.5rem } }
}

#rewards .text P { margin: 0 0 1.4em; }
#rewards .text P:last-of-type { margin: 0; }

#rewards .text .button {
  width: 94%;

  @media (max-width: 600px) { & { width: 100%; font-size: 1.5625rem; } }
}

#breadsmith_app {
  position: relative; z-index: 2; background: url(images/whitelines.webp);
}

#breadsmith_app .site-width { box-sizing: border-box; position: relative; }

#breadsmith_app .text {
  width: 23.5rem; margin-left: 9%; padding: 3.6rem 0; position: relative; z-index: 2;

  @media (max-width: 1000px) { & { margin-left: 0; } }
  @media (max-width: 450px) { & { width: 100%; } }
}

#breadsmith_app .text H2 {
  margin: 0 0 2rem; padding-bottom: 1.1rem; letter-spacing: 0.15em;
  border-bottom: 4px solid var(--blue);
}

#breadsmith_app .text .text-content {
  width: 61%; line-height: 1.4; padding-bottom: 2.5rem;

  @media (max-width: 700px) { & { width: 70%; font-size: 1.125rem; } }
  @media (max-width: 600px) { & { width: 100%; font-size: 1.5rem; } }
}

#breadsmith_app .text .button {
  margin-right: 0.5rem; padding: 0.5625rem 0.7625rem 0.5rem;
  line-height: 0; letter-spacing: 0;
}

#breadsmith_app .text .button IMG { height: 2rem; width: auto; }

#breadsmith_app .app {
  position: absolute; bottom: 0; right: 10%; height: 95%; width: auto;

  @media (max-width: 1000px) { & { right: 0; } }
  @media (max-width: 700px) { & { opacity: 0.4; } }
  @media (max-width: 600px) { & { opacity: 0.2; } }
}

#join_our_team { position: relative; z-index: 2; }

#join_our_team .site-width { box-sizing: border-box; position: relative; }

#join_our_team .text {
  width: 48%; padding: 3.6rem 0; position: relative; z-index: 3;

  @media (max-width: 800px) { & { width: 100%; } }
}

#join_our_team .text H2 {
  margin: 0 0 1.5rem; padding-bottom: 1.1rem; letter-spacing: 0.15em;
  border-bottom: 4px solid var(--blue); max-width: 75%;
}

#join_our_team .text .buttons {
  display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 2rem;
}

#join_our_team .text .buttons .button { padding: 0.725em 0.9em 0.725em 1em; }

#join_our_team .text .buttons .button.outline {
  background-color: transparent; color: var(--blue);
  border: 1px solid var(--darkblue); box-shadow: none;
}

#join_our_team .text .buttons .button.outline:hover {
  background-color: var(--darkblue); color: var(--white);
}

#join_our_team .image {
  position: absolute; top: 0; right: 0; height: 100%; width: 49%;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 800px) { & {
    position: static; width: 100%; aspect-ratio: 712 / 268;
  } }
}

#gift-cards .site-width {
  display: flex; justify-content: space-between; align-items: center;

  @media (max-width: 750px) { & { flex-direction: column; } }
}

#gift-cards .text {
  width: 53.5%; padding: 3.125rem 0;

  @media (max-width: 750px) { & { width: 100%; } }
}

#gift-cards .text H2 {
  margin: 0 0 1.5rem; padding-bottom: 1.1rem; letter-spacing: 0.15em;
  border-bottom: 4px solid var(--blue);
}

#gift-cards .text P { margin: 0 0 1.5em; }

#gift-cards .text .button {
  margin-top: 0.25em; padding: 0.725em 2em 0.725em 2.15em;
}

#gift-cards IMG {
  max-height: 275px; width: auto; max-width: 100%;

  @media (max-width: 750px) { & { margin-bottom: 1rem; } }
}

/* Contact Form 7 */
.wpcf7-form { font-size: 1.25rem; }

.wpcf7-form .col2, .wpcf7-form.col2 {
  display: flex; justify-content: space-between; align-items: flex-start;

  @media (max-width: 600px) { & { flex-direction: column; } }
}

.wpcf7-form .col3 {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 1.463%;

  @media (max-width: 750px) { & { gap: 0 2%; } }
}

.wpcf7-form .col2 > LABEL, .wpcf7-form.col2 > LABEL {
  width: 48%;

  @media (max-width: 600px) { & { width: 100%; } }
}

.wpcf7-form .col3 > LABEL {
  width: 32.3580%; margin: 0;

  @media (max-width: 750px) { & { width: 49%; } }
  @media (max-width: 600px) { & { width: 100%; } }
}

.wpcf7-form LABEL { font-size: 1.25rem; }

.wpcf7-form LABEL .wpcf7-not-valid-tip {
  position: absolute; top: -100%; right: 0; font-size: 60%;
}

.wpcf7-form SELECT.wpcf7-not-valid + .wpcf7-not-valid-tip { display: none; }

.wpcf7-form INPUT[type="text"],
.wpcf7-form INPUT[type="email"],
.wpcf7-form INPUT[type="tel"],
.wpcf7-form TEXTAREA,
.wpcf7-form SELECT {
  width: 100%; box-sizing: border-box; margin: 0.5rem 0 1.5rem; outline: 0;
  border: 0; border-radius: 0.5rem; padding: 0.875em; background: var(--white);
  box-shadow: -0.0625rem 0.0625rem 0.4375rem 0 rgb(0 0 0 / 0.16);
  color: var(--darkblue); font-family: 'PTSansPro', sans-serif; font-size: 1rem;
  line-height: 1; transition: all 0.2s; -webkit-appearance: none; appearance: none;
}

.wpcf7-form SELECT {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300416A' d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E") no-repeat right 0.5em center;
  padding: 1.031em 2.6em 1.031em 0.875em; cursor: pointer;
}

.wpcf7-radio {
  position: relative; top: -0.15em;

  @media (max-width: 765px) { & { display: block; top: 0; } }
}

@media (max-width: 765px) {
  .wpcf7-radio .first { margin-left: 0; }
}

.wpcf7-form INPUT[type="radio"],
.wpcf7-form .wpcf7-exclusive-checkbox INPUT[type="checkbox"] { display: none; }

.wpcf7-form INPUT[type="radio"] + SPAN,
.wpcf7-form .wpcf7-exclusive-checkbox INPUT[type="checkbox"] + SPAN {
  display: inline-flex; align-items: center;
}

.wpcf7-form INPUT[type="radio"] + SPAN:before,
.wpcf7-form .wpcf7-exclusive-checkbox INPUT[type="checkbox"] + SPAN:before {
  display: inline-flex; box-sizing: border-box; margin-right: 0.5em;
  height: 0.75rem; aspect-ratio: 1 / 1; outline: 2.5px solid var(--blue);
  border-radius: 50%; border: 2px solid transparent; cursor: pointer;
}

.wpcf7-form INPUT[type="radio"]:checked + SPAN:before,
.wpcf7-form .wpcf7-exclusive-checkbox INPUT[type="checkbox"]:checked + SPAN:before {
  background: var(--darkblue); border-color: var(--white);
}

.wpcf7-form INPUT.wpcf7-not-valid { outline: 0.0625rem solid var(--red); }

.wpcf7-form SELECT.wpcf7-not-valid {
  outline: 0.0625rem solid var(--red); color: var(--red);
}

.wpcf7-spinner { position: absolute; left: 50%; transform: translate(-150%,-330%); }

.wpcf7-response-output {
  padding: 0.5em 1em !important;
  font-weight: 700; font-size: 1.25rem; text-align: center;
}


/* STORE */
#about {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 0.875rem; position: relative;

  @media (max-width: 750px) { & { flex-direction: column; gap: 2.75rem 0; } }
}

#about .text {
  width: 696px; box-sizing: border-box; padding: 2.75rem 1.5rem 0 0;
  margin-left: calc((100% - var(--site-width)) / 2);

  @media (max-width: 1200px) { & { width: 58%; margin: 0; padding: 2.75em 2% 0; } }
  @media (max-width: 750px) { & { width: 100%; } }
}

#about H2.order { margin: 1.75em 0 0.75em; }

#about P { margin: 0 0 1.5em; }

#about .content {
  width: 96%;
  @media (max-width: 750px) { & { width: 100%; } }
}

#setloc.button {
  padding: 0.75em 1.5em;
  font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none;
}

#about .button.order {
  padding: 0.5em 3em;
  font-weight: 400; font-size: 1.5625rem; letter-spacing: 0; text-transform: none;
}

#about .image {
  width: 42%; aspect-ratio: 614 / 424;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 750px) { & { width: 100%; } }
}

#menu {
  position: relative; margin: calc(89px + 3.4375rem) 0; padding-top: 1em;
  background: var(--tan) url(images/tan.webp) repeat top center;
  color: var(--darkblue); font-size: 0.875rem;
}

#menu:before, #menu:after {
  content: ""; position: absolute; top: -89px; left: 0; width: 100%; height: 89px;
  background: transparent url(images/tan-torn-top.webp) repeat top center;
}

#menu:after {
  top: 100%;
  background: transparent url(images/tan-torn-bottom.webp) repeat top center;
}

#menu .site-width {
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}

#menu .text {
  width: 60%; position: relative; z-index: 5;

  @media (max-width: 925px) { & { width: 100%; } }
}

#menu .site-width.noimg .text { width: 100%; }

#menu P { margin: 0 0 1.5em; line-height: 1.3; }

#menu P I, #menu P EM { color: var(--blue); }

#menu .store_menu_text {
  width: 82%; margin-bottom: 2rem;

  @media (max-width: 925px) { & { width: 100%; } }
}

#menu .store_menus {
  width: 100%; display: flex; justify-content: space-between;

  @media (max-width: 925px) { & { justify-content: flex-start; gap: 0 2rem; } }
  @media (max-width: 750px) { & { justify-content: space-between; } }
  @media (max-width: 565px) { & { flex-direction: column; } }
}

#menu .site-width.noimg .store_menus {
  justify-content: space-between;

  @media (max-width: 750px) { & { flex-wrap: wrap; } }
}

#menu .store_menu_daily_breads,
#menu .store_menu_sweets_and_specialty,
#menu .store_menu_monthly_breads {
  max-width: 48%;

  @media (max-width: 565px) { & { max-width: 100%; } }
}

#menu .store_menu_daily_breads P,
#menu .store_menu_sweets_and_specialty P,
#menu .store_menu_monthly_breads P { line-height: 1.8; }

#menu .image {
  width: 349px; height: auto;

  @media (max-width: 925px) { & { position: absolute; right: 0; } }
  @media (max-width: 850px) { & { width: 40%; } }
  @media (max-width: 750px) { & { display: none; } }
}

#menu .site-width.noimg .image { display: none; }

#schedule > .site-width {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 1.75rem;

  @media (max-width: 925px) { & {
    flex-direction: column; align-items: flex-start; gap: 1.5rem 0;
  } }
}

#schedule > .site-width H2 { margin: 0; letter-spacing: 0.15em; }

#schedule > .site-width .links {
  display: flex; justify-content: flex-end; align-items: center; gap: 1rem 2.4em;

  @media (max-width: 600px) { & { flex-direction: column; align-items: flex-start; } }
}

#schedule > .site-width .links A {
  display: flex; align-items: center; gap: 0 0.8125rem; color: var(--darkblue);
  font-size: 0.875rem; line-height: 1;
}

#schedule > .site-width .links A:before {
  content: ''; display: inline-flex; height: 2.5rem;
  background-color: var(--blue);
}

#schedule > .site-width .links A.store_menu_dl:before {
  aspect-ratio: 1 / 1;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z'/%3E%3Cpath d='M17.5,10.5c0.88,0,1.73,0.09,2.5,0.26V9.24C19.21,9.09,18.36,9,17.5,9c-1.7,0-3.24,0.29-4.5,0.83v1.66 C14.13,10.85,15.7,10.5,17.5,10.5z'/%3E%3Cpath d='M13,12.49v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26V11.9c-0.79-0.15-1.64-0.24-2.5-0.24 C15.8,11.66,14.26,11.96,13,12.49z'/%3E%3Cpath d='M17.5,14.33c-1.7,0-3.24,0.29-4.5,0.83v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26v-1.52 C19.21,14.41,18.36,14.33,17.5,14.33z'/%3E%3C/svg%3E") no-repeat;
}

#schedule > .site-width .links A.store_schedule_dl:before {
  aspect-ratio: 1 / 1;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}

#schedule > .site-width .links A:hover { color: var(--blue); }

#schedule > .site-width .links A:hover:before { background-color: var(--darkblue); }

DIALOG.store-menu IMG { max-width: 100%; height: auto; }

#baking-schedule {
  background-image: url(images/schedule-background.webp),url(images/whitelines.webp);
  background-repeat: no-repeat, repeat;
  background-position: bottom 20px left -60px;
  background-size: auto 72%, auto;

  @media (max-width: 900px) { & {
    background-image: url(images/whitelines.webp);
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
  } }
}

#baking-schedule .header {
  display: flex; justify-content: center; align-items: center; gap: 0 2.5rem;
  background: var(--lightestblue); padding: 0.9rem 0;

  @media (max-width: 525px) { & { gap: 0 7.5vw; } }
}

#baking-schedule .header H3 {
  margin: 0; font-size: 1.75rem; line-height: 1; text-transform: uppercase;
  text-align: center;

  @media (max-width: 525px) { & { font-size: 5.1vw; } }
}

#baking-schedule .header A {
  background-size: contain; background-repeat: no-repeat;
  background-position: center; height: 2.5rem; aspect-ratio: 1 / 1;
}

#baking-schedule .header A:before {
  content: ''; display: block; aspect-ratio: 1 / 1;
  background-color: var(--darkblue);
}

#baking-schedule .header A:hover:before { background-color: var(--blue); }

#baking-schedule .header A.prev:before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 17V7l-6 5z'/%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3C/svg%3E") no-repeat;
}

#baking-schedule .header A.next:before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 17 6-5-6-5z'/%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3C/svg%3E") no-repeat;
}

#baking-schedule > .site-width {
  display: flex; justify-content: space-between; padding: 1.875rem 0 0.9rem;

  @media (max-width: 900px) { & { flex-direction: column; width: 100%; padding: 0; } }
}

#baking-schedule .box {
  width: 15.4905%; text-align: center; font-weight: 700;

  @media (max-width: 1100px) { & { width: 15%; font-size: 0.875rem; } }
  @media (max-width: 900px) { & { display: flex; width: 100%; font-size: 1rem; } }
}

#baking-schedule > .site-width.col7 .box {
  width: 13.3%; font-size: 0.875rem;

  @media (max-width: 1100px) { & { width: 13%; font-size: 0.75rem; } }
  @media (max-width: 900px) { & { display: flex; width: 100%; font-size: 1rem; } }
}

@media (max-width: 900px) {
  #baking-schedule .box:nth-of-type(2n) { background: url(images/tan.webp); }

  #baking-schedule .box .content {
    width: calc(100% - 12.5rem); padding: 1.5rem 0 0; box-sizing: border-box;
  }

  #baking-schedule .box:first-of-type { padding-top: 1.5rem; }
  #baking-schedule .box:last-of-type { padding-bottom: 1.5rem; }

  #baking-schedule .box:first-of-type .dd { padding-top: 0; }
  #baking-schedule .box:first-of-type .content { padding-top: 0; }
}

@media (max-width: 500px) {
  #baking-schedule .box .content { width: 60%; padding-left: 2%; padding-right: 2%; }
}

#baking-schedule .box P { margin: 0 0 1.5em; line-height: 1.6; }

#baking-schedule .box .dd {
  margin-bottom: 0.875em; border-bottom: 0.375rem solid var(--darkblue);
  padding-bottom: 0.875em;

  @media (max-width: 900px) { & {
    width: 12.5rem; margin-bottom: 0; border-bottom: 0; padding: 1.5rem 0;
    border-right: 0.375rem solid var(--lightblue); box-sizing: border-box;
  } }

  @media (max-width: 500px) { & { width: 40%; font-size: 3.2vw; } }
}

#baking-schedule .box .date {
  font-family: 'Anodyne', sans-serif; font-size: 281.25%; line-height: 1;
  margin-bottom: 0.1777em;
}

#baking-schedule .box .day { font-size: 162.5%; line-height: 1; }

#baking-schedule .box .special {
  color: var(--blue); font-weight: 800; font-size: 125%; margin-bottom: 0.75em;
}

#contact .site-width {
  display: flex; justify-content: center; align-items: center; gap: 2.5rem 0;
  width: 768px; padding: 3.5rem 0;

  @media (max-width: 800px) { & { width: 96%; } }
  @media (max-width: 600px) { & { flex-direction: column; } }
}

#contact.multiple .site-width {
  width: 1162px; justify-content: space-between; align-items: center;
  flex-wrap: wrap;

  @media (max-width: 1200px) { & { width: 96%; } }
}

#contact.multiple .site-width > DIV {
  width: 45%;
  display: flex; justify-content: center; align-items: center; gap: 2.5rem 0;

  @media (max-width: 900px) { & { flex-direction: column; } }
  @media (max-width: 600px) { & { width: 100%; } }
}

#contact .site-width .text {
  width: 50%; font-size: 0.875rem; padding-right: 1rem; box-sizing: border-box;

  @media (max-width: 600px) { & { width: auto; padding-right: 0; } }
}

#contact .site-width .text.nomap { padding-right: 0; }

#contact.multiple .site-width .text.nomap {
  width: 60%;

  @media (max-width: 600px) { & { width: auto; } }
}

#contact .site-width .text H2 { margin: 0 0 1em; letter-spacing: 0.15em; }

#contact .site-width .text .store_address,
#contact .site-width .text .store_hours { margin-bottom: 1.2em; }

#contact .site-width .text A[href^="tel:"] {
  display: inline-flex; align-items: center; line-height: 1; margin-bottom: 1.2em;
}

#contact .site-width .text A[href^="tel:"]:before {
  content: ''; display: inline-flex; height: 1.4em; width: 1.4em; line-height: 1;
  margin-right: 0.25em; background-color: var(--blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat;
}

#contact .site-width .text A[href^="tel:"]:hover:before {
  background-color: var(--darkblue);
}

#contact .site-width .text .social {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}

#contact .site-width .text .social A {
  margin-top: 0.5em; width: 2rem; height: 2rem; background-color: var(--blue);
}

#contact .site-width .text .social A:hover { background-color: var(--darkblue); }

#contact .site-width .text .social A.instagram { mask: var(--instagram) no-repeat; }
#contact .site-width .text .social A.facebook { mask: var(--facebook) no-repeat; }
#contact .site-width .text .social A.threads { mask: var(--threads) no-repeat; }
#contact .site-width .text .social A.twitter { mask: var(--twitter) no-repeat; }
#contact .site-width .text .social A.bluesky { mask: var(--bluesky) no-repeat; }
#contact .site-width .text .social A.youtube { mask: var(--youtube) no-repeat; }
#contact .site-width .text .social A.linkedin { mask: var(--linkedin) no-repeat; }

#contact .site-width .text DIV:last-of-type { margin-bottom: 0; }

#contact .site-width IMG.kosher { width: 150px; height: auto; margin-top: 1.5em; }

#contact.multiple .order { margin-top: 1.2em; font-size: 1em; }

#contact .site-width IMG.map {
  width: 50%; height: auto;
  border: 0.375rem solid var(--blue); box-sizing: border-box;

  @media (max-width: 600px) { & { width: 100%; } }
}

@media (max-width: 900px) { 
  #contact.multiple .site-width .text { width: auto; }
  #contact.multiple .site-width IMG { width: 100%; }
}

#store-gallery { display: flex; }

#store-gallery.col1 > DIV { width: 100%; aspect-ratio: 90 / 23; }
#store-gallery.col2 > DIV { width: 50%; aspect-ratio: 45 / 23; }
#store-gallery.col3 > DIV { width: 33.3333%; aspect-ratio: 30 / 23; }
#store-gallery.col4 > DIV { width: 25%; aspect-ratio: 1 / 1 }

#store-gallery > DIV {
  background-repeat: no-repeat; background-position: center;
  background-size: cover;
}

#store-wholesale {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  position: relative;
}

#store-wholesale:after {
  content: ''; position: absolute; top: 0; left: 0; z-index: 2;
  height: 100%; width: 100%; background-color: rgb(255 255 255 / 0.90);
}

#store-wholesale .site-width {
  position: relative; z-index: 3; padding: 3.25rem 0;
  display: flex; justify-content: space-between; flex-wrap: wrap;
}

#store-wholesale .text {
  width: 48%; line-height: 1.4;

  @media (max-width: 900px) { & { width: 100%; } }
}

#store-wholesale .text P {
  width: 90%; margin: 0 0 1.5em;

  @media (max-width: 900px) { & { width: 100%; } }
}

#store-wholesale H2 {
  width: 100%; margin-right: 50%; padding-bottom: 1.1rem;
  border-bottom: 4px solid var(--blue);

  @media (max-width: 900px) { & { margin-right: 0; } }
}

#store-wholesale .locations {
  width: 48%; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem 4%;

  @media (max-width: 900px) { & { width: 100%; } }
}

#store-wholesale .locations > DIV {
  width: 48%; border-radius: 0.5rem; background: var(--white);
  box-sizing: border-box; padding: 1.75rem 2rem 0.75rem;
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);

  @media (max-width: 530px) { & { width: 100%; } }
}

#store-wholesale .locations > DIV IMG { max-width: 100%; height: auto; }


/* ABOUT */
#about-breadsmith { position: relative; background: url(images/whitelines.webp); }

#about-breadsmith .text {
  position: relative; z-index: 3; width: 58%; padding: 4.3em 0; font-size: 0.875rem;

  @media (max-width: 500px) { & { width: 100%; } }
}

#about-breadsmith .text P { margin: 0 0 1.5em; }
#about-breadsmith .text P:last-of-type { margin: 0; }

#about-breadsmith .image {
  position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 42.6388%;
  background-repeat: no-repeat; background-position: left center;
  background-size: cover;

  @media (max-width: 500px) { & {
    position: static; width: 100%; aspect-ratio: 614 / 356;
    background-position: center;
  } }
}

#our-story { padding: 2.5rem 0 5rem; }

#our-story .header { margin-bottom: 0.6em; font-size: 2.5rem; }

#our-story-milestones {
  border-bottom: 3px solid var(--darkblue);

  .f-carousel__nav {
    --f-button-height: auto; --f-button-width: auto;
    --f-button-svg-height: 70px; --f-button-svg-width: auto;
    --f-button-svg-stroke-width: 0;
  }

  .f-button svg {
    fill: var(--white); filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.8));
  }

  .f-button:hover svg { fill: var(--tan); }

  .f-button.is-prev svg { transform: rotate(90deg); }
  .f-button.is-next svg { transform: rotate(-90deg); }
}

@media (max-width: 650px) {
  .f-button.is-prev, .f-button.is-next {
    top: 0 !important; transform: none !important;
  }
}

#our-story-milestones .f-carousel__viewport {
  height: auto !important; padding: 2.25rem 0; 
}

#our-story-milestones .f-carousel__slide {
  position: relative; display: flex; width: 518px; margin-right: 70px;
  border-radius: 0.5rem; background: var(--lightestblue);
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
}

#our-story-milestones .f-carousel__slide:after {
  content: ''; position: absolute; bottom: 0; left: 77%; width: 0; height: 0;
  border: 23px solid transparent; border-top-color: var(--lightestblue);
  border-bottom: 0; margin: 0 0 -23px -23px;
}

#our-story-milestones .f-carousel__slide .image {
  width: 50%; background-repeat: no-repeat; background-position: center;
  background-size: cover; border-radius: 0.5rem;
}

#our-story-milestones .f-carousel__slide .text {
  width: 50%; box-sizing: border-box; padding: 2.6em 1.45em; font-size: 0.875rem;
}

#our-story-milestones .f-carousel__slide .text H2 { margin-bottom: 0.7em; }

#our-story-milestones .f-carousel__slide .text H2 SPAN { text-transform: none; }

#our-story-milestones .f-carousel__slide .text P { margin: 0 0 1.5em; }
#our-story-milestones .f-carousel__slide .text P:last-of-type { margin: 0; }

#community {
  background: url(images/whitelines.webp); padding: 3rem 0 4rem;
  font-size: 0.875rem;
}

#community .header { margin-bottom: 0.6em; font-size: 2.5rem; }

#community P { margin: 0 0 1.5em; }

#community .sections {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.0625rem 1.4629%;
  padding-top: 2rem;

  @media (max-width: 900px) { & { gap: 1.0625rem 2%; } }
}

#community .sections > DIV {
  width: 32.3580%; box-sizing: border-box; position: relative; border-radius: 0.5em;
  background-repeat: no-repeat; background-position: top 75px center; background-size: cover;

  @media (max-width: 900px) { & { width: 48%; } }
  @media (max-width: 650px) { & {
    width: 100%; background-position: top 1rem center;
  } }
}

#community .sections > DIV:hover:before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2; background-color: rgb(255 255 255 / 0.85);
}

#community .sections > DIV * { position: relative; z-index: 3; }

#community .sections > DIV .theader {
  border-radius: 0.5em 0.5em 0 0;
  background: var(--lightestblue); text-align: center; padding: 1rem 1rem 0.5rem;
}

#community .sections > DIV .theader H3 {  margin: 0 0 0.25em; font-size: 1.875rem; }

#community .sections > DIV .theader H4 {
  margin: 0; padding: 0 1.8em; font-size: 1rem; font-weight: 400;
}

#community .sections > DIV .theader H4:after {
  content: ''; display: block; margin: 0 auto; width: 2rem; aspect-ratio: 1 / 1;
  mask: var(--chevron-down) no-repeat; background-color: var(--darkestblue);
}

#community .sections > DIV:hover .theader H4:after {
  mask: var(--chevron-up) no-repeat;
}

#community .sections > DIV .text { padding: 2rem 2.25rem; opacity: 0; }

#community .sections > DIV:hover .text { opacity: 1; }

#community .sections > DIV .text P:last-of-type { margin-bottom: 0; }




/* FRANCHISE */
H1.franchise {
  width: var(--site-width); margin: 2rem auto 2.6rem;

  @media (max-width: 1200px) { & { width: 96%; } }
}

#why-breadsmith {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; background: url(images/whitelines.webp);

  @media (max-width: 800px) { & { flex-direction: column; gap: 1.75rem 0; } }
}

#why-breadsmith .text {
  width: 540px; box-sizing: border-box; padding: 3.4rem 4rem 0 0;
  margin-left: calc((100% - var(--site-width)) / 2); font-size: 0.875rem;

  @media (max-width: 1200px) { & { margin: 0; padding-left: 2%; } }
  @media (max-width: 1000px) { & { width: 58%; padding-right: 2rem; } }
  @media (max-width: 800px) { & { width: 100%; padding: 2.75rem 2% 0; } }
}

#why-breadsmith P { margin: 0 0 1.5em; }

#why-breadsmith H2 { margin: 0 0 0.75em; letter-spacing: 0.15em; }

#why-breadsmith .why_breadsmith {
  background: var(--lightestblue); margin-bottom: 2rem; padding: 2rem;
}

#why-breadsmith .why_breadsmith UL { margin: 0 0 0 0.7em; padding: 0 0 0 0.7em; }

#why-breadsmith .why_breadsmith UL LI { padding-bottom: 0.75em; }
#why-breadsmith .why_breadsmith UL LI:last-of-type { padding-bottom: 0; }

#why-breadsmith .image {
  width: 52.8472%; aspect-ratio: 761 / 506;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 800px) { & { width: 100%; } }
}

#franchise-testimonials { background: var(--lightestblue); }

#franchise-testimonials .site-width {
  display: flex; justify-content: center; gap: 1.5rem;
  padding: 4.125rem 0; box-sizing: border-box;
}

@media (max-width: 650px) {
  #franchise-testimonials .site-width.col2,
  #franchise-testimonials .site-width.col3 { flex-direction: column; }
}

#franchise-testimonials .site-width > DIV {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5em 0; width: 20.5rem; border-radius: 0.375rem; box-sizing: border-box;
  padding: 1.125rem 0.9375rem; background: var(--white); font-size: 0.75rem;
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
}

@media (max-width: 900px) {
  #franchise-testimonials .site-width.col3 > DIV { flex-direction: column-reverse; }
}

@media (max-width: 650px) {
  #franchise-testimonials .site-width.col1 > DIV,
  #franchise-testimonials .site-width.col2 > DIV,
  #franchise-testimonials .site-width.col3 > DIV { width: 100%; flex-direction: row; }
}

#franchise-testimonials .site-width > DIV .image {
  width: 5.1875rem; aspect-ratio: 1 / 1; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

#franchise-testimonials .site-width > DIV .text:not(.noimg) {
  width: calc(100% - 6.25rem);
}

@media (max-width: 900px) {
  #franchise-testimonials .site-width.col3 > DIV .image,
  #franchise-testimonials .site-width.col3 > DIV .text:not(.noimg) { width: 100%; }

  #franchise-testimonials .site-width.col3 > DIV .text.noimg { margin-bottom: auto; }
}

@media (max-width: 650px) {
  #franchise-testimonials .site-width.col1 > DIV .image,
  #franchise-testimonials .site-width.col2 > DIV .image,
  #franchise-testimonials .site-width.col3 > DIV .image { width: 25%; }

  #franchise-testimonials .site-width.col1 > DIV .text:not(.noimg),
  #franchise-testimonials .site-width.col2 > DIV .text:not(.noimg),
  #franchise-testimonials .site-width.col3 > DIV .text:not(.noimg) { width: 70%; }
}

#franchise-testimonials .site-width > DIV .text P { margin: 0 0 1.5em; }
#franchise-testimonials .site-width > DIV .text P:last-of-type { margin: 0; }

#franchise-testimonials .site-width > DIV .text .owner {
  margin: 0 0 0.4em; font-weight: 700; font-size: 150%; line-height: 1;
}

#franchise-testimonials .site-width > DIV .text .location {
  margin: 0 0 0.7em; font-weight: 700; color: var(--blue); font-size: 116.6666%;
  line-height: 1; text-transform: uppercase;
}

#franchise-wholesale { position: relative; }

#franchise-wholesale .site-width .text {
  width: 686px; display: flex; justify-content: center; align-items: center;
  padding: 2.9rem 0; font-weight: 700; font-size: 1.875rem;
  text-transform: uppercase;

  @media (max-width: 1200px) { & { width: 57.2917%; } }
  @media (max-width: 1000px) { & { width: 100%; } }
  @media (max-width: 600px) { & { font-size: 5vw; } }
}

#franchise-wholesale .site-width .text .left {
  line-height: 1; letter-spacing: 0.1em; padding-right: 1.0666em;
  border-right: 0.3125rem solid var(--lightestblue); margin-right: 1.0666em;
}

#franchise-wholesale .site-width .text .left .number {
  font-family: 'Anodyne', sans-serif; font-size: 483.3333%; line-height: 0.5;
  letter-spacing: 0; margin-top: 0.3724em;
}

#franchise-wholesale .site-width .text .right {
  font-size: 133.3333%; line-height: 1.5; letter-spacing: 0.15em;
}

#franchise-wholesale .image {
  position: absolute; top: 0; right: 0; height: 100%; width: 42.7083%;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 1000px) { & { position: static; width: 100%; aspect-ratio: 616 / 274; } }
}

#franchise-numbers { background: url(images/whitelines.webp); padding: 3.25rem 0; }

#franchise-numbers H2 { margin: 0 0 0.75em; }

#franchise-numbers .site-width > P { margin: 0 0 1.5em; }

#franchise-numbers .numbers {
  display: flex; flex-wrap: wrap; gap: 2rem 1rem; padding-top: 1rem;
}

#franchise-numbers .numbers > DIV {
  display: flex; justify-content: space-between; width: calc((100% - 2rem) / 3);
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16); background: var(--white);
  font-size: 0.875rem; min-height: 9.375rem;

  @media (max-width: 1000px) { & { width: calc((100% - 1rem) / 2); } }
  @media (max-width: 650px) { & { width: 100%; } }
}

#franchise-numbers .numbers > DIV .image {
  width: 39.4666%; background-repeat: no-repeat; background-position: center;
  background-size: cover;
}

#franchise-numbers .numbers > DIV .text {
  width: 56.2%; box-sizing: border-box; padding: 1.5em 1em 1.4em 0;
}

#franchise-numbers .numbers > DIV .text H3 {
  margin: 0 0 0.4em; color: var(--blue); font-weight: 700; font-size: 171.4285%;
  line-height: 1; text-transform: uppercase; text-align: center;
}

#food-business-review {
  background: var(--lightestblue); padding: 2.25rem 0; font-size: 1.875rem;
  font-weight: 700; color: var(--blue);
}

#food-business-review .site-width {
  display: flex; justify-content: center; align-items: center; gap: 2em;
}

#food-business-review .site-width .text { width: 500px; }

#food-business-review .site-width A { color: var(--darkblue); }
#food-business-review .site-width A:hover { color: var(--blue); }

#franchise-market { background: url(images/tan.webp); padding: 1rem 0; }

#franchise-market .site-width {
  display: flex; justify-content: space-between; align-items: flex-start;

  @media (max-width: 500px) { & { flex-direction: column; } }
}

#franchise-market H2 {
  width: 41%; margin: 1rem 0; padding-bottom: 1em;
  border-bottom: 0.25rem solid var(--lightestblue);

  @media (max-width: 500px) { & { width: 100%; } }
}

#franchise-market .text {
  width: 50%;

  @media (max-width: 500px) { & { width: 100%; } }
}

#franchise-market .text UL { margin: 1rem 0; padding: 0 0 0 1em; }

#franchise-market .text UL LI { padding-bottom: 0.7em; }
#franchise-market .text UL LI:last-of-type { padding-bottom: 0; }

#franchise-investment {
  background: var(--lightestblue); padding: 2.25rem 0; text-align: center;
}

#franchise-investment .investments {
  display: flex; justify-content: space-around; gap: 1.5em 0; padding-top: 2rem;

  @media (max-width: 1000px) { & { justify-content: space-between; } }
  @media (max-width: 650px) { & { flex-direction: column; } }
}

#franchise-investment H3 {
  margin-bottom: 0.25em; font-size: 1.875rem; letter-spacing: 0;

  @media (max-width: 950px) { & { font-size: 3vw; } }
  @media (max-width: 650px) { & { font-size: 1.875rem; } }
}

#franchise-donations .site-width {
  position: relative; display: flex; justify-content: flex-end;

  @media (max-width: 1000px) { & { flex-direction: column; } }
}

#franchise-donations .site-width .text {
  width: 686px; display: flex; justify-content: center; align-items: center;
  padding: 2.9rem 0; font-weight: 700; font-size: 1.875rem;
  text-transform: uppercase;

  @media (max-width: 1200px) { & { width: 57.2917%; } }
  @media (max-width: 1000px) { & { width: 100%; padding-bottom: 0; } }
  @media (max-width: 600px) { & { font-size: 5vw; } }
}

#franchise-donations .site-width .text .left {
  line-height: 1; letter-spacing: 0.1em; padding-right: 1.0666em;
  border-right: 0.3125rem solid var(--lightestblue); margin-right: 1.0666em;
}

#franchise-donations .site-width .text .left .number {
  font-family: 'Anodyne', sans-serif; font-size: 483.3333%; line-height: 0.5;
  letter-spacing: 0; margin-top: 0.3724em; white-space: nowrap;
}

#franchise-donations .site-width .text .left .number SPAN {
  font-family: 'PTSansPro', sans-serif; font-size: 1.875rem; line-height: 1;
}

#franchise-donations .site-width .text .right {
  font-size: 133.3333%; line-height: 1.5; letter-spacing: 0.15em;
}

#franchise-donations .image {
  position: absolute; top: 0; left: 0; height: 100%; width: 35.7152%;
  background-repeat: no-repeat; background-position: top 1.4rem center; background-size: cover;

  @media (max-width: 1000px) { & { position: static; width: 26.25rem; aspect-ratio: 2 / 1; margin: 0 auto; } }
  @media (max-width: 450px) { & { width: 100%; } }
}

#franchise-getting-started {
  background: url(images/whitelines.webp); padding: 1.75rem 0; font-size: 0.875rem;
  position: relative;
}

#franchise-getting-started .content {
  width: 660px; position: relative; z-index: 3;

  @media (max-width: 700px) { & { width: 100%; } }
}

#franchise-getting-started .content > P { margin: 0 0 1.5em; }

#franchise-getting-started .step {
  display: flex; gap: 0 1.625rem; margin-bottom: 2em;
}

#franchise-getting-started .step .number {
  width: 1.25rem; font-family: 'Anodyne', sans-serif; color: var(--lightblue);
  font-size: 2.5rem; line-height: 1; padding-top: 0.1em;
}

#franchise-getting-started .step .text H3 {
  margin: 0 0 0.1em; font-size: 1.1875rem;
}

#franchise-getting-started .step .text P { margin: 0 0 1.5em; }
#franchise-getting-started .step .text P:last-of-type { margin: 0; }

#franchise-getting-started .image {
  position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 100%;
  background-repeat: repeat-y; background-position: top right;
  background-size: 476px auto;

  @media (max-width: 700px) { & { opacity: 0.1; } }
  @media (max-width: 500px) { & { background-position: top left 0.5rem; } }
}

@media (max-width: 1140px) {
  #franchise-getting-started .image:before {
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background: linear-gradient(to right, transparent, transparent calc(100% - 480px), rgb(252 251 249 / 0.9) calc(100% - 480px), rgb(252 251 249 / 0));
  }
}
@media (max-width: 1000px) { #franchise-getting-started .image:before { background: linear-gradient(to right, transparent, transparent calc(100% - 480px), rgb(252 251 249 / 0.9) calc(100% - 480px), rgb(252 251 249 / 0.5)); } }
@media (max-width: 900px) { #franchise-getting-started .image:before { background: linear-gradient(to right, transparent, transparent calc(100% - 480px), rgb(252 251 249 / 0.9) calc(100% - 480px), rgb(252 251 249 / 0.7)); } }
@media (max-width: 900px) { #franchise-getting-started .image:before { background: linear-gradient(to right, transparent, transparent calc(100% - 480px), rgb(252 251 249 / 0.9) calc(100% - 480px), rgb(252 251 249 / 0.8)); } }
@media (max-width: 700px) { #franchise-getting-started .image:before { display: none; } }

#franchise-contact { padding: 2.5rem 0 1.5rem; font-size: 0.875rem; }

#franchise-contact .book-call {
  font-weight: 700; font-size: 1.125rem; text-transform: uppercase;
}

#franchise-contact .button {
  display: block; margin: 1.5em auto 0; padding: 0.725em 4.65em 0.725em 4.75em;
  cursor: pointer;
}

#contact.franchise { background: url(images/whitelines.webp); }

#contact.franchise .site-width .text { font-size: 1.25rem; }

#contact.franchise .site-width .text H2 { margin-bottom: 0.5em; font-size: 2.5rem; }

#contact.franchise .site-width IMG {
  width: 48%; height: auto; box-sizing: border-box;
  border: 0.375rem solid var(--blue);

  @media (max-width: 600px) { & { width: 100%; } }
}


/* PRODUCTS */
@media (max-width: 1024px) { #submenu.products-menu { font-size: 1.953vw; } }
@media (max-width: 600px) { #submenu.products-menu { font-size: 1.25rem; } }

#woo-index-intro {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 465.8'%3E%3Cpath fill='%23E0E8F3' d='M1230.7,0C1089.9-0.2,1008-1.1,911,71.9s-112,175-223,219s-290.7-60.5-499-18%0AC111.2,288.8,0,352.3,0,352.3l0,113.5h1440L1439.7,0C1439.7,0,1371.5,0.2,1230.7,0z'/%3E%3C/svg%3E") no-repeat top -175px center;
  background-size: cover; position: relative;
  
  @media (max-width: 1200px) { & { background-position: center; } }
}

#woo-index-intro .text {
  width: 47%; padding: 2rem 0 3rem;

  @media (max-width: 700px) { & { width: 100%; padding-bottom: 0; } }
}

#woo-index-intro.noimg .text { width: 100%; }

#woo-index-intro H1 { margin: 0 0 0.4em; letter-spacing: 0.1em; }

#woo-index-intro .image {
  position: absolute; top: 0; right: 0; width: 43.75%; height: 100%;
  background-repeat: no-repeat; background-position: left center;
  background-size: cover;

  @media (max-width: 700px) { & {
    position: static; width: 100%; height: 13.25rem;
    background-position: left 0.5rem top 0.5rem;
  } }
}

.woo-index-cat { position: relative; }

.woo-index-cat.even { background: url(images/whitelines.webp); }

.woo-index-cat .site-width { display: flex; justify-content: flex-end; }
.woo-index-cat.even .site-width { justify-content: flex-start; }

.woo-index-cat .text {
  width: 49.3975%; padding: 7.3em 0; position: relative; z-index: 3;

  @media (max-width: 650px) { & { width: 100%; text-align: right; } }
}

@media (max-width: 650px) {
  .woo-index-cat.even .text { text-align: left; }
}

.woo-index-cat.noimg .text { width: 100%; }

.woo-index-cat H2 { margin: 0 0 0.4em; }

.woo-index-cat .description {
  width: 92%; margin-bottom: 2em;

  @media (max-width: 650px) { & { width: 100%; } }
}

.woo-index-cat .button { padding: 0.725em 1.65em 0.725em 1.75em; }

.woo-index-cat .image {
  position: absolute; z-index: 2; top: 0; left: 0; width: 45%; height: 100%;
  background-repeat: no-repeat; background-position: right center;
  background-size: cover;

  @media (max-width: 650px) { & { opacity: 0.25; } }
}

.woo-index-cat.even .image {
  background-position: left center; left: auto; right: 0;
}

.woo-index-cat.kosher { background: var(--lighterblue); }

.woo-index-cat.kosher .text {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem 5%;
  width: 100%; padding: 2em 0 2em 8.4337%; box-sizing: border-box;

  @media (max-width: 1000px) { & {
    padding: 2em 0; justify-content: space-between;
  } }
}

.woo-index-cat.kosher H2 { width: 100%; margin-bottom: 0; }

.woo-index-cat.kosher .description {
  width: 62%; margin-bottom: 0;

  @media (max-width: 1000px) { & { width: 55%; } }
  @media (max-width: 750px) { & { width: 100%; margin-bottom: 0.75em; } }
}

#woo-index-pages {
  display: flex;

  @media (max-width: 600px) { & { flex-direction: column; } }
}

#woo-index-pages > SECTION {
  width: 50%; box-sizing: border-box; position: relative;

  @media (max-width: 600px) { & { width: 100%; } }
}

#woo-index-bread-care {
  background: var(--lightestblue); padding-right: 6.25vw;
  display: flex; justify-content: flex-end;

  @media (max-width: 600px) { & { padding-right: 2%; } }
  @media (max-width: 450px) { & { text-align: right; } }
}

#woo-index-nutrition {
  background: url(images/whitelines.webp); padding-left: 6.25vw;
  text-align: right;

  @media (max-width: 600px) { & { padding-left: 2%; } }
  @media (max-width: 450px) { & { text-align: left; } }
}

#woo-index-recipes { background: url(images/whitelines.webp); position: relative; }

#woo-index-pages .text {
  width: 315px; padding: 2.5rem 0 3rem; font-size: 0.875rem;
  position: relative; z-index: 3;

  @media (max-width: 770px) { & { width: 40.909vw; } }
  @media (max-width: 600px) { & { width: 70%; } }
  @media (max-width: 450px) { & { width: 98%; } }
}

#woo-index-recipes .text {
  width: 315px; padding: 2.5rem 0 3rem 8.4337%; font-size: 0.875rem;
  position: relative; z-index: 3;

  @media (max-width: 700px) { & { padding-left: 0; } }
  @media (max-width: 530px) { & { width: 100%; } }
}

#woo-index-pages H2, #woo-index-recipes H2 { margin: 0 0 0.25em; }

#woo-index-pages H3, #woo-index-recipes H3 {
  margin: 0 0 0.75em; font-family: 'ButchHMK', cursive; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

#woo-index-pages .button, #woo-index-recipes .button {
  margin-top: 1.5em; padding: 0.725em 1.65em 0.725em 1.75em;
}

#woo-index-pages .image, #woo-index-recipes .image {
  position: absolute; z-index: 2; top: 0; width: 36%; height: 100%;
  background-repeat: no-repeat;

  @media (max-width: 1100px) { & { opacity: 0.25; } }
}

#woo-index-bread-care .image {
  left: 0; background-position: right center; background-size: auto 85%;
}

#woo-index-nutrition .image {
  right: 0; background-position: left center; background-size: cover;
}

#woo-index-recipes .image {
  width: 50% ;right: 0; background-position: left bottom; background-size: auto 95%;

  @media (max-width: 1100px) { & { opacity: 1; } }
  @media (max-width: 530px) { & { opacity: 0.25; } }
}

/* PRODUCTS CATEGORY */
#woo-cat-header {
  position: relative;
  background-image: url(images/category-bread.webp);
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

#woo-cat-header:before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2; background-color: rgb(255 255 255 / 0.9);
}

#woo-cat-header .site-width {
  position: relative; z-index: 3; padding: 2.5rem 0;
  display: flex; align-items: flex-start; gap: 2rem 4.75rem;

  @media (max-width: 600px) { & { flex-direction: column; } }
}

#woo-cat-header H1 { margin: 0; }

.theme-breadsmith.woocommerce .term-description { display: none; }

#woo-cat-content UL:not(.page-numbers) {
  display: flex; flex-wrap: wrap; gap: 2rem 6%;
  margin: 1em 0; padding: 0; list-style-type: none; text-align: center;

  @media (max-width: 800px) { & { gap: 2rem 5%; } }
  @media (max-width: 700px) { & { gap: 2rem 6%; } }
}

#woo-cat-content UL:not(.page-numbers) LI {
  width: 20.5%;

  @media (max-width: 800px) { & { width: 30%; } }
  @media (max-width: 700px) { & { width: 47%; } }
  @media (max-width: 600px) { & { width: 100%; } }
}

#woo-cat-content UL:not(.page-numbers) LI A { color: var(--darkblue); }
#woo-cat-content UL:not(.page-numbers) LI A:hover { color: var(--blue); }

#woo-cat-content UL:not(.page-numbers) LI IMG { max-width: 100%; height: auto; }

#woo-cat-content UL:not(.page-numbers) LI H2 {
  margin: 0; letter-spacing: 0.02em;

  @media (max-width: 1000px) { & { font-size: 3vw; } }
  @media (max-width: 800px) { & { font-size: 3.75vw; } }
  @media (max-width: 700px) { & { font-size: 4.286vw; } }
  @media (max-width: 600px) { & { font-size: 1.875rem; } }
}

#woo-cat-content UL.page-numbers {
  display: flex; justify-content: center; align-items: center;
  margin: 2em 0; padding: 0; list-style-type: none; font-weight: 700;
  font-size: 1.5rem; line-height: 1;

  @media (max-width: 700px) { & { font-size: 3.429vw; } }
}

#woo-cat-content UL.page-numbers LI A,
#woo-cat-content UL.page-numbers LI .current {
  display: flex; justify-content: center; align-items: center;
  width: 2.416em; height: 2.416em; border-radius: 50%; color: var(--darkblue);
}

#woo-cat-content UL.page-numbers LI .current {
  background-color: var(--lightestblue);
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
}

#woo-cat-content UL.page-numbers LI A:hover { color: var(--blue); }

#woo-cat-content UL.page-numbers LI A.prev,
#woo-cat-content UL.page-numbers LI A.next {
  background-color: var(--blue);
  mask: var(--prev) no-repeat center; mask-size: auto 1em;
}

#woo-cat-content UL.page-numbers LI A.next { mask-image: var(--next); }

#woo-cat-content UL.page-numbers LI A.prev:hover,
#woo-cat-content UL.page-numbers LI A.next:hover {
  background-color: var(--darkblue);
}

/* SINGLE PRODUCT */
#woo-single { padding: 1.75rem 0 2.875rem; }

#woo-single .go-back {
  display: inline-flex; gap: 0 0.5em; align-items: center;
  color: var(--darkblue); font-weight: 700; font-size: 1.25rem; line-height: 1;
  letter-spacing: 0.1em;
}

#woo-single .go-back:before {
  content: ''; display: inline-flex; height: 18px; aspect-ratio: 1 / 1;
  background-color: var(--blue); mask: var(--prev) no-repeat center;
}

#woo-single .go-back:hover { color: var(--blue); }
#woo-single .go-back:hover:before { background-color: var(--darkblue); }

#woo-single .product {
  display: flex; justify-content: space-between; align-items: flex-start;

  @media (max-width: 700px) { & { flex-direction: column-reverse; } }
}

#woo-single .product .image {
  width: 36.32%;

  @media (max-width: 700px) { & { width: 100%; } }
}

#woo-single .product .image IMG,
#woo-single .product .image CANVAS { width: 100%; height: auto; }

#woo-single .product .summary {
  width: 58%; font-size: 0.875rem;

  @media (max-width: 700px) { & { width: 100%; padding: 1.5rem 0; font-size: 1rem; } }
}

#woo-single .product .summary H1 { margin: 0 0 0.75em; letter-spacing: 0.1em; }

#woo-single .product .summary H2 { font-size: 1rem; }

#woo-single .product .summary .woocommerce-product-details__short-description P { margin: 0 0 1.5em; }
#woo-single .product .summary .woocommerce-product-details__short-description P:last-of-type { margin-bottom: 2.8em; }

#woo-single .product .summary .additional { margin-top: 1.5rem; }

#woo-single .product .summary #suggested-uses {
  background: var(--lightestblue); padding: 1.43em 1.65em;
  box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
}

#woo-single .product .summary #suggested-uses H2 {
  font-family: 'ButchHMK', cursive; font-weight: 400; font-size: 1.5rem;
  letter-spacing: 0; text-transform: none;
}


/* BREAD CARE */
.breadcare { position: relative; font-size: 0.875rem; }

.breadcare.even { background: url(images/whitelines.webp); }

.breadcare .site-width { display: flex; justify-content: flex-end; }
.breadcare.even .site-width { justify-content: flex-start; }

.breadcare .text {
  width: 49.3975%; padding: 3.3333em 0 1.8333em; position: relative; z-index: 3;

  @media (max-width: 650px) { & { width: 100%; text-align: right; } }
}

@media (max-width: 650px) {
  .breadcare.even .text { text-align: left; }
}

.breadcare.noimg .text { width: 100%; }

.breadcare H2 {
  margin: 0 0 0.75em; font-size: 200%; letter-spacing: 0.05em;
  text-transform: none; color: var(--darkblue);
}

.breadcare .text P { margin: 0 0 1.5em; }

.breadcare .text UL { margin: 0 0 1.5em; padding: 0; list-style-type: none; }

.breadcare .text UL LI { display: flex; }

.breadcare .text UL LI:before { content: '\2022'; margin-right: 0.5em; }

@media (max-width: 650px) {
  .breadcare:not(.even) .text UL LI { flex-direction: row-reverse; }
  .breadcare:not(.even) .text UL LI:before { margin: 0 0 0 0.5em; }
}

.breadcare .text UL LI { padding-bottom: 0.5em; }
.breadcare .text UL LI:last-of-type { padding-bottom: 0; }

.breadcare .image {
  position: absolute; z-index: 2; top: 0; left: 0; width: 45%; height: 100%;
  background-repeat: no-repeat; background-position-x: right;
  background-size: cover;

  @media (max-width: 650px) { & { opacity: 0.25; } }
}

.breadcare.even .image {
  background-position-x: left; left: auto; right: 0;
}


/* NUTRITION */
#nutrition-content {
  position: relative; font-size: 0.875rem; background: url(images/whitelines.webp);
  padding: 3.375rem 0 1.875rem;
}

#nutrition-content .site-width {
  position: relative; z-index: 3; box-sizing: border-box; padding-right: 33.5%;

  @media (max-width: 650px) { & { padding-right: 0; } }
}

#nutrition-content A[href$=".pdf"] {
  display: flex; color: var(--darkblue); font-size: 142.8571%;
  text-decoration: underline;
}

#nutrition-content A[href$=".pdf"]:hover { color: var(--blue); }

#nutrition-content A[href$=".pdf"]:before {
  content: ''; display: inline-flex; height: 1.2em; aspect-ratio: 92 / 71;
  margin-right: 0.25em; background-color: var(--blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5,4.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5c-1.45,0-2.99,0.22-4.28,0.79C1.49,5.62,1,6.33,1,7.14 l0,11.28c0,1.3,1.22,2.26,2.48,1.94C4.46,20.11,5.5,20,6.5,20c1.56,0,3.22,0.26,4.56,0.92c0.6,0.3,1.28,0.3,1.87,0 c1.34-0.67,3-0.92,4.56-0.92c1,0,2.04,0.11,3.02,0.36c1.26,0.33,2.48-0.63,2.48-1.94l0-11.28c0-0.81-0.49-1.52-1.22-1.85 C20.49,4.72,18.95,4.5,17.5,4.5z M21,17.23c0,0.63-0.58,1.09-1.2,0.98c-0.75-0.14-1.53-0.2-2.3-0.2c-1.7,0-4.15,0.65-5.5,1.5V8 c1.35-0.85,3.8-1.5,5.5-1.5c0.92,0,1.83,0.09,2.7,0.28c0.46,0.1,0.8,0.51,0.8,0.98V17.23z'/%3E%3Cpath d='M13.98,11.01c-0.32,0-0.61-0.2-0.71-0.52c-0.13-0.39,0.09-0.82,0.48-0.94c1.54-0.5,3.53-0.66,5.36-0.45 c0.41,0.05,0.71,0.42,0.66,0.83c-0.05,0.41-0.42,0.71-0.83,0.66c-1.62-0.19-3.39-0.04-4.73,0.39 C14.13,10.99,14.05,11.01,13.98,11.01z'/%3E%3Cpath d='M13.98,13.67c-0.32,0-0.61-0.2-0.71-0.52c-0.13-0.39,0.09-0.82,0.48-0.94c1.53-0.5,3.53-0.66,5.36-0.45 c0.41,0.05,0.71,0.42,0.66,0.83c-0.05,0.41-0.42,0.71-0.83,0.66c-1.62-0.19-3.39-0.04-4.73,0.39 C14.13,13.66,14.05,13.67,13.98,13.67z'/%3E%3Cpath d='M13.98,16.33c-0.32,0-0.61-0.2-0.71-0.52c-0.13-0.39,0.09-0.82,0.48-0.94c1.53-0.5,3.53-0.66,5.36-0.45 c0.41,0.05,0.71,0.42,0.66,0.83c-0.05,0.41-0.42,0.7-0.83,0.66c-1.62-0.19-3.39-0.04-4.73,0.39 C14.13,16.32,14.05,16.33,13.98,16.33z'/%3E%3C/svg%3E") no-repeat center;
}

#nutrition-content .image {
  position: absolute; z-index: 2; top: 0; right: 0; width: 37%; height: 100%;
  background-repeat: no-repeat; background: left center; background-size: cover;

  @media (max-width: 650px) { & { opacity: 0.25; } }
}

#nutrition-faq { padding: 3.5rem 0 4rem; }

#nutrition-faq H2 {
  font-size: 2.5rem; letter-spacing: 0.15em; margin-bottom: 1.4em;
}

.faq-content { padding-bottom: 2.5rem; }

.faqs { padding-bottom: 4rem; }

.faqs H2 { margin-bottom: 1em; }

.faqs .question {
  border-bottom: 0.125rem solid var(--blue); padding: 1.625rem 1.5rem;
  box-sizing: border-box;
}

.faqs .question:first-of-type { padding-top: 0; }

.faqs .question .toggle-check { display: none; }

.faqs .question .toggle-check + LABEL {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: bold; font-size: 125%; cursor: pointer;
}

.faqs .question .toggle-check + LABEL:after {
  content: ''; width: 0; height: 0; transition: all 0.2s;
  border-style: solid; border-width: 8px 9px 0 9px;
  border-color: var(--darkblue) transparent transparent transparent;
}

.faqs .question .toggle-check:checked + LABEL:after {
  transform: rotate(180deg);
}

.faqs .question .toggle-check + LABEL + .answer {
  height: 0; padding: 0; opacity: 0; font-size: 0;
  transition: height 0.2s, padding 0.2s, opacity 0.15s;
}

.faqs .question .toggle-check:checked + LABEL + .answer {
  height: auto; padding: 1.5rem 0 0; opacity: 1; font-size: 1rem;
}




/* RECIPES */
@media (max-width: 750px) { #submenu.recipes { font-size: 2.667vw; } }
@media (max-width: 600px) { #submenu.recipes { font-size: 1.25rem; } }
@media (max-width: 500px) { #submenu.recipes { font-size: 4vw; } }

.recipe-header {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  color: var(--white); font-family: 'ButchHMK', cursive; font-size: 1.5rem;
  line-height: 1; letter-spacing: 0; margin-bottom: 3.125rem; padding: 2.8125rem 0;
}

.recipe-header H1 {
  color: var(--white); font-family: 'PTSansPro', sans-serif;
  text-shadow: 0 0 0.4375rem rgb(0 0 0 / 0.5);
}

.recipe-category H2 {
  width: 416px; margin: 0 auto 1em; position: relative;
  font-size: 2.5rem; letter-spacing: 0.05em; text-align: center;

  @media (max-width: 950px) { & { width: 43.789vw; } }
  @media (max-width: 650px) { & { width: 100%; display: flex; align-items: center; gap: 0 1em; white-space: nowrap; } }
  @media (max-width: 450px) { & { gap: 0 0.75em; white-space: wrap; } }
}

.recipe-category H2:before, .recipe-category H2:after {
  content: ''; width: 6.125em; height: 0.1em; background-color: var(--lightestblue);
  position: absolute; top: 50%; left: 0; transform: translateX(-100%);
}

.recipe-category H2:after { left: 100%; transform: none; }

@media (max-width: 950px) {
  .recipe-category H2:before, .recipe-category H2:after { width: 25.789vw; }
}

@media (max-width: 650px) {
  .recipe-category H2:before, .recipe-category H2:after {
    width: 40%; position: static; display: inline-block;
  }
  .recipe-category H2:before { transform: none; }
}

.recipe-links {
  display: flex; flex-wrap: wrap; gap: 2rem 2%; margin-bottom: 5.625rem;
}

.recipe-links .recipe-link {
  width: 49%; display: flex; gap: 0 1.5625rem; color: var(--darkblue);
  border-radius: 0.5rem; box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
  transition: all 0.2s;

  @media (max-width: 750px) { & { width: 100%; } }
}

.recipe-links .recipe-link:hover {
  box-shadow: 0 0 0.4375rem 0 rgb(0 103 166 / 0.36);
}

.recipe-links .recipe-link .image {
  width: 34.1463%; background-repeat: no-repeat; background-position: center;
  background-size: cover; border-radius: 0.5rem 0 0 0.5rem;
}

.recipe-links .recipe-link .text {
  width: 58%; min-height: 8.6875rem; box-sizing: border-box; font-size: 0.875rem;
  padding: 1.6875rem 0;
}

.recipe-links .recipe-link .text H3 { font-size: 1.125rem; letter-spacing: 0.05em; }

.recipe-links .recipe-link .text P { margin: 0 0 1.5em; width: 94%; }
.recipe-links .recipe-link .text P:last-of-type { margin: 0; }

.recipe-row1 {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.75rem 0;

  @media (max-width: 750px) { & { flex-direction: column; } }
}

.recipe-row1 .text {
  width: 46.0413%; font-size: 0.875rem;

  @media (max-width: 750px) { & { width: 100%; } }
}

.recipe-row1.noimg .text { width: 100%; }

.recipe-row1 .text .url { align-items: center; line-height: 1; padding-bottom: 2em; }

.recipe-row1 .text .url IMG { height: 1.2em; width: auto; margin-right: 0.5em; }

.recipe-row1 .image {
  width: 49.2254%; aspect-ratio: 572 / 301;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 750px) { & { width: 100%; } }
}

.recipe-row2 {
  display: flex; justify-content: space-between; gap: 2rem;

  @media (max-width: 780px) { & { flex-direction: column; } }
}

.recipe-row2 .ingredients, .recipe-row2 .instructions {
  box-sizing: border-box; padding: 1.5rem 2rem 1.25rem; font-size: 0.75rem;
  line-height: 1.15; box-shadow: 0 0 0.4375rem 0 rgb(0 0 0 / 0.16);
}

.recipe-row2 .ingredients {
  width: 346px; background: url(images/whitelines.webp);

  @media (max-width: 780px) { & { width: 100%; } }
}

.recipe-row2 .instructions {
  width: calc(100% - 390px);

  @media (max-width: 780px) { & { width: 100%; } }
}

.recipe-row2 .ingredients H2, .recipe-row2 .instructions H2 {
  margin-bottom: 1em; font-size: 150%; letter-spacing: 0.025em;
  text-transform: none;
}

.recipe-row2 .ingredients P, .recipe-row2 .instructions P { margin: 0 0 1.5em; }
.recipe-row2 .ingredients P, .recipe-row2 .instructions P:last-of-type { margin: 0; }

.recipe-print {
  display: flex; justify-content: flex-end; padding: 1rem 0 1.5rem;
}

.recipe-print A {
  display: inline-flex; align-items: center; color: var(--darkblue);
  font-weight: bold; font-size: 1.125rem; line-height: 1;
}

.recipe-print A:before {
  content: ''; display: inline-flex; height: 1.4em; aspect-ratio: 8 / 7;
  mask: var(--print) no-repeat center; background-color: var(--blue);
  margin-right: 0.25em;
}

.recipe-print A:hover { color: var(--blue); }
.recipe-print A:hover:before { background-color: var(--darkblue); }

.print-only { display: none; }

@media print {
  .single-recipes #header-spacer, .single-recipes HEADER,
  .single-recipes #submenu-spacer, .single-recipes #submenu,
  .single-recipes .recipe-row1 .image, .single-recipes .recipe-print,
  .single-recipes FOOTER { display: none; }

  .single-recipes .site-width { width: 100%; }

  .single-recipes .recipe-row1 { padding: 0 0 1rem; }

  .single-recipes .recipe-row1 .text { color: #000000; font-size: 12pt; }

  .single-recipes .recipe-row1 .text H1 {
    color: #000000; font-size: 18pt; text-transform: none; letter-spacing: 0;
  }

  .recipe-row1 P { margin: 0 0 1.5em; }

  .recipe-row2 .ingredients, .recipe-row2 .instructions {
    color: #000000; font-size: 12pt; padding: 0; box-shadow: none;
  }

  .recipe-row2 .ingredients H2, .recipe-row2 .instructions H2 {
    margin: 0 0 0.5em; color: #000000; font-size: 14pt; letter-spacing: 0;
  }

  .single-recipes FOOTER .subfooter .site-width DIV:first-of-type {
    display: block; color: #000000; font-size: 12pt;
  }

  .print-only { display: flex; color: #000000; font-size: 8pt; }

  .print-only.copyright { padding-top: 2em; }
}


/* CONTACT */
.contact-content {
  display: flex; justify-content: space-between; padding-bottom: 3rem;

  @media (max-width: 700px) { & { flex-direction: column; } }
}

.contact-content ARTICLE {
  width: 57%;

  @media (max-width: 700px) { & { width: 100%; } }
}

.contact-content ARTICLE P { margin: 0 0 1.5em; }

.contact-content ARTICLE FORM { margin-top: 3rem; }

.contact-content ARTICLE FORM INPUT[type="submit"] {
  display: block; margin: 1.5em auto; padding: 0.725em 2.9em 0.725em 3em;
  cursor: pointer;
}

.contact-content ASIDE {
  width: 39%; color: var(--blue); font-size: 1.25rem;

  @media (max-width: 700px) { & { width: 100%; margin-top: 2rem; } }
}

.contact-content ASIDE .wp-post-image {
  width: 100%; height: auto; margin-bottom: 1.5rem;
  border: 0.375rem solid var(--blue); box-sizing: border-box;
}

.contact-content ASIDE P { margin: 0 0 1.5em; }

.contact-content ASIDE H3 { margin-bottom: 0.25em; }

.contact-content ASIDE .directions {
  color: var(--darkblue); font-weight: bold; text-transform: uppercase;
}

.contact-content ASIDE .directions:hover { color: var(--blue); }

.contact-content ASIDE .phone { margin-bottom: 0.25em; }

/* JOIN OUR TEAM */
.jobs-content {
  margin-bottom: 3.5rem; position: relative;
  background: url(images/whitelines.webp);
}

.jobs-content .text {
  padding: 3.5rem 0; font-size: 0.875rem;
  box-sizing: border-box; min-height: 356px;

  @media (max-width: 750px) { & { min-height: 0; } }
}

.jobs-content .text > DIV {
  width: 55%;

  @media (max-width: 750px) { & { width: 100%; } }
}

.jobs-content .text P { margin: 0 0 1.5em; }

.jobs-content .text .button {
  margin-top: 0.75em; padding: 0.725em 3.65em 0.725em 3.75em;
}

.jobs-content .image {
  position: absolute; top: 0; right: 0; height: 100%; width: 42.6388%;
  background-repeat: no-repeat; background-position: center; background-size: cover;

  @media (max-width: 750px) { & {
    position: static; width: 100%; height: auto; aspect-ratio: 614 / 356;
  } }
}

.job-form { padding-bottom: 4rem; }

.job-form H2 { letter-spacing: 0.15em; }

.job-form HR {
  margin: 0.75rem 0 2rem; border: 0; height: 0.125rem; background: var(--blue);
  font-size: 0;
}

.positions { padding: 0.25rem 0 5rem; }

.positions .question { padding: 1.25rem 0; }
.positions .question:first-of-type { padding-top: 1.25rem; }

.positions .question .toggle-check + LABEL {
  color: var(--blue); font-size: 1.5rem; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase;
}

.positions .question .toggle-check:checked + LABEL + .answer {
  font-size: 0.875rem; padding: 1.25rem 0 1rem;
}

#apply-now {
  margin-bottom: 0.75em;
  scroll-margin-top: calc(var(--header-height) + var(--submenu-height));
}

.apply-intro {
  display: flex; justify-content: space-between; align-items: flex-start;

  @media (max-width: 600px) { & { flex-direction: column; padding-bottom: 1rem; } }
}

.apply-intro .text {
  width: 59%; font-size: 0.875rem;

  @media (max-width: 600px) { & { width: 100%; } }
}

.apply-intro .text P { margin: 0 0 1.5em; }

.apply-intro .pdf {
  display: inline-flex; align-items: flex-start;
  font-weight: bold; font-size: 1.125rem; line-height: 1;
}

.apply-intro .pdf:before {
  content: ''; display: inline-flex; height: 1.4em; aspect-ratio: 1 / 1;
  mask: var(--download) no-repeat center; background-color: var(--darkblue);
  margin-right: 0.25em;
}

.apply-intro .pdf:hover:before { background-color: var(--blue); }

#jobapp { display: none; }

#jobapp .note {
  font-size: 0.75rem; text-transform: uppercase; margin-bottom: 2rem;
}

#jobapp .radio { margin-bottom: 1.5rem; }

#jobapp .col2 .radio {
  width: 48%;

  @media (max-width: 600px) { & { width: 100%; } }
}

#jobapp .col3 .radio {
  width: 32.3580%; margin-bottom: 2.5rem;

  @media (max-width: 750px) { & { width: 49%; } }
  @media (max-width: 600px) { & { width: 100%; margin-bottom: 1.5rem; } }
}

#jobapp .radio .wpcf7-form-control-wrap { display: block; margin-top: 0.75rem; }

#jobapp .radio .wpcf7-list-item.first { margin-left: 0.25rem; }

#jobapp .to { padding: 0 2em 2.25rem; }

#job2, #job3 { display: none; }

#job2-add, #job3-add {
  display: flex; justify-content: flex-end; align-items: center; width: 10%;
  margin: 0 0 1rem auto; font-weight: bold; font-size: 1.875rem; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}

#job2-add:before, #job3-add:before {
  content: "+"; font-weight: normal; font-size: 150%; margin-right: 0.1em;
}

#jobapp .button { display: block; margin: 1rem auto; }


/* REWARDS */
#rewards-content { position: relative; }

#rewards-content .text {
  width: 49%; padding: 3.25rem 0; color: var(--blue); font-weight: bold;
  font-size: 1.625rem; line-height: 1.1; letter-spacing: 0.15em;
  text-transform: uppercase;

  @media (max-width: 700px) { & { width: 100%; } }
}

#rewards-content .text .logo {
  max-width: 400px; height: auto; margin-bottom: 2rem;

  @media (max-width: 900px) { & { max-width: 96%; } }
  @media (max-width: 700px) { & { max-width: 400px; } }
  @media (max-width: 450px) { & { max-width: 100%; } }
}

#rewards-content .text H1 { font-size: 2.375rem; line-height: 1.1; }

#rewards-content .text H2 {
  margin: 0 0 0.75em; color: var(--darkblue); font-family: 'ButchHMK', cursive;
  font-size: 2rem; letter-spacing: 0; font-weight: normal; text-transform: none;
}

#rewards-content .text P { margin: 0 0 0.5em; }

#rewards-content .text .button {
  margin-top: 1.5rem; padding: 0.725em 2.65em 0.725em 2.75em;
}

#rewards-content .image {
  position: absolute; top: 0; right: 0; height: 100%; width: 49.5%;
  background-repeat: no-repeat; background-position: top center;
  background-size: cover;

  @media (max-width: 700px) { & {
    position: static; width: 100%; aspect-ratio: 1 / 0.5;
  } }
}

#rewards-steps {
  background: var(--lightestblue); padding: 3.25rem 0; text-align: center;
}

#rewards-steps H2 { margin-bottom: 1.75em; padding: 0 2%; }

#rewards-steps .site-width {
  display: flex; justify-content: center; gap: 2rem 11%;

  @media (max-width: 700px) { & { flex-wrap: wrap; } }
}

#rewards-steps .site-width > DIV {
  width: 26%; font-size: 0.875rem;

  @media (max-width: 700px) { & { width: 44.5%; } }
  @media (max-width: 500px) { & { width: 100%; } }
}

#rewards-steps .site-width > DIV H3 { margin-bottom: 1.15em; }

#rewards-steps .site-width > DIV .number {
  width: 3.5rem; margin: 0 auto 2rem; border-radius: 50%; padding: 0.4em 0 0.46em;
  background: var(--darkblue); color: var(--lightestblue); font-weight: bold;
  font-size: 1.875rem; line-height: 1; letter-spacing: 0;
}

#rewards-steps .site-width > DIV P { margin: 0 0 1.5em; }

#rewards-steps .button {
  margin-top: 2.5rem; padding: 0.725em 2.65em 0.725em 2.75em;
}


/* 404 */
.err404 {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 0;

  @media (max-width: 700px) { & { flex-direction: column; } }
}

.err404 IMG {
  width: 350px; height: auto; margin-left: 1rem;

  @media (max-width: 700px) { & { width: 100%; margin: 2rem 0 0; } }
}