@charset "utf-8";
/* ==========================================================================
   Summit Fine Meats - summitfinemeats.com
   Written for the flat rebuild; replaces publicstyle.css (24 unused
   @font-face families, one of them an 823 KB TTF of Segoe UI),
   mbcsmbmcp.css, layerslider.css, videolightbox.css, overlay-minimal.css,
   addtohomescreen.css and Window.Metro.css.

   Colours are the ones the CMS's own artwork carries, sampled out of the
   PNGs. The one thing that could NOT be carried over is the brand red on the
   dark bars: #b4252d on #231f20 is 2.52:1, well under WCAG AA. --brand-lite
   is the same hue at 5.45:1 and is what is used on any dark ground.
   ========================================================================== */

:root {
  --ink:         #231f20;   /* the CMS's own bar colour */
  --ink-soft:    #322d2e;
  --slate:       #2f2f2f;   /* chalkboard base, under the slate texture */
  --brand:       #b4252d;   /* logo red - on LIGHT grounds only */
  --brand-dark:  #8f1c23;
  --brand-lite:  #ef6b72;   /* 5.45:1 on --ink; the red for dark grounds */
  --gold:        #c3996b;   /* the tagline script */
  --gold-lite:   #dcb079;
  --chalk:       #f4f1ea;
  --chalk-dim:   #cfc9bd;
  --parchment:   #f2cb86;
  --cream:       #fdf6e8;
  --muted:       #5b5148;

  --wrap:  1140px;
  --gap:   clamp(1rem, 3vw, 2rem);
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .28);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--sans);
  color: var(--ink);
  background-color: #eec482;
  background-image: url("/graphics/52a1e701-70f0-4f7a-b378-9f1272f100f5-1024w.webp");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-wrap: break-word;
}
/* background-attachment:fixed forces a repaint of the whole ground on every
   scroll frame on mobile Safari, and iOS ignores it anyway. */
@media (max-width: 900px), (hover: none) {
  body { background-attachment: scroll; }
}

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--brand-dark); }
a:hover, a:focus-visible { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--brand-lite);
  outline-offset: 2px;
  border-radius: 3px;
}

.sfmVh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sfmSkip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  z-index: 2000; background: var(--brand); color: #fff;
  padding: .7rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; text-decoration: none; transition: transform .15s ease;
}
.sfmSkip:focus { transform: translate(-50%, 0); color: #fff; }

.sfmWrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ------------------------------------------------------------- top strip -- */

.sfmTop { background: var(--ink); color: var(--chalk); font-size: .875rem; }
.sfmTopIn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 40px;
}
.sfmTop p { margin: 0; }
.sfmTopMsg { letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.sfmTopTel a { color: var(--gold-lite); text-decoration: none; font-weight: 700; }
.sfmTopTel a:hover, .sfmTopTel a:focus-visible { color: #fff; text-decoration: underline; }

/* The strip is a nicety; below 760px the space belongs to the masthead, which
   carries the same number as a tappable button. */
@media (max-width: 760px) { .sfmTop { display: none; } }

/* -------------------------------------------------------------- masthead -- */

.sfmHeader {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 4px solid var(--brand);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.sfmMast {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  min-height: 76px; padding-block: .5rem;
}
.sfmLogo { flex: 0 0 auto; display: block; line-height: 0; }
.sfmLogo img {
  width: auto; height: clamp(46px, 8vw, 62px);
  /* the logo art is black type on transparent; it needs lifting off the bar */
  filter: brightness(0) invert(1);
}
.sfmMastRight {
  margin-left: auto; display: flex; align-items: center; gap: .5rem;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------- nav -- */

.sfmNav { margin-left: auto; }
.sfmNavList { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sfmNavItem { position: relative; }

.sfmNavLink {
  display: block; padding: .6rem .85rem;
  color: var(--chalk); text-decoration: none;
  font-weight: 700; font-size: .95rem;
  letter-spacing: .03em; text-transform: uppercase;
  border-radius: 6px; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.sfmNavLink:hover, .sfmNavLink:focus-visible { color: var(--brand-lite); background: rgba(255,255,255,.07); }
.sfmNavLink[aria-current="page"] { color: var(--gold-lite); }
.sfmNavLink[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--brand-lite); border-radius: 2px;
}

.sfmHasSub { display: flex; align-items: center; }
.sfmSubToggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 34px; margin-left: -.5rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--chalk); border-radius: 6px;
}
.sfmSubToggle:hover { color: var(--brand-lite); }
.sfmChev { transition: transform .18s ease; }
.sfmSubToggle[aria-expanded="true"] .sfmChev { transform: rotate(180deg); }

.sfmSub {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 200px; margin: 0; padding: .35rem;
  list-style: none;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--brand);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.sfmSub a {
  display: block; padding: .55rem .75rem; border-radius: 5px;
  color: var(--chalk); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.sfmSub a:hover, .sfmSub a:focus-visible { background: var(--brand); color: #fff; }
.sfmSub a[aria-current="page"] { color: var(--gold-lite); }

/* :focus-within next to :hover is the whole keyboard path with JS off - the
   toggle is focusable while the panel is display:none, so focusing it opens
   the panel and the links inside then hold it open. (:focus-within on the
   links alone can never fire: a display:none subtree is not focusable.) */
.sfmHasSub:hover > .sfmSub,
.sfmHasSub:focus-within > .sfmSub,
.sfmSubToggle[aria-expanded="true"] + .sfmSub { display: block; }

.sfmNavFoot { display: none; }

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

.sfmBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.2rem; min-height: 44px;
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .02em;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sfmBtnPrimary { background: var(--brand); color: #fff; border-color: var(--brand); }
.sfmBtnPrimary:hover, .sfmBtnPrimary:focus-visible { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.sfmBtnGhost { background: transparent; color: var(--chalk); border-color: rgba(244,241,234,.5); }
.sfmBtnGhost:hover, .sfmBtnGhost:focus-visible { background: rgba(244,241,234,.12); border-color: var(--chalk); color: #fff; }

.sfmBtnTel { background: var(--brand); color: #fff; border-color: var(--brand); padding-inline: 1rem; }
.sfmBtnTel:hover, .sfmBtnTel:focus-visible { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.sfmTelIcon { font-size: 1.1em; line-height: 1; }
.sfmBtnCall { background: var(--brand); color: #fff; border-color: var(--brand); width: 100%; }

.sfmCtaRow { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }

/* ------------------------------------------------------------- burger ----- */

.sfmBurger {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 2px solid rgba(244,241,234,.45);
  border-radius: 8px; cursor: pointer; color: var(--chalk);
}
.sfmBurger:hover { border-color: var(--chalk); }
.sfmBurgerBox { display: block; position: relative; width: 22px; height: 16px; margin: 0 auto; }
.sfmBurgerBox span,
.sfmBurgerBox::before,
.sfmBurgerBox::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease, top .2s ease;
}
.sfmBurgerBox::before { top: 0; }
.sfmBurgerBox span    { top: 7px; }
.sfmBurgerBox::after  { top: 14px; }
.sfmBurger[aria-expanded="true"] .sfmBurgerBox::before { top: 7px; transform: rotate(45deg); }
.sfmBurger[aria-expanded="true"] .sfmBurgerBox span    { opacity: 0; }
.sfmBurger[aria-expanded="true"] .sfmBurgerBox::after  { top: 7px; transform: rotate(-45deg); }

/* The backdrop is a CHILD of the sticky header, so it and the drawer resolve
   their z-index inside the SAME stacking context. Put it on <body> instead and
   the header's own context caps the drawer below it, so every tap on a menu
   item lands on the backdrop and the panel "closes when you click anything". */
.sfmBackdrop { display: none; }

/* ---------------------------------------------------------------- hero ---- */

.sfmHero { position: relative; background: var(--ink); line-height: 0; }
.sfmHeroImg {
  display: block; width: 100%; height: clamp(140px, 22vw, 260px);
  object-fit: cover; object-position: center 55%;
}
.sfmHeroTag {
  position: absolute; inset-inline: 0; bottom: clamp(.5rem, 2vw, 1.25rem);
  margin: 0; text-align: center; line-height: 0;
  padding-inline: 1rem;
}
.sfmHeroTag img {
  width: min(90%, 560px); height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.85))
          drop-shadow(0 0 3px rgba(0,0,0,.9));
}

/* ------------------------------------------------------------ chalkboard -- */

.sfmMain { padding-block: clamp(1.5rem, 5vw, 3.25rem); }

/* The CMS drew this as three fixed-width PNGs stacked in a table -
   chalktop (616x21) / chalkmiddle (616x418, 405 KB) / chalkbottom (616x47) -
   which is exactly why the content column could never be fluid. One texture
   plus a radius and a rim glow does the same job at any width. */
.sfmBoard {
  position: relative;
  padding: clamp(1.5rem, 4.5vw, 3.5rem) clamp(1.25rem, 4.5vw, 3.5rem);
  color: var(--chalk);
  background-color: var(--slate);
  background-image: url("/graphics/chalkmiddle-616w.webp");
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6),
              0 0 26px rgba(180, 37, 45, .38),
              0 18px 44px rgba(0,0,0,.35);
}

/* :not(.sfmBtn) matters. `.sfmBoard a` is (0,1,1) and `.sfmBtnPrimary` is
   (0,1,0), so without it the board's link colour wins on every button inside
   the chalkboard and the primary CTA renders gold-on-red at 3.25:1 - a WCAG
   AA failure that looks fine until you measure it. Excluding buttons here lets
   each .sfmBtn* rule apply its own colour. */
.sfmBoard a:not(.sfmBtn) {
  color: var(--gold-lite);
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.sfmBoard a:not(.sfmBtn):hover,
.sfmBoard a:not(.sfmBtn):focus-visible { color: #fff; }

.sfmH1 {
  margin: 0 0 1rem;
  font: 700 clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem)/1.15 var(--serif);
  color: #fff; letter-spacing: .01em;
}
.sfmH1::after {
  content: ""; display: block; width: 74px; height: 3px; margin-top: .7rem;
  background: var(--brand-lite); border-radius: 2px;
}
.sfmH2 {
  margin: 0 0 .85rem;
  font: 700 clamp(1.3rem, 1.1rem + .9vw, 1.75rem)/1.25 var(--serif);
  color: var(--gold-lite);
}
.sfmH3 { margin: 1.5rem 0 .5rem; font: 700 1.05rem/1.3 var(--sans); color: #fff;
         text-transform: uppercase; letter-spacing: .06em; }

.sfmLead { margin: 0 0 1rem; max-width: 68ch; color: var(--chalk); }
.sfmMore { margin: 1.25rem 0 0; font-weight: 700; }

.sfmSection {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(244,241,234,.18);
}

/* ------------------------------------------------------- homepage tease --- */

.sfmTease {
  display: grid; gap: clamp(.85rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.sfmTeaseItem { min-width: 0; }
.sfmTeaseFig { margin: 0; text-align: center; }
.sfmTeaseImg {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  background: #1a1a1a;
}
.sfmTeaseCap {
  display: block; margin-top: .6rem;
  font-size: .875rem; line-height: 1.45;
  font-weight: 600; color: var(--chalk-dim);
  text-wrap: balance;
}

/* ---------------------------------------------------------- visit panel --- */

.sfmVisit {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.sfmAddr { font-style: normal; margin: 0 0 1rem; }
.sfmAddrBig { font: 600 1.15rem/1.5 var(--sans); color: #fff; }

.sfmHours { margin: 0; padding: 0; list-style: none; }
.sfmHours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px dashed rgba(244,241,234,.22);
  font-size: .95rem;
}
.sfmHours li:last-child { border-bottom: 0; }
.sfmHours span:last-child { color: var(--gold-lite); font-weight: 600; white-space: nowrap; }
.sfmHoursPanel {
  background: rgba(0,0,0,.28); border: 1px solid rgba(244,241,234,.15);
  border-radius: 8px; padding: .5rem 1rem;
}

/* -------------------------------------------------------------- reviews --- */

.sfmReviews {
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 1.5rem;
}
.sfmReview {
  min-width: 0; margin: 0;
  display: flex; flex-direction: column;
  padding: 1.35rem 1.35rem 1.1rem;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(244,241,234,.15);
  border-left: 4px solid var(--brand-lite);
  border-radius: 8px;
}
.sfmReview blockquote { margin: 0; flex: 1 1 auto; }
.sfmReview blockquote p { margin: 0; }
.sfmReview blockquote p::before { content: "\201C"; }
.sfmReview blockquote p::after  { content: "\201D"; }
.sfmReview figcaption {
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid rgba(244,241,234,.15);
  font-size: .9rem; font-weight: 700; color: var(--gold-lite);
}
.sfmReview figcaption a { color: var(--gold-lite); }

/* ------------------------------------------------------------- products --- */

.sfmProds {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.sfmProd {
  min-width: 0;                 /* a grid item's default min-width is its
                                   min-CONTENT width, which will not shrink */
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(244,241,234,.15);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
}
.sfmProdFig { margin: 0; display: flex; flex-direction: column; height: 100%; }
.sfmProdImg {
  display: block; width: 100%;
  /* the twelve sources run from 366x366 to 2448x3264; without a fixed box a
     portrait photo sets a taller row and drags its neighbours' captions out
     of line */
  aspect-ratio: 4 / 3; object-fit: cover;
  background: #1a1a1a;
}
.sfmProdCap {
  margin: 0; padding: .9rem 1rem 1.1rem;
  font-size: .95rem; font-weight: 600; color: var(--chalk);
}

.sfmRetail { scroll-margin-top: 120px; }

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

.sfmContact {
  display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start; margin-top: 1.5rem;
}
@media (max-width: 800px) { .sfmContact { grid-template-columns: minmax(0, 1fr); } }

.sfmContactAside { scroll-margin-top: 120px; }

.sfmForm { margin: 0; }
.sfmField { margin: 0 0 1.1rem; }
.sfmField label {
  display: block; margin-bottom: .35rem;
  font-weight: 700; font-size: .9rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--chalk);
}
/* --brand-lite is 4.47:1 on the chalkboard - tuned against the darker --ink
   bars, where it is 5.45. The asterisk is the one place that red sits on
   --slate, so it gets the next step up (5.02) rather than dragging the whole
   token lighter. */
.sfmReq { color: #f27a80; }
.sfmField input,
.sfmField textarea {
  display: block; width: 100%; max-width: 100%;
  padding: .7rem .85rem; min-height: 46px;
  font: inherit; color: var(--ink);
  background: var(--cream);
  border: 2px solid transparent; border-radius: 8px;
}
.sfmField textarea { min-height: 150px; resize: vertical; }
.sfmField input:focus, .sfmField textarea:focus {
  outline: none; border-color: var(--brand-lite);
  box-shadow: 0 0 0 3px rgba(239,107,114,.35);
}
.sfmHint { margin: .3rem 0 0; font-size: .85rem; color: var(--chalk-dim); }

/* Off-screen, tabindex -1, autocomplete off. A person never fills it in. */
.sfmHp {
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.sfmMsg {
  margin: 0 0 1.25rem; padding: 1rem 1.15rem;
  border-radius: 8px; border-left: 4px solid;
  background: rgba(0,0,0,.35); color: var(--chalk);
}
.sfmMsgOk  { border-left-color: #6ac47a; }
.sfmMsgErr { border-left-color: var(--brand-lite); }

.sfmMap {
  position: relative; margin-top: 1rem;
  aspect-ratio: 16 / 9; max-height: 460px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.5);
}
.sfmMap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sfmNotFound { margin: 1.25rem 0 0; padding-left: 1.2rem; }
.sfmNotFound li { margin-bottom: .4rem; font-weight: 600; }

/* --------------------------------------------------------------- footer --- */

.sfmFooter {
  background: var(--ink); color: var(--chalk);
  border-top: 4px solid var(--brand);
  margin-top: clamp(2rem, 6vw, 4rem);
}
.sfmFootGrid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-block: clamp(2rem, 5vw, 3rem);
}
.sfmFootCol { min-width: 0; }
.sfmFootHead {
  margin: 0 0 .85rem;
  font: 700 1rem/1.3 var(--sans);
  text-transform: uppercase; letter-spacing: .1em; color: var(--gold-lite);
}
.sfmFootLead { margin: 0 0 .6rem; font-size: .9rem; color: var(--chalk-dim); }
.sfmFooter .sfmAddr { color: var(--chalk); }
.sfmFootLink { color: var(--chalk); font-weight: 600; text-decoration: none; }
.sfmFootLink:hover, .sfmFootLink:focus-visible { color: var(--brand-lite); text-decoration: underline; }
.sfmFooter p { margin: 0 0 .5rem; }
.sfmFootNav { margin: 0; padding: 0; list-style: none; }
.sfmFootNav li { margin-bottom: .45rem; }
.sfmFootNav a { color: var(--chalk); text-decoration: none; font-weight: 600; }
.sfmFootNav a:hover, .sfmFootNav a:focus-visible { color: var(--brand-lite); text-decoration: underline; }

.sfmFootBase {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(244,241,234,.15);
  font-size: .85rem; color: var(--chalk-dim);
}
.sfmFootBase p { margin: 0; }

/* ==========================================================================
   Phone / small tablet. Everything above is the wide layout; from here the
   nav becomes a drawer and the two-up rows stack.
   ========================================================================== */

@media (max-width: 900px) {

  .sfmBurger { display: block; }
  .sfmTelText { display: none; }        /* icon-only call button keeps the row
                                           on one line down to 320px */
  .sfmBtnTel { padding-inline: 0; width: 46px; }
  .sfmTelIcon { font-size: 1.35em; }

  .sfmMast { min-height: 66px; }

  .sfmNav {
    position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 120;
    width: min(88vw, 340px);
    margin: 0; padding: 5.25rem 1.25rem 2rem;
    background: var(--ink);
    border-left: 4px solid var(--brand);
    box-shadow: -12px 0 34px rgba(0,0,0,.5);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .24s ease;
    visibility: hidden;
  }
  .sfmNav.sfmNavOpen { transform: translateX(0); visibility: visible; }

  .sfmNavList { flex-direction: column; align-items: stretch; gap: 0; }
  .sfmNavItem { border-bottom: 1px solid rgba(244,241,234,.14); }
  .sfmNavLink {
    padding: .9rem .25rem; font-size: 1.05rem; border-radius: 0;
    white-space: normal;
  }
  .sfmNavLink[aria-current="page"]::after { display: none; }
  .sfmNavLink[aria-current="page"] { color: var(--gold-lite); }

  .sfmHasSub { flex-wrap: wrap; justify-content: space-between; }
  .sfmHasSub > .sfmNavLink { flex: 1 1 auto; }
  .sfmSubToggle { width: 44px; height: 44px; margin: 0; flex: 0 0 auto; }

  /* In the drawer the submenu is an inline disclosure, not a dropdown, so the
     desktop hover/focus-within rules must not open it here. */
  .sfmSub {
    position: static; display: none;
    flex: 1 0 100%;
    min-width: 0; margin: 0 0 .5rem; padding: 0 0 0 .9rem;
    background: none; border: 0; border-left: 2px solid var(--brand);
    border-radius: 0; box-shadow: none;
  }
  .sfmHasSub:hover > .sfmSub { display: none; }
  .sfmHasSub:focus-within > .sfmSub,
  .sfmSubToggle[aria-expanded="true"] + .sfmSub { display: block; }
  .sfmSub a { padding: .65rem .5rem; }

  .sfmNavFoot { display: block; margin-top: 1.5rem; }
  .sfmNavAddr {
    margin: 1rem 0 0; font-size: .9rem; line-height: 1.5;
    color: var(--chalk-dim); text-align: center;
  }

  .sfmBackdrop {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(0,0,0,.55);
    opacity: 0; transition: opacity .24s ease;
  }
  .sfmBackdrop[hidden] { display: none; }
  .sfmBackdrop.sfmBackdropOn { opacity: 1; }

  /* The board is the page at this width; the rim glow reads as a smudge. */
  .sfmBoard { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 26px rgba(0,0,0,.35); }
}

@media (max-width: 560px) {
  .sfmWrap { padding-inline: 1rem; }
  .sfmBoard { border-radius: 8px; }
  .sfmTease { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfmProds { grid-template-columns: minmax(0, 1fr); }
  .sfmReviews { grid-template-columns: minmax(0, 1fr); }
  .sfmCtaRow .sfmBtn { flex: 1 1 100%; }
  .sfmHours li { flex-wrap: wrap; gap: 0 1rem; }
}

@media print {
  .sfmTop, .sfmHeader, .sfmHero, .sfmBackdrop, .sfmCtaRow { display: none !important; }
  body { background: #fff; color: #000; }
  .sfmBoard { background: none; color: #000; box-shadow: none; padding: 0; }
  .sfmH1, .sfmH2, .sfmH3 { color: #000; }
}

/* the CMS's own "View Map | Call Us" pair, kept at the top of the contact page */
.sfmQuick { margin: -.25rem 0 1rem; font-weight: 700; }