/* Charter Oak Provisions — app look for every page.
 * Loaded after each page's own styles, so it rounds and lifts the existing
 * pieces (buttons, cards, forms, dark bands) instead of replacing them, and
 * adds the phone tab bar, the quick contact sheet and page-change motion.
 */

/* ---------- smooth page changes (browsers that support it) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation:vt-out .22s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:vt-in .34s cubic-bezier(.2,.8,.25,1) both }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(14px) } }
.nav{ view-transition-name:site-nav }
.tabbar{ view-transition-name:site-tabs }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ---------- header ---------- */
.nav.stuck{ box-shadow:0 8px 24px -18px rgba(36,31,27,.45) }
@media(min-width:761px){
  .n-links{ background:rgba(255,255,255,.65); border:1px solid var(--stone); border-radius:999px; padding:5px; gap:2px }
  .n-links a{ border:none; border-radius:999px; padding:9px 16px; opacity:.85; transition:background .18s ease, color .18s ease }
  .n-links a:hover{ background:rgba(14,59,42,.07); opacity:1 }
  .n-links a[aria-current]{ background:var(--oak); color:var(--parchment); opacity:1 }
  .n-cta{ border-radius:999px; padding:12px 20px }
}

/* ---------- buttons & surfaces ---------- */
.btn{ border-radius:999px; padding:15px 26px }
.btn:active, .fchip:active, .ctile:active, .pcard:active, .tab:active{ transform:scale(.97) }
.card{ border-radius:22px; transition:transform .22s cubic-bezier(.3,1.4,.5,1), border-color .2s ease, background .2s ease }
.card:hover{ transform:translateY(-4px); border-color:rgba(193,158,66,.6); background:rgba(247,243,234,.09) }
.pillar, .step{ background:#fff; border:1px solid var(--stone); border-radius:20px; padding:22px 22px 24px;
  box-shadow:0 14px 30px -26px rgba(36,31,27,.5) }
.pillar{ padding-top:22px }
.who ul{ background:#fff; border:1px solid var(--stone); border-radius:18px; padding:4px 18px }
.who li:last-child{ border-bottom:none }
.callout{ background:#fff; border:1px solid var(--stone); border-left:4px solid var(--gild); border-radius:16px; padding:16px 20px }
.feat{ background:#fff; border:1px solid var(--stone); border-radius:16px; padding:14px 16px }
.herophoto img{ border-radius:24px; border:none; box-shadow:0 24px 40px -28px rgba(36,31,27,.6) }
.formwrap{ background:#fff; border-radius:26px; box-shadow:0 24px 50px -36px rgba(36,31,27,.55) }
.field input,.field select,.field textarea{ border-radius:14px; background:var(--parchment) }
.field input:focus,.field select:focus,.field textarea:focus{ box-shadow:0 0 0 4px rgba(193,158,66,.25) }
.banner{ border-radius:14px }
.fsignup input{ border-radius:12px }
.fsignup button{ border-radius:12px }

/* dark bands become rounded panels floating on the page */
.sec.dark{ margin:0 clamp(10px,2vw,24px); border-radius:clamp(24px,3vw,36px) }
footer{ border-radius:clamp(24px,3vw,36px) clamp(24px,3vw,36px) 0 0; margin-top:clamp(20px,3vw,36px) }

/* ---------- phone tab bar ---------- */
.tabbar{ display:none }
.n-call{ display:none }
@media(max-width:760px){
  .tabbar{ position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:15;
    display:grid; grid-template-columns:repeat(4,1fr); padding:6px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(231,223,206,.9); border-radius:24px; box-shadow:0 18px 40px -16px rgba(14,59,42,.45) }
  .tab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 7px;
    font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.01em; color:var(--muted);
    text-decoration:none; background:none; border:none; border-radius:18px; cursor:pointer;
    transition:color .2s ease, background .2s ease, transform .15s ease }
  .tab svg{ width:23px; height:23px; transition:transform .3s cubic-bezier(.3,1.6,.5,1) }
  .tab[aria-current]{ color:var(--oak); background:rgba(14,59,42,.08); font-weight:600 }
  .tab[aria-current] svg{ transform:translateY(-1px) scale(1.08) }
  .tab.tab-cta{ color:var(--claret) }
  body{ padding-bottom:calc(86px + env(safe-area-inset-bottom)) }
  footer{ padding-bottom:calc(30px + 76px + env(safe-area-inset-bottom)); margin-bottom:calc(-86px - env(safe-area-inset-bottom)) }
  /* the tab bar replaces the menu button and its drop-down */
  .n-burger, .mobilemenu{ display:none !important }
  .n-call{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--parchment);
    background:var(--oak); box-shadow:0 8px 18px -10px rgba(14,59,42,.7) }
  .n-call svg{ width:19px; height:19px }
  .sec.dark{ margin:0 8px }
}
/* wait for the home page intro to finish */
body.run:not(.ready) .tabbar{ opacity:0; pointer-events:none }
body.ready .tabbar, body:not(.run) .tabbar{ opacity:1; transition:opacity .4s ease }
@media (display-mode:standalone){
  .nav{ padding-top:calc(16px + env(safe-area-inset-top)) }
}

/* ---------- quick contact sheet ---------- */
.qsheet{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(14,59,42,0); transition:background .25s ease }
.qsheet[hidden]{ display:none }
.qsheet.open{ background:rgba(14,59,42,.45) }
.qpanel{ position:relative; width:min(520px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--parchment);
  border-radius:26px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); padding:26px clamp(18px,4vw,30px) 24px;
  transform:translateY(24px) scale(.97); opacity:0; transition:transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease }
.qsheet.open .qpanel{ transform:none; opacity:1 }
.qgrab{ display:none }
.qclose{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:none;
  background:#fff; color:var(--oak); font-size:24px; line-height:1; cursor:pointer }
.qpanel .eyebrow{ color:var(--claret); margin-bottom:10px; margin-right:44px }
.qpanel h2{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,4vw,32px); line-height:1.1; margin:0 0 6px; color:var(--oak) }
.qpanel > p{ margin:0 0 16px; font-size:14.5px; line-height:1.55; color:var(--muted) }
.qquick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px }
.qquick a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:16px;
  font-family:var(--body); font-size:14.5px; font-weight:600; text-decoration:none; color:var(--oak); background:#fff;
  border:1px solid var(--stone); transition:border-color .18s ease, transform .15s ease }
.qquick a:hover{ border-color:var(--oak) }
.qquick a svg{ width:18px; height:18px }
.qform{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.qform label{ display:flex; flex-direction:column; gap:5px; font-family:var(--brand); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted) }
.qform .full{ grid-column:1 / -1 }
.qform input, .qform textarea{ width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--stone); border-radius:14px; padding:12px 14px; letter-spacing:normal; text-transform:none }
.qform textarea{ min-height:96px; resize:vertical }
.qform input:focus, .qform textarea:focus{ outline:none; border-color:var(--gild); box-shadow:0 0 0 4px rgba(193,158,66,.25) }
.qform button{ grid-column:1 / -1; margin-top:4px; font-family:var(--brand); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment); background:var(--oak); border:none; border-radius:999px; padding:16px; cursor:pointer; transition:background .18s ease }
.qform button:hover{ background:var(--claret) }
.qform button:disabled{ opacity:.6; cursor:default }
.qmsg{ grid-column:1 / -1; margin:0; font-size:14px; line-height:1.5; color:var(--oak); background:#fff; border-radius:14px; padding:12px 14px }
.qmsg.err{ color:var(--claret) }
.qdone{ text-align:center; padding:18px 0 6px }
.qdone svg{ width:64px; height:64px; color:var(--oak); animation:qpop .5s cubic-bezier(.3,1.6,.5,1) }
@keyframes qpop{ from{ transform:scale(.4); opacity:0 } }
.qdone h3{ font-family:var(--disp); font-weight:500; font-size:26px; color:var(--oak); margin:12px 0 6px }
.qdone p{ margin:0; color:var(--muted) }
body.q-open{ overflow:hidden }
@media(max-width:760px){
  .qsheet{ align-items:flex-end; padding:0 }
  .qpanel{ width:100%; border-radius:26px 26px 0 0; max-height:92vh; transform:translateY(100%);
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) }
  .qgrab{ display:block; width:44px; height:5px; border-radius:3px; background:var(--stone); margin:-12px auto 14px }
  .qform{ grid-template-columns:1fr }
}

/* the product item card must also sit above the tab bar */
.sheet{ z-index:30 }
@media(max-width:760px){
  .sec.dark > .wrap{ width:calc(100% - 44px) }
}

/* =====================================================================
 * Rich & photographic look (10/27): big food photography on rounded
 * panels, deep oak and gold, real Boar's Head product cut-outs.
 * ===================================================================== */
:root{ --oak-deep:#0A2B1F; --gold-soft:#E2C77E }

/* photo hero */
.phero{ position:relative; overflow:hidden; margin:0 clamp(8px,1.6vw,20px); border-radius:clamp(26px,3.4vw,44px);
  min-height:clamp(520px,80vh,800px); display:flex; align-items:flex-end; color:var(--parchment); isolation:isolate; background:var(--oak-deep) }
.phero.short{ min-height:clamp(380px,56vh,560px) }
.phero-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  animation:kb 16s cubic-bezier(.2,.6,.3,1) both }
@keyframes kb{ from{ transform:scale(1.12) } to{ transform:scale(1) } }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,30,22,.94) 0%, rgba(8,30,22,.78) 38%, rgba(8,30,22,.25) 72%, rgba(8,30,22,.1) 100%),
             linear-gradient(0deg, rgba(8,30,22,.7) 0%, rgba(8,30,22,0) 45%) }
.phero-in{ width:min(92vw,1180px); margin:0 auto; padding:clamp(110px,14vw,150px) 0 clamp(36px,6vw,64px) }
.phero .eyebrow{ color:var(--gold-soft); margin-bottom:20px; max-width:560px }
.phero .eyebrow::after{ background:var(--gold-soft); opacity:.5 }
.phero .h1{ color:var(--parchment); max-width:13ch; font-size:clamp(42px,6.6vw,92px) }
.phero.short .h1{ font-size:clamp(38px,5.6vw,76px); max-width:15ch }
.phero .h1 em{ color:var(--gold-soft) }
.phero .lede{ color:rgba(247,243,234,.84); margin-top:22px; max-width:52ch }
.phero .btnrow{ margin-top:30px }
.phero-in > *{ animation:rise .9s cubic-bezier(.2,.8,.25,1) both }
.phero-in > :nth-child(2){ animation-delay:.08s } .phero-in > :nth-child(3){ animation-delay:.16s }
.phero-in > :nth-child(4){ animation-delay:.24s } .phero-in > :nth-child(5){ animation-delay:.32s } .phero-in > :nth-child(6){ animation-delay:.4s }
@keyframes rise{ from{ opacity:0; transform:translateY(22px) } }
.btn.gold{ box-shadow:0 14px 30px -14px rgba(193,158,66,.7) }
.btn.glass{ border-color:rgba(247,243,234,.55); color:var(--parchment); background:rgba(247,243,234,.08); backdrop-filter:blur(6px) }
.btn.glass:hover{ background:var(--parchment); color:var(--oak) }

/* search pill inside a hero */
.hsearch{ display:flex; align-items:center; gap:10px; max-width:520px; margin-top:28px; padding:6px 6px 6px 20px;
  background:rgba(247,243,234,.96); border-radius:999px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6) }
.hsearch svg{ flex:none; color:var(--oak) }
.hsearch input{ flex:1; min-width:0; border:none; outline:none; background:none; font:16px var(--body); color:var(--ink); padding:12px 0 }
.hsearch button{ flex:none; border:none; border-radius:999px; background:var(--oak); color:var(--parchment); cursor:pointer;
  font-family:var(--brand); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:14px 20px }
.hsearch button:hover{ background:var(--claret) }
.hstats{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:30px; font-size:13.5px; color:rgba(247,243,234,.78) }
.hstats b{ display:block; font-family:var(--disp); font-weight:500; font-size:26px; color:var(--parchment); letter-spacing:-.01em }

/* Boar's Head band */
.bhband{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(26px,5vw,72px); align-items:center }
.bhband .bhlogo{ width:min(260px,70%); height:auto; display:block; margin-bottom:22px }
.bhband .h2{ margin-bottom:16px }
.photo{ position:relative; border-radius:clamp(22px,2.6vw,32px); overflow:hidden; box-shadow:0 30px 60px -36px rgba(36,31,27,.7) }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.25,1) }
.photo:hover img{ transform:scale(1.04) }
.photo.tall{ aspect-ratio:4/5 } .photo.wide{ aspect-ratio:3/2 }
.photo .tag{ position:absolute; left:16px; bottom:16px; background:rgba(247,243,234,.94); color:var(--oak); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:500 }

/* category tiles with real product cut-outs */
.sec.deep{ background:var(--oak-deep); color:var(--parchment); margin:0 clamp(8px,1.6vw,20px); border-radius:clamp(26px,3.4vw,44px) }
.sec.deep .h2{ color:var(--parchment) } .sec.deep .lede{ color:rgba(247,243,234,.76) } .sec.deep .eyebrow{ color:var(--gild) }
.ptiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); margin-top:clamp(28px,4vw,44px) }
.ptile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:4/5; padding:18px; overflow:hidden;
  border-radius:24px; text-decoration:none; color:var(--parchment);
  background:radial-gradient(120% 80% at 50% 30%, #1E5A43 0%, #0F3A2A 55%, #0A2B1F 100%);
  border:1px solid rgba(193,158,66,.22); transition:transform .3s cubic-bezier(.3,1.4,.5,1), border-color .3s ease }
.ptile img{ position:absolute; left:50%; top:44%; width:80%; height:62%; object-fit:contain; transform:translate(-50%,-50%);
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.45)); transition:transform .5s cubic-bezier(.3,1.4,.5,1) }
.ptile:hover{ transform:translateY(-6px); border-color:rgba(226,199,126,.7) }
.ptile:hover img{ transform:translate(-50%,-52%) scale(1.03) }
.ptile b{ font-family:var(--disp); font-weight:500; font-size:clamp(18px,1.8vw,22px); line-height:1.15 }
.ptile span{ font-size:12.5px; color:rgba(247,243,234,.66); margin-top:4px }
.ptile i{ position:absolute; right:18px; bottom:18px; width:34px; height:34px; display:grid; place-items:center; font-style:normal;
  border-radius:50%; background:rgba(247,243,234,.1); color:var(--gold-soft); transition:background .2s ease, color .2s ease }
.ptile:hover i{ background:var(--gild); color:var(--oak-deep) }
.morelink{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; color:var(--gold-soft); text-decoration:none;
  font-family:var(--brand); font-size:12px; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid rgba(226,199,126,.5); padding-bottom:4px }

/* approach: elegant numbered columns */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(30px,4vw,48px) }
.value{ border-top:1px solid var(--gild); padding-top:22px }
.value i{ display:block; font-style:normal; font-family:var(--disp); font-weight:300; font-size:44px; line-height:1; color:var(--gild); margin-bottom:14px }
.value h3{ font-family:var(--disp); font-weight:600; font-size:clamp(18px,1.9vw,22px); margin:0 0 8px; color:var(--oak) }
.value p{ margin:0; font-size:15px; line-height:1.65; color:var(--muted) }

/* photo service cards */
.scards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,44px) }
.scard{ display:flex; flex-direction:column; background:#fff; border-radius:28px; overflow:hidden; border:1px solid var(--stone);
  box-shadow:0 24px 50px -40px rgba(36,31,27,.7); transition:transform .3s cubic-bezier(.3,1.4,.5,1) }
.scard:hover{ transform:translateY(-4px) }
.scard .photo{ border-radius:0; box-shadow:none; aspect-ratio:16/11 }
.scard .sbody{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 }
.scard h3{ font-family:var(--disp); font-weight:600; font-size:22px; margin:0 0 10px; color:var(--oak) }
.scard p{ margin:0 0 18px; font-size:14.5px; line-height:1.65; color:var(--muted) }
.scard a{ margin-top:auto; align-self:flex-start; color:var(--claret); text-decoration:none; font-family:var(--brand); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:3px }

/* full-bleed photo call to action */
.pcta{ position:relative; overflow:hidden; isolation:isolate; margin:0 clamp(8px,1.6vw,20px); border-radius:clamp(26px,3.4vw,44px);
  color:var(--parchment); padding:clamp(70px,10vw,130px) 0 }
.pcta > img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover }
.pcta::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,30,22,.92), rgba(8,30,22,.55) 60%, rgba(8,30,22,.3)) }
.pcta .h2{ color:var(--parchment); max-width:15ch } .pcta .lede{ color:rgba(247,243,234,.82) } .pcta .eyebrow{ color:var(--gold-soft) }

/* about: story and lists */
.story{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,5vw,72px); align-items:start }
.vlist{ list-style:none; margin:0; padding:0; counter-reset:v }
.vlist li{ counter-increment:v; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--stone);
  font-family:var(--disp); font-size:clamp(18px,1.8vw,21px); color:var(--oak) }
.vlist li::before{ content:"0" counter(v); font-family:var(--brand); font-size:12px; letter-spacing:.14em; color:var(--gild) }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,44px) }
.dcard{ background:rgba(247,243,234,.05); border:1px solid rgba(193,158,66,.3); border-radius:26px; padding:clamp(22px,3vw,34px) }
.dcard h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.4vw,28px); margin:0 0 14px; color:var(--parchment) }
.dcard ul{ list-style:none; margin:0; padding:0 }
.dcard li{ padding:12px 0; border-bottom:1px solid rgba(193,158,66,.2); color:rgba(247,243,234,.82); font-size:15px }
.dcard li:last-child{ border-bottom:none }
.hquick{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }

/* products page photo hero: real product cut-outs floating on the right */
.phero.cat{ min-height:clamp(440px,62vh,600px) }
.phero.cat .csearch{ background:rgba(247,243,234,.97); border-color:transparent; box-shadow:0 20px 40px -20px rgba(0,0,0,.6) }
.pfloat{ position:absolute; right:clamp(-40px,2vw,40px); top:50%; width:min(46%,560px); aspect-ratio:1; transform:translateY(-46%); z-index:-1; pointer-events:none }
.pfloat img{ position:absolute; object-fit:contain; filter:drop-shadow(0 26px 24px rgba(0,0,0,.5)); animation:float 7s ease-in-out infinite }
.pfloat img:nth-child(1){ width:52%; left:24%; top:10%; animation-delay:-1s }
.pfloat img:nth-child(2){ width:40%; left:0; top:44%; animation-delay:-3s }
.pfloat img:nth-child(3){ width:38%; right:0; top:46%; animation-delay:-5s }
@keyframes float{ 50%{ transform:translateY(-8px) } }
.phero.cat::before{ background:linear-gradient(100deg, rgba(8,30,22,.97) 0%, rgba(8,30,22,.9) 45%, rgba(8,30,22,.4) 100%) }
.phero.cat::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(45% 60% at 76% 50%, rgba(226,199,126,.22), transparent 70%) }

footer{ background:var(--oak-deep) }

@media(max-width:900px){
  .bhband,.story{ grid-template-columns:1fr }
  .ptiles{ grid-template-columns:repeat(2,1fr) }
  .values,.scards,.duo{ grid-template-columns:1fr }
  .pfloat{ opacity:.3; width:80%; right:-24% }
}
@media(max-width:760px){
  .phero,.sec.deep,.pcta{ margin:0 8px }
  .phero{ min-height:auto }
  .phero-in{ padding-top:clamp(120px,40vw,200px) }
  .phero::before{ background:linear-gradient(0deg, rgba(8,30,22,.96) 0%, rgba(8,30,22,.82) 55%, rgba(8,30,22,.35) 100%) }
  .phero.cat .phero-in{ padding-top:110px }
  .hstats b{ font-size:22px }
  .hsearch button{ padding:13px 14px }
  .ptile{ padding:14px; border-radius:20px } .ptile i{ display:none }
  .sec.deep > .wrap, .pcta > .wrap{ width:calc(100% - 44px) }
}
@media (prefers-reduced-motion:reduce){
  .phero-img,.pfloat img,.phero-in > *{ animation:none }
}
/* tile labels sit on a soft shade so photos never cover them */
.ptile::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:0;
  background:linear-gradient(0deg, rgba(10,43,31,.96) 30%, rgba(10,43,31,0)); pointer-events:none }
.ptile b, .ptile span{ position:relative; z-index:1 }
.ptile img{ top:40%; height:56% }
.btn.gold{ color:var(--oak-deep); font-weight:600 }
@media(max-width:760px){
  .ptile{ aspect-ratio:3/4 }
  .ptile img{ top:36%; height:52%; width:86% }
  .ptile b{ font-size:16px } .ptile span{ font-size:11.5px; line-height:1.35 }
}

/* products page: text + search beside a photo collage */
.mhero{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3.4vw,52px); align-items:center;
  width:min(94vw,1240px); margin:0 auto; padding:clamp(10px,2vw,24px) 0 clamp(28px,4vw,44px) }
.mhero .h1{ font-size:clamp(40px,5.4vw,76px); max-width:12ch }
.mhero .lede{ margin-top:20px; max-width:54ch }
.mhero .csearch{ margin-top:26px }
.mhero-text > *{ animation:rise .9s cubic-bezier(.2,.8,.25,1) both }
.mhero-text > :nth-child(2){ animation-delay:.08s } .mhero-text > :nth-child(3){ animation-delay:.16s } .mhero-text > :nth-child(4){ animation-delay:.24s }
.mosaic{ display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(8px,1.2vw,14px); height:clamp(380px,46vw,560px) }
.mosaic div{ position:relative; overflow:hidden; border-radius:clamp(20px,2.4vw,30px); box-shadow:0 26px 50px -34px rgba(36,31,27,.75);
  animation:tilein .8s cubic-bezier(.2,.9,.3,1.1) both }
.mosaic .m1{ grid-row:1 / 3 } .mosaic .m2{ animation-delay:.12s } .mosaic .m3{ animation-delay:.24s }
.mosaic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kb 18s cubic-bezier(.2,.6,.3,1) both }
@media(max-width:900px){
  .mhero{ grid-template-columns:1fr }
  .mosaic{ order:-1; height:clamp(200px,52vw,320px) }
}

/* category tiles and group headers show a real product photo */
.cart.photo{ background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); box-shadow:inset 0 0 0 1px var(--stone); overflow:hidden; position:relative }
.cart.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.2)) }
.cart.photo.food img{ object-fit:cover; padding:0; filter:none }
.ctile .cart{ width:88px; height:88px; border-radius:24px }
.cgart.photo{ background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); box-shadow:inset 0 0 0 1px var(--stone); overflow:hidden; position:relative; width:46px; height:46px }
.cgart.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box }
.cgart.photo.food img{ object-fit:cover; padding:0 }
@media(max-width:700px){ .ctile .cart{ width:70px; height:70px; border-radius:20px } }
.ctile{ padding:8px 8px 12px }
.ctile .cart{ width:100%; height:118px; border-radius:14px }
.ctile .cart.photo img{ padding:8px 12px }
.ctile .ccount{ z-index:1; top:12px; right:12px; background:rgba(255,255,255,.92) }
@media(max-width:700px){ .ctile{ width:128px } .ctile .cart{ width:100%; height:92px; border-radius:12px } }

/* home: the categories shown in a real-looking deli case */
.dcase{ position:relative; margin-top:clamp(30px,4vw,48px); filter:drop-shadow(0 40px 50px rgba(0,0,0,.45)) }
.dcase-hood{ position:relative; display:flex; justify-content:center; align-items:center; height:54px;
  background:linear-gradient(180deg,#E9ECEC 0%,#B7BDBE 45%,#8C9395 100%); border-radius:18px 18px 4px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.18) }
.dcase-sign{ font-family:var(--brand); font-size:clamp(11px,1.2vw,14px); letter-spacing:.32em; text-transform:uppercase; color:#2B3133;
  text-shadow:0 1px 0 rgba(255,255,255,.7) }
.dcase-light{ position:absolute; left:4%; right:4%; bottom:-7px; height:7px; border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#FFFDF4,#FFF4D6); box-shadow:0 10px 40px 14px rgba(255,236,190,.55) }
.dcase-inside{ position:relative; overflow:hidden; padding:clamp(26px,3vw,40px) clamp(14px,2.4vw,34px) 0;
  background:linear-gradient(180deg,#FFFBF1 0%,#F4ECDB 55%,#E9DEC7 100%);
  border-left:12px solid #A8AFB1; border-right:12px solid #A8AFB1;
  box-shadow:inset 0 30px 60px -30px rgba(255,240,200,.9), inset 0 -20px 40px -20px rgba(0,0,0,.18) }
.dshelf{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,2vw,28px); padding:0 clamp(4px,1vw,14px) 0;
  margin-bottom:clamp(30px,3.6vw,44px) }
/* the glass shelf each row sits on */
.dshelf::after{ content:""; position:absolute; left:-40px; right:-40px; bottom:-14px; height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(200,214,212,.65) 40%, rgba(140,160,158,.35) 100%);
  box-shadow:0 14px 24px -6px rgba(60,50,30,.28); border-top:1px solid rgba(255,255,255,.95) }
.ditem{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-decoration:none;
  height:clamp(150px,16vw,210px) }
.ditem img{ width:100%; height:calc(100% - 34px); object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 10px 8px rgba(60,40,20,.28)); transition:transform .4s cubic-bezier(.3,1.5,.5,1) }
.ditem:hover img{ transform:translateY(-5px) scale(1.02) }
/* little deli tag clipped to the shelf edge */
.dtag{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:-26px;
  min-width:min(132px,92%); padding:5px 12px 6px; background:#fff; border:1px solid #D8CDB4; border-top:3px solid var(--gild);
  border-radius:6px; box-shadow:0 6px 12px -6px rgba(0,0,0,.35); transition:transform .3s cubic-bezier(.3,1.5,.5,1) }
.ditem:hover .dtag{ transform:translateY(-2px) }
.dtag b{ font-family:var(--disp); font-weight:600; font-size:clamp(13px,1.3vw,16px); line-height:1.2; color:var(--oak); text-align:center }
.dtag small{ font-family:var(--brand); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--claret) }
/* curved front glass with a reflection */
.dcase-glass{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 30%,
             rgba(255,255,255,0) 64%, rgba(255,255,255,.12) 72%, rgba(255,255,255,0) 80%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) }
.dcase-base{ position:relative; display:flex; align-items:center; justify-content:center; padding:18px 16px 20px;
  background:linear-gradient(180deg,#B7BDBE 0,#8C9395 8px,#123F2D 8px,#0B2E21 100%); border-radius:4px 4px 18px 18px;
  border-top:1px solid rgba(255,255,255,.6) }
.dcase-base span{ font-family:var(--brand); font-size:clamp(9.5px,1vw,11.5px); letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); text-align:center }
.dcase-base::after{ content:""; position:absolute; left:3%; right:3%; top:8px; height:1px; background:rgba(226,199,126,.45) }
@media(max-width:760px){
  .dshelf{ grid-template-columns:repeat(2,1fr); gap:10px 14px }
  .dcase-inside{ border-width:8px; padding-top:24px }
  .ditem{ height:150px; margin-bottom:22px }
  .ditem:nth-child(n+3){ margin-bottom:0 }
  .dcase-hood{ height:46px }
  .dtag{ min-width:0; width:100% }
}
@media(max-width:760px){
  .ditem:nth-child(-n+2)::after{ content:""; position:absolute; left:-12px; right:-12px; bottom:-14px; height:12px; z-index:-1;
    background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(200,214,212,.65) 40%, rgba(140,160,158,.35) 100%);
    box-shadow:0 12px 20px -6px rgba(60,50,30,.28) }
  .ditem:nth-child(-n+2){ margin-bottom:44px }
}

.mhero .h1{ max-width:none } .nowrap{ white-space:nowrap }

/* product list: sub-categories */
.csubs{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 0 4px }
.schip{ font-family:var(--body); font-size:14px; font-weight:500; color:var(--oak); background:#fff; border:1.5px solid var(--stone);
  border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .15s ease }
.schip b{ font-weight:600; opacity:.55; margin-left:3px }
.schip:hover{ border-color:var(--oak); transform:translateY(-1px) }
.schip.on{ background:var(--claret); border-color:var(--claret); color:#fff }
.schip.on b{ opacity:.8 }
.csubh{ display:flex; align-items:center; gap:10px; margin:22px 0 12px; font-family:var(--brand); font-size:12px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--claret) }
.csubh::after{ content:""; flex:1; height:1px; background:var(--stone) }
.csubh span{ font-family:var(--body); letter-spacing:0; font-size:12px; color:var(--muted); background:var(--stone); border-radius:999px; padding:1px 8px }
.cgroup > .csubh:first-of-type{ margin-top:6px }
.cgsubs{ display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 14px 58px }
.cgsubs button{ font-family:var(--body); font-size:12.5px; color:var(--muted); background:none; border:1px solid var(--stone);
  border-radius:999px; padding:4px 11px; cursor:pointer; transition:color .15s ease, border-color .15s ease }
.cgsubs button:hover{ color:var(--oak); border-color:var(--oak) }
@media(max-width:760px){
  .csubs{ flex-wrap:nowrap; overflow-x:auto; margin:0 -4vw; padding:14px 4vw 4px; scrollbar-width:none }
  .csubs::-webkit-scrollbar{ display:none }
  .schip{ flex:none; font-size:13px; padding:8px 13px }
  .cgsubs{ margin-left:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .cgsubs::-webkit-scrollbar{ display:none }
  .cgsubs button{ flex:none }
}

.dsep{ font-style:normal }
@media(max-width:760px){ .dsep{ display:none } .dline{ display:block; margin-top:4px } .dcase-base span{ line-height:1.5 } }

/* every label on one line */
.csubs, .cgsubs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent) ; mask-image:linear-gradient(90deg,#000 92%,transparent) }
.csubs::-webkit-scrollbar, .cgsubs::-webkit-scrollbar{ display:none }
.schip, .cgsubs button, .fchip, .cf, .cb{ flex:none; white-space:nowrap }
.clabel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-size:clamp(11.5px,1vw,14px) }
.dtag b, .dtag small{ white-space:nowrap }
.dtag b{ font-size:clamp(12px,1.2vw,16px) }
.ptile b{ white-space:nowrap }
@media(max-width:700px){ .clabel{ font-size:12px } .ctile{ width:136px } }

/* sub-category tabs wrap to fit the screen (each tab stays on one line) */
.csubs, .cgsubs{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none }
.csubs{ margin-left:0; margin-right:0; padding:16px 0 4px }
@media(max-width:760px){
  .csubs{ gap:6px; margin:0; padding:12px 0 2px }
  .schip{ font-size:12.5px; padding:7px 11px }
  .cgsubs{ gap:5px }
  .cgsubs button{ font-size:12px; padding:4px 9px }
}

/* products: tighter gap between the list and Business support */
.catalog{ padding-bottom:clamp(16px,2.4vw,28px) }
.sec.bizsup{ padding-top:clamp(28px,3.6vw,48px) }

/* product preview: photo header only rounds its top corners (the shared .photo style rounded all four) */
.shero.photo{ border-radius:24px 24px 0 0; box-shadow:none }
.shero.photo img{ transition:none }
.shero.photo:hover img{ transform:none }

/* sold out (from the warehouse count) */
.pbadges{ flex-wrap:wrap; align-items:center; row-gap:4px }
.cb-out{ display:inline-flex; align-items:center; gap:6px; background:#F6E9E6; color:var(--claret);
  border:1px solid rgba(111,29,43,.16); padding:3px 10px 3px 8px; letter-spacing:.02em }
.cb-out::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--claret); opacity:.75 }
.cb-note{ font-size:11.5px; color:var(--muted); font-weight:500; white-space:nowrap }
.pcard.out .pic{ filter:grayscale(.7); opacity:.65 }
.pcard.out .pname{ color:var(--muted) }
.sout-tag{ position:absolute; right:16px; bottom:14px; z-index:2; background:rgba(36,31,27,.88); color:#fff; border-radius:999px;
  padding:6px 14px; font-family:var(--brand); font-size:11px; letter-spacing:.16em; text-transform:uppercase }
.sout{ margin:-6px 0 16px; padding:10px 14px; border-radius:12px; background:#EFE9DF; color:#4A4440; font-size:14px; line-height:1.5 }

/* 10/27: phone tab bar out, top menu back */
.tabbar{ display:none !important }
@media(max-width:760px){
  body{ padding-bottom:0 }
  footer{ padding-bottom:30px; margin-bottom:0 }
  .n-burger{ display:flex !important }
  .mobilemenu{ display:block !important }
  .n-right{ gap:14px }
  .n-call{ width:38px; height:38px }
}

/* product categories: 3 per row on phones */
@media(max-width:700px){
  .ctiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; margin:0; padding:0;
    -webkit-mask-image:none; mask-image:none }
  .ctile{ width:auto; padding:6px 6px 9px; border-radius:16px }
  .ctile .cart{ width:100%; height:74px; border-radius:11px }
  .ctile .cart.photo img{ padding:5px 7px }
  .clabel{ font-size:11.5px }
  .ctile .ccount{ top:9px; right:9px; font-size:10px; padding:0 6px }
}

@media(max-width:700px){
  .ctiles{ gap:6px }
  .ctile{ padding:5px 4px 8px }
  .clabel{ font-size:10.5px; letter-spacing:-.02em; text-overflow:clip }
}
@media(max-width:380px){ .clabel{ font-size:9.8px } }

@media(max-width:700px){ .ctile{ padding:5px 3px 8px } .clabel{ font-size:10px; letter-spacing:-.03em } }
@media(max-width:380px){ .clabel{ font-size:9.4px } }

/* products: how to use this list */
.howuse{ margin-bottom:clamp(18px,2.6vw,30px); padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px); background:#fff;
  border:1px solid var(--stone); border-radius:24px; box-shadow:0 20px 40px -34px rgba(36,31,27,.6); transition:opacity .25s ease, transform .25s ease }
.howuse.bye{ opacity:0; transform:translateY(-6px) }
.howuse[hidden]{ display:none }
.howuse-head{ display:flex; align-items:center; gap:14px }
.howuse-head .eyebrow{ flex:1; margin:0; color:var(--claret) }
.howuse-close{ flex:none; font-family:var(--body); font-size:13px; font-weight:500; color:var(--oak); background:var(--parchment);
  border:1px solid var(--stone); border-radius:999px; padding:6px 14px; cursor:pointer }
.howuse-close:hover{ border-color:var(--oak) }
.howuse-steps{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px) }
.howuse-steps li{ display:flex; gap:12px; align-items:flex-start }
.hn{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--oak); color:var(--gold-soft);
  font-family:var(--disp); font-size:16px }
.howuse-steps b{ display:block; font-family:var(--disp); font-weight:600; font-size:17px; color:var(--oak); margin:4px 0 4px }
.howuse-steps p{ margin:0; font-size:14px; line-height:1.55; color:var(--muted) }
.howuse-steps a, .howuse-tip a{ color:var(--claret); white-space:nowrap }
.howuse-tip{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--stone); font-size:13.5px; line-height:1.5; color:var(--muted) }
.howuse-tip b{ color:var(--oak) }
@media(max-width:760px){
  .howuse{ border-radius:20px }
  .howuse-steps{ grid-template-columns:1fr; gap:12px }
  .howuse-steps b{ font-size:16px; margin-top:3px }
  .howuse-steps p{ font-size:13.5px }
}

.sout{ border-left:3px solid var(--claret); background:#F6ECEC; color:#4A2A2E }
.sout b{ display:block; color:var(--claret); margin-bottom:2px }
.sout a{ color:var(--claret); white-space:nowrap }

/* how-to as a popup */
.howpop{ position:fixed; inset:0; z-index:35; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(14,59,42,0); transition:background .25s ease }
.howpop[hidden]{ display:none }
.howpop.open{ background:rgba(14,59,42,.5) }
.howpop .howuse{ width:min(620px,100%); max-height:calc(100vh - 32px); overflow:auto; margin:0; border-radius:26px;
  padding:clamp(22px,3vw,32px); box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  transform:translateY(20px) scale(.97); opacity:0; transition:transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease }
.howpop.open .howuse{ transform:none; opacity:1 }
.howuse-head h2{ margin:0; font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.4vw,30px); color:var(--oak) }
.howpop .howuse-steps{ grid-template-columns:1fr; gap:16px; margin-top:20px }
.howpop .howuse-close{ display:block; width:100%; margin-top:20px; padding:15px; font-family:var(--brand); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--parchment); background:var(--oak); border:none; border-radius:999px }
.howpop .howuse-close:hover{ background:var(--claret) }
.howbtn{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--body); font-size:14px; font-weight:500;
  color:var(--oak); background:none; border:none; padding:4px 0; cursor:pointer }
.howbtn span{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--oak); color:var(--gold-soft);
  font-family:var(--disp); font-size:14px; font-weight:600 }
.howbtn:hover{ color:var(--claret) }
@media(max-width:760px){
  .howpop{ align-items:flex-end; padding:0 }
  .howpop .howuse{ width:100%; border-radius:26px 26px 0 0; max-height:90vh; transform:translateY(100%) }
}

/* "Clear filters" as a pill, like the other buttons */
.creset{ font-family:var(--body); font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--claret);
  background:#fff; border:1.5px solid rgba(111,29,43,.35); border-radius:999px; padding:7px 14px 7px 12px; display:inline-flex; align-items:center; gap:6px;
  transition:background .18s ease, border-color .18s ease, color .18s ease }
.creset::before{ content:"\00d7"; font-size:16px; line-height:1 }
.creset:hover{ background:var(--claret); border-color:var(--claret); color:#fff }
@media(max-width:760px){ .creset{ font-size:12.5px; padding:5px 11px 5px 9px } }

/* how-to back on the page (10/27) */
.howinline{ display:block }
.howinline[hidden]{ display:none }
.howinline .howuse{ position:relative }
.howinline .howuse-head h2{ font-size:clamp(20px,2.4vw,24px) }
.howinline .howuse-close{ position:absolute; top:clamp(16px,2.2vw,24px); right:clamp(16px,2.4vw,28px) }
.howinline .howuse-head{ padding-right:90px }

/* phones: a picked category opens as a full-screen popup */
@media(max-width:760px){
  body.catpop{ overflow:hidden }
  body.catpop #catResults{ position:fixed; inset:0; z-index:26; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--parchment); padding:0 4vw 40px; animation:popup .3s cubic-bezier(.2,.9,.3,1.05) }
  @keyframes popup{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
  body.catpop #catResults .cghead{ display:none }
  body.catpop #catResults .cgroup{ padding-top:4px }
  .cpop-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; margin:0 -4vw; padding:12px 4vw;
    padding-top:calc(12px + env(safe-area-inset-top)); background:rgba(247,243,234,.96); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--stone) }
  .cpop-head h2{ flex:1; margin:0; font-family:var(--disp); font-weight:500; font-size:22px; color:var(--oak); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .cpop-back{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--stone); background:#fff; color:var(--oak);
    font-size:20px; line-height:1; cursor:pointer }
  .cpop-head .cgart{ width:36px; height:36px; border-radius:11px }
  body.catpop .csubs{ padding-top:14px }
}

@media(max-width:760px){ body.catpop .page{ z-index:27 } }

/* phone category popup: its own layer on <body> (replaces the nested version) */
.cpop{ position:fixed; inset:0; z-index:28; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--parchment); padding:0 4vw 40px; animation:popup .3s cubic-bezier(.2,.9,.3,1.05) }
.cpop[hidden]{ display:none }
@keyframes popup{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
@media(max-width:760px){
  body.catpop .page{ z-index:1 }
  body.catpop #catResults{ position:static; inset:auto; overflow:visible; padding:0; animation:none; background:none }
  .cpop .cghead{ display:none }
  .cpop .cgroup{ padding-top:4px }
  .cpop .csubs{ padding-top:14px }
}

/* phones: search bar sits right above the categories */
.csearch.in-list{ margin:0 0 14px; max-width:none }

/* desktop: search in the sticky filter bar next to New */
.csearch.in-bar{ flex:1 1 260px; max-width:440px; margin:0; padding:0 8px 0 14px; gap:8px; border-width:1.5px; box-shadow:none }
.csearch.in-bar:focus-within{ transform:none }
.csearch.in-bar svg{ width:18px; height:18px }
.csearch.in-bar input{ font-size:15px; padding:9px 0 }
.csearch.in-bar .cclear{ width:26px; height:26px; font-size:17px }

@media(max-width:760px){ .cpop .cghead{ display:flex } .cpop.cpop-cat .cghead{ display:none } .cpop .cgroup{ padding-top:18px } .cpop.cpop-cat .cgroup{ padding-top:4px } }

@media(max-width:760px){ .cpop .cghead{ display:flex !important; margin-bottom:6px } .cpop.cpop-cat .cghead{ display:none !important } }

/* no single word left alone on a line: balance headings, avoid orphans in text */
h1, h2, h3, h4, .h1, .h2, .lede, .eyebrow, .pname, .dtag b, .scard h3, .value h3, .dcard h3{ text-wrap:balance }
p, li, .howuse-steps p, .sout{ text-wrap:pretty }

/* phones: in a popup, the tabs stick right under the popup header */
@media(max-width:760px){
  .cpop .cpop-head{ top:0 }
  .cpop .csubs{ position:sticky; top:var(--pophead,64px); z-index:2; margin:0 -4vw; padding:10px 4vw 10px;
    background:rgba(247,243,234,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--stone) }
}

/* product preview buttons: one line each */
.sactions .btn{ white-space:nowrap }
@media(max-width:760px){
  .sactions{ flex-direction:column; gap:8px }
  .sactions .btn{ flex:none; width:100%; padding:14px 16px; text-align:center }
}

/* product preview: "More in" as small centered cards, 2 per row on phones */
.snear-h{ text-align:center; display:flex; align-items:center; gap:12px }
.snear-h::before, .snear-h::after{ content:""; flex:1; height:1px; background:var(--stone) }
.snear{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; justify-content:center }
.snear.n1{ grid-template-columns:minmax(0,160px) } .snear.n2{ grid-template-columns:repeat(2,minmax(0,160px)) } .snear.n3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.snear-i{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 8px 12px; border-radius:16px;
  background:#fff; border:1px solid var(--stone); cursor:pointer; transition:border-color .18s ease, transform .18s ease }
.snear-i:hover{ border-color:var(--oak); transform:translateY(-2px) }
.snear-pic{ position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:12px; color:#FFF8EA;
  background:radial-gradient(circle at 50% 42%, #fff 0%, #F1E9D8 100%); overflow:hidden }
.snear-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box }
.snear-name{ font-family:var(--disp); font-weight:600; font-size:13.5px; line-height:1.25; color:var(--oak); text-wrap:balance }
.snear-i i{ font-style:normal; font-size:11.5px; color:var(--muted) }
@media(max-width:760px){
  .snear, .snear.n3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .snear.n1{ grid-template-columns:minmax(0,180px) }
}

/* phones: steady images while scrolling (no card entrance animation, no
   per-image shadow filters, no hover transforms) */
@media(max-width:760px){
  .pcard, .ctile{ animation:none !important; opacity:1 !important; transition:none }
  .pcard:hover, .ctile:hover, .pcard:hover .pic, .ctile:hover .cart{ transform:none }
  .pic.photo img, .cart.photo img, .snear-pic img, .ditem img, .ptile img{ filter:none }
  .pic, .cart, .snear-pic{ transform:translateZ(0); backface-visibility:hidden }
  .cpop, .sheet .spanel{ -webkit-transform:translateZ(0) }
}

/* phones: keep the preview photo painted while scrolling the panel */
@media(max-width:760px){
  .shero.photo img{ filter:none; animation:none }
  .shero, .shero.photo{ transform:translateZ(0); backface-visibility:hidden; isolation:isolate }
  .sheet .spanel{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
}

/* card thumbnails: always fit the whole photo (tall salamis were cropped to their top) */
.pic.photo{ position:relative }
.pic.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; box-sizing:border-box }

.stocknote{ margin:14px 0 0; max-width:54ch; padding-left:12px; border-left:2px solid var(--gild); font-size:13.5px; line-height:1.55; color:var(--muted); font-style:italic }

/* =====================================================================
 * Styling pass (10/27): easier to read, more finished. Same photos.
 * - Bigger, darker body text; labels and buttons readable (less tiny
 *   spaced-out caps)
 * - Headings a touch bolder and tighter
 * - Calmer, consistent spacing between sections
 * ===================================================================== */
:root{ --muted:#4F4740; --text-soft:#5C534A }

/* body text */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
.lede{ font-size:clamp(16.5px,1.35vw,19px); line-height:1.65; color:var(--muted) }
.value p, .scard p, .pillar p, .step p, .feat p, .callout p, .cnote p, .howuse-steps p, footer p{ font-size:16px; line-height:1.65; color:var(--muted) }
.sec.deep .lede, .phero .lede, .pcta .lede{ color:rgba(247,243,234,.88) }
.dcard li{ font-size:16px; color:rgba(247,243,234,.88) }

/* small labels above headings: readable, not hairline */
.eyebrow{ font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.16em; margin-bottom:16px }
.phero .eyebrow{ font-size:13px }

/* headings */
.h1{ font-weight:400; letter-spacing:-.025em }
.phero .h1{ font-weight:400 }
.h2{ font-weight:400; letter-spacing:-.02em; line-height:1.08 }
.value h3, .scard h3{ font-weight:600; letter-spacing:-.01em }

/* buttons: clear words instead of tiny spaced caps */
.btn{ font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.01em; text-transform:none; padding:15px 28px }
.n-cta{ font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.01em; text-transform:none }
.n-links{ font-family:var(--body); font-size:14px; font-weight:500; letter-spacing:.01em; text-transform:none }
.n-links a{ padding:9px 18px }
.morelink{ font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.01em; text-transform:none }
.scard a{ font-family:var(--body); font-weight:600; font-size:14.5px; letter-spacing:.01em; text-transform:none }
.hsearch button, .qform button, .howpop .howuse-close{ font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.01em; text-transform:none }
.sactions .btn{ font-family:var(--body) }
.creset{ font-family:var(--body) }

/* section rhythm: consistent breathing room */
.sec{ padding:clamp(64px,8vw,112px) 0 }
.sec.deep{ padding:clamp(56px,7vw,96px) 0 }
.pcta{ padding:clamp(80px,10vw,136px) 0 }

/* home: "by the numbers" strip */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:clamp(-36px,-3vw,-20px) clamp(8px,1.6vw,20px) 0;
  position:relative; z-index:2; background:#fff; border:1px solid var(--stone); border-radius:24px;
  box-shadow:0 24px 50px -36px rgba(36,31,27,.55) }
.fact{ padding:clamp(18px,2.4vw,28px) clamp(16px,2vw,26px); text-align:center; border-left:1px solid var(--stone) }
.fact:first-child{ border-left:none }
.fact b{ display:block; font-family:var(--disp); font-weight:400; font-size:clamp(28px,3.4vw,42px); line-height:1; color:var(--oak); letter-spacing:-.02em }
.fact span{ display:block; margin-top:8px; font-size:14px; line-height:1.4; color:var(--muted) }
.fact b em{ font-style:normal; color:var(--claret) }

/* closing call to action on About */
.ctaband{ background:#fff; border:1px solid var(--stone); border-radius:32px; padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px);
  text-align:center; box-shadow:0 30px 60px -48px rgba(36,31,27,.6) }
.ctaband .h2{ margin-bottom:12px }
.ctaband .lede{ margin:0 auto }
.ctaband .btnrow{ justify-content:center }

/* contact info card text */
.infopanel p{ font-size:16px; line-height:1.65; color:var(--muted) }
.infopanel h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.4vw,28px); color:var(--oak) }
.formwrap .h2{ font-size:clamp(26px,2.8vw,34px) }
.field label{ font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.08em }
.field input,.field select,.field textarea{ font-size:16px }

/* footer */
footer .fh, footer h5{ font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.16em }
footer a{ font-size:15px }

@media(max-width:900px){
  .facts{ grid-template-columns:repeat(2,1fr) }
  .fact:nth-child(3){ border-left:none }
  .fact:nth-child(n+3){ border-top:1px solid var(--stone) }
}
@media(max-width:760px){
  .lede{ font-size:16.5px }
  .phero .h1{ font-size:clamp(40px,11vw,52px) }
  .phero::before{ background:linear-gradient(0deg, rgba(8,30,22,.97) 0%, rgba(8,30,22,.9) 50%, rgba(8,30,22,.55) 100%) }
  .phero .btnrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .phero .btnrow .btn{ text-align:center; padding:15px 12px }
  .hquick{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .hquick .btn{ text-align:center; padding:15px 10px }
  .facts{ margin:-22px 8px 0; border-radius:20px }
  .fact{ padding:16px 10px }
  .fact span{ font-size:13px }
  .sec{ padding:56px 0 }
  .btn{ font-size:15px }
}
footer p{ color:rgba(247,243,234,.8) }
.fsignup button{ font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.01em; text-transform:none }
.callout b, .cnote b{ font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.16em }
.infopanel h4{ font-family:var(--body) !important; font-weight:600; letter-spacing:.16em !important; font-size:12.5px !important }
.dtag small, .dcase-base span, .dcase-sign{ font-family:var(--body); font-weight:600 }

/* =====================================================================
 * "Pop" pass (10/27): motion, the brand red, bigger headings
 * ===================================================================== */
.h2{ font-size:clamp(34px,4.6vw,64px) }
.phero .h1{ font-size:clamp(46px,7.2vw,104px) }

/* moving ribbon of real products on the brand red */
.ribbon{ position:relative; overflow:hidden; margin:clamp(40px,5vw,64px) clamp(8px,1.6vw,20px) 0; padding:clamp(28px,3.4vw,40px) 0 clamp(30px,3.6vw,44px);
  border-radius:clamp(26px,3.4vw,44px); background:radial-gradient(120% 140% at 50% 0%, #8A2738 0%, #6F1D2B 45%, #4E1320 100%) }
.ribbon-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(14px,2vw,22px) }
.ribbon .eyebrow{ margin:0; color:var(--gold-soft) }
.ribbon .eyebrow::after{ display:none }
.ribbon .morelink{ margin:0; color:#fff; border-color:rgba(255,255,255,.5) }
.rtrack{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.rrow{ display:flex; width:max-content; gap:clamp(18px,2.6vw,36px); animation:ribbon 60s linear infinite }
.rrow img{ height:clamp(120px,14vw,190px); width:auto; flex:none; filter:drop-shadow(0 18px 18px rgba(0,0,0,.4)) }
.ribbon:hover .rrow{ animation-play-state:paused }
@keyframes ribbon{ to{ transform:translateX(-50%) } }

/* "How it works" on the brand red */
.sec.claret{ margin:0 clamp(8px,1.6vw,20px); border-radius:clamp(26px,3.4vw,44px); color:#fff;
  background:linear-gradient(135deg,#7A2131 0%,#6F1D2B 50%,#561623 100%) }
.sec.claret .h2{ color:#fff }
.sec.claret .eyebrow{ color:var(--gold-soft) }
.sec.claret .eyebrow::after{ background:var(--gold-soft) }
.sec.claret .value{ border-top-color:rgba(226,199,126,.6) }
.sec.claret .value i{ color:var(--gold-soft); font-size:64px }
.sec.claret .value h3{ color:#fff; font-size:clamp(20px,2vw,24px) }
.sec.claret .value p{ color:rgba(255,255,255,.85) }

/* the approach values get the same big numbers */
#approach .value i{ font-size:64px }
#approach .value h3{ font-size:clamp(20px,2vw,24px) }

@media(max-width:760px){
  .ribbon, .sec.claret{ margin-left:8px; margin-right:8px }
  .sec.claret > .wrap{ width:calc(100% - 44px) }
  .ribbon-head{ flex-direction:column; align-items:flex-start; gap:8px }
  .rrow{ animation-duration:45s }
  .rrow img{ filter:none }
}
@media (prefers-reduced-motion:reduce){ .rrow{ animation:none } }

@media(max-width:760px){ .ribbon-head{ padding:0 22px } .ribbon .wrap.ribbon-head{ width:auto } }

.sec.claret + .pcta{ margin-top:clamp(16px,2vw,24px) }

/* =====================================================================
 * Depth pass (10/27): texture, layered surfaces, richer buttons
 * ===================================================================== */
.ribbon{ display:none }
/* warm, softly lit page with a fine paper grain */
body{ background-color:var(--parchment);
  background-image:url(/assets/img/grain.png), radial-gradient(1200px 600px at 85% -10%, rgba(193,158,66,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(111,29,43,.05), transparent 60%);
  background-attachment:scroll, fixed, fixed }
/* dark panels get grain + a soft light from the top */
.sec.deep, .sec.claret, footer, .phero, .pcta{ background-image:url(/assets/img/grain.png), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08)) }
.sec.deep{ background-color:var(--oak-deep) }
.sec.claret{ background-color:#6F1D2B }
footer{ background-color:var(--oak-deep) }

/* white sections alternate with the warm page for rhythm */
#approach, .bizsup{ background:#FFFDF8; margin:0 clamp(8px,1.6vw,20px); border-radius:clamp(26px,3.4vw,44px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -50px rgba(36,31,27,.5) }

/* raised, layered cards */
.scard, .formwrap, .howuse, .facts, .ctaband, .feat, .callout, .pcard, .ctile, .dcard{
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(36,31,27,.06), 0 8px 18px -10px rgba(36,31,27,.18), 0 28px 48px -32px rgba(36,31,27,.35) }
.scard:hover, .pcard:hover, .ctile:hover{ box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(36,31,27,.08), 0 16px 30px -14px rgba(36,31,27,.28), 0 40px 60px -36px rgba(36,31,27,.4) }
.photo, .scard .photo{ box-shadow:0 30px 60px -30px rgba(36,31,27,.55), 0 10px 20px -12px rgba(36,31,27,.3) }
.value{ background:rgba(255,255,255,.55); border:1px solid var(--stone); border-top:3px solid var(--gild); border-radius:20px; padding:24px 24px 26px }
.sec.claret .value{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); border-top-color:var(--gold-soft) }

/* richer buttons */
.btn.solid{ background:linear-gradient(180deg,#16523A,#0E3B2A); border-color:#0E3B2A; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -12px rgba(14,59,42,.8) }
.btn.solid:hover{ background:linear-gradient(180deg,#842536,#6F1D2B); border-color:#6F1D2B }
.btn.gold{ background:linear-gradient(180deg,#D6B85E,#B9933A); border-color:#B9933A; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 14px 28px -14px rgba(185,147,58,.9) }
.btn.line{ background:rgba(255,255,255,.6) }
.n-cta{ background:linear-gradient(180deg,#16523A,#0E3B2A); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -10px rgba(14,59,42,.8) }

/* headings: a little gold glow on the italic accent words */
.h1 em, .h2 em{ background:linear-gradient(180deg,#8A2738,#6F1D2B); -webkit-background-clip:text; background-clip:text; color:transparent }
.phero .h1 em, .pcta .h2 em{ background:linear-gradient(180deg,#F0D995,#C9A54E); -webkit-background-clip:text; background-clip:text; color:transparent }

/* thin gold rule under the sticky header for polish */
.nav.stuck{ background:rgba(250,246,238,.9); border-bottom:1px solid rgba(193,158,66,.35) }

@media(max-width:760px){
  #approach, .bizsup{ margin:0 8px }
  #approach > .wrap, .bizsup > .wrap{ width:calc(100% - 44px) }
  body{ background-attachment:scroll, scroll, scroll }
}

#approach, .bizsup{ margin-top:clamp(16px,2vw,24px) !important; margin-bottom:clamp(16px,2vw,24px) }

/* home: Boar's Head section wider, photo landscape */
#boars-head > .wrap{ width:min(94vw,1440px) }
#boars-head .bhband{ grid-template-columns:1fr 1.25fr; gap:clamp(32px,5vw,88px) }
#boars-head .photo.tall{ aspect-ratio:4/3 }
#boars-head .lede{ max-width:60ch }
@media(max-width:900px){ #boars-head .bhband{ grid-template-columns:1fr } }

.stocknote a{ color:var(--claret); font-weight:600 }

/* home: smaller deli case */
.dcase{ max-width:880px; margin-left:auto; margin-right:auto }
.ditem{ height:clamp(120px,11vw,150px) }
.dshelf{ margin-bottom:clamp(26px,3vw,36px) }
.dcase-inside{ padding-top:clamp(20px,2.4vw,30px) }
@media(max-width:760px){ .dcase{ max-width:none } .ditem{ height:120px } }

/* wider content everywhere, matching the Boar's Head section */
.wrap{ width:min(92vw,1400px) }
.phero-in{ width:min(92vw,1400px) }
.story, .bhband{ gap:clamp(32px,5vw,88px) }
.story .lede, .bhband .lede{ max-width:62ch }

/* products: top section matches the wider layout */
.mhero{ width:min(92vw,1400px); grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,88px) }
.mhero .lede, .stocknote{ max-width:62ch }
.mosaic{ height:clamp(400px,40vw,600px) }

/* home: deli case panel, less padding */
#categories.sec.deep{ padding:clamp(36px,4vw,56px) 0 clamp(32px,3.6vw,48px) }
#categories .h2{ margin-bottom:10px }
#categories .dcase{ margin-top:clamp(20px,2.6vw,30px) }
#categories .morelink{ margin-top:18px }
#categories.sec.deep{ max-width:1040px; margin-left:auto !important; margin-right:auto !important }
#categories > .wrap{ width:calc(100% - clamp(40px,6vw,96px)) }
#categories .dcase{ max-width:none }
@media(max-width:1080px){ #categories.sec.deep{ margin-left:clamp(8px,1.6vw,20px) !important; margin-right:clamp(8px,1.6vw,20px) !important } }

/* home hero headline: two lines, each kept whole */
.phero .h1{ max-width:none }
.phero .h1 .hl{ display:block; white-space:nowrap }
.phero .h1{ font-size:clamp(30px,6.2vw,92px) }
@media(max-width:760px){ .phero .h1{ font-size:clamp(26px,8.6vw,40px) } }

/* =====================================================================
 * Realistic deli case (10/27): brushed-steel top, curved front glass,
 * cool LED light, white subway-tile back wall, products on white trays,
 * steel shelf rails with tags, granite base and kick plate
 * ===================================================================== */
.dcase{ filter:drop-shadow(0 46px 40px rgba(0,0,0,.5)) drop-shadow(0 10px 12px rgba(0,0,0,.25)) }

/* brushed stainless top */
.dcase-hood{ height:58px; border-radius:14px 14px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.03) 1px 3px),
    linear-gradient(180deg,#F4F6F6 0%,#D5DADB 30%,#B3BABC 62%,#8E9698 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.25), 0 2px 0 #6E7678 }
.dcase-sign{ color:#3A4143; letter-spacing:.36em; text-shadow:0 1px 0 rgba(255,255,255,.8) }
/* LED strip glowing down into the case */
.dcase-light{ left:2%; right:2%; bottom:-6px; height:6px; border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#FFFFFF,#EAF4FF); box-shadow:0 14px 50px 22px rgba(225,240,255,.55), 0 4px 10px rgba(255,255,255,.9) }

/* interior: tiled back wall, cool light, steel side posts */
.dcase-inside{ border-left:14px solid transparent; border-right:14px solid transparent;
  border-image:linear-gradient(180deg,#C9CED0,#8F9799) 1;
  background:
    linear-gradient(180deg, rgba(235,245,255,.55) 0%, rgba(255,255,255,0) 35%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(160,170,172,.28) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(160,170,172,.22) 55px 56px),
    linear-gradient(180deg,#FBFCFC 0%,#EEF1F1 60%,#E1E5E5 100%);
  box-shadow:inset 0 40px 60px -30px rgba(220,236,255,.9), inset 0 -26px 40px -20px rgba(0,0,0,.2), inset 14px 0 24px -16px rgba(0,0,0,.25), inset -14px 0 24px -16px rgba(0,0,0,.25) }

/* each product sits on a white enamel tray */
.ditem::before{ content:""; position:absolute; left:6%; right:6%; bottom:24px; height:22px; z-index:0; border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%, #FFFFFF 0%, #F1F3F3 55%, #D6DBDC 100%);
  box-shadow:0 6px 8px -4px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.08) }
.ditem img{ position:relative; z-index:1; height:calc(100% - 44px); margin-bottom:8px; filter:drop-shadow(0 8px 6px rgba(40,30,20,.3)) }

/* steel shelf with a front rail */
.dshelf::after{ left:-30px; right:-30px; bottom:-16px; height:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(214,226,232,.7) 30%, rgba(170,184,190,.55) 60%, #9AA3A6 61%, #C7CDCF 75%, #8A9294 100%);
  box-shadow:0 16px 22px -8px rgba(0,0,0,.3) }

/* deli tags: white card on a black stick, like a real case */
.dtag{ border:none; border-top:none; border-radius:3px; padding:6px 12px 7px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 4px 8px -4px rgba(0,0,0,.45) }
.dtag::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:3px 3px 0 0; background:var(--claret) }
.dtag b{ color:#1E2224; margin-top:2px }
.dtag small{ color:var(--claret) }

/* curved front glass with real reflections and a top highlight */
.dcase-glass{ z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 26px),
    linear-gradient(108deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.06) 20%, rgba(255,255,255,0) 30%,
                            rgba(255,255,255,0) 66%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 76%),
    linear-gradient(180deg, rgba(200,225,235,.06), rgba(200,225,235,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 2px 0 rgba(255,255,255,.9) }

/* granite base with a steel bumper and dark kick plate */
.dcase-base{ padding:20px 16px 24px; border-radius:0 0 14px 14px; border-top:none;
  background:
    linear-gradient(180deg,#D7DCDD 0,#9FA7A9 6px,#6E7678 9px, transparent 9px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 2px) 0 0/9px 9px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1px, transparent 2px) 0 0/13px 13px,
    linear-gradient(180deg,#2B2F31 0%,#1C1F20 70%,#111314 100%) }
.dcase-base::after{ top:auto; bottom:6px; left:2%; right:2%; height:3px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent) }
.dcase-base span{ color:#E2C77E }

@media(max-width:760px){
  .dcase-inside{ border-left-width:8px; border-right-width:8px }
  .ditem::before{ bottom:22px; height:16px }
}

/* =====================================================================
 * Deli counter v2: low service counter, sloped display bed (back row
 * raised), curved front glass, dark warm interior, wood + steel front
 * ===================================================================== */
#categories.sec.deep{ max-width:1180px }
.dcase{ filter:drop-shadow(0 40px 36px rgba(0,0,0,.55)) }

/* top: steel counter lip with warm task lights */
.dcase-hood{ height:30px; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,#EEF0F0 0%,#C3C9CB 55%,#8D9597 100%); box-shadow:inset 0 1px 0 #fff, 0 2px 0 #5F6769 }
.dcase-sign{ display:none }
.dcase-light{ left:3%; right:3%; bottom:-5px; height:5px; background:linear-gradient(180deg,#FFF6E0,#FFE9B8);
  box-shadow:0 18px 60px 26px rgba(255,226,160,.38) }

/* interior: dark steel back, warm light, sloped white enamel bed */
.dcase-inside{ border:none; border-image:none; padding:clamp(30px,3.4vw,44px) clamp(20px,3vw,40px) 0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,228,170,.28), transparent 70%),
    linear-gradient(180deg,#3A3F41 0%,#2A2E30 38%, #2A2E30 39%,
      #DCDFDF 39%, #F3F4F2 60%, #FFFFFF 100%);
  box-shadow:inset 0 30px 40px -24px rgba(255,220,150,.35), inset 18px 0 22px -14px rgba(0,0,0,.45), inset -18px 0 22px -14px rgba(0,0,0,.45) }
/* back row raised and a bit smaller, front row overlaps it: one display bed */
.dshelf{ margin:0; padding:0 clamp(10px,2vw,26px) }
.dshelf::after{ display:none }
.dshelf:first-child{ transform:scale(.86); transform-origin:50% 100%; margin-bottom:clamp(-40px,-3vw,-26px); opacity:.97 }
.dshelf:first-child .ditem img{ filter:drop-shadow(0 6px 5px rgba(0,0,0,.35)) brightness(.97) }
.dshelf + .dshelf{ position:relative; z-index:2; padding-bottom:clamp(18px,2vw,26px) }
/* products sit on white platters */
.ditem::before{ bottom:28px; height:20px; left:4%; right:4%;
  background:radial-gradient(ellipse at 50% 30%, #FFFFFF 0%, #EDEFEF 60%, #CDD2D3 100%);
  box-shadow:0 8px 10px -6px rgba(0,0,0,.35) }
/* price-pick tags at the front of each tray */
.dtag{ margin-bottom:-6px; min-width:min(118px,90%); padding:4px 10px 5px; border-radius:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 3px 6px -3px rgba(0,0,0,.5) }
.dtag::before{ height:3px }
.dtag::after{ content:""; position:absolute; left:50%; bottom:-12px; width:2px; height:12px; margin-left:-1px; background:#222 }

/* curved front glass: bent highlight along the top, reflections across */
.dcase-glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0, rgba(255,255,255,.18) 10px, rgba(255,255,255,0) 46px),
    linear-gradient(100deg, rgba(255,255,255,0) 4%, rgba(255,255,255,.22) 9%, rgba(255,255,255,.05) 17%, rgba(255,255,255,0) 26%,
                            rgba(255,255,255,0) 70%, rgba(255,255,255,.14) 74%, rgba(255,255,255,0) 80%),
    linear-gradient(180deg, rgba(190,215,225,.05), rgba(190,215,225,.12));
  border-radius:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) }
.dcase-inside::before{ content:""; position:absolute; left:0; right:0; top:0; height:18px; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)); border-radius:50% 50% 0 0 / 100% 100% 0 0 }

/* front of the counter: steel rail, warm wood panel, steel kick plate */
.dcase-base{ padding:22px 16px 30px; border-radius:0 0 10px 10px;
  background:
    linear-gradient(180deg,#E3E7E8 0,#A9B1B3 7px,#737B7D 10px, transparent 10px),
    linear-gradient(180deg, transparent calc(100% - 14px), #8E9698 calc(100% - 14px), #C5CBCD calc(100% - 9px), #6F777A 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px, rgba(255,255,255,.04) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg,#5B3A26 0%,#4A2F1F 55%,#3B2518 100%) }
.dcase-base::after{ display:none }
.dcase-base span{ display:inline-block; padding:6px 14px; border-radius:3px; color:#3A2A12; font-size:clamp(9.5px,.95vw,11px);
  background:linear-gradient(180deg,#F1DC9A,#C9A54E); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.4) }
.dcase-base .dsep, .dcase-base .dline{ color:inherit }

@media(max-width:760px){
  .dshelf:first-child{ transform:scale(.9); margin-bottom:-18px }
  .dcase-inside{ padding:22px 12px 0 }
  .dcase-base span{ padding:6px 10px }
}
/* back row sits just behind, tags stay visible; plaque is one piece */
.dshelf:first-child{ margin-bottom:4px; transform:scale(.88) }
.dshelf:first-child .dtag{ margin-bottom:-2px }
.dcase-base span span{ display:inline; padding:0; background:none; box-shadow:none; border-radius:0 }
.dcase-inside{ background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,228,170,.28), transparent 70%),
    linear-gradient(180deg,#3A3F41 0%,#2A2E30 30%, #2A2E30 31%, #DCDFDF 31%, #F3F4F2 60%, #FFFFFF 100%) }
@media(max-width:760px){ .dshelf:first-child{ margin-bottom:10px } }

@media(max-width:760px){ .dcase-base span .dline{ display:block; margin-top:2px } .ditem:nth-child(-n+2)::after{ display:none } }

/* =====================================================================
 * Deli counter v3: drawn illustration + real products in perspective
 * ===================================================================== */
.dc2{ position:relative; aspect-ratio:1600/760; margin-top:clamp(20px,2.6vw,30px); container-type:inline-size;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.45)) }
.dc2-bg, .dc2-glass{ position:absolute; inset:0; width:100%; height:100% }
.dc2-glass{ z-index:3; pointer-events:none }
.dc2-items{ position:absolute; inset:0; z-index:2 }
.dc2-i{ position:absolute; left:var(--x); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center;
  text-decoration:none; transition:transform .3s cubic-bezier(.3,1.4,.5,1) }
.dc2-i.back{ bottom:53.5%; width:13.5% }
.dc2-i.front{ bottom:29%; width:17.5% }
.dc2-i img{ width:100%; aspect-ratio:1; object-fit:contain; object-position:50% 100%; position:relative; z-index:1;
  filter:drop-shadow(0 .8cqw .6cqw rgba(40,28,18,.35)) }
.dc2-i.back img{ filter:drop-shadow(0 .6cqw .5cqw rgba(40,28,18,.35)) brightness(.96) }
/* white enamel platter under each product */
.dc2-i::before{ content:""; position:absolute; left:-4%; right:-4%; bottom:calc(var(--tagh) * .55); height:16%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #fff 0%, #EEF0F0 60%, #C9CED0 100%); box-shadow:0 .5cqw .7cqw -.3cqw rgba(0,0,0,.35) }
.dc2-i.back{ --tagh:2.6cqw } .dc2-i.front{ --tagh:3.2cqw }
/* price-pick tag */
.dc2-tag{ position:relative; z-index:2; margin-top:-1.2cqw; padding:.35cqw .9cqw .4cqw; background:#fff; border-radius:2px;
  border-top:.3cqw solid var(--claret); box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 .4cqw .7cqw -.3cqw rgba(0,0,0,.5); white-space:nowrap }
.dc2-tag b{ display:block; font-family:var(--disp); font-weight:600; color:#1E2224; line-height:1.15 }
.dc2-i.back .dc2-tag b{ font-size:clamp(9px,1.2cqw,15px) }
.dc2-i.front .dc2-tag b{ font-size:clamp(10px,1.45cqw,18px) }
.dc2-i:hover{ transform:translateX(-50%) translateY(-.6cqw) }
.dc2-i:hover .dc2-tag{ border-top-color:var(--gild) }
/* brass plaque on the wood front */
.dc2-plaque{ position:absolute; left:50%; top:85.3%; transform:translate(-50%,-50%); z-index:4; white-space:nowrap;
  padding:.7cqw 1.6cqw; border-radius:3px; font-family:var(--body); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(7.5px,.85cqw,12px); color:#3A2A12; background:linear-gradient(180deg,#F1DC9A,#C9A54E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 .3cqw .6cqw rgba(0,0,0,.45) }
.dc2-plaque span{ display:inline }
.dc2-plaque .dsep{ font-style:normal }
@media(max-width:760px){
  .dc2-plaque{ letter-spacing:.12em; padding:5px 9px }
  .dc2-plaque .dsep{ display:none }
  .dc2-plaque .dline{ display:block }
}
/* keep back-row tags clear of the front row */
.dc2-i.back{ bottom:55%; width:12% }
.dc2-i.front{ bottom:26.5%; width:12.6% }
.dc2-i.front img{ aspect-ratio:1/.92 }
@media(max-width:760px){
  .dc2{ aspect-ratio:1600/1250; margin-left:-4px; margin-right:-4px }
  .dc2-i.back{ bottom:57%; width:18% }
  .dc2-i.front{ bottom:29%; width:20% }
  .dc2-i.back .dc2-tag b{ font-size:10px } .dc2-i.front .dc2-tag b{ font-size:11px }
  .dc2-tag{ padding:2px 6px 3px; border-top-width:2px; margin-top:-6px }
  .dc2-plaque{ top:84.5% }
}
/* deli case panel: wider */
#categories.sec.deep{ max-width:1500px }
#categories > .wrap{ width:calc(100% - clamp(40px,6vw,120px)) }

/* product cards: all the same size */
.cgrid{ grid-auto-rows:1fr }
.pcard{ height:100%; min-height:122px; align-items:center }
.pname{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pbody{ justify-content:center; min-height:96px }
.pic, .pic.photo{ width:84px; height:84px; flex:none }
@media(max-width:760px){
  .pcard{ min-height:112px }
  .pic, .pic.photo{ width:76px; height:76px }
  .pbody{ min-height:88px }
}

/* products top on phones: stacked, one clean photo strip, tighter text */
@media(max-width:900px){
  .mhero{ grid-template-columns:1fr; gap:22px; padding-top:6px }
  .mosaic{ order:-1; height:auto; aspect-ratio:16/9; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:8px }
  .mosaic div{ border-radius:18px }
}
@media(max-width:760px){
  .mhero{ width:calc(100% - 32px) }
  .mhero .eyebrow{ margin-bottom:10px }
  .mhero .h1{ font-size:clamp(34px,10vw,44px); max-width:none }
  .mhero .lede{ margin-top:12px; font-size:16px; line-height:1.55 }
  .stocknote{ margin-top:12px; font-size:13px }
  .howuse{ padding:18px }
  .howuse-steps{ gap:10px; margin-top:12px }
  .howuse-steps p{ font-size:13.5px; line-height:1.5 }
  .howuse-steps b{ font-size:15.5px; margin:2px 0 2px }
  .hn{ width:28px; height:28px; font-size:14px }
}

/* filter bar: rounded background */
.cbar{ border-radius:18px; border:1px solid var(--stone); padding:10px 14px; margin-left:-14px; margin-right:-14px }
@media(max-width:760px){ .cbar{ border-radius:14px; padding:8px 10px; margin-left:0; margin-right:0 } }

/* product preview photo: no drop-shadow filter (some browsers paint it as a box
   around the photo); a soft floor shadow sits under the product instead */
.shero.photo img{ filter:none }
.shero.photo::before{ content:""; position:absolute; left:22%; right:22%; bottom:18px; height:26px;
  background:radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0)); pointer-events:none }
.sclose{ z-index:5 }

/* phones: no "How it works" section; Boar's Head logo centered */
@media(max-width:760px){
  .howitworks{ display:none }
  .bhband .bhlogo{ margin-left:auto; margin-right:auto }
  .bhband .btnrow{ justify-content:center }
}

/* deli case greenery: kale lining along the back wall and the front glass,
   plus a sprig tucked beside each platter */
.dc2-greens{ position:absolute; z-index:1; left:9.5%; right:9.5%; pointer-events:none;
  background:url(../img/kale-strip.svg) repeat-x 0 100%/auto 100%; filter:drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.3)) }
.dc2-greens.back{ top:35%; height:8% }
.dc2-greens.front{ left:4.5%; right:4.5%; top:63.6%; height:9% }
.dc2-i::after{ content:""; position:absolute; z-index:0; left:-22%; right:-22%; bottom:calc(var(--tagh) * .45); height:40%;
  background:url(../img/kale-sprig.svg) no-repeat 0 100%/42% auto, url(../img/kale-sprig.svg) no-repeat 100% 100%/42% auto;
  pointer-events:none }
@media(max-width:760px){
  .dc2-greens.back{ top:36.5%; height:6.6% }
  .dc2-greens.front{ top:65%; height:7% }
}

/* products: small "Stock as of ..." line */
.stockasof{ display:flex; align-items:center; gap:7px; margin:10px 0 0 14px; font-size:11.5px; letter-spacing:.03em; color:var(--muted); opacity:.85 }
.stockasof::before{ content:""; width:6px; height:6px; border-radius:50%; background:#3E8A4A; box-shadow:0 0 0 3px rgba(62,138,74,.15) }
.stockasof[hidden]{ display:none }

/* deli case: a few bunches of grapes tucked between the platters */
.dc2-grapes{ position:absolute; z-index:1; height:auto; pointer-events:none; filter:drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.35)) }
.dc2-grapes.b1{ left:50%; bottom:55.5%; width:5.2%; transform:translateX(-50%) rotate(-8deg) }
.dc2-grapes.f1{ left:26%; bottom:27%; width:6.6%; transform:translateX(-50%) rotate(10deg) }
.dc2-grapes.f2{ left:74%; bottom:27%; width:6.6%; transform:translateX(-50%) rotate(-12deg) }
@media(max-width:760px){
  .dc2-grapes.b1{ bottom:57.5%; width:7%; }
  .dc2-grapes.f1, .dc2-grapes.f2{ bottom:29.5%; width:8%; }
}

/* How it works: much less padding */
.sec.howitworks{ padding-top:clamp(28px,3.4vw,44px); padding-bottom:clamp(28px,3.4vw,44px) }

/* deli case: tomatoes on the vine, lemons and a bowl of olives fill the gaps */
.dc2-garnish{ position:absolute; z-index:1; height:auto; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.35)) }
.dc2-garnish.tom{ left:30.75%; bottom:55.5%; width:6.4% }
.dc2-garnish.lem{ left:69.25%; bottom:55.5%; width:6.4% }
.dc2-garnish.oli{ left:50%; bottom:26%; width:10.5% }
@media(max-width:760px){
  .dc2-garnish.tom, .dc2-garnish.lem{ bottom:57.5%; width:8.5% }
  .dc2-garnish.oli{ bottom:29%; width:13% }
}

/* deli case: Fryer's turkey in the middle of the front row */
.dc2-i.front.mid{ width:10.4% }
.dc2-i.front.mid .dc2-tag b{ font-size:clamp(9px,1.25cqw,16px) }
@media(max-width:760px){
}

/* "Seasonal" label */
.cb-season{ background:#E7F0E1; color:#2F5E2B; border:1px solid rgba(47,94,43,.18); letter-spacing:.04em }

/* "Special order" label */
.cb-special{ display:inline-flex; align-items:center; gap:6px; background:#F5EBCF; color:#6B4E10; border:1px solid rgba(193,158,66,.45); padding:3px 10px 3px 8px; letter-spacing:.02em }
.cb-special::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gild) }
.sout.special{ border-left-color:var(--gild); background:#FBF4E2; color:#4A3A1A }
.sout.special b{ color:#7A5A12 }

/* deli case: Fryer's is the featured item, centered on a kale bed with a spotlight */
.dc2-grapes.f1{ left:21% } .dc2-grapes.f2{ left:79% }
.dc2-i.front.mid{ width:14.5%; bottom:26.5% }
.dc2-i.front.mid img{ aspect-ratio:1/.95; filter:drop-shadow(0 1cqw .9cqw rgba(40,28,18,.45)) }
.dc2-i.front.mid::after{ left:-26%; right:-26%; height:40%; bottom:calc(var(--tagh) * .4);
  background:url(../img/kale-sprig.svg) no-repeat 0 100%/40% auto, url(../img/kale-sprig.svg) no-repeat 100% 100%/40% auto,
             url(../img/kale-strip.svg) repeat-x 50% 100%/auto 55% }
.dc2-i.front.mid .dc2-tag{ border-top-color:var(--gild); padding:.45cqw 1.2cqw .5cqw; text-align:center;
  box-shadow:0 0 0 1px rgba(193,158,66,.55), 0 .5cqw 1cqw -.3cqw rgba(0,0,0,.55) }
.dc2-i.front.mid .dc2-tag i{ display:block; font-style:normal; font-family:var(--brand); font-size:clamp(7px,.75cqw,10px);
  letter-spacing:.22em; text-transform:uppercase; color:#9A7414; margin-bottom:.1cqw }
.dc2-i.front.mid .dc2-tag b{ font-size:clamp(10px,1.6cqw,20px) }
.dc2-feature{ position:absolute; z-index:1; left:50%; bottom:24%; width:24%; height:36%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,236,180,.75), rgba(255,236,180,.28) 55%, rgba(255,236,180,0)) }
@media(max-width:760px){
  .dc2-i.front.mid{ width:19%; bottom:29% }
  .dc2-i.front{ width:17% }
  .dc2-i.front.mid::after{ left:-14%; right:-14%; height:34% }
  .dc2-i.front.mid .dc2-tag b{ font-size:11px }
  .dc2-i.front.mid .dc2-tag i{ font-size:7px }
  .dc2-grapes.f1, .dc2-grapes.f2{ display:none }
}

/* deli case: nudge each photo so the product (not its slices) sits over its tag */
.dc2-i img{ transform:translateX(var(--dx,0%)) }

/* deli case: white American beside the yellow under the Deli Cheese tag */
.dc2-i.pair{ width:15% }
.dc2-i.pair img:not(.twin){ z-index:1 }
.dc2-i.pair .twin{ position:absolute; top:0; left:0; z-index:0; width:100%; aspect-ratio:1/.92; object-fit:contain; object-position:50% 100%;
  transform:translateX(-8%) scale(.97); transform-origin:50% 100% }
@media(max-width:760px){ .dc2-i.pair{ width:20% } }

/* deli case on phones: the five front labels were wider than their slots and
   ran into each other ("Deli Chees", "Fryer's Turk"). Smaller type keeps
   each name on one line inside its own slot. */
@media(max-width:760px){
  .dc2-i.front .dc2-tag{ white-space:nowrap; text-align:center; padding:2px 4px 3px }
  .dc2-i.front .dc2-tag b, .dc2-i.front.mid .dc2-tag b{ font-size:clamp(7px,2.4cqw,8.5px); line-height:1.15; letter-spacing:-.01em }
  /* the two-line tags lift the photos; keep the featured turkey clear of the top-shelf labels */
  .dc2-i.front.mid{ width:15.5%; bottom:28.5% }
  .dc2-i.front.mid .dc2-tag i{ font-size:6.5px; letter-spacing:.16em }
}

/* 10/28 tweaks: home intro paragraph wider (left aligned since 11/5); About headline on two
   set lines with room to breathe; deli-case sign always two centred lines. */
.phero .lede.wide{ max-width:68ch; text-align:left; color:#FBF7EE; text-wrap:pretty; text-shadow:0 1px 2px rgba(8,30,22,.75), 0 2px 16px rgba(8,30,22,.85) }
/* keep the shading dark all the way across the intro sentence */
@media(min-width:901px){
  .phero:has(.lede.wide)::before{ background:linear-gradient(100deg, rgba(8,30,22,.95) 0%, rgba(8,30,22,.88) 42%, rgba(8,30,22,.62) 62%, rgba(8,30,22,.14) 88%),
    linear-gradient(0deg, rgba(8,30,22,.72) 0%, rgba(8,30,22,0) 48%) }
}
/* About "Who we are": room for "built around your counter." on one line */
@media(min-width:901px){
  .story{ grid-template-columns:1.45fr .85fr }
  .story .h2{ font-size:clamp(34px,3.6vw,48px) }
  .story .h2 .oneline{ white-space:nowrap }
}
.phero .h1.wide, .phero.short .h1.wide{ max-width:none }
.dc2-plaque{ text-align:center }
.dc2-plaque .dsep{ display:none }
.dc2-plaque .dline{ display:block }

/* 11/5: Customer Login stays on one line in the menu */
.n-links a{ white-space:nowrap }
/* Small tablets: the fuller menu no longer fits, so they use the phone menu button */
@media(min-width:761px) and (max-width:900px){
  .n-links, .n-cta{ display:none }
  .n-burger{ display:flex !important }
  .mobilemenu{ display:block !important; position:fixed; top:0; left:0; right:0; z-index:5; background:rgba(247,243,234,.97); backdrop-filter:blur(10px);
    padding:110px clamp(18px,4vw,44px) 28px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease }
  .mobilemenu.open{ opacity:1; transform:translateY(0); pointer-events:auto }
  .mobilemenu a{ display:block; font-family:var(--brand); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--oak); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--stone) }
  .mobilemenu a[aria-current]{ color:var(--claret) }
  .mobilemenu a.mm-cta{ color:var(--claret); border-bottom:none }
}

/* Keyboard users: first Tab shows this, and it jumps past the menu. */
.skip-link{ position:fixed; left:12px; top:-60px; z-index:10000; padding:10px 16px; background:#0E3B2A; color:#F7F3EA; border-radius:6px; font-weight:600; text-decoration:none }
.skip-link:focus{ top:12px }

/* Chips are at least 44px tall to tap (11/9) */
.schip, .fchip{ min-height:44px; display:inline-flex; align-items:center; justify-content:center }