/* everything foodservice — prototype stylesheet */
:root{
  /* Navy & royal blue (Steve, 18 Oct; was forest & green). The names stay — --forest is the dark
     brand colour, --green the button/link colour — so nothing that reads them had to change. */
  --forest:#0B2545; --forest-2:#133A6B; --green:#1F6FD6; --green-dk:#1A5DB5;
  --tint:#EAF2FC; --tint-2:#D9E6F8;
  --ink:#101828; --body:#3D4656; --muted:#6B7689; --faint:#98A2B3;
  --line:#E3E7EE; --line-2:#D0D7E2; --surface:#FFFFFF; --canvas:#F6F8FB;
  --amber:#B7791F; --amber-bg:#FDF6E7;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 14px rgba(11,37,69,.08);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- utility bar ---------- */
.util{background:var(--forest);color:#C9D6EA;font-size:12.5px}
.util .wrap{display:flex;align-items:center;gap:16px;height:38px}
.util .dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex:0 0 auto}
.util .spacer{margin-left:auto}
.util a{color:#fff;font-weight:500}
.util a:hover{color:var(--green)}

/* ---------- header ---------- */
.hdr{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand svg{height:30px;width:auto;display:block}
/* ⚠ Always .hdr .search, never a bare .search (8 Oct): WordPress puts class="search" on <body> on the
   results page, so .search{display:flex} turned the whole page into one row and search looked broken. */
.hdr .search{flex:1;max-width:620px;display:flex;position:relative}
.hdr .search input{width:100%;height:46px;border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:0 46px 0 42px;font:inherit;font-size:14px;background:var(--canvas);color:var(--ink)}
.hdr .search input:focus{outline:none;border-color:var(--green);background:#fff}
.hdr .search .ic{position:absolute;display:flex;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}
.hdr .search .go{position:absolute;right:6px;top:6px;height:34px;padding:0 14px;border:0;border-radius:8px;
  background:var(--forest);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:9px;padding:10px 18px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dk)}
.btn-forest{background:var(--forest);color:#fff}
.btn-forest:hover{background:var(--forest-2)}
.btn-ghost{background:transparent;color:var(--forest);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-dk)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-block{width:100%;justify-content:center}

/* ---------- category nav ---------- */
.catnav{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:50}
.catnav .wrap{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none}
.catnav .wrap::-webkit-scrollbar{display:none}
.catnav a{display:flex;align-items:center;gap:6px;padding:13px 10px;font-size:13.5px;font-weight:500;
  color:var(--body);white-space:nowrap;border-bottom:2.5px solid transparent}
.catnav a:hover{color:var(--forest);border-bottom-color:var(--green)}
.catnav a.on{color:var(--forest);font-weight:600;border-bottom-color:var(--green)}
.catnav a.soon{color:var(--faint)}
.catnav .tag{font-size:10px;background:var(--canvas);color:var(--faint);padding:2px 5px;border-radius:4px}

/* ---------- generic ---------- */
.sec{padding:44px 0}
.sec-sm{padding:30px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:21px;margin:0;letter-spacing:-.015em}
.sec-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.sec-head .more{font-size:13.5px;font-weight:600;color:var(--green-dk);white-space:nowrap}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dk);margin:0 0 6px}
.crumbs{font-size:12.5px;color:var(--muted);padding:16px 0}
.crumbs a:hover{color:var(--green-dk)}
.crumbs span{margin:0 7px;color:var(--line-2)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--forest) 0%,#071A33 100%);color:#fff;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:52px;padding-bottom:52px}
.hero h1{font-size:34px;line-height:1.18;margin:0 0 12px;letter-spacing:-.025em;max-width:35ch}
.hero p.lead{font-size:16px;color:#B8C9E2;margin:0 0 26px;max-width:72ch}
.hero .rings{position:absolute;right:-70px;top:-40px;width:420px;opacity:.06;z-index:1}
.hero-search{display:flex;max-width:560px;background:#fff;border-radius:12px;padding:6px;gap:6px}
.hero-search input{flex:1;border:0;background:transparent;padding:0 14px;font:inherit;font-size:15px;color:var(--ink)}
.hero-search input:focus{outline:none}
.stats{display:flex;gap:32px;margin-top:30px;flex-wrap:wrap}
.stats b{display:block;font-size:24px;letter-spacing:-.02em}
.stats span{font-size:12.5px;color:#9DB2D3}

/* ---------- category rail ---------- */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cat-card{background:var(--surface);border-radius:var(--r-lg);
  padding:16px 8px;text-align:center;transition:.15s}
.cat-card:hover{border-color:var(--green);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-card .ic{color:var(--green-dk);margin-bottom:8px}
.cat-card b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.cat-card em{font-style:normal;font-size:11px;color:var(--faint)}
.cat-card.dim{opacity:.62}
/* A category with its own picture (Steve, 28 Oct): the photo fills the card and the name sits on a
   dark band fading up from the bottom, white, so it reads on any photo. Same height as the icon
   cards beside it, so a row being filled in picture by picture stays even. */
.cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:128px}
.cat-card.has-photo{position:relative;overflow:hidden;padding:0;justify-content:flex-end;align-items:stretch;
  text-align:left;border-color:transparent;background:var(--forest)}
.cat-card.has-photo .cat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease}
.cat-card.has-photo:hover .cat-photo{transform:scale(1.04)}
.cat-card.has-photo:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,20,40,.86) 0%,rgba(7,20,40,.55) 38%,rgba(7,20,40,0) 72%)}
.cat-card.has-photo .cat-label{position:relative;z-index:1;padding:10px 12px 11px}
.cat-card.has-photo b{color:#fff;font-size:13.5px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.cat-card.has-photo em{color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:14px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:.15s;position:relative}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--line-2)}
/* whole-card click target that doesn't require nesting anchors */
.stretch{position:absolute;inset:0;z-index:1}
.over{position:relative;z-index:2}

/* product tile */
.p-photo{aspect-ratio:4/3;background:linear-gradient(150deg,var(--tint),var(--tint-2));
  display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}
.p-photo svg{opacity:.34;color:var(--forest)}
.p-photo .missing{position:absolute;bottom:7px;left:0;right:0;text-align:center;
  font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#7A8AA6}
.p-body{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;gap:3px}
/* The product leads; two lines of it, because a spec can be long and a truncated one is
   useless. Everything under it is attribution, and reads as attribution. */
.p-name{font-size:14px;font-weight:700;color:var(--forest);letter-spacing:-.01em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-man{font-size:11.5px;color:var(--muted)}
.p-man b{color:var(--body);font-weight:600}
.p-attrs{font-size:12px;color:var(--body);margin-top:5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pack{font-size:11.5px;font-weight:600;color:var(--body);background:var(--canvas);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;white-space:nowrap}
.supc-lock{font-size:11px;color:var(--green-dk);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.supc-lock:hover{text-decoration:underline}

/* badges */
.badge{position:absolute;top:9px;left:9px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:6px}
.b-premium{background:var(--forest);color:#fff}
.b-featured{background:#fff;color:var(--green-dk);border:1px solid var(--green)}
.b-promo{background:var(--amber-bg);color:var(--amber);border:1px solid #F0DFB8}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:20px;background:var(--tint);color:var(--forest)}
.chip-line{background:transparent;border:1px solid var(--line-2);color:var(--muted);font-weight:500}

/* manufacturer card */
.m-card{padding:18px;display:flex;flex-direction:column;gap:9px;position:relative}
/* Square when it's an initials block; landscape when a real logo loads, because
   manufacturer logos are almost always wide wordmarks and a square crops them to nothing.
   --s is the base size, set inline per placement. */
.m-logo{--s:46px;width:var(--s);height:var(--s);border-radius:10px;background:var(--forest);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:15px;letter-spacing:-.02em;flex:0 0 auto;overflow:hidden;position:relative}
/* Drop a file at images/logos/<slug>.png (or .svg) and it replaces the initials.
   Until then .has-logo is never added and the forest initials block shows. */
.m-logo img{display:none;max-width:100%;max-height:100%;object-fit:contain}
.m-logo i{font-style:normal}
/* Square, always — matching the initials block. Logos are supplied as square marks,
   so there is nothing to letterbox. --s is the size, set per placement. */
.m-logo.has-logo{background:#fff;border:1px solid var(--line);color:var(--forest);
  width:var(--s);height:var(--s);padding:5px}.m-logo.has-logo img{display:block}
.m-logo.has-logo i{display:none}
.m-card h3{font-size:15.5px;margin:0;letter-spacing:-.015em}
.m-meta{font-size:12.5px;color:var(--muted);margin:0}
.m-species{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.m-tier{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:5px}

/* promo strip */
.promo{background:var(--amber-bg);border:1px solid #F2E4C3;border-radius:var(--r-lg);padding:16px 18px;
  display:flex;align-items:center;gap:14px}
.promo .ic{color:var(--amber);flex:0 0 auto}
.promo b{display:block;font-size:14px;color:#7A5410}
.promo span{font-size:12.5px;color:#8A6520}

/* recipe card */
.r-photo{aspect-ratio:16/10;background:linear-gradient(150deg,#DCE6F4,#C8D7EE);
  display:flex;align-items:center;justify-content:center;position:relative}
.r-photo svg{opacity:.35;color:var(--forest)}
.r-body{padding:15px 16px 17px}
.r-body h3{font-size:15.5px;margin:0 0 5px;letter-spacing:-.015em;line-height:1.3}
.byline{font-size:12px;color:var(--muted);margin:0}
.byline a{color:var(--green-dk);font-weight:600}
.uses{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
.uses a{color:var(--forest);font-weight:600}
.uses a:hover{color:var(--green-dk)}

/* join band */
.band{background:var(--forest);color:#fff;border-radius:var(--r-lg);padding:30px 34px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.band h2{font-size:22px;margin:0 0 7px;letter-spacing:-.02em}
.band p{margin:0;color:#B8C9E2;font-size:14px;max-width:60ch}
.band .perks{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.band .perks div{display:flex;align-items:center;gap:7px;font-size:13px;color:#DCE6F3}
.band .perks svg{color:var(--green);flex:0 0 auto}
.band .cta{margin-left:auto}

/* filters */
.layout{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;
  position:sticky;top:96px}
.fgroup{padding:12px 0;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0;padding-bottom:0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 9px}
.fopt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body);padding:3px 0;cursor:pointer}
.fopt input{accent-color:var(--green);width:14px;height:14px;cursor:pointer}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--faint)}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .count{font-size:13.5px;color:var(--muted)}
.toolbar .count b{color:var(--ink)}
.toolbar select{margin-left:auto;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;
  font:inherit;font-size:13px;background:#fff;color:var(--body)}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);font-size:13.5px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--canvas);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.y{color:var(--green-dk);font-weight:600}
.tbl td.n{color:var(--faint)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px;position:relative;
  display:flex;flex-direction:column}
.tier.hot{border-color:var(--green);box-shadow:0 8px 26px rgba(31,111,214,.14)}
.tier .rib{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.tier h3{font-size:16px;margin:0 0 3px}
.tier .price{font-size:32px;font-weight:700;letter-spacing:-.03em;margin:12px 0 2px}
.tier .price small{font-size:14px;font-weight:500;color:var(--muted)}
.tier .yr{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.tier ul{list-style:none;padding:0;margin:0 0 20px;font-size:13.5px;color:var(--body)}
.tier li{display:flex;gap:9px;padding:6px 0;align-items:flex-start}
.tier li svg{color:var(--green);flex:0 0 auto;margin-top:3px}
.tier .btn{margin-top:auto}

/* dashboard */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.stat b{display:block;font-size:26px;letter-spacing:-.025em;color:var(--forest)}
.stat span{font-size:12.5px;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.panel h3{font-size:15px;margin:0 0 14px;letter-spacing:-.01em}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.list-row:last-child{border-bottom:0}
.list-row .sub{font-size:12px;color:var(--muted)}

/* forms (manufacturer portal) */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--body);margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--faint);font-weight:400;margin-left:6px}
.field input[type=text],.field textarea,.field select{width:100%;border:1.5px solid var(--line-2);
  border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green)}
.locked{background:var(--canvas);border:1px dashed var(--line-2);border-radius:9px;padding:11px 12px;
  font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px}
.drop{border:1.5px dashed var(--line-2);border-radius:10px;padding:22px;text-align:center;background:var(--canvas)}
.drop b{display:block;font-size:13px;color:var(--body)}
.drop span{font-size:11.5px;color:var(--faint)}

/* footer */
.ftr{background:var(--forest);color:#A6B8D4;margin-top:56px;padding:44px 0 26px;font-size:13px}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.ftr h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.ftr a{display:block;padding:4px 0;color:#A6B8D4}
.ftr a:hover{color:var(--green)}
.ftr .logo svg{height:26px;width:auto}
.ftr .bot{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#7A8AA6;flex-wrap:wrap}

/* prototype ribbon */
.proto-note{background:#FFF8E6;border-bottom:1px solid #F0E2BD;color:#7A5410;font-size:12px;
  padding:7px 0;text-align:center}
.proto-note b{font-weight:700}

/* responsive */
@media(max-width:1080px){
  .rail{grid-template-columns:repeat(5,1fr)}
  .g5{grid-template-columns:repeat(4,1fr)}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .hdr .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
  .hdr .search{order:3;flex-basis:100%;max-width:none}
  .layout{grid-template-columns:1fr}
  .filters{position:static}
  .g5,.g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:27px}
  .band .cta{margin-left:0;width:100%}
}
@media(max-width:560px){
  .rail{grid-template-columns:repeat(3,1fr)}
  .g5,.g4,.g2{grid-template-columns:1fr 1fr}
  .stats{gap:20px}
}

/* keep the manufacturer line to one row even for very long private-label names */
.p-man{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- mobile overrides ----------
   Several layouts set grid-template-columns inline (per-page column widths), and an inline
   style beats a media query, so these need !important to win on small screens. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{min-width:660px}
@media(max-width:860px){
  .layout{grid-template-columns:1fr !important}
  .rail{grid-template-columns:repeat(3,1fr) !important}
  .grid.g4,.grid.g5{grid-template-columns:repeat(2,1fr) !important}
  .grid.g3{grid-template-columns:1fr !important}
  .band,.promo{flex-wrap:wrap}
  .promo .btn{margin-left:0 !important}
}
@media(max-width:560px){
  .rail{grid-template-columns:repeat(2,1fr) !important}
  .stat-row{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:700px){
  .util{display:none}          /* the utility strip can't hold both messages at this width */
  .hdr .wrap{gap:12px}
  .hdr-actions{margin-left:auto}
}

/* ---------- quick view ---------- */
.card .stretch.qv-open{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.card:hover .supc-lock{text-decoration:underline}
/* ⚠ position:FIXED, never relative (Steve, 18 Oct: on iPhone and iPad the quick view opened at the
   top of the page, out of sight, after scrolling down). A modal dialog that is not fixed is laid out
   against the top of the PAGE; Chrome happens to re-centre it, Safari does not. Fixed keeps it in
   the middle of the screen wherever the visitor has scrolled to, and still anchors the × button.
   Taller than the screen: it scrolls inside itself, not the page behind it. */
dialog#qv{border:0;border-radius:18px;padding:0;max-width:540px;width:calc(100% - 32px);
  box-shadow:0 24px 70px rgba(16,24,40,.32);color:var(--ink);
  font-family:var(--font);position:fixed;inset:0;margin:auto;height:-webkit-fit-content;height:fit-content;
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog#qv::backdrop{background:rgba(7,20,40,.5)}
.qv-body{padding:24px 26px 26px}
.qv-photo{aspect-ratio:16/6;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(150deg,var(--tint),var(--tint-2));display:flex;align-items:center;
  justify-content:center;color:var(--forest);position:relative;margin-bottom:16px}
.qv-photo svg{opacity:.34}
.qv-close{position:absolute;top:14px;right:16px;border:0;background:#fff;border-radius:9px;
  width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);
  box-shadow:var(--shadow);z-index:3}
.qv-close:hover{color:var(--ink)}
.badge-slot{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;margin-bottom:9px}
.badge-slot.hide{display:none}
#qv h3{margin:0;font-size:21px;letter-spacing:-.025em}
.qv-sub{margin:4px 0 0;font-size:13px;color:var(--muted)}
.qv-sub b{color:var(--body);font-weight:600}
dl.sp{margin:16px 0 0;display:flex;flex-direction:column}
.sr{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sr:last-child{border-bottom:0}
.sr dt{color:var(--muted);width:96px;flex:0 0 auto}
.sr dd{margin:0;color:var(--body);font-weight:500}
.lockedlink{color:var(--green-dk);font-weight:600}
.lockedlink:hover{text-decoration:underline}
.qv-actions{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.qv-raw{background:var(--canvas);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:11.5px;color:var(--muted);margin:16px 0 0;word-break:break-word}
@media(max-width:560px){
  .qv-actions .btn{width:100%;justify-content:center}
  .sr dt{width:80px}
}

/* spec chips on the compact tile */
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ch{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:20px;line-height:1.5;
  background:var(--canvas);border:1px solid var(--line-2);color:var(--body);white-space:nowrap}
.ch-key{background:var(--forest);border-color:var(--forest);color:#fff}
/* the .missing caption is scoped to .p-photo; the dialog needs its own */
.qv-photo .missing{position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#7A8AA6}

/* ---------- theme additions ---------- */
.qv-others{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.qv-others a{color:var(--green-dk);font-weight:600}
.qv-others a:hover{text-decoration:underline}
.p-photo img,.qv-photo img,.r-photo img{width:100%;height:100%;object-fit:cover;display:block}   /* .r-photo added 22 Sept: recipe photos were stretching */
.qv-photo{aspect-ratio:16/6;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(150deg,var(--tint),var(--tint-2));display:flex;align-items:center;
  justify-content:center;color:var(--forest);position:relative;margin-bottom:16px;overflow:hidden}
.qv-photo .missing{position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#7A8AA6}
/* WordPress pagination, styled to match */
.navigation.pagination{display:flex;justify-content:center;margin-top:8px}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--body);
  font-size:14px;font-weight:600}
.page-numbers:hover{border-color:var(--green);color:var(--green-dk)}
.page-numbers.current{background:var(--forest);border-color:var(--forest);color:#fff}
.page-numbers.dots{border:0;background:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip:auto;
  padding:12px 18px;background:#fff;color:var(--forest);font-weight:600}

/* ---------- filter sidebar (FacetWP) ---------- */
/* The sidebar only exists when FacetWP is active; without it .browse has no columns and the
   grid keeps the full width, which is exactly the page as it was before filtering existed. */
.browse.with-filters{display:grid;grid-template-columns:252px 1fr;gap:26px;align-items:start}
.browse .results{min-width:0}

.filters .f-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.filters .f-head b{font-size:13px}
.filters .f-head .efs-reset{margin-left:auto;font-size:12px;color:var(--green-dk);font-weight:600}
.filters .f-head .efs-reset:hover{text-decoration:underline}
.filters .efs-filter-close{display:none}

.f-block{padding:10px 0;border-bottom:1px solid var(--line)}
.f-block:last-child{border-bottom:0;padding-bottom:0}
.f-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0 0 6px}
/* FacetWP leaves its container at full height even when the control inside is a single
   dropdown, which is what left those gaps between filters. */
.f-block .facetwp-facet{margin-bottom:0}
.f-block .fs-wrap{display:block}
/* Empty filters are hidden by filters.js, which can see both shapes — see hideEmpty(). This
   rule stays as the no-JavaScript fallback for the checkbox case it can catch. */
.f-block:has(.facetwp-facet:empty){display:none}
.f-block[hidden]{display:none}

.facetwp-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body);
  padding:3px 0;cursor:pointer;background:none;padding-left:22px;position:relative;line-height:1.5}
.facetwp-checkbox:before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  border:1.5px solid var(--line-2);border-radius:4px;background:#fff}
.facetwp-checkbox.checked{color:var(--ink);font-weight:600}
.facetwp-checkbox.checked:before{background:var(--green);border-color:var(--green)}
.facetwp-checkbox.checked:after{content:"";position:absolute;left:4px;top:7px;width:6px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.facetwp-checkbox:hover{color:var(--green-dk)}
.facetwp-counter{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:500}
.facetwp-depth{margin-left:14px;border-left:1px solid var(--line);padding-left:8px}
.facetwp-toggle,.facetwp-hidden+.facetwp-toggle{display:inline-block;margin-top:6px;font-size:12px;
  color:var(--green-dk);font-weight:600;cursor:pointer}
.facetwp-toggle:hover{text-decoration:underline}

/* fSelect (the searchable dropdowns) */
.fs-wrap{width:100%}
.fs-label-wrap{border:1.5px solid var(--line-2);border-radius:9px;background:#fff}
.fs-label-wrap .fs-label{font-size:13px;color:var(--body);padding:9px 11px}
.fs-wrap.multiple .fs-option.selected .fs-checkbox i{background:var(--green);border-color:var(--green)}
.fs-dropdown{border:1px solid var(--line-2);border-radius:9px;box-shadow:var(--shadow-md);font-size:13px}
.fs-search input{font:inherit;font-size:13px}

/* Active filters, above the grid */
.facetwp-selections{margin:0}
.facetwp-selections ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.facetwp-selections li{display:inline-flex;align-items:center;gap:6px;background:var(--tint);
  border:1px solid var(--tint-2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--forest)}
.facetwp-selections .facetwp-selection-label{font-weight:600}
.facetwp-selections .facetwp-selection-value{cursor:pointer}
.facetwp-selections .facetwp-selection-value:after{content:" ×";color:var(--muted)}

/* Pager, matching the native one it replaces */
.pager{margin-top:26px}
.facetwp-pager{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.facetwp-page{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--body);
  font-size:14px;font-weight:600;cursor:pointer}
.facetwp-page:hover{border-color:var(--green);color:var(--green-dk)}
.facetwp-page.active{background:var(--forest);border-color:var(--forest);color:#fff}
.facetwp-page.dots{border:0;background:none;cursor:default}

.toolbar .efs-filter-toggle{display:none}

/* FacetWP dims the listing while it fetches; keep that from looking like a broken page. */
.facetwp-template.is-loading{opacity:.45;transition:opacity .15s}

@media(max-width:900px){
  .browse.with-filters{grid-template-columns:1fr}
  .toolbar .efs-filter-toggle{display:inline-flex}
  .filters{position:fixed;inset:0 auto 0 0;width:min(88vw,320px);z-index:80;border-radius:0;
    overflow-y:auto;transform:translateX(-102%);transition:transform .2s ease;box-shadow:var(--shadow-md)}
  body.filters-open .filters{transform:none}
  body.filters-open:after{content:"";position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:70}
  .filters .efs-filter-close{display:inline-flex;margin-left:0}
  .filters .f-head .efs-reset{margin-left:auto}
}

/* Collapsible categories. The .efs-acc class is added by filters.js, so a visitor whose
   JavaScript failed gets the full tree open rather than a filter with nothing in it. */
.efs-acc .efs-grp-head{font-weight:600;color:var(--ink);padding-left:20px;padding-top:7px;
  padding-bottom:7px;border-top:1px solid var(--line)}
.efs-acc .efs-grp-head:first-child{border-top:0;padding-top:2px}
.efs-acc .efs-grp-head:before{display:none}
.efs-acc .efs-grp-head:after{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s;border-radius:0;background:none;
  clip-path:none;opacity:1}
.efs-acc .efs-grp-head[aria-expanded="true"]:after{transform:rotate(45deg);top:10px}
.efs-acc .efs-grp-head:hover:after{border-color:var(--green-dk)}
.efs-acc .efs-grp-head.checked{color:var(--forest)}
.efs-acc .efs-grp-body{margin-left:6px;border-left:1px solid var(--line);padding:2px 0 8px 10px}
.efs-acc .efs-grp-body[hidden]{display:none}

/* Categories not open yet. Rendered as plain text, not links to nowhere — the prototype used
   href="#", which is a dead end for anyone on a keyboard or a screen reader. */
.catnav .soon{display:flex;align-items:center;gap:6px;padding:13px 10px;font-size:13.5px;
  font-weight:500;color:var(--faint);white-space:nowrap;border-bottom:2.5px solid transparent;
  cursor:default}
span.cat-card{cursor:default}
span.cat-card:hover{border-color:var(--line);box-shadow:none;transform:none}

/* Logo upload, shown only to someone who can edit the manufacturer. */
.m-logo-wrap{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.logo-edit{font-size:12px}
.logo-edit summary{cursor:pointer;color:var(--green-dk);font-weight:600;list-style:none}
.logo-edit summary::-webkit-details-marker{display:none}
.logo-edit summary:before{content:"↑ ";font-weight:700}
.logo-edit summary:hover{text-decoration:underline}
.logo-edit form{margin-top:8px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r);
  background:#fff;display:flex;flex-direction:column;gap:8px;min-width:260px}
.logo-edit input[type=file]{font:inherit;font-size:12px}
.logo-edit button{align-self:flex-start}
.logo-edit .hint{color:var(--muted);font-size:11.5px;line-height:1.5;max-width:34ch}
.logo-note{border-radius:var(--r);padding:11px 14px;margin-bottom:14px;font-size:13.5px}
.logo-note.ok{background:var(--tint);border:1px solid var(--tint-2);color:var(--forest)}
.logo-note.bad{background:#FDF3F2;border:1px solid #F3D6D3;color:#8C2F26}

/* The spec filters, folded away under the three that matter. */
.f-more{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.f-more>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--green-dk);
  list-style:none;padding:4px 0}
.f-more>summary::-webkit-details-marker{display:none}
.f-more>summary:before{content:"+ ";font-weight:700}
.f-more[open]>summary:before{content:"– "}
.f-more>summary:hover{text-decoration:underline}
.f-more .f-block:first-of-type{border-top:1px solid var(--line);margin-top:6px}

/* Shown only when nothing has been indexed, so every filter would be empty. */
.f-none{font-size:12.5px;color:var(--muted);line-height:1.6;margin:6px 0 0}
.f-none.f-admin{margin-top:10px;padding:10px;border:1px dashed var(--line-2);border-radius:var(--r);
  background:#FDF6E7;color:#7A5B12}
.f-none a{color:var(--green-dk);font-weight:600}
.f-more[hidden]{display:none}

/* --- FacetWP cascade fixes -------------------------------------------------
   FacetWP's front.css is enqueued after site.css, so where our selectors tie
   with its own on specificity, FacetWP wins. One extra class tips each back.
   Remove these if site.css is ever made to load after FacetWP instead. */

/* Its PNG checkbox showed through behind our :before box, 2px out of line. */
.facetwp-facet .facetwp-checkbox,
.facetwp-facet .facetwp-checkbox.checked{background-image:none;padding-left:22px}

/* Its .facetwp-depth.visible{display:inherit} beat our collapse rule, so the
   chevron rotated but nothing folded. */
.facetwp-facet.efs-acc .efs-grp-body[hidden]{display:none}

/* FacetWP's own [-] toggle duplicates our chevron and works by a different
   mechanism (.visible vs the hidden attribute), so the two desync. */
.facetwp-facet.efs-acc .efs-grp-head .facetwp-expand{display:none}

/* The quick view's Contact rep button jumps to #contact on the manufacturer page. The header is
   sticky, so without this the panel's heading lands underneath it. 96px matches the sticky aside. */
#contact{scroll-margin-top:96px}

/* "Your listing" — the manufacturer's own editor for HQ, website, About and logo (efs-core,
   21 Sept). Matches the reps editor below it. Its notices are styled here so it does not depend on
   the photos plugin's stylesheet being loaded, the way the reps editor's do. */
.efs-mylisting{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec);scroll-margin-top:96px}
.efs-mylisting h2{margin:0 0 6px;font-size:20px}
.efs-ml-intro{margin:0 0 16px;font-size:13px;color:var(--muted,#667085);max-width:68ch;line-height:1.6}
.efs-ml-progress{margin:0 0 6px;font-size:14px}
.efs-ml-complete{color:var(--green-dk,#1A5DB5)}
.efs-ml-field{margin:0 0 16px;max-width:560px}
.efs-ml-field>label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.efs-ml-req,.efs-ml-opt{font-weight:400;font-size:12px;margin-left:4px}
.efs-ml-req{color:var(--green-dk,#1A5DB5)}
.efs-ml-opt{color:var(--muted,#667085)}
.efs-ml-field input[type=text],.efs-ml-field textarea{width:100%;padding:8px 10px;border:1px solid #d0d5dd;
  border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit}
.efs-ml-field input[type=text]:focus,.efs-ml-field textarea:focus{outline:none;border-color:var(--green,#1F6FD6)}
.efs-ml-hint{display:block;margin-top:5px;font-size:12px;color:var(--muted,#667085)}
.efs-ml-logo-now{display:inline-block;padding:10px 14px;margin:0 0 8px;background:#fff;border:1px solid var(--line,#e4e7ec);border-radius:8px}
.efs-ml-logo-now img{display:block;max-height:60px;width:auto}
.efs-ml-check{display:block;font-size:13px;margin:0 0 8px}
.efs-mylisting .efs-mp-notice{padding:10px 14px;border-radius:8px;font-size:14px;margin:0 0 12px}
.efs-mylisting .efs-mp-saved{background:#ecfdf3;color:#155c39}
.efs-mylisting .efs-mp-failed{background:#fffaeb;color:#93370d}
.efs-mylisting .efs-mp-denied{background:#fef3f2;color:#b42318}

/* Saved items (21 Sept). Save buttons are in every page but hidden until saved.js runs — which it
   does only for accounts that may save — so nobody sees a control they cannot use. */
.efs-save{display:none}
.efs-can-save .efs-save{display:inline-flex}
.efs-save-tile{position:absolute;top:8px;right:8px;z-index:2;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--forest,#0B2545);box-shadow:0 1px 3px rgba(16,24,40,.18)}
.efs-save-tile:hover{background:#fff}
.efs-save-tile:focus-visible,.efs-save-qv:focus-visible{outline:2px solid var(--green,#1F6FD6);outline-offset:2px}
.efs-save.is-saved{color:var(--green,#1F6FD6)}
.efs-save.is-saved svg path{fill:currentColor}
.efs-save-qv{align-items:center;gap:6px}
.efs-saved{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec);scroll-margin-top:96px}
.efs-saved h2{margin:0 0 6px;font-size:20px;display:flex;align-items:center;gap:8px}
.efs-saved-count{font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--tint,#EAF2FC);color:var(--forest,#0B2545)}
.efs-saved-intro,.efs-saved-empty{margin:0 0 16px;font-size:13px;color:var(--muted,#667085);max-width:68ch;line-height:1.6}

/* Saved items on My account: three wider tiles a row, so product names fit (Steve, 21 Sept). That
   page's column is narrower than the catalogue's, and four across cut the names off. Wide screens
   only; at 860px and below it keeps the two-a-row the four-column grid already drops to. */
@media(min-width:861px){.efs-saved .grid.g4{grid-template-columns:repeat(3,1fr)}}

/* Product videos (efs-core 0.10.0, 21 Sept): a 16:9 player that loads only when scrolled to, and the
   manufacturer's "Your videos" editor, matched to "Your listing" above it. */
.efs-video{margin:0 0 16px}
.efs-video:last-child{margin-bottom:0}
.efs-video-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#101828}
.efs-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.efs-video figcaption{margin-top:8px;font-size:14px;line-height:1.5}
.efs-video figcaption b{display:block}
.efs-video-shows{color:var(--muted,#667085);font-size:13px}
.efs-video-shows a{color:var(--green-dk,#1A5DB5)}
.efs-myvideos{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec);scroll-margin-top:96px}
.efs-myvideos h2{margin:0 0 6px;font-size:20px}
.efs-mv-intro,.efs-mv-kept{margin:0 0 12px;font-size:13px;color:var(--muted,#667085);max-width:68ch;line-height:1.6}
.efs-mv-unlisted{margin:0 0 16px;padding:10px 14px;border-radius:8px;background:#fffaeb;color:#93370d;font-size:13px;line-height:1.6;max-width:68ch}
.efs-mv-row{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line,#e4e7ec);border-radius:10px;max-width:600px}
.efs-mv-row legend{padding:0 6px;font-weight:600;font-size:14px}
.efs-mv-label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.efs-mv-products{max-height:190px;overflow:auto;padding:8px 10px;border:1px solid #d0d5dd;border-radius:6px;background:#fff}
.efs-mv-products label{display:block;font-size:13px;padding:3px 0}
.efs-myvideos .efs-mp-notice{padding:10px 14px;border-radius:8px;font-size:14px;margin:0 0 12px}
.efs-myvideos .efs-mp-saved{background:#ecfdf3;color:#155c39}
.efs-myvideos .efs-mp-failed{background:#fffaeb;color:#93370d}
.efs-myvideos .efs-mp-denied{background:#fef3f2;color:#b42318}
.qv-videos:not(:empty){margin-top:14px}   /* quick view's videos, 21 Sept */
.efs-mv-hidden{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:#fef3f2;color:#b42318;font-size:13px;line-height:1.5}   /* unlisted check, 21 Sept */

/* Recently viewed (21 Sept). Shares Saved items' look and three-a-row rule; the Clear button sits
   beside the heading. */
.efs-viewed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.efs-viewed-head h2{margin:0}
.efs-viewed-clear{margin:0}

/* Documents and point-of-sale materials (efs-core 0.13.0, 22 Sept). */
.efs-docs-kind{margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--muted,#667085);text-transform:uppercase;letter-spacing:.04em}
.efs-docs-kind:first-of-type{margin-top:4px}
.efs-docs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.efs-doc a{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line,#e4e7ec);border-radius:10px;
  text-decoration:none;color:inherit;background:#fff}
.efs-doc a:hover{border-color:var(--green,#1F6FD6)}
.efs-doc-thumb{flex:0 0 48px;height:48px;border-radius:6px;overflow:hidden;background:#f2f4f7;display:flex;align-items:center;justify-content:center}
.efs-doc-thumb img{width:100%;height:100%;object-fit:cover}
.efs-doc-pdf{font-size:11px;font-weight:700;color:#b42318;letter-spacing:.05em}
.efs-doc-text{display:flex;flex-direction:column;min-width:0}
.efs-doc-text b{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.efs-doc-text span{font-size:12px;color:var(--muted,#667085)}
.efs-mydocs{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec);scroll-margin-top:96px}
.efs-mydocs h2{margin:0 0 6px;font-size:20px}
.efs-mydocs-list{list-style:none;margin:0 0 18px;padding:0;max-width:640px}
.efs-mydocs-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line,#e4e7ec)}
.efs-mydocs-list li span{font-size:12px;color:var(--muted,#667085)}
.efs-mydocs-list li form{margin:0 0 0 auto}
.efs-mydocs-hidden{flex-basis:100%;color:#93370d !important}
.efs-doc-kinds{border:0;padding:0}
.efs-doc-kinds legend{font-weight:600;font-size:14px;margin-bottom:5px}
.efs-doc-kinds label{display:inline-flex;gap:6px;margin-right:16px;font-size:14px}
.efs-mydocs .efs-mp-notice{padding:10px 14px;border-radius:8px;font-size:14px;margin:0 0 12px}
.efs-mydocs .efs-mp-saved{background:#ecfdf3;color:#155c39}
.efs-mydocs .efs-mp-failed{background:#fffaeb;color:#93370d}
/* A PDF's first-page picture, badged so it still reads as a PDF (22 Sept). */
.efs-doc-thumb{position:relative}
.efs-doc-thumb img{object-position:top}   /* a page is tall: show its top, where the title is */
.efs-doc-badge{position:absolute;right:2px;bottom:2px;padding:1px 4px;border-radius:3px;background:#b42318;color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em}

/* Related products, at the foot of a product page (23 Sept). */
.efs-related{margin-top:22px;padding-top:20px;border-top:1px solid var(--line,#e4e7ec)}
.efs-related h2{margin:0 0 12px;font-size:17px}
.efs-related-plain{display:block;padding:12px 14px;border:1px solid var(--line,#e4e7ec);border-radius:10px;
  background:#fff;text-decoration:none;color:inherit}
@media print{.efs-related{display:none}}

/* Testimonials the manufacturer chose, and the counted interest line (23 Sept). */
.efs-tm-note{margin:0 0 12px;font-size:12px;color:var(--muted,#667085)}
.efs-tm{margin:0 0 14px;padding:0 0 0 14px;border-left:3px solid var(--green,#1F6FD6)}
.efs-tm:last-child{margin-bottom:0}
.efs-tm blockquote{margin:0;font-size:15px;line-height:1.55}
.efs-tm figcaption{margin-top:5px;font-size:13px;color:var(--muted,#667085)}
.efs-interest{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--tint,#EAF2FC);
  font-size:14px;color:var(--ink,#101828)}
.efs-mytms{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec);scroll-margin-top:96px}
.efs-mytms h2{margin:0 0 6px;font-size:20px}
.efs-tm-rules{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#fffaeb;color:#93370d;font-size:13px}
.efs-mytm-row{border:1px solid var(--line,#e4e7ec);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.efs-mytm-row legend{font-size:13px;font-weight:600;padding:0 6px}
.efs-mytm-row textarea{width:100%;font-family:inherit;font-size:14px}
.efs-mytm-who{display:flex;gap:12px;flex-wrap:wrap}
.efs-mytm-who label{flex:1;min-width:180px}
.efs-mytms .efs-mp-notice{padding:10px 14px;border-radius:8px;font-size:14px;margin:0 0 12px}
.efs-mytms .efs-mp-saved{background:#ecfdf3;color:#155c39}
.efs-mytms .efs-mp-failed{background:#fffaeb;color:#93370d}

/* A chef's own words: the form, what is waiting, and what is published (23 Sept). */
.efs-feedback{margin-top:16px}
.efs-feedback-intro{margin:0 0 12px;font-size:14px;color:var(--muted,#667085)}
.efs-feedback textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid #d0d5dd;border-radius:8px}
.efs-feedback-consent{margin:0 0 6px;font-size:14px}
.efs-feedback-credit{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;padding-left:24px;font-size:14px}
.efs-tm-waiting{margin:0 0 18px;padding:14px 16px;border:1px solid var(--green,#1F6FD6);border-radius:10px;background:#F5F9FE}
.efs-tm-waiting h3{margin:0 0 4px;font-size:15px}
.efs-tm-waiting p{margin:0 0 12px;font-size:13px;color:var(--muted,#667085)}
.efs-tm-sug{padding:10px 0;border-top:1px solid var(--line,#e4e7ec)}
.efs-tm-sug blockquote{margin:0 0 4px;font-size:15px;line-height:1.5}
.efs-tm-sug figcaption{margin:0 0 8px;font-size:12px;color:var(--muted,#667085)}
.efs-mytm-locked{background:#f9fafb}
.efs-mytm-locked blockquote{margin:0 0 4px;font-size:15px;line-height:1.5}
.efs-mytm-locked figcaption{font-size:12px;color:var(--muted,#667085)}
.efs-tm-locked-note{margin:8px 0;font-size:12px;color:#93370d}
.efs-myfb{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line,#e4e7ec)}
.efs-myfb h2{margin:0 0 4px;font-size:20px}
.efs-myfb-note{margin:0 0 12px;font-size:13px;color:var(--muted,#667085)}
.efs-myfb ul{list-style:none;margin:0;padding:0;max-width:640px}
.efs-myfb li{padding:12px 0;border-top:1px solid var(--line,#e4e7ec)}
.efs-myfb blockquote{margin:0 0 4px;font-size:14px;line-height:1.5}
.efs-myfb span{font-size:12px;color:var(--muted,#667085)}
.efs-myfb form{margin-top:6px}

/* How many products at once, in the toolbar (26 Sept). */
.efs-perpage{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#667085);margin-left:auto}
.efs-perpage-label{color:var(--muted,#667085)}
.efs-perpage a,.efs-perpage b{padding:3px 9px;border-radius:7px;text-decoration:none;font-weight:500;
  color:var(--muted,#667085);border:1px solid transparent}
.efs-perpage a:hover{border-color:var(--line,#e4e7ec);color:var(--ink,#101828)}
.efs-perpage b{background:var(--green,#1F6FD6);color:#fff;font-weight:600}
@media print{.efs-perpage{display:none}}


/* "Not everything is stocked everywhere" — the note and the site picker (27 Sept). */
.efs-sitefilter{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line,#e4e7ec);border-radius:12px;
  background:var(--tint,#EAF2FC)}
.efs-sitefilter-note{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink,#101828)}
.efs-sitefilter-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}
.efs-sitefilter-form select{font:inherit;padding:7px 10px;border:1px solid #d0d5dd;border-radius:8px;
  background:#fff;color:var(--ink,#101828);max-width:320px}
.efs-sitefilter-form label{color:var(--muted,#667085)}
.efs-sitefilter-clear,.efs-sitefilter-mine{font-size:13px;color:var(--green,#1F6FD6)}
@media print{.efs-sitefilter{display:none}}

/* The owner's editors, folded into sections (Steve, 1 Oct). Chefs never see these. */
.efs-acc{margin:26px 0 20px}      /* space above the first section, under the chef-facing part */
/* ⚠ NO overflow:hidden HERE (Steve, 1 Oct). It was rounding the corners, and it CLIPPED any
   editor taller than the browser expected — the video and photo lists ran off the bottom with no
   way to scroll to them. The corners are rounded on the parts themselves instead. */
.efs-acc-item{border:1px solid var(--line,#e4e7ec);border-radius:12px;background:#fff;margin:0 0 10px}
.efs-acc-head{cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;font-size:17px;
  color:var(--ink,#101828);display:flex;align-items:center;gap:10px;user-select:none;
  border-radius:11px}                                   /* its own corners, so the box needs none */
.efs-acc-item[open] .efs-acc-head{border-radius:11px 11px 0 0}
.efs-acc-head::-webkit-details-marker{display:none}      /* Safari draws its own triangle */
.efs-acc-head::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--muted,#667085);border-bottom:2px solid var(--muted,#667085);
  transform:rotate(45deg);transition:transform .15s ease}
.efs-acc-item[open] .efs-acc-head::after{transform:rotate(-135deg)}
.efs-acc-head:hover{background:var(--tint,#EAF2FC)}
.efs-acc-head:focus-visible{outline:2px solid var(--green,#1F6FD6);outline-offset:-2px}
.efs-acc-body{padding:0 18px 18px}
.efs-acc-body>.panel{border:0;padding:0;margin:0;background:none}   /* no box inside a box */
/* ⚠ On paper every section is open: a printed page cannot be unfolded. CSS alone CANNOT do this —
   a closed <details> is not laid out at all, so there is nothing for display:block to reveal; the
   first attempt printed nine headings and no content (Steve, 1 Oct). accordion.js opens them all
   before the print dialogue and closes them again afterwards. This only tidies what prints. */
@media print{
  .efs-acc-item{border:0;margin:0 0 6px;break-inside:auto}
  .efs-acc-head{padding:10px 0;border-bottom:1px solid #ddd}
  .efs-acc-head::after{display:none}
  .efs-acc-body{padding:8px 0 0}
}

/* "Chefs at 23 Sysco sites see you" — the owner's own coverage line (2 Oct). */
.efs-coverage{margin:0 0 12px;font-size:14px;color:var(--muted,#667085)}
.efs-coverage-warn{color:#8a5a00;background:#fff6e5;border:1px solid #f0d8a8;border-radius:8px;padding:10px 12px}

/* ---------------------------------------------------------------- the blog (EFS_Blog, 7 Oct) */
/* "Sponsored by" — disclosure as much as decoration, so it is always readable, never faint.
   Premium gets the stronger, filled styling; Featured the outlined one. */
.efs-sponsor{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;line-height:1.3;
  padding:3px 9px;border-radius:999px;margin:0 0 8px;color:var(--forest);background:#EAF2FC;border:1px solid #C9DBF5}
.efs-sponsor-premium{color:#fff;background:var(--forest);border-color:var(--forest)}
.efs-post-card .r-body h3{margin-bottom:3px}
.efs-post-date{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.efs-post-sum{margin:0;font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.efs-post-wrap{max-width:760px}
.efs-post-head h1{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:4px 0 6px}
.efs-post-hero{margin:18px 0 22px;border-radius:var(--r-lg);overflow:hidden}
.efs-post-hero img{width:100%;height:auto;display:block}
.efs-post-body{font-size:16.5px;line-height:1.75;color:var(--body)}
.efs-post-body h2{font-size:22px;margin:30px 0 10px;letter-spacing:-.02em}
.efs-post-body h3{font-size:18px;margin:24px 0 8px}
.efs-post-body img{max-width:100%;height:auto;border-radius:var(--r)}
.efs-post-body figure{margin:22px 0}
.efs-post-body figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.efs-post-body iframe{max-width:100%}
.efs-post-body .wp-block-embed__wrapper{position:relative}
.efs-post-body blockquote{margin:22px 0;padding:4px 0 4px 18px;border-left:3px solid var(--green);color:var(--ink)}
.efs-post-sponsor{display:flex;gap:14px;align-items:center;margin:30px 0 0;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--canvas)}
.efs-post-sponsor p{margin:0 0 3px;font-size:14px}
.efs-post-sponsor a{font-size:14px;font-weight:600}
.efs-post-join{margin-top:30px}
.efs-post-back{margin:22px 0 0;font-size:14px}
.efs-blog-pages{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0}
.efs-blog-pages a,.efs-blog-pages span{min-width:34px;padding:6px 10px;text-align:center;border:1px solid var(--line);
  border-radius:8px;font-size:14px;text-decoration:none}
.efs-blog-pages span{background:var(--forest);border-color:var(--forest);color:#fff}
.efs-blog-empty{color:var(--muted)}
@media (max-width:640px){ .efs-post-head h1{font-size:24px} .efs-post-body{font-size:16px} }

/* ------------------------------------------------- English / Español (EFS_Lang, 8 Oct) */
/* Words, not flags: a flag is a country, and the Spanish here is Mexican Spanish. */
.efs-lang{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.efs-lang a{font-size:12.5px;font-weight:500;line-height:1;padding:7px 10px;border-radius:999px;color:var(--body);text-decoration:none}
.efs-lang a:hover{color:var(--forest)}
.efs-lang a.on{background:var(--forest);color:#fff}

/* On a desktop the bar WRAPS rather than scrolling (9 Oct). Its scrollbar is hidden, so anything
   past the edge was simply cut off — "Todas las categorías" in Spanish, whose names run longer
   than the English. A second row is better than a category nobody can see. Phones keep the
   sideways swipe, which is how a phone user expects a bar like this to behave. */
@media(min-width:861px){
  .catnav .wrap{flex-wrap:wrap;overflow-x:visible;column-gap:0}
  .catnav a,.catnav .soon{padding:12px 7px;gap:5px}
}

/* A listing's cover photo (9 Oct): the featured image, a wide band above the name and logo. */
.m-cover{border-radius:14px;overflow:hidden;aspect-ratio:4/1;background:var(--line,#e7e5df);margin-bottom:-28px}
.m-cover img{display:block;width:100%;height:100%;object-fit:cover}
.panel.m-head-covered{position:relative;margin:0 18px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
@media (max-width:640px){
  .m-cover{aspect-ratio:5/2;margin-bottom:-18px}
  .panel.m-head-covered{margin:0 8px}
}
.efs-ml-cover-now{margin:6px 0 8px;max-width:420px;border-radius:8px;overflow:hidden;border:1px solid var(--line,#e7e5df)}
.efs-ml-cover-now img{display:block;width:100%;height:auto}

/* The Manufacturers directory's search (18 Oct). One box, so on phones it sits above the cards
   rather than sliding in from the side like the product filters. */
.m-dir .m-q{width:100%;box-sizing:border-box;border:1.5px solid var(--line-2);border-radius:8px;
  padding:9px 11px;font:inherit;font-size:14px;color:var(--ink);background:#fff}
.m-dir .m-q:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--tint-2)}
.m-dir .m-go{width:100%;justify-content:center;margin-top:10px}
.m-dir select.m-q{padding:8px 9px}
.m-dir .m-hint{margin:6px 0 0;font-size:11.5px;line-height:1.4;color:var(--faint)}
.m-dir .m-here{align-items:flex-start;line-height:1.35}
.m-dir .m-here input{margin-top:2px;flex:0 0 auto}
.m-dir .fgroup h4 label{cursor:pointer}
.m-pager{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.m-pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--body);
  font-size:14px;font-weight:600}
a.m-pg:hover{border-color:var(--green);color:var(--green-dk)}
.m-pg.active{background:var(--forest);border-color:var(--forest);color:#fff}
.m-pg.dots{border:0;background:none}
@media(max-width:900px){
  .m-dir .filters{position:static;inset:auto;width:auto;z-index:auto;transform:none;
    border-radius:var(--r-lg);box-shadow:none;overflow:visible;margin-bottom:16px}
}